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

Add functions to register and assign CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-22 11:19:21 +02:00
parent 0ecc5bd35d
commit 166fcdb32c
11 changed files with 168 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
sass/components/breadcrumb.sass
View File

@@ -1,25 +1,35 @@
$breadcrumb-item-color: $link !default $breadcrumb-font-size: var(--size-normal, #{$size-normal}) !default
$breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default $breadcrumb-item-color: var(--link, #{$link}) !default
$breadcrumb-item-hover-color: var(--link-hover, #{$link-hover}) !default
$breadcrumb-item-active-color: var(--text-strong, #{$text-strong}) !default
$breadcrumb-item-padding-vertical: 0 !default $breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default $breadcrumb-item-padding-horizontal: 0.75em !default
$breadcrumb-item-separator-color: $border-hover !default $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
.breadcrumb .breadcrumb
--breadcrumb-font-size: #{$content-font-size}
--breadcrumb-item-color: #{$breadcrumb-item-color}
--breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}
--breadcrumb-item-active-color: #{$breadcrumb-item-active-color}
--breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
--breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
--breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
@extend %block @extend %block
@extend %unselectable @extend %unselectable
font-size: $size-normal font-size: var(--breadcrumb-font-size)
white-space: nowrap white-space: nowrap
a a
align-items: center align-items: center
color: $breadcrumb-item-color color: var(--breadcrumb-item-color)
display: flex display: flex
justify-content: center justify-content: center
padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal padding: var(--breadcrumb-item-padding-vertical) var(--breadcrumb-item-padding-horizontal)
&:hover &:hover
color: $breadcrumb-item-hover-color color: var(--breadcrumb-item-hover-color)
li li
align-items: center align-items: center
display: flex display: flex
@@ -27,11 +37,11 @@ $breadcrumb-item-separator-color: $border-hover !default
+ltr-property("padding", 0, false) +ltr-property("padding", 0, false)
&.is-active &.is-active
a a
color: $breadcrumb-item-active-color color: var(--breadcrumb-item-active-color)
cursor: default cursor: default
pointer-events: none pointer-events: none
& + li::before & + li::before
color: $breadcrumb-item-separator-color color: var(--breadcrumb-item-separator-color)
content: "\0002f" content: "\0002f"
ul, ul,
ol ol
@@ -55,11 +65,11 @@ $breadcrumb-item-separator-color: $border-hover !default
justify-content: flex-end justify-content: flex-end
// Sizes // Sizes
&.is-small &.is-small
font-size: $size-small --breadcrumb-font-size: var(--size-small, #{$size-small})
&.is-medium &.is-medium
font-size: $size-medium --breadcrumb-font-size: var(--size-medium, #{$size-medium})
&.is-large &.is-large
font-size: $size-large --breadcrumb-font-size: var(--size-large, #{$size-large})
// Styles // Styles
&.has-arrow-separator &.has-arrow-separator
li + li::before li + li::before

68
sass/components/dropdown.sass
View File

@@ -1,23 +1,41 @@
$dropdown-menu-min-width: 12rem !default $dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $scheme-main !default $dropdown-content-background-color: var(--scheme-main, #{$scheme-main}) !default
$dropdown-content-arrow: $link !default $dropdown-content-arrow: var(--link, #{$link}) !default
$dropdown-content-offset: 4px !default $dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default $dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default $dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default $dropdown-content-radius: var(--radius, #{$radius}) !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default $dropdown-content-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
$dropdown-content-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em $dropdown-content-shadow-color, 0 0px 0 1px $dropdown-content-shadow-color-bis !default
$dropdown-content-z: 20 !default $dropdown-content-z: 20 !default
$dropdown-item-color: $text !default $dropdown-item-color: var(--text, #{$text}) !default
$dropdown-item-hover-color: $scheme-invert !default $dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
$dropdown-item-hover-background-color: $background !default $dropdown-item-hover-background-color: var(--background, #{$background}) !default
$dropdown-item-active-color: $link-invert !default $dropdown-item-active-color: var(--link-invert, #{$link-invert}) !default
$dropdown-item-active-background-color: $link !default $dropdown-item-active-background-color: var(--link, #{$link}) !default
$dropdown-divider-background-color: $border-light !default $dropdown-divider-background-color: var(--border-light, #{$border-light}) !default
.dropdown .dropdown
--dropdown-content-offset: #{$dropdown-content-offset}
--dropdown-menu-min-width: #{$dropdown-menu-min-width}
--dropdown-content-offset: #{$dropdown-content-offset}
--dropdown-content-z: #{$dropdown-content-z}
--dropdown-content-background-color: #{$dropdown-content-background-color}
--dropdown-content-radius: #{$dropdown-content-radius}
--dropdown-content-shadow: #{$dropdown-content-shadow}
--dropdown-content-padding-bottom: #{$dropdown-content-padding-bottom}
--dropdown-content-padding-top: #{$dropdown-content-padding-top}
--dropdown-item-color: #{$dropdown-item-color}
--dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color}
--dropdown-item-hover-color: #{$dropdown-item-hover-color}
--dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
--dropdown-item-active-color: #{$dropdown-item-active-color}
--dropdown-divider-background-color: #{$dropdown-divider-background-color}
display: inline-flex display: inline-flex
position: relative position: relative
vertical-align: top vertical-align: top
@@ -32,28 +50,28 @@ $dropdown-divider-background-color: $border-light !default
&.is-up &.is-up
.dropdown-menu .dropdown-menu
bottom: 100% bottom: 100%
padding-bottom: $dropdown-content-offset padding-bottom: var(--dropdown-content-offset)
padding-top: initial padding-top: initial
top: auto top: auto
.dropdown-menu .dropdown-menu
display: none display: none
+ltr-position(0, false) +ltr-position(0, false)
min-width: $dropdown-menu-min-width min-width: var(--dropdown-menu-min-width)
padding-top: $dropdown-content-offset padding-top: var(--dropdown-content-offset)
position: absolute position: absolute
top: 100% top: 100%
z-index: $dropdown-content-z z-index: var(--dropdown-content-z)
.dropdown-content .dropdown-content
background-color: $dropdown-content-background-color background-color: var(--dropdown-content-background-color)
border-radius: $dropdown-content-radius border-radius: var(--dropdown-content-radius)
box-shadow: $dropdown-content-shadow box-shadow: var(--dropdown-content-shadow)
padding-bottom: $dropdown-content-padding-bottom padding-bottom: var(--dropdown-content-padding-bottom)
padding-top: $dropdown-content-padding-top padding-top: var(--dropdown-content-padding-top)
.dropdown-item .dropdown-item
color: $dropdown-item-color color: var(--dropdown-item-color)
display: block display: block
font-size: 0.875rem font-size: 0.875rem
line-height: 1.5 line-height: 1.5
@@ -67,14 +85,14 @@ button.dropdown-item
white-space: nowrap white-space: nowrap
width: 100% width: 100%
&:hover &:hover
background-color: $dropdown-item-hover-background-color background-color: var(--dropdown-item-hover-background-color)
color: $dropdown-item-hover-color color: var(--dropdown-item-hover-color)
&.is-active &.is-active
background-color: $dropdown-item-active-background-color background-color: var(--dropdown-item-active-background-color)
color: $dropdown-item-active-color color: var(--dropdown-item-active-color)
.dropdown-divider .dropdown-divider
background-color: $dropdown-divider-background-color background-color: var(--dropdown-divider-background-color)
border: none border: none
display: block display: block
height: 1px height: 1px

9
sass/components/level.sass
View File

@@ -1,6 +1,7 @@
$level-item-spacing: ($block-spacing / 2) !default $level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
.level .level
--level-item-spacing: #{$level-item-spacing}
@extend %block @extend %block
align-items: center align-items: center
justify-content: space-between justify-content: space-between
@@ -20,7 +21,7 @@ $level-item-spacing: ($block-spacing / 2) !default
.level-item .level-item
&:not(:last-child) &:not(:last-child)
margin-bottom: 0 margin-bottom: 0
+ltr-property("margin", $level-item-spacing) +ltr-property("margin", var(--level-item-spacing))
&:not(.is-narrow) &:not(.is-narrow)
flex-grow: 1 flex-grow: 1
// Responsiveness // Responsiveness
@@ -43,7 +44,7 @@ $level-item-spacing: ($block-spacing / 2) !default
// Responsiveness // Responsiveness
+mobile +mobile
&:not(:last-child) &:not(:last-child)
margin-bottom: $level-item-spacing margin-bottom: var(--level-item-spacing)
.level-left, .level-left,
.level-right .level-right
@@ -57,7 +58,7 @@ $level-item-spacing: ($block-spacing / 2) !default
// Responsiveness // Responsiveness
+tablet +tablet
&:not(:last-child) &:not(:last-child)
+ltr-property("margin", $level-item-spacing) +ltr-property("margin", var(--level-item-spacing))
.level-left .level-left
align-items: center align-items: center

21
sass/components/media.sass
View File

@@ -1,15 +1,19 @@
$media-border-color: bulmaRgba($border, 0.5) !default $media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
$media-spacing: 1rem $media-spacing: 1rem
$media-spacing-large: 1.5rem $media-spacing-large: 1.5rem
.media .media
--media-border-color: #{$media-border-color}
--media-spacing: #{$media-spacing}
--media-spacing-large: #{$media-spacing-large}
align-items: flex-start align-items: flex-start
display: flex display: flex
text-align: inherit text-align: inherit
.content:not(:last-child) .content:not(:last-child)
margin-bottom: 0.75rem margin-bottom: 0.75rem
.media .media
border-top: 1px solid $media-border-color border-top: 1px solid var(--media-border-color)
display: flex display: flex
padding-top: 0.75rem padding-top: 0.75rem
.content:not(:last-child), .content:not(:last-child),
@@ -20,14 +24,13 @@ $media-spacing-large: 1.5rem
& + .media & + .media
margin-top: 0.5rem margin-top: 0.5rem
& + .media & + .media
border-top: 1px solid $media-border-color border-top: 1px solid var(--media-border-color)
margin-top: $media-spacing margin-top: var(--media-spacing)
padding-top: $media-spacing padding-top: var(--media-spacing)
// Sizes // Sizes
&.is-large &.is-large
& + .media & + .media
margin-top: $media-spacing-large --media-spacing: var(--media-spacing-large)
padding-top: $media-spacing-large
.media-left, .media-left,
.media-right .media-right
@@ -36,10 +39,10 @@ $media-spacing-large: 1.5rem
flex-shrink: 0 flex-shrink: 0
.media-left .media-left
+ltr-property("margin", $media-spacing) +ltr-property("margin", var(--media-spacing))
.media-right .media-right
+ltr-property("margin", $media-spacing, false) +ltr-property("margin", var(--media-spacing), false)
.media-content .media-content
flex-basis: auto flex-basis: auto

76
sass/components/menu.sass
View File

@@ -1,57 +1,77 @@
$menu-item-color: $text !default $menu-font-size: var(--size-normal, #{$size-normal}) !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default $menu-item-color: var(--text, #{$text}) !default
$menu-item-radius: var(--radius-small, #{$radius-small}) !default
$menu-item-hover-color: var(--text-strong, #{$text-strong}) !default
$menu-item-hover-background-color: var(--background, #{$background}) !default
$menu-item-active-color: var(--link-invert, #{$link-invert}) !default
$menu-item-active-background-color: var(--link, #{$link}) !default
$menu-list-border-left: 1px solid var(--border, #{$border}) !default
$menu-list-line-height: 1.25 !default $menu-list-line-height: 1.25 !default
$menu-list-link-padding: 0.5em 0.75em !default $menu-list-link-padding: 0.5em 0.75em !default
$menu-nested-list-margin: 0.75em !default $menu-nested-list-margin: 0.75em !default
$menu-nested-list-padding-left: 0.75em !default $menu-nested-list-padding-left: 0.75em !default
$menu-label-color: $text-light !default $menu-label-color: var(--text-light, #{$text-light}) !default
$menu-label-font-size: 0.75em !default $menu-label-font-size: 0.75em !default
$menu-label-letter-spacing: 0.1em !default $menu-label-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default $menu-label-spacing: 1em !default
.menu .menu
font-size: $size-normal --menu-font-size: #{$content-font-size}
--menu-list-line-height: #{$menu-list-line-height}
--menu-item-radius: #{$menu-item-radius}
--menu-item-color: #{$menu-item-color}
--menu-list-link-padding: #{$menu-list-link-padding}
--menu-item-hover-background-color: #{$menu-item-hover-background-color}
--menu-item-hover-color: #{$menu-item-hover-color}
--menu-item-active-background-color: #{$menu-item-active-background-color}
--menu-item-active-color: #{$menu-item-active-color}
--menu-list-border-left: #{$menu-list-border-left}
--menu-nested-list-padding-left: #{$menu-nested-list-padding-left}
--menu-nested-list-margin: #{$menu-nested-list-margin}
--menu-label-color: #{$menu-label-color}
--menu-label-font-size: #{$menu-label-font-size}
--menu-label-letter-spacing: #{$menu-label-letter-spacing}
--menu-label-spacing: #{$menu-label-spacing}
--menu-label-spacing: #{$menu-label-spacing}
font-size: var(--menu-font-size)
// Sizes // Sizes
&.is-small &.is-small
font-size: $size-small --menu-font-size: var(--size-small, #{$size-small})
&.is-medium &.is-medium
font-size: $size-medium --menu-font-size: var(--size-medium, #{$size-medium})
&.is-large &.is-large
font-size: $size-large --menu-font-size: var(--size-large, #{$size-large})
.menu-list .menu-list
line-height: $menu-list-line-height line-height: var(--menu-list-line-height)
a a
border-radius: $menu-item-radius border-radius: var(--menu-item-radius)
color: $menu-item-color color: var(--menu-item-color)
display: block display: block
padding: $menu-list-link-padding padding: var(--menu-list-link-padding)
&:hover &:hover
background-color: $menu-item-hover-background-color background-color: var(--menu-item-hover-background-color)
color: $menu-item-hover-color color: var(--menu-item-hover-color)
// Modifiers // Modifiers
&.is-active &.is-active
background-color: $menu-item-active-background-color background-color: var(--menu-item-active-background-color)
color: $menu-item-active-color color: var(--menu-item-active-color)
li li
ul ul
+ltr-property("border", $menu-list-border-left, false) +ltr-property("border", var(--menu-list-border-left), false)
margin: $menu-nested-list-margin margin: var(--menu-nested-list-margin)
+ltr-property("padding", $menu-nested-list-padding-left, false) +ltr-property("padding", var(--menu-nested-list-padding-left), false)
.menu-label .menu-label
color: $menu-label-color color: var(--menu-label-color)
font-size: $menu-label-font-size font-size: var(--menu-label-font-size)
letter-spacing: $menu-label-letter-spacing letter-spacing: var(--menu-label-letter-spacing)
text-transform: uppercase text-transform: uppercase
&:not(:first-child) &:not(:first-child)
margin-top: $menu-label-spacing margin-top: var(--menu-label-spacing)
&:not(:last-child) &:not(:last-child)
margin-bottom: $menu-label-spacing margin-bottom: var(--menu-label-spacing)

3
sass/components/message.sass
View File

@@ -28,6 +28,7 @@ $message-colors: $colors !default
--message-header-color: #{$message-header-color} --message-header-color: #{$message-header-color}
--message-header-weight: #{$message-header-weight} --message-header-weight: #{$message-header-weight}
--message-header-padding: #{$message-header-padding} --message-header-padding: #{$message-header-padding}
--message-header-radius: #{$message-header-radius}
--message-body-border-color: #{$message-body-border-color} --message-body-border-color: #{$message-body-border-color}
--message-body-radius: #{$message-body-radius} --message-body-radius: #{$message-body-radius}
--message-body-border-width: #{$message-body-border-width} --message-body-border-width: #{$message-body-border-width}
@@ -86,7 +87,7 @@ $message-colors: $colors !default
.message-header .message-header
align-items: center align-items: center
background-color: var(--message-header-background-color) background-color: var(--message-header-background-color)
border-radius: $message-header-radius $message-header-radius 0 0 border-radius: var(--message-header-radius) var(--message-header-radius) 0 0
color: var(--message-header-color) color: var(--message-header-color)
display: flex display: flex
font-weight: var(--message-header-weight) font-weight: var(--message-header-weight)

12
sass/elements/other.sass
View File

@@ -12,8 +12,9 @@
text-transform: uppercase text-transform: uppercase
.highlight .highlight
--highlight-font-weight: var(--weight-normal, #{$weight-normal})
@extend %block @extend %block
font-weight: $weight-normal font-weight: var(--highlight-font-weight)
max-width: 100% max-width: 100%
overflow: hidden overflow: hidden
padding: 0 padding: 0
@@ -25,11 +26,14 @@
@extend %loader @extend %loader
.number .number
--number-background: var(--background, #{$background})
--number-radius-rounded: var(--radius-rounded, #{$radius-rounded})
--number-font-size: var(--size-medium, #{$size-medium})
align-items: center align-items: center
background-color: $background background-color: var(--number-background)
border-radius: $radius-rounded border-radius: var(--number-radius-rounded)
display: inline-flex display: inline-flex
font-size: $size-medium font-size: var(--number-font-size)
height: 2em height: 2em
justify-content: center justify-content: center
margin-right: 1.5rem margin-right: 1.5rem

1
sass/themes/default.sass
View File

@@ -89,6 +89,7 @@
--scheme-invert-ter: #{$scheme-invert-ter} --scheme-invert-ter: #{$scheme-invert-ter}
--background: #{$background} --background: #{$background}
--border: #{$border} --border: #{$border}
--border-rgb: #{$border-rgb}
--border-hover: #{$border-hover} --border-hover: #{$border-hover}
--border-light: #{$border-light} --border-light: #{$border-light}
--border-light-hover: #{$border-light-hover} --border-light-hover: #{$border-light-hover}

1
sass/utilities/derived-variables.scss
View File

@@ -54,6 +54,7 @@ $scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
$background : var(--white-ter, #{$white-ter}) !default; $background : var(--white-ter, #{$white-ter}) !default;
$border : var(--grey-lighter, #{$grey-lighter}) !default; $border : var(--grey-lighter, #{$grey-lighter}) !default;
$border-rgb : bulmaToRGB($grey-lighter) !default;
$border-hover : var(--grey-light, #{$grey-light}) !default; $border-hover : var(--grey-light, #{$grey-light}) !default;
$border-light : var(--grey-lightest, #{$grey-lightest}) !default; $border-light : var(--grey-lightest, #{$grey-lightest}) !default;
$border-light-hover: var(--grey-light, #{$grey-light}) !default; $border-light-hover: var(--grey-light, #{$grey-light}) !default;

20
sass/utilities/functions.sass
View File

@@ -133,3 +133,23 @@
@function bulmaToRGB($color) @function bulmaToRGB($color)
@return red($color), green($color), blue($color) @return red($color), green($color), blue($color)
=registerCSSVar($name, $value, $at-root: true)
@if $at-root
@at-root :root
--#{$name}: #{$value}
@else
--#{$name}: #{$value}
=registerCSSVars($list, $at-root: true)
@if $at-root
@at-root :root
@each $name, $value in $list
--#{$name}: #{$value}
@else
@each $name, $value in $list
--#{$name}: #{$value}
@function assignCSSVar($name, $fallback)
// +registerCSSVar($name, $fallback)
@return var(--#{$name}, #{$fallback})

10
sass/utilities/mixins.sass
View File

@@ -194,9 +194,9 @@
@extend %unselectable @extend %unselectable
-moz-appearance: none -moz-appearance: none
-webkit-appearance: none -webkit-appearance: none
background-color: bulmaRgba($scheme-invert, 0.2) background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2)
border: none border: none
border-radius: $radius-rounded border-radius: var(--radius-rounded, #{$radius-rounded})
cursor: pointer cursor: pointer
pointer-events: auto pointer-events: auto
display: inline-block display: inline-block
@@ -214,7 +214,7 @@
width: 20px width: 20px
&::before, &::before,
&::after &::after
background-color: $scheme-main background-color: var(--scheme-main, #{$scheme-main})
content: "" content: ""
display: block display: block
left: 50% left: 50%
@@ -230,9 +230,9 @@
width: 2px width: 2px
&:hover, &:hover,
&:focus &:focus
background-color: bulmaRgba($scheme-invert, 0.3) background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
&:active &:active
background-color: bulmaRgba($scheme-invert, 0.4) background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
// Sizes // Sizes
&.is-small &.is-small
height: 16px height: 16px