foundation-rails 5.5.1.2 → 5.5.2.0

data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // Breadcrumb Variables
@@ -41,13 +41,13 @@ $crumb-slash: "/" !default;
 
 // We use this mixin to create a container around our breadcrumbs
 @mixin crumb-container {
-  display: block;
-  padding: $crumb-padding;
-  overflow: hidden;
-  margin-#{$default-float}: 0;
-  list-style: none;
   border-style: $crumb-border-style;
   border-width: $crumb-border-size;
+  display: block;
+  list-style: none;
+  margin-#{$default-float}: 0;
+  overflow: hidden;
+  padding: $crumb-padding;
 
   // We control which background color and border come through.
   background-color: $crumb-bg;
@@ -58,12 +58,12 @@ $crumb-slash: "/" !default;
 @mixin crumbs {
 
   // A normal state will make the links look and act like clickable breadcrumbs.
-  margin: 0;
+  color: $crumb-font-color;
   float: $default-float;
   font-size: $crumb-font-size;
   line-height: $crumb-font-size;
+  margin: 0;
   text-transform: $crumb-font-transform;
-  color: $crumb-font-color;
 
   &:hover a, &:focus a { text-decoration: $crumb-link-decor; }
 
@@ -73,11 +73,11 @@ $crumb-slash: "/" !default;
 
   // Current is for the link of the current page
   &.current {
-    cursor: $cursor-default-value;
     color: $crumb-font-color-current;
+    cursor: $cursor-default-value;
     a {
-      cursor: $cursor-default-value;
       color: $crumb-font-color-current;
+      cursor: $cursor-default-value;
     }
 
     &:hover, &:hover a,
@@ -93,15 +93,15 @@ $crumb-slash: "/" !default;
     &:hover a,
     &:focus,
     a:focus {
-      text-decoration: none;
       color: $crumb-font-color-unavailable;
       cursor: $cursor-disabled-value;
+      text-decoration: none;
     }
   }
 
   &:before {
-    content: "#{$crumb-slash}";
     color: $crumb-slash-color;
+    content: "#{$crumb-slash}";
     margin: 0 $crumb-side-padding;
     position: relative;
     top: 1px;
@@ -119,14 +119,13 @@ $crumb-slash: "/" !default;
       @include crumb-container;
       @include radius($crumb-radius);
 
-      &>* {
+      > * {
         @include crumbs;
       }
     }
+    /* Accessibility - hides the forward slash */
+    [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+      content: "/";
+    }
   }
 }
-
-/* Accessibility - hides the forward slash */
-[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
-  content: "/";
-  }

data/vendor/assets/stylesheets/foundation/components/_button-groups.scss

@@ -2,8 +2,8 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
-@import "buttons";
+@import 'global';
+@import 'buttons';
 
 //
 // Button Group Variables
@@ -38,7 +38,7 @@ $button-group-border-width: 1px !default;
 
   > button, .button {
     border-#{$default-float}: $button-group-border-width solid;
-    border-color: rgba(255, 255, 255, 0.5);
+    border-color: rgba(255, 255, 255, .5);
   }
 
   &:first-child {
@@ -47,28 +47,31 @@ $button-group-border-width: 1px !default;
     }
   }
 
