bulma-rails 0.7.4 → 0.9.1

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 (65) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +2 -0
  3. data/README.md +1 -1
  4. data/app/assets/stylesheets/bulma.sass +3 -1
  5. data/app/assets/stylesheets/sass/base/_all.sass +1 -1
  6. data/app/assets/stylesheets/sass/base/generic.sass +23 -10
  7. data/app/assets/stylesheets/sass/base/helpers.sass +1 -276
  8. data/app/assets/stylesheets/sass/base/minireset.sass +3 -8
  9. data/app/assets/stylesheets/sass/components/_all.sass +1 -1
  10. data/app/assets/stylesheets/sass/components/breadcrumb.sass +4 -4
  11. data/app/assets/stylesheets/sass/components/card.sass +19 -10
  12. data/app/assets/stylesheets/sass/components/dropdown.sass +15 -11
  13. data/app/assets/stylesheets/sass/components/level.sass +5 -3
  14. data/app/assets/stylesheets/sass/components/media.sass +14 -10
  15. data/app/assets/stylesheets/sass/components/menu.sass +16 -9
  16. data/app/assets/stylesheets/sass/components/message.sass +24 -11
  17. data/app/assets/stylesheets/sass/components/modal.sass +7 -5
  18. data/app/assets/stylesheets/sass/components/navbar.sass +43 -28
  19. data/app/assets/stylesheets/sass/components/pagination.sass +16 -10
  20. data/app/assets/stylesheets/sass/components/panel.sass +33 -15
  21. data/app/assets/stylesheets/sass/components/tabs.sass +36 -13
  22. data/app/assets/stylesheets/sass/elements/_all.sass +1 -1
  23. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  24. data/app/assets/stylesheets/sass/elements/button.sass +82 -32
  25. data/app/assets/stylesheets/sass/elements/container.sass +19 -17
  26. data/app/assets/stylesheets/sass/elements/content.sass +9 -5
  27. data/app/assets/stylesheets/sass/elements/form.sass +1 -602
  28. data/app/assets/stylesheets/sass/elements/image.sass +2 -0
  29. data/app/assets/stylesheets/sass/elements/notification.sass +19 -4
  30. data/app/assets/stylesheets/sass/elements/progress.sass +20 -14
  31. data/app/assets/stylesheets/sass/elements/table.sass +13 -8
  32. data/app/assets/stylesheets/sass/elements/tag.sass +34 -26
  33. data/app/assets/stylesheets/sass/elements/title.sass +9 -3
  34. data/app/assets/stylesheets/sass/form/_all.sass +9 -0
  35. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +22 -0
  36. data/app/assets/stylesheets/sass/form/file.sass +182 -0
  37. data/app/assets/stylesheets/sass/form/input-textarea.sass +66 -0
  38. data/app/assets/stylesheets/sass/form/select.sass +87 -0
  39. data/app/assets/stylesheets/sass/form/shared.sass +57 -0
  40. data/app/assets/stylesheets/sass/form/tools.sass +215 -0
  41. data/app/assets/stylesheets/sass/grid/_all.sass +1 -0
  42. data/app/assets/stylesheets/sass/grid/columns.sass +7 -7
  43. data/app/assets/stylesheets/sass/grid/tiles.sass +8 -6
  44. data/app/assets/stylesheets/sass/helpers/_all.sass +12 -0
  45. data/app/assets/stylesheets/sass/helpers/color.sass +37 -0
  46. data/app/assets/stylesheets/sass/helpers/flexbox.sass +35 -0
  47. data/app/assets/stylesheets/sass/helpers/float.sass +8 -0
  48. data/app/assets/stylesheets/sass/helpers/other.sass +11 -0
  49. data/app/assets/stylesheets/sass/helpers/overflow.sass +2 -0
  50. data/app/assets/stylesheets/sass/helpers/position.sass +5 -0
  51. data/app/assets/stylesheets/sass/helpers/spacing.sass +31 -0
  52. data/app/assets/stylesheets/sass/helpers/typography.sass +98 -0
  53. data/app/assets/stylesheets/sass/helpers/visibility.sass +122 -0
  54. data/app/assets/stylesheets/sass/layout/_all.sass +1 -0
  55. data/app/assets/stylesheets/sass/layout/footer.sass +4 -1
  56. data/app/assets/stylesheets/sass/layout/hero.sass +26 -35
  57. data/app/assets/stylesheets/sass/utilities/_all.sass +1 -0
  58. data/app/assets/stylesheets/sass/utilities/controls.sass +3 -3
  59. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +32 -10
  60. data/app/assets/stylesheets/sass/utilities/functions.sass +68 -15
  61. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +10 -4
  62. data/app/assets/stylesheets/sass/utilities/mixins.sass +31 -7
  63. data/bulma-rails.gemspec +2 -2
  64. metadata +23 -7
  65. data/app/assets/stylesheets/sass/components/list.sass +0 -39
