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

Add more button variables

Browse Source
This commit is contained in:
Jeremy Thomas
2023-02-03 12:25:54 +00:00
parent 3c7d60b802
commit c5312c4696
5 changed files with 180 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
sass/components/message.scss
View File

@@ -39,6 +39,9 @@ $message-colors: $colors !default;
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},
message-status-background-l: 8%,
message-status-color-l: 70%,
message-status-header-background-l: 20%,
)
);
}
@@ -75,44 +78,76 @@ $message-colors: $colors !default;
// Colors
// TODO
@each $name, $components in $message-colors {
$color: nth($components, 1);
$color-invert: nth($components, 2);
$color-light: null;
$color-dark: null;
@if length($components) >= 3 {
$color-light: nth($components, 3);
@if length($components) >= 4 {
$color-dark: nth($components, 4);
} @else {
$color-luminance: colorLuminance($color);
$darken-percentage: $color-luminance * 70%;
$desaturate-percentage: $color-luminance * 30%;
$color-dark: desaturate(
darken($color, $darken-percentage),
$desaturate-percentage
);
}
} @else {
$color-lightning: max(100% - lightness($color) - 2%, 0%);
$color-light: lighten($color, $color-lightning);
}
$base-h: getVar($name, "", "-h");
$base-s: getVar($name, "", "-s");
$base-l: getVar($name, "", "-l");
$invert: getVar($name, "", "-invert");
$base: hsl($base-h, var(--s), var(--l));
&.is-#{$name} {
background-color: $color-light;
--base-s: #{$base-s};
--base-l: #{$base-l};
background: none;
.#{$class-prefix}message-header {
background-color: $color;
color: $color-invert;
background-color: hsl(
$base-h,
var(--base-s),
var(--bulma-message-status-header-background-l)
);
color: $invert;
}
.#{$class-prefix}message-body {
border-color: $color;
color: $color-dark;
background-color: hsl(
$base-h,
var(--base-s),
var(--bulma-message-status-background-l)
);
color: hsl($base-h, var(--base-s), var(--bulma-message-status-color-l));
}
}
}
// @each $name, $components in $message-colors {
// $color: nth($components, 1);
// $color-invert: nth($components, 2);
// $color-light: null;
// $color-dark: null;
// @if length($components) >= 3 {
// $color-light: nth($components, 3);
// @if length($components) >= 4 {
// $color-dark: nth($components, 4);
// } @else {
// $color-luminance: colorLuminance($color);
// $darken-percentage: $color-luminance * 70%;
// $desaturate-percentage: $color-luminance * 30%;
// $color-dark: desaturate(
// darken($color, $darken-percentage),
// $desaturate-percentage
// );
// }
// } @else {
// $color-lightning: max(100% - lightness($color) - 2%, 0%);
// $color-light: lighten($color, $color-lightning);
// }
// &.is-#{$name} {
// background-color: $color-light;
// .#{$class-prefix}message-header {
// background-color: $color;
// color: $color-invert;
// }
// .#{$class-prefix}message-body {
// border-color: $color;
// color: $color-dark;
// }
// }
// }
}
.#{$class-prefix}message-header {

12
sass/elements/button.scss
View File

@@ -4,6 +4,7 @@
$button-color: getVar("text-strong") !default;
$button-background-color: getVar("scheme-main") !default;
$button-family: false !default;
$button-weight: getVar("weight-medium") !default;
$button-border-color: getVar("border") !default;
$button-border-width: getVar("control-border-width") !default;
@@ -101,6 +102,7 @@ $button-responsive-sizes: (
button-color: #{$button-color},
button-background-color: #{$button-background-color},
button-family: #{$button-family},
button-weight: #{$button-weight},
button-border-color: #{$button-border-color},
button-border-width: #{$button-border-width},
button-padding-vertical: #{$button-padding-vertical},
@@ -153,11 +155,7 @@ $button-responsive-sizes: (
border-width: getVar("button-border-width");
color: getVar("button-color");
cursor: pointer;
@if $button-family {
font-family: getVar("button-family");
}
font-weight: getVar("button-weight");
justify-content: center;
padding-bottom: getVar("button-padding-vertical");
padding-left: getVar("button-padding-horizontal");
@@ -166,6 +164,10 @@ $button-responsive-sizes: (
text-align: center;
white-space: nowrap;
@if $button-family {
font-family: getVar("button-family");
}
strong {
color: inherit;
}