bulma/sass/elements/button.sass

200 lines
5.5 KiB
Sass
Raw Normal View History

2017-07-28 20:05:15 +00:00
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-border-color: $grey-lighter !default
2016-10-30 10:41:53 +00:00
2017-07-28 20:05:15 +00:00
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default
2016-10-29 20:51:13 +00:00
2017-07-28 20:05:15 +00:00
$button-link-color: $text !default
$button-link-hover-background-color: $background !default
$button-link-hover-color: $text-strong !default
$button-disabled-background-color: $white !default
$button-disabled-border-color: $grey-lighter !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $grey !default
$button-static-background-color: $white-ter !default
$button-static-border-color: $grey-lighter !default
2017-05-28 15:07:29 +00:00
$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
2017-07-28 20:05:15 +00:00
background-color: $button-background-color
border-color: $button-border-color
color: $button-color
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
2017-07-28 20:05:15 +00:00
border-color: $button-hover-border-color
color: $button-hover-color
2016-05-30 18:41:54 +00:00
&:focus,
2016-10-29 20:51:13 +00:00
&.is-focused
2017-07-28 20:05:15 +00:00
border-color: $button-focus-border-color
2017-07-30 17:22:13 +00:00
// box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
2017-07-28 20:05:15 +00:00
color: $button-focus-color
2016-10-29 20:51:13 +00:00
&:active,
2016-05-30 18:41:54 +00:00
&.is-active
2017-07-28 20:05:15 +00:00
border-color: $button-active-border-color
2016-10-29 20:51:13 +00:00
box-shadow: $button-shadow-inset
2017-07-28 20:05:15 +00:00
color: $button-active-color
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
2017-07-28 20:05:15 +00:00
color: $button-link-color
2016-10-29 20:51:13 +00:00
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
&.is-focused,
&:active,
&.is-active
2017-07-28 20:05:15 +00:00
background-color: $button-link-hover-background-color
color: $button-link-hover-color
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]
2017-07-28 20:05:15 +00:00
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow
opacity: $button-disabled-opacity
&.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
2017-07-28 20:05:15 +00:00
background-color: $button-static-background-color
border-color: $button-static-border-color
color: $button-static-color
2017-05-28 15:07:29 +00:00
box-shadow: none
pointer-events: none