decidim-theme 0.1.4

data/app/packs/stylesheets/decidim/theme/reset/_switch.scss

@@ -0,0 +1,272 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group switch
+////
+
+/// Background color of a switch.
+/// @type Color
+$switch-background: $medium-gray;
+
+/// Background active color of a switch.
+/// @type Color
+$switch-background-active: $primary-color;
+
+/// Height of a switch, with no class applied.
+/// @type Number
+$switch-height: 2rem;
+
+/// Height of a switch with .tiny class.
+/// @type Number
+$switch-height-tiny: 1.5rem;
+
+/// Height of a switch with .small class.
+/// @type Number
+$switch-height-small: 1.75rem;
+
+/// Height of a switch with .large class.
+/// @type Number
+$switch-height-large: 2.5rem;
+
+/// Border radius of the switch
+/// @type Number
+$switch-radius: $global-radius;
+
+/// border around a modal.
+/// @type Number
+$switch-margin: $global-margin;
+
+/// Background color for the switch container and paddle.
+/// @type Color
+$switch-paddle-background: $white;
+
+/// Spacing between a switch paddle and the edge of the body.
+/// @type Number
+$switch-paddle-offset: 0.25rem;
+
+/// border radius of the switch paddle
+/// @type Number
+$switch-paddle-radius: 32px;
+
+/// switch transition.
+/// @type Number
+$switch-paddle-transition: all 0.25s ease-out;
+
+/// Opacity of a disabled switch.
+/// @type Number
+$switch-opacity-disabled: 0.5;
+
+/// Cursor for a disabled switch.
+/// @type Cursor
+$switch-cursor-disabled: not-allowed;
+
+// make them variables
+// ask about accessibility on label
+// change class name for text
+
+/// Adds styles for a switch container. Apply this to a container class.
+@mixin switch-container {
+  position: relative;
+  margin-bottom: $switch-margin;
+  outline: 0;
+
+  // These properties cascade down to the switch text
+  font-size: rem-calc(14);
+  font-weight: bold;
+  color: $white;
+
+  user-select: none;
+}
+
+/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
+@mixin switch-input {
+  position: absolute;
+  margin-bottom: 0;
+  opacity: 0;
+}
+
+/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
+@mixin switch-paddle {
+  $switch-width: $switch-height * 2;
+  $paddle-height: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-width: $switch-height - ($switch-paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
+
+  position: relative;
+  display: block;
+  width: $switch-width;
+  height: $switch-height;
+
+  border-radius: $switch-radius;
+  background: $switch-background;
+  transition: $switch-paddle-transition;
+
+  // Resetting these <label> presets so type styles cascade down
+  font-weight: inherit;
+  color: inherit;
+
+  cursor: pointer;
+
+  // Needed to override specificity
+  input + & {
+    margin: 0;
+  }
+
+  // The paddle itself
+  &::after {
+    position: absolute;
+    top: $switch-paddle-offset;
+    #{$global-left}: $switch-paddle-offset;
+
+    display: block;
+    width: $paddle-width;
+    height: $paddle-height;
+
+    transform: translate3d(0, 0, 0);
+    border-radius: $switch-paddle-radius;
+    background: $switch-paddle-background;
+    transition: $switch-paddle-transition;
+    content: "";
+  }
+
+  // Change the visual style when the switch is active
+  input:checked ~ & {
+    background: var(--primary);
+
+    &::after {
+      #{$global-left}: $paddle-active-offest;
+    }
+  }
+
+  // indicate a disabled switch
+  input:disabled ~ & {
+    cursor: $switch-cursor-disabled;
+    opacity: $switch-opacity-disabled;
+  }
+
+  input:focus ~ & {
+    @include disable-mouse-outline;
+  }
+}
+
+/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
+@mixin switch-text {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/// Adds styles for the active state text within a switch.
+@mixin switch-text-active {
+  #{$global-left}: 8%;
+  display: none;
+
+  input:checked + label > & {
+    display: block;
+  }
+}
+
+/// Adds styles for the inactive state text within a switch.
+@mixin switch-text-inactive {
+  #{$global-right}: 15%;
+
+  input:checked + label > & {
+    display: none;
+  }
+}
+
+/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
+/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
+/// @param {Number} $switch-height [2rem] - Height of the switch body.
+/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
+@mixin switch-size(
+  $font-size: 1rem,
+  $switch-height: 2rem,
+  $paddle-offset: 0.25rem
+) {
+  $switch-width: $switch-height * 2;
+  $paddle-width: $switch-height - ($paddle-offset * 2);
+  $paddle-height: $switch-height - ($paddle-offset * 2);
+  $paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
+
+  height: $switch-height;
+
+  .switch-paddle {
+    width: $switch-width;
+    height: $switch-height;
+    font-size: $font-size;
+  }
+
+  .switch-paddle::after {
+    top: $paddle-offset;
+    #{$global-left}: $paddle-offset;
+    width: $paddle-width;
+    height: $paddle-height;
+  }
+
+  input:checked ~ .switch-paddle::after {
+    #{$global-left}: $paddle-active-offest;
+  }
+}
+
+@mixin foundation-switch {
+  // Container class
+  .switch {
+    @include switch-container;
+    height: $switch-height;
+  }
+
+  // <input> element
+  .switch-input {
+    @include switch-input;
+  }
+
+  // <label> element
+  .switch-paddle {
+    @include switch-paddle;
+  }
+
+  // Base label text styles
+  %switch-text {
+    @include switch-text;
+  }
+
+  // Active label text styles
+  .switch-active {
+    @extend %switch-text;
+    @include switch-text-active;
+  }
+
+  // Inactive label text styles
+  .switch-inactive {
+    @extend %switch-text;
+    @include switch-text-inactive;
+  }
+
+  // Switch sizes
+  .switch.tiny {
+    @include switch-size(
+      rem-calc(10),
+      $switch-height-tiny,
+      $switch-paddle-offset
+    );
+  }
+
+  .switch.small {
+    @include switch-size(
+      rem-calc(12),
+      $switch-height-small,
+      $switch-paddle-offset
+    );
+  }
+
+  .switch.large {
+    @include switch-size(
+      rem-calc(16),
+      $switch-height-large,
+      $switch-paddle-offset
+    );
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_tabs.scss

@@ -0,0 +1,4 @@
+.tabs-title > a {
+   font-size: 16px !important;
+   @extend .body-4;
+} 

data/app/packs/stylesheets/decidim/theme/reset/_tags.scss

@@ -0,0 +1,47 @@
+//Variables
+
+$tags-border: 1px solid var(--grey2);
+
+/* Tags */
+
+.tags {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  @extend .body-5;
+  color: var(--primary);
+
+  li {
+    display: inline-block;
+    margin-right: 0.625rem;
+    margin-bottom: 0.5rem;
+  }
+
+  a {
+    display: inline-block;
+    border: $tags-border;
+    padding: 0.38rem 0.5rem;
+    @extend .body-5;
+    @extend .body-5-link;
+
+    &:hover,
+    &:focus {
+      text-decoration: none !important;
+      background-color: var(--grey2);
+    }
+  }
+}
+
+.tags:last-child {
+  margin-bottom: -0.5rem;
+}
+
+.tags--inline {
+  display: inline;
+}
+
+.tags--list {
+  li {
+    display: block;
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_thumbnail.scss

@@ -0,0 +1,66 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group thumbnail
+////
+
+/// Border around thumbnail images.
+/// @type Border
+$thumbnail-border: 4px solid $white;
+
+/// Bottom margin for thumbnail images.
+/// @type Length
+$thumbnail-margin-bottom: $global-margin;
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+
+/// Box shadow under thumbnail images.
+/// @type Shadow
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+
+/// Transition proprties for thumbnail images.
+/// @type Transition
+$thumbnail-transition: box-shadow 200ms ease-out;
+
+/// Default radius for thumbnail images.
+/// @type Number
+$thumbnail-radius: $global-radius;
+
+/// Adds thumbnail styles to an element.
+@mixin thumbnail {
+  display: inline-block;
+  max-width: 100%;
+  min-height: 75px;
+  margin-bottom: $thumbnail-margin-bottom;
+
+  border: $thumbnail-border;
+  border-radius: $thumbnail-radius;
+  box-shadow: $thumbnail-shadow;
+
+  line-height: 0;
+}
+
+@mixin thumbnail-link {
+  transition: $thumbnail-transition;
+
+  &:hover,
+  &:focus {
+    box-shadow: $thumbnail-shadow-hover;
+  }
+
+  image {
+    box-shadow: none;
+  }
+}
+
+.thumbnail {
+  @include thumbnail;
+}
+
+a.thumbnail {
+  @include thumbnail-link;
+}

data/app/packs/stylesheets/decidim/theme/reset/_timeline.scss

@@ -0,0 +1,183 @@
+/* Variables */
+
+$timeline-color: var(--primary);
+$timeline-inactive-color: var(--emphasis-lowest);
+
+$timeline-padding: 1rem;
+
+/* Timeline */
+
+.timeline {
+  list-style: none;
+  margin: 2rem 0 0;
+}
+
+.timeline__item {
+  padding-bottom: 2em;
+  position: relative;
+
+  &::before {
+    content: "";
+    width: 3px;
+    height: 1rem;
+    background: $timeline-color;
+    left: 1rem;
+    top: 0;
+    position: absolute;
+  }
+
+  &::after {
+    content: "";
+    clear: both;
+    display: table;
+    width: 100%;
+  }
+
+  &:last-of-type::before {
+    width: 0;
+  }
+}
+
+.timeline__phase {
+  width: 30px;
+  height: 30px;
+  margin-left: -13px;
+  position: absolute;
+  top: 0;
+  left: 1rem;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 50%;
+  background: $timeline-color;
+  border: 2px solid var(--primary);
+  box-shadow: none;
+}
+
+.timeline__phase__number {
+  display: block;
+  text-align: center;
+  line-height: 1;
+  color: $white;
+  font-weight: 600;
+  font-size: 1.2em;
+  align-self: center;
+  margin-left: 0;
+  margin-top: 0;
+}
+
+.timeline__info {
+  width: 90%;
+  width: calc(100% - 45px);
+  float: right;
+  background-color: $white;
+  border: $border;
+
+  .timeline__item--current & {
+    border-color: $timeline-color;
+  }
+}
+
+.timeline__header {
+  background: $medium-gray;
+  padding: $timeline-padding * 0.5 $timeline-padding;
+
+  .timeline__item--current & {
+    background-color: $timeline-color;
+    color: $white;
+  }
+}
+
+.timeline__date {
+  color: var(--emphasis-low);
+
+  .timeline__item--current & {
+    color: var(--emphasis-high);
+  }
+}
+.o_participatory_process .timeline__item--current .timeline__date {
+  color: var(--on-primary);
+}
+.timeline__title {
+  margin-bottom: 0;
+}
+
+.timeline__content {
+  padding: $timeline-padding;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.timeline__footer {
+  list-style: none;
+  margin: 0;
+  border-top: $border;
+
+  @include breakpoint(medium) {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+.timeline__footer-item {
+  flex-grow: 1;
+  text-align: center;
+  padding: 0.5em;
+  border-bottom: $border;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  @include breakpoint(medium) {
+    border-bottom: 0;
+    border-right: $border;
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+}
+
+.timeline__footer-inner {
+  display: block;
+}
+
+.timeline__item-icon {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.timeline__item-text {
+  display: block;
+  letter-spacing: inherit;
+  @extend .body-4;
+  @extend .body-4-caps;
+  color: var(--emphasis-med);
+}
+
+/* Inactive timeline */
+
+.timeline__item--current {
+  &::before {
+    background: $timeline-inactive-color;
+  }
+}
+
+.timeline__item--inactive {
+  &::before {
+    background: $timeline-inactive-color;
+  }
+
+  .timeline__phase {
+    background: $timeline-inactive-color;
+  }
+
+  .timeline__phase__number {
+    @extend .body-4;
+    color: var(--white);
+    text-shadow: 0 1px 2px rgba(black, 0.25);
+  }
+}

data/app/packs/stylesheets/decidim/theme/reset/_title_bar.scss

@@ -0,0 +1,89 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group title-bar
+////
+
+/// Background color of a title bar.
+/// @type Color
+$titlebar-background: var(--grey1);
+
+/// Color of text inside a title bar.
+/// @type Color
+$titlebar-color: var(--emphasis-med);
+
+/// Padding inside a title bar.
+/// @type Length
+$titlebar-padding: 0.5rem;
+
+/// Font weight of text inside a title bar.
+/// @type Weight
+$titlebar-text-font-weight: normal;
+
+/// Color of menu icons inside a title bar.
+/// @type Color
+$titlebar-icon-color: var(--emphasis-med);
+
+/// Color of menu icons inside a title bar on hover.
+/// @type Color
+$titlebar-icon-color-hover: var(--grey2);
+
+/// Spacing between the menu icon and text inside a title bar.
+/// @type Length
+$titlebar-icon-spacing: 0.25rem;
+
+.title-bar {
+  padding-right: $titlebar-padding;
+  padding-bottom: $titlebar-padding;
+  padding-top: rem-calc(24px);
+  padding-left: 0.5rem;
+  margin-left: 0;
+  margin-right: 0;
+  @include breakpoint(smallmedium down) {
+    padding-left: 0;
+  }
+
+  background: $titlebar-background;
+  color: $titlebar-color;
+
+  @if $global-flexbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  } @else {
+    @include clearfix;
+  }
+
+  .menu-icon {
+    margin-#{$global-left}: $titlebar-icon-spacing;
+    margin-#{$global-right}: $titlebar-icon-spacing;
+  }
+}
+
+@if $global-flexbox {
+  .title-bar-left,
+  .title-bar-right {
+    flex: 1 1 0px; // sass-lint:disable-line zero-unit
+  }
+
+  .title-bar-right {
+    text-align: right;
+  }
+} @else {
+  .title-bar-left {
+    float: left;
+  }
+
+  .title-bar-right {
+    float: right;
+    text-align: right;
+  }
+}
+
+.title-bar-title {
+  display: inline-block;
+  vertical-align: middle;
+  font-weight: $titlebar-text-font-weight;
+}

data/app/packs/stylesheets/decidim/theme/reset/_toggle.scss

@@ -0,0 +1,14 @@
+// @Component
+[data-toggle] {
+  margin: 0;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: flex-start;
+  span {
+    margin-right: 0;
+  }
+}
+.label-required[data-toggle] {
+  margin-left: 4px;
+  margin-bottom: 0;
+}