Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues 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
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 {