bulma/sass/elements/button.sass

248 lines
6.6 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
2017-08-30 16:29:01 +00:00
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: rgba($link, 0.25) !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-10-07 19:52:39 +00:00
$button-text-color: $text !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
2017-07-28 20:05:15 +00:00
$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
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
color: $button-focus-color
2017-08-30 16:29:01 +00:00
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-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
color: $button-active-color
2016-04-10 15:00:32 +00:00
// Colors
2017-10-07 19:52:39 +00:00
&.is-text
2016-10-29 20:51:13 +00:00
background-color: transparent
2016-10-30 10:41:53 +00:00
border-color: transparent
2017-10-07 19:52:39 +00:00
color: $button-text-color
2016-10-29 20:51:13 +00:00
text-decoration: underline
&:hover,
&.is-hovered,
&:focus,
2017-08-30 16:29:01 +00:00
&.is-focused
2017-10-07 19:52:39 +00:00
background-color: $button-text-hover-background-color
color: $button-text-hover-color
2016-10-29 20:51:13 +00:00
&:active,
&.is-active
2017-10-07 19:52:39 +00:00
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-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
color: $color-invert
2017-08-30 16:29:01 +00:00
&:not(:active)
box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
2016-10-29 20:51:13 +00:00
&: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
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
&.is-rounded
border-radius: $radius-rounded
padding-left: 1em
padding-right: 1em
2017-10-17 10:53:44 +00:00
.buttons
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.button
margin-bottom: 0.5rem
&:not(:last-child)
margin-right: 0.5rem
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
&.has-addons
.button
&:not(:first-child)
border-bottom-left-radius: 0
border-top-left-radius: 0
&:not(:last-child)
border-bottom-right-radius: 0
border-top-right-radius: 0
margin-right: -1px
&:last-child
margin-right: 0
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.is-focused,
&:active,
&.is-active,
&.is-selected
z-index: 3
&:hover
z-index: 4
2018-02-18 04:28:28 +00:00
&.is-expanded
flex-grow: 1
2017-10-17 10:53:44 +00:00
&.is-centered
justify-content: center
&.is-right
justify-content: flex-end