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

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