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

Move CSS variables to message scope

Browse Source
This commit is contained in:
Jeremy Thomas
2020-08-15 09:36:21 +01:00
parent 0e4eda2d81
commit eef8f5577f
9 changed files with 120 additions and 11466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
sass/components/message.sass
View File

@@ -1,29 +1,46 @@
$message-background-color: $background !default
$message-radius: $radius !default
$message-background-color: var(--background, #{$background}) !default
$message-font-size: var(--size-normal, #{$size-normal}) !default
$message-radius: var(--radius, #{$radius}) !default
$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-background-color: var(--text, #{$text}) !default
$message-header-color: var(--text-invert, #{$text-invert}) !default
$message-header-weight: var(--weight-bold, #{$weight-bold}) !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default
$message-header-radius: var(--radius, #{$radius}) !default
$message-body-border-color: $border !default
$message-body-border-color: var(--border, #{$border}) !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-color: var(--text, #{$text}) !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default
$message-body-radius: var(--radius, #{$radius}) !default
$message-body-pre-background-color: $scheme-main !default
$message-body-pre-background-color: var(--scheme-main, #{$scheme-main}) !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
$message-colors: $colors !default
.message
--message-background-color: #{$message-background-color}
--message-font-size: #{$message-font-size}
--message-radius: #{$message-radius}
--message-header-background-color: #{$message-header-background-color}
--message-header-color: #{$message-header-color}
--message-header-weight: #{$message-header-weight}
--message-header-padding: #{$message-header-padding}
--message-body-border-color: #{$message-body-border-color}
--message-body-radius: #{$message-body-radius}
--message-body-border-width: #{$message-body-border-width}
--message-body-color: #{$message-body-color}
--message-body-padding: #{$message-body-padding}
--message-body-pre-background-color: #{$message-body-pre-background-color}
--message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
--message-header-body-border-width: #{$message-header-body-border-width}
@extend %block
background-color: $message-background-color
border-radius: $message-radius
font-size: $size-normal
background-color: var(--message-background-color)
border-radius: var(--message-radius)
font-size: var(--message-font-size)
strong
color: currentColor
a:not(.button):not(.tag):not(.dropdown-item)
@@ -31,11 +48,11 @@ $message-colors: $colors !default
text-decoration: underline
// Sizes
&.is-small
font-size: $size-small
--message-font-size: var(--size-small, #{$size-small})
&.is-medium
font-size: $size-medium
--message-font-size: var(--size-medium, #{$size-medium})
&.is-large
font-size: $size-large
--message-font-size: var(--size-large, #{$size-large})
// Colors
@each $name, $components in $message-colors
$color: nth($components, 1)
@@ -60,43 +77,41 @@ $message-colors: $colors !default
$color-light: $color
&.is-#{$name}
background-color: var(--#{$name}-light, #{$color-light})
.message-header
background-color: var(--#{$name}, #{$color})
color: var(--#{$name}-invert, #{$color-invert})
.message-body
border-color: var(--#{$name}, #{$color})
color: var(--#{$name}-dark, #{$color-dark})
--message-background-color: var(--#{$name}-light, #{$color-light})
--message-header-background-color: var(--#{$name}, #{$color})
--message-header-color: var(--#{$name}-invert, #{$color-invert})
--message-body-border-color: var(--#{$name}, #{$color})
--message-body-color: var(--#{$name}-dark, #{$color-dark})
.message-header
align-items: center
background-color: $message-header-background-color
background-color: var(--message-header-background-color)
border-radius: $message-header-radius $message-header-radius 0 0
color: $message-header-color
color: var(--message-header-color)
display: flex
font-weight: $message-header-weight
font-weight: var(--message-header-weight)
justify-content: space-between
line-height: 1.25
padding: $message-header-padding
padding: var(--message-header-padding)
position: relative
.delete
flex-grow: 0
flex-shrink: 0
+ltr-property("margin", 0.75em, false)
& + .message-body
border-width: $message-header-body-border-width
border-width: var(--message-header-body-border-width)
border-top-left-radius: 0
border-top-right-radius: 0
.message-body
border-color: $message-body-border-color
border-radius: $message-body-radius
border-color: var(--message-body-border-color)
border-radius: var(--message-body-radius)
border-style: solid
border-width: $message-body-border-width
color: $message-body-color
padding: $message-body-padding
border-width: var(--message-body-border-width)
color: var(--message-body-color)
padding: var(--message-body-padding)
code,
pre
background-color: $message-body-pre-background-color
background-color: var(--message-body-pre-background-color)
pre code
background-color: $message-body-pre-code-background-color
background-color: var(--message-body-pre-code-background-color)