foundation-rails 5.5.1.2 → 5.5.2.0

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 // @variables
 //
@@ -10,7 +10,7 @@ $include-html-orbit-classes: $include-html-classes !default;
 
 // We use these to control the caption styles
 $orbit-container-bg: none !default;
-$orbit-caption-bg: rgba(51,51,51, 0.8) !default;
+$orbit-caption-bg: rgba(51,51,51, .8) !default;
 $orbit-caption-font-color: $white !default;
 $orbit-caption-font-size: rem-calc(14) !default;
 $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
@@ -51,20 +51,30 @@ $orbit-timer-hide-for-small: true !default;
   @if $include-html-orbit-classes {
 
     @-webkit-keyframes rotate {
-      from { -webkit-transform: rotate(0deg); }
-      to { -webkit-transform: rotate(360deg); }
-    }
-    @-moz-keyframes rotate {
-      from { -moz-transform: rotate(0deg); }
-      to { -moz-transform: rotate(360deg); }
-    }
-    @-o-keyframes rotate {
-      from { -o-transform: rotate(0deg); }
-      to { -o-transform: rotate(360deg); }
+      from {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+      }
+      to {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
     }
+
+
     @keyframes rotate {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
+      from {
+          -webkit-transform: rotate(0deg);
+          -moz-transform: rotate(0deg);
+          -ms-transform: rotate(0deg);
+          transform: rotate(0deg);
+      }
+      to {
+          -webkit-transform: rotate(360deg);
+          -moz-transform: rotate(360deg);
+          -ms-transform: rotate(360deg);
+          transform: rotate(360deg);
+      }
     }
 
     /* Orbit Graceful Loading */
@@ -98,30 +108,30 @@ $orbit-timer-hide-for-small: true !default;
 
       // Orbit preloader
       .#{$preloader-class} {
-        display: block;
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-top: -20px;
-        margin-left: -20px;
-        border: solid 3px;
-        border-color: $charcoal $white;
         @include radius(1000px);
-        animation-name: rotate;
         animation-duration: 1.5s;
         animation-iteration-count: infinite;
+        animation-name: rotate;
         animation-timing-function: linear;
+        border-color: $charcoal $white;
+        border: solid 3px;
+        display: block;
+        height: 40px;
+        left: 50%;
+        margin-left: -20px;
+        margin-top: -20px;
+        position: absolute;
+        top: 50%;
+        width: 40px;
       }
     }
 
 
     .orbit-container {
+      background: $orbit-container-bg;
       overflow: hidden;
-      width: 100%;
       position: relative;
-      background: $orbit-container-bg;
+      width: 100%;
 
       .orbit-slides-container {
         list-style: none;
@@ -131,10 +141,14 @@ $orbit-timer-hide-for-small: true !default;
 
         // Prevents images (and captions) from disappearing after first rotation on Chrome for Android
         -webkit-transform: translateZ(0);
+        -moz-transform: translateZ(0);
+        -ms-transform: translateZ(0);
+        -o-transform: translateZ(0);
+        transform: translateZ(0);
 
         img { display: block; max-width: 100%; }
 
-        &>* {
+        > * {
           position: absolute;
           top: 0;
           width: 100%;
@@ -147,48 +161,51 @@ $orbit-timer-hide-for-small: true !default;
 
           &:first-child {
             @if $text-direction == rtl {
-            margin-right: 0;
+              margin-right: 0;
             }
             @else {
-            margin-left: 0;
+              margin-left: 0;
             }
           }
 
           .orbit-caption {
             @if $orbit-caption-position == "bottom" {
-              position: absolute;
               bottom: 0;
+              position: absolute;
             } @else if $orbit-caption-position == "under" {
               position: relative;
             }
 
             background-color: $orbit-caption-bg;
             color: $orbit-caption-font-color;
-            width: 100%;
-            padding: $orbit-caption-padding;
             font-size: $orbit-caption-font-size;
+            padding: $orbit-caption-padding;
+            width: 100%;
           }
         }
       }
 
       .orbit-slide-number {
-        position: absolute;
-        top: 10px;
         #{$default-float}: 10px;
+        background: $orbit-slide-number-bg;
+        color: $orbit-slide-number-font-color;
         font-size: 12px;
+        position: absolute;
         span { font-weight: 700; padding: $orbit-slide-number-padding;}
-        color: $orbit-slide-number-font-color;
-        background: $orbit-slide-number-bg;
+        top: 10px;
         z-index: 10;
       }
 
       .orbit-timer {
+        
         position: absolute;
         top: 12px;
         #{$opposite-direction}: 10px;
         height: 6px;
         width: 100px;
         z-index: 10;
+        
+
         .orbit-progress {
           @if $orbit-timer-show-progress-bar {
             height: 3px;
@@ -198,26 +215,26 @@ $orbit-timer-hide-for-small: true !default;
             position: relative;
             right: 20px;
             top: 5px;
+            
           }
         }
 
         // Play button
         & > span {
+          border: solid 4px $white;
+          border-bottom: none;
+          border-top: none;
           display: none;
+          height: 14px;
           position: absolute;
           top: 0;
-          #{$opposite-direction}: 0;
           width: 11px;
-          height: 14px;
-          border: solid 4px $white;
-          border-top: none;
-          border-bottom: none;
+          #{$opposite-direction}: 0;
         }
 
         // Pause button
         &.paused {
           & > span {
-            #{$opposite-direction}: -4px;
             top: 0;
             width: 11px;
             height: 14px;
@@ -225,6 +242,8 @@ $orbit-timer-hide-for-small: true !default;
             border-left-style: solid;
             border-color: transparent;
             border-left-color: $white;
+            #{$opposite-direction}: -4px;
+
             &.dark {
               border-left-color: $oil;
             }
@@ -239,15 +258,15 @@ $orbit-timer-hide-for-small: true !default;
       // Let's get those controls to be right in the center on each side
       .orbit-prev,
       .orbit-next {
-        position: absolute;
-        top: 45%;
-        margin-top: -25px;
-        width: 36px;
+        background-color: $orbit-nav-bg;
+        color: white;
         height: 60px;
         line-height: 50px;
-        color: white;
-        background-color: $orbit-nav-bg;
+        margin-top: -25px;
+        position: absolute;
         text-indent: -9999px !important;
+        top: 45%;
+        width: 36px;
         z-index: 10;
 
         &:hover {
@@ -255,13 +274,13 @@ $orbit-timer-hide-for-small: true !default;
         }
 
         & > span {
+          border: inset 10px;
+          display: block;
+          height: 0;
+          margin-top: -10px;
           position: absolute;
           top: 50%;
-          margin-top: -10px;
-          display: block;
           width: 0;
-          height: 0;
-          border: inset 10px;
         }
       }
       .orbit-prev { #{$default-float}: 0;
@@ -290,23 +309,24 @@ $orbit-timer-hide-for-small: true !default;
 
     .orbit-bullets-container { text-align: center; }
     .orbit-bullets {
+      display: block;
+      float: none;
       margin: 0 auto 30px auto;
       overflow: hidden;
       position: relative;
-      top: 10px;
-      float: none;
       text-align: center;
-      display: block;
+      top: 10px;
 
       li {
-        cursor:pointer;
-        display: inline-block;
-        width: $orbit-bullet-radius;
-        height: $orbit-bullet-radius;
         background: $orbit-bullet-nav-color;
+        cursor: pointer;
+        display: inline-block;
         // float: $default-float;
         float: none;
+        height: $orbit-bullet-radius;
         margin-#{$opposite-direction}: 6px;
+        width: $orbit-bullet-radius;
+
         @include radius(1000px);
 
         &.active {
@@ -344,9 +364,9 @@ $orbit-timer-hide-for-small: true !default;
       .orbit-stack-on-small {
         .orbit-slides-container {height: auto !important;}
         .orbit-slides-container > * {
+          margin:0  !important;
+          opacity: 1 !important;
           position: relative;
-          margin:0 !important;
-          opacity:1 !important;
         }
 
         .orbit-slide-number {

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -68,19 +68,19 @@ $pagination-link-current-active-bg: $primary-color !default;
     a, button {
       background: $pagination-link-current-background;
       color: $pagination-link-current-font-color;
-      font-weight: $pagination-link-current-font-weight;
       cursor: $pagination-link-current-cursor;
+      font-weight: $pagination-link-current-font-weight;
 
       &:hover,
       &:focus { background: $pagination-link-current-active-bg; }
     }
   } @else {
-    height: auto;
-    padding: $pagination-link-pad;
     background: $pagination-link-current-background;
     color: $pagination-link-current-font-color;
-    font-weight: $pagination-link-current-font-weight;
     cursor: $pagination-link-current-cursor;
+    font-weight: $pagination-link-current-font-weight;
+    height: auto;
+    padding: $pagination-link-pad;
     @include radius;
 
     &:hover,
@@ -98,25 +98,25 @@ $pagination-link-current-active-bg: $primary-color !default;
 
   @if $base-style {
     display: block;
-    min-height: $pagination-height;
     margin-#{$default-float}: $pagination-margin;
+    min-height: $pagination-height;
 
     li {
-      height: $pagination-li-height;
       color: $pagination-li-font-color;
       font-size: $pagination-li-font-size;
+      height: $pagination-li-height;
       margin-#{$default-float}: $pagination-li-margin;
 
       a, button {
-        display: block;
-        padding: $pagination-link-pad;
-        color: $pagination-link-font-color;
-        background: none;
         @include radius;
-        font-weight: normal;
+        @include single-transition(background-color);
+        background: none;
+        color: $pagination-link-font-color;
+        display: block;
         font-size: 1em;
+        font-weight: normal;
         line-height: inherit;
-        @include single-transition(background-color);
+        padding: $pagination-link-pad;
       }
 
       &:hover a,
@@ -135,11 +135,11 @@ $pagination-link-current-active-bg: $primary-color !default;
   // Left or center align the li elements
   li {
     @if $center {
-      float: none;
       display: inline-block;
+      float: none;
     } @else {
-      float: $pagination-li-float;
       display: block;
+      float: $pagination-li-float;
     }
   }
 }

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -13,10 +13,10 @@ $include-html-panel-classes: $include-html-classes !default;
 $panel-bg: scale-color($white, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
+$callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
 
 // We use this % to control how much we darken things on hover
-$panel-function-factor: -11% !default;
-$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default;
+$panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;
 
 // We use these to set default inner padding and bottom margin
 $panel-margin-bottom: rem-calc(20) !default;
@@ -36,14 +36,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
 // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
 // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
 // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
-@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
+@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
 
-    border-style: $panel-border-style;
-    border-width: $panel-border-size;
-    border-color: scale-color($bg, $lightness: $panel-function-factor);
+    @if $border {
+      border-style: $panel-border-style;
+      border-width: $panel-border-size;
+      border-color: $panel-border-color;
+    } @else {
+      border-style: none;
+      border-width: 0;
+    }
+
     margin-bottom: $panel-margin-bottom;
     padding: $padding;
 
@@ -52,20 +58,20 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
     @else { color: $panel-font-color-alt; }
 
     // Respect the padding, fool.
-    &>:first-child { margin-top: 0; }
-    &>:last-child { margin-bottom: 0; }
+    > :first-child { margin-top: 0; }
+    > :last-child { margin-bottom: 0; }
 
     @if $adjust {
       // We set the font color based on the darkness of the bg.
-      @if $bg-lightness >= 50% { 
-        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+      @if $bg-lightness >= 50% {
+        h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; }
       }
-      @else { 
-        h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+      @else {
+        h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; }
       }
 
       // reset header line-heights for panels
-      h1,h2,h3,h4,h5,h6 {
+      h1, h2, h3, h4, h5, h6 {
         line-height: 1; margin-bottom: rem-calc(20) / 2;
         &.subheader { line-height: 1.4; }
       }
@@ -80,7 +86,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne
     .panel { @include panel;
 
       &.callout {
-        @include panel(scale-color($primary-color, $lightness: 94%));
+        @include panel($callout-panel-bg);
         a:not(.button) {
           color: $callout-panel-link-color;