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

31
sass/elements/notification.sass
View File

@ -1,19 +1,26 @@
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-background-color: var(--background, #{$background}) !default
$notification-code-background-color: var(--scheme-main, #{$scheme-main}) !default
$notification-radius: var(--radius, #{$radius}) !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-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
.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
background-color: $notification-background-color
border-radius: $notification-radius
background-color: var(--notification-background-color)
border-radius: var(--notification-radius)
color: var(--notification-color)
position: relative
+ltr
padding: $notification-padding-ltr
padding: var(--notification-padding-ltr)
+rtl
padding: $notification-padding-rtl
padding: var(--notification-padding-rtl)
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
@ -21,7 +28,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
color: currentColor
code,
pre
background: $notification-code-background-color
background: var(--notification-code-background-color)
pre code
background: transparent
& > .delete
@ -37,12 +44,12 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
--notification-background-color: var(--#{$name}, #{$color})
--notification-color: var(--#{$name}-invert, #{$color-invert})
// If light and dark colors are provided
@if length($pair) >= 4
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
--notification-background-color: var(--#{$name}-light, #{$color-light})
--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-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default
$progress-height: var(--size-normal, #{$size-normal}) !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
--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
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $progress-border-radius
border-radius: var(--progress-border-radius)
display: block
height: $size-normal
height: var(--progress-height)
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
background-color: $progress-bar-background-color
background-color: var(--progress-bar-background-color)
&::-webkit-progress-value
background-color: $progress-value-background-color
background-color: var(--progress-value-background-color)
&::-moz-progress-bar
background-color: $progress-value-background-color
background-color: var(--progress-value-background-color)
&::-ms-fill
background-color: $progress-value-background-color
background-color: var(--progress-value-background-color)
border: none
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
--progress-value-background-color: var(--#{$name}, #{$color})
&::-moz-progress-bar
background-color: $color
--progress-value-background-color: var(--#{$name}, #{$color})
&::-ms-fill
background-color: $color
--progress-value-background-color: var(--#{$name}, #{$color})
&: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
animation-duration: $progress-indeterminate-duration
animation-duration: var(--progress-indeterminate-duration)
animation-iteration-count: infinite
animation-name: moveIndeterminate
animation-timing-function: linear
background-color: $progress-bar-background-color
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
background-color: var(--progress-bar-background-color)
background-image: linear-gradient(to right, var(--text, #{$text}) 30%, var(--progress-bar-background-color) 30%)
background-position: top left
background-repeat: no-repeat
background-size: 150% 150%
@ -56,11 +64,11 @@ $progress-indeterminate-duration: 1.5s !default
// Sizes
&.is-small
height: $size-small
--progress-height: var(--size-small, #{$size-small})
&.is-medium
height: $size-medium
--progress-height: var(--size-medium, #{$size-medium})
&.is-large
height: $size-large
--progress-height: var(--size-large, #{$size-large})
@keyframes moveIndeterminate
from

91
sass/elements/table.sass
View File

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

1
sass/utilities/functions.sass
View File

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