Update JSON API

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

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