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

   1 /*
   2   ACCORDION
   3   ---------
   4
   5   The trusy accordion allows you to create a series of vertical tabs.
   6 */
   7
   8 /// @Foundation.settings
   9 // Accordion
  10 $accordion-border: 1px solid $gray-dark !default;
  11
  12 $accordion-title-background: $gray-light !default;
  13 $accordion-title-background-hover: smartscale($accordion-title-background, 5%) !default;
  14 $accordion-title-background-active: smartscale($accordion-title-background, 3%) !default;
  15 $accordion-title-color: isitlight($accordion-title-background) !default;
  16 $accordion-title-color-active: isitlight($accordion-title-background) !default;
  17
  18 $accordion-title-padding: $global-padding !default;
  19 $accordion-content-padding: $global-padding !default;
  20 ///
  21
  22 @mixin accordion-title(
  23   $background: $accordion-title-background,
  24   $background-hover: $accordion-title-background-hover,
  25   $background-active: $accordion-title-background-active,
  26   $color: $accordion-title-color,
  27   $color-active: $accordion-title-color-active,
  28   $padding: $accordion-title-padding
  29 ) {
  30   padding: $padding;
  31   background: $background;
  32   color: $color;
  33   line-height: 1;
  34   cursor: pointer;
  35
  36   &:hover {
  37     background: $background-hover;
  38   }
  39
  40   .is-active > & {
  41     background: $background-active;
  42     color: $color-active;
  43   }
  44 }
  45
  46 @mixin accordion-content(
  47   $padding: $accordion-content-padding
  48 ) {
  49   padding: $padding;
  50
  51   display: none;
  52   .is-active > & {
  53     display: block;
  54   }
  55 }
  56
  57 @include exports(accordion) {
  58   .accordion {
  59     @if hasvalue($accordion-border) {
  60       border: $accordion-border;
  61     }
  62   }
  63     .accordion-item {
  64
  65     }
  66     .accordion-title {
  67       @include accordion-title;
  68     }
  69     .accordion-content {
  70       @include accordion-content;
  71     }
  72 }