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

Fix components tests

Browse Source
This commit is contained in:
Jeremy Thomas
2022-12-06 00:47:43 +00:00
parent a03da2b801
commit 8508af010a
16 changed files with 2353 additions and 1361 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
sass/components/message.scss
View File

@@ -1,32 +1,54 @@
@import "../utilities/mixins";
$message-background-color: $background !default;
$message-radius: $radius !default;
$message-background-color: getVar("background") !default;
$message-radius: getVar("radius") !default;
$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-weight: $weight-bold !default;
$message-header-background-color: getVar("text") !default;
$message-header-color: getVar("text-invert") !default;
$message-header-weight: getVar("weight-bold") !default;
$message-header-padding: 0.75em 1em !default;
$message-header-radius: $radius !default;
$message-header-radius: getVar("radius") !default;
$message-body-border-color: $border !default;
$message-body-border-color: getVar("border") !default;
$message-body-border-width: 0 0 0 4px !default;
$message-body-color: $text !default;
$message-body-color: getVar("text") !default;
$message-body-padding: 1.25em 1.5em !default;
$message-body-radius: $radius !default;
$message-body-radius: getVar("radius") !default;
$message-body-pre-background-color: $scheme-main !default;
$message-body-pre-background-color: getVar("scheme-main") !default;
$message-body-pre-code-background-color: transparent !default;
$message-header-body-border-width: 0 !default;
$message-colors: $colors !default;
:root {
@include register-vars(
(
message-background-color: #{$message-background-color},
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-header-radius: #{$message-header-radius},
message-body-border-color: #{$message-body-border-color},
message-body-border-width: #{$message-body-border-width},
message-body-color: #{$message-body-color},
message-body-padding: #{$message-body-padding},
message-body-radius: #{$message-body-radius},
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},
)
);
}
.#{$class-prefix}message {
@extend %block;
background-color: $message-background-color;
border-radius: $message-radius;
font-size: $size-normal;
background-color: getVar("message-background-color");
border-radius: getVar("message-radius");
font-size: getVar("size-normal");
strong {
color: currentColor;
@@ -39,18 +61,19 @@ $message-colors: $colors !default;
// Sizes
&.is-small {
font-size: $size-small;
font-size: getVar("size-small");
}
&.is-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
&.is-large {
font-size: $size-large;
font-size: getVar("size-large");
}
// Colors
// TODO
@each $name, $components in $message-colors {
$color: nth($components, 1);
$color-invert: nth($components, 2);
@@ -94,14 +117,15 @@ $message-colors: $colors !default;
.#{$class-prefix}message-header {
align-items: center;
background-color: $message-header-background-color;
border-radius: $message-header-radius $message-header-radius 0 0;
color: $message-header-color;
background-color: getVar("message-header-background-color");
border-radius: getVar("message-header-radius") getVar("message-header-radius")
0 0;
color: getVar("message-header-color");
display: flex;
font-weight: $message-header-weight;
font-weight: getVar("message-header-weight");
justify-content: space-between;
line-height: 1.25;
padding: $message-header-padding;
padding: getVar("message-header-padding");
position: relative;
.#{$class-prefix}delete {
@@ -112,26 +136,26 @@ $message-colors: $colors !default;
}
& + .#{$class-prefix}message-body {
border-width: $message-header-body-border-width;
border-width: getVar("message-header-body-border-width");
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
.#{$class-prefix}message-body {
border-color: $message-body-border-color;
border-radius: $message-body-radius;
border-color: getVar("message-body-border-color");
border-radius: getVar("message-body-radius");
border-style: solid;
border-width: $message-body-border-width;
color: $message-body-color;
padding: $message-body-padding;
border-width: getVar("message-body-border-width");
color: getVar("message-body-color");
padding: getVar("message-body-padding");
code,
pre {
background-color: $message-body-pre-background-color;
background-color: getVar("message-body-pre-background-color");
}
pre code {
background-color: $message-body-pre-code-background-color;
background-color: getVar("message-body-pre-code-background-color");
}
}