paint-rails 0.6.7 → 0.7.24

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

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 
 // @name
@@ -15,15 +15,22 @@ $include-html-icon-bar-classes: $include-html-classes !default;
 // We use these to style the icon-bar and items
 $icon-bar-bg: $oil !default;
 $icon-bar-font-color: $white !default;
+$icon-bar-font-color-hover: $icon-bar-font-color !default;
 $icon-bar-font-size: 1rem !default;
 $icon-bar-hover-color: $primary-color !default;
 $icon-bar-icon-color: $white !default;
+$icon-bar-icon-color-hover: $icon-bar-icon-color !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;
 
+// We use this to set default opacity and cursor for disabled icons.
+$icon-bar-disabled-opacity: .7 !default;
+$icon-bar-disabled-cursor: $cursor-disabled-value !default;
+
+
 //
 // @mixins
 //
@@ -31,149 +38,176 @@ $icon-bar-item-padding: 1.25rem !default;
 // We use this mixin to create the base styles for our Icon bar element.
 //
 @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, &.small-vertical{
-		height: 100%;
-		width: auto;
-
-		.item {
-			width: auto;
-			margin: auto;
-			float: none;
-		}
-	}
-
-	&.medium-vertical {
-		@media #{$medium-up} {
-			height: 100%;
-			width: auto;
-
-			.item {
-				width: auto;
-				margin: auto;
-				float: none;
-			}
-		}
-	}
-	&.large-vertical {
-		@media #{$large-up} {
-			height: 100%;
-			width: auto;
-
-			.item {
-				width: auto;
-				margin: auto;
-				float: none;
-			}
-		}
-	}
+  display: inline-block;
+  font-size: 0;
+  width: 100%;
+
+  > * {
+    display: block;
+    float: left;
+    font-size: $icon-bar-font-size;
+    margin: 0 auto;
+    padding: $icon-bar-item-padding;
+    text-align: center;
+    width: 25%;
+
+    i, img {
+      display: block;
+      margin: 0 auto;
+
+      & + label {
+        margin-top: .0625rem;
+      }
+    }
+
+    i {
+      font-size: $icon-bar-icon-size;
+      vertical-align: middle;
+    }
+
+    img {
+      height: $icon-bar-image-height;
+      width: $icon-bar-image-width;
+    }
+  }
+
+  &.label-right > * {
+
+    i, img {
+      display: inline-block;
+      margin: 0 .0625rem 0 0;
+
+      & + label {
+        margin-top: 0;
+      }
+    }
+
+    label { display: inline-block; }
+  }
+
+  &.vertical.label-right > * {
+    text-align: left;
+  }
+
+  &.vertical, &.small-vertical{
+    height: 100%;
+    width: auto;
+
+    .item {
+      float: none;
+      margin: auto;
+      width: auto;
+    }
+  }
+
+  &.medium-vertical {
+    @media #{$medium-up} {
+      height: 100%;
+      width: auto;
+
+      .item {
+        float: none;
+        margin: auto;
+        width: auto;
+      }
+    }
+  }
+  &.large-vertical {
+    @media #{$large-up} {
+      height: 100%;
+      width: auto;
+
+      .item {
+        float: none;
+        margin: auto;
+        width: auto;
+      }
+    }
+  }
 }
 
 // We use this mixin to create the size styles for icon bars.
 @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) {
+  $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: $font-size;
-		padding: $padding;
+  > * {
+    font-size: $font-size;
+    padding: $padding;
 
-		i, img { 
+    i, img {
 
-			& + label {
-				margin-top: .0625rem;
-			}
-		}
+      & + label {
+        margin-top: .0625rem;
+        font-size: $font-size;
+      }
+    }
 
-		i {
-			font-size: $icon-size;
-		}
+    i {
+      font-size: $icon-size;
+    }
 
-		img {
-			width: $image-width;
-			height: $image-height;
-		}
-	}
+    img {
+      height: $image-height;
+      width: $image-width;
+    }
+  }
 
 }
 
 @mixin icon-bar-style(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $bar-active-color:$icon-bar-active-color,
-  $base-style:true) {
+  $base-style:true,
+  $disabled:false) {
+
+  @if $base-style {
 
-	@if $base-style {
-	
-		background: $bar-bg;
+    background: $bar-bg;
 
-		& > * {
+    > * {
+      label { color: $bar-font-color; }
+
+      i { color: $bar-icon-color; }
+    }
 
-			&:hover { background: $bar-hover-color; }
+    > a:hover {
+
+      background: $bar-hover-color;
+
+      label { color: $bar-font-color-hover; }
+
+      i { color: $bar-icon-color-hover; }
+    }
 
-			label { color: $bar-font-color; }
+        > a.active {
 
-			i {
-				color: $bar-icon-color;
-			}
-		}
-	}
+      background: $bar-active-color;
+
+      label { color: $bar-font-color-hover; }
+
+      i { color: $bar-icon-color-hover; }
+    }
+  }
+  @if $disabled {
+    .item.disabled {
+      cursor: $icon-bar-disabled-cursor;
+      opacity: $icon-bar-disabled-opacity;
+      pointer-events: none;
+      >* {
+        opacity: $icon-bar-disabled-opacity;
+        cursor: $icon-bar-disabled-cursor;
+      }
+    }
+  }
 
 }
 
