bulma/sass/elements/button.sass at master · csseditor/bulma · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
$button: $grey-darker !default
$button-background: $white !default
$button-border: $grey-lighter !default

$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

$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default

// The button sizes use mixins so they can be used at different breakpoints
=button-small
  border-radius: $radius-small
  font-size: $size-small
=button-medium
  font-size: $size-medium
=button-large
  font-size: $size-large

.button
  +control
  +unselectable
  background-color: $button-background
  border-color: $button-border
  color: $button
  cursor: pointer
  justify-content: center
  padding-left: 0.75em
  padding-right: 0.75em
  text-align: center
  white-space: nowrap
  strong
    color: inherit
  .icon
    &,
    &.is-small,
    &.is-medium,
    &.is-large
      height: 1.5em
      width: 1.5em
    &:first-child:not(:last-child)
      margin-left: calc(-0.375em - 1px)
      margin-right: 0.1875em
    &:last-child:not(:first-child)
      margin-left: 0.1875em
      margin-right: calc(-0.375em - 1px)
    &:first-child:last-child
      margin-left: calc(-0.375em - 1px)
      margin-right: calc(-0.375em - 1px)
  // States
  &:hover,
  &.is-hovered
    border-color: $button-hover-border
    color: $button-hover
  &:focus,
  &.is-focused
    border-color: $button-focus-border
    box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
    color: $button-focus
  &:active,
  &.is-active
    border-color: $button-active-border
    box-shadow: $button-shadow-inset
    color: $button-active
  // Colors
  &.is-link
    background-color: transparent
    border-color: transparent
    color: $text
    text-decoration: underline
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused,
    &:active,
    &.is-active
      background-color: $background
      color: $text-strong
    &[disabled]
      background-color: transparent
      border-color: transparent
      box-shadow: none
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      border-color: transparent
      color: $color-invert
      &:hover,
      &.is-hovered
        background-color: darken($color, 2.5%)
        border-color: transparent
        color: $color-invert
      &:focus,
      &.is-focused
        border-color: transparent
        box-shadow: 0 0 0.5em rgba($color, 0.25)
        color: $color-invert
      &:active,
      &.is-active
        background-color: darken($color, 5%)
        border-color: transparent
        box-shadow: $button-shadow-inset
        color: $color-invert
      &[disabled]
        background-color: $color
        border-color: transparent
        box-shadow: none
      &.is-inverted
        background-color: $color-invert
        color: $color
        &:hover
          background-color: darken($color-invert, 5%)
        &[disabled]
          background-color: $color-invert
          border-color: transparent
          box-shadow: none
          color: $color
      &.is-loading
        &:after
          border-color: transparent transparent $color-invert $color-invert !important
      &.is-outlined
        background-color: transparent
        border-color: $color
        color: $color
        &:hover,
        &:focus
          background-color: $color
          border-color: $color
          color: $color-invert
        &.is-loading
          &:after
            border-color: transparent transparent $color $color !important
        &[disabled]
          background-color: transparent
          border-color: $color
          box-shadow: none
          color: $color
      &.is-inverted.is-outlined
        background-color: transparent
        border-color: $color-invert
        color: $color-invert
        &:hover,
        &:focus
          background-color: $color-invert
          color: $color
        &[disabled]
          background-color: transparent
          border-color: $color-invert
          box-shadow: none
          color: $color-invert
  // Sizes
  &.is-small
    +button-small
  &.is-medium
    +button-medium
  &.is-large
    +button-large
  // Modifiers
  &[disabled]
    background-color: $button-background
    border-color: $button-border
    box-shadow: none
    opacity: 0.5
  &.is-fullwidth
    display: flex
    width: 100%
  &.is-loading
    color: transparent !important
    pointer-events: none
    &:after
      +loader
      +center(1em)
      position: absolute !important

// Adjustment for vertical spacing
button.button,
input[type="submit"].button
  line-height: 1
  padding-bottom: 0.4em
  padding-top: 0.35em