bulma-rails 0.9.3 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +49 -14
  3. data/app/assets/stylesheets/bulma.scss +4 -0
  4. data/app/assets/stylesheets/sass/_index.scss +10 -0
  5. data/app/assets/stylesheets/sass/base/_index.scss +6 -0
  6. data/app/assets/stylesheets/sass/base/animations.scss +15 -0
  7. data/app/assets/stylesheets/sass/base/generic.scss +239 -0
  8. data/app/assets/stylesheets/sass/base/minireset.scss +92 -0
  9. data/app/assets/stylesheets/sass/base/skeleton.scss +126 -0
  10. data/app/assets/stylesheets/sass/components/_index.scss +13 -0
  11. data/app/assets/stylesheets/sass/components/breadcrumb.scss +139 -0
  12. data/app/assets/stylesheets/sass/components/card.scss +162 -0
  13. data/app/assets/stylesheets/sass/components/dropdown.scss +188 -0
  14. data/app/assets/stylesheets/sass/components/menu.scss +165 -0
  15. data/app/assets/stylesheets/sass/components/message.scss +183 -0
  16. data/app/assets/stylesheets/sass/components/modal.scss +164 -0
  17. data/app/assets/stylesheets/sass/components/navbar.scss +788 -0
  18. data/app/assets/stylesheets/sass/components/pagination.scss +379 -0
  19. data/app/assets/stylesheets/sass/components/panel.scss +218 -0
  20. data/app/assets/stylesheets/sass/components/tabs.scss +273 -0
  21. data/app/assets/stylesheets/sass/elements/_index.scss +16 -0
  22. data/app/assets/stylesheets/sass/elements/block.scss +6 -0
  23. data/app/assets/stylesheets/sass/elements/box.scss +59 -0
  24. data/app/assets/stylesheets/sass/elements/button.scss +640 -0
  25. data/app/assets/stylesheets/sass/elements/content.scss +283 -0
  26. data/app/assets/stylesheets/sass/elements/delete.scss +6 -0
  27. data/app/assets/stylesheets/sass/elements/icon.scss +67 -0
  28. data/app/assets/stylesheets/sass/elements/image.scss +62 -0
  29. data/app/assets/stylesheets/sass/elements/loader.scss +15 -0
  30. data/app/assets/stylesheets/sass/elements/notification.scss +105 -0
  31. data/app/assets/stylesheets/sass/elements/progress.scss +115 -0
  32. data/app/assets/stylesheets/sass/elements/table.scss +261 -0
  33. data/app/assets/stylesheets/sass/elements/tag.scss +219 -0
  34. data/app/assets/stylesheets/sass/elements/title.scss +128 -0
  35. data/app/assets/stylesheets/sass/form/_index.scss +9 -0
  36. data/app/assets/stylesheets/sass/form/checkbox-radio.scss +32 -0
  37. data/app/assets/stylesheets/sass/form/file.scss +330 -0
  38. data/app/assets/stylesheets/sass/form/input-textarea.scss +123 -0
  39. data/app/assets/stylesheets/sass/form/select.scss +143 -0
  40. data/app/assets/stylesheets/sass/form/shared.scss +172 -0
  41. data/app/assets/stylesheets/sass/form/tools.scss +341 -0
  42. data/app/assets/stylesheets/sass/grid/_index.scss +5 -0
  43. data/app/assets/stylesheets/sass/grid/columns-v2.scss +957 -0
  44. data/app/assets/stylesheets/sass/grid/columns.scss +877 -0
  45. data/app/assets/stylesheets/sass/grid/grid.scss +209 -0
  46. data/app/assets/stylesheets/sass/helpers/_index.scss +15 -0
  47. data/app/assets/stylesheets/sass/helpers/aspect-ratio.scss +10 -0
  48. data/app/assets/stylesheets/sass/helpers/border.scss +15 -0
  49. data/app/assets/stylesheets/sass/helpers/color.scss +364 -0
  50. data/app/assets/stylesheets/sass/helpers/flexbox.scss +62 -0
  51. data/app/assets/stylesheets/sass/helpers/float.scss +28 -0
  52. data/app/assets/stylesheets/sass/helpers/gap.scss +24 -0
  53. data/app/assets/stylesheets/sass/helpers/other.scss +19 -0
  54. data/app/assets/stylesheets/sass/helpers/overflow.scss +21 -0
  55. data/app/assets/stylesheets/sass/helpers/position.scss +19 -0
  56. data/app/assets/stylesheets/sass/helpers/spacing.scss +64 -0
  57. data/app/assets/stylesheets/sass/helpers/typography.scss +168 -0
  58. data/app/assets/stylesheets/sass/helpers/visibility.scss +221 -0
  59. data/app/assets/stylesheets/sass/layout/_index.scss +9 -0
  60. data/app/assets/stylesheets/sass/layout/container.scss +51 -0
  61. data/app/assets/stylesheets/sass/layout/footer.scss +23 -0
  62. data/app/assets/stylesheets/sass/layout/hero.scss +270 -0
  63. data/app/assets/stylesheets/sass/layout/level.scss +107 -0
  64. data/app/assets/stylesheets/sass/layout/media.scss +106 -0
  65. data/app/assets/stylesheets/sass/layout/section.scss +34 -0
  66. data/app/assets/stylesheets/sass/themes/_index.scss +35 -0
  67. data/app/assets/stylesheets/sass/themes/dark.scss +56 -0
  68. data/app/assets/stylesheets/sass/themes/light.scss +145 -0
  69. data/app/assets/stylesheets/sass/themes/setup.scss +174 -0
  70. data/app/assets/stylesheets/sass/utilities/_index.scss +7 -0
  71. data/app/assets/stylesheets/sass/utilities/controls.scss +85 -0
  72. data/app/assets/stylesheets/sass/utilities/css-variables.scss +425 -0
  73. data/app/assets/stylesheets/sass/utilities/derived-variables.scss +112 -0
  74. data/app/assets/stylesheets/sass/utilities/extends.scss +34 -0
  75. data/app/assets/stylesheets/sass/utilities/functions.scss +258 -0
  76. data/app/assets/stylesheets/sass/utilities/initial-variables.scss +155 -0
  77. data/app/assets/stylesheets/sass/utilities/mixins.scss +460 -0
  78. data/bulma-rails.gemspec +4 -6
  79. metadata +84 -74
  80. data/app/assets/stylesheets/bulma.sass +0 -10
  81. data/app/assets/stylesheets/sass/base/_all.sass +0 -6
  82. data/app/assets/stylesheets/sass/base/animations.sass +0 -5
  83. data/app/assets/stylesheets/sass/base/generic.sass +0 -145
  84. data/app/assets/stylesheets/sass/base/helpers.sass +0 -1
  85. data/app/assets/stylesheets/sass/base/minireset.sass +0 -79
  86. data/app/assets/stylesheets/sass/components/_all.sass +0 -15
  87. data/app/assets/stylesheets/sass/components/breadcrumb.sass +0 -77
  88. data/app/assets/stylesheets/sass/components/card.sass +0 -103
  89. data/app/assets/stylesheets/sass/components/dropdown.sass +0 -83
  90. data/app/assets/stylesheets/sass/components/level.sass +0 -79
  91. data/app/assets/stylesheets/sass/components/media.sass +0 -59
  92. data/app/assets/stylesheets/sass/components/menu.sass +0 -59
  93. data/app/assets/stylesheets/sass/components/message.sass +0 -101
  94. data/app/assets/stylesheets/sass/components/modal.sass +0 -117
  95. data/app/assets/stylesheets/sass/components/navbar.sass +0 -446
  96. data/app/assets/stylesheets/sass/components/pagination.sass +0 -166
  97. data/app/assets/stylesheets/sass/components/panel.sass +0 -121
  98. data/app/assets/stylesheets/sass/components/tabs.sass +0 -176
  99. data/app/assets/stylesheets/sass/elements/_all.sass +0 -16
  100. data/app/assets/stylesheets/sass/elements/box.sass +0 -26
  101. data/app/assets/stylesheets/sass/elements/button.sass +0 -345
  102. data/app/assets/stylesheets/sass/elements/container.sass +0 -29
  103. data/app/assets/stylesheets/sass/elements/content.sass +0 -159
  104. data/app/assets/stylesheets/sass/elements/form.sass +0 -1
  105. data/app/assets/stylesheets/sass/elements/icon.sass +0 -46
  106. data/app/assets/stylesheets/sass/elements/image.sass +0 -73
  107. data/app/assets/stylesheets/sass/elements/notification.sass +0 -52
  108. data/app/assets/stylesheets/sass/elements/other.sass +0 -31
  109. data/app/assets/stylesheets/sass/elements/progress.sass +0 -73
  110. data/app/assets/stylesheets/sass/elements/table.sass +0 -133
  111. data/app/assets/stylesheets/sass/elements/tag.sass +0 -140
  112. data/app/assets/stylesheets/sass/elements/title.sass +0 -70
  113. data/app/assets/stylesheets/sass/form/_all.sass +0 -9
  114. data/app/assets/stylesheets/sass/form/checkbox-radio.sass +0 -22
  115. data/app/assets/stylesheets/sass/form/file.sass +0 -184
  116. data/app/assets/stylesheets/sass/form/input-textarea.sass +0 -66
  117. data/app/assets/stylesheets/sass/form/select.sass +0 -87
  118. data/app/assets/stylesheets/sass/form/shared.sass +0 -60
  119. data/app/assets/stylesheets/sass/form/tools.sass +0 -215
  120. data/app/assets/stylesheets/sass/grid/_all.sass +0 -5
  121. data/app/assets/stylesheets/sass/grid/columns.sass +0 -513
  122. data/app/assets/stylesheets/sass/grid/tiles.sass +0 -36
  123. data/app/assets/stylesheets/sass/helpers/_all.sass +0 -12
  124. data/app/assets/stylesheets/sass/helpers/color.sass +0 -39
  125. data/app/assets/stylesheets/sass/helpers/flexbox.sass +0 -35
  126. data/app/assets/stylesheets/sass/helpers/float.sass +0 -10
  127. data/app/assets/stylesheets/sass/helpers/other.sass +0 -14
  128. data/app/assets/stylesheets/sass/helpers/overflow.sass +0 -2
  129. data/app/assets/stylesheets/sass/helpers/position.sass +0 -7
  130. data/app/assets/stylesheets/sass/helpers/spacing.sass +0 -31
  131. data/app/assets/stylesheets/sass/helpers/typography.sass +0 -103
  132. data/app/assets/stylesheets/sass/helpers/visibility.sass +0 -122
  133. data/app/assets/stylesheets/sass/layout/_all.sass +0 -6
  134. data/app/assets/stylesheets/sass/layout/footer.sass +0 -11
  135. data/app/assets/stylesheets/sass/layout/hero.sass +0 -153
  136. data/app/assets/stylesheets/sass/layout/section.sass +0 -17
  137. data/app/assets/stylesheets/sass/utilities/_all.sass +0 -9
  138. data/app/assets/stylesheets/sass/utilities/animations.sass +0 -1
  139. data/app/assets/stylesheets/sass/utilities/controls.sass +0 -49
  140. data/app/assets/stylesheets/sass/utilities/derived-variables.sass +0 -114
  141. data/app/assets/stylesheets/sass/utilities/extends.sass +0 -25
  142. data/app/assets/stylesheets/sass/utilities/functions.sass +0 -136
  143. data/app/assets/stylesheets/sass/utilities/initial-variables.sass +0 -78
  144. data/app/assets/stylesheets/sass/utilities/mixins.sass +0 -280
@@ -1,66 +0,0 @@
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
@@ -1,87 +0,0 @@
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
@@ -1,60 +0,0 @@
1
- @import "../utilities/controls"
2
- @import "../utilities/mixins"
3
-
4
- $form-colors: $colors !default
5
-
6
- $input-color: $text-strong !default
7
- $input-background-color: $scheme-main !default
8
- $input-border-color: $border !default
9
- $input-height: $control-height !default
10
- $input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
11
- $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
12
-
13
- $input-hover-color: $text-strong !default
14
- $input-hover-border-color: $border-hover !default
15
-
16
- $input-focus-color: $text-strong !default
17
- $input-focus-border-color: $link !default
18
- $input-focus-box-shadow-size: 0 0 0 0.125em !default
19
- $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
20
-
21
- $input-disabled-color: $text-light !default
22
- $input-disabled-background-color: $background !default
23
- $input-disabled-border-color: $background !default
24
- $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
25
-
26
- $input-arrow: $link !default
27
-
28
- $input-icon-color: $border !default
29
- $input-icon-active-color: $text !default
30
-
31
- $input-radius: $radius !default
32
-
33
- =input
34
- @extend %control
35
- background-color: $input-background-color
36
- border-color: $input-border-color
37
- border-radius: $input-radius
38
- color: $input-color
39
- +placeholder
40
- color: $input-placeholder-color
41
- &:hover,
42
- &.is-hovered
43
- border-color: $input-hover-border-color
44
- &:focus,
45
- &.is-focused,
46
- &:active,
47
- &.is-active
48
- border-color: $input-focus-border-color
49
- box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
50
- &[disabled],
51
- fieldset[disabled] &
52
- background-color: $input-disabled-background-color
53
- border-color: $input-disabled-border-color
54
- box-shadow: none
55
- color: $input-disabled-color
56
- +placeholder
57
- color: $input-disabled-placeholder-color
58
-
59
- %input
60
- +input
@@ -1,215 +0,0 @@
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,5 +0,0 @@
1
- /* Bulma Grid */
2
- @charset "utf-8"
3
-
4
- @import "columns"
5
- @import "tiles"