Update JSON API

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

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_button-group.scss b/afm-client/bower_components/foundation-apps/scss/components/_button-group.scss
new file mode 100644 (file)
index 0000000..6670c91
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_button-group.scss
@@ -0,0 +1,197 @@
+/// @Foundation.settings\r
+// Button Group\r
+$btngroup-background: $primary-color !default;\r
+$btngroup-color: #fff !default;\r
+$btngroup-radius: $button-radius !default;\r
+///\r
+\r
+$child-selectors: '> a, > label, > button';\r
+\r
+%button-group {\r
+  margin: 0;\r
+  margin-bottom: 1rem;\r
+  list-style-type: none;\r
+  display: inline-flex;\r
+  border-radius: $btngroup-radius;\r
+  overflow: hidden;\r
+  font-size: $button-font-size;\r
+\r
+  > li {\r
+    flex: 0 0 auto;\r
+\r
+    // Links become buttons\r
+    #{$child-selectors} {\r
+      @extend %button;\r
+      border-radius: 0;\r
+      font-size: inherit;\r
+      display: block;\r
+      margin: 0;\r
+    }\r
+    > input + label {\r
+      margin-left: 0;\r
+    }\r
+    // Add borders between items\r
+    &:not(:last-child) {\r
+      #{$child-selectors} {\r
+        border-right: 1px solid scale-color($btngroup-background, $lightness: -25%);\r
+      }\r
+    }\r
+  }\r
+\r
+  @if using(iconic) {\r
+    .iconic {\r
+      width: 1em;\r
+      height: 1em;\r
+      vertical-align: middle;\r
+      margin-right: 0.25em;\r
+      margin-top: -2px; // The icons are oddly misaligned\r
+    }\r
+  }\r
+}\r
+\r
+%button-group-segmented {\r
+  border: 1px solid $primary-color;\r
+  transition-property: background color;\r
+\r
+  > li {\r
+    // Hide the radio button\r
+    > input[type="radio"] {\r
+      position: absolute;\r
+      left: -9999px;\r
+    }\r
+    // This is the button\r
+    #{$child-selectors} {\r
+      margin-right: 0;\r
+      background: transparent;\r
+    }\r
+  }\r
+}\r
+\r
+@mixin button-group-size($size: medium, $expand: false) {\r
+  $size: $button-font-size * map-get($button-sizes, $size);\r
+  font-size: $size;\r
+\r
+  @if $expand {\r
+    @include button-group-expand;\r
+  }\r
+}\r
+@mixin button-group-expand($stretch: true) {\r
+  display: if($stretch, flex, inline-flex);\r
+\r
+  > li {\r
+    flex: if($stretch, 1, 0 0 auto);\r
+\r
+    #{$child-selectors} {\r
+      @if $stretch { @include button-expand; }\r
+    }\r
+  }\r
+}\r
+@mixin button-group-style(\r
+  $segmented: false,\r
+  $background: $primary-color,\r
+  $color: auto\r
+) {\r
+\r
+  @if not($segmented) {\r
+    > li {\r
+      #{$child-selectors} {\r
+        @include button-style($background, auto, $color);\r
+        border-color: scale-color($background, $lightness: -15%);\r
+      }\r
+      &.is-active {\r
+        #{$child-selectors} {\r
+          background: scale-color($background, $lightness: -15%);\r
+        }\r
+      }\r
+    }\r
+  }\r
+  @else {\r
+    @extend %button-group-segmented;\r
+    $hover-color: rgba($background, 0.25);\r
+    border-color: $background;\r
+\r
+    > li {\r
+      // This is the button\r
+      #{$child-selectors} {\r
+        border-color: $background;\r
+        color: $background;\r
+\r
+        // This is the button being hovered on\r
+        &:hover {\r
+          background: $hover-color;\r
+          color: $background;\r
+        }\r
+\r
+        @if using(iconic) {\r
+          .iconic { @include color-icon($background); }\r
+        }\r
+      }\r
+\r
+      // This is the button when it's active\r
+      &.is-active > a,\r
+      > input:checked + label {\r
+        &, &:hover {\r
+          background: $background;\r
+          color: isitlight($background);\r
+        }\r
+\r
+        @if using(iconic) {\r
+          .iconic { @include color-icon(isitlight($background)); }\r
+        }\r
+      }\r
+    }\r
+  }\r
+}\r
+\r
+@mixin button-group(\r
+  $segmented: false,\r
+  $expand: false,\r
+  $background: $primary-color,\r
+  $color: #fff\r
+) {\r
+  @extend %button-group;\r
+  @include button-group-expand($expand);\r
+  @include button-group-style($segmented, $background, $color);\r
+  border-radius: $btngroup-radius;\r
+}\r
+\r
+@include exports(button-group) {\r
+  .button-group {\r
+    @include button-group;\r
+\r
+    // Colors\r
+    &.secondary { @include button-group-style(false, $secondary-color); }\r
+    &.success   { @include button-group-style(false, $success-color); }\r
+    &.warning   { @include button-group-style(false, $warning-color); }\r
+    &.alert     { @include button-group-style(false, $alert-color); }\r
+\r
+    // Individual colors\r
+    > li {\r
+      &.secondary { #{$child-selectors} { @include button-style($secondary-color, auto, $btngroup: true); } }\r
+      &.success   { #{$child-selectors} { @include button-style($success-color, auto, $btngroup: true); } }\r
+      &.warning   { #{$child-selectors} { @include button-style($warning-color, auto, $btngroup: true); } }\r
+      &.alert     { #{$child-selectors} { @include button-style($alert-color, auto, $btngroup: true); } }\r
+    }\r
+\r
+    // Segmented\r
+    &.segmented { @include button-group-style(true);\r
+      &.secondary { @include button-group-style(true, $secondary-color); }\r
+      &.success   { @include button-group-style(true, $success-color); }\r
+      &.warning   { @include button-group-style(true, $warning-color); }\r
+      &.alert     { @include button-group-style(true, $alert-color); }\r
+    }\r
+\r
+    // Sizing\r
+    &.tiny      { @include button-group-size(tiny); }\r
+    &.small     { @include button-group-size(small); }\r
+    &.large     { @include button-group-size(large); }\r
+    &.expand    { @include button-group-expand; }\r
+\r
+    // Disabled\r
+    li.disabled {\r
+      #{$child-selectors} {\r
+        @include button-disabled;\r
+      }\r
+    }\r
+  }\r
+}\r