180 lines
5.3 KiB
SCSS
Executable File
180 lines
5.3 KiB
SCSS
Executable File
// Variables
|
|
//------------------------------------------------------
|
|
$tab-background-color: $lightgray-dark !default;
|
|
$tab-background-color-hover: $lightgray-light !default;
|
|
$tab-radius: 4px !default;
|
|
|
|
$tab-font-color: $darkgray-dark !default;
|
|
$tab-font-color-acitve: $white !default;
|
|
|
|
$tab-aside-width: 74px !default;
|
|
|
|
$tab-border-color: $mediumgray-light !default;
|
|
// Exports
|
|
//------------------------------------------------------
|
|
|
|
@include exports("tab") {
|
|
|
|
/**
|
|
* tab
|
|
* --------------------------------------------------
|
|
*/
|
|
.nav-tabs {
|
|
border-bottom: none;
|
|
background-color: $tab-background-color;
|
|
@include radius($type: border-radius, $value: $tab-radius $tab-radius 0 0);
|
|
|
|
& > li {
|
|
margin-bottom: 0;
|
|
border-left: 1px solid $tab-border-color;
|
|
}
|
|
& > li:first-child {
|
|
border-left: none;
|
|
}
|
|
& > li > a {
|
|
margin-right: 0;
|
|
border: none;
|
|
@include radius($type: border-radius, $value: 0);
|
|
color: $tab-font-color;
|
|
}
|
|
& > li:first-child > a {
|
|
@include radius($type: border-radius, $value: $tab-radius 0 0 0);
|
|
}
|
|
& > li > a:focus,
|
|
& > li > a:hover {
|
|
border: none;
|
|
background-color: $tab-background-color-hover;
|
|
}
|
|
& > li.active > a,
|
|
& > li.active > a:focus,
|
|
& > li.active > a:hover {
|
|
border: none;
|
|
background-color: $tab-font-color-acitve !important;
|
|
}
|
|
|
|
& .dropdown-toggle,
|
|
& .dropdown-toggle:hover,
|
|
& .dropdown-toggle:focus {
|
|
color: $tab-font-color;
|
|
}
|
|
|
|
& li.dropdown.open .dropdown-toggle {
|
|
color: $tab-font-color;
|
|
background-color: $tab-background-color-hover;
|
|
}
|
|
& li.dropdown.active.open .dropdown-toggle {
|
|
color: $tab-font-color;
|
|
}
|
|
& li.dropdown.active.open .dropdown-toggle .caret,
|
|
& li.dropdown.active .dropdown-toggle .caret {
|
|
border-top-color: $tab-font-color;
|
|
border-bottom-color: $tab-font-color;
|
|
}
|
|
& li.dropdown.open .caret,
|
|
& li.dropdown.open.active .caret,
|
|
& li.dropdown.open a:hover .caret,
|
|
& li.dropdown.open a:focus .caret,
|
|
& .dropdown-toggle .caret,
|
|
& .dropdown-toggle:hover .caret,
|
|
& .dropdown-toggle:focus .caret {
|
|
border-top-color: $tab-font-color;
|
|
border-bottom-color: $tab-font-color;
|
|
}
|
|
|
|
&.nav-justified > li > a {
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
}
|
|
&.nav-justified > .dropdown .dropdown-menu {
|
|
top: auto;
|
|
left: auto;
|
|
}
|
|
&.nav-justified > li > a {
|
|
@include radius($type: border-radius, $value: 0);
|
|
}
|
|
&.nav-justified > li:first-child > a {
|
|
@include radius($type: border-radius, $value: $tab-radius 0 0 0);
|
|
}
|
|
&.nav-justified > li:last-child > a {
|
|
@include radius($type: border-radius, $value: 0 $tab-radius 0 0);
|
|
}
|
|
&.nav-justified > .active > a,
|
|
&.nav-justified > .active > a:hover,
|
|
&.nav-justified > .active > a:focus {
|
|
border: none;
|
|
}
|
|
@media (min-width: 768px) {
|
|
&.nav-justified > li > a {
|
|
border-bottom: none;
|
|
@include radius($type: border-radius, $value: 0);
|
|
}
|
|
&.nav-justified > .active > a,
|
|
&.nav-justified > .active > a:hover,
|
|
&.nav-justified > .active > a:focus {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
@at-root .tab-content {
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
.tabs-below {
|
|
& .nav-tabs {
|
|
@include radius($type: border-radius, $value: 0 0 $tab-radius $tab-radius);
|
|
}
|
|
& .nav-tabs > li:first-child > a {
|
|
@include radius($type: border-radius, $value: 0 0 0 $tab-radius);
|
|
}
|
|
& .nav-tabs.nav-justified > li:last-child > a {
|
|
@include radius($type: border-radius, $value: 0 0 $tab-radius 0);
|
|
}
|
|
}
|
|
|
|
.tabs-left .nav-tabs > li,
|
|
.tabs-right .nav-tabs > li {
|
|
float: none;
|
|
border-left: none;
|
|
border-top: 1px solid $tab-border-color;
|
|
}
|
|
.tabs-left .nav-tabs > li:first-child,
|
|
.tabs-right .nav-tabs > li:first-child {
|
|
border-top: none;
|
|
}
|
|
.tabs-left .nav-tabs > li > a,
|
|
.tabs-right .nav-tabs > li > a {
|
|
min-width: $tab-aside-width;
|
|
margin-right: 0;
|
|
}
|
|
.tabs-left {
|
|
& .nav-tabs {
|
|
float: left;
|
|
margin-right: 19px;
|
|
@include radius($type: border-radius, $value: $tab-radius 0 0 $tab-radius);
|
|
}
|
|
& .nav-tabs > li:first-child > a {
|
|
@include radius($type: border-radius, $value: $tab-radius 0 0 0);
|
|
}
|
|
& .nav-tabs > li:last-child > a {
|
|
@include radius($type: border-radius, $value: 0 0 0 $tab-radius);
|
|
}
|
|
}
|
|
.tabs-right {
|
|
& .nav-tabs {
|
|
float: right;
|
|
margin-left: 19px;
|
|
@include radius($type: border-radius, $value: 0 $tab-radius $tab-radius 0);
|
|
}
|
|
& .nav-tabs > li:first-child > a {
|
|
@include radius($type: border-radius, $value: 0 $tab-radius 0 0);
|
|
}
|
|
& .nav-tabs > li:last-child > a {
|
|
@include radius($type: border-radius, $value: 0 0 $tab-radius 0);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|