From be83a8f382cf2fea98161bfd6d51719aacbf9aa9 Mon Sep 17 00:00:00 2001 From: Fulup Ar Foll Date: Thu, 28 Jan 2016 16:30:12 +0100 Subject: Update JSON API --- .../scss/components/_title-bar.scss | 135 +++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss (limited to '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 index 0000000..ca64124 --- /dev/null +++ b/afm-client/bower_components/foundation-apps/scss/components/_title-bar.scss @@ -0,0 +1,135 @@ +/* + TITLE BAR + --------- + + A navigational component which can display the current screen the user is on, along with additional controls or menu items. + + 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: + - Center + - Left + - Right +*/ + +/// @Foundation.settings +// Title Bar +$titlebar-center-width: 50% !default; +$titlebar-side-width: (100% - $titlebar-center-width) / 2 !default; +$titlebar-background: #eee !default; +$titlebar-color: #000 !default; +$titlebar-border: 1px solid #ccc !default; +$titlebar-padding: $global-padding !default; +$titlebar-item-classes: ( + center: 'center', + left: 'left', + right: 'right', + title: 'title', +) !default; +/// + +%title-bar { + $center: map-get($titlebar-item-classes, center); + $left: map-get($titlebar-item-classes, left); + $right: map-get($titlebar-item-classes, right); + $title: map-get($titlebar-item-classes, title); + + display: flex; + flex: 0 0 auto; + align-items: center; + justify-content: flex-start; + overflow: visible; + + // Denotes the title of the bar + .#{$title} { + font-weight: bold; + } + + // Denotes left, right, and center sections of the bar + .#{$left}, .#{$center}, .#{$right} { + display: block; + white-space: nowrap; + overflow: visible; + + // If only one section is in use, stretch it all the way out + &:first-child:last-child { + flex: 1; + margin: 0; + } + } + + // Left always comes first, then center, then right + // The left and right sections have the same width + .#{$left} { + order: 1; + flex: 0 0 $titlebar-side-width; + } + .#{$center} { + order: 2; + flex: 0 0 $titlebar-center-width; + text-align: center; + } + .#{$right} { + order: 3; + flex: 0 0 $titlebar-side-width; + text-align: right; + } + + // If only left and right are in use, stretch them both out equally + .#{$left}:first-child { + flex: 1 1 auto; + } + .#{$left}:first-child + .#{$right}:last-child { + flex: 1 1 auto; + } + + // If only center and right are in use, shift the center section into the right position + .#{$center}:first-child:not(:last-child) { + margin-left: $titlebar-side-width; + } + // If only center and left are in use, override the above style + .#{$center} + .#{$left} { + margin-right: -($titlebar-side-width); + } +} + +@mixin title-bar-style( + $background: $titlebar-background, + $color: $titlebar-color, + $border: $titlebar-border, + $padding: $titlebar-padding +) { + background: $background; + color: $color; + padding: $padding; + border-bottom: $border; +} + +@mixin title-bar( + $background: $titlebar-background, + $color: $titlebar-color, + $border: $titlebar-border, + $padding: $titlebar-padding +) { + @extend %title-bar; + @include title-bar-style($background, $color, $border, $padding); +} + +@include exports(title-bar) { + .title-bar { + @include title-bar; + + &.primary { + @include title-bar-style($primary-color, isitlight($primary-color)); + a, a:hover { color: isitlight($primary-color); } + @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } } + } + &.dark { + @include title-bar-style($dark-color, #fff); + a, a:hover { color: #fff; } + @if using(iconic) { .iconic { @include color-icon(#fff); } } + } + } + .title-bar-bottom { + border-bottom: 0; + border-top: $titlebar-border; + } +} -- cgit 1.2.3-korg