Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

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})