decidim-core 0.21.0 → 0.22.0

data/app/assets/stylesheets/decidim/utils/_settings.scss

@@ -60,7 +60,7 @@
 //  55. Top Bar
 //  56. Xy Grid
 
-@import 'util/util';
+@import "util/util";
 
 // 1. Global
 // ---------
@@ -77,14 +77,15 @@ $foundation-palette: (
 );
 $light-gray: #fafafa;
 $medium-gray: #e8e8e8;
+$dark-medium-gray: #3d393c;
 $dark-gray: #2c2930;
 $black: #1a181d;
 $white: #fff;
 $light-gray-dark: darken($light-gray, 2.5) !default;
 $body-background: $light-gray;
 $body-font-color: #3d393c;
-$muted: lighten($body-font-color, 30) !default;
-$body-font-family: 'Source Sans Pro', Helvetica, Roboto, Arial, sans-serif;
+$muted: lighten($body-font-color, 20) !default;
+$body-font-family: "Source Sans Pro", Helvetica, Roboto, Arial, sans-serif;
 $body-antialiased: true;
 $global-margin: 1rem;
 $global-padding: 1rem;
@@ -105,6 +106,7 @@ $border-width: 1px !default;
 $border: $border-width solid $medium-gray !default;
 
 @include add-foundation-colors;
+$highlight-color: $highlight;
 
 // 2. Breakpoints
 // --------------
@@ -131,7 +133,7 @@ $grid-column-gutter: (
   medium: 30px,
 );
 $grid-column-align-edge: true;
-$grid-column-alias: 'columns';
+$grid-column-alias: "columns";
 $block-grid-max: 8;
 
 // 4. Base Typography
@@ -140,27 +142,51 @@ $block-grid-max: 8;
 $header-font-family: $body-font-family;
 $header-font-weight: $global-weight-normal;
 $header-font-style: normal;
-$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
 $header-color: inherit;
 $header-lineheight: 1.4;
 $header-margin-bottom: .5rem;
 $header-styles: (
   small: (
-    'h1': ('font-size': 40),
-    'h2': ('font-size': 26),
-    'h3': ('font-size': 24),
-    'h4': ('font-size': 22),
-    'h5': ('font-size': 20),
-    'h6': ('font-size': 16)
+    "h1": (
+      "font-size": 40,
+    ),
+    "h2": (
+      "font-size": 26,
+    ),
+    "h3": (
+      "font-size": 24,
+    ),
+    "h4": (
+      "font-size": 22,
+    ),
+    "h5": (
+      "font-size": 20,
+    ),
+    "h6": (
+      "font-size": 16,
+    ),
   ),
   medium: (
-    'h1': ('font-size': 48),
-    'h2': ('font-size': 32),
-    'h3': ('font-size': 28),
-    'h4': ('font-size': 24),
-    'h5': ('font-size': 20),
-    'h6': ('font-size': 16)
-  )
+    "h1": (
+      "font-size": 48,
+    ),
+    "h2": (
+      "font-size": 32,
+    ),
+    "h3": (
+      "font-size": 28,
+    ),
+    "h4": (
+      "font-size": 24,
+    ),
+    "h5": (
+      "font-size": 20,
+    ),
+    "h6": (
+      "font-size": 16,
+    ),
+  ),
 );
 $header-text-rendering: optimizeLegibility;
 $small-font-size: 90%;
@@ -176,6 +202,8 @@ $code-border: 1px solid $medium-gray;
 $code-padding: rem-calc(2 5 1);
 $anchor-color: $secondary-color;
 $anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-outline-focus: 1px dotted rgba(black, .5);
+$anchor-outline-offset: 2px;
 $anchor-text-decoration: none;
 $anchor-text-decoration-hover: none;
 $hr-width: $global-width;
@@ -195,7 +223,7 @@ $blockquote-padding: rem-calc(9 20 0 19);
 $blockquote-border: 1px solid $medium-gray;
 $cite-font-size: rem-calc(13);
 $cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
+$cite-pseudo-content: "\2014 \0020";
 $keystroke-font: $font-family-monospace;
 $keystroke-color: $black;
 $keystroke-background: $light-gray;
