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

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