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

   1 /*
   2   MENU BAR
   3   --------
   4
   5   A generic, flexible menu component.
   6
   7   Features:
   8    - Orient horizontally and vertically
   9      - Change orientation at certain breakpoints
  10    - Items with icons above, below, or to the left or right
  11    - Text labels for vertical menus and badges for horizontal menus
  12 */
  13
  14 /// @Foundation.settings
  15 // Menu Bar
  16 $menubar-fontsize: 1rem !default;
  17 $menubar-background: #fff !default;
  18 $menubar-background-hover: smartscale($menubar-background, 7%) !default;
  19 $menubar-background-active: $menubar-background-hover;
  20 $menubar-color: isitlight($menubar-background) !default;
  21 $menubar-color-hover: $menubar-color !default;
  22 $menubar-color-active: $menubar-color-hover;
  23
  24 $menubar-item-padding: $global-padding !default;
  25 $menubar-icon-size: 25px !default;
  26 $menubar-icon-spacing: $menubar-item-padding !default;
  27 ///
  28
  29 // Menu bar container
  30 %menu-bar {
  31   display: flex;
  32   align-items: stretch;
  33   margin: 0;
  34   list-style-type: none;
  35
  36   // Menu item
  37   > li {
  38     // This flex setting makes each item an equal width
  39     flex: 1 0 auto;
  40     align-items: center;
  41
  42     // Link inside menu item
  43     > a {
  44       display: flex;
  45       flex-flow: column nowrap;
  46       align-items: center;
  47       padding: $menubar-item-padding;
  48       font-size: $menubar-fontsize;
  49       line-height: 1;
  50     }
  51   }
  52 }
  53
  54 @mixin menu-bar-layout (
  55   $orientation: horizontal,
  56   $stretch: true
  57 ) {
  58   /*
  59     Orientation
  60   */
  61   @if $orientation == horizontal {
  62     overflow-x: hidden;
  63     flex-flow: row nowrap;
  64     > li > a {
  65       flex-flow: column nowrap;
  66     }
  67   }
  68   @else {
  69     flex-flow: column nowrap;
  70     > li > a {
  71       flex-flow: row nowrap;
  72     }
  73   }
  74
  75   /*
  76     Stretch
  77   */
  78   > li {
  79     @if $stretch == false {
  80       flex: 0 0 auto;
  81     }
  82   }
  83 }
  84
  85 @mixin menu-bar-style(
  86   $background: $menubar-background,
  87   $background-hover: $menubar-background-hover,
  88   $background-active: $menubar-background-active,
  89   $color: $menubar-color,
  90   $color-hover: $menubar-color-hover,
  91   $color-active: $menubar-color-active,
  92   $autocolor: false
  93 ) {
  94   // Autocoloring
  95   @if ($autocolor) {
  96     $background-hover: smartscale($background, 7%);
  97     $background-active: $background-hover;
  98
  99     $color: isitlight($background);
 100     $color-hover: $color;
 101     $color-active: $color;
 102   }
 103
 104   // Container
 105   background: $background;
 106
 107   // Items
 108   > li > a {
 109     color: $color;
 110
 111     &:hover {
 112       background: $background-hover;
 113       color: $color-hover;
 114     }
 115   }
 116   .is-active > a {
 117     background: $background-active;
 118     color: $color-active
 119   }
 120
 121   // Iconic
 122   @if using(iconic) {
 123     .iconic { @include color-icon($color); }
 124   }
 125 }
 126
 127 @mixin menu-bar-icons(
 128   $position: left,
 129   $size: $menubar-icon-size
 130 ) {
 131   > li {
 132     // Sizing
 133     > img, > .iconic {
 134       margin: 0;
 135       @if $menubar-icon-size != false {
 136         width: $menubar-icon-size;
 137         height: $menubar-icon-size;
 138       }
 139     }
 140
 141     // Position
 142     @if $position == left {
 143       > a {
 144         flex-flow: row nowrap;
 145         align-items: center;
 146         > img, > .iconic { margin: 0 $menubar-icon-spacing 0 0; }
 147       }
 148     }
 149     @if $position == top {
 150       > a {
 151         flex-flow: column nowrap;
 152         > img, > .iconic { margin: 0 0 $menubar-icon-spacing 0; }
 153       }
 154     }
 155     @if $position == right {
 156       > a {
 157         flex-flow: row-reverse nowrap;
 158         > img, > .iconic { margin: 0 0 0 $menubar-icon-spacing; }
 159       }
 160     }
 161     @if $position == bottom {
 162       > a {
 163         flex-flow: column-reverse nowrap;
 164         > img, > .iconic { margin: $menubar-icon-spacing 0 0 0; }
 165       }
 166     }
 167   }
 168 }
 169
 170 @mixin menu-bar-labels(
 171   $x: right,
 172   $y: center,
 173   $offset: $menubar-item-padding,
 174   $size: 1.2rem,
 175   $background: red,
 176   $color: auto,
 177   $selector: '.menu-bar-label'
 178 ) {
 179   > li {
 180     position: relative;
 181
 182     > a {
 183       @if $x == left or $x == right {
 184         padding-#{$x}: $size + $offset * 2;
 185       }
 186     }
 187   }
 188
 189   #{$selector} {
 190     display: block;
 191     font-size: $size * 0.75;
 192     width: $size;
 193     height: $size;
 194     line-height: $size;
 195     text-align: center;
 196     border-radius: 1000px;
 197     background: $background;
 198     color: if($color == auto, isitlight($background), $color);
 199     position: absolute;
 200     pointer-events: none;
 201
 202     @if $x == left or $x == right {
 203       #{$x}: $offset;
 204     }
 205
 206     @if $y == top or $y == bottom {
 207       #{$y}: $offset;
 208     }
 209     @else {
 210       top: 50%;
 211       transform: translateY(-50%);
 212     }
 213   }
 214 }
 215
 216 /*
 217   Set the alignment of menu items (li) within a menu-bar
 218
 219   left: Items align to the left.
 220   right: Items align to the right.
 221   center: Items align to the center.
 222   justify: Items are spaced equally apart so they occupy the space of the entire grid.
 223   spaced: Items are given equal space to their left and right.
 224
 225   @group menu-bar
 226
 227   @param {string} $align - Alignment to use.
 228
 229   @output An appropriate justify-content value.
 230 */
 231 @mixin menu-bar-align($align: left) {
 232   $options: (
 233     left: flex-start,
 234     right: flex-end,
 235     center: center,
 236     justify: space-between,
 237     spaced: space-around,
 238   );
 239   justify-content: map-get($options, $align);
 240 }
 241
 242 /*
 243   CSS output
 244 */
 245 @include exports(menu-bar) {
 246   .menu-bar {
 247     @extend %menu-bar;
 248     @include menu-bar-style;
 249
 250     // Positioning
 251     &, &.horizontal  { @include menu-bar-layout(horizontal); }
 252     &.vertical       { @include menu-bar-layout(vertical); }
 253
 254     // Condensed bar
 255     &.condense {
 256       > li { flex: 0 0 auto; }
 257     }
 258
 259     // Align Menu Items
 260     &.align-right   { @include menu-bar-align(right); }
 261     &.align-center  { @include menu-bar-align(center); }
 262     &.align-justify { @include menu-bar-align(justify); }
 263     &.align-spaced  { @include menu-bar-align(spaced); }
 264
 265     @each $size in $breakpoint-classes {
 266       @include breakpoint($size) {
 267         &.#{$size}-condense { li { flex: 0 0 auto; } }
 268         &.#{$size}-expand   { li { flex: 1 0 auto; } }
 269
 270         // Responsive Alignment
 271         &.#{$size}-align-left   { @include menu-bar-align(left); }
 272         &.#{$size}-align-right   { @include menu-bar-align(right); }
 273         &.#{$size}-align-center  { @include menu-bar-align(center); }
 274         &.#{$size}-align-justify { @include menu-bar-align(justify); }
 275         &.#{$size}-align-spaced  { @include menu-bar-align(spaced); }
 276       }
 277     }
 278
 279     // Responsive positioning
 280     @each $size in $breakpoint-classes {
 281       @include breakpoint($size) {
 282         &.#{$size}-horizontal {
 283           @include menu-bar-layout(horizontal);
 284         }
 285         &.#{$size}-vertical {
 286           @include menu-bar-layout(vertical);
 287         }
 288       }
 289     }
 290
 291     // Icon positioning
 292     &, &.icon-top { @include menu-bar-icons(top); }
 293     &.icon-right  { @include menu-bar-icons(right); }
 294     &.icon-bottom { @include menu-bar-icons(bottom); }
 295     &.icon-left   { @include menu-bar-icons(left); }
 296     @each $size in $breakpoint-classes {
 297       @each $pos in (top, right, bottom, left) {
 298         @include breakpoint($size) {
 299           &.#{$size}-icon-#{$pos} { @include menu-bar-icons($pos); }
 300         }
 301       }
 302     }
 303
 304     // Labels
 305     &.label-side   { @include menu-bar-labels(right, center); }
 306     &.label-corner { @include menu-bar-labels(right, top); }
 307
 308     // Coloring
 309     &.primary {
 310       @include menu-bar-style($primary-color, $autocolor: true);
 311     }
 312     &.dark {
 313       @include menu-bar-style($dark-color, $autocolor: true);
 314     }
 315
 316     // Title
 317     > li.title {
 318       padding: $menubar-item-padding;
 319       cursor: default;
 320       font-weight: bold;
 321     }
 322   }
 323
 324   // Menu groups
 325   .menu-group {
 326     display: flex;
 327     align-items: center;
 328     justify-content: space-between;
 329     flex-wrap: wrap;
 330
 331     @include breakpoint(medium) {
 332       flex-wrap: nowrap;
 333     }
 334
 335     > .menu-group-left, > .menu-group-right {
 336       flex: 1 1 100%;
 337
 338       @include breakpoint(medium) {
 339         flex: 0 0 auto;
 340       }
 341     }
 342
 343     // Menu bar is condensed
 344     .menu-bar {
 345       > li { flex: 0 0 auto; }
 346       margin: 0;
 347     }
 348
 349     // Coloring class cascades down to the menu bar
 350     &.primary {
 351       background-color: $primary-color;
 352       .menu-bar {
 353         @include menu-bar-style($primary-color, $autocolor: true);
 354       }
 355     }
 356     &.dark {
 357       background-color: $dark-color;
 358       .menu-bar {
 359         @include menu-bar-style($dark-color, $autocolor: true);
 360       }
 361     }
 362   }
 363 }