bulma-rails 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/bulma.sass +2 -1
  4. data/app/assets/stylesheets/sass/base/_all.sass +0 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +13 -11
  6. data/app/assets/stylesheets/sass/base/helpers.sass +0 -0
  7. data/app/assets/stylesheets/sass/base/minireset.sass +0 -0
  8. data/app/assets/stylesheets/sass/components/_all.sass +0 -1
  9. data/app/assets/stylesheets/sass/components/card.sass +10 -15
  10. data/app/assets/stylesheets/sass/components/level.sass +16 -6
  11. data/app/assets/stylesheets/sass/components/media.sass +13 -30
  12. data/app/assets/stylesheets/sass/components/menu.sass +11 -11
  13. data/app/assets/stylesheets/sass/components/message.sass +47 -25
  14. data/app/assets/stylesheets/sass/components/modal.sass +1 -0
  15. data/app/assets/stylesheets/sass/components/nav.sass +33 -44
  16. data/app/assets/stylesheets/sass/components/pagination.sass +124 -28
  17. data/app/assets/stylesheets/sass/components/panel.sass +52 -35
  18. data/app/assets/stylesheets/sass/components/tabs.sass +10 -35
  19. data/app/assets/stylesheets/sass/elements/_all.sass +2 -0
  20. data/app/assets/stylesheets/sass/elements/box.sass +1 -1
  21. data/app/assets/stylesheets/sass/elements/button.sass +125 -42
  22. data/app/assets/stylesheets/sass/elements/content.sass +54 -25
  23. data/app/assets/stylesheets/sass/elements/form.sass +136 -92
  24. data/app/assets/stylesheets/sass/elements/icon.sass +12 -0
  25. data/app/assets/stylesheets/sass/elements/image.sass +0 -0
  26. data/app/assets/stylesheets/sass/elements/notification.sass +9 -5
  27. data/app/assets/stylesheets/sass/elements/other.sass +9 -61
  28. data/app/assets/stylesheets/sass/elements/progress.sass +4 -4
  29. data/app/assets/stylesheets/sass/elements/table.sass +16 -45
  30. data/app/assets/stylesheets/sass/elements/tag.sass +29 -0
  31. data/app/assets/stylesheets/sass/elements/title.sass +25 -44
  32. data/app/assets/stylesheets/sass/grid/_all.sass +0 -0
  33. data/app/assets/stylesheets/sass/grid/columns.sass +8 -8
  34. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -8
  35. data/app/assets/stylesheets/sass/layout/_all.sass +0 -0
  36. data/app/assets/stylesheets/sass/layout/footer.sass +1 -11
  37. data/app/assets/stylesheets/sass/layout/hero.sass +13 -12
  38. data/app/assets/stylesheets/sass/layout/section.sass +3 -3
  39. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -0
  40. data/app/assets/stylesheets/sass/utilities/controls.sass +14 -52
  41. data/app/assets/stylesheets/sass/utilities/functions.sass +10 -2
  42. data/app/assets/stylesheets/sass/utilities/mixins.sass +41 -36
  43. data/app/assets/stylesheets/sass/utilities/variables.sass +28 -24
  44. data/bulma-rails.gemspec +1 -1
  45. metadata +4 -12
  46. data/app/assets/stylesheets/sass/base/base.sass +0 -5
  47. data/app/assets/stylesheets/sass/base/classes.sass +0 -20
  48. data/app/assets/stylesheets/sass/components/components.sass +0 -14
  49. data/app/assets/stylesheets/sass/components/grid.sass +0 -282
  50. data/app/assets/stylesheets/sass/components/highlight.sass +0 -123
  51. data/app/assets/stylesheets/sass/elements/elements.sass +0 -13
  52. data/app/assets/stylesheets/sass/layout/layout.sass +0 -5
  53. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -5
  54. data/app/assets/stylesheets/sass/utilities/reset.sass +0 -174
  55. data/app/assets/stylesheets/sass/utilities/utilities.sass +0 -8
@@ -4,10 +4,12 @@
4
4
  @import "button.sass"
5
5
  @import "content.sass"
6
6
  @import "form.sass"
7
+ @import "icon.sass"
7
8
  @import "image.sass"
8
9
  @import "notification.sass"
9
10
  @import "progress.sass"
10
11
  @import "table.sass"
12
+ @import "tag.sass"
11
13
  @import "title.sass"
12
14
 
