decidim-theme 0.1.4

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

@@ -0,0 +1,312 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group dropdown-menu
+////
+
+/// Enables arrows for items with dropdown menus.
+/// @type Boolean
+$dropdownmenu-arrows: true;
+
+/// Sets dropdown menu arrow color if arrow is used.
+/// @type Color
+$dropdownmenu-arrow-color: var(--emphasis-med);
+
+/// Sets dropdown menu arrow size if arrow is used.
+/// @type Length
+$dropdownmenu-arrow-size: 6px;
+
+/// Sets dropdown menu arrow padding for aligning the arrow correctly.
+/// @type Length
+$dropdownmenu-arrow-padding: 2rem;
+
+/// Minimum width of dropdown sub-menus.
+/// @type Length
+$dropdownmenu-min-width: 200px;
+
+/// Background color for top level items.
+/// @type Color
+$dropdownmenu-background: null;
+
+/// Background color for dropdowns.
+/// @type Color
+$dropdownmenu-submenu-background: $white;
+
+/// Padding for top level items.
+/// @type Number
+$dropdownmenu-padding: 1rem 0.5em 1rem 0.25rem;
+
+/// Sets dropdown menu nested margin
+/// @type Number
+$dropdownmenu-nested-margin: 0.125rem;
+
+/// Padding for sub-menu items.
+/// @type Number
+$dropdownmenu-submenu-padding: 1rem 0.5em;
+
+/// Border for dropdown sub-menus.
+/// @type List
+$dropdownmenu-border: 1px solid var(--grey2);
+
+// Border width for dropdown sub-menus.
+// Used to adjust top margin of a sub-menu if a border is used.
+// @type Length
+$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
+
+/// Text color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-color-active: var(--primary);
+
+/// Background color of an active dropdown menu item. Explicit override for menu defaults
+/// @type Color
+$dropdown-menu-item-background-active: var(--grey2);
+
+@mixin ov-zf-dropdown-left-right-arrows {
+  > a::after {
+    #{$global-right}: 14px;
+  }
+  &.is-active > a::after {
+    border-color: var(--primary) transparent transparent;
+  }
+  &.opens-left > a::after {
+    @include css-triangle(
+      $dropdownmenu-arrow-size,
+      $dropdownmenu-arrow-color,
+      left
+    );
+    right: auto;
+    left: 5px;
+  }
+
+  &.opens-right > a::after {
+    @include css-triangle(
+      $dropdownmenu-arrow-size,
+      $dropdownmenu-arrow-color,
+      right
+    );
+  }
+}
+
+@mixin ov-dropdown-menu-direction($dir: horizontal) {
+  @if $dir == horizontal {
+    > li.opens-left {
+      // sass-lint:disable-line no-qualifying-elements
+      > .is-dropdown-submenu {
+        top: 80%;
+        right: 0.3rem;
+        left: auto;
+      }
+    }
+
+    > li.opens-right {
+      // sass-lint:disable-line no-qualifying-elements
+      > .is-dropdown-submenu {
+        top: 80%;
+        right: auto;
+        left: 0.3rem;
+      }
+    }
+
+    @if $dropdownmenu-arrows {
+      > li.is-dropdown-submenu-parent > a {
+        // sass-lint:disable-line no-qualifying-elements
+        position: relative;
+        padding: 0.62rem 0.5rem;
+        padding-#{$global-right}: $dropdownmenu-arrow-padding;
+        transform: translateY(-12px);
+        margin-left: 0.5rem;
+        margin-top: 0rem;
+      }
+      > li.is-dropdown-submenu-parent.is-active > a::after {
+        border-color: var(--primary) transparent transparent;
+      }
+
+      > li.is-dropdown-submenu-parent > a::after {
+        // sass-lint:disable-line no-qualifying-elements
+        @include css-triangle(
+          $dropdownmenu-arrow-size,
+          $dropdownmenu-arrow-color,
+          down
+        );
+        #{$global-right}: 0.5rem;
+        #{$global-left}: auto;
+        margin-top: -1 * ($dropdownmenu-arrow-size * 0.5);
+      }
+    }
+  } @else if $dir == vertical {
+    > li {
+      .is-dropdown-submenu {
+        top: 0;
+        z-index: 1;
+      }
+
+      &.opens-left {
+        > .is-dropdown-submenu {
+          top: 0;
+          right: 100%;
+          left: auto;
+        }
+      }
+
+      &.opens-right {
+        > .is-dropdown-submenu {
+          right: auto;
+          left: 100%;
+        }
+      }
+
+      @if $dropdownmenu-arrows {
+        @include ov-zf-dropdown-left-right-arrows;
+      }
+    }
+  } @else {
+    @warn 'The direction used for ov-dropdown-menu-direction() must be horizontal or vertical.';
+  }
+}
+
+@mixin ov-foundation-dropdown-menu {
+  .dropdown.menu {
+    @include ov-dropdown-menu-direction(horizontal);
+
+    a {
+      @include disable-mouse-outline;
+    }
+
+    // Top-level item
+    > li > a {
+      background: $dropdownmenu-background;
+      padding: $dropdownmenu-padding;
+      text-decoration: none;
+      border-radius: $global-radius;
+      margin-left: 0.25rem;
+    }
+
+    // Top-level item active state
+    > li.is-active > a {
+      background: $dropdown-menu-item-background-active !important;
+      color: $dropdown-menu-item-color-active !important;
+    }
+
+    .no-js & ul {
+      display: none;
+    }
+
+    .nested.is-dropdown-submenu {
+      @include menu-nested($dropdownmenu-nested-margin);
+    }
+
+    &.vertical {
+      @include ov-dropdown-menu-direction(vertical);
+    }
+
+    @each $size in $breakpoint-classes {
+      @if $size != $-zf-zero-breakpoint {
+        @include breakpoint($size) {
+          &.#{$size}-horizontal {
+            @include dropdown-menu-direction(horizontal);
+          }
+
+          &.#{$size}-vertical {
+            @include dropdown-menu-direction(vertical);
+          }
+        }
+      }
+    }
+
+    &.align-right {
+      .is-dropdown-submenu.first-sub {
+        top: 80%;
+        right: 0;
+        left: auto;
+      }
+    }
+  }
+
+  .is-dropdown-menu.vertical {
+    width: 100px;
+
+    &.align-right {
+      float: right;
+    }
+  }
+
+  .is-dropdown-submenu-parent {
+    position: relative;
+
+    a::after {
+      position: absolute;
+      top: 50%;
+      #{$global-right}: 5px;
+      #{$global-left}: auto;
+      margin-top: -1 * $dropdownmenu-arrow-size;
+    }
+
+    &.opens-inner > .is-dropdown-submenu {
+      top: 100%;
+      @if $global-text-direction == "rtl" {
+        right: auto;
+      } @else {
+        left: auto;
+      }
+    }
+
+    &.opens-left > .is-dropdown-submenu {
+      right: 100%;
+      left: auto;
+    }
+
+    &.opens-right > .is-dropdown-submenu {
+      right: auto;
+      left: 100%;
+    }
+  }
+
+  .is-dropdown-submenu {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 100%;
+    z-index: 1;
+
+    display: none;
+    min-width: $dropdownmenu-min-width;
+
+    border: $dropdownmenu-border;
+    border-radius: $global-radius;
+    background: $dropdownmenu-submenu-background;
+    a:hover {
+      background: var(--primary-10);
+    }
+    .dropdown & a {
+      padding: $dropdownmenu-submenu-padding;
+      text-decoration: none;
+      &:hover {
+        background: var(--primary-10);
+      }
+    }
+
+    .is-dropdown-submenu-parent {
+      @if $dropdownmenu-arrows {
+        @include ov-zf-dropdown-left-right-arrows;
+      }
+    }
+
+    @if (type-of($dropdownmenu-border-width) == "number") {
+      .is-dropdown-submenu {
+        margin-top: (-$dropdownmenu-border-width);
+      }
+    }
+
+    > li {
+      width: 100%;
+    }
+
+    // [TODO] Cut back specificity
+    //&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
+    &.js-dropdown-active {
+      display: block;
+    }
+  }
+}
+@include ov-foundation-dropdown-menu;

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

