bulma/sass/components/tabs.sass

142 lines
4.3 KiB
Sass
Raw Normal View History

2017-07-28 20:05:15 +00:00
$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: $primary !default
$tabs-link-active-color: $primary !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: $white !default
$tabs-boxed-link-active-border-color: $border !default
2017-07-30 18:25:24 +00:00
$tabs-boxed-link-active-border-bottom-color: transparent !default
2017-07-28 20:05:15 +00:00
$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: $primary !default
$tabs-toggle-link-active-border-color: $primary !default
$tabs-toggle-link-active-color: $primary-invert !default
2016-01-24 00:03:43 +00:00
.tabs
2016-09-22 22:14:18 +00:00
+block
2017-04-15 16:54:47 +00:00
+overflow-touch
2016-09-22 22:14:18 +00:00
+unselectable
2016-05-07 22:40:06 +00:00
align-items: stretch
display: flex
2016-10-30 22:52:04 +00:00
font-size: $size-normal
2016-05-07 22:40:06 +00:00
justify-content: space-between
2016-01-24 00:03:43 +00:00
overflow: hidden
overflow-x: auto
white-space: nowrap
a
2016-05-05 21:23:08 +00:00
align-items: center
2017-07-28 20:05:15 +00:00
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
2016-05-05 21:23:08 +00:00
display: flex
justify-content: center
2017-07-28 20:05:15 +00:00
margin-bottom: -#{$tabs-border-bottom-width}
padding: $tabs-link-padding
2016-01-24 00:03:43 +00:00
vertical-align: top
&:hover
2017-07-28 20:05:15 +00:00
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
2016-01-24 00:03:43 +00:00
li
display: block
2016-01-24 00:03:43 +00:00
&.is-active
a
2017-07-28 20:05:15 +00:00
border-bottom-color: $tabs-link-active-border-bottom-color
color: $tabs-link-active-color
2016-01-24 00:03:43 +00:00
ul
2016-05-07 22:40:06 +00:00
align-items: center
2017-07-28 20:05:15 +00:00
border-bottom-color: $tabs-border-bottom-color
border-bottom-style: $tabs-border-bottom-style
border-bottom-width: $tabs-border-bottom-width
display: flex
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2016-05-07 22:40:06 +00:00
justify-content: flex-start
&.is-left
2016-10-30 22:52:04 +00:00
padding-right: 0.75em
2016-05-07 22:40:06 +00:00
&.is-center
flex: none
justify-content: center
2016-10-30 22:52:04 +00:00
padding-left: 0.75em
padding-right: 0.75em
2016-05-07 22:40:06 +00:00
&.is-right
justify-content: flex-end
2016-10-30 22:52:04 +00:00
padding-left: 0.75em
2016-05-05 21:23:08 +00:00
.icon
&:first-child
2016-10-30 22:52:04 +00:00
margin-right: 0.5em
2016-05-05 21:23:08 +00:00
&:last-child
2016-10-30 22:52:04 +00:00
margin-left: 0.5em
2016-05-07 22:40:06 +00:00
// Alignment
&.is-centered
ul
justify-content: center
&.is-right
ul
justify-content: flex-end
// Styles
2016-01-24 00:03:43 +00:00
&.is-boxed
a
border: 1px solid transparent
2017-07-28 20:05:15 +00:00
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
2016-01-24 00:03:43 +00:00
&:hover
2017-07-28 20:05:15 +00:00
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
2016-01-24 00:03:43 +00:00
li
&.is-active
a
2017-07-28 20:05:15 +00:00
background-color: $tabs-boxed-link-active-background-color
border-color: $tabs-boxed-link-active-border-color
2017-07-30 18:25:24 +00:00
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
2016-04-10 15:27:27 +00:00
&.is-fullwidth
li
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2016-01-24 00:03:43 +00:00
&.is-toggle
a
2017-07-28 20:05:15 +00:00
border-color: $tabs-toggle-link-border-color
border-style: $tabs-toggle-link-border-style
border-width: $tabs-toggle-link-border-width
2016-01-24 00:03:43 +00:00
margin-bottom: 0
position: relative
&:hover
2017-07-28 20:05:15 +00:00
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
2016-01-24 00:03:43 +00:00
z-index: 2
li
& + li
2017-07-28 20:05:15 +00:00
margin-left: -#{$tabs-toggle-link-border-width}
2016-01-24 00:03:43 +00:00
&:first-child a
2017-07-28 20:05:15 +00:00
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
2016-01-24 00:03:43 +00:00
&:last-child a
2017-07-28 20:05:15 +00:00
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
2016-01-24 00:03:43 +00:00
&.is-active
a
2017-07-28 20:05:15 +00:00
background-color: $tabs-toggle-link-active-background-color
border-color: $tabs-toggle-link-active-border-color
color: $tabs-toggle-link-active-color
2016-01-24 00:03:43 +00:00
z-index: 1
ul
border-bottom: none
2016-05-07 22:40:06 +00:00
// Sizes
&.is-small
font-size: $size-small
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large