123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import 'global';
- //
- // @variables
- //
- $include-html-accordion-classes: $include-html-classes !default;
- $accordion-navigation-padding: rem-calc(16) !default;
- $accordion-navigation-bg-color: $silver !default;
- $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
- $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
- $accordion-navigation-active-font-color: $jet !default;
- $accordion-navigation-font-color: $jet !default;
- $accordion-navigation-font-size: rem-calc(16) !default;
- $accordion-navigation-font-family: $body-font-family !default;
- $accordion-content-padding: ($column-gutter/2) !default;
- $accordion-content-active-bg-color: $white !default;
- // Mixin: accordion-container()
- // Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
- // Explicit Dependencies: a clearfix mixin *is* defined.
- // Implicit Dependencies: None
- @mixin accordion-container() {
- @include clearfix;
- margin-bottom: 0;
- }
- // Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family) {
- // @params $bg-color: [ color or string ]: Specify the background color for the navigation element
- // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
- // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
- // @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
- // @params $font-color [ color or string ]: Color of the font for accordion
- // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
- // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
- // @params $active-font [ color or string ]: Specify the font color for the navigation element when active.
- @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 ) {
- display: block;
- margin-bottom: 0 !important;
- @if type-of($active_class) != "string" {
- @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."
- }
- @else {
- &.#{ $active_class } > a {
- background: $active-bg;
- color: $active-font;
- }
- }
- > a {
- background: $bg;
- color: $font-color;
- @if type-of($padding) != number {
- @warn "`#{$padding}` was read as #{type-of($padding)}";
- @if $accordion-navigation-padding != null {
- @warn "#{$padding} was read as a #{type-of($padding)}";
- @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
- padding: $accordion-navigation-padding;
- }
- @else {
- @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";
- padding: null;
- }
- }
- @else {
- padding: $padding;
- }
- display: block;
- font-family: $font-family;
- @if type-of($font-size) != number {
- @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
- @if $accordion-navigation-font-size != null {
- @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
- font-size: $accordion-navigation-font-size;
- }
- @else{
- @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.";
- font-size: null;
- }
- }
- @else {
- font-size: $font-size;
- }
- &:hover {
- background: $hover-bg;
- }
- }
- }
- // Mixin: accordion-content($bg, $padding, $active-class)
- // @params $padding [ number ]: Padding for the content of the container
- // @params $bg [ color ]: Background color for the content when it's visible
- // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
- @mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') {
- display: none;
- @if type-of($padding) != "number" {
- @warn "#{$padding} was read as a #{type-of($padding)}";
- @if $accordion-content-padding != null {
- @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
- padding: $accordion-content-padding;
- } @else {
- @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.";
- padding: null;
- }
- } @else {
- padding: $padding;
- }
- @if type-of($active_class) != "string" {
- @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. "
- }
- @else {
- &.#{$active_class} {
- background: $bg;
- display: block;
- }
- }
- }
- @include exports("accordion") {
- @if $include-html-accordion-classes {
- .accordion {
- @include clearfix;
- margin-bottom: 0;
- margin-left: 0;
- .accordion-navigation, dd {
- display: block;
- margin-bottom: 0 !important;
- &.active > a { background: $accordion-navigation-active-bg-color; color: $accordion-navigation-active-font-color; }
- > a {
- background: $accordion-navigation-bg-color;
- color: $accordion-navigation-font-color;
- display: block;
- font-family: $accordion-navigation-font-family;
- font-size: $accordion-navigation-font-size;
- padding: $accordion-navigation-padding;
- &:hover { background: $accordion-navigation-hover-bg-color; }
- }
- > .content {
- display: none;
- padding: $accordion-content-padding;
- &.active {
- background: $accordion-content-active-bg-color;
- display: block;
- }
- }
- }
- }
- }
- }
|