library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve button colors

Browse Source
This commit is contained in:
Jeremy Thomas 2023-01-02 12:53:50 +01:00
parent a41ce795ae
commit 365672747b
2 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
docs/css/bulma.css vendored
View File

@ -572,6 +572,8 @@ a.box:active {
--bulma-button-hover-l: -10%;
--bulma-button-active-s: 20%;
--bulma-button-active-l: -20%;
--bulma-button-light-l: 95%;
--bulma-button-light-text-l: 33%;
--bulma-dark-shade: 20;
--bulma-dark-invert-shade: 90;
--bulma-light-shade: 90;
@ -780,8 +782,9 @@ fieldset[disabled] .button.is-white.is-inverted.is-outlined {
}
.button.is-white.is-light {
background-color: var(--bulma-white-90);
color: hsla(var(--bulma-white-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-white-h), var(--s), var(--text-l), 1);
}
.button.is-white.is-light:hover, .button.is-white.is-light.is-hovered {
@ -903,8 +906,9 @@ fieldset[disabled] .button.is-black.is-inverted.is-outlined {
}
.button.is-black.is-light {
background-color: var(--bulma-black-90);
color: hsla(var(--bulma-black-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-black-h), var(--s), var(--text-l), 1);
}
.button.is-black.is-light:hover, .button.is-black.is-light.is-hovered {
@ -1026,8 +1030,9 @@ fieldset[disabled] .button.is-light.is-inverted.is-outlined {
}
.button.is-light.is-light {
background-color: var(--bulma-light-90);
color: hsla(var(--bulma-light-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-light-h), var(--s), var(--text-l), 1);
}
.button.is-light.is-light:hover, .button.is-light.is-light.is-hovered {
@ -1149,8 +1154,9 @@ fieldset[disabled] .button.is-dark.is-inverted.is-outlined {
}
.button.is-dark.is-light {
background-color: var(--bulma-dark-90);
color: hsla(var(--bulma-dark-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-dark-h), var(--s), var(--text-l), 1);
}
.button.is-dark.is-light:hover, .button.is-dark.is-light.is-hovered {
@ -1272,8 +1278,9 @@ fieldset[disabled] .button.is-primary.is-inverted.is-outlined {
}
.button.is-primary.is-light {
background-color: var(--bulma-primary-90);
color: hsla(var(--bulma-primary-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-primary-h), var(--s), var(--text-l), 1);
}
.button.is-primary.is-light:hover, .button.is-primary.is-light.is-hovered {
@ -1395,8 +1402,9 @@ fieldset[disabled] .button.is-link.is-inverted.is-outlined {
}
.button.is-link.is-light {
background-color: var(--bulma-link-90);
color: hsla(var(--bulma-link-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-link-h), var(--s), var(--text-l), 1);
}
.button.is-link.is-light:hover, .button.is-link.is-light.is-hovered {
@ -1518,8 +1526,9 @@ fieldset[disabled] .button.is-info.is-inverted.is-outlined {
}
.button.is-info.is-light {
background-color: var(--bulma-info-90);
color: hsla(var(--bulma-info-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-info-h), var(--s), var(--text-l), 1);
}
.button.is-info.is-light:hover, .button.is-info.is-light.is-hovered {
@ -1641,8 +1650,9 @@ fieldset[disabled] .button.is-success.is-inverted.is-outlined {
}
.button.is-success.is-light {
background-color: var(--bulma-success-90);
color: hsla(var(--bulma-success-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-success-h), var(--s), var(--text-l), 1);
}
.button.is-success.is-light:hover, .button.is-success.is-light.is-hovered {
@ -1764,8 +1774,9 @@ fieldset[disabled] .button.is-warning.is-inverted.is-outlined {
}
.button.is-warning.is-light {
background-color: var(--bulma-warning-90);
color: hsla(var(--bulma-warning-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-warning-h), var(--s), var(--text-l), 1);
}
.button.is-warning.is-light:hover, .button.is-warning.is-light.is-hovered {
@ -1887,8 +1898,9 @@ fieldset[disabled] .button.is-danger.is-inverted.is-outlined {
}
.button.is-danger.is-light {
background-color: var(--bulma-danger-90);
color: hsla(var(--bulma-danger-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-danger-h), var(--s), var(--text-l), 1);
}
.button.is-danger.is-light:hover, .button.is-danger.is-light.is-hovered {
@ -2010,8 +2022,9 @@ fieldset[disabled] .button.is-text.is-inverted.is-outlined {
}
.button.is-text.is-light {
background-color: var(--bulma-text-90);
color: hsla(var(--bulma-text-h), var(--s), var(--l), 1);
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
color: hsla(var(--bulma-text-h), var(--s), var(--text-l), 1);
}
.button.is-text.is-light:hover, .button.is-text.is-light.is-hovered {

13
sass/elements/button.scss
View File

@ -53,6 +53,10 @@ $button-hover-s: 10% !default;
$button-hover-l: -10% !default;
$button-active-s: 20% !default;
$button-active-l: -20% !default;
$button-light-l: 95% !default;
$button-light-text-l: 33% !default;
$button-light-hover-l: 93% !default;
$button-light-active-l: 91% !default;
$button-colors: $colors !default;
$button-responsive-sizes: (
@ -130,6 +134,8 @@ $button-responsive-sizes: (
button-hover-l: #{$button-hover-l},
button-active-s: #{$button-active-s},
button-active-l: #{$button-active-l},
button-light-l: #{$button-light-l},
button-light-text-l: #{$button-light-text-l},
dark-shade: #{$dark-shade},
dark-invert-shade: #{$dark-invert-shade},
light-shade: #{$light-shade},
@ -431,9 +437,12 @@ $button-responsive-sizes: (
}
&.is-light {
--l: var(--bulma-button-light-l);
--text-l: var(--bulma-button-light-text-l);
// --l: var(--bulma-dark-shade);
background-color: getVar($name, "", "-#{$light-shade}");
color: $base;
// background-color: getVar($name, "", "-#{$light-shade}");
// color: $base;
color: hsla($base-h, var(--s), var(--text-l), 1);
&:hover,
&.is-hovered {