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

Update button colors

Browse Source
This commit is contained in:
Jeremy Thomas 2022-12-17 01:11:23 +01:00
parent b73e183091
commit a41ce795ae
8 changed files with 889 additions and 669 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1230
docs/css/bulma.css vendored
View File

File diff suppressed because it is too large Load Diff

5
sass/components/modal.scss
View File

@ -2,7 +2,10 @@
$modal-z: 40 !default; $modal-z: 40 !default;
$modal-background-background-color: bulmargba(getVar("shadow-color-rgb"), 0.86) !default; $modal-background-background-color: bulmaRgba(
getVar("shadow-color-rgb"),
0.86
) !default;
$modal-content-width: 640px !default; $modal-content-width: 640px !default;
$modal-content-margin-mobile: 20px !default; $modal-content-margin-mobile: 20px !default;

15
sass/components/navbar.scss
View File

@ -34,8 +34,9 @@ $navbar-dropdown-radius: getVar("radius-large") !default;
$navbar-dropdown-z: 20 !default; $navbar-dropdown-z: 20 !default;
$navbar-dropdown-boxed-radius: getVar("radius-large") !default; $navbar-dropdown-boxed-radius: getVar("radius-large") !default;
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1), $navbar-dropdown-boxed-shadow: 0 8px 8px
0 0 0 1px bulmargba(getVar("shadow-color-rgb"), 0.1) !default; bulmaRgba(getVar("shadow-color-rgb"), 0.1),
0 0 0 1px bulmaRgba(getVar("shadow-color-rgb"), 0.1) !default;
$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default; $navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
$navbar-dropdown-item-hover-background-color: getVar("background") !default; $navbar-dropdown-item-hover-background-color: getVar("background") !default;
@ -396,7 +397,7 @@ a.#{$class-prefix}navbar-item,
.#{$class-prefix}navbar-menu { .#{$class-prefix}navbar-menu {
background-color: getVar("navbar-background-color"); background-color: getVar("navbar-background-color");
box-shadow: 0 8px 16px bulmargba(getVar("shadow-color-rgb"), 0.1); box-shadow: 0 8px 16px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
padding: 0.5rem 0; padding: 0.5rem 0;
&.is-active { &.is-active {
@ -415,7 +416,7 @@ a.#{$class-prefix}navbar-item,
bottom: 0; bottom: 0;
&.has-shadow { &.has-shadow {
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1); box-shadow: 0 -2px 3px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
} }
} }
@ -541,7 +542,7 @@ a.#{$class-prefix}navbar-item,
getVar("navbar-dropdown-radius") 0 0; getVar("navbar-dropdown-radius") 0 0;
border-top: none; border-top: none;
bottom: 100%; bottom: 100%;
box-shadow: 0 -8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1); box-shadow: 0 -8px 8px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
top: auto; top: auto;
} }
} }
@ -585,7 +586,7 @@ a.#{$class-prefix}navbar-item,
border-bottom-left-radius: getVar("navbar-dropdown-radius"); border-bottom-left-radius: getVar("navbar-dropdown-radius");
border-bottom-right-radius: getVar("navbar-dropdown-radius"); border-bottom-right-radius: getVar("navbar-dropdown-radius");
border-top: getVar("navbar-dropdown-border-top"); border-top: getVar("navbar-dropdown-border-top");
box-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1); box-shadow: 0 8px 8px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
display: none; display: none;
font-size: 0.875rem; font-size: 0.875rem;
@include ltr-position(0, false); @include ltr-position(0, false);
@ -662,7 +663,7 @@ a.#{$class-prefix}navbar-item,
bottom: 0; bottom: 0;
&.has-shadow { &.has-shadow {
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1); box-shadow: 0 -2px 3px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
} }
} }

179
sass/elements/button.scss
View File

