_global.scss in foundation-rails-5.4.0.0

- old
+ new

@@ -40,13 +40,17 @@
 //
 // We use this to create equal side border radius on elements.
 // $side - Options: left, right, top, bottom
 @mixin side-radius($side, $radius:$global-radius) {
   @if ($side == left or $side == right) {
+    -webkit-border-bottom-#{$side}-radius: $radius;
+    -webkit-border-top-#{$side}-radius: $radius;
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
   } @else {
+    -webkit-#{$side}-left-radius: $radius;
+    -webkit-#{$side}-right-radius: $radius;
     border-#{$side}-left-radius: $radius;
     border-#{$side}-right-radius: $radius;
   }
 }
 
@@ -143,11 +147,11 @@
     	  left: ($tabbar-menu-icon-width - $width)/2;
     	}
     }
     @else {
       top: 50%;
-      margin-top: -$width/2;
+      margin-top: -($width/2);
       #{$opposite-direction}: $topbar-link-padding;
     }
 
     box-shadow:
       0 0px 0 $thickness $color,
@@ -214,10 +218,40 @@
   width: auto;
   overflow: visible;
   clip: auto;
 }
 
+// We use these as default colors throughout
+$primary-color: #008CBA !default;   // bondi-blue
+$secondary-color: #e7e7e7 !default; // white-lilac
+$alert-color: #f04124 !default;     // cinnabar
+$success-color: #43AC6A !default;   // sea-green
+$warning-color: #f08a24 !default;   // carrot
+$info-color: #a0d3e8 !default;      // cornflower
+
+
+$white         : #FFFFFF !default;
+$ghost         : #FAFAFA !default;
+$snow          : #F9F9F9 !default;
+$vapor         : #F6F6F6 !default;
+$white-smoke   : #F5F5F5 !default;
+$silver        : #EFEFEF !default;
+$smoke         : #EEEEEE !default;
+$gainsboro     : #DDDDDD !default;
+$iron          : #CCCCCC !default;
+$base          : #AAAAAA !default;
+$aluminum      : #999999 !default;
+$jumbo         : #888888 !default;
+$monsoon       : #777777 !default;
+$steel         : #666666 !default;
+$charcoal      : #555555 !default;
+$tuatara       : #444444 !default;
+$oil           : #333333 !default;
+$jet           : #222222 !default;
+$black         : #000000 !default;
+
+
 // We use these to define default font weights
 $font-weight-normal: normal !default;
 $font-weight-bold: bold !default;
 
 // We use these to control various global styles
@@ -239,17 +273,10 @@
   $opposite-direction: right;
 } @else {
   $default-float: right;
   $opposite-direction: left;
 }
-// We use these as default colors throughout
-$primary-color: #008CBA !default;
-$secondary-color: #e7e7e7 !default;
-$alert-color: #f04124 !default;
-$success-color: #43AC6A !default;
-$warning-color: #f08a24 !default;
-$info-color: #a0d3e8 !default;
 
 // We use these to make sure border radius matches unless we want it different.
 $global-radius: 3px !default;
 $global-rounded: 1000px !default;
 
@@ -312,10 +339,10 @@
   // Meta styles are included in all builds, as they are a dependancy of the Javascript.
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
   meta.foundation-version {
-    font-family: "/5.3.3/";
+    font-family: "/{{ VERSION }}/";
   }
 
   meta.foundation-mq-small {
     font-family: "/" + unquote($small-up) + "/";
     width: lower-bound($small-range);