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