@@ -0,0 +1,87 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+
+////
+/// @group abide
+////
+
+/// Sets if error styles should be added to inputs.
+/// @type Boolean
+$abide-inputs: true;
+
+/// Sets if error styles should be added to labels.
+/// @type Boolean
+$abide-labels: true;
+
+/// Background color to use for invalid text inputs.
+/// @type Color
+$input-background-invalid: var(--red);
+
+/// Color to use for labels of invalid inputs.
+/// @type Color
+$form-label-color-invalid: var(--red);
+
+/// Default font color for form error text.
+/// @type Color
+$input-error-color: var(--red);
+
+/// Default font size for form error text.
+/// @type Number
+$input-error-font-size: rem-calc(16);
+
+/// Default font weight for form error text.
+/// @type Keyword
+$input-error-font-weight: normal;
+
+/// Styles the background and border of an input field to have an error state.
+///
+/// @param {Color} $background [$alert-color] - Color to use for the background and border.
+/// @param {Number} $background-lighten [10%] - Lightness level of the background color.
+@mixin form-input-error(
+  $background: $input-background-invalid,
+  $background-lighten: 10%
+) {
+  &:not(:focus) {
+    border-color: $background;
+    background-color: var(--white);
+
+    &::placeholder {
+      color: $background;
+    }
+  }
+}
+
+/// Adds error styles to a form element, using the values in the settings file.
+@mixin form-error {
+  display: none;
+  margin-top: $form-spacing * -0.5;
+  margin-bottom: $form-spacing;
+
+  @extend .body-6;
+  @extend .body-6-semibold;
+  color: var(--red);
+}
+
+@if $abide-inputs {
+  // Error class for invalid inputs
+  .is-invalid-input {
+    @include form-input-error;
+  }
+}
+
+@if $abide-labels {
+  // Error class for labels of invalid outputs
+  .is-invalid-label {
+    color: var(--emphasis-med);
+  }
+}
+
+// Form error element
+.form-error {
+  @include form-error;
+
+  &.is-visible {
+    display: block;
+  }
+}

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

