1// Foundation by ZURB
2// foundation.zurb.com
3// Licensed under MIT Open Source
4
5@import 'global';
6
7//
8// @variables
9//
10
11$include-html-accordion-classes: $include-html-classes !default;
12
13$accordion-navigation-padding: rem-calc(16) !default;
14$accordion-navigation-bg-color: $silver !default;
15$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
16$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
17$accordion-navigation-active-font-color: $jet !default;
18$accordion-navigation-font-color: $jet !default;
19$accordion-navigation-font-size: rem-calc(16) !default;
20$accordion-navigation-font-family: $body-font-family !default;
21
22$accordion-content-padding: ($column-gutter/2) !default;
23$accordion-content-active-bg-color: $white !default;
24
25
26//  Mixin: accordion-container()
27//  Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
28//  Explicit Dependencies: a clearfix mixin *is* defined.
29//  Implicit Dependencies: None
30
31@mixin accordion-container() {
32  @include clearfix;
33  margin-bottom: 0;
34}
35
36//  Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class,  $font-color, $font-size, $font-family) {
37//    @params $bg-color: [ color or string ]: Specify the background color for the navigation element
38//    @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
39//    @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
40//    @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
41//    @params $font-color [ color or string ]: Color of the font for accordion
42//    @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
43//    @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
44//    @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
45
46@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active',  $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family, $active-font: $accordion-navigation-active-font-color ) {
47  display: block;
48  margin-bottom: 0 !important;
49  @if type-of($active_class) != "string" {
50    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
51  }
52  @else {
53    &.#{ $active_class } > a {
54      background: $active-bg;
55      color: $active-font;
56    }
57  }
58  > a {
59    background: $bg;
60    color: $font-color;
61    @if type-of($padding) != number {
62      @warn "`#{$padding}` was read as #{type-of($padding)}";
63      @if $accordion-navigation-padding != null {
64        @warn "#{$padding} was read as a #{type-of($padding)}";
65        @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
66        padding: $accordion-navigation-padding;
67      }
68      @else {
69        @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
70        padding: null;
71      }
72    }
73    @else {
74      padding: $padding;
75    }
76    display: block;
77    font-family: $font-family;
78    @if type-of($font-size) != number {
79      @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
80      @if $accordion-navigation-font-size != null {
81        @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
82        font-size: $accordion-navigation-font-size;
83      }
84      @else{
85        @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
86        font-size: null;
87
88      }
89    }
90    @else {
91      font-size: $font-size;
92    }
93    &:hover {
94      background: $hover-bg;
95    }
96  }
97}
98
99//  Mixin: accordion-content($bg, $padding, $active-class)
100//    @params $padding [ number ]: Padding for the content of the container
101//    @params $bg [ color  ]: Background color for the content when it's visible
102//    @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
103
104@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
105  display: none;
106  @if type-of($padding) != "number" {
107    @warn "#{$padding} was read as a #{type-of($padding)}";
108    @if $accordion-content-padding != null {
109      @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
110      padding: $accordion-content-padding;
111    } @else {
112      @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
113      padding: null;
114    }
115  } @else {
116    padding: $padding;
117  }
118
119  @if type-of($active_class) != "string" {
120    @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
121  }
122  @else {
123    &.#{$active_class} {
124      background: $bg;
125      display: block;
126    }
127  }
128}
129
130@include exports("accordion") {
131  @if $include-html-accordion-classes {
132    .accordion {
133      @include clearfix;
134      margin-bottom: 0;
135      margin-left: 0;
136      .accordion-navigation, dd {
137        display: block;
138        margin-bottom: 0 !important;
139        &.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
140        > a {
141          background: $accordion-navigation-bg-color;
142          color: $accordion-navigation-font-color;
143          display: block;
144          font-family: $accordion-navigation-font-family;
145          font-size: $accordion-navigation-font-size;
146          padding: $accordion-navigation-padding;
147          &:hover { background: $accordion-navigation-hover-bg-color; }
148        }
149
150        > .content {
151          display: none;
152          padding: $accordion-content-padding;
153          &.active {
154            background: $accordion-content-active-bg-color;
155            display: block;
156          }
157        }
158      }
159    }
160  }
161}
162