@ -6,7 +6,7 @@ $button-background-color: getVar("scheme-main") !default;
$button-family: false !default; $button-family: false !default;
$button-border-color: getVar("border") !default; $button-border-color: getVar("border") !default;
$button-border-width: $control-border-width !default; // TODO $button-border-width: getVar("control-border-width") !default;
$button-padding-vertical: calc( $button-padding-vertical: calc(
0.5em - #{getVar("button-border-width")} 0.5em - #{getVar("button-border-width")}
@ -45,6 +45,15 @@ $button-static-color: getVar("text-light") !default;
$button-static-background-color: getVar("scheme-main-ter") !default; $button-static-background-color: getVar("scheme-main-ter") !default;
$button-static-border-color: getVar("border") !default; $button-static-border-color: getVar("border") !default;
$dark-shade: 20 !default;
$dark-invert-shade: 90 !default;
$light-shade: 90 !default;
$light-invert-shade: 50 !default;
$button-hover-s: 10% !default;
$button-hover-l: -10% !default;
$button-active-s: 20% !default;
$button-active-l: -20% !default;
$button-colors: $colors !default; $button-colors: $colors !default;
$button-responsive-sizes: ( $button-responsive-sizes: (
"mobile": ( "mobile": (
@ -117,6 +126,14 @@ $button-responsive-sizes: (
button-static-color: #{$button-static-color}, button-static-color: #{$button-static-color},
button-static-background-color: #{$button-static-background-color}, button-static-background-color: #{$button-static-background-color},
button-static-border-color: #{$button-static-border-color}, button-static-border-color: #{$button-static-border-color},
button-hover-s: #{$button-hover-s},
button-hover-l: #{$button-hover-l},
button-active-s: #{$button-active-s},
button-active-l: #{$button-active-l},
dark-shade: #{$dark-shade},
dark-invert-shade: #{$dark-invert-shade},
light-shade: #{$light-shade},
light-invert-shade: #{$light-invert-shade},
) )
); );
} }
@ -209,7 +226,7 @@ $button-responsive-sizes: (
color: getVar("button-hover-color"); color: getVar("button-hover-color");
} }
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
border-color: getVar("button-focus-border-color"); border-color: getVar("button-focus-border-color");
color: getVar("button-focus-color"); color: getVar("button-focus-color");
@ -235,7 +252,7 @@ $button-responsive-sizes: (
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
background-color: getVar("button-text-hover-background-color"); background-color: getVar("button-text-hover-background-color");
color: getVar("button-text-hover-color"); color: getVar("button-text-hover-color");
@ -269,101 +286,104 @@ $button-responsive-sizes: (
} }
@each $name, $pair in $button-colors { @each $name, $pair in $button-colors {
$color: nth($pair, 1); $base-h: getVar($name, "", "-h");
$color-invert: nth($pair, 2); $base-s: getVar($name, "", "-s");
$base-l: getVar($name, "", "-l");
$invert: getVar($name, "", "-invert");
$base: hsla($base-h, var(--s), var(--l), 1);
$button-shadow: hsla($base-h, var(--s), var(--l), 0.5);
&.is-#{$name} { &.is-#{$name} {
background-color: $color; --base-s: #{$base-s};
--base-l: #{$base-l};
--s: var(--base-s);
--l: var(--base-l);
background-color: $base;
border-color: transparent; border-color: transparent;
color: $color-invert; color: $invert;
&:hover, &:hover,
&.is-hovered { &.is-hovered {
background-color: bulmaDarken($color, 2.5%); --s: calc(var(--base-s) + var(--bulma-button-hover-s));
--l: calc(var(--base-l) + var(--bulma-button-hover-l));
border-color: transparent; border-color: transparent;
color: $color-invert; color: $invert;
} }
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
border-color: transparent; border-color: transparent;
color: $color-invert; color: $invert;
&:not(:active) { &:not(:active) {
box-shadow: getVar("button-focus-box-shadow-size") box-shadow: getVar("button-focus-box-shadow-size") $button-shadow;
bulmaRgba($color, 0.25);
} }
} }
&:active, &:active,
&.is-active { &.is-active {
background-color: bulmaDarken($color, 5%); --s: calc(var(--base-s) + var(--bulma-button-active-s));
--l: calc(var(--base-l) + var(--bulma-button-active-l));
border-color: transparent; border-color: transparent;
color: $color-invert; color: $invert;
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: $color; background-color: $base;
border-color: $color; border-color: $base;
box-shadow: none; box-shadow: none;
} }
&.is-inverted { &.is-inverted {
background-color: $color-invert; background-color: $invert;
color: $color; color: $base;
&:hover, &:hover,
&.is-hovered { &.is-hovered {
background-color: bulmaDarken($color-invert, 5%); // background-color: bulmaDarken($color-invert, 5%);
} }
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: $color-invert; background-color: $invert;
border-color: transparent; border-color: transparent;
box-shadow: none; box-shadow: none;
color: $color; color: $base;
} }
} }
&.is-loading { &.is-loading {
&::after { &::after {
border-color: transparent border-color: transparent transparent $invert $invert !important;
transparent
$color-invert
$color-invert !important;
} }
} }
&.is-outlined { &.is-outlined {
background-color: transparent; background-color: transparent;
border-color: $color; border-color: $base;
color: $color; color: $base;
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
background-color: $color; background-color: $base;
border-color: $color; border-color: $base;
color: $color-invert; color: $invert;
} }
&.is-loading { &.is-loading {
&::after { &::after {
border-color: transparent transparent $color $color !important; border-color: transparent transparent $base $base !important;
} }
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
&::after { &::after {
border-color: transparent border-color: transparent transparent $invert $invert !important;
transparent
$color-invert
$color-invert !important;
} }
} }
} }
@ -371,32 +391,32 @@ $button-responsive-sizes: (
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: transparent; background-color: transparent;
border-color: $color; border-color: $base;
box-shadow: none; box-shadow: none;
color: $color; color: $base;
} }
} }
&.is-inverted.is-outlined { &.is-inverted.is-outlined {
background-color: transparent; background-color: transparent;
border-color: $color-invert; border-color: $invert;
color: $color-invert; color: $invert;
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
background-color: $color-invert; background-color: $invert;
color: $color; color: $base;
} }
&.is-loading { &.is-loading {
&:hover, &:hover,
&.is-hovered, &.is-hovered,
&:focus, &:focus-visible,
&.is-focused { &.is-focused {
&::after { &::after {
border-color: transparent transparent $color $color !important; border-color: transparent transparent $base $base !important;
} }
} }
} }
@ -404,36 +424,55 @@ $button-responsive-sizes: (
&[disabled], &[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: transparent; background-color: transparent;
border-color: $color-invert; border-color: $invert;
box-shadow: none; box-shadow: none;
color: $color-invert; color: $invert;
}
}
&.is-light {
// --l: var(--bulma-dark-shade);
background-color: getVar($name, "", "-#{$light-shade}");
color: $base;
&:hover,
&.is-hovered {
background-color: getVar($name, "", "-#{$light-shade - 5}");
border-color: transparent;
}
&:active,
&.is-active {
background-color: getVar($name, "", "-#{$light-shade - 10}");
border-color: transparent;
// color: $color-dark;
} }
} }
// If light and dark colors are provided // If light and dark colors are provided
@if length($pair) >= 4 { // @if length($pair) >= 4 {
$color-light: nth($pair, 3); // $color-light: nth($pair, 3);
$color-dark: nth($pair, 4); // $color-dark: nth($pair, 4);
&.is-light { // &.is-light {
background-color: $color-light; // background-color: $color-light;
color: $color-dark; // color: $color-dark;
&:hover, // &:hover,
&.is-hovered { // &.is-hovered {
background-color: bulmaDarken($color-light, 2.5%); // background-color: bulmaDarken($color-light, 2.5%);
border-color: transparent; // border-color: transparent;
color: $color-dark; // color: $color-dark;
} // }
&:active, // &:active,
&.is-active { // &.is-active {
background-color: bulmaDarken($color-light, 5%); // background-color: bulmaDarken($color-light, 5%);
border-color: transparent; // border-color: transparent;
color: $color-dark; // color: $color-dark;
} // }
} // }
} // }
} }
} }
@ -558,7 +597,7 @@ $button-responsive-sizes: (
z-index: 2; z-index: 2;
} }
&:focus, &:focus-visible,
&.is-focused, &.is-focused,
&:active, &:active,
&.is-active, &.is-active,

