foundation-rails 5.2.3.0 → 5.3.0.0

data/vendor/assets/stylesheets/foundation/components/_block-grid.scss

@@ -7,7 +7,7 @@
 //
 // Block Grid Variables
 //
-$include-html-grid-classes: $include-html-classes !default;
+$include-html-block-grid-classes: $include-html-classes !default;
 $include-xl-html-block-grid-classes: false !default;
 
 // We use this to control the maximum number of block grid elements per row
@@ -101,7 +101,7 @@ $block-grid-media-queries: true !default;
 }
 
 @include exports("block-grid") {
-  @if $include-html-grid-classes {
+  @if $include-html-block-grid-classes {
 
     [class*="block-grid-"] { @include block-grid; }
 

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

@@ -58,6 +58,10 @@ $button-group-border-width: 1px !default;
 
   // 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); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -68,6 +72,10 @@ $button-group-border-width: 1px !default;
     &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
   }
   @else if $radius {
+    &,
+    & > a,
+    & > button,
+    & > .button { @include radius(0); }
     &:first-child,
     &:first-child > a,
     &:first-child > button,
@@ -105,4 +113,4 @@ $button-group-border-width: 1px !default;
       .button-group { @include button-group-container($styles:false,$float:true); }
     }
   }
-}
+}

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

@@ -306,9 +306,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
 @mixin form-select  {
   -webkit-appearance: none !important;
   background-color: $select-bg-color;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+  
+  // The custom arrow have some fake horizontal padding so we can align it
+  // from the right side of the element without relying on CSS3
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
+  
+  // We can safely use leftmost and rightmost now
+  background-position: if($text-direction == 'rtl', 0%, 100%) center;
+  
   background-repeat: no-repeat;
-  background-position: if($text-direction == 'rtl', 3%, 97%) center;
   border: $input-border-width $input-border-style $input-border-color;
   padding: $form-spacing / 2;
   font-size: $input-font-size;
@@ -345,10 +351,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
       display:none;
     }
 
-    @-moz-document url-prefix() {
-      select { background: $select-bg-color; }
-      select:hover { background: $select-hover-bg-color }
-    }
     /* Attach elements to the beginning or end of an input */
     .prefix,
     .postfix { @include prefix-postfix-base; }

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

@@ -31,7 +31,7 @@ $base-line-height: 150% !default;
 
 // @mixins
 //
