Update JSON API

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

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_utilities.scss b/afm-client/bower_components/foundation-apps/scss/components/_utilities.scss
new file mode 100755 (executable)
index 0000000..145a098
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_utilities.scss
@@ -0,0 +1,160 @@
+/*\r
+  UTILITIES\r
+  ---------\r
+\r
+  Responsive helper classes to assist you in quickly doing basic formatting and layout.\r
+\r
+  Features:\r
+   - Vertical alignment\r
+   - Visibility\r
+   - Text alignment\r
+   - Floating\r
+*/\r
+\r
+$block-selector: '[class*="grid-block"]';\r
+\r
+@mixin show-for($size, $prop: block) {\r
+  &:not(.ng-hide) {\r
+    display: none !important;\r
+    @include breakpoint($size) {\r
+      display: $prop !important;\r
+    }\r
+  }\r
+}\r
+\r
+@mixin show-for-only($size, $prop: block) {\r
+  &:not(.ng-hide) {\r
+    display: none !important;\r
+    @include breakpoint($size only) {\r
+      display: $prop !important;\r
+    }\r
+  }\r
+}\r
+\r
+@mixin hide-for($size, $prop: block) {\r
+  &:not(.ng-hide) {\r
+    display: $prop !important;\r
+    @include breakpoint($size) {\r
+      display: none !important;\r
+    }\r
+  }\r
+}\r
+\r
+@mixin hide-for-only($size, $prop: block) {\r
+  &:not(.ng-hide) {\r
+    display: $prop !important;\r
+    @include breakpoint($size only) {\r
+      display: none !important;\r
+    }\r
+  }\r
+}\r
+\r
+@include exports(utilities) {\r
+  // Vertical alignment\r
+  .v-align {\r
+    display: flex;\r
+    align-items: center;\r
+    justify-content: space-between;\r
+\r
+    $align-values: (\r
+      'top': flex-start,\r
+      'center': center,\r
+      'bottom': flex-end,\r
+    );\r
+\r
+    @each $orient in (top, center, bottom) {\r
+      .align-#{$orient} {\r
+        align-self: map-get($align-values, $orient);\r
+      }\r
+    }\r
+\r
+    @each $size in $breakpoint-classes {\r
+      @each $orient in (top, center, bottom) {\r
+        @include breakpoint($size) {\r
+          .#{$size}-align-#{$orient} {\r
+            align-self: map-get($align-values, $orient);\r
+          }\r
+        }\r
+      }\r
+    }\r
+  }\r
+\r
+  // Visibility\r
+  .hide { display: none !important; }\r
+\r
+  .invisible { visibility: hidden; }\r
+\r
+  @each $size in $breakpoint-classes {\r
+    .hide-for-#{$size} {\r
+      @include hide-for($size);\r
+      &#{$block-selector} { @include hide-for($size, flex); }\r
+    }\r
+\r
+    .show-for-#{$size} {\r
+      @include show-for($size);\r
+      &#{$block-selector} { @include show-for($size, flex); }\r
+    }\r
+\r
+    .hide-for-#{$size}-only {\r
+      @include hide-for-only($size);\r
+      &#{$block-selector} { @include hide-for-only($size, flex); }\r
+    }\r
+\r
+    .show-for-#{$size}-only {\r
+      @include show-for-only($size);\r
+      &#{$block-selector} { @include show-for-only($size, flex); }\r
+    }\r
+  }\r
+\r
+  @each $orientation in (portrait, landscape) {\r
+    .hide-for-#{$orientation} {\r
+      @include breakpoint($orientation) {\r
+        display: none !important;\r
+        &#{$block-selector} { display: flex !important; }\r
+      }\r
+    }\r
+\r
+    .show-for-#{$orientation} {\r
+      display: none !important;\r
+      \r
+      @include breakpoint($orientation) {\r
+        display: block !important;\r
+        &#{$block-selector} { display: flex !important; }\r
+      }\r
+    }\r
+  }\r
+\r
+  /*\r
+    Text alignment\r
+  */\r
+  @each $align in (left, right, center, justify) {\r
+    .text-#{$align} {\r
+      text-align: $align;\r
+    }\r
+    \r
+    @each $size in $breakpoint-classes {\r
+      @include breakpoint($size) {\r
+        .#{$size}-text-#{$align} {\r
+          text-align: $align;\r
+        }\r
+      }\r
+\r
+      @include breakpoint($size only) {\r
+        .#{$size}-only-text-#{$align} {\r
+          text-align: $align;\r
+        }\r
+      }\r
+    }\r
+  }\r
+\r
+  /*\r
+    Floating\r
+  */\r
+  .clearfix { @include clearfix; }\r
+\r
+  @each $float in (left, right, none) {\r
+    .float-#{$float} {\r
+      float: #{$float};\r
+    }\r
+  }\r
+}\r