+  $button-group-display: list-item;
+  $button-group-margin: 0;
+
   // We use this to control the flow, or remove those styles completely.
   @if $float {
-    margin: 0;
+    $button-group-display: list-item;
+    $button-group-margin: 0;
     float: $float;
-    display: list-item;
     // Make sure the first child doesn't get the negative margin.
     &:first-child { margin-#{$default-float}: 0; }
   }
   @else {
-    margin: 0 -2px;
-    display: inline-block;
+    $button-group-display: inline-block;
+    $button-group-margin: 0 -2px;
   }
 
   @if $orientation == vertical {
-    display:block;
-    margin:0;
+    $button-group-display: block;
+    $button-group-margin: 0;
     > button, .button {
-      border-top: $button-group-border-width solid;
-      border-color: rgba(255, 255, 255, 0.5);
+      border-color: rgba(255, 255, 255, .5);
       border-left-width: 0;
-      margin:0;
+      border-top: $button-group-border-width solid;
       display: block;
+      margin:0;
     }
     > button {
         width: 100%;
@@ -81,12 +84,16 @@ $button-group-border-width: 1px !default;
     }
   }
 
+  display: $button-group-display;
+  margin: $button-group-margin;
+
+
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
     &,
-    & > a,
-    & > button,
-    & > .button { @include radius(0); }
+    > a,
+    > button,
+    > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -112,9 +119,9 @@ $button-group-border-width: 1px !default;
   }
   @else if $radius {
     &,
-    & > a,
-    & > button,
-    & > .button { @include radius(0); }
+    > a,
+    > button,
+    > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -153,15 +160,15 @@ $button-group-border-width: 1px !default;
       @for $i from 2 through 8 {
         &.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
       }
-      
-      & > li { @include button-group-style(); }
+
+      > li { @include button-group-style(); }
 
       &.stack {
-        & > li { @include button-group-style($orientation:vertical); float: none; }
+        > li { @include button-group-style($orientation:vertical); float: none; }
       }
 
       &.stack-for-small {
-        & > li {
+        > li {
           @include button-group-style($orientation:horizontal);
           @media #{$small-only} {
             @include button-group-style($orientation:vertical);

data/vendor/assets/stylesheets/foundation/components/_buttons.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -55,7 +55,7 @@ $button-radius: $global-radius !default;
 $button-round: $global-rounded !default;
 
 // We use this to set default opacity and cursor for disabled buttons.
-$button-disabled-opacity: 0.7 !default;
+$button-disabled-opacity: .7 !default;
 $button-disabled-cursor: $cursor-default-value !default;
 
 
@@ -69,6 +69,9 @@ $button-disabled-cursor: $cursor-default-value !default;
 
 @mixin button-base($style:true, $display:$button-display) {
   @if $style {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    border-radius:0;
     border-style: $button-border-style;
     border-width: $button-border-width;
     cursor: $cursor-pointer-value;
@@ -77,11 +80,8 @@ $button-disabled-cursor: $cursor-default-value !default;
     line-height: normal;
     margin: 0 0 $button-margin-bottom;
     position: relative;
-    text-decoration: none;
     text-align: $button-font-align;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    border-radius:0;
+    text-decoration: none;
   }
   @if $display { display: $display; }
 }
@@ -98,11 +98,7 @@ $button-disabled-cursor: $cursor-default-value !default;
   // We control which padding styles come through,
   // these can be turned off by setting $padding:false
   @if $padding {
-    padding-top: $padding;
-    padding-#{$opposite-direction}: $padding * 2;
-    padding-bottom: $padding + rem-calc(1);
-    padding-#{$default-float}: $padding * 2;
-
+    padding: $padding ($padding * 2) ($padding + rem-calc(1)) ($padding * 2);
     // We control the font-size based on mixin input.
     @if      $padding == $button-med { font-size: $button-font-med; }
     @else if $padding == $button-tny { font-size: $button-font-tny; }
@@ -114,14 +110,14 @@ $button-disabled-cursor: $cursor-default-value !default;
   @if $full-width {
     // We still need to check if $padding is set.
     @if $padding {
-    padding-top: $padding;
-    padding-bottom: $padding + rem-calc(1);
+      padding-bottom: $padding + rem-calc(1);
+      padding-top: $padding;
     } @else if $padding == false {
-      padding-top:0;
       padding-bottom:0;
+      padding-top:0;
     }
-    padding-right: 0;
     padding-left: 0;
+    padding-right: 0;
     width: 100%;
   }
 }
@@ -173,9 +169,9 @@ $button-disabled-cursor: $cursor-default-value !default;
 
   // We can set $disabled:true to create a disabled transparent button.
   @if $disabled {
+    box-shadow: none;
     cursor: $button-disabled-cursor;
     opacity: $button-disabled-opacity;
-    box-shadow: none;
     &:hover,
     &:focus { background-color: $bg; }
   }
@@ -230,7 +226,7 @@ $button-disabled-cursor: $cursor-default-value !default;
       &.large  { @include button-size($padding:$button-lrg); }
       &.small  { @include button-size($padding:$button-sml); }
       &.tiny   { @include button-size($padding:$button-tny); }
-      &.expand { @include button-size($padding:null,$full-width:true); }
+      &.expand { @include button-size($padding:null, $full-width:true); }
 
       &.left-align  { text-align: left; text-indent: rem-calc(12); }
       &.right-align { text-align: right; padding-right: rem-calc(12); }

data/vendor/assets/stylesheets/foundation/components/_clearing.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -25,7 +25,7 @@ $clearing-arrow-color: $clearing-close-color !default;
 
 // We use these to style captions
 $clearing-caption-font-color: $iron !default;
-$clearing-caption-font-size: 0.875em !default;
+$clearing-caption-font-size: .875em !default;
 $clearing-caption-padding: 10px 30px 20px !default;
 
 // We use these to make the image and carousel height and style
@@ -43,9 +43,9 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
     /* Clearing Styles */
     .clearing-thumbs, #{data('clearing')} {
       @include clearfix;
-      margin-bottom: 0;
-      margin-#{$default-float}: 0;
       list-style: none;
+      margin-#{$default-float}: 0;
+      margin-bottom: 0;
 
       li {
         float: $default-float;
@@ -59,30 +59,30 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
 
     .clearing-blackout {
       background: $clearing-bg;
-      position: fixed;
-      width: 100%;
       height: 100%;
+      position: fixed;
       top: 0;
-      #{$default-float}: 0;
+      width: 100%;
       z-index: 998;
+      #{$default-float}: 0;
 
       .clearing-close { display: block; }
     }
 
     .clearing-container {
-      position: relative;
-      z-index: 998;
       height: 100%;
-      overflow: hidden;
       margin: 0;
+      overflow: hidden;
+      position: relative;
+      z-index: 998;
     }
 
     .clearing-touch-label {
+      color: $base;
+      font-size: .6em;
+      left: 50%;
       position: absolute;
       top: 50%;
-      left: 50%;
-      color: $base;
-      font-size: 0.6em;
     }
 
     .visible-img {
@@ -94,14 +94,18 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
         #{$default-float}: 50%;
         top: 50%;
         @if $default-float == left {
-          transform: translateY(-50%) translateX(-50%);
           -webkit-transform: translateY(-50%) translateX(-50%);
+          -moz-transform: translateY(-50%) translateX(-50%);
           -ms-transform: translateY(-50%) translateX(-50%);
+          -o-transform: translateY(-50%) translateX(-50%);
+          transform: translateY(-50%) translateX(-50%);
         }
         @else {
-          transform: translateY(-50%) translateX(50%);
           -webkit-transform: translateY(-50%) translateX(50%);
+          -moz-transform: translateY(-50%) translateX(50%);
           -ms-transform: translateY(-50%) translateX(50%);
+          -o-transform: translateY(-50%) translateX(50%);
+          transform: translateY(-50%) translateX(50%);
         };
         max-height: 100%;
         max-width: 100%;
@@ -109,27 +113,27 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
     }
 
     .clearing-caption {
+      background: $clearing-caption-bg;
+      bottom: 0;
       color: $clearing-caption-font-color;
       font-size: $clearing-caption-font-size;
       line-height: 1.3;
       margin-bottom: 0;
-      text-align: center;
-      bottom: 0;
-      background: $clearing-caption-bg;
-      width: 100%;
       padding: $clearing-caption-padding;
       position: absolute;
+      text-align: center;
+      width: 100%;
       #{$default-float}: 0;
     }
 
     .clearing-close {
-      z-index: 999;
-      padding-#{$default-float}: 20px;
-      padding-top: 10px;
-      font-size: $clearing-close-size;
-      line-height: 1;
       color: $clearing-close-color;
       display: none;
+      font-size: $clearing-close-size;
+      line-height: 1;
+      padding-#{$default-float}: 20px;
+      padding-top: 10px;
+      z-index: 999;
 
       &:hover,
       &:focus { color: $iron; }
@@ -151,23 +155,23 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
     @media #{$medium-up} {
       .clearing-main-prev,
       .clearing-main-next {
-        position: absolute;
         height: 100%;
-        width: 40px;
+        position: absolute;
         top: 0;
-        & > span {
+        width: 40px;
+        > span {
+          border: solid $clearing-arrow-size;
+          display: block;
+          height: 0;
           position: absolute;
           top: 50%;
-          display: block;
           width: 0;
-          height: 0;
-          border: solid $clearing-arrow-size;
-          &:hover { opacity: 0.8; }
+          &:hover { opacity: .8; }
         }
       }
       .clearing-main-prev {
         #{$default-float}: 0;
-        & > span {
+        > span {
           #{$default-float}: 5px;
           border-color: transparent;
           border-#{$opposite-direction}-color: $clearing-arrow-color;
@@ -175,14 +179,14 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
       }
       .clearing-main-next {
         #{$opposite-direction}: 0;
-        & > span {
+        > span {
           border-color: transparent;
           border-#{$default-float}-color: $clearing-arrow-color;
         }
       }
 
       .clearing-main-prev.disabled,
-      .clearing-main-next.disabled { opacity: 0.3; }
+      .clearing-main-next.disabled { opacity: .3; }
 
       .clearing-assembled .clearing-container {
 
@@ -192,7 +196,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
           margin-top: 10px;
           text-align: center;
 
-          & > ul {
+          > ul {
             display: inline-block;
             z-index: 999;
             height: 100%;
@@ -200,17 +204,17 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
             float: none;
 
             li {
+              clear: none;
+              cursor: $cursor-pointer-value;
               display: block;
-              width: $clearing-carousel-thumb-width;
-              min-height: inherit;
               float: $default-float;
-              overflow: hidden;
               margin-#{$opposite-direction}: 0;
+              min-height: inherit;
+              opacity: .4;
+              overflow: hidden;
               padding: 0;
               position: relative;
-              cursor: $cursor-pointer-value;
-              opacity: 0.4;
-              clear: none;
+              width: $clearing-carousel-thumb-width;
 
               &.fix-height {
                 img {
@@ -226,29 +230,29 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
               }
 
               img {
-              cursor: $cursor-pointer-value !important;
-              width: 100% !important;
+                cursor: $cursor-pointer-value !important;
+                width: 100% !important;
               }
 
               &.visible { opacity: 1; }
-              &:hover { opacity: 0.8; }
+              &:hover { opacity: .8; }
             }
           }
         }
 
         .visible-img {
           background: $clearing-img-bg;
-          overflow: hidden;
           height: $clearing-active-img-height;
+          overflow: hidden;
         }
       }
 
       .clearing-close {
+        padding-#{$default-float}: 0;
+        padding-top: 0;
         position: absolute;
         top: 10px;
         #{$opposite-direction}: 20px;
-        padding-#{$default-float}: 0;
-        padding-top: 0;
       }
     }