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

Add focus variables

Browse Source
This commit is contained in:
Jeremy Thomas
2017-08-30 17:29:01 +01:00
parent 2b2e00066d
commit cda59a3101
5 changed files with 753 additions and 1917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
sass/elements/button.sass
View File

@@ -7,6 +7,8 @@ $button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !default
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
@@ -24,8 +26,6 @@ $button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
@@ -73,12 +73,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:focus,
&.is-focused
border-color: $button-focus-border-color
// box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
color: $button-focus-color
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
&:active,
&.is-active
border-color: $button-active-border-color
box-shadow: $button-shadow-inset
color: $button-active-color
// Colors
&.is-link
@@ -89,10 +89,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&.is-focused
background-color: $button-link-hover-background-color
color: $button-link-hover-color
&:active,
&.is-active
background-color: $button-link-hover-background-color
background-color: darken($button-link-hover-background-color, 5%)
color: $button-link-hover-color
&[disabled]
background-color: transparent
@@ -113,13 +115,13 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
&:focus,
&.is-focused
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.25)
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
box-shadow: $button-shadow-inset
color: $color-invert
&[disabled]
background-color: $color

15
sass/elements/form.sass
View File

@@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
$input-focus-color: $grey-darker !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: rgba($link, 0.25) !default
$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
@@ -51,6 +53,7 @@ $help-size: $size-small !default
&:active,
&.is-active
border-color: $input-focus-border-color
box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
&[disabled]
background-color: $input-disabled-background-color
border-color: $input-disabled-border-color
@@ -140,13 +143,6 @@ $help-size: $size-small !default
font-size: 1em
max-width: 100%
outline: none
&:hover
border-color: $input-hover-border-color
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border-color
&::-ms-expand
display: none
&[disabled]:hover
@@ -167,6 +163,11 @@ $help-size: $size-small !default
$color: nth($pair, 1)
&.is-#{$name} select
border-color: $color
&:focus,
&.is-focused,
&:active,
&.is-active
box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
// Sizes
&.is-small
+control-small