@@ -0,0 +1,56 @@
+.extra {
+  text-align: center;
+  margin-bottom: 1.13rem;
+  &.card.line-stats {
+    box-shadow: none;
+    border: 1px solid var(--grey2);
+  }
+  .button:last-of-type {
+    margin-bottom: 0;
+    text-wrap: nowrap;
+  }
+
+  .follow-button {
+    margin-top: 1rem;
+    text-wrap: nowrap;
+  }
+}
+
+.extra__suport-number {
+  display: block;
+  font-weight: 600;
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.extra__suport-text {
+  display: block;
+  line-height: 1;
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+}
+
+.extra__date {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.extra__date-container {
+  margin-bottom: 1rem;
+  width: 100%;
+}
+
+.extra__month {
+  display: block;
+  font-size: 1rem;
+}
+
+.extra__time {
+  display: block;
+  font-size: 1.2rem;
+  margin: 0.5rem 0 0;
+}
+
+.extra--text {
+  text-align: left;
+}

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

@@ -0,0 +1,224 @@
+//Variables
+$filters-border: $border;
+$filters-padding: 1rem;
+$filters-padding-x: 1rem;
+$filters-padding-y: 1rem;
+
+// Styles
+.filters-wrapper {
+  @include breakpoint(medium) {
+    display: flex;
+  }
+}
+
+.filters-controls {
+  @include clearfix;
+
+  margin: 1rem 0 2rem;
+}
+
+.filters-controls__trigger {
+  width: 100%;
+  font-weight: 600;
+  text-align: left;
+  background: $light-gray;
+  padding: 0.5rem;
+  border: $border;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .icon {
+    margin-left: rem-calc(6);
+  }
+}
+
+.filters {
+  display: none;
+  min-height: 100%;
+  padding: $filters-padding;
+
+  @include breakpoint(medium) {
+    display: block;
+    padding: 0;
+    margin: 0;
+  }
+
+  .reveal & {
+    display: block;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.js .filters__content {
+  display: none;
+
+  &.is-active {
+    display: block;
+  }
+
+  @include breakpoint(medium) {
+    display: block;
+  }
+}
+
+.filters__section {
+  border-bottom: $border;
+  padding: $filters-padding-x $filters-padding-y;
+
+  &:first-of-type {
+    padding-top: $filters-padding-x * 1.5;
+  }
+
+  &:last-of-type {
+    padding-bottom: $filters-padding-x * 1.5;
+    border-bottom: none;
+  }
+
+  label {
+    line-height: 1.2;
+    margin-bottom: 0.4rem;
+
+    &[data-global-checkbox] {
+      font-weight: 600;
+    }
+  }
+
+  .button {
+    margin-bottom: 0;
+  }
+
+  .section-title {
+    color: var(--primary);
+    text-decoration: underline;
+    margin-right: $global-margin;
+  }
+}
+
+.filters__subfilters {
+  label:last-child {
+    margin-bottom: 1rem;
+  }
+  & > .filters__subfilters {
+    padding-left: $filters-padding-x * 0.5;
+  }
+}
+
+.filters__has-subfilters {
+  display: flex;
+  justify-content: space-between;
+}
+
+.filters__icon-is-open,
+.filters__icon-is-closed {
+  font-size: 11px;
+  padding: 3px 6px;
+  &:hover {
+    color: var(--primary);
+  }
+}
+
+.filters__icon-is-open {
+  display: none;
+}
+
+.filters__is-open {
+  .filters__icon-is-open {
+    display: inline-block;
+  }
+
+  .filters__icon-is-closed {
+    display: none;
+  }
+}
+
+.filters__section--general {
+  @extend .filters__section;
+
+  padding: 0;
+
+  &:first-of-type,
+  &:last-of-type {
+    padding: 0;
+  }
+
+  > :first-child {
+    padding: $filters-padding-x $filters-padding-y;
+
+    &:hover {
+      background: $light-gray;
+    }
+  }
+
+  &.no-results {
+    .section-title {
+      color: $muted;
+      text-decoration: none;
+    }
+
+    > * {
+      opacity: 0.25;
+    }
+  }
+}
+
+.filters__info__title {
+  margin-bottom: 0;
+}
+
+.filters__info__icon {
+  margin-left: 0.25rem;
+}
+
+.filters__search {
+  .input-group {
+    margin-bottom: 0;
+  }
+}
+
+.filters__help {
+  position: relative;
+
+  p:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .skip {
+    @include skip-button;
+  }
+}
+
+.filters__left-legend {
+  legend {
+    float: left;
+    padding-top: 10px;
+  }
+
+  .picker-prompt,
+  select {
+    width: 75%;
+    float: right;
+  }
+}
+
+.filters__section .section-title,
+.filters__section--general .section-title {
+  color: var(--secondary);
+  font-weight: var(--font-weight-medium);
+}
+a.flex--sbc:hover {
+  text-decoration: none;
+}
+.filters-controls__trigger {
+  background: var(--white);
+  width: auto;
+  padding: 0.4rem 0.7rem;
+}
+#participatory-space-filters {
+  @include breakpoint(medium) {
+    .filters-controls__trigger {
+      display: none;
+    }
+  }
+}