library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update elements to CSS variables

Browse Source
This commit is contained in:
Jeremy Thomas 2020-08-16 00:40:51 +01:00
parent f11812ab86
commit 340f13d168
7 changed files with 158 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
sass/elements/content.sass
View File

@ -1,24 +1,43 @@
$content-heading-color: $text-strong !default $content-font-size: var(--size-normal, #{$size-normal}) !default
$content-heading-weight: $weight-semibold !default
$content-heading-color: var(--text-strong, #{$text-strong}) !default
$content-heading-weight: var(--weight-semibold, #{$weight-semibold}) !default
$content-heading-line-height: 1.125 !default $content-heading-line-height: 1.125 !default
$content-blockquote-background-color: $background !default $content-blockquote-background-color: var(--background, #{$background}) !default
$content-blockquote-border-left: 5px solid $border !default $content-blockquote-border-left: 5px solid var(--border, #{$border}) !default
$content-blockquote-padding: 1.25em 1.5em !default $content-blockquote-padding: 1.25em 1.5em !default
$content-pre-padding: 1.25em 1.5em !default $content-pre-padding: 1.25em 1.5em !default
$content-table-cell-border: 1px solid $border !default $content-table-cell-border: 1px solid var(--border, #{$border}) !default
$content-table-cell-border-width: 0 0 1px !default $content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default $content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default $content-table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
$content-table-head-cell-border-width: 0 0 2px !default $content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default $content-table-head-cell-color: var(--text-strong, #{$text-strong}) !default
$content-table-foot-cell-border-width: 2px 0 0 !default $content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default $content-table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
.content .content
--content-font-size: #{$content-font-size}
--content-heading-color: #{$content-heading-color}
--content-heading-weight: #{$content-heading-weight}
--content-heading-line-height: #{$content-heading-line-height}
--content-blockquote-background-color: #{$content-blockquote-background-color}
--content-blockquote-border-left: #{$content-blockquote-border-left}
--content-blockquote-padding: #{$content-blockquote-padding}
--content-pre-padding: #{$content-pre-padding}
--content-table-cell-border: #{$content-table-cell-border}
--content-table-cell-border-width: #{$content-table-cell-border-width}
--content-table-cell-padding: #{$content-table-cell-padding}
--content-table-cell-heading-color: #{$content-table-cell-heading-color}
--content-table-head-cell-border-width: #{$content-table-head-cell-border-width}
--content-table-head-cell-color: #{$content-table-head-cell-color}
--content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width}
--content-table-foot-cell-color: #{$content-table-foot-cell-color}
@extend %block @extend %block
font-size: var(--content-font-size)
// Inline // Inline
li + li li + li
margin-top: 0.25em margin-top: 0.25em
@ -38,9 +57,9 @@ $content-table-foot-cell-color: $text-strong !default
h4, h4,
h5, h5,
h6 h6
color: $content-heading-color color: var(--content-heading-color)
font-weight: $content-heading-weight font-weight: var(--content-heading-weight)
line-height: $content-heading-line-height line-height: var(--content-heading-line-height)
h1 h1
font-size: 2em font-size: 2em
margin-bottom: 0.5em margin-bottom: 0.5em
@ -66,9 +85,9 @@ $content-table-foot-cell-color: $text-strong !default
font-size: 1em font-size: 1em
margin-bottom: 1em margin-bottom: 1em
blockquote blockquote
background-color: $content-blockquote-background-color background-color: var(--content-blockquote-background-color)
+ltr-property("border", $content-blockquote-border-left, false) +ltr-property("border", var(--content-blockquote-border-left), false)
padding: $content-blockquote-padding padding: var(--content-blockquote-padding)
ol ol
list-style-position: outside list-style-position: outside
+ltr-property("margin", 2em, false) +ltr-property("margin", 2em, false)
@ -109,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
pre pre
+overflow-touch +overflow-touch
overflow-x: auto overflow-x: auto
padding: $content-pre-padding padding: var(--content-pre-padding)
white-space: pre white-space: pre
word-wrap: normal word-wrap: normal
sup, sup,
@ -119,24 +138,24 @@ $content-table-foot-cell-color: $text-strong !default
width: 100% width: 100%
td, td,
th th
border: $content-table-cell-border border: var(--content-table-cell-border)
border-width: $content-table-cell-border-width border-width: var(--content-table-cell-border-width)
padding: $content-table-cell-padding padding: var(--content-table-cell-padding)
vertical-align: top vertical-align: top
th th
color: $content-table-cell-heading-color color: var(--content-table-cell-heading-color)
&:not([align]) &:not([align])
text-align: inherit text-align: inherit
thead thead
td, td,
th th
border-width: $content-table-head-cell-border-width border-width: var(--content-table-head-cell-border-width)
color: $content-table-head-cell-color color: var(--content-table-head-cell-color)
tfoot tfoot
td, td,
th th
border-width: $content-table-foot-cell-border-width border-width: var(--content-table-foot-cell-border-width)
color: $content-table-foot-cell-color color: var(--content-table-foot-cell-color)
tbody tbody
tr tr
&:last-child &:last-child
@ -148,8 +167,8 @@ $content-table-foot-cell-color: $text-strong !default
margin-top: 0 margin-top: 0
// Sizes // Sizes
&.is-small &.is-small
font-size: $size-small --content-font-size: var(--size-small, #{$size-small})
&.is-medium &.is-medium
font-size: $size-medium --content-font-size: var(--size-medium, #{$size-medium})
&.is-large &.is-large
font-size: $size-large --content-font-size: var(--size-large, #{$size-large})

19
sass/elements/icon.sass
View File

@ -4,18 +4,21 @@ $icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default $icon-dimensions-large: 3rem !default
.icon .icon
--icon-dimensions: #{$icon-dimensions}
--icon-dimensions-small: #{$icon-dimensions-small}
--icon-dimensions-medium: #{$icon-dimensions-medium}
--icon-dimensions-large: #{$icon-dimensions-large}
align-items: center align-items: center
display: inline-flex display: inline-flex
justify-content: center justify-content: center
height: $icon-dimensions height: var(--icon-dimensions)
width: $icon-dimensions width: var(--icon-dimensions)
// Sizes // Sizes
&.is-small &.is-small
height: $icon-dimensions-small --icon-dimensions: var(--icon-dimensions-small)
width: $icon-dimensions-small
&.is-medium &.is-medium
height: $icon-dimensions-medium --icon-dimensions: var(--icon-dimensions-medium)
width: $icon-dimensions-medium
&.is-large &.is-large
height: $icon-dimensions-large --icon-dimensions: var(--icon-dimensions-large)
width: $icon-dimensions-large

2
sass/elements/image.sass
View File

@ -8,7 +8,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
height: auto height: auto
width: 100% width: 100%
&.is-rounded &.is-rounded
border-radius: $radius-rounded border-radius: var(--radius-rounded, #{$radius-rounded})
&.is-fullwidth &.is-fullwidth
width: 100% width: 100%
// Ratio // Ratio

31
sass/elements/notification.sass
View File

@ -1,19 +1,26 @@
$notification-background-color: $background !default $notification-background-color: var(--background, #{$background}) !default
$notification-code-background-color: $scheme-main !default $notification-code-background-color: var(--scheme-main, #{$scheme-main}) !default
$notification-radius: $radius !default $notification-radius: var(--radius, #{$radius}) !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
.notification .notification
--notification-background-color: #{$notification-background-color}
--notification-radius: #{$notification-radius}
--notification-padding-ltr: #{$notification-padding-ltr}
--notification-padding-rtl: #{$notification-padding-rtl}
--notification-code-background-color: #{$notification-code-background-color}
@extend %block @extend %block
background-color: $notification-background-color background-color: var(--notification-background-color)
border-radius: $notification-radius border-radius: var(--notification-radius)
color: var(--notification-color)
position: relative position: relative
+ltr +ltr
padding: $notification-padding-ltr padding: var(--notification-padding-ltr)
+rtl +rtl
padding: $notification-padding-rtl padding: var(--notification-padding-rtl)
a:not(.button):not(.dropdown-item) a:not(.button):not(.dropdown-item)
color: currentColor color: currentColor
text-decoration: underline text-decoration: underline
@ -21,7 +28,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
color: currentColor color: currentColor
code, code,
pre pre
background: $notification-code-background-color background: var(--notification-code-background-color)
pre code pre code
background: transparent background: transparent
& > .delete & > .delete
@ -37,12 +44,12 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
background-color: $color --notification-background-color: var(--#{$name}, #{$color})
color: $color-invert --notification-color: var(--#{$name}-invert, #{$color-invert})
// If light and dark colors are provided // If light and dark colors are provided
@if length($pair) >= 4 @if length($pair) >= 4
$color-light: nth($pair, 3) $color-light: nth($pair, 3)
$color-dark: nth($pair, 4) $color-dark: nth($pair, 4)
&.is-light &.is-light
background-color: $color-light --notification-background-color: var(--#{$name}-light, #{$color-light})
color: $color-dark --notification-color: var(--#{$name}-dark, #{$color-dark})

46
sass/elements/progress.sass
View File

@ -1,49 +1,57 @@
$progress-bar-background-color: $border-light !default $progress-height: var(--size-normal, #{$size-normal}) !default
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default $progress-bar-background-color: var(--border-light, #{$border-light}) !default
$progress-value-background-color: var(--text, #{$text}) !default
$progress-border-radius: var(--radius-rounded, #{$radius-rounded}) !default
$progress-indeterminate-duration: 1.5s !default $progress-indeterminate-duration: 1.5s !default
.progress .progress
--progress-border-radius: #{$progress-border-radius}
--progress-bar-background-color: #{$progress-bar-background-color}
--progress-height: #{$progress-height}
--progress-value-background-color: #{$progress-value-background-color}
--progress-indeterminate-duration: #{$progress-indeterminate-duration}
@extend %block @extend %block
-moz-appearance: none -moz-appearance: none
-webkit-appearance: none -webkit-appearance: none
border: none border: none
border-radius: $progress-border-radius border-radius: var(--progress-border-radius)
display: block display: block
height: $size-normal height: var(--progress-height)
overflow: hidden overflow: hidden
padding: 0 padding: 0
width: 100% width: 100%
&::-webkit-progress-bar &::-webkit-progress-bar
background-color: $progress-bar-background-color background-color: var(--progress-bar-background-color)
&::-webkit-progress-value &::-webkit-progress-value
background-color: $progress-value-background-color background-color: var(--progress-value-background-color)
&::-moz-progress-bar &::-moz-progress-bar
background-color: $progress-value-background-color background-color: var(--progress-value-background-color)
&::-ms-fill &::-ms-fill
background-color: $progress-value-background-color background-color: var(--progress-value-background-color)
border: none border: none
// Colors // Colors
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
&.is-#{$name} &.is-#{$name}
&::-webkit-progress-value &::-webkit-progress-value
background-color: $color --progress-value-background-color: var(--#{$name}, #{$color})
&::-moz-progress-bar &::-moz-progress-bar
background-color: $color --progress-value-background-color: var(--#{$name}, #{$color})
&::-ms-fill &::-ms-fill
background-color: $color --progress-value-background-color: var(--#{$name}, #{$color})
&:indeterminate &:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%) background-image: linear-gradient(to right, var(--#{$name}, #{$color}) 30%, var(--progress-bar-background-color) 30%)
&:indeterminate &:indeterminate
animation-duration: $progress-indeterminate-duration animation-duration: var(--progress-indeterminate-duration)
animation-iteration-count: infinite animation-iteration-count: infinite
animation-name: moveIndeterminate animation-name: moveIndeterminate
animation-timing-function: linear animation-timing-function: linear
background-color: $progress-bar-background-color background-color: var(--progress-bar-background-color)
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%) background-image: linear-gradient(to right, var(--text, #{$text}) 30%, var(--progress-bar-background-color) 30%)
background-position: top left background-position: top left
background-repeat: no-repeat background-repeat: no-repeat
background-size: 150% 150% background-size: 150% 150%
@ -56,11 +64,11 @@ $progress-indeterminate-duration: 1.5s !default
// Sizes // Sizes
&.is-small &.is-small
height: $size-small --progress-height: var(--size-small, #{$size-small})
&.is-medium &.is-medium
height: $size-medium --progress-height: var(--size-medium, #{$size-medium})
&.is-large &.is-large
height: $size-large --progress-height: var(--size-large, #{$size-large})
@keyframes moveIndeterminate @keyframes moveIndeterminate
from from

91
sass/elements/table.sass
View File

@ -1,87 +1,106 @@
$table-color: $text-strong !default $table-color: var(--text-strong, #{$text-strong}) !default
$table-background-color: $scheme-main !default $table-background-color: var(--scheme-main, #{$scheme-main}) !default
$table-cell-border: 1px solid $border !default $table-cell-border: 1px solid var(--border, #{$border}) !default
$table-cell-border-width: 0 0 1px !default $table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default $table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default $table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
$table-head-cell-border-width: 0 0 2px !default $table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default $table-head-cell-color: var(--text-strong, #{$text-strong}) !default
$table-foot-cell-border-width: 2px 0 0 !default $table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default $table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
$table-head-background-color: transparent !default $table-head-background-color: transparent !default
$table-body-background-color: transparent !default $table-body-background-color: transparent !default
$table-foot-background-color: transparent !default $table-foot-background-color: transparent !default
$table-row-hover-background-color: $scheme-main-bis !default $table-row-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$table-row-active-background-color: $primary !default $table-row-active-background-color: var(--primary, #{$primary}) !default
$table-row-active-color: $primary-invert !default $table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
$table-striped-row-even-background-color: $scheme-main-bis !default $table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default $table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
.table .table
--table-body-background-color: #{$table-body-background-color}
--table-color: #{$table-color}
--table-cell-border-width: #{$table-cell-border-width}
--table-cell-border: #{$table-cell-border}
--table-cell-heading-color: #{$table-cell-heading-color}
--table-cell-padding: #{$table-cell-padding}
--table-foot-background-color: #{$table-foot-background-color}
--table-foot-cell-border-width: #{$table-foot-cell-border-width}
--table-foot-cell-color: #{$table-foot-cell-color}
--table-head-background-color: #{$table-head-background-color}
--table-head-cell-border-width: #{$table-head-cell-border-width}
--table-head-cell-color: #{$table-head-cell-color}
--table-row-active-background-color: #{$table-row-active-background-color}
--table-row-active-color: #{$table-row-active-color}
--table-row-hover-background-color: #{$table-row-hover-background-color}
--table-row-hover-background-color: #{$table-row-hover-background-color}
--table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
--table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
@extend %block @extend %block
background-color: $table-background-color background-color: var(--table-body-background-color)
color: $table-color color: var(--table-color)
td, td,
th th
border: $table-cell-border border: var(--table-cell-border)
border-width: $table-cell-border-width border-width: var(--table-cell-border-width)
padding: $table-cell-padding padding: var(--table-cell-padding)
vertical-align: top vertical-align: top
// Colors // Colors
@each $name, $pair in $colors @each $name, $pair in $colors
$color: nth($pair, 1) $color: nth($pair, 1)
$color-invert: nth($pair, 2) $color-invert: nth($pair, 2)
&.is-#{$name} &.is-#{$name}
background-color: $color background-color: var(--#{$name}, #{$color})
border-color: $color border-color: var(--#{$name}, #{$color})
color: $color-invert color: var(--#{$name}-invert, #{$color-invert})
// Modifiers // Modifiers
&.is-narrow &.is-narrow
white-space: nowrap white-space: nowrap
width: 1% width: 1%
&.is-selected &.is-selected
background-color: $table-row-active-background-color background-color: var(--table-row-active-background-color)
color: $table-row-active-color color: var(--table-row-active-color)
a, a,
strong strong
color: currentColor color: currentColor
&.is-vcentered &.is-vcentered
vertical-align: middle vertical-align: middle
th th
color: $table-cell-heading-color color: var(--table-cell-heading-color)
&:not([align]) &:not([align])
text-align: inherit text-align: inherit
tr tr
&.is-selected &.is-selected
background-color: $table-row-active-background-color background-color: var(--table-row-active-background-color)
color: $table-row-active-color color: var(--table-row-active-color)
a, a,
strong strong
color: currentColor color: currentColor
td, td,
th th
border-color: $table-row-active-color border-color: var(--table-row-active-color)
color: currentColor color: currentColor
thead thead
background-color: $table-head-background-color background-color: var(--table-head-background-color)
td, td,
th th
border-width: $table-head-cell-border-width border-width: var(--table-head-cell-border-width)
color: $table-head-cell-color color: var(--table-head-cell-color)
tfoot tfoot
background-color: $table-foot-background-color background-color: var(--table-foot-background-color)
td, td,
th th
border-width: $table-foot-cell-border-width border-width: var(--table-foot-cell-border-width)
color: $table-foot-cell-color color: var(--table-foot-cell-color)
tbody tbody
background-color: $table-body-background-color background-color: var(--table-body-background-color)
tr tr
&:last-child &:last-child
td, td,
@ -103,14 +122,14 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
tbody tbody
tr:not(.is-selected) tr:not(.is-selected)
&:hover &:hover
background-color: $table-row-hover-background-color background-color: var(--table-row-hover-background-color)
&.is-striped &.is-striped
tbody tbody
tr:not(.is-selected) tr:not(.is-selected)
&:hover &:hover
background-color: $table-row-hover-background-color background-color: var(--table-row-hover-background-color)
&:nth-child(even) &:nth-child(even)
background-color: $table-striped-row-even-hover-background-color background-color: var(--table-striped-row-even-hover-background-color)
&.is-narrow &.is-narrow
td, td,
th th
@ -119,7 +138,7 @@ $table-striped-row-even-hover-background-color: $scheme-main-ter !default
tbody tbody
tr:not(.is-selected) tr:not(.is-selected)
&:nth-child(even) &:nth-child(even)
background-color: $table-striped-row-even-background-color background-color: var(--table-striped-row-even-background-color)
.table-container .table-container
@extend %block @extend %block

1
sass/utilities/functions.sass
View File

@ -117,7 +117,6 @@
@return $color @return $color
@function bulmaRgba($color, $alpha) @function bulmaRgba($color, $alpha)
@debug $color
@if type-of($color) != 'color' @if type-of($color) != 'color'
@return $color @return $color
@return rgba($color, $alpha) @return rgba($color, $alpha)