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

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