public/vendors/bulma/sass/elements/button.sass

   1 $button-color: $text-strong !default
   2 $button-background-color: $scheme-main !default
   3 $button-family: false !default
   4
   5 $button-border-color: $border !default
   6 $button-border-width: $control-border-width !default
   7
   8 $button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
   9 $button-padding-horizontal: 1em !default
  10
  11 $button-hover-color: $link-hover !default
  12 $button-hover-border-color: $link-hover-border !default
  13
  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
  18
  19 $button-active-color: $link-active !default
  20 $button-active-border-color: $link-active-border !default
  21
  22 $button-text-color: $text !default
  23 $button-text-hover-background-color: $background !default
  24 $button-text-hover-color: $text-strong !default
  25
  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
  30
  31 $button-static-color: $text-light !default
  32 $button-static-background-color: $scheme-main-ter !default
  33 $button-static-border-color: $border !default
  34
  35 // The button sizes use mixins so they can be used at different breakpoints
  36 =button-small
  37   border-radius: $radius-small
  38   font-size: $size-small
  39 =button-normal
  40   font-size: $size-normal
  41 =button-medium
  42   font-size: $size-medium
  43 =button-large
  44   font-size: $size-large
  45
  46 .button
  47   @extend %control
  48   @extend %unselectable
  49   background-color: $button-background-color
  50   border-color: $button-border-color
  51   border-width: $button-border-width
  52   color: $button-color
  53   cursor: pointer
  54   @if $button-family
  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
  61   text-align: center
  62   white-space: nowrap
  63   strong
  64     color: inherit
  65   .icon
  66     &,
  67     &.is-small,
  68     &.is-medium,
  69     &.is-large
  70       height: 1.5em
  71       width: 1.5em
  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})
  81   // States
  82   &:hover,
  83   &.is-hovered
  84     border-color: $button-hover-border-color
  85     color: $button-hover-color
  86   &:focus,
  87   &.is-focused
  88     border-color: $button-focus-border-color
  89     color: $button-focus-color
  90     &:not(:active)
  91       box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
  92   &:active,
  93   &.is-active
  94     border-color: $button-active-border-color
  95     color: $button-active-color
  96   // Colors
  97   &.is-text
  98     background-color: transparent
  99     border-color: transparent
 100     color: $button-text-color
 101     text-decoration: underline
 102     &:hover,
 103     &.is-hovered,
 104     &:focus,
 105     &.is-focused
 106       background-color: $button-text-hover-background-color
 107       color: $button-text-hover-color
 108     &:active,
 109     &.is-active
 110       background-color: darken($button-text-hover-background-color, 5%)
 111       color: $button-text-hover-color
 112     &[disabled],
 113     fieldset[disabled] &
 114       background-color: transparent
 115       border-color: transparent
 116       box-shadow: none
 117   @each $name, $pair in $colors
 118     $color: nth($pair, 1)
 119     $color-invert: nth($pair, 2)
 120     &.is-#{$name}
 121       background-color: $color
 122       border-color: transparent
 123       color: $color-invert
 124       &:hover,
 125       &.is-hovered
 126         background-color: darken($color, 2.5%)
 127         border-color: transparent
 128         color: $color-invert
 129       &:focus,
 130       &.is-focused
 131         border-color: transparent
 132         color: $color-invert
 133         &:not(:active)
 134           box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
 135       &:active,
 136       &.is-active
 137         background-color: darken($color, 5%)
 138         border-color: transparent
 139         color: $color-invert
 140       &[disabled],
 141       fieldset[disabled] &
 142         background-color: $color
 143         border-color: transparent
 144         box-shadow: none
 145       &.is-inverted
 146         background-color: $color-invert
 147         color: $color
 148         &:hover,
 149         &.is-hovered
 150           background-color: darken($color-invert, 5%)
 151         &[disabled],
 152         fieldset[disabled] &
 153           background-color: $color-invert
 154           border-color: transparent
 155           box-shadow: none
 156           color: $color
 157       &.is-loading
 158         &::after
 159           border-color: transparent transparent $color-invert $color-invert !important
 160       &.is-outlined
 161         background-color: transparent
 162         border-color: $color
 163         color: $color
 164         &:hover,
 165         &.is-hovered,
 166         &:focus,
 167         &.is-focused
 168           background-color: $color
 169           border-color: $color
 170           color: $color-invert
 171         &.is-loading
 172           &::after
 173             border-color: transparent transparent $color $color !important
 174           &:hover,
 175           &.is-hovered,
 176           &:focus,
 177           &.is-focused
 178             &::after
 179               border-color: transparent transparent $color-invert $color-invert !important
 180         &[disabled],
 181         fieldset[disabled] &
 182           background-color: transparent
 183           border-color: $color
 184           box-shadow: none
 185           color: $color
 186       &.is-inverted.is-outlined
 187         background-color: transparent
 188         border-color: $color-invert
 189         color: $color-invert
 190         &:hover,
 191         &.is-hovered,
 192         &:focus,
 193         &.is-focused
 194           background-color: $color-invert
 195           color: $color
 196         &.is-loading
 197           &:hover,
 198           &.is-hovered,
 199           &:focus,
 200           &.is-focused
 201             &::after
 202               border-color: transparent transparent $color $color !important
 203         &[disabled],
 204         fieldset[disabled] &
 205           background-color: transparent
 206           border-color: $color-invert
 207           box-shadow: none
 208           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)
 213         &.is-light
 214           background-color: $color-light
 215           color: $color-dark
 216           &:hover,
 217           &.is-hovered
 218             background-color: darken($color-light, 2.5%)
 219             border-color: transparent
 220             color: $color-dark
 221           &:active,
 222           &.is-active
 223             background-color: darken($color-light, 5%)
 224             border-color: transparent
 225             color: $color-dark
 226   // Sizes
 227   &.is-small
 228     +button-small
 229   &.is-normal
 230     +button-normal
 231   &.is-medium
 232     +button-medium
 233   &.is-large
 234     +button-large
 235   // Modifiers
 236   &[disabled],
 237   fieldset[disabled] &
 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
 242   &.is-fullwidth
 243     display: flex
 244     width: 100%
 245   &.is-loading
 246     color: transparent !important
 247     pointer-events: none
 248     &::after
 249       @extend %loader
 250       +center(1em)
 251       position: absolute !important
 252   &.is-static
 253     background-color: $button-static-background-color
 254     border-color: $button-static-border-color
 255     color: $button-static-color
 256     box-shadow: none
 257     pointer-events: none
 258   &.is-rounded
 259     border-radius: $radius-rounded
 260     padding-left: calc(#{$button-padding-horizontal} + 0.25em)
 261     padding-right: calc(#{$button-padding-horizontal} + 0.25em)
 262
 263 .buttons
 264   align-items: center
 265   display: flex
 266   flex-wrap: wrap
 267   justify-content: flex-start
 268   .button
 269     margin-bottom: 0.5rem
 270     &:not(:last-child):not(.is-fullwidth)
 271       margin-right: 0.5rem
 272   &:last-child
 273     margin-bottom: -0.5rem
 274   &:not(:last-child)
 275     margin-bottom: 1rem
 276   // Sizes
 277   &.are-small
 278     .button:not(.is-normal):not(.is-medium):not(.is-large)
 279       +button-small
 280   &.are-medium
 281     .button:not(.is-small):not(.is-normal):not(.is-large)
 282       +button-medium
 283   &.are-large
 284     .button:not(.is-small):not(.is-normal):not(.is-medium)
 285       +button-large
 286   &.has-addons
 287     .button
 288       &:not(:first-child)
 289         border-bottom-left-radius: 0
 290         border-top-left-radius: 0
 291       &:not(:last-child)
 292         border-bottom-right-radius: 0
 293         border-top-right-radius: 0
 294         margin-right: -1px
 295       &:last-child
 296         margin-right: 0
 297       &:hover,
 298       &.is-hovered
 299         z-index: 2
 300       &:focus,
 301       &.is-focused,
 302       &:active,
 303       &.is-active,
 304       &.is-selected
 305         z-index: 3
 306         &:hover
 307           z-index: 4
 308       &.is-expanded
 309         flex-grow: 1
 310         flex-shrink: 1
 311   &.is-centered
 312     justify-content: center
 313     &:not(.has-addons)
 314       .button:not(.is-fullwidth)
 315         margin-left: 0.25rem
 316         margin-right: 0.25rem
 317   &.is-right
 318     justify-content: flex-end
 319     &:not(.has-addons)
 320       .button:not(.is-fullwidth)
 321         margin-left: 0.25rem
 322         margin-right: 0.25rem