bulma/sass/elements/button.sass

198 lines
5.0 KiB
Sass
Raw Normal View History

$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default
2016-10-30 10:41:53 +00:00
2016-10-29 20:51:13 +00:00
$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
2017-05-28 15:07:29 +00:00
$button-static: $grey !default
$button-static-background: $white-ter !default
$button-static-border: $grey-lighter !default
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
2016-10-29 20:51:13 +00:00
2016-10-30 10:41:53 +00:00
// The button sizes use mixins so they can be used at different breakpoints
2016-01-24 00:03:43 +00:00
=button-small
2016-06-29 22:25:27 +00:00
border-radius: $radius-small
2016-10-29 17:53:30 +00:00
font-size: $size-small
2016-01-24 00:03:43 +00:00
=button-medium
2016-10-29 17:53:30 +00:00
font-size: $size-medium
2016-01-24 00:03:43 +00:00
=button-large
2016-10-29 17:53:30 +00:00
font-size: $size-large
2016-01-24 00:03:43 +00:00
.button
+control
2016-09-22 22:14:18 +00:00
+unselectable
2016-10-30 10:41:53 +00:00
background-color: $button-background
2017-04-13 00:10:39 +00:00
border-color: $button-border
2016-10-30 10:41:53 +00:00
color: $button
2016-09-22 22:14:18 +00:00
cursor: pointer
2016-03-26 17:28:43 +00:00
justify-content: center
padding-left: 0.75em
padding-right: 0.75em
2016-01-30 11:53:41 +00:00
text-align: center
white-space: nowrap
2016-01-24 00:03:43 +00:00
strong
color: inherit
2017-03-12 14:13:08 +00:00
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
margin-left: calc(-0.375em - 1px)
2017-03-13 12:05:02 +00:00
margin-right: 0.1875em
2017-03-12 14:13:08 +00:00
&:last-child:not(:first-child)
2017-03-13 12:05:02 +00:00
margin-left: 0.1875em
2017-03-12 14:13:08 +00:00
margin-right: calc(-0.375em - 1px)
&:first-child:last-child
margin-left: calc(-0.375em - 1px)
margin-right: calc(-0.375em - 1px)
2016-10-29 20:51:13 +00:00
// States
2016-05-30 18:41:54 +00:00
&:hover,
2016-10-29 20:51:13 +00:00
&.is-hovered
border-color: $button-hover-border
color: $button-hover
2016-05-30 18:41:54 +00:00
&:focus,
2016-10-29 20:51:13 +00:00
&.is-focused
border-color: $button-focus-border
2016-10-30 17:35:39 +00:00
box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
2016-10-29 20:51:13 +00:00
color: $button-focus
&:active,
2016-05-30 18:41:54 +00:00
&.is-active
2016-10-29 20:51:13 +00:00
border-color: $button-active-border
box-shadow: $button-shadow-inset
color: $button-active
2016-04-10 15:00:32 +00:00
// Colors
2016-10-29 20:51:13 +00:00
&.is-link
background-color: transparent
2016-10-30 10:41:53 +00:00
border-color: transparent
2016-10-29 20:51:13 +00:00
color: $text
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&:active,
&.is-active
background-color: $background
color: $text-strong
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: transparent
border-color: transparent
box-shadow: none
2016-01-24 00:03:43 +00:00
@each $name, $pair in $colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
2016-06-29 22:59:48 +00:00
background-color: $color
2016-10-30 10:41:53 +00:00
border-color: transparent
2016-01-24 00:03:43 +00:00
color: $color-invert
&:hover,
2016-10-29 20:51:13 +00:00
&.is-hovered
background-color: darken($color, 2.5%)
border-color: transparent
color: $color-invert
2016-05-30 18:41:54 +00:00
&:focus,
2016-10-29 20:51:13 +00:00
&.is-focused
border-color: transparent
2016-10-30 17:35:39 +00:00
box-shadow: 0 0 0.5em rgba($color, 0.25)
2016-10-29 20:51:13 +00:00
color: $color-invert
&:active,
2016-05-30 18:41:54 +00:00
&.is-active
2016-09-22 18:48:42 +00:00
background-color: darken($color, 5%)
2016-01-24 00:03:43 +00:00
border-color: transparent
2016-10-29 20:51:13 +00:00
box-shadow: $button-shadow-inset
2016-01-24 00:03:43 +00:00
color: $color-invert
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: $color
border-color: transparent
box-shadow: none
2016-01-24 00:03:43 +00:00
&.is-inverted
2016-06-29 22:59:48 +00:00
background-color: $color-invert
2016-01-24 00:03:43 +00:00
color: $color
&:hover
2016-06-29 22:59:48 +00:00
background-color: darken($color-invert, 5%)
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
2016-04-10 15:00:32 +00:00
&.is-loading
&:after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
2016-06-29 22:59:48 +00:00
background-color: transparent
2016-04-10 15:00:32 +00:00
border-color: $color
color: $color
&:hover,
&:focus
2016-06-29 22:59:48 +00:00
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&:after
border-color: transparent transparent $color $color !important
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: transparent
border-color: $color
box-shadow: none
color: $color
2016-10-30 20:24:23 +00:00
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&:focus
background-color: $color-invert
color: $color
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
2016-04-10 15:00:32 +00:00
// Sizes
2016-01-24 00:03:43 +00:00
&.is-small
+button-small
&.is-medium
+button-medium
&.is-large
+button-large
2016-04-10 15:00:32 +00:00
// Modifiers
2017-03-31 21:25:53 +00:00
&[disabled]
background-color: $button-background
border-color: $button-border
box-shadow: none
2016-04-10 15:00:32 +00:00
opacity: 0.5
&.is-fullwidth
2016-05-29 12:16:09 +00:00
display: flex
width: 100%
2016-01-24 00:03:43 +00:00
&.is-loading
color: transparent !important
2016-01-24 00:03:43 +00:00
pointer-events: none
&:after
2016-09-22 22:14:18 +00:00
+loader
2017-03-12 17:49:24 +00:00
+center(1em)
2016-01-24 00:03:43 +00:00
position: absolute !important
2017-05-28 15:07:29 +00:00
&.is-static
background-color: $button-static-background
border-color: $button-static-border
color: $button-static
box-shadow: none
pointer-events: none
2017-03-13 12:05:02 +00:00
// Adjustment for vertical spacing
button.button,
input[type="submit"].button
line-height: 1
2017-03-13 12:05:02 +00:00
padding-bottom: 0.4em
padding-top: 0.35em