2
sass/layout/hero.scss
View File

@ -95,7 +95,7 @@ $hero-colors: $colors !default;
color: $color-invert; color: $color-invert;
&:hover { &:hover {
background-color: bulmargba(getVar("shadow-color-rgb"), 0.1); background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.1);
} }
} }

54
sass/utilities/controls.scss
View File

@ -1,32 +1,52 @@
@import "derived-variables"; @import "derived-variables";
$control-radius: $radius !default; $control-radius: getVar("radius") !default;
$control-radius-small: $radius-small !default; $control-radius-small: getVar("radius-small") !default;
$control-border-width: 1px !default; $control-border-width: 1px !default;
$control-height: 2.5em !default; $control-height: 2.5em !default;
$control-line-height: 1.5 !default; $control-line-height: 1.5 !default;
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default; $control-padding-vertical: calc(
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default; 0.5em - #{getVar("control-border-width")}
) !default;
$control-padding-horizontal: calc(
0.75em - #{getVar("control-border-width")}
) !default;
:root {
@include register-vars(
(
control-radius: #{$control-radius},
control-radius-small: #{$control-radius-small},
control-border-width: #{$control-border-width},
control-height: #{$control-height},
control-line-height: #{$control-line-height},
control-padding-vertical: #{$control-padding-vertical},
control-padding-horizontal: #{$control-padding-horizontal},
)
);
}
@mixin control { @mixin control {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
align-items: center; align-items: center;
border: $control-border-width solid transparent; border-color: transparent;
border-radius: $control-radius; border-radius: getVar("control-radius");
border-style: solid;
border-width: getVar("control-border-width");
box-shadow: none; box-shadow: none;
display: inline-flex; display: inline-flex;
font-size: $size-normal; font-size: getVar("size-normal");
height: $control-height; height: getVar("control-height");
justify-content: flex-start; justify-content: flex-start;
line-height: $control-line-height; line-height: getVar("control-line-height");
padding-bottom: $control-padding-vertical; padding-bottom: getVar("control-padding-vertical");
padding-left: $control-padding-horizontal; padding-left: getVar("control-padding-horizontal");
padding-right: $control-padding-horizontal; padding-right: getVar("control-padding-horizontal");
padding-top: $control-padding-vertical; padding-top: getVar("control-padding-vertical");
position: relative; position: relative;
vertical-align: top; vertical-align: top;
@ -46,14 +66,14 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
// The controls sizes use mixins so they can be used at different breakpoints // The controls sizes use mixins so they can be used at different breakpoints
@mixin control-small { @mixin control-small {
border-radius: $control-radius-small; border-radius: getVar("control-radius-small");
font-size: $size-small; font-size: getVar("size-small");
} }
@mixin control-medium { @mixin control-medium {
font-size: $size-medium; font-size: getVar("size-medium");
} }
@mixin control-large { @mixin control-large {
font-size: $size-large; font-size: getVar("size-large");
} }

52
sass/utilities/functions.scss
View File

@ -8,7 +8,12 @@
// The color name should be a string // The color name should be a string
// and the components either a single color // and the components either a single color
// or a colors list with at least one element // or a colors list with at least one element
@if type-of($name) == "string" and (type-of($components) == "list" or type-of($components) == "color") and length($components) >= 1 { @if type-of($name) ==
"string" and
(type-of($components) == "list" or type-of($components) == "color") and
length($components) >=
1
{
$color-base: null; $color-base: null;
$color-invert: null; $color-invert: null;
$color-light: null; $color-light: null;
@ -22,8 +27,7 @@
$color-invert: findColorInvert($color-base); $color-invert: findColorInvert($color-base);
$color-light: findLightColor($color-base); $color-light: findLightColor($color-base);
$color-dark: findDarkColor($color-base); $color-dark: findDarkColor($color-base);
} } @else if type-of($components) == "list" {
@else if type-of($components) == "list" {
$color-base: nth($components, 1); $color-base: nth($components, 1);
// If Invert, Light and Dark are provided // If Invert, Light and Dark are provided
@ -33,15 +37,13 @@
$color-dark: nth($components, 4); $color-dark: nth($components, 4);
// If only Invert and Light are provided // If only Invert and Light are provided
} } @else if length($components) > 2 {
@else if length($components) > 2 {
$color-invert: nth($components, 2); $color-invert: nth($components, 2);
$color-light: nth($components, 3); $color-light: nth($components, 3);
$color-dark: findDarkColor($color-base); $color-dark: findDarkColor($color-base);
// If only Invert is provided // If only Invert is provided
} } @else {
@else {
$color-invert: nth($components, 2); $color-invert: nth($components, 2);
$color-light: findLightColor($color-base); $color-light: findLightColor($color-base);
$color-dark: findDarkColor($color-base); $color-dark: findDarkColor($color-base);
@ -55,7 +57,12 @@
// We merge this colors elements as map with Bulma's colors map // We merge this colors elements as map with Bulma's colors map
// (we can override them this way, no multiple definition for the same name) // (we can override them this way, no multiple definition for the same name)
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark))) // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
$merged-colors: map_merge($merged-colors, ($name: $value)); $merged-colors: map_merge(
$merged-colors,
(
$name: $value,
)
);
} }
} }
} }
@ -71,8 +78,7 @@
@for $i from 1 through $exp { @for $i from 1 through $exp {
$value: $value * $number; $value: $value * $number;
} }
} } @else if $exp < 0 {
@else if $exp < 0 {
@for $i from 1 through -$exp { @for $i from 1 through -$exp {
$value: divide($value, $number); $value: divide($value, $number);
} }
@ -86,7 +92,11 @@
@return 0.55; @return 0.55;
} }
$color-rgb: ("red": red($color), "green": green($color), "blue": blue($color)); $color-rgb: (
"red": red($color),
"green": green($color),
"blue": blue($color),
);
@each $name, $value in $color-rgb { @each $name, $value in $color-rgb {
$adjusted: 0; $adjusted: 0;
@ -94,23 +104,27 @@
@if $value < 0.03928 { @if $value < 0.03928 {
$value: divide($value, 12.92); $value: divide($value, 12.92);
} } @else {
@else {
$value: divide($value + 0.055, 1.055); $value: divide($value + 0.055, 1.055);
$value: powerNumber($value, 2); $value: powerNumber($value, 2);
} }
$color-rgb: map-merge($color-rgb, ($name: $value)); $color-rgb: map-merge(
$color-rgb,
(
$name: $value,
)
);
} }
@return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722; @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
0.7152 + map-get($color-rgb, "blue") * 0.0722;
} }
@function findColorInvert($color) { @function findColorInvert($color) {
@if colorLuminance($color) > 0.55 { @if colorLuminance($color) > 0.55 {
@return rgba(#000, 0.7); @return rgba(#000, 0.7);
} } @else {
@else {
@return #fff; @return #fff;
} }
} }
@ -142,10 +156,6 @@
} }
@function bulmaRgba($color, $alpha) { @function bulmaRgba($color, $alpha) {
@if type-of($color) != "color" {
@return $color;
}
@return rgba($color, $alpha); @return rgba($color, $alpha);
} }

