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

Fix control variables

Browse Source
This commit is contained in:
Jeremy Thomas
2016-10-29 21:51:13 +01:00
parent a2afb61ffe
commit 2e7e1d7c75
9 changed files with 574 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
sass/elements/button.sass
View File

@@ -1,3 +1,14 @@
$button-hover: $link-hover !default
$button-hover-border: $link-hover-border !default
$button-focus: $link-focus !default
$button-focus-border: $link-focus-border !default
$button-active: $link-active !default
$button-active-border: $link-active-border !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
=button-small
border-radius: $radius-small
font-size: $size-small
@@ -25,13 +36,35 @@
&:last-child
margin-left: 4px
margin-right: -2px
// States
&:hover,
&.is-hovered
border-color: $button-hover-border
color: $button-hover
&:focus,
&.is-focused
border-color: $button-focus-border
box-shadow: 0 0 0.5em rgba($button-focus-border, 0.5)
color: $button-focus
&:active,
&.is-active
color: $control-hover
&:active
box-shadow: inset 0 1px 2px rgba($black, 0.2)
border-color: $button-active-border
box-shadow: $button-shadow-inset
color: $button-active
// Colors
&.is-link
background-color: transparent
border-width: 0
color: $text
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&:active,
&.is-active
background-color: $background
color: $text-strong
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
@@ -40,10 +73,20 @@
border-width: 0
color: $color-invert
&:hover,
&.is-hovered
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
border-color: transparent
box-shadow: 0 0 0.5em rgba($color, 0.5)
color: $color-invert
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
box-shadow: $button-shadow-inset
color: $color-invert
&.is-inverted
background-color: $color-invert
@@ -63,15 +106,6 @@
background-color: $color
border-color: $color
color: $color-invert
&.is-link
background-color: transparent
border-width: 0
color: $text
text-decoration: underline
&:hover,
&:focus
background-color: $background
color: $text-strong
// Sizes
&.is-small
+button-small

127
sass/elements/form.sass
View File

@@ -1,18 +1,59 @@
=form-control
$input: $grey-darker !default
$input-background: $white !default
$input-border: $grey-lighter !default
$input-hover: $grey-darker !default
$input-hover-border: $grey-light !default
$input-focus: $grey-darker !default
$input-focus-border: $link !default
$input-disabled: $text-light !default
$input-disabled-background: $background !default
$input-disabled-border: $background !default
$input-arrow: $link !default
$input-icon: $grey-lighter !default
$input-icon-active: $grey-light !default
$input-radius: $radius !default
=input
+control
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
background-color: $input-background
border: 1px solid $input-border
color: $input
&:hover,
&.is-hovered
border-color: $input-hover-border
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $input-focus-border
&[disabled],
&.is-disabled
background-color: $input-disabled-background
border-color: $input-disabled-border
box-shadow: none
color: $input-disabled
+placeholder
color: rgba($input, 0.3)
.input,
.textarea
+form-control
+input
box-shadow: inset 0 1px 2px rgba($black, 0.1)
max-width: 100%
width: 100%
&[type="search"]
border-radius: 290486px
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: $color
// Sizes
&.is-small
+control-small
@@ -30,7 +71,7 @@
.textarea
display: block
line-height: 1.2
line-height: 1.25
max-height: 600px
max-width: 100%
min-height: 120px
@@ -40,17 +81,20 @@
.checkbox,
.radio
align-items: center
cursor: pointer
display: inline-block
line-height: 1em
display: inline-flex
flex-wrap: wrap
justify-content: flex-start
position: relative
vertical-align: top
input
cursor: pointer
margin-right: 0.5em
&:hover
color: $control-hover
color: $input-hover
&.is-disabled
color: $control-disabled
color: $input-disabled
pointer-events: none
input
pointer-events: none
@@ -64,31 +108,42 @@
height: 2.5em
position: relative
vertical-align: top
&:after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
z-index: 4
select
+form-control
+input
cursor: pointer
display: block
font-size: 1em
outline: none
padding-right: 2.5em
&:hover
border-color: $control-hover-border
border-color: $input-hover-border
&::ms-expand
display: none
// States
&:hover
&:after
border-color: $input-hover
// Sizes
&.is-small
+control-small
&.is-medium
+control-medium
&.is-large
+control-large
// Modifiers
&.is-fullwidth
width: 100%
select
width: 100%
&:after
+arrow($control-active)
margin-top: -4px
right: 16px
top: 50%
&:hover
&:after
border-color: $control-hover
.label
color: $control
color: $input
display: block
font-weight: bold
&:not(:last-child)
@@ -96,7 +151,7 @@
.help
display: block
font-size: $control-size-small
font-size: 0.875em
margin-top: 5px
@each $name, $pair in $colors
$color: nth($pair, 1)
@@ -133,20 +188,26 @@
width: auto
&:hover
z-index: 2
&:active,
&:focus
&:focus,
&:active
z-index: 3
&:first-child
border-radius: $control-radius 0 0 $control-radius
border-radius: $input-radius 0 0 $input-radius
select
border-radius: $control-radius 0 0 $control-radius
border-radius: $input-radius 0 0 $input-radius
&:last-child
border-radius: 0 $control-radius $control-radius 0
border-radius: 0 $input-radius $input-radius 0
select
border-radius: 0 $control-radius $control-radius 0
border-radius: 0 $input-radius $input-radius 0
&.is-expanded
flex-grow: 1
flex-shrink: 0
.select select
&:hover
z-index: 2
&:focus,
&:active
z-index: 3
&.has-addons-centered
justify-content: center
&.has-addons-right
@@ -160,14 +221,14 @@
&.has-icon
& > .fa
+fa(14px, 24px)
color: $control-icon
color: $input-icon
pointer-events: none
position: absolute
top: 4px
z-index: 4
.input
&:focus + .fa
color: $control-icon-active
color: $input-icon-active
&.is-small + .fa
font-size: 10.5px
top: 0
@@ -237,5 +298,5 @@
&:after
+loader
position: absolute !important
right: 8px
top: 8px
right: 0.75em
top: 0.75em