@@ -185,22 +219,127 @@ $icon-bar-item-padding: 1.25rem !default;
 // $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.
+// $disabled - Allow disabled icons? Default: false.
 
 @mixin icon-bar(
   $bar-bg:$icon-bar-bg,
   $bar-font-color:$icon-bar-font-color,
+  $bar-font-color-hover:$icon-bar-font-color-hover,
   $bar-hover-color:$icon-bar-hover-color,
   $bar-icon-color:$icon-bar-icon-color,
+  $bar-icon-color-hover:$icon-bar-icon-color-hover,
   $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) {
+  $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,
+  $disabled: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);
+    @include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
+
+  // Counts
+
+  &.two-up {
+    .item { width: 50%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.three-up {
+    .item { width: 33.3333%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.four-up {
+    .item { width: 25%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.five-up {
+    .item { width: 20%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.six-up {
+    .item { width: 16.66667%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+        width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+        width: auto;
+      }
+    }
+  }
+  &.seven-up {
+    .item { width: 14.28571%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
+  &.eight-up {
+    .item { width: 12.5%; }
+    &.vertical .item, &.small-vertical .item { width: auto; }
+    &.medium-vertical .item {
+      @media #{$medium-up} {
+            width: auto;
+      }
+    }
+    &.large-vertical .item {
+      @media #{$large-up} {
+         width: auto;
+      }
+    }
+  }
 }
 
 @include exports("icon-bar") {
@@ -213,81 +352,109 @@ $icon-bar-item-padding: 1.25rem !default;
 
 @if $include-html-icon-bar-classes {
 
-	// toolbar styles
-
-	.icon-bar {
-
-		// Counts
-
-		&.two-up {
-			.item { width: 50%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.three-up {
-			.item { width: 33.3333%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.four-up {
-			.item { width: 25%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.five-up {
-			.item { width: 20%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-		&.six-up {
-			.item { width: 16.66667%; }
-			&.vertical .item, &.small-vertical .item { width: auto; }
-			&.medium-vertical .item {
-				@media #{$medium-up} {
-					width: auto;
-				}
-			}
-			&.large-vertical .item {
-				@media #{$large-up} {
-					width: auto;
-				}
-			}
-		}
-	}
+  // toolbar styles
+
+  .icon-bar {
+
+    // Counts
+
+    &.two-up {
+      .item { width: 50%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.three-up {
+      .item { width: 33.3333%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.four-up {
+      .item { width: 25%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.five-up {
+      .item { width: 20%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.six-up {
+      .item { width: 16.66667%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+          width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+          width: auto;
+        }
+      }
+    }
+    &.seven-up {
+      .item { width: 14.28571%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+              width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+           width: auto;
+        }
+      }
+    }
+    &.eight-up {
+      .item { width: 12.5%; }
+      &.vertical .item, &.small-vertical .item { width: auto; }
+      &.medium-vertical .item {
+        @media #{$medium-up} {
+              width: auto;
+        }
+      }
+      &.large-vertical .item {
+        @media #{$large-up} {
+           width: auto;
+        }
+      }
+    }
+  }
 }

data/vendor/assets/stylesheets/bower_components/foundation/scss/foundation/components/_inline-lists.scss

@@ -2,7 +2,7 @@
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
@@ -32,19 +32,19 @@ $inline-list-children-display: block !default;
 //
 // We use this mixin to create inline lists
 @mixin inline-list {
-  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
+  list-style: none;
   margin-#{$default-float}: $inline-list-default-float-margin;
   margin-#{$opposite-direction}: $inline-list-opposite-margin;
-  padding: $inline-list-padding;
-  list-style: none;
+  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
   overflow: $inline-list-overflow;
+  padding: $inline-list-padding;
 
-  & > li {
-    list-style: none;
+  > li {
+    display: $inline-list-display;
     float: $default-float;
+    list-style: none;
     margin-#{$default-float}: $inline-list-default-float-list-margin;
-    display: $inline-list-display;
-    &>* { display: $inline-list-children-display; }
+    > * { display: $inline-list-children-display; }
   }
 }