Update JSON API

[src/app-framework-demo.git] / afm-client / bower_components / foundation-apps / scss / components / _label.scss

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_label.scss b/afm-client/bower_components/foundation-apps/scss/components/_label.scss
new file mode 100644 (file)
index 0000000..0d17247
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_label.scss
@@ -0,0 +1,134 @@
+/*\r
+  Label\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Label\r
+$label-fontsize: 0.8rem !default;\r
+$label-padding: ($global-padding / 3) ($global-padding / 2) !default;\r
+$label-radius: 0 !default;\r
+$label-background: $primary-color !default;\r
+$label-color: isitlight($primary-color) !default;\r
+\r
+$badge-fontsize: 0.8em !default;\r
+$badge-diameter: 1.5rem !default;\r
+$badge-background: $primary-color !default;\r
+$badge-color: #fff !default;\r
+///\r
+\r
+%label {\r
+  line-height: 1;\r
+  white-space: nowrap;\r
+  display: inline-block;\r
+  cursor: default;\r
+}\r
+\r
+@mixin label-layout(\r
+  $fontsize: $label-fontsize,\r
+  $padding: $label-padding\r
+) {\r
+  font-size: $fontsize;\r
+  padding: $padding;\r
+}\r
+\r
+@mixin label-style(\r
+  $background: $label-background,\r
+  $color: $label-color,\r
+  $radius: $label-radius\r
+) {\r
+  background: $background;\r
+  border-radius: $radius;\r
+\r
+  @if $color == auto {\r
+    color: isitlight($background);\r
+  }\r
+  @else {\r
+    color: $color;\r
+  }\r
+}\r
+\r
+@mixin label(\r
+  $background: $label-background,\r
+  $color: $label-color,\r
+  $radius: $label-radius,\r
+  $fontsize: $label-fontsize,\r
+  $padding: $label-padding\r
+) {\r
+  @extend %label;\r
+  @include label-layout($fontsize, $padding);\r
+  @include label-style($background, $color, $radius);\r
+}\r
+\r
+@include exports(label) {\r
+  .label {\r
+    @include label;\r
+\r
+    @each $color in map-keys($foundation-colors) {\r
+      &.#{$color} {\r
+        $color-value: map-get($foundation-colors, $color);\r
+        @include label-style($color-value, auto);\r
+      }\r
+    }\r
+  }\r
+}\r
+\r
+/*\r
+  Badge\r
+*/\r
+\r
+%badge {\r
+  align-items: center;\r
+  justify-content: center;\r
+  display: inline-flex;\r
+  border-radius: 1000px;\r
+}\r
+\r
+@mixin badge-layout(\r
+  $fontsize: $badge-fontsize,\r
+  $diameter: $badge-diameter\r
+) {\r
+  font-size: $fontsize;\r
+  width: $diameter;\r
+  height: $diameter;\r
+}\r
+\r
+@mixin badge-style(\r
+  $background: $badge-background,\r
+  $color: $badge-font-color\r
+) {\r
+  background: $background;\r
+\r
+  @if $color == auto {\r
+    color: isitlight($background);\r
+  }\r
+  @else {\r
+    color: $color;\r
+  }\r
+}\r
+\r
+@mixin badge(\r
+  $background: $badge-background,\r
+  $color: $badge-color,\r
+  $diameter: $badge-diameter,\r
+  $fontsize: $badge-fontsize\r
+) {\r
+  @extend %badge;\r
+  @include badge-layout($fontsize, $diameter);\r
+  @include badge-style($background, $color);\r
+}\r
+\r
+@include exports(badge) {\r
+  .badge {\r
+    @include badge;\r
+\r
+    &.secondary {\r
+      @include badge-style($secondary-color, auto);\r
+    }\r
+    @each $color in map-keys($foundation-colors) {\r
+      &.#{$color} {\r
+        $color-value: map-get($foundation-colors, $color);\r
+        @include badge-style($color-value, auto);\r
+      }\r
+    }\r
+  }\r
+}\r