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

Fix select and button rgba

Browse Source
This commit is contained in:
Jeremy Thomas 2020-09-06 10:53:18 +01:00
parent 238b43761f
commit 3ee48f2236
4 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sass/elements/button.sass
View File

@ -14,7 +14,7 @@ $button-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !def
$button-focus-color: var(--link-focus, #{$link-focus}) !default $button-focus-color: var(--link-focus, #{$link-focus}) !default
$button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default $button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default $button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default $button-focus-box-shadow-color: var(--button-focus-box-shadow-color-hsla, #{bulmaRgba($link, 0.25)}) !default
$button-active-color: var(--link-active, #{$link-active}) !default $button-active-color: var(--link-active, #{$link-active}) !default
$button-active-border-color: var(--link-active-border, #{$link-active-border}) !default $button-active-border-color: var(--link-active-border, #{$link-active-border}) !default
@ -58,6 +58,7 @@ $button-colors: $colors !default
--button-hover-color: #{$button-hover-color} --button-hover-color: #{$button-hover-color}
--button-focus-border-color: #{$button-focus-border-color} --button-focus-border-color: #{$button-focus-border-color}
--button-focus-box-shadow-size: #{$button-focus-box-shadow-size} --button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
--button-focus-box-shadow-color-hsla: hsla(var(--link-h), var(--link-s), var(--link-l), 0.25)
--button-focus-box-shadow-color: #{$button-focus-box-shadow-color} --button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
--button-focus-color: #{$button-focus-color} --button-focus-color: #{$button-focus-color}
--button-active-border-color: #{$button-active-border-color} --button-active-border-color: #{$button-active-border-color}

9
sass/form/select.sass
View File

@ -47,20 +47,25 @@ $select-colors: $form-colors !default
border-color: var(--select-hover-color) border-color: var(--select-hover-color)
// Colors // Colors
@each $name, $pair in $select-colors @each $name, $pair in $select-colors
@debug $select-colors
$color: nth($pair, 1) $color: nth($pair, 1)
&.is-#{$name} &.is-#{$name}
--hover-border-delta: -5%
--hover-border-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-border-delta)})
--hover-border-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-border-#{$name}-l), var(--#{$name}-a))
--focus-box-shadow-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
&:not(:hover)::after &:not(:hover)::after
border-color: var(--#{$name}, #{$color}) border-color: var(--#{$name}, #{$color})
select select
border-color: var(--#{$name}, #{$color}) border-color: var(--#{$name}, #{$color})
&:hover, &:hover,
&.is-hovered &.is-hovered
border-color: bulmaDarken($color, 5%) border-color: var(--hover-border-color, #{bulmaDarken($color, 5%)})
&:focus, &:focus,
&.is-focused, &.is-focused,
&:active, &:active,
&.is-active &.is-active
box-shadow: var(--select-focus-box-shadow-size) bulmaRgba($color, 0.25) box-shadow: var(--select-focus-box-shadow-size) var(--focus-box-shadow-color, #{bulmaRgba($color, 0.25)})
// Sizes // Sizes
&.is-small &.is-small
+control-small +control-small

2
sass/utilities/derived-variables.sass
View File

@ -87,7 +87,7 @@ $link-hover: var(--grey-darker, #{$grey-darker}) !default
$link-hover-border: var(--grey-light, #{$grey-light}) !default $link-hover-border: var(--grey-light, #{$grey-light}) !default
$link-focus: var(--grey-darker, #{$grey-darker}) !default $link-focus: var(--grey-darker, #{$grey-darker}) !default
$link-focus-border: var(--blue, #{$blue}) !default $link-focus-border: var(--link, #{$blue}) !default
$link-active: var(--grey-darker, #{$grey-darker}) !default $link-active: var(--grey-darker, #{$grey-darker}) !default
$link-active-border: var(--grey-dark, #{$grey-dark}) !default $link-active-border: var(--grey-dark, #{$grey-dark}) !default

4
test/plugins/check-css-variables-exist.js
View File

@ -43,6 +43,10 @@ function plugin() {
if (mapName in COLOR_MAPS) { if (mapName in COLOR_MAPS) {
const colors = COLOR_MAPS[mapName].map(colorName => { const colors = COLOR_MAPS[mapName].map(colorName => {
defaultAssignments.push(`--${colorName}`); defaultAssignments.push(`--${colorName}`);
defaultAssignments.push(`--${colorName}-h`);
defaultAssignments.push(`--${colorName}-s`);
defaultAssignments.push(`--${colorName}-l`);
defaultAssignments.push(`--${colorName}-a`);
defaultAssignments.push(`--${colorName}-invert`); defaultAssignments.push(`--${colorName}-invert`);
defaultAssignments.push(`--${colorName}-light`); defaultAssignments.push(`--${colorName}-light`);
defaultAssignments.push(`--${colorName}-dark`); defaultAssignments.push(`--${colorName}-dark`);