0ct0pu5/bulma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

68
sass/components/dropdown.sass
View file

@ -1,23 +1,41 @@
$dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $scheme-main !default
$dropdown-content-arrow: $link !default
$dropdown-content-background-color: var(--scheme-main, #{$scheme-main}) !default
$dropdown-content-arrow: var(--link, #{$link}) !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-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-radius: var(--radius, #{$radius}) !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-item-color: $text !default
$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default
$dropdown-item-color: var(--text, #{$text}) !default
$dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
$dropdown-item-hover-background-color: var(--background, #{$background}) !default
$dropdown-item-active-color: var(--link-invert, #{$link-invert}) !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-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
position: relative
vertical-align: top
@ -32,28 +50,28 @@ $dropdown-divider-background-color: $border-light !default
&.is-up
.dropdown-menu
bottom: 100%
padding-bottom: $dropdown-content-offset
padding-bottom: var(--dropdown-content-offset)
padding-top: initial
top: auto
.dropdown-menu
display: none
+ltr-position(0, false)
min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset
min-width: var(--dropdown-menu-min-width)
padding-top: var(--dropdown-content-offset)
position: absolute
top: 100%
z-index: $dropdown-content-z
z-index: var(--dropdown-content-z)
.dropdown-content
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
padding-bottom: $dropdown-content-padding-bottom
padding-top: $dropdown-content-padding-top
background-color: var(--dropdown-content-background-color)
border-radius: var(--dropdown-content-radius)
box-shadow: var(--dropdown-content-shadow)
padding-bottom: var(--dropdown-content-padding-bottom)
padding-top: var(--dropdown-content-padding-top)
.dropdown-item
color: $dropdown-item-color
color: var(--dropdown-item-color)
display: block
font-size: 0.875rem
line-height: 1.5
@ -67,14 +85,14 @@ button.dropdown-item
white-space: nowrap
width: 100%
&:hover
background-color: $dropdown-item-hover-background-color
color: $dropdown-item-hover-color
background-color: var(--dropdown-item-hover-background-color)
color: var(--dropdown-item-hover-color)
&.is-active
background-color: $dropdown-item-active-background-color
color: $dropdown-item-active-color
background-color: var(--dropdown-item-active-background-color)
color: var(--dropdown-item-active-color)
.dropdown-divider
background-color: $dropdown-divider-background-color
background-color: var(--dropdown-divider-background-color)
border: none
display: block
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-item-spacing: #{$level-item-spacing}
@extend %block
align-items: center
justify-content: space-between
@ -20,7 +21,7 @@ $level-item-spacing: ($block-spacing / 2) !default
.level-item
&:not(:last-child)
margin-bottom: 0
+ltr-property("margin", $level-item-spacing)
+ltr-property("margin", var(--level-item-spacing))
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
@ -43,7 +44,7 @@ $level-item-spacing: ($block-spacing / 2) !default
// Responsiveness
+mobile
&:not(:last-child)
margin-bottom: $level-item-spacing
margin-bottom: var(--level-item-spacing)
.level-left,
.level-right
@ -57,7 +58,7 @@ $level-item-spacing: ($block-spacing / 2) !default
// Responsiveness
+tablet
&:not(:last-child)
+ltr-property("margin", $level-item-spacing)
+ltr-property("margin", var(--level-item-spacing))
.level-left
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-large: 1.5rem
.media
--media-border-color: #{$media-border-color}
--media-spacing: #{$media-spacing}
--media-spacing-large: #{$media-spacing-large}
align-items: flex-start
display: flex
text-align: inherit
.content:not(:last-child)
margin-bottom: 0.75rem
.media
border-top: 1px solid $media-border-color
border-top: 1px solid var(--media-border-color)
display: flex
padding-top: 0.75rem
.content:not(:last-child),
@ -20,14 +24,13 @@ $media-spacing-large: 1.5rem
& + .media
margin-top: 0.5rem
& + .media
border-top: 1px solid $media-border-color
margin-top: $media-spacing
padding-top: $media-spacing
border-top: 1px solid var(--media-border-color)
margin-top: var(--media-spacing)
padding-top: var(--media-spacing)
// Sizes
&.is-large
& + .media
margin-top: $media-spacing-large
padding-top: $media-spacing-large
--media-spacing: var(--media-spacing-large)
.media-left,
.media-right
@ -36,10 +39,10 @@ $media-spacing-large: 1.5rem
flex-shrink: 0
.media-left
+ltr-property("margin", $media-spacing)
+ltr-property("margin", var(--media-spacing))
.media-right
+ltr-property("margin", $media-spacing, false)
+ltr-property("margin", var(--media-spacing), false)
.media-content
flex-basis: auto

76
sass/components/menu.sass
View file

@ -1,57 +1,77 @@
$menu-item-color: $text !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-font-size: var(--size-normal, #{$size-normal}) !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-link-padding: 0.5em 0.75em !default
$menu-nested-list-margin: 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-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default
.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
&.is-small
font-size: $size-small
--menu-font-size: var(--size-small, #{$size-small})
&.is-medium
font-size: $size-medium
--menu-font-size: var(--size-medium, #{$size-medium})
&.is-large
font-size: $size-large
--menu-font-size: var(--size-large, #{$size-large})
.menu-list
line-height: $menu-list-line-height
line-height: var(--menu-list-line-height)
a
border-radius: $menu-item-radius
color: $menu-item-color
border-radius: var(--menu-item-radius)
color: var(--menu-item-color)
display: block
padding: $menu-list-link-padding
padding: var(--menu-list-link-padding)
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
background-color: var(--menu-item-hover-background-color)
color: var(--menu-item-hover-color)
// Modifiers
&.is-active
background-color: $menu-item-active-background-color
color: $menu-item-active-color
background-color: var(--menu-item-active-background-color)
color: var(--menu-item-active-color)
li
ul
+ltr-property("border", $menu-list-border-left, false)
margin: $menu-nested-list-margin
+ltr-property("padding", $menu-nested-list-padding-left, false)
+ltr-property("border", var(--menu-list-border-left), false)
margin: var(--menu-nested-list-margin)
+ltr-property("padding", var(--menu-nested-list-padding-left), false)
.menu-label
color: $menu-label-color
font-size: $menu-label-font-size
letter-spacing: $menu-label-letter-spacing
color: var(--menu-label-color)
font-size: var(--menu-label-font-size)
letter-spacing: var(--menu-label-letter-spacing)
text-transform: uppercase
&:not(:first-child)
margin-top: $menu-label-spacing
margin-top: var(--menu-label-spacing)
&: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-weight: #{$message-header-weight}
--message-header-padding: #{$message-header-padding}
--message-header-radius: #{$message-header-radius}
--message-body-border-color: #{$message-body-border-color}
--message-body-radius: #{$message-body-radius}
--message-body-border-width: #{$message-body-border-width}
@ -86,7 +87,7 @@ $message-colors: $colors !default
.message-header
align-items: center
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)
display: flex
font-weight: var(--message-header-weight)

12
sass/elements/other.sass
View file

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

1
sass/themes/default.sass
View file

@ -89,6 +89,7 @@
--scheme-invert-ter: #{$scheme-invert-ter}
--background: #{$background}
--border: #{$border}
--border-rgb: #{$border-rgb}
--border-hover: #{$border-hover}
--border-light: #{$border-light}
--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;
$border : var(--grey-lighter, #{$grey-lighter}) !default;
$border-rgb : bulmaToRGB($grey-lighter) !default;
$border-hover : var(--grey-light, #{$grey-light}) !default;
$border-light : var(--grey-lightest, #{$grey-lightest}) !default;
$border-light-hover: var(--grey-light, #{$grey-light}) !default;

20
sass/utilities/functions.sass
View file

@ -133,3 +133,23 @@
@function bulmaToRGB($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
-moz-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-radius: $radius-rounded
border-radius: var(--radius-rounded, #{$radius-rounded})
cursor: pointer
pointer-events: auto
display: inline-block
@ -214,7 +214,7 @@
width: 20px
&::before,
&::after
background-color: $scheme-main
background-color: var(--scheme-main, #{$scheme-main})
content: ""
display: block
left: 50%
@ -230,9 +230,9 @@
width: 2px
&:hover,
&:focus
background-color: bulmaRgba($scheme-invert, 0.3)
background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
&:active
background-color: bulmaRgba($scheme-invert, 0.4)
background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
// Sizes
&.is-small
height: 16px