Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add customisation variables

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-28 21:05:15 +01:00
parent 2e08a844d7
commit 1be49f2190
47 changed files with 888 additions and 683 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
sass/components/tabs.sass Normal file → Executable file
View File

@@ -1,3 +1,31 @@
$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
$tabs-boxed-link-active-border-bottom-color: transparent !important !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: $primary !default
$tabs-toggle-link-active-border-color: $primary !default
$tabs-toggle-link-active-color: $primary-invert !default
.tabs
+block
+overflow-touch
@@ -11,25 +39,29 @@
white-space: nowrap
a
align-items: center
border-bottom: 1px solid $border
color: $text
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: -1px
padding: 0.5em 1em
margin-bottom: -#{$tabs-border-bottom-width}
padding: $tabs-link-padding
vertical-align: top
&:hover
border-bottom-color: $text-strong
color: $text-strong
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
li
display: block
&.is-active
a
border-bottom-color: $primary
color: $primary
border-bottom-color: $tabs-link-active-border-bottom-color
color: $tabs-link-active-color
ul
align-items: center
border-bottom: 1px solid $border
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
@@ -60,41 +92,43 @@
&.is-boxed
a
border: 1px solid transparent
border-radius: $radius $radius 0 0
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
&:hover
background-color: $background
border-bottom-color: $border
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
li
&.is-active
a
background-color: $white
border-color: $border
border-bottom-color: transparent !important
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
&.is-fullwidth
li
flex-grow: 1
flex-shrink: 0
&.is-toggle
a
border: 1px solid $border
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: $background
border-color: $border-hover
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
z-index: 2
li
& + li
margin-left: -1px
margin-left: -#{$tabs-toggle-link-border-width}
&:first-child a
border-radius: $radius 0 0 $radius
border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
&:last-child a
border-radius: 0 $radius $radius 0
border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
&.is-active
a
background-color: $primary
border-color: $primary
color: $primary-invert
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