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

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