bulma/sass/components/tabs.sass

132 lines
2.7 KiB
Sass
Raw Normal View History

2016-01-24 00:03:43 +00:00
.tabs
@extend .block
2016-05-07 22:40:06 +00:00
@extend .unselectable
align-items: stretch
display: flex
justify-content: space-between
2016-01-24 00:03:43 +00:00
line-height: 24px
overflow: hidden
overflow-x: auto
white-space: nowrap
a
2016-05-05 21:23:08 +00:00
align-items: center
2016-01-24 00:03:43 +00:00
border-bottom: 1px solid $border
color: $text
2016-05-05 21:23:08 +00:00
display: flex
justify-content: center
2016-01-24 00:03:43 +00:00
margin-bottom: -1px
2016-05-07 22:40:06 +00:00
padding: 6px 12px
2016-01-24 00:03:43 +00:00
vertical-align: top
&:hover
border-bottom-color: $text-strong
color: $text-strong
li
display: block
2016-01-24 00:03:43 +00:00
&.is-active
a
border-bottom-color: $link
color: $link
ul
2016-05-07 22:40:06 +00:00
align-items: center
2016-01-24 00:03:43 +00:00
border-bottom: 1px solid $border
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
padding-right: 10px
&.is-center
flex: none
justify-content: center
padding-left: 10px
padding-right: 10px
&.is-right
justify-content: flex-end
padding-left: 10px
2016-05-05 21:23:08 +00:00
.icon
&:first-child
2016-05-07 22:40:06 +00:00
margin-right: 8px
2016-05-05 21:23:08 +00:00
&:last-child
2016-05-07 22:40:06 +00:00
margin-left: 8px
// 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
border-radius: $radius $radius 0 0
2016-05-07 22:40:06 +00:00
padding-bottom: 5px
padding-top: 5px
2016-01-24 00:03:43 +00:00
&:hover
2016-06-29 22:59:48 +00:00
background-color: $background
2016-01-24 00:03:43 +00:00
border-bottom-color: $border
li
&.is-active
a
2016-06-29 22:59:48 +00:00
background-color: $white
2016-01-24 00:03:43 +00:00
border-color: $border
2016-05-08 00:35:43 +00:00
border-bottom-color: transparent !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
border: 1px solid $border
margin-bottom: 0
2016-05-07 22:40:06 +00:00
padding-bottom: 5px
padding-top: 5px
2016-01-24 00:03:43 +00:00
position: relative
&:hover
2016-06-29 22:59:48 +00:00
background-color: $background
2016-01-24 00:03:43 +00:00
border-color: $border-hover
z-index: 2
li
& + li
margin-left: -1px
&:first-child a
border-radius: $radius 0 0 $radius
&:last-child a
border-radius: 0 $radius $radius 0
&.is-active
a
2016-06-29 22:59:48 +00:00
background-color: $primary
2016-01-24 00:03:43 +00:00
border-color: $primary
color: $primary-invert
z-index: 1
ul
border-bottom: none
2016-05-07 22:40:06 +00:00
// Sizes
&.is-small
font-size: $size-small
a
padding: 2px 8px
&.is-boxed,
&.is-toggle
a
padding-bottom: 1px
padding-top: 1px
&.is-medium
font-size: $size-medium
a
padding: 10px 16px
&.is-boxed,
&.is-toggle
a
padding-bottom: 9px
padding-top: 9px
&.is-large
font-size: $size-large
a
padding: 14px 20px
&.is-boxed,
&.is-toggle
a
padding-bottom: 13px
padding-top: 13px