Merge afb-client

[src/app-framework-demo.git] / afb-client / bower_components / foundation-apps / scss / components / _iconic.scss

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
new file mode 100644 (file)
index 0000000..77d0bd3
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_iconic.scss
@@ -0,0 +1,95 @@
+// ICONIC
+// ------
+//
+// A sample of 24 flexible, easily schemable icons from the folks at Iconic.
+// 
+// Features:
+//  - 24 icons
+//  - Built-in coloring and sizing classes
+//  - Coloring mixin
+//  - Angular support
+
+/// @Foundation.settings
+// Iconic
+$iconic-primary-fill: $primary-color !default;
+$iconic-primary-stroke: $primary-color !default;
+$iconic-accent-fill: $iconic-primary-fill !default;
+$iconic-accent-stroke: $iconic-accent-fill !default;
+///
+
+// Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.
+@mixin color-icon(
+  $fill,
+  $stroke: null,
+  $fillAccent: null,
+  $strokeAccent: null
+) {
+  * {
+    fill: $fill;
+
+    // Use the fill color if no stroke is provided
+    @if hasvalue($stroke) {
+      stroke: $stroke;
+    }
+    @else {
+      stroke: $fill;
+    }
+
+    &.iconic-property-accent {
+      // Use the fill color if no accent is provided
+      @if hasvalue($fillAccent) {
+        fill: $fillAccent;
+      }
+      @else {
+        fill: $fill;
+      }
+
+      // Use the normal stroke color if no accent is provided
+      @if hasvalue($strokeAccent) {
+        stroke: $strokeAccent;
+      }
+      @else {
+        // ...or use the fill if no normal stroke is provided
+        @if hasvalue($stroke) {
+          stroke: $stroke;
+        }
+        @else {
+          stroke: $fill;
+        }
+      }
+    }
+  }
+}
+
+@include exports(iconic) {
+  .iconic {
+    width: 1rem;
+    height: 1rem;
+    vertical-align: middle;
+
+    a > & {
+      @include color-icon($primary-color);
+      margin-top: -2px;
+      margin-right: 0.25rem;
+    }
+  }
+
+  .iconic * {
+    fill: $iconic-primary-fill;
+    stroke: $iconic-primary-stroke;
+
+    &.iconic-property-accent {
+      fill: $iconic-accent-fill;
+      stroke: $iconic-accent-stroke;
+    }
+  }
+
+  @each $color in map-keys($foundation-colors) {
+    .iconic-color-#{$color} {
+      @include color-icon(map-get($foundation-colors, $color));
+    }
+  }
+  .iconic-color-secondary {
+    @include color-icon($secondary-color);
+  }
+}