13
15
  @import "other.sass"
@@ -4,7 +4,7 @@
4
4
  border-radius: $radius-large
5
5
  box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
6
6
  display: block
7
- padding: 20px
7
+ padding: 1.25rem
8
8
 
9
9
  a.box
10
10
  &:hover,
@@ -1,64 +1,149 @@
1
+ $button: $grey-darker !default
2
+ $button-background: $white !default
3
+ $button-border: $grey-lighter !default
4
+
5
+ $button-hover: $link-hover !default
6
+ $button-hover-border: $link-hover-border !default
7
+
8
+ $button-focus: $link-focus !default
9
+ $button-focus-border: $link-focus-border !default
10
+
11
+ $button-active: $link-active !default
12
+ $button-active-border: $link-active-border !default
13
+
14
+ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
15
+
16
+ @function buttonIconSpacing($button-font-size, $icon-width)
17
+ // The rem height of the button
18
+ // based on a height of 2.5em
19
+ $button-height: 2.5 * $button-font-size // rem
20
+ // The rem total horizontal padding of the button
21
+ $button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
22
+ // For the icon center to align with the button center
23
+ // the horizontal padding + the icon width must equal the button height
24
+ // $button-height = $button-horizontal-padding + $icon-width + $difference
25
+ $difference: $button-height - $button-horizontal-padding - $icon-width
26
+ @return $difference / 2
27
+
28
+ =button-icon($button-font-size)
29
+ $small-offset: buttonIconSpacing($button-font-size, 1rem)
30
+ $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
31
+ $medium-offset: buttonIconSpacing($button-font-size, 2rem)
32
+ $large-offset: buttonIconSpacing($button-font-size, 3rem)
33
+ .icon
34
+ &:first-child:not(:last-child)
35
+ margin-left: $normal-offset
36
+ margin-right: $button-font-size / 2
37
+ &:last-child:not(:first-child)
38
+ margin-left: $button-font-size / 2
39
+ margin-right: $normal-offset
40
+ &:first-child:last-child
41
+ // The -1px is to account for the button 1px border
42
+ margin-left: calc(-1px + #{$normal-offset})
43
+ margin-right: calc(-1px + #{$normal-offset})
44
+ &.is-small
45
+ &:first-child:not(:last-child)
46
+ margin-left: $small-offset
47
+ &:last-child:not(:first-child)
48
+ margin-right: $small-offset
49
+ &:first-child:last-child
50
+ margin-left: calc(-1px + #{$small-offset})
51
+ margin-right: calc(-1px + #{$small-offset})
52
+ &.is-medium
53
+ &:first-child:not(:last-child)
54
+ margin-left: $medium-offset
55
+ &:last-child:not(:first-child)
56
+ margin-right: $medium-offset
57
+ &:first-child:last-child
58
+ margin-left: calc(-1px + #{$medium-offset})
59
+ margin-right: calc(-1px + #{$medium-offset})
60
+ &.is-large
61
+ &:first-child:not(:last-child)
62
+ margin-left: $large-offset
63
+ &:last-child:not(:first-child)
64
+ margin-right: $large-offset
65
+ &:first-child:last-child
66
+ margin-left: calc(-1px + #{$large-offset})
67
+ margin-right: calc(-1px + #{$large-offset})
68
+
69
+ // The button sizes use mixins so they can be used at different breakpoints
1
70
  =button-small
2
71
  border-radius: $radius-small
3
- font-size: 11px
4
- height: 24px
5
- line-height: 16px
6
- padding-left: 6px
7
- padding-right: 6px
72
+ font-size: $size-small
73
+ +button-icon($size-small)
8
74
  =button-medium
9
- font-size: 18px
10
- height: 40px
11
- padding-left: 14px
12
- padding-right: 14px
75
+ font-size: $size-medium
76
+ +button-icon($size-medium)
13
77
  =button-large
14
- font-size: 22px
15
- height: 48px
16
- padding-left: 20px
17
- padding-right: 20px
78
+ font-size: $size-large
79
+ +button-icon($size-large)
18
80
 
19
81
  .button
20
82
  +control
21
83
  +unselectable
84
+ background-color: $button-background
85
+ border: 1px solid $button-border
86
+ color: $button
22
87
  cursor: pointer
23
88
  justify-content: center
24
- padding-left: 10px
25
- padding-right: 10px
89
+ padding-left: 0.75em
90
+ padding-right: 0.75em
26
91
  text-align: center
27
92
  white-space: nowrap
28
93
  strong
29
94
  color: inherit
30
- small
31
- display: block
32
- font-size: $size-small
33
- line-height: 1
34
- margin-top: 5px
35
- .icon,
36
- .tag
37
- &:first-child
38
- margin-left: -2px
39
- margin-right: 4px
40
- &:last-child
41
- margin-left: 4px
42
- margin-right: -2px
95
+ +button-icon($size-normal)
96
+ // States
43
97
  &:hover,
98
+ &.is-hovered
99
+ border-color: $button-hover-border
100
+ color: $button-hover
44
101
  &:focus,
102
+ &.is-focused
103
+ border-color: $button-focus-border
104
+ box-shadow: 0 0 0.5em rgba($button-focus-border, 0.25)
105
+ color: $button-focus
106
+ &:active,
45
107
  &.is-active
46
- color: $control-hover
47
- &:active
48
- box-shadow: inset 0 1px 2px rgba($black, 0.2)
108
+ border-color: $button-active-border
109
+ box-shadow: $button-shadow-inset
110
+ color: $button-active
49
111
  // Colors
112
+ &.is-link
113
+ background-color: transparent
114
+ border-color: transparent
115
+ color: $text
116
+ text-decoration: underline
117
+ &:hover,
118
+ &.is-hovered,
119
+ &:focus,
120
+ &.is-focused,
121
+ &:active,
122
+ &.is-active
123
+ background-color: $background
124
+ color: $text-strong
50
125
  @each $name, $pair in $colors
51
126
  $color: nth($pair, 1)
52
127
  $color-invert: nth($pair, 2)
53
128
  &.is-#{$name}
54
129
  background-color: $color
55
- border-width: 0
130
+ border-color: transparent
56
131
  color: $color-invert
57
132
  &:hover,
133
+ &.is-hovered
134
+ background-color: darken($color, 2.5%)
135
+ border-color: transparent
136
+ color: $color-invert
58
137
  &:focus,
138
+ &.is-focused
139
+ border-color: transparent
140
+ box-shadow: 0 0 0.5em rgba($color, 0.25)
141
+ color: $color-invert
142
+ &:active,
59
143
  &.is-active
60
144
  background-color: darken($color, 5%)
61
145
  border-color: transparent
146
+ box-shadow: $button-shadow-inset
62
147
  color: $color-invert
63
148
  &.is-inverted
64
149
  background-color: $color-invert
@@ -71,22 +156,20 @@
71
156
  &.is-outlined
72
157
  background-color: transparent
73
158
  border-color: $color
74
- border-width: 1px
75
159
  color: $color
76
160
  &:hover,
77
161
  &:focus
78
162
  background-color: $color
79
163
  border-color: $color
80
164
  color: $color-invert
81
- &.is-link
82
- background-color: transparent
83
- border-width: 0
84
- color: $text
85
- text-decoration: underline
86
- &:hover,
87
- &:focus
88
- background-color: $background
89
- color: $text-strong
165
+ &.is-inverted.is-outlined
166
+ background-color: transparent
167
+ border-color: $color-invert
168
+ color: $color-invert
169
+ &:hover,
170
+ &:focus
171
+ background-color: $color-invert
172
+ color: $color
90
173
  // Sizes
91
174
  &.is-small
92
175
  +button-small
@@ -2,19 +2,14 @@
2
2
  +block
3
3
  color: $text
4
4
  // Inline
5
- a:not(.button)
6
- border-bottom: 1px solid $border
7
- &:visited
8
- color: $link-visited
9
- &:hover
10
- border-bottom-color: $link
11
5
  li + li
12
6
  margin-top: 0.25em
13
7
  // Block
14
- blockquote,
15
8
  p,
16
9
  ol,
17
- ul
10
+ ul,
11
+ blockquote,
12
+ table
18
13
  &:not(:last-child)
19
14
  margin-bottom: 1em
20
15
  h1,
@@ -24,30 +19,36 @@
24
19
  h5,
25
20
  h6
26
21
  color: $text-strong
27
- font-weight: 300
22
+ font-weight: $weight-normal
28
23
  line-height: 1.125
29
- margin-bottom: 20px
30
- h1,
31
- h2,
32
- h3
33
- &:not(:first-child)
34
- margin-top: 40px
35
- blockquote
36
- background-color: $background
37
- border-left: 5px solid $border
38
- padding: 1.5em
39
24
  h1
40
25
  font-size: 2em
26
+ margin-bottom: 0.5em
27
+ &:not(:first-child)
28
+ margin-top: 1em
41
29
  h2
42
30
  font-size: 1.75em
31
+ margin-bottom: 0.5714em
32
+ &:not(:first-child)
33
+ margin-top: 1.1428em
43
34
  h3
44
35
  font-size: 1.5em
36
+ margin-bottom: 0.6666em
37
+ &:not(:first-child)
38
+ margin-top: 1.3333em
45
39
  h4
46
40
  font-size: 1.25em
41
+ margin-bottom: 0.8em
47
42
  h5
48
43
  font-size: 1.125em
44
+ margin-bottom: 0.8888em
49
45
  h6
50
46
  font-size: 1em
47
+ margin-bottom: 1em
48
+ blockquote
49
+ background-color: $background
50
+ border-left: 5px solid $border
51
+ padding: 1.25em 1.5em
51
52
  ol
52
53
  list-style: decimal outside
53
54
  margin-left: 2em
@@ -63,12 +64,40 @@
63
64
  margin-top: 0.5em
64
65
  ul
65
66
  list-style-type: square
67
+ table
68
+ width: 100%
69
+ td,
70
+ th
71
+ border: 1px solid $border
72
+ border-width: 0 0 1px
73
+ padding: 0.5em 0.75em
74
+ vertical-align: top
75
+ th
76
+ color: $text-strong
77
+ text-align: left
78
+ tr
79
+ &:hover
80
+ background-color: $background
81
+ thead
82
+ td,
83
+ th
84
+ border-width: 0 0 2px
85
+ color: $text-strong
86
+ tfoot
87
+ td,
88
+ th
89
+ border-width: 2px 0 0
90
+ color: $text-strong
91
+ tbody
92
+ tr
93
+ &:last-child
94
+ td,
95
+ th
96
+ border-bottom-width: 0
66
97
  // Sizes
98
+ &.is-small
99
+ font-size: $size-small
67
100
  &.is-medium
68
- font-size: $size-5
69
- code
70
- font-size: $size-6
101
+ font-size: $size-medium
71
102
  &.is-large
72
- font-size: $size-4
73
- code
74
- font-size: $size-5
103
+ font-size: $size-large
@@ -1,18 +1,59 @@
1
- =form-control
1
+ $input: $grey-darker !default
2
+ $input-background: $white !default
3
+ $input-border: $grey-lighter !default
4
+
5
+ $input-hover: $grey-darker !default
6
+ $input-hover-border: $grey-light !default
7
+
8
+ $input-focus: $grey-darker !default
9
+ $input-focus-border: $link !default
10
+
11
+ $input-disabled: $text-light !default
12
+ $input-disabled-background: $background !default
13
+ $input-disabled-border: $background !default
14
+
15
+ $input-arrow: $link !default
16
+
17
+ $input-icon: $grey-lighter !default
18
+ $input-icon-active: $grey !default
19
+
20
+ $input-radius: $radius !default
21
+
22
+ =input
2
23
  +control
3
- @each $name, $pair in $colors
4
- $color: nth($pair, 1)
5
- &.is-#{$name}
6
- border-color: $color
24
+ background-color: $input-background
25
+ border: 1px solid $input-border
26
+ color: $input
27
+ &:hover,
28
+ &.is-hovered
29
+ border-color: $input-hover-border
30
+ &:focus,
31
+ &.is-focused,
32
+ &:active,
33
+ &.is-active
34
+ border-color: $input-focus-border
35
+ &[disabled],
36
+ &.is-disabled
37
+ background-color: $input-disabled-background
38
+ border-color: $input-disabled-border
39
+ box-shadow: none
40
+ color: $input-disabled
41
+ +placeholder
42
+ color: rgba($input, 0.3)
7
43
 
8
44
  .input,
9
45
  .textarea
10
- +form-control
46
+ +input
11
47
  box-shadow: inset 0 1px 2px rgba($black, 0.1)
12
48
  max-width: 100%
13
49
  width: 100%
14
50
  &[type="search"]
15
51
  border-radius: 290486px
52
+ // Colors
53
+ @each $name, $pair in $colors
54
+ $color: nth($pair, 1)
55
+ &.is-#{$name}
56
+ border-color: $color
16
57
  // Sizes
17
58
  &.is-small
18
59
  +control-small
@@ -30,7 +71,7 @@
30
71
 
31
72
  .textarea
32
73
  display: block
33
- line-height: 1.2
74
+ line-height: 1.25
34
75
  max-height: 600px
35
76
  max-width: 100%
36
77
  min-height: 120px
@@ -40,78 +81,77 @@
40
81
 
41
82
  .checkbox,
42
83
  .radio
84
+ align-items: center
43
85
  cursor: pointer
44
- display: inline-block
45
- line-height: 16px
86
+ display: inline-flex
87
+ flex-wrap: wrap
88
+ justify-content: flex-start
46
89
  position: relative
47
90
  vertical-align: top
48
91
  input
49
92
  cursor: pointer
93
+ margin-right: 0.5em
50
94
  &:hover
51
- color: $control-hover
95
+ color: $input-hover
52
96
  &.is-disabled
53
- color: $control-disabled
97
+ color: $input-disabled
54
98
  pointer-events: none
55
99
  input
56
100
  pointer-events: none
57
101
 
58
102
  .radio
59
103
  & + .radio
60
- margin-left: 10px
104
+ margin-left: 0.5em
61
105
 
62
106
  .select
63
107
  display: inline-block
64
- height: 32px
108
+ height: 2.5em
65
109
  position: relative
66
110
  vertical-align: top
111
+ &:after
112
+ +arrow($input-arrow)
113
+ margin-top: -0.375em
114
+ right: 1.125em
115
+ top: 50%
116
+ z-index: 4
67
117
  select
68
- +form-control
118
+ +input
69
119
  cursor: pointer
70
120
  display: block
121
+ font-size: 1em
71
122
  outline: none
72
- padding-right: 36px
123
+ padding-right: 2.5em
73
124
  &:hover
74
- border-color: $control-hover-border
125
+ border-color: $input-hover-border
75
126
  &::ms-expand
76
127
  display: none
77
- &.is-fullwidth
78
- width: 100%
79
- select
80
- width: 100%
81
- &:after
82
- +arrow($control-active)
83
- margin-top: -6px
84
- right: 16px
85
- top: 50%
128
+ // States
86
129
  &:hover
87
130
  &:after
88
- border-color: $control-hover
131
+ border-color: $input-hover
132
+ // Sizes
89
133
  &.is-small
90
- height: 24px
91
- select
92
- +control-small
93
- padding-right: 28px
134
+ +control-small
94
135
  &.is-medium
95
- height: 40px
96
- select
97
- +control-medium
98
- padding-right: 44px
136
+ +control-medium
99
137
  &.is-large
100
- height: 48px
138
+ +control-large
139
+ // Modifiers
140
+ &.is-fullwidth
141
+ width: 100%
101
142
  select
102
- +control-large
103
- padding-right: 52px
143
+ width: 100%
104
144
 
105
145
  .label
106
- color: $control
146
+ color: $input
107
147
  display: block
108
148
  font-weight: bold
109
149
  &:not(:last-child)
110
- margin-bottom: 5px
150
+ margin-bottom: 0.5em
111
151
 
112
152
  .help
113
153
  display: block
114
- font-size: $control-size-small
154
+ font-size: $size-small
115
155
  margin-top: 5px
116
156
  @each $name, $pair in $colors
117
157
  $color: nth($pair, 1)
@@ -122,20 +162,20 @@
122
162
 
123
163
  .control-label
124
164
  +mobile
125
- margin-bottom: 5px
165
+ margin-bottom: 0.5em
126
166
  +tablet
127
167
  flex-basis: 0
128
168
  flex-grow: 1
129
169
  flex-shrink: 0
130
- margin-right: 20px
131
- padding-top: 7px
170
+ margin-right: 1.5em
171
+ padding-top: 0.5em
132
172
  text-align: right
133
173
 
134
174
  .control
135
175
  position: relative
136
176
  text-align: left
137
177
  &:not(:last-child)
138
- margin-bottom: 10px
178
+ margin-bottom: 0.75rem
139
179
  // Modifiers
140
180
  &.has-addons
141
181
  display: flex
@@ -148,20 +188,26 @@
148
188
  width: auto
149
189
  &:hover
150
190
  z-index: 2
151
- &:active,
152
- &:focus
191
+ &:focus,
192
+ &:active
153
193
  z-index: 3
154
194
  &:first-child
155
- border-radius: $control-radius 0 0 $control-radius
195
+ border-radius: $input-radius 0 0 $input-radius
156
196
  select
157
- border-radius: $control-radius 0 0 $control-radius
197
+ border-radius: $input-radius 0 0 $input-radius
158
198
  &:last-child
159
- border-radius: 0 $control-radius $control-radius 0
199
+ border-radius: 0 $input-radius $input-radius 0
160
200
  select
161
- border-radius: 0 $control-radius $control-radius 0
201
+ border-radius: 0 $input-radius $input-radius 0
162
202
  &.is-expanded
163
203
  flex-grow: 1
164
204
  flex-shrink: 0
205
+ .select select
206
+ &:hover
207
+ z-index: 2
208
+ &:focus,
209
+ &:active
210
+ z-index: 3
165
211
  &.has-addons-centered
166
212
  justify-content: center
167
213
  &.has-addons-right
@@ -173,66 +219,64 @@
173
219
  flex-grow: 1
174
220
  flex-shrink: 0
175
221
  &.has-icon
176
- & > .fa
177
- +fa(14px, 24px)
178
- color: $control-icon
222
+ .icon
223
+ color: $input-icon
179
224
  pointer-events: none
180
225
  position: absolute
181
- top: 4px
226
+ top: ($size-normal * 2.5) / 2
182
227
  z-index: 4
183
228
  .input
184
- &:focus + .fa
185
- color: $control-icon-active
186
- &.is-small + .fa
187
- font-size: 10.5px
188
- top: 0
189
- &.is-medium + .fa
190
- font-size: 21px
191
- top: 8px
192
- &.is-large + .fa
193
- font-size: 21px
194
- top: 12px
229
+ &:focus
230
+ & + .icon
231
+ color: $input-icon-active
232
+ &.is-small
233
+ & + .icon
234
+ top: ($size-small * 2.5) / 2
235
+ &.is-medium
236
+ & + .icon
237
+ top: ($size-medium * 2.5) / 2
238
+ &.is-large
239
+ & + .icon
240
+ top: ($size-large * 2.5) / 2
195
241
  &:not(.has-icon-right)
196
- & > .fa
197
- left: 4px
242
+ .icon
243
+ left: ($size-normal * 2.5) / 2
244
+ transform: translateX(-50%) translateY(-50%)
198
245
  .input
199
- padding-left: 32px
246
+ padding-left: 2.5em
200
247
  &.is-small
201
- padding-left: 24px
202
- & + .fa
203
- left: 0
248
+ & + .icon
249
+ left: ($size-small * 2.5) / 2
204
250
  &.is-medium
205
- padding-left: 40px
206
- & + .fa
207
- left: 8px
251
+ & + .icon
252
+ left: ($size-medium * 2.5) / 2
208
253
  &.is-large
209
- padding-left: 48px
210
- & + .fa
211
- left: 12px
254
+ & + .icon
255
+ left: ($size-large * 2.5) / 2
212
256
  &.has-icon-right
213
- & > .fa
214
- right: 4px
257
+ .icon
258
+ right: ($size-normal * 2.5) / 2
259
+ transform: translateX(50%) translateY(-50%)
215
260
  .input
216
- padding-right: 32px
261
+ padding-right: 2.5em
217
262
  &.is-small
218
- padding-right: 24px
219
- & + .fa
220
- right: 0
263
+ & + .icon
264
+ right: ($size-small * 2.5) / 2
221
265
  &.is-medium
222
- padding-right: 40px
223
- & + .fa
224
- right: 8px
266
+ & + .icon
267
+ right: ($size-medium * 2.5) / 2
225
268
  &.is-large
226
- padding-right: 48px
227
- & + .fa
228
- right: 12px
269
+ & + .icon
270
+ right: ($size-large * 2.5) / 2
229
271
  &.is-grouped
230
272
  display: flex
231
273
  justify-content: flex-start
232
274
  & > .control
275
+ flex-basis: 0
276
+ flex-shrink: 0
233
277
  &:not(:last-child)
234
278
  margin-bottom: 0
235
- margin-right: 10px
279
+ margin-right: 0.75rem
236
280
  &.is-expanded
237
281
  flex-grow: 1
238
282
  flex-shrink: 1
@@ -252,5 +296,5 @@
252
296
  &:after
253
297
  +loader
254
298
  position: absolute !important
255
- right: 8px
256
- top: 8px
299
+ right: 0.75em
300
+ top: 0.75em