@@ -0,0 +1,66 @@
1
+ $textarea-padding: $control-padding-horizontal !default
2
+ $textarea-max-height: 40em !default
3
+ $textarea-min-height: 8em !default
4
+
5
+ $textarea-colors: $form-colors !default
6
+
7
+ %input-textarea
8
+ @extend %input
9
+ box-shadow: $input-shadow
10
+ max-width: 100%
11
+ width: 100%
12
+ &[readonly]
13
+ box-shadow: none
14
+ // Colors
15
+ @each $name, $pair in $textarea-colors
16
+ $color: nth($pair, 1)
17
+ &.is-#{$name}
18
+ border-color: $color
19
+ &:focus,
20
+ &.is-focused,
21
+ &:active,
22
+ &.is-active
23
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
24
+ // Sizes
25
+ &.is-small
26
+ +control-small
27
+ &.is-medium
28
+ +control-medium
29
+ &.is-large
30
+ +control-large
31
+ // Modifiers
32
+ &.is-fullwidth
33
+ display: block
34
+ width: 100%
35
+ &.is-inline
36
+ display: inline
37
+ width: auto
38
+
39
+ .input
40
+ @extend %input-textarea
41
+ &.is-rounded
42
+ border-radius: $radius-rounded
43
+ padding-left: calc(#{$control-padding-horizontal} + 0.375em)
44
+ padding-right: calc(#{$control-padding-horizontal} + 0.375em)
45
+ &.is-static
46
+ background-color: transparent
47
+ border-color: transparent
48
+ box-shadow: none
49
+ padding-left: 0
50
+ padding-right: 0
51
+
52
+ .textarea
53
+ @extend %input-textarea
54
+ display: block
55
+ max-width: 100%
56
+ min-width: 100%
57
+ padding: $textarea-padding
58
+ resize: vertical
59
+ &:not([rows])
60
+ max-height: $textarea-max-height
61
+ min-height: $textarea-min-height
62
+ &[rows]
63
+ height: initial
64
+ // Modifiers
65
+ &.has-fixed-size
66
+ resize: none
@@ -0,0 +1,87 @@
1
+ $select-colors: $form-colors !default
2
+
3
+ .select
4
+ display: inline-block
5
+ max-width: 100%
6
+ position: relative
7
+ vertical-align: top
8
+ &:not(.is-multiple)
9
+ height: $input-height
10
+ &:not(.is-multiple):not(.is-loading)
11
+ &::after
12
+ @extend %arrow
13
+ border-color: $input-arrow
14
+ +ltr-position(1.125em)
15
+ z-index: 4
16
+ &.is-rounded
17
+ select
18
+ border-radius: $radius-rounded
19
+ +ltr-property("padding", 1em, false)
20
+ select
21
+ @extend %input
22
+ cursor: pointer
23
+ display: block
24
+ font-size: 1em
25
+ max-width: 100%
26
+ outline: none
27
+ &::-ms-expand
28
+ display: none
29
+ &[disabled]:hover,
30
+ fieldset[disabled] &:hover
31
+ border-color: $input-disabled-border-color
32
+ &:not([multiple])
33
+ +ltr-property("padding", 2.5em)
34
+ &[multiple]
35
+ height: auto
36
+ padding: 0
37
+ option
38
+ padding: 0.5em 1em
39
+ // States
40
+ &:not(.is-multiple):not(.is-loading):hover
41
+ &::after
42
+ border-color: $input-hover-color
43
+ // Colors
44
+ @each $name, $pair in $select-colors
45
+ $color: nth($pair, 1)
46
+ &.is-#{$name}
47
+ &:not(:hover)::after
48
+ border-color: $color
49
+ select
50
+ border-color: $color
51
+ &:hover,
52
+ &.is-hovered
53
+ border-color: bulmaDarken($color, 5%)
54
+ &:focus,
55
+ &.is-focused,
56
+ &:active,
57
+ &.is-active
58
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
59
+ // Sizes
60
+ &.is-small
61
+ +control-small
62
+ &.is-medium
63
+ +control-medium
64
+ &.is-large
65
+ +control-large
66
+ // Modifiers
67
+ &.is-disabled
68
+ &::after
69
+ border-color: $input-disabled-color
70
+ &.is-fullwidth
71
+ width: 100%
72
+ select
73
+ width: 100%
74
+ &.is-loading
75
+ &::after
76
+ @extend %loader
77
+ margin-top: 0
78
+ position: absolute
79
+ +ltr-position(0.625em)
80
+ top: 0.625em
81
+ transform: none
82
+ &.is-small:after
83
+ font-size: $size-small
84
+ &.is-medium:after
85
+ font-size: $size-medium
86
+ &.is-large:after
87
+ font-size: $size-large
@@ -0,0 +1,57 @@
1
+ $form-colors: $colors !default
2
+
3
+ $input-color: $text-strong !default
4
+ $input-background-color: $scheme-main !default
5
+ $input-border-color: $border !default
6
+ $input-height: $control-height !default
7
+ $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
8
+ $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
9
+
10
+ $input-hover-color: $text-strong !default
11
+ $input-hover-border-color: $border-hover !default
12
+
13
+ $input-focus-color: $text-strong !default
14
+ $input-focus-border-color: $link !default
15
+ $input-focus-box-shadow-size: 0 0 0 0.125em !default
16
+ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
17
+
18
+ $input-disabled-color: $text-light !default
19
+ $input-disabled-background-color: $background !default
20
+ $input-disabled-border-color: $background !default
21
+ $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
22
+
23
+ $input-arrow: $link !default
24
+
25
+ $input-icon-color: $border !default
26
+ $input-icon-active-color: $text !default
27
+
28
+ $input-radius: $radius !default
29
+
30
+ =input
31
+ @extend %control
32
+ background-color: $input-background-color
33
+ border-color: $input-border-color
34
+ border-radius: $input-radius
35
+ color: $input-color
36
+ +placeholder
37
+ color: $input-placeholder-color
38
+ &:hover,
39
+ &.is-hovered
40
+ border-color: $input-hover-border-color
41
+ &:focus,
42
+ &.is-focused,
43
+ &:active,
44
+ &.is-active
45
+ border-color: $input-focus-border-color
46
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
47
+ &[disabled],
48
+ fieldset[disabled] &
49
+ background-color: $input-disabled-background-color
50
+ border-color: $input-disabled-border-color
51
+ box-shadow: none
52
+ color: $input-disabled-color
53
+ +placeholder
54
+ color: $input-disabled-placeholder-color
55
+
56
+ %input
57
+ +input
@@ -0,0 +1,215 @@
1
+ $label-color: $text-strong !default
2
+ $label-weight: $weight-bold !default
3
+
4
+ $help-size: $size-small !default
5
+
6
+ $label-colors: $form-colors !default
7
+
8
+ .label
9
+ color: $label-color
10
+ display: block
11
+ font-size: $size-normal
12
+ font-weight: $label-weight
13
+ &:not(:last-child)
14
+ margin-bottom: 0.5em
15
+ // Sizes
16
+ &.is-small
17
+ font-size: $size-small
18
+ &.is-medium
19
+ font-size: $size-medium
20
+ &.is-large
21
+ font-size: $size-large
22
+
23
+ .help
24
+ display: block
25
+ font-size: $help-size
26
+ margin-top: 0.25rem
27
+ @each $name, $pair in $label-colors
28
+ $color: nth($pair, 1)
29
+ &.is-#{$name}
30
+ color: $color
31
+
32
+ // Containers
33
+
34
+ .field
35
+ &:not(:last-child)
36
+ margin-bottom: 0.75rem
37
+ // Modifiers
38
+ &.has-addons
39
+ display: flex
40
+ justify-content: flex-start
41
+ .control
42
+ &:not(:last-child)
43
+ +ltr-property("margin", -1px)
44
+ &:not(:first-child):not(:last-child)
45
+ .button,
46
+ .input,
47
+ .select select
48
+ border-radius: 0
49
+ &:first-child:not(:only-child)
50
+ .button,
51
+ .input,
52
+ .select select
53
+ +ltr
54
+ border-bottom-right-radius: 0
55
+ border-top-right-radius: 0
56
+ +rtl
57
+ border-bottom-left-radius: 0
58
+ border-top-left-radius: 0
59
+ &:last-child:not(:only-child)
60
+ .button,
61
+ .input,
62
+ .select select
63
+ +ltr
64
+ border-bottom-left-radius: 0
65
+ border-top-left-radius: 0
66
+ +rtl
67
+ border-bottom-right-radius: 0
68
+ border-top-right-radius: 0
69
+ .button,
70
+ .input,
71
+ .select select
72
+ &:not([disabled])
73
+ &:hover,
74
+ &.is-hovered
75
+ z-index: 2
76
+ &:focus,
77
+ &.is-focused,
78
+ &:active,
79
+ &.is-active
80
+ z-index: 3
81
+ &:hover
82
+ z-index: 4
83
+ &.is-expanded
84
+ flex-grow: 1
85
+ flex-shrink: 1
86
+ &.has-addons-centered
87
+ justify-content: center
88
+ &.has-addons-right
89
+ justify-content: flex-end
90
+ &.has-addons-fullwidth
91
+ .control
92
+ flex-grow: 1
93
+ flex-shrink: 0
94
+ &.is-grouped
95
+ display: flex
96
+ justify-content: flex-start
97
+ & > .control
98
+ flex-shrink: 0
99
+ &:not(:last-child)
100
+ margin-bottom: 0
101
+ +ltr-property("margin", 0.75rem)
102
+ &.is-expanded
103
+ flex-grow: 1
104
+ flex-shrink: 1
105
+ &.is-grouped-centered
106
+ justify-content: center
107
+ &.is-grouped-right
108
+ justify-content: flex-end
109
+ &.is-grouped-multiline
110
+ flex-wrap: wrap
111
+ & > .control
112
+ &:last-child,
113
+ &:not(:last-child)
114
+ margin-bottom: 0.75rem
115
+ &:last-child
116
+ margin-bottom: -0.75rem
117
+ &:not(:last-child)
118
+ margin-bottom: 0
119
+ &.is-horizontal
120
+ +tablet
121
+ display: flex
122
+
123
+ .field-label
124
+ .label
125
+ font-size: inherit
126
+ +mobile
127
+ margin-bottom: 0.5rem
128
+ +tablet
129
+ flex-basis: 0
130
+ flex-grow: 1
131
+ flex-shrink: 0
132
+ +ltr-property("margin", 1.5rem)
133
+ text-align: right
134
+ &.is-small
135
+ font-size: $size-small
136
+ padding-top: 0.375em
137
+ &.is-normal
138
+ padding-top: 0.375em
139
+ &.is-medium
140
+ font-size: $size-medium
141
+ padding-top: 0.375em
142
+ &.is-large
143
+ font-size: $size-large
144
+ padding-top: 0.375em
145
+
146
+ .field-body
147
+ .field .field
148
+ margin-bottom: 0
149
+ +tablet
150
+ display: flex
151
+ flex-basis: 0
152
+ flex-grow: 5
153
+ flex-shrink: 1
154
+ .field
155
+ margin-bottom: 0
156
+ & > .field
157
+ flex-shrink: 1
158
+ &:not(.is-narrow)
159
+ flex-grow: 1
160
+ &:not(:last-child)
161
+ +ltr-property("margin", 0.75rem)
162
+
163
+ .control
164
+ box-sizing: border-box
165
+ clear: both
166
+ font-size: $size-normal
167
+ position: relative
168
+ text-align: inherit
169
+ // Modifiers
170
+ &.has-icons-left,
171
+ &.has-icons-right
172
+ .input,
173
+ .select
174
+ &:focus
175
+ & ~ .icon
176
+ color: $input-icon-active-color
177
+ &.is-small ~ .icon
178
+ font-size: $size-small
179
+ &.is-medium ~ .icon
180
+ font-size: $size-medium
181
+ &.is-large ~ .icon
182
+ font-size: $size-large
183
+ .icon
184
+ color: $input-icon-color
185
+ height: $input-height
186
+ pointer-events: none
187
+ position: absolute
188
+ top: 0
189
+ width: $input-height
190
+ z-index: 4
191
+ &.has-icons-left
192
+ .input,
193
+ .select select
194
+ padding-left: $input-height
195
+ .icon.is-left
196
+ left: 0
197
+ &.has-icons-right
198
+ .input,
199
+ .select select
200
+ padding-right: $input-height
201
+ .icon.is-right
202
+ right: 0
203
+ &.is-loading
204
+ &::after
205
+ @extend %loader
206
+ position: absolute !important
207
+ +ltr-position(0.625em)
208
+ top: 0.625em
209
+ z-index: 4
210
+ &.is-small:after
211
+ font-size: $size-small
212
+ &.is-medium:after
213
+ font-size: $size-medium
214
+ &.is-large:after
215
+ font-size: $size-large
@@ -1,3 +1,4 @@
1
+ /* Bulma Grid */
1
2
  @charset "utf-8"
2
3
 
3
4
  @import "columns.sass"
@@ -56,7 +56,7 @@ $column-gap: 0.75rem !default
56
56
  margin-left: 60%
57
57
  .columns.is-mobile > &.is-offset-four-fifths
58
58
  margin-left: 80%
59
- @for $i from 1 through 12
59
+ @for $i from 0 through 12
60
60
  .columns.is-mobile > &.is-#{$i}
61
61
  flex: none
62
62
  width: percentage($i / 12)
@@ -113,7 +113,7 @@ $column-gap: 0.75rem !default
113
113
  margin-left: 60%
114
114
  &.is-offset-four-fifths-mobile
115
115
  margin-left: 80%
116
- @for $i from 1 through 12
116
+ @for $i from 0 through 12
117
117
  &.is-#{$i}-mobile
118
118
  flex: none
119
119
  width: percentage($i / 12)
@@ -190,7 +190,7 @@ $column-gap: 0.75rem !default
190
190
  &.is-offset-four-fifths,
191
191
  &.is-offset-four-fifths-tablet
192
192
  margin-left: 80%
193
- @for $i from 1 through 12
193
+ @for $i from 0 through 12
194
194
  &.is-#{$i},
195
195
  &.is-#{$i}-tablet
196
196
  flex: none
@@ -249,7 +249,7 @@ $column-gap: 0.75rem !default
249
249
  margin-left: 60%
250
250
  &.is-offset-four-fifths-touch
251
251
  margin-left: 80%
252
- @for $i from 1 through 12
252
+ @for $i from 0 through 12
253
253
  &.is-#{$i}-touch
254
254
  flex: none
255
255
  width: percentage($i / 12)
@@ -306,7 +306,7 @@ $column-gap: 0.75rem !default
306
306
  margin-left: 60%
307
307
  &.is-offset-four-fifths-desktop
308
308
  margin-left: 80%
309
- @for $i from 1 through 12
309
+ @for $i from 0 through 12
310
310
  &.is-#{$i}-desktop
311
311
  flex: none
312
312
  width: percentage($i / 12)
@@ -363,7 +363,7 @@ $column-gap: 0.75rem !default
363
363
  margin-left: 60%
364
364
  &.is-offset-four-fifths-widescreen
365
365
  margin-left: 80%
366
- @for $i from 1 through 12
366
+ @for $i from 0 through 12
367
367
  &.is-#{$i}-widescreen
368
368
  flex: none
369
369
  width: percentage($i / 12)
@@ -420,7 +420,7 @@ $column-gap: 0.75rem !default
420
420
  margin-left: 60%
421
421
  &.is-offset-four-fifths-fullhd
422
422
  margin-left: 80%
423
- @for $i from 1 through 12
423
+ @for $i from 0 through 12
424
424
  &.is-#{$i}-fullhd
425
425
  flex: none
426
426
  width: percentage($i / 12)