-// We use this to optionally include experimental or 
+// We use this to optionally include experimental or
 // explicitly vendor prefixed properties
 @mixin experimental() {
   @if $experimental {
@@ -135,12 +135,12 @@ $base-line-height: 150% !default;
 // $hover-color - icon color during hover
 // $offcanvas - Set to true of @include in offcanvas
 @mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
-  span:after {
-    content: '';
+  span::after {
+    content: "";
     position: absolute;
     display: block;
     height: 0;
-    
+
     @if $offcanvas {
       @if $top {
         top: $top;
@@ -156,7 +156,12 @@ $base-line-height: 150% !default;
     	  left: ($tabbar-menu-icon-width - $width)/2;
     	}
     }
-    	
+    @else {
+      top: 50%;
+      margin-top: -$width/2;
+      #{$opposite-direction}: $topbar-link-padding;
+    }
+
     box-shadow:
       0 0px 0 $thickness $color,
       0 $gap + $thickness 0 $thickness $color,
@@ -320,11 +325,11 @@ $cursor-text-value: text !default;
   // 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.2.3/";
   }
-  
+
   meta.foundation-mq-small {
     font-family: "/" + unquote($small-up) + "/";
     width: lower-bound($small-range);

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

@@ -140,7 +140,7 @@ $total-columns: 12 !default;
   @if $center {
     margin-#{$default-float}: auto;
     margin-#{$opposite-direction}: auto;
-    float: none !important;
+    float: none;
   }
 
   // If offset, calculate appropriate margins
@@ -170,8 +170,6 @@ $total-columns: 12 !default;
     .#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
   }
 
-  [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
-  [class*="column"] + [class*="column"].end { float: $default-float; }
 
 
   @for $i from 0 through $total-columns - 1 {
@@ -192,7 +190,19 @@ $total-columns: 12 !default;
   .columns.#{$size}-uncentered {
     margin-#{$default-float}: 0;
     margin-#{$opposite-direction}: 0;
-    float: $default-float !important;
+    float: $default-float;
+  }
+
+  // Fighting [class*="column"] + [class*="column"]:last-child
+  .column.#{$size}-centered:last-child,
+  .columns.#{$size}-centered:last-child{
+    float: none;
+  }
+
+  // Fighting .column.<previous-size>-centered:last-child
+  .column.#{$size}-uncentered:last-child,
+  .columns.#{$size}-uncentered:last-child {
+    float: $default-float;
   }
 
   .column.#{$size}-uncentered.opposite,
@@ -221,6 +231,9 @@ $total-columns: 12 !default;
     .column,
     .columns { @include grid-column($columns:$total-columns); }
 
+    [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
+    [class*="column"] + [class*="column"].end { float: $default-float; }
+
     @media #{$small-up} {
       @include grid-html-classes($size:small);
     }

data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss

@@ -0,0 +1,229 @@
+// Foundation by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+@import "global";
+
+
+// @name
+// @dependencies _global.scss
+
+
+
+// @variables
+
+// We use these to style the icon-bar and items
+$icon-bar-bg: #333 !default;
+$icon-bar-font-color: #fff !default;
+$icon-bar-font-size: 1rem !default;
+$icon-bar-hover-color: $primary-color !default;
+$icon-bar-icon-color: #fff !default;
+$icon-bar-icon-size: 1.875rem !default;
+$icon-bar-image-width: 1.875rem !default;
+$icon-bar-image-height: 1.875rem !default;
+$icon-bar-active-color: $primary-color !default;
+$icon-bar-item-padding: 1.25rem !default;
+
+//
+// @mixins
+//
+
+// We use this mixin to create the base styles for our switch element.
+//
+// $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+// $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+@mixin icon-bar-base() {
+ 
+ 	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	& > * {
+		text-align: center;
+		font-size: $icon-bar-font-size;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: $icon-bar-item-padding;
+		float: left;
+
+		i, img { 
+			display: block;
+			margin: 0 auto; 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-bar-icon-size;
+			vertical-align: middle;
+		}
+
+		img {
+			width: $icon-bar-image-width;
+			height: $icon-bar-image-height;
+		}
+	}
+
+	&.label-right > * {
+
+		i, img { 
+			margin: 0 .0625rem 0 0; 
+			display: inline-block;
+
+			& + label {
+				margin-top: 0;
+			}
+		}
+
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right > * {
+		text-align: left;
+	}
+
+	&.vertical {
+		height: 100%;
+		width: auto;
+
+		.item {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+}
+
+// We use this mixin to create the size styles for icon bars.
+//
+// $height - Height (in px) of the switch. Default: $switch-height-med.
+// $font-size - Font size of text in switch. Default: $switch-font-size-med.
+@mixin icon-bar-size(
+	$padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height) {
+
+	& > * {
+		font-size: $icon-bar-font-size;
+		padding: $icon-bar-item-padding;
+
+		i, img { 
+
+			& + label {
+				margin-top: .0625rem;
+			}
+		}
+
+		i {
+			font-size: $icon-bar-icon-size;
+		}
+
+		img {
+			width: $icon-bar-image-width;
+			height: $icon-bar-image-height;
+		}
+	}
+
+}
+
+// We use this mixin to add color and other fanciness to the switches.
+//
+// $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+// $active-color - Background color of positive side of switch. Default: $switch-positive-color.
+// $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+// $radius - Radius to apply to switch. Default: false.
+// $base-style - Apply base styles? Default: true.
+@mixin icon-bar-style(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $base-style:true) {
+
+	@if $base-style {
+	
+		background: $bar-bg;
+
+		& > * {
+
+			&:hover { background: $bar-hover-color; }
+
+			label { color: $bar-font-color; }
+
+			i {
+				color: $bar-icon-color;
+			}
+		}
+	}
+
+}
+
+// We use this to quickly create icon bars with a single mixin
+//
+// $height – The overall calculated height of the icon bar (horizontal)
+// $bar-bg – the background color of the bar
+// $bar-font-color – the font color
+// $bar-hover-color – okay these are pretty obvious variables
+// $bar-icon-color – maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+// $bar-active-color – the color of an active / hover state
+// $base-style - Apply base styles? Default: true.
+
+@mixin icon-bar(
+  $bar-bg:$icon-bar-bg,
+  $bar-font-color:$icon-bar-font-color,
+  $bar-hover-color:$icon-bar-hover-color,
+  $bar-icon-color:$icon-bar-icon-color,
+  $bar-active-color:$icon-bar-active-color,
+  $padding: $icon-bar-item-padding,
+	$font-size: $icon-bar-font-size,
+	$icon-size: $icon-bar-icon-size,
+	$image-width: $icon-bar-image-width,
+	$image-height: $icon-bar-image-height,
+  $base-style:true) {
+    @include icon-bar-base();
+    @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style: true);
+}
+
+@include exports("icon-bar") {
+  @if $include-html-form-classes {
+    div.icon-bar {
+      @include icon-bar;
+    }
+  }
+}
+
+
+/* toolbar styles */
+
+.icon-bar {
+
+	// Counts
+
+	&.two-up {
+		.item { width: 50%; }
+		&.vertical .item { width: auto; }
+	}
+	&.three-up {
+		.item { width: 33.3333%; }
+		&.vertical .item { width: auto; }
+	}
+	&.four-up {
+		.item { width: 25%; }
+		&.vertical .item { width: auto; }
+	}
+	&.five-up {
+		.item { width: 20%; }
+		&.vertical .item { width: auto; }
+	}
+	&.six-up {
+		.item { width: 16.66667%; }
+		&.vertical .item { width: auto; }
+	}
+}

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

@@ -0,0 +1,67 @@
+/* toolbar styles */
+
+.iconbar {
+	background: #333;
+	width: 100%;
+	font-size: 0;
+	display: inline-block;
+
+	&.label-bottom .tab .tab-content {
+		i, img { margin-bottom: 10px; }
+	}
+
+	&.label-right .tab .tab-content {
+		i, img { margin-right: 10px; display: inline-block;}
+		label { display: inline-block; }
+	}
+
+	&.vertical.label-right .tab .tab-content {
+		text-align: left;
+	}
+
+	&.vertical {
+		height: 100%;
+		width: auto;
+
+		.tab {
+			width: auto;
+			margin: auto;
+			float: none;
+		}
+	}
+	
+	.tab {
+		text-align: center;
+		width: 25%;
+		margin: 0 auto;
+		display: block;
+		padding: 20px;
+		float: left;
+
+		&:hover {
+			background: rgba(#fff, 0.1);
+		}
+	}
+}		
+		
+.toolbar .tab-content {
+	font-size: 16px;
+	text-align: center;
+
+	label { color: #ccc; }
+
+	i {
+		font-size: 30px;
+		display: block;
+		margin: 0 auto;
+		color: #ccc;
+		vertical-align: middle;
+	}
+
+	img {
+		width: 30px;
+		height: 30px;
+		display: block;
+		margin: 0 auto;
+	}
+}