@@ -276,7 +304,7 @@ $breadcrumbs-item-color: $primary-color;
 $breadcrumbs-item-color-current: $black;
 $breadcrumbs-item-color-disabled: $medium-gray;
 $breadcrumbs-item-margin: .75rem;
-$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-uppercase: false;
 $breadcrumbs-item-separator: true;
 $breadcrumbs-item-separator-color: $medium-gray;
 
@@ -291,6 +319,7 @@ $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
 $button-color: $white;
 $button-color-alt: $black;
+$button-shadow: 0 2px 0 rgba(0, 0, 0, .2);
 $button-radius: $global-radius;
 $button-hollow-border-width: 1px;
 $button-sizes: (
@@ -304,13 +333,22 @@ $button-opacity-disabled: .25;
 $button-background-hover-lightness: -20%;
 $button-hollow-hover-lightness: -50%;
 $button-transition: background-color .25s ease-out, color .25s ease-out;
+$button-outline-focus: $anchor-outline-focus;
+$button-outline-offset: 2px;
+$button-shadow-active: inset 0 0 14px -2px $black;
+$button-shadow-focus: none;
+$button-brightness-hover: 95%;
+$button-brightness-active: 85%;
+$button-brightness-focus: 95%;
+$button-vertical-push-active: 2px;
+$button-hollow-underline: none;
 
 // 12. Button Group
 // ----------------
 
 $buttongroup-margin: 1rem;
 $buttongroup-spacing: 1px;
-$buttongroup-child-selector: '.button';
+$buttongroup-child-selector: ".button";
 $buttongroup-expand-max: 6;
 $buttongroup-radius-on-each: true;
 
@@ -434,6 +472,7 @@ $select-triangle-color: $dark-gray;
 $select-radius: $global-radius;
 $input-color: $black;
 $input-placeholder-color: $medium-gray;
+$input-multiple-placeholder-color: $dark-medium-gray;
 $input-font-family: inherit;
 $input-font-size: rem-calc(16);
 $input-font-weight: $global-weight-normal;
@@ -443,6 +482,9 @@ $input-background-focus: $white;
 $input-background-disabled: $light-gray;
 $input-border: 1px solid $medium-gray;
 $input-border-focus: 1px solid $dark-gray;
+$input-outline: 0;
+$input-outline-focus: none;
+$input-outline-offset: 2px;
 $input-padding: $form-spacing / 2;
 $input-shadow: inset 0 1px 2px rgba($black, .1);
 $input-shadow-focus: 0 0 5px $medium-gray;
@@ -499,7 +541,7 @@ $meter-fill-bad: $alert-color;
 // --------------
 
 $offcanvas-sizes: (
-  small: 250px
+  small: 250px,
 );
 
 $offcanvas-background: $light-gray;
@@ -514,7 +556,7 @@ $offcanvas-transition-length: .5s;
 $offcanvas-transition-timing: ease;
 $offcanvas-fixed-reveal: true;
 $offcanvas-exit-background: rgba($white, .25);
-$maincontent-class: 'off-canvas-content';
+$maincontent-class: "off-canvas-content";
 
 // 26. Orbit
 // ---------
@@ -561,12 +603,7 @@ $progress-radius: $global-radius;
 // 29. Prototype Arrow
 // -------------------
 
-$prototype-arrow-directions: (
-  down,
-  up,
-  right,
-  left
-);
+$prototype-arrow-directions: (down, up, right, left);
 $prototype-arrow-size: .4375rem;
 $prototype-arrow-color: $black;
 
@@ -592,13 +629,7 @@ $prototype-border-color: $medium-gray;
 // ---------------------
 
 $prototype-display-breakpoints: $global-prototype-breakpoints;
-$prototype-display: (
-  inline,
-  inline-block,
-  block,
-  table,
-  table-cell
-);
+$prototype-display: (inline, inline-block, block, table, table-cell);
 
 // 34. Prototype Font-Styling
 // --------------------------
@@ -612,11 +643,7 @@ $prototype-font-bold: $global-weight-bold;
 // -----------------------------
 
 $prototype-list-breakpoints: $global-prototype-breakpoints;
-$prototype-style-type-unordered: (
-  disc,
-  circle,
-  square
-);
+$prototype-style-type-unordered: (disc, circle, square);
 $prototype-style-type-ordered: (
   decimal,
   lower-alpha,
@@ -631,22 +658,13 @@ $prototype-style-type-ordered: (
 // ----------------------
 
 $prototype-overflow-breakpoints: $global-prototype-breakpoints;
-$prototype-overflow: (
-  visible,
-  hidden,
-  scroll
-);
+$prototype-overflow: (visible, hidden, scroll);
 
 // 37. Prototype Position
 // ----------------------
 
 $prototype-position-breakpoints: $global-prototype-breakpoints;
-$prototype-position: (
-  static,
-  relative,
-  absolute,
-  fixed
-);
+$prototype-position: (static, relative, absolute, fixed);
 $prototype-position-z-index: 975;
 
 // 38. Prototype Rounded
@@ -676,15 +694,12 @@ $prototype-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16),
 // --------------------
 
 $prototype-sizing-breakpoints: $global-prototype-breakpoints;
-$prototype-sizing: (
-  width,
-  height
-);
+$prototype-sizing: (width, height);
 $prototype-sizes: (
   25: 25%,
   50: 50%,
   75: 75%,
-  100: 100%
+  100: 100%,
 );
 
 // 42. Prototype Spacing
@@ -697,21 +712,13 @@ $prototype-spacers-count: 3;
 // -----------------------------
 
 $prototype-decoration-breakpoints: $global-prototype-breakpoints;
-$prototype-text-decoration: (
-  overline,
-  underline,
-  line-through,
-);
+$prototype-text-decoration: (overline, underline, line-through);
 
 // 44. Prototype Text-Transformation
 // ---------------------------------
 
 $prototype-transformation-breakpoints: $global-prototype-breakpoints;
-$prototype-text-transformation: (
-  lowercase,
-  uppercase,
-  capitalize
-);
+$prototype-text-transformation: (lowercase, uppercase, capitalize);
 
 // 45. Prototype Text-Utilities
 // ----------------------------
@@ -779,7 +786,10 @@ $table-border: 1px solid smart-scale($table-background, $table-color-scale);
 $table-padding: rem-calc(8 10 10);
 $table-hover-scale: 2%;
 $table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-row-stripe-hover: darken(
+  $table-background,
+  $table-color-scale + $table-hover-scale
+);
 $table-is-striped: true;
 $table-striped-background: smart-scale($table-background, $table-color-scale);
 $table-stripe: even;
@@ -863,9 +873,11 @@ $grid-container: $global-width;
 $grid-columns: 12;
 $grid-margin-gutters: (
   small: 20px,
-  medium: 30px
+  medium: 30px,
 );
 $grid-padding-gutters: $grid-margin-gutters;
 $grid-container-padding: $grid-padding-gutters;
 $grid-container-max: $global-width;
 $xy-block-grid-max: 8;
+
+@import "decidim/decidim-settings";

data/app/assets/stylesheets/decidim/vizzs.scss

@@ -0,0 +1,8 @@
+@import "variables";
+@import "foundation";
+@import "utils/settings";
+@import "utils/helpers";
+@import "utils/mixins";
+@import "modules/margins";
+@import "modules/typography";
+@import "vizzs/*";

data/app/assets/stylesheets/decidim/vizzs/_areachart.scss

@@ -8,7 +8,6 @@
 
   .title{
     fill: $muted;
-    text-transform: uppercase;
     font-weight: 600;
   }
 

data/app/assets/stylesheets/decidim/vizzs/_linechart.scss

@@ -10,7 +10,6 @@
 
   .title{
     fill: $muted;
-    text-transform: uppercase;
     font-weight: 600;
     font-size: rem-calc(24);
   }

data/app/assets/stylesheets/decidim/vizzs/_rowchart.scss

@@ -6,7 +6,6 @@
 
   .title{
     fill: $muted;
-    text-transform: uppercase;
     font-weight: 600;
     font-size: rem-calc(24);
   }

data/app/assets/stylesheets/decidim/vizzs/_vizzs.scss

@@ -0,0 +1,5 @@
+@import "decidim/vizzs/areachart";
+@import "decidim/vizzs/chart-tooltip";
+@import "decidim/vizzs/linechart";
+@import "decidim/vizzs/orgchart";
+@import "decidim/vizzs/rowchart";

data/app/assets/stylesheets/foundation-overrides/components/_button-group.scss

@@ -0,0 +1,319 @@
+// Foundation for Sites
+// https://get.foundation
+// Licensed under MIT Open Source
+//
+// THIS IS A PATCHED VERSION TO MAKE NEWER FOUNDATION WORK WITH DECIDIM.
+// SEARCH FOR "FOUNDATION PATCH".
+
+////
+/// @group button-group
+////
+
+/// Margin for button groups.
+/// @type Number
+$buttongroup-margin: 1rem !default;
+
+/// Margin between buttons in a button group.
+/// @type Number
+$buttongroup-spacing: 1px !default;
+
+/// Selector for the buttons inside a button group.
+/// @type String
+$buttongroup-child-selector: '.button' !default;
+
+/// Maximum number of buttons that can be in an even-width button group. (Only needed when $global-flexbox: false;)
+/// @type Number
+$buttongroup-expand-max: 6 !default;
+
+/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
+/// @type Boolean
+$buttongroup-radius-on-each: true !default;
+
+/// Add styles for a button group container.
+/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
+@mixin button-group(
+  $child-selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing
+){
+  @include clearfix;
+
+  margin-bottom: $buttongroup-margin;
+
+  @if $global-flexbox{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    flex-grow: 1;
+
+    &::before,
+    &::after{
+      display: none; // Disable clearfix
+    }
+  }
+  @else{
+    font-size: 0;
+  }
+
+  #{$child-selector}{
+    margin: 0;
+    margin-#{$global-right}: $spacing;
+    margin-bottom: $spacing;
+    font-size: map-get($button-sizes, default);
+
+    @if $global-flexbox{
+      flex: 0 0 auto;
+    }
+
+    &:last-child{
+      margin-#{$global-right}: 0;
+    }
+
+    @if not $buttongroup-radius-on-each{
+      border-radius: 0;
+
+      &:first-child{
+        border-top-#{$global-left}-radius: $button-radius;
+        border-bottom-#{$global-left}-radius: $button-radius;
+      }
+
+      &:last-child{
+        border-top-#{$global-right}-radius: $button-radius;
+        border-bottom-#{$global-right}-radius: $button-radius;
+      }
+    }
+  }
+}
+
+/// Make buttons bonded without gap between them. Borders between buttons are merged
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+@mixin button-group-no-gaps(
+  $selector: $buttongroup-child-selector,
+  $border-width: $button-hollow-border-width
+){
+  #{$selector}{
+    margin-#{$global-right}: rem-calc(-$border-width);
+
+    + #{$selector}{
+      border-#{$global-left}-color: transparent;
+    }
+  }
+}
+
+/// Creates a full-width button group, making each button equal width.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
+/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
+@mixin button-group-expand(
+  $selector: $buttongroup-child-selector,
+  $spacing: $buttongroup-spacing,
+  $count: null
+){
+  @if not $global-flexbox{
+    margin-#{$global-right}: -$spacing;
+
+    &::before,
+    &::after{
+      display: none; // Disable clearfix
+    }
+  }
+
+  #{$selector}{
+    @if $global-flexbox{
+      flex: 1 1 0; // sass-lint:disable-line zero-unit
+      margin-right: 0;
+    }
+    @else{
+      // One child
+      &:first-child{
+        &:last-child{
+          width: calc(100% - #{$spacing});
+        }
+      }
+
+      // Two or more childreen
+      @for $i from 2 through $buttongroup-expand-max{
+        &:first-child:nth-last-child(#{$i}){
+          &,
+          &:first-child:nth-last-child(#{$i}) ~ #{$selector}{
+            display: inline-block;
+            width: calc(#{percentage(1 / $i)} - #{$spacing});
+            margin-#{$global-right}: $spacing;
+
+            &:last-child{
+              margin-#{$global-right}: $spacing * -$buttongroup-expand-max;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/// Stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-stack(
+  $selector: $buttongroup-child-selector
+){
+  @if $global-flexbox{
+    flex-wrap: wrap;
+  }
+
+  #{$selector}{
+    @if $global-flexbox{
+      flex: 0 0 100%;
+    }
+    @else{
+      width: 100%;
+    }
+
+    &:last-child{
+      margin-bottom: 0;
+    }
+
+    @if not $buttongroup-radius-on-each{
+      border-radius: 0;
+
+      &:first-child{
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: $global-radius;
+      }
+
+      &:last-child{
+        margin-bottom: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+      }
+    }
+  }
+}
+
+/// Un-stacks the buttons in a button group.
+/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
+@mixin button-group-unstack(
+  $selector: $buttongroup-child-selector
+){
+  #{$selector}{
+    @if $global-flexbox{
+      flex: 0 0 auto;
+    }
+    @else{
+      width: auto;
+    }
+
+    margin-bottom: 0;
+
+    @if not $buttongroup-radius-on-each{
+      &:first-child{
+        border-top-#{$global-left}-radius: $global-radius;
+        border-top-#{$global-right}-radius: 0;
+        border-bottom-#{$global-left}-radius: $global-radius;
+      }
+
+      &:last-child{
+        border-top-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-right}-radius: $global-radius;
+        border-bottom-#{$global-left}-radius: 0;
+      }
+    }
+  }
+}
+
+@mixin foundation-button-group{
+  .button-group{
+    @include button-group;
+
+    // Sizes
+    @each $size, $value in map-remove($button-sizes, default){
+      &.#{$size} #{$buttongroup-child-selector}{
+        font-size: $value;
+      }
+    }
+
+    // Even-width Group
+    &.expanded{
+      @include button-group-expand;
+    }
+
+    // Solid, hollow & clear styles
+    @each $filling in (solid hollow clear){
+      $base-selector: if($button-fill == $filling, null, '.#{$filling}');
+
+      &#{$base-selector}{
+        // Do not generate button base styles for the default filling
+        @if($button-fill != $filling){
+          #{$buttongroup-child-selector}{
+            @include button-fill($filling);
+            @include button-fill-style($filling);
+          }
+        }
+
+        @each $name, $color in $button-palette{
+          // FOUNDATION PATCH START
+          // The original version would break sassc compilation for an unknown
+          // reason. It breaks the whole system as the server process or asset
+          // compilation process crashes due to this bug.
+          @if $button-fill == $filling{
+            &.#{$name} #{$buttongroup-child-selector}{
+              @include button-fill-style($filling, $color, auto, auto);
+            }
+          }
+          @else{
+            &.#{$name} #{$buttongroup-child-selector},
+            & #{$buttongroup-child-selector}.#{$name}{
+              @include button-fill-style($filling, $color, auto, auto);
+            }
+          }
+          // FOUNDATION PATCH END
+        }
+      }
+    }
+
+    &.no-gaps{
+      @include button-group-no-gaps;
+    }
+
+    &.stacked,
+    &.stacked-for-small,
+    &.stacked-for-medium{
+      @include button-group-stack;
+
+      &.expanded{
+        @include button-group-expand;
+      }
+    }
+
+    &.stacked-for-small{
+      @include breakpoint(medium){
+        @include button-group-unstack;
+      }
+    }
+
+    &.stacked-for-medium{
+      @include breakpoint(large){
+        @include button-group-unstack;
+      }
+    }
+
+    &.stacked-for-small.expanded{
+      @include breakpoint(small only){
+        display: block;
+
+        #{$buttongroup-child-selector}{
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
+
+    &.stacked-for-medium.expanded{
+      @include breakpoint(medium down){
+        display: block;
+
+        #{$buttongroup-child-selector}{
+          display: block;
+          margin-#{$global-right}: 0;
+        }
+      }
+    }
+  }
+}