mirror of https://github.com/juliancwirko/abc.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
158 lines
6.6 KiB
158 lines
6.6 KiB
10 years ago
|
// 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-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
|
||
|
|
|
||
|
|
@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 ){
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
> 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} {
|
||
|
|
display: block;
|
||
|
|
background: $bg;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@include exports("accordion") {
|
||
|
|
@if $include-html-accordion-classes {
|
||
|
|
.accordion {
|
||
|
|
@include clearfix;
|
||
|
|
margin-bottom: 0;
|
||
|
|
.accordion-navigation, dd {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
&.active > a { background: $accordion-navigation-active-bg-color; }
|
||
|
|
> a {
|
||
|
|
background: $accordion-navigation-bg-color;
|
||
|
|
color: $accordion-navigation-font-color;
|
||
|
|
padding: $accordion-navigation-padding;
|
||
|
|
display: block;
|
||
|
|
font-family: $accordion-navigation-font-family;
|
||
|
|
font-size: $accordion-navigation-font-size;
|
||
|
|
&:hover { background: $accordion-navigation-hover-bg-color; }
|
||
|
|
}
|
||
|
|
|
||
|
|
> .content {
|
||
|
|
display: none;
|
||
|
|
padding: $accordion-content-padding;
|
||
|
|
&.active {
|
||
|
|
display: block;
|
||
|
|
background: $accordion-content-active-bg-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|