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

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