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