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.
122 lines
3.2 KiB
122 lines
3.2 KiB
// Foundation by ZURB |
|
// foundation.zurb.com |
|
// Licensed under MIT Open Source |
|
|
|
@import "global"; |
|
@import "grid"; |
|
|
|
// |
|
// @variables |
|
// |
|
|
|
$include-html-tabs-classes: $include-html-classes !default; |
|
|
|
$tabs-navigation-padding: rem-calc(16) !default; |
|
$tabs-navigation-bg-color: $silver !default; |
|
$tabs-navigation-active-bg-color: $white !default; |
|
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default; |
|
$tabs-navigation-font-color: $jet !default; |
|
$tabs-navigation-active-font-color: $tabs-navigation-font-color !default; |
|
$tabs-navigation-font-size: rem-calc(16) !default; |
|
$tabs-navigation-font-family: $body-font-family !default; |
|
|
|
$tabs-content-margin-bottom: rem-calc(24) !default; |
|
$tabs-content-padding: $column-gutter/2 !default; |
|
|
|
$tabs-vertical-navigation-margin-bottom: 1.25rem !default; |
|
|
|
@include exports("tab") { |
|
@if $include-html-tabs-classes { |
|
.tabs { |
|
@include clearfix; |
|
margin-bottom: 0 !important; |
|
margin-left: 0; |
|
dd, .tab-title { |
|
position: relative; |
|
margin-bottom: 0 !important; |
|
list-style: none; |
|
float: $default-float; |
|
> a { |
|
display: block; |
|
background: { |
|
color: $tabs-navigation-bg-color; |
|
} |
|
color: $tabs-navigation-font-color; |
|
padding: $tabs-navigation-padding $tabs-navigation-padding * 2; |
|
font-family: $tabs-navigation-font-family; |
|
font-size: $tabs-navigation-font-size; |
|
&:hover { |
|
background: { |
|
color: $tabs-navigation-hover-bg-color; |
|
} |
|
} |
|
} |
|
&.active a { |
|
background: { |
|
color: $tabs-navigation-active-bg-color; |
|
} |
|
color:$tabs-navigation-active-font-color; |
|
} |
|
} |
|
&.radius { |
|
dd:first-child, .tab:first-child { |
|
a { @include side-radius($default-float, $global-radius); } |
|
} |
|
dd:last-child, .tab:last-child { |
|
a { @include side-radius($opposite-direction, $global-radius); } |
|
} |
|
} |
|
&.vertical { |
|
dd, .tab-title { |
|
position: inherit; |
|
float: none; |
|
display: block; |
|
top: auto; |
|
} |
|
} |
|
} |
|
|
|
.tabs-content { |
|
@include clearfix; |
|
margin-bottom: $tabs-content-margin-bottom; |
|
width: 100%; |
|
> .content { |
|
display: none; |
|
float: $default-float; |
|
padding: $tabs-content-padding 0; |
|
width: 100%; |
|
&.active { display: block; float: none; } |
|
&.contained { padding: $tabs-content-padding; } |
|
} |
|
&.vertical { |
|
display: block; |
|
> .content { padding: 0 $tabs-content-padding; } |
|
} |
|
} |
|
@media #{$medium-up} { |
|
.tabs { |
|
&.vertical { |
|
width: 20%; |
|
max-width: 20%; |
|
float: $default-float; |
|
margin: 0 0 $tabs-vertical-navigation-margin-bottom; |
|
} |
|
} |
|
.tabs-content { |
|
&.vertical { |
|
width: 80%; |
|
max-width: 80%; |
|
float: $default-float; |
|
margin-#{$default-float}: -1px; |
|
padding-#{$default-float}: 1rem; |
|
} |
|
} |
|
} |
|
.no-js { |
|
.tabs-content > .content { |
|
display: block; |
|
float: none; |
|
} |
|
} |
|
} |
|
}
|
|
|