38
sass/utilities/controls.sass
View File

@@ -1,37 +1,15 @@
$control: $text-strong !default
$control-background: $text-invert !default
$control-border: $border !default
$control-hover: $link-hover !default
$control-hover-border: $border-hover !default
$control-active: $link !default
$control-active-background: $link !default
$control-active-background-invert: $link-invert !default
$control-active-border: $link !default
$control-disabled: $border !default
$control-disabled-background: $background !default
$control-radius: $radius !default
$control-radius-small: $radius-small !default
$control-size: $size-normal !default
$control-size-small: $size-small !default
$control-icon: $grey-lighter !default
$control-icon-active: $grey-light !default
=control
-moz-appearance: none
-webkit-appearance: none
align-items: center
background-color: $control-background
border: 1px solid $control-border
border: none
border-radius: $control-radius
box-shadow: none
color: $control
display: inline-flex
font-size: $control-size
font-size: 1em
height: 2.5em
justify-content: flex-start
line-height: 1.5
@@ -39,21 +17,15 @@ $control-icon-active: $grey-light !default
padding-right: 0.75em
position: relative
vertical-align: top
&:hover
border-color: $control-hover-border
&:active,
// States
&:focus,
&.is-focused,
&:active,
&.is-active
border-color: $control-active-border
outline: none
&[disabled],
&.is-disabled
background-color: $control-disabled-background
border-color: $control-disabled
cursor: not-allowed
pointer-events: none
+placeholder
color: rgba($control, 0.3)
=control-small
border-radius: $control-radius-small

8
sass/utilities/mixins.sass
View File

@@ -4,11 +4,11 @@
border-top: 0
content: " "
display: block
height: 7px
height: 0.5em
pointer-events: none
position: absolute
transform: rotate(-45deg)
width: 7px
width: 0.5em
=block
&:not(:last-child)
@@ -133,9 +133,9 @@
border-top-color: transparent
content: ""
display: block
height: 16px
height: 1rem
position: relative
width: 16px
width: 1rem
=overlay($offset: 0)
bottom: $offset

8
sass/utilities/variables.sass
View File

@@ -104,11 +104,13 @@ $link-invert: $primary-invert !default
$link-visited: $purple !default
$link-hover: $grey-darker !default
$link-hover-background: $white-ter !default
$link-hover-border: $grey-darker !default
$link-hover-border: $grey-light !default
$link-focus: $grey-darker !default
$link-focus-border: $primary !default
$link-active: $grey-darker !default
$link-active-border: $grey-darker !default
$link-active-border: $grey-dark !default
// Typography
$family-primary: $family-sans-serif !default