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

   1 /*\r
   2   Label\r
   3 */\r
   4 \r
   5 /// @Foundation.settings\r
   6 // Label\r
   7 $label-fontsize: 0.8rem !default;\r
   8 $label-padding: ($global-padding / 3) ($global-padding / 2) !default;\r
   9 $label-radius: 0 !default;\r
  10 $label-background: $primary-color !default;\r
  11 $label-color: isitlight($primary-color) !default;\r
  12 \r
  13 $badge-fontsize: 0.8em !default;\r
  14 $badge-diameter: 1.5rem !default;\r
  15 $badge-background: $primary-color !default;\r
  16 $badge-color: #fff !default;\r
  17 ///\r
  18 \r
  19 %label {\r
  20   line-height: 1;\r
  21   white-space: nowrap;\r
  22   display: inline-block;\r
  23   cursor: default;\r
  24 }\r
  25 \r
  26 @mixin label-layout(\r
  27   $fontsize: $label-fontsize,\r
  28   $padding: $label-padding\r
  29 ) {\r
  30   font-size: $fontsize;\r
  31   padding: $padding;\r
  32 }\r
  33 \r
  34 @mixin label-style(\r
  35   $background: $label-background,\r
  36   $color: $label-color,\r
  37   $radius: $label-radius\r
  38 ) {\r
  39   background: $background;\r
  40   border-radius: $radius;\r
  41 \r
  42   @if $color == auto {\r
  43     color: isitlight($background);\r
  44   }\r
  45   @else {\r
  46     color: $color;\r
  47   }\r
  48 }\r
  49 \r
  50 @mixin label(\r
  51   $background: $label-background,\r
  52   $color: $label-color,\r
  53   $radius: $label-radius,\r
  54   $fontsize: $label-fontsize,\r
  55   $padding: $label-padding\r
  56 ) {\r
  57   @extend %label;\r
  58   @include label-layout($fontsize, $padding);\r
  59   @include label-style($background, $color, $radius);\r
  60 }\r
  61 \r
  62 @include exports(label) {\r
  63   .label {\r
  64     @include label;\r
  65 \r
  66     @each $color in map-keys($foundation-colors) {\r
  67       &.#{$color} {\r
  68         $color-value: map-get($foundation-colors, $color);\r
  69         @include label-style($color-value, auto);\r
  70       }\r
  71     }\r
  72   }\r
  73 }\r
  74 \r
  75 /*\r
  76   Badge\r
  77 */\r
  78 \r
  79 %badge {\r
  80   align-items: center;\r
  81   justify-content: center;\r
  82   display: inline-flex;\r
  83   border-radius: 1000px;\r
  84 }\r
  85 \r
  86 @mixin badge-layout(\r
  87   $fontsize: $badge-fontsize,\r
  88   $diameter: $badge-diameter\r
  89 ) {\r
  90   font-size: $fontsize;\r
  91   width: $diameter;\r
  92   height: $diameter;\r
  93 }\r
  94 \r
  95 @mixin badge-style(\r
  96   $background: $badge-background,\r
  97   $color: $badge-font-color\r
  98 ) {\r
  99   background: $background;\r
 100 \r
 101   @if $color == auto {\r
 102     color: isitlight($background);\r
 103   }\r
 104   @else {\r
 105     color: $color;\r
 106   }\r
 107 }\r
 108 \r
 109 @mixin badge(\r
 110   $background: $badge-background,\r
 111   $color: $badge-color,\r
 112   $diameter: $badge-diameter,\r
 113   $fontsize: $badge-fontsize\r
 114 ) {\r
 115   @extend %badge;\r
 116   @include badge-layout($fontsize, $diameter);\r
 117   @include badge-style($background, $color);\r
 118 }\r
 119 \r
 120 @include exports(badge) {\r
 121   .badge {\r
 122     @include badge;\r
 123 \r
 124     &.secondary {\r
 125       @include badge-style($secondary-color, auto);\r
 126     }\r
 127     @each $color in map-keys($foundation-colors) {\r
 128       &.#{$color} {\r
 129         $color-value: map-get($foundation-colors, $color);\r
 130         @include badge-style($color-value, auto);\r
 131       }\r
 132     }\r
 133   }\r
 134 }\r