Update JSON API

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

diff --git a/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss b/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss
new file mode 100644 (file)
index 0000000..ca64124
--- /dev/null
+++ b/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss
@@ -0,0 +1,135 @@
+/*\r
+  TITLE BAR\r
+  ---------\r
+\r
+  A navigational component which can display the current screen the user is on, along with additional controls or menu items.\r
+\r
+  The title bar includes classes to create center, left, and right sections, which can be used in any combination. However, in the markup, the sections must come in this order:\r
+   - Center\r
+   - Left\r
+   - Right\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Title Bar\r
+$titlebar-center-width: 50% !default;\r
+$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;\r
+$titlebar-background: #eee !default;\r
+$titlebar-color: #000 !default;\r
+$titlebar-border: 1px solid #ccc !default;\r
+$titlebar-padding: $global-padding !default;\r
+$titlebar-item-classes: (\r
+  center: 'center',\r
+  left: 'left',\r
+  right: 'right',\r
+  title: 'title',\r
+) !default;\r
+///\r
+\r
+%title-bar {\r
+  $center: map-get($titlebar-item-classes, center);\r
+  $left: map-get($titlebar-item-classes, left);\r
+  $right: map-get($titlebar-item-classes, right);\r
+  $title: map-get($titlebar-item-classes, title);\r
+\r
+  display: flex;\r
+  flex: 0 0 auto;\r
+  align-items: center;\r
+  justify-content: flex-start;\r
+  overflow: visible;\r
+\r
+  // Denotes the title of the bar\r
+  .#{$title} {\r
+    font-weight: bold;\r
+  }\r
+\r
+  // Denotes left, right, and center sections of the bar\r
+  .#{$left}, .#{$center}, .#{$right} {\r
+    display: block;\r
+    white-space: nowrap;\r
+    overflow: visible;\r
+\r
+    // If only one section is in use, stretch it all the way out\r
+    &:first-child:last-child {\r
+      flex: 1;\r
+      margin: 0;\r
+    }\r
+  }\r
+\r
+  // Left always comes first, then center, then right\r
+  // The left and right sections have the same width\r
+  .#{$left} {\r
+    order: 1;\r
+    flex: 0 0 $titlebar-side-width;\r
+  }\r
+  .#{$center} {\r
+    order: 2;\r
+    flex: 0 0 $titlebar-center-width;\r
+    text-align: center;\r
+  }\r
+  .#{$right} {\r
+    order: 3;\r
+    flex: 0 0 $titlebar-side-width;\r
+    text-align: right;\r
+  }\r
+\r
+  // If only left and right are in use, stretch them both out equally\r
+  .#{$left}:first-child {\r
+    flex: 1 1 auto;\r
+  }\r
+  .#{$left}:first-child + .#{$right}:last-child {\r
+    flex: 1 1 auto;\r
+  }\r
+\r
+  // If only center and right are in use, shift the center section into the right position\r
+  .#{$center}:first-child:not(:last-child) {\r
+    margin-left: $titlebar-side-width;\r
+  }\r
+  // If only center and left are in use, override the above style\r
+  .#{$center} + .#{$left} {\r
+    margin-right: -($titlebar-side-width);\r
+  }\r
+}\r
+\r
+@mixin title-bar-style(\r
+  $background: $titlebar-background,\r
+  $color: $titlebar-color,\r
+  $border: $titlebar-border,\r
+  $padding: $titlebar-padding\r
+) {\r
+  background: $background;\r
+  color: $color;\r
+  padding: $padding;\r
+  border-bottom: $border;\r
+}\r
+\r
+@mixin title-bar(\r
+  $background: $titlebar-background,\r
+  $color: $titlebar-color,\r
+  $border: $titlebar-border,\r
+  $padding: $titlebar-padding\r
+) {\r
+  @extend %title-bar;\r
+  @include title-bar-style($background, $color, $border, $padding);\r
+}\r
+\r
+@include exports(title-bar) {\r
+  .title-bar {\r
+    @include title-bar;\r
+\r
+    &.primary {\r
+      @include title-bar-style($primary-color, isitlight($primary-color));\r
+      a, a:hover { color: isitlight($primary-color); }\r
+      @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }\r
+    }\r
+    &.dark {\r
+      @include title-bar-style($dark-color, #fff);\r
+      a, a:hover { color: #fff; }\r
+      @if using(iconic) { .iconic { @include color-icon(#fff); } }\r
+    }\r
+  }\r
+    .title-bar-bottom {\r
+      border-bottom: 0;\r
+      border-top: $titlebar-border;\r
+    }\r
+}\r