afm-client/bower_components/foundation-apps/scss/components/_iconic.scss

   1 // ICONIC\r
   2 // ------\r
   3 //\r
   4 // A sample of 24 flexible, easily schemable icons from the folks at Iconic.\r
   5 // \r
   6 // Features:\r
   7 //  - 24 icons\r
   8 //  - Built-in coloring and sizing classes\r
   9 //  - Coloring mixin\r
  10 //  - Angular support\r
  11 \r
  12 /// @Foundation.settings\r
  13 // Iconic\r
  14 $iconic-primary-fill: $primary-color !default;\r
  15 $iconic-primary-stroke: $primary-color !default;\r
  16 $iconic-accent-fill: $iconic-primary-fill !default;\r
  17 $iconic-accent-stroke: $iconic-accent-fill !default;\r
  18 ///\r
  19 \r
  20 // Colors the fill, and optionally stroke, accent fill, and accent stroke of an Iconic icon.\r
  21 @mixin color-icon(\r
  22   $fill,\r
  23   $stroke: null,\r
  24   $fillAccent: null,\r
  25   $strokeAccent: null\r
  26 ) {\r
  27   * {\r
  28     fill: $fill;\r
  29 \r
  30     // Use the fill color if no stroke is provided\r
  31     @if hasvalue($stroke) {\r
  32       stroke: $stroke;\r
  33     }\r
  34     @else {\r
  35       stroke: $fill;\r
  36     }\r
  37 \r
  38     &.iconic-property-accent {\r
  39       // Use the fill color if no accent is provided\r
  40       @if hasvalue($fillAccent) {\r
  41         fill: $fillAccent;\r
  42       }\r
  43       @else {\r
  44         fill: $fill;\r
  45       }\r
  46 \r
  47       // Use the normal stroke color if no accent is provided\r
  48       @if hasvalue($strokeAccent) {\r
  49         stroke: $strokeAccent;\r
  50       }\r
  51       @else {\r
  52         // ...or use the fill if no normal stroke is provided\r
  53         @if hasvalue($stroke) {\r
  54           stroke: $stroke;\r
  55         }\r
  56         @else {\r
  57           stroke: $fill;\r
  58         }\r
  59       }\r
  60     }\r
  61   }\r
  62 }\r
  63 \r
  64 @include exports(iconic) {\r
  65   .iconic {\r
  66     width: 1rem;\r
  67     height: 1rem;\r
  68     vertical-align: middle;\r
  69 \r
  70     a > & {\r
  71       @include color-icon($primary-color);\r
  72       margin-top: -2px;\r
  73       margin-right: 0.25rem;\r
  74     }\r
  75   }\r
  76 \r
  77   .iconic * {\r
  78     fill: $iconic-primary-fill;\r
  79     stroke: $iconic-primary-stroke;\r
  80 \r
  81     &.iconic-property-accent {\r
  82       fill: $iconic-accent-fill;\r
  83       stroke: $iconic-accent-stroke;\r
  84     }\r
  85   }\r
  86 \r
  87   @each $color in map-keys($foundation-colors) {\r
  88     .iconic-color-#{$color} {\r
  89       @include color-icon(map-get($foundation-colors, $color));\r
  90     }\r
  91   }\r
  92   .iconic-color-secondary {\r
  93     @include color-icon($secondary-color);\r
  94   }\r
  95 }\r