1 $button-color: $text-strong !default
2 $button-background-color: $scheme-main !default
3 $button-family: false !default
5 $button-border-color: $border !default
6 $button-border-width: $control-border-width !default
8 $button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
9 $button-padding-horizontal: 1em !default
11 $button-hover-color: $link-hover !default
12 $button-hover-border-color: $link-hover-border !default
14 $button-focus-color: $link-focus !default
15 $button-focus-border-color: $link-focus-border !default
16 $button-focus-box-shadow-size: 0 0 0 0.125em !default
17 $button-focus-box-shadow-color: rgba($link, 0.25) !default
19 $button-active-color: $link-active !default
20 $button-active-border-color: $link-active-border !default
22 $button-text-color: $text !default
23 $button-text-hover-background-color: $background !default
24 $button-text-hover-color: $text-strong !default
26 $button-disabled-background-color: $scheme-main !default
27 $button-disabled-border-color: $border !default
28 $button-disabled-shadow: none !default
29 $button-disabled-opacity: 0.5 !default
31 $button-static-color: $text-light !default
32 $button-static-background-color: $scheme-main-ter !default
33 $button-static-border-color: $border !default
35 // The button sizes use mixins so they can be used at different breakpoints
37 border-radius: $radius-small
38 font-size: $size-small
40 font-size: $size-normal
42 font-size: $size-medium
44 font-size: $size-large
49 background-color: $button-background-color
50 border-color: $button-border-color
51 border-width: $button-border-width
55 font-family: $button-family
56 justify-content: center
57 padding-bottom: $button-padding-vertical
58 padding-left: $button-padding-horizontal
59 padding-right: $button-padding-horizontal
60 padding-top: $button-padding-vertical
72 &:first-child:not(:last-child)
73 margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
74 margin-right: $button-padding-horizontal / 4
75 &:last-child:not(:first-child)
76 margin-left: $button-padding-horizontal / 4
77 margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
78 &:first-child:last-child
79 margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
80 margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
84 border-color: $button-hover-border-color
85 color: $button-hover-color
88 border-color: $button-focus-border-color
89 color: $button-focus-color
91 box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
94 border-color: $button-active-border-color
95 color: $button-active-color
98 background-color: transparent
99 border-color: transparent
100 color: $button-text-color
101 text-decoration: underline
106 background-color: $button-text-hover-background-color
107 color: $button-text-hover-color
110 background-color: darken($button-text-hover-background-color, 5%)
111 color: $button-text-hover-color
114 background-color: transparent
115 border-color: transparent
117 @each $name, $pair in $colors
118 $color: nth($pair, 1)
119 $color-invert: nth($pair, 2)
121 background-color: $color
122 border-color: transparent
126 background-color: darken($color, 2.5%)
127 border-color: transparent
131 border-color: transparent
134 box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
137 background-color: darken($color, 5%)
138 border-color: transparent
142 background-color: $color
143 border-color: transparent
146 background-color: $color-invert
150 background-color: darken($color-invert, 5%)
153 background-color: $color-invert
154 border-color: transparent
159 border-color: transparent transparent $color-invert $color-invert !important
161 background-color: transparent
168 background-color: $color
173 border-color: transparent transparent $color $color !important
179 border-color: transparent transparent $color-invert $color-invert !important
182 background-color: transparent
186 &.is-inverted.is-outlined
187 background-color: transparent
188 border-color: $color-invert
194 background-color: $color-invert
202 border-color: transparent transparent $color $color !important
205 background-color: transparent
206 border-color: $color-invert
209 // If light and dark colors are provided
210 @if length($pair) >= 4
211 $color-light: nth($pair, 3)
212 $color-dark: nth($pair, 4)
214 background-color: $color-light
218 background-color: darken($color-light, 2.5%)
219 border-color: transparent
223 background-color: darken($color-light, 5%)
224 border-color: transparent
238 background-color: $button-disabled-background-color
239 border-color: $button-disabled-border-color
240 box-shadow: $button-disabled-shadow
241 opacity: $button-disabled-opacity
246 color: transparent !important
251 position: absolute !important
253 background-color: $button-static-background-color
254 border-color: $button-static-border-color
255 color: $button-static-color
259 border-radius: $radius-rounded
260 padding-left: calc(#{$button-padding-horizontal} + 0.25em)
261 padding-right: calc(#{$button-padding-horizontal} + 0.25em)
267 justify-content: flex-start
269 margin-bottom: 0.5rem
270 &:not(:last-child):not(.is-fullwidth)
273 margin-bottom: -0.5rem
278 .button:not(.is-normal):not(.is-medium):not(.is-large)
281 .button:not(.is-small):not(.is-normal):not(.is-large)
284 .button:not(.is-small):not(.is-normal):not(.is-medium)
289 border-bottom-left-radius: 0
290 border-top-left-radius: 0
292 border-bottom-right-radius: 0
293 border-top-right-radius: 0
312 justify-content: center
314 .button:not(.is-fullwidth)
316 margin-right: 0.25rem
318 justify-content: flex-end
320 .button:not(.is-fullwidth)
322 margin-right: 0.25rem