afb-client/bower_components/foundation-apps/scss/components/_title-bar.scss

   1 /*
   2   TITLE BAR
   3   ---------
   4
   5   A navigational component which can display the current screen the user is on, along with additional controls or menu items.
   6
   7   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:
   8    - Center
   9    - Left
  10    - Right
  11 */
  12
  13 /// @Foundation.settings
  14 // Title Bar
  15 $titlebar-center-width: 50% !default;
  16 $titlebar-side-width: (100% - $titlebar-center-width) / 2 !default;
  17 $titlebar-background: #eee !default;
  18 $titlebar-color: #000 !default;
  19 $titlebar-border: 1px solid #ccc !default;
  20 $titlebar-padding: $global-padding !default;
  21 $titlebar-item-classes: (
  22   center: 'center',
  23   left: 'left',
  24   right: 'right',
  25   title: 'title',
  26 ) !default;
  27 ///
  28
  29 %title-bar {
  30   $center: map-get($titlebar-item-classes, center);
  31   $left: map-get($titlebar-item-classes, left);
  32   $right: map-get($titlebar-item-classes, right);
  33   $title: map-get($titlebar-item-classes, title);
  34
  35   display: flex;
  36   flex: 0 0 auto;
  37   align-items: center;
  38   justify-content: flex-start;
  39   overflow: visible;
  40
  41   // Denotes the title of the bar
  42   .#{$title} {
  43     font-weight: bold;
  44   }
  45
  46   // Denotes left, right, and center sections of the bar
  47   .#{$left}, .#{$center}, .#{$right} {
  48     display: block;
  49     white-space: nowrap;
  50     overflow: visible;
  51
  52     // If only one section is in use, stretch it all the way out
  53     &:first-child:last-child {
  54       flex: 1;
  55       margin: 0;
  56     }
  57   }
  58
  59   // Left always comes first, then center, then right
  60   // The left and right sections have the same width
  61   .#{$left} {
  62     order: 1;
  63     flex: 0 0 $titlebar-side-width;
  64   }
  65   .#{$center} {
  66     order: 2;
  67     flex: 0 0 $titlebar-center-width;
  68     text-align: center;
  69   }
  70   .#{$right} {
  71     order: 3;
  72     flex: 0 0 $titlebar-side-width;
  73     text-align: right;
  74   }
  75
  76   // If only left and right are in use, stretch them both out equally
  77   .#{$left}:first-child {
  78     flex: 1 1 auto;
  79   }
  80   .#{$left}:first-child + .#{$right}:last-child {
  81     flex: 1 1 auto;
  82   }
  83
  84   // If only center and right are in use, shift the center section into the right position
  85   .#{$center}:first-child:not(:last-child) {
  86     margin-left: $titlebar-side-width;
  87   }
  88   // If only center and left are in use, override the above style
  89   .#{$center} + .#{$left} {
  90     margin-right: -($titlebar-side-width);
  91   }
  92 }
  93
  94 @mixin title-bar-style(
  95   $background: $titlebar-background,
  96   $color: $titlebar-color,
  97   $border: $titlebar-border,
  98   $padding: $titlebar-padding
  99 ) {
 100   background: $background;
 101   color: $color;
 102   padding: $padding;
 103   border-bottom: $border;
 104 }
 105
 106 @mixin title-bar(
 107   $background: $titlebar-background,
 108   $color: $titlebar-color,
 109   $border: $titlebar-border,
 110   $padding: $titlebar-padding
 111 ) {
 112   @extend %title-bar;
 113   @include title-bar-style($background, $color, $border, $padding);
 114 }
 115
 116 @include exports(title-bar) {
 117   .title-bar {
 118     @include title-bar;
 119
 120     &.primary {
 121       @include title-bar-style($primary-color, isitlight($primary-color));
 122       a, a:hover { color: isitlight($primary-color); }
 123       @if using(iconic) { .iconic { @include color-icon(isitlight($primary-color)); } }
 124     }
 125     &.dark {
 126       @include title-bar-style($dark-color, #fff);
 127       a, a:hover { color: #fff; }
 128       @if using(iconic) { .iconic { @include color-icon(#fff); } }
 129     }
 130   }
 131     .title-bar-bottom {
 132       border-bottom: 0;
 133       border-top: $titlebar-border;
 134     }
 135 }