Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-19 03:44:31 -07:00
Code Issues 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
Download Patch File Download Diff File Expand all files Collapse all files

54
sass/utilities/controls.scss
View File

@@ -1,32 +1,52 @@
@import "derived-variables";
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;
$control-radius: getVar("radius") !default;
$control-radius-small: getVar("radius-small") !default;
$control-border-width: 1px !default;
$control-height: 2.5em !default;
$control-line-height: 1.5 !default;
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
$control-padding-vertical: calc(
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 {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: $control-border-width solid transparent;
border-radius: $control-radius;
border-color: transparent;
border-radius: getVar("control-radius");
border-style: solid;
border-width: getVar("control-border-width");
box-shadow: none;
display: inline-flex;
font-size: $size-normal;
height: $control-height;
font-size: getVar("size-normal");
height: getVar("control-height");
justify-content: flex-start;
line-height: $control-line-height;
padding-bottom: $control-padding-vertical;
padding-left: $control-padding-horizontal;
padding-right: $control-padding-horizontal;
padding-top: $control-padding-vertical;
line-height: getVar("control-line-height");
padding-bottom: getVar("control-padding-vertical");
padding-left: getVar("control-padding-horizontal");
padding-right: getVar("control-padding-horizontal");
padding-top: getVar("control-padding-vertical");
position: relative;
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
@mixin control-small {
border-radius: $control-radius-small;
font-size: $size-small;
border-radius: getVar("control-radius-small");
font-size: getVar("size-small");
}
@mixin control-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
@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
// and the components either a single color
// 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-invert: null;
$color-light: null;
@@ -22,8 +27,7 @@
$color-invert: findColorInvert($color-base);
$color-light: findLightColor($color-base);
$color-dark: findDarkColor($color-base);
}
@else if type-of($components) == "list" {
} @else if type-of($components) == "list" {
$color-base: nth($components, 1);
// If Invert, Light and Dark are provided
@@ -33,15 +37,13 @@
$color-dark: nth($components, 4);
// If only Invert and Light are provided
}
@else if length($components) > 2 {
} @else if length($components) > 2 {
$color-invert: nth($components, 2);
$color-light: nth($components, 3);
$color-dark: findDarkColor($color-base);
// If only Invert is provided
}
@else {
} @else {
$color-invert: nth($components, 2);
$color-light: findLightColor($color-base);
$color-dark: findDarkColor($color-base);
@@ -55,7 +57,12 @@
// 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)
// $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 {
$value: $value * $number;
}
}
@else if $exp < 0 {
} @else if $exp < 0 {
@for $i from 1 through -$exp {
$value: divide($value, $number);
}
@@ -86,7 +92,11 @@
@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 {
$adjusted: 0;
@@ -94,23 +104,27 @@
@if $value < 0.03928 {
$value: divide($value, 12.92);
}
@else {
} @else {
$value: divide($value + 0.055, 1.055);
$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) {
@if colorLuminance($color) > 0.55 {
@return rgba(#000, 0.7);
}
@else {
} @else {
@return #fff;
}
}
@@ -142,10 +156,6 @@
}
@function bulmaRgba($color, $alpha) {
@if type-of($color) != "color" {
@return $color;
}
@return rgba($color, $alpha);
}

21
sass/utilities/mixins.scss
View File

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