afb-client/bower_components/foundation-apps/scss/components/_tabs.scss

   1 /*
   2   TABS
   3   ----
   4 */
   5
   6 /// @Foundation.settings
   7 // Tabs
   8 $tabstrip-background: transparent !default;
   9
  10 $tab-title-background: $gray-light !default;
  11 $tab-title-background-hover: smartscale($tab-title-background, 5%) !default;
  12 $tab-title-background-active: smartscale($tab-title-background, 3%) !default;
  13 $tab-title-color: isitlight($tab-title-background) !default;
  14 $tab-title-color-active: $tab-title-color !default;
  15
  16 $tab-title-padding: $global-padding !default;
  17 $tab-content-padding: $global-padding !default;
  18 ///
  19
  20 @mixin tabstrip(
  21         $orientation: horizontal,
  22         $background: $tabstrip-background
  23 ) {
  24         /*
  25                 Container styles
  26         */
  27         display: flex;
  28         background: $background;
  29
  30         @if $orientation == vertical {
  31           flex-flow: column nowrap;
  32         }
  33         @else {
  34                 flex-flow: row wrap;
  35         }
  36 }
  37
  38 @mixin tabstrip-item(
  39         $background: $tab-title-background,
  40         $background-hover: $tab-title-background-hover,
  41         $background-active: $tab-title-background-active,
  42         $color: $tab-title-color,
  43         $color-active: $tab-title-color-active,
  44         $padding: $tab-title-padding
  45 ) {
  46   background: $background;
  47   padding: $padding;
  48   line-height: 1;
  49   margin: 0;
  50   flex: 0 1 auto;
  51   cursor: pointer;
  52   color: $color;
  53
  54   &.is-active {
  55     background: $background-active;
  56     color: $color-active;
  57
  58     &:hover {
  59       background: $background-hover;
  60     }
  61   }
  62   &:hover {
  63     background: $background-hover;
  64   }
  65 }
  66
  67 @mixin tab-content(
  68         $padding: $tab-content-padding
  69 ) {
  70   padding: $padding;
  71 }
  72
  73 @mixin tab-content-item {
  74   display: none;
  75   &.is-active {
  76     display: block;
  77   }
  78 }
  79
  80 @include exports(tabs) {
  81   .tabs {
  82     @include tabstrip(horizontal);
  83
  84     &.vertical {
  85       @include tabstrip(vertical);
  86     }
  87
  88     .tab-item {
  89       @include tabstrip-item;
  90     }
  91   }
  92
  93   .tab-contents {
  94     @include tab-content;
  95
  96     .tab-content {
  97       @include tab-content-item;
  98     }
  99   }
 100 }