bulma/sass/elements/button.sass
2017-04-01 13:32:07 +01:00

188 lines
4.7 KiB
Sass

$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
$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) !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
font-size: $size-small
=button-medium
font-size: $size-medium
=button-large
font-size: $size-large
.button
+control
+unselectable
background-color: $button-background
border: 1px solid $button-border
color: $button
cursor: pointer
justify-content: center
padding-left: 0.75em
padding-right: 0.75em
text-align: center
white-space: nowrap
strong
color: inherit
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - 1px)
margin-right: 0.1875em
&:last-child:not(:first-child)
margin-left: 0.1875em
margin-right: calc(-0.375em - 1px)
&:first-child:last-child
margin-left: calc(-0.375em - 1px)
margin-right: calc(-0.375em - 1px)
// 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.25)
color: $button-focus
&:active,
&.is-active
border-color: $button-active-border
box-shadow: $button-shadow-inset
color: $button-active
// Colors
&.is-link
background-color: transparent
border-color: transparent
color: $text
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&:active,
&.is-active
background-color: $background
color: $text-strong
&[disabled]
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: transparent
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.25)
color: $color-invert
&:active,
&.is-active
background-color: darken($color, 5%)
border-color: transparent
box-shadow: $button-shadow-inset
color: $color-invert
&[disabled]
background-color: $color
border-color: transparent
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover
background-color: darken($color-invert, 5%)
&[disabled]
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
&.is-loading
&:after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
background-color: transparent
border-color: $color
color: $color
&:hover,
&:focus
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&:after
border-color: transparent transparent $color $color !important
&[disabled]
background-color: transparent
border-color: $color
box-shadow: none
color: $color
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
background-color: $color-invert
color: $color
&[disabled]
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// Sizes
&.is-small
+button-small
&.is-medium
+button-medium
&.is-large
+button-large
// Modifiers
&[disabled]
background-color: $button-background
border-color: $button-border
box-shadow: none
opacity: 0.5
&.is-fullwidth
display: flex
width: 100%
&.is-loading
color: transparent !important
pointer-events: none
&:after
+loader
+center(1em)
position: absolute !important
// Adjustment for vertical spacing
button.button,
input[type="submit"].button
line-height: 1
padding-bottom: 0.4em
padding-top: 0.35em