21
sass/utilities/mixins.scss
View File

@ -14,8 +14,7 @@
@if $height != 0 { @if $height != 0 {
left: calc(50% - (#{$width} * 0.5)); left: calc(50% - (#{$width} * 0.5));
top: calc(50% - (#{$height} * 0.5)); top: calc(50% - (#{$height} * 0.5));
} } @else {
@else {
left: calc(50% - (#{$width} * 0.5)); left: calc(50% - (#{$width} * 0.5));
top: calc(50% - (#{$width} * 0.5)); top: calc(50% - (#{$width} * 0.5));
} }
@ -226,13 +225,11 @@
@include between($from, $until) { @include between($from, $until) {
@content; @content;
} }
} } @else if $from {
@else if $from {
@include from($from) { @include from($from) {
@content; @content;
} }
} } @else if $until {
@else if $until {
@include until($until) { @include until($until) {
@content; @content;
} }
@ -258,8 +255,7 @@
@if $rtl { @if $rtl {
#{$property}-#{$opposite}: $spacing; #{$property}-#{$opposite}: $spacing;
} } @else {
@else {
#{$property}-#{$normal}: $spacing; #{$property}-#{$normal}: $spacing;
} }
} }
@ -270,8 +266,7 @@
@if $rtl { @if $rtl {
#{$opposite}: $spacing; #{$opposite}: $spacing;
} } @else {
@else {
#{$normal}: $spacing; #{$normal}: $spacing;
} }
} }
@ -314,7 +309,7 @@
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
background-color: bulmargba(getVar("shadow-color-rgb"), 0.2); background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.2);
border: none; border: none;
border-radius: $radius-rounded; border-radius: $radius-rounded;
cursor: pointer; cursor: pointer;
@ -357,11 +352,11 @@
&:hover, &:hover,
&:focus { &:focus {
background-color: bulmargba(getVar("shadow-color-rgb"), 0.3); background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.3);
} }
&:active { &:active {
background-color: bulmargba(getVar("shadow-color-rgb"), 0.4); background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.4);
} }
// Sizes // Sizes