120 lines
2.8 KiB
SCSS
120 lines
2.8 KiB
SCSS
@mixin tab($color, $fg: $color) {
|
|
background: $color;
|
|
background-image: linear-gradient(to top, darken($color, 5%), $color);
|
|
border-color: $color;
|
|
text-shadow: 0 1px 0 $color;
|
|
color: darken($fg, 30%);
|
|
|
|
&:hover {
|
|
background: darken($color, 5%);
|
|
background-image: linear-gradient(to bottom, darken($color, 5%), $color);
|
|
border-color: darken($color, 5%);
|
|
}
|
|
|
|
&:active {
|
|
background: darken($color, 10%);
|
|
border-color: darken($color, 10%);
|
|
box-shadow: 0 1px 2px rgba($color, 0.6);
|
|
}
|
|
|
|
&:focus {
|
|
border-color: darken($color, 5%);
|
|
box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
|
|
}
|
|
|
|
&:disabled {
|
|
background: darken($color, 20%);
|
|
border-color: darken($color, 25%);
|
|
text-shadow: none;
|
|
color: darken($fg, 30%);
|
|
}
|
|
|
|
&.active {
|
|
background: darken($color, 15%);
|
|
background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
|
|
border-color: 1px darken($color, 20%) solid;
|
|
box-shadow: inset 0 0 5px rgba(darken($color, 20%), 0.4);
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.tab {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0.5em 1em;
|
|
background: $black;
|
|
border: 1px solid $black;
|
|
color: $white;
|
|
text-decoration: none;
|
|
text-shadow: 0 1px 0 $black;
|
|
transition: all 0.2s ease-in-out;
|
|
|
|
@if $border-radius <= 0 {
|
|
&:first-child {
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
} @else {
|
|
&:first-child {
|
|
border-top-left-radius: $border-radius;
|
|
border-bottom-left-radius: $border-radius;
|
|
}
|
|
&:last-child {
|
|
border-top-right-radius: $border-radius;
|
|
border-bottom-right-radius: $border-radius;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background: $black;
|
|
border-color: $black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: $black;
|
|
}
|
|
}
|
|
|
|
.tab-primary {
|
|
@include tab($accent);
|
|
}
|
|
|
|
.tab-secondary {
|
|
@include tab($accent-alt);
|
|
}
|
|
|
|
.tab-success {
|
|
@include tab($green);
|
|
}
|
|
|
|
.tab-danger {
|
|
@include tab($red);
|
|
}
|
|
|
|
.tab-warning {
|
|
@include tab($orange);
|
|
}
|
|
|
|
.tab-info {
|
|
@include tab($blue);
|
|
}
|
|
|
|
.tab-light {
|
|
@include tab($white, #121212);
|
|
}
|
|
|
|
.tab-dark {
|
|
@include tab($black, #fefefe);
|
|
}
|
|
} |