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

Add CSS variables to tabs

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-22 11:54:08 +02:00
parent 9945e9516c
commit 5966d31b5e
3 changed files with 209 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
sass/components/panel.sass
View File

@@ -1,3 +1,4 @@
$panel-font-size: var(--size-normal, #{$size-normal}) !default
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
@@ -29,11 +30,36 @@ $panel-icon-color: $text-light !default
$panel-colors: $colors !default
.panel
border-radius: $panel-radius
box-shadow: $panel-shadow
--panel-font-size: #{$panel-font-size}
--panel-radius: #{$panel-radius}
--panel-shadow: #{$panel-shadow}
--panel-margin: #{$panel-margin}
--panel-item-border: #{$panel-item-border}
--panel-radius: #{$panel-radius}
--panel-heading-background-color: #{$panel-heading-background-color}
--panel-heading-color: #{$panel-heading-color}
--panel-heading-size: #{$panel-heading-size}
--panel-heading-weight: #{$panel-heading-weight}
--panel-heading-line-height: #{$panel-heading-line-height}
--panel-heading-padding: #{$panel-heading-padding}
--panel-tabs-font-size: #{$panel-tabs-font-size}
--panel-tab-border-bottom: #{$panel-tab-border-bottom}
--panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color}
--panel-tab-active-color: #{$panel-tab-active-color}
--panel-list-item-color: #{$panel-list-item-color}
--panel-list-item-hover-color: #{$panel-list-item-hover-color}
--panel-block-color: #{$panel-block-color}
--panel-block-active-border-left-color: #{$panel-block-active-border-left-color}
--panel-block-active-color: #{$panel-block-active-color}
--panel-block-active-icon-color: #{$panel-block-active-icon-color}
--panel-block-hover-background-color: #{$panel-block-hover-background-color}
--panel-icon-color: #{$panel-icon-color}
border-radius: var(--panel-radius)
box-shadow: var(--panel-shadow)
font-size: $size-normal
&:not(:last-child)
margin-bottom: $panel-margin
margin-bottom: var(--panel-margin)
// Colors
@each $name, $components in $panel-colors
$color: nth($components, 1)
@@ -50,40 +76,40 @@ $panel-colors: $colors !default
.panel-tabs,
.panel-block
&:not(:last-child)
border-bottom: $panel-item-border
border-bottom: var(--panel-item-border)
.panel-heading
background-color: $panel-heading-background-color
border-radius: $panel-radius $panel-radius 0 0
color: $panel-heading-color
font-size: $panel-heading-size
font-weight: $panel-heading-weight
line-height: $panel-heading-line-height
padding: $panel-heading-padding
background-color: var(--panel-heading-background-color)
border-radius: var(--panel-radius) var(--panel-radius) 0 0
color: var(--panel-heading-color)
font-size: var(--panel-heading-size)
font-weight: var(--panel-heading-weight)
line-height: var(--panel-heading-line-height)
padding: var(--panel-heading-padding)
.panel-tabs
align-items: flex-end
display: flex
font-size: $panel-tabs-font-size
font-size: var(--panel-tabs-font-size)
justify-content: center
a
border-bottom: $panel-tab-border-bottom
border-bottom: var(--panel-tab-border-bottom)
margin-bottom: -1px
padding: 0.5em
// Modifiers
&.is-active
border-bottom-color: $panel-tab-active-border-bottom-color
color: $panel-tab-active-color
border-bottom-color: var(--panel-tab-active-border-bottom-color)
color: var(--panel-tab-active-color)
.panel-list
a
color: $panel-list-item-color
color: var(--panel-list-item-color)
&:hover
color: $panel-list-item-hover-color
color: var(--panel-list-item-hover-color)
.panel-block
align-items: center
color: $panel-block-color
color: var(--panel-block-color)
display: flex
justify-content: flex-start
padding: 0.5em 0.75em
@@ -96,23 +122,23 @@ $panel-colors: $colors !default
&.is-wrapped
flex-wrap: wrap
&.is-active
border-left-color: $panel-block-active-border-left-color
color: $panel-block-active-color
border-left-color: var(--panel-block-active-border-left-color)
color: var(--panel-block-active-color)
.panel-icon
color: $panel-block-active-icon-color
color: var(--panel-block-active-icon-color)
&:last-child
border-bottom-left-radius: $panel-radius
border-bottom-right-radius: $panel-radius
border-bottom-left-radius: var(--panel-radius)
border-bottom-right-radius: var(--panel-radius)
a.panel-block,
label.panel-block
cursor: pointer
&:hover
background-color: $panel-block-hover-background-color
background-color: var(--panel-block-hover-background-color)
.panel-icon
+fa(14px, 1em)
color: $panel-icon-color
color: var(--panel-icon-color)
+ltr-property("margin", 0.75em)
.fa
font-size: inherit