Merge afb-client

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

diff --git a/afb-client/bower_components/foundation-apps/scss/components/_button.scss b/afb-client/bower_components/foundation-apps/scss/components/_button.scss
new file mode 100644 (file)
index 0000000..6e22b19
--- /dev/null
+++ b/afb-client/bower_components/foundation-apps/scss/components/_button.scss
@@ -0,0 +1,205 @@
+/// @Foundation.settings
+// Button
+$button-padding: 0.85em 1em !default;
+$button-margin: 0 $global-padding $global-padding 0 !default;
+$button-style: solid !default;
+$button-background: $primary-color !default;
+$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
+$button-color: auto !default;
+$button-radius: 0 !default;
+$button-sizes: (
+  tiny: 0.7,
+  small: 0.8,
+  medium: 1,
+  large: 1.3,
+) !default;
+$button-font-size: 0.9rem !default;
+$button-opacity-disabled: 0.5 !default;
+$button-tag-selector: false !default;
+///
+
+%button {
+  display: inline-block;
+  border: 0;
+  text-align: center;
+  line-height: 1;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -webkit-font-smoothing: antialiased;
+  transition: background 0.25s ease-out;
+  vertical-align: middle;
+
+  padding: $button-padding;
+  margin: $button-margin;
+  font-size: $button-font-size;
+  border-radius: $button-radius;
+
+  // Dropdown arrow
+  // TODO: Change to class and mixin because now the toggle is 'fa-open' which is too generic
+  // &[data-popup-toggle] {
+  //   position: relative;
+  //   padding-right: 2em; // Placeholder
+
+  //   &::after {
+  //     @include css-triangle(6px, black, top);
+  //     position: absolute;
+  //     right: 0.7em;
+  //     top: 50%;
+  //     margin-top: -3px;
+  //   }
+  // }
+}
+
+@mixin button-size($size: medium, $expand: false) {
+  $size: $button-font-size * map-get($button-sizes, $size);
+  font-size: $size;
+
+  @if $expand {
+    @include button-expand;
+  }
+
+  @if using(iconic) {
+    .iconic {
+      width: 1em;
+      height: 1em;
+      vertical-align: middle;
+      margin-right: 0.25em;
+      margin-top: -2px; // The icons are oddly misaligned
+    }
+  }
+}
+
+@mixin button-expand($expand: true) {
+  @if $expand {
+    display: block;
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  @else {
+    display: inline-block;
+    width: auto;
+    margin: $button-margin;
+  }
+}
+
+@mixin button-style(
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius,
+  $btngroup: false
+){
+  @if $style == hollow {
+    border: 1px solid $background;
+    background: transparent;
+    color: $background;
+
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: 25%);
+      background: transparent;
+      color: scale-color($background, $lightness: 25%);
+    }
+  }
+  // Solid is the default
+  @else {
+    @if $color == auto {
+      $color: isitlight($background);
+    }
+
+    background: $background;
+    color: $color;
+
+    &:hover, &:focus {
+      @if $background-hover == auto {
+        background: scale-color($background, $lightness: -15%);
+      }
+      @else {
+        background: $background-hover;
+      }
+      color: $color;
+    }
+  }
+
+  @if $btngroup {
+    border-color: $background;
+    &:hover, &:focus {
+      border-color: scale-color($background, $lightness: -25%);
+    }
+  }
+
+  @if using(iconic) {
+    @if $style == hollow {
+      .iconic {
+        @include color-icon($background);
+      }
+      &:hover .iconic {
+        @include color-icon(scale-color($background, $lightness: 25%));
+      }
+    }
+    @else {
+      .iconic {
+        @include color-icon($color);
+      }
+    }
+  }
+}
+
+@mixin button-disabled() {
+  opacity: $button-opacity-disabled;
+  cursor: default;
+  pointer-events: none;
+}
+
+@mixin button(
+  $size: medium,
+  $expand: false,
+  $background: $button-background,
+  $background-hover: $button-background-hover,
+  $color: $button-color,
+  $style: $button-style,
+  $radius: $button-radius
+) {
+  @extend %button;
+  @include button-size($size);
+  @include button-expand($expand);
+  @include button-style($background, $background-hover, $color, $style);
+}
+
+@include exports(button) {
+  .button {
+    @include button;
+
+    &.tiny   { @include button-size(tiny); }
+    &.small  { @include button-size(small); }
+    &.large  { @include button-size(large); }
+    &.expand { @include button-expand; }
+
+    &.secondary { @include button-style($secondary-color, auto) }
+    &.success   { @include button-style($success-color, auto) }
+    &.warning   { @include button-style($warning-color, auto) }
+    &.alert     { @include button-style($alert-color, auto) }
+    &.info      { @include button-style($info-color, auto) }
+    &.dark      { @include button-style($dark-color, auto) }
+
+    @if $button-style != hollow {
+      &.hollow { @include button-style($style: hollow);
+        &.secondary { @include button-style($secondary-color, $style: hollow); }
+        &.success   { @include button-style($success-color, $style: hollow); }
+        &.warning   { @include button-style($warning-color, $style: hollow); }
+        &.alert     { @include button-style($alert-color, $style: hollow); }
+        &.info      { @include button-style($info-color, $style: hollow); }
+        &.dark      { @include button-style($dark-color, $style: hollow); }
+      }
+    }
+
+    &.disabled { @include button-disabled; }
+  }
+
+  @if $button-tag-selector {
+    button {
+      @extend .button;
+    }
+  }
+}