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.
97 lines
2.7 KiB
97 lines
2.7 KiB
@import "global";
|
|
@import "grid";
|
|
|
|
//
|
|
// @variables
|
|
//
|
|
|
|
$include-html-tabs-classes: $include-html-classes !default;
|
|
|
|
$tabs-navigation-padding: rem-calc(16) !default;
|
|
$tabs-navigation-bg-color: #efefef !default;
|
|
$tabs-navigation-active-bg-color: #fff !default;
|
|
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
|
|
$tabs-navigation-font-color: #222 !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;
|
|
dd {
|
|
position: relative;
|
|
margin-bottom: 0 !important;
|
|
top: 1px;
|
|
float: $default-float;
|
|
> a {
|
|
display: block;
|
|
background: $tabs-navigation-bg-color;
|
|
color: $tabs-navigation-font-color;
|
|
padding-top: $tabs-navigation-padding;
|
|
padding-#{$opposite-direction}: $tabs-navigation-padding * 2;
|
|
padding-bottom: $tabs-navigation-padding + rem-calc(1);
|
|
padding-#{$default-float}: $tabs-navigation-padding * 2;
|
|
font-family: $tabs-navigation-font-family;
|
|
font-size: $tabs-navigation-font-size;
|
|
&:hover { background: $tabs-navigation-hover-bg-color; }
|
|
}
|
|
&.active a { background: $tabs-navigation-active-bg-color; }
|
|
}
|
|
&.radius {
|
|
dd:first-child {
|
|
a { @include side-radius($default-float, $global-radius); }
|
|
}
|
|
dd:last-child {
|
|
a { @include side-radius($opposite-direction, $global-radius); }
|
|
}
|
|
}
|
|
&.vertical {
|
|
dd {
|
|
position: inherit;
|
|
float: none;
|
|
display: block;
|
|
top: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tabs-content {
|
|
@include clearfix;
|
|
margin-bottom: $tabs-content-margin-bottom;
|
|
> .content {
|
|
display: none;
|
|
float: $default-float;
|
|
padding: $tabs-content-padding 0;
|
|
&.active { display: block; }
|
|
&.contained { padding: $tabs-content-padding; }
|
|
}
|
|
&.vertical {
|
|
display: block;
|
|
> .content { padding: 0 $tabs-content-padding; }
|
|
}
|
|
}
|
|
@media #{$medium-up} {
|
|
.tabs {
|
|
&.vertical {
|
|
width: 20%;
|
|
float: $default-float;
|
|
margin-bottom: $tabs-vertical-navigation-margin-bottom;
|
|
}
|
|
}
|
|
.tabs-content {
|
|
&.vertical {
|
|
width: 80%;
|
|
float: $default-float;
|
|
margin-#{$default-float}: -1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|