mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 19:34:30 -07:00
Convert sass files to scss files
This commit is contained in:
Jeremy Thomas
271
sass/components/tabs.scss
Normal file
271
sass/components/tabs.scss
Normal file
@@ -0,0 +1,271 @@
|
||||
@import "../utilities/mixins";
|
||||
|
||||
$tabs-border-bottom-color: $border !default;
|
||||
$tabs-border-bottom-style: solid !default;
|
||||
$tabs-border-bottom-width: 1px !default;
|
||||
$tabs-link-color: $text !default;
|
||||
$tabs-link-hover-border-bottom-color: $text-strong !default;
|
||||
$tabs-link-hover-color: $text-strong !default;
|
||||
$tabs-link-active-border-bottom-color: $link !default;
|
||||
$tabs-link-active-color: $link !default;
|
||||
$tabs-link-padding: 0.5em 1em !default;
|
||||
|
||||
$tabs-boxed-link-radius: $radius !default;
|
||||
$tabs-boxed-link-hover-background-color: $background !default;
|
||||
$tabs-boxed-link-hover-border-bottom-color: $border !default;
|
||||
|
||||
$tabs-boxed-link-active-background-color: $scheme-main !default;
|
||||
$tabs-boxed-link-active-border-color: $border !default;
|
||||
$tabs-boxed-link-active-border-bottom-color: transparent !default;
|
||||
|
||||
$tabs-toggle-link-border-color: $border !default;
|
||||
$tabs-toggle-link-border-style: solid !default;
|
||||
$tabs-toggle-link-border-width: 1px !default;
|
||||
$tabs-toggle-link-hover-background-color: $background !default;
|
||||
$tabs-toggle-link-hover-border-color: $border-hover !default;
|
||||
$tabs-toggle-link-radius: $radius !default;
|
||||
$tabs-toggle-link-active-background-color: $link !default;
|
||||
$tabs-toggle-link-active-border-color: $link !default;
|
||||
$tabs-toggle-link-active-color: $link-invert !default;
|
||||
|
||||
.tabs {
|
||||
@extend %block;
|
||||
|
||||
@include overflow-touch;
|
||||
|
||||
@extend %unselectable;
|
||||
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
font-size: $size-normal;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
align-items: center;
|
||||
border-bottom-color: $tabs-border-bottom-color;
|
||||
border-bottom-style: $tabs-border-bottom-style;
|
||||
border-bottom-width: $tabs-border-bottom-width;
|
||||
color: $tabs-link-color;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: -#{$tabs-border-bottom-width};
|
||||
padding: $tabs-link-padding;
|
||||
vertical-align: top;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $tabs-link-hover-border-bottom-color;
|
||||
color: $tabs-link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
border-bottom-color: $tabs-link-active-border-bottom-color;
|
||||
color: $tabs-link-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
align-items: center;
|
||||
border-bottom-color: $tabs-border-bottom-color;
|
||||
border-bottom-style: $tabs-border-bottom-style;
|
||||
border-bottom-width: $tabs-border-bottom-width;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
justify-content: flex-start;
|
||||
|
||||
&.is-left {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.is-center {
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
padding-left: 0.75em;
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
justify-content: flex-end;
|
||||
padding-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:first-child {
|
||||
@include ltr-property("margin", 0.5em);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include ltr-property("margin", 0.5em, false);
|
||||
}
|
||||
}
|
||||
|
||||
// Alignment
|
||||
&.is-centered {
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right {
|
||||
ul {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
// Styles
|
||||
&.is-boxed {
|
||||
a {
|
||||
border: 1px solid transparent;
|
||||
|
||||
@include ltr {
|
||||
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
background-color: $tabs-boxed-link-hover-background-color;
|
||||
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.is-active {
|
||||
a {
|
||||
background-color: $tabs-boxed-link-active-background-color;
|
||||
border-color: $tabs-boxed-link-active-border-color;
|
||||
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-fullwidth {
|
||||
li {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-toggle {
|
||||
a {
|
||||
border-color: $tabs-toggle-link-border-color;
|
||||
border-style: $tabs-toggle-link-border-style;
|
||||
border-width: $tabs-toggle-link-border-width;
|
||||
margin-bottom: 0;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
background-color: $tabs-toggle-link-hover-background-color;
|
||||
border-color: $tabs-toggle-link-hover-border-color;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
& + li {
|
||||
@include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false);
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
@include ltr {
|
||||
border-top-left-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-right-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
@include ltr {
|
||||
border-top-right-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-right-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-top-left-radius: $tabs-toggle-link-radius;
|
||||
border-bottom-left-radius: $tabs-toggle-link-radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
background-color: $tabs-toggle-link-active-background-color;
|
||||
border-color: $tabs-toggle-link-active-border-color;
|
||||
color: $tabs-toggle-link-active-color;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.is-toggle-rounded {
|
||||
li {
|
||||
&:first-child a {
|
||||
@include ltr {
|
||||
border-bottom-left-radius: $radius-rounded;
|
||||
border-top-left-radius: $radius-rounded;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-right-radius: $radius-rounded;
|
||||
border-top-right-radius: $radius-rounded;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
@include ltr {
|
||||
border-bottom-right-radius: $radius-rounded;
|
||||
border-top-right-radius: $radius-rounded;
|
||||
padding-right: 1.25em;
|
||||
}
|
||||
|
||||
|
||||
@include rtl {
|
||||
border-bottom-left-radius: $radius-rounded;
|
||||
border-top-left-radius: $radius-rounded;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.is-small {
|
||||
font-size: $size-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
font-size: $size-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
font-size: $size-large;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user