bulma-rails 0.3.2 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/stylesheets/bulma.sass +1 -1
- data/app/assets/stylesheets/sass/base/generic.sass +0 -3
- data/app/assets/stylesheets/sass/components/card.sass +0 -2
- data/app/assets/stylesheets/sass/components/level.sass +6 -1
- data/app/assets/stylesheets/sass/components/nav.sass +9 -5
- data/app/assets/stylesheets/sass/components/pagination.sass +12 -2
- data/app/assets/stylesheets/sass/elements/button.sass +24 -60
- data/app/assets/stylesheets/sass/elements/form.sass +112 -97
- data/app/assets/stylesheets/sass/elements/icon.sass +19 -6
- data/app/assets/stylesheets/sass/elements/other.sass +5 -2
- data/app/assets/stylesheets/sass/elements/tag.sass +1 -1
- data/app/assets/stylesheets/sass/elements/title.sass +3 -3
- data/app/assets/stylesheets/sass/utilities/controls.sass +6 -4
- data/app/assets/stylesheets/sass/utilities/functions.sass +0 -8
- data/app/assets/stylesheets/sass/utilities/mixins.sass +20 -26
- data/app/assets/stylesheets/sass/utilities/variables.sass +20 -5
- data/bulma-rails.gemspec +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: db16d2faf9db0b9807a60d466dbffcea0d826a04
|
4
|
+
data.tar.gz: dda2dff29fb0b32c1ae6492baee6a7a12de8f443
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 29e752ca65c94363206d6df6eb5eab7af8c306b8707eae87c91ebd4346a06c390191f552d50cd9cf8c341d2cb4d282f30629be88c89c854934360652a437648d
|
7
|
+
data.tar.gz: fc816a8708f338b8d7d0524b7e21caf97d45ba9ac1d6658ad7cf13c81a3665ab2527f121283e7613b59d5927b0b3268606a297bee11a2ddae0ec5bb69c5c9354
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
$nav-height: 3.
|
1
|
+
$nav-height: 3.25rem !default
|
2
2
|
|
3
3
|
// Components
|
4
4
|
|
@@ -15,6 +15,7 @@ $nav-height: 3.5rem !default
|
|
15
15
|
flex-shrink: 0
|
16
16
|
font-size: $size-normal
|
17
17
|
justify-content: center
|
18
|
+
line-height: 1.5
|
18
19
|
padding: 0.5rem 0.75rem
|
19
20
|
a
|
20
21
|
flex-grow: 1
|
@@ -43,17 +44,17 @@ a.nav-item
|
|
43
44
|
&.is-tab
|
44
45
|
border-bottom: 1px solid transparent
|
45
46
|
border-top: 1px solid transparent
|
46
|
-
padding-bottom: calc(0.
|
47
|
+
padding-bottom: calc(0.75rem - 1px)
|
47
48
|
padding-left: 1rem
|
48
49
|
padding-right: 1rem
|
49
|
-
padding-top: calc(0.
|
50
|
+
padding-top: calc(0.75rem - 1px)
|
50
51
|
&:hover
|
51
52
|
border-bottom-color: $primary
|
52
53
|
border-top-color: transparent
|
53
54
|
&.is-active
|
54
55
|
border-bottom: 3px solid $primary
|
55
56
|
color: $primary
|
56
|
-
padding-bottom: calc(0.
|
57
|
+
padding-bottom: calc(0.75rem - 3px)
|
57
58
|
// Responsiveness
|
58
59
|
+desktop
|
59
60
|
&.is-brand
|
@@ -123,7 +124,10 @@ a.nav-item
|
|
123
124
|
align-items: stretch
|
124
125
|
display: flex
|
125
126
|
min-height: $nav-height
|
126
|
-
width: 100%
|
127
127
|
// Modifiers
|
128
128
|
&.has-shadow
|
129
129
|
box-shadow: 0 2px 3px rgba($black, 0.1)
|
130
|
+
// Responsiveness
|
131
|
+
+mobile
|
132
|
+
& > .container
|
133
|
+
width: 100%
|
@@ -23,6 +23,16 @@ $pagination-ellipsis: $grey-light !default
|
|
23
23
|
|
24
24
|
$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
25
25
|
|
26
|
+
.pagination
|
27
|
+
font-size: $size-normal
|
28
|
+
// Sizes
|
29
|
+
&.is-small
|
30
|
+
font-size: $size-small
|
31
|
+
&.is-medium
|
32
|
+
font-size: $size-medium
|
33
|
+
&.is-large
|
34
|
+
font-size: $size-large
|
35
|
+
|
26
36
|
.pagination,
|
27
37
|
.pagination-list
|
28
38
|
align-items: center
|
@@ -36,7 +46,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|
36
46
|
.pagination-ellipsis
|
37
47
|
+control
|
38
48
|
+unselectable
|
39
|
-
font-size:
|
49
|
+
font-size: 1em
|
40
50
|
padding-left: 0.5em
|
41
51
|
padding-right: 0.5em
|
42
52
|
justify-content: center
|
@@ -46,7 +56,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
|
|
46
56
|
.pagination-next,
|
47
57
|
.pagination-link
|
48
58
|
border: 1px solid $pagination-border
|
49
|
-
min-width: 2.
|
59
|
+
min-width: 2.25em
|
50
60
|
&:hover
|
51
61
|
border-color: $pagination-hover-border
|
52
62
|
color: $pagination-hover
|
@@ -13,72 +13,14 @@ $button-active-border: $link-active-border !default
|
|
13
13
|
|
14
14
|
$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
15
15
|
|
16
|
-
@function buttonIconSpacing($button-font-size, $icon-width)
|
17
|
-
// The button font-size value with no unit
|
18
|
-
$button-value: removeUnit($button-font-size)
|
19
|
-
// The rem height of the button
|
20
|
-
// based on a height of 2.5em
|
21
|
-
$button-height: 2.5rem * $button-value // rem
|
22
|
-
// The rem total horizontal padding of the button
|
23
|
-
$button-horizontal-padding: 2 * 0.75rem * $button-value // rem
|
24
|
-
// For the icon center to align with the button center
|
25
|
-
// the horizontal padding + the icon width must equal the button height
|
26
|
-
// $button-height = $button-horizontal-padding + $icon-width + $difference
|
27
|
-
$difference: $button-height - $button-horizontal-padding - $icon-width
|
28
|
-
@return $difference / 2
|
29
|
-
|
30
|
-
=button-icon($button-font-size)
|
31
|
-
$small-offset: buttonIconSpacing($button-font-size, 1rem)
|
32
|
-
$normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
|
33
|
-
$medium-offset: buttonIconSpacing($button-font-size, 2rem)
|
34
|
-
$large-offset: buttonIconSpacing($button-font-size, 3rem)
|
35
|
-
.icon
|
36
|
-
&:first-child:not(:last-child)
|
37
|
-
margin-left: $normal-offset
|
38
|
-
margin-right: $button-font-size / 2
|
39
|
-
&:last-child:not(:first-child)
|
40
|
-
margin-left: $button-font-size / 2
|
41
|
-
margin-right: $normal-offset
|
42
|
-
&:first-child:last-child
|
43
|
-
// The -1px is to account for the button 1px border
|
44
|
-
margin-left: calc(-1px + #{$normal-offset})
|
45
|
-
margin-right: calc(-1px + #{$normal-offset})
|
46
|
-
&.is-small
|
47
|
-
&:first-child:not(:last-child)
|
48
|
-
margin-left: $small-offset
|
49
|
-
&:last-child:not(:first-child)
|
50
|
-
margin-right: $small-offset
|
51
|
-
&:first-child:last-child
|
52
|
-
margin-left: calc(-1px + #{$small-offset})
|
53
|
-
margin-right: calc(-1px + #{$small-offset})
|
54
|
-
&.is-medium
|
55
|
-
&:first-child:not(:last-child)
|
56
|
-
margin-left: $medium-offset
|
57
|
-
&:last-child:not(:first-child)
|
58
|
-
margin-right: $medium-offset
|
59
|
-
&:first-child:last-child
|
60
|
-
margin-left: calc(-1px + #{$medium-offset})
|
61
|
-
margin-right: calc(-1px + #{$medium-offset})
|
62
|
-
&.is-large
|
63
|
-
&:first-child:not(:last-child)
|
64
|
-
margin-left: $large-offset
|
65
|
-
&:last-child:not(:first-child)
|
66
|
-
margin-right: $large-offset
|
67
|
-
&:first-child:last-child
|
68
|
-
margin-left: calc(-1px + #{$large-offset})
|
69
|
-
margin-right: calc(-1px + #{$large-offset})
|
70
|
-
|
71
16
|
// The button sizes use mixins so they can be used at different breakpoints
|
72
17
|
=button-small
|
73
18
|
border-radius: $radius-small
|
74
19
|
font-size: $size-small
|
75
|
-
+button-icon($size-small)
|
76
20
|
=button-medium
|
77
21
|
font-size: $size-medium
|
78
|
-
+button-icon($size-medium)
|
79
22
|
=button-large
|
80
23
|
font-size: $size-large
|
81
|
-
+button-icon($size-large)
|
82
24
|
|
83
25
|
.button
|
84
26
|
+control
|
@@ -94,7 +36,22 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
|
94
36
|
white-space: nowrap
|
95
37
|
strong
|
96
38
|
color: inherit
|
97
|
-
|
39
|
+
.icon
|
40
|
+
&,
|
41
|
+
&.is-small,
|
42
|
+
&.is-medium,
|
43
|
+
&.is-large
|
44
|
+
height: 1.5em
|
45
|
+
width: 1.5em
|
46
|
+
&:first-child:not(:last-child)
|
47
|
+
margin-left: calc(-0.375em - 1px)
|
48
|
+
margin-right: 0.1875em
|
49
|
+
&:last-child:not(:first-child)
|
50
|
+
margin-left: 0.1875em
|
51
|
+
margin-right: calc(-0.375em - 1px)
|
52
|
+
&:first-child:last-child
|
53
|
+
margin-left: calc(-0.375em - 1px)
|
54
|
+
margin-right: calc(-0.375em - 1px)
|
98
55
|
// States
|
99
56
|
&:hover,
|
100
57
|
&.is-hovered
|
@@ -194,5 +151,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
|
|
194
151
|
pointer-events: none
|
195
152
|
&:after
|
196
153
|
+loader
|
197
|
-
+center(
|
154
|
+
+center(1em)
|
198
155
|
position: absolute !important
|
156
|
+
|
157
|
+
// Adjustment for vertical spacing
|
158
|
+
button.button,
|
159
|
+
input[type="submit"].button
|
160
|
+
line-height: 1
|
161
|
+
padding-bottom: 0.4em
|
162
|
+
padding-top: 0.35em
|
@@ -76,7 +76,7 @@ $input-radius: $radius !default
|
|
76
76
|
max-width: 100%
|
77
77
|
min-height: 120px
|
78
78
|
min-width: 100%
|
79
|
-
padding:
|
79
|
+
padding: 0.625em
|
80
80
|
resize: vertical
|
81
81
|
|
82
82
|
.checkbox,
|
@@ -105,7 +105,7 @@ $input-radius: $radius !default
|
|
105
105
|
|
106
106
|
.select
|
107
107
|
display: inline-block
|
108
|
-
height: 2.
|
108
|
+
height: 2.25em
|
109
109
|
position: relative
|
110
110
|
vertical-align: top
|
111
111
|
&:after
|
@@ -145,85 +145,124 @@ $input-radius: $radius !default
|
|
145
145
|
.label
|
146
146
|
color: $input
|
147
147
|
display: block
|
148
|
-
font-
|
148
|
+
font-size: $size-normal
|
149
|
+
font-weight: $weight-bold
|
149
150
|
&:not(:last-child)
|
150
151
|
margin-bottom: 0.5em
|
151
152
|
|
152
153
|
.help
|
153
154
|
display: block
|
154
155
|
font-size: $size-small
|
155
|
-
margin-top:
|
156
|
+
margin-top: 0.25rem
|
156
157
|
@each $name, $pair in $colors
|
157
158
|
$color: nth($pair, 1)
|
158
159
|
&.is-#{$name}
|
159
160
|
color: $color
|
160
161
|
|
161
|
-
|
162
|
+
.select select
|
163
|
+
line-height: 1
|
162
164
|
|
163
|
-
|
164
|
-
+mobile
|
165
|
-
margin-bottom: 0.5em
|
166
|
-
+tablet
|
167
|
-
flex-basis: 0
|
168
|
-
flex-grow: 1
|
169
|
-
flex-shrink: 0
|
170
|
-
margin-right: 1.5em
|
171
|
-
padding-top: 0.5em
|
172
|
-
text-align: right
|
165
|
+
// Containers
|
173
166
|
|
174
|
-
.
|
175
|
-
position: relative
|
176
|
-
text-align: left
|
167
|
+
.field
|
177
168
|
&:not(:last-child)
|
178
169
|
margin-bottom: 0.75rem
|
179
170
|
// Modifiers
|
180
171
|
&.has-addons
|
181
172
|
display: flex
|
182
173
|
justify-content: flex-start
|
183
|
-
.
|
184
|
-
.input,
|
185
|
-
.select
|
186
|
-
border-radius: 0
|
174
|
+
.control
|
187
175
|
margin-right: -1px
|
188
|
-
width: auto
|
189
|
-
&:hover
|
190
|
-
z-index: 2
|
191
|
-
&:focus,
|
192
|
-
&:active
|
193
|
-
z-index: 3
|
194
176
|
&:first-child
|
195
|
-
|
196
|
-
|
197
|
-
|
177
|
+
.button,
|
178
|
+
.input,
|
179
|
+
.select select
|
180
|
+
border-bottom-left-radius: $input-radius
|
181
|
+
border-top-left-radius: $input-radius
|
198
182
|
&:last-child
|
199
|
-
|
200
|
-
|
201
|
-
|
183
|
+
.button,
|
184
|
+
.input,
|
185
|
+
.select select
|
186
|
+
border-bottom-right-radius: $input-radius
|
187
|
+
border-top-right-radius: $input-radius
|
188
|
+
.button,
|
189
|
+
.input,
|
190
|
+
.select select
|
191
|
+
border-radius: 0
|
192
|
+
&:hover
|
193
|
+
z-index: 2
|
194
|
+
&:focus,
|
195
|
+
&:active
|
196
|
+
z-index: 3
|
202
197
|
&.is-expanded
|
203
198
|
flex-grow: 1
|
204
199
|
flex-shrink: 0
|
205
|
-
.select select
|
206
|
-
&:hover
|
207
|
-
z-index: 2
|
208
|
-
&:focus,
|
209
|
-
&:active
|
210
|
-
z-index: 3
|
211
200
|
&.has-addons-centered
|
212
201
|
justify-content: center
|
213
202
|
&.has-addons-right
|
214
203
|
justify-content: flex-end
|
215
204
|
&.has-addons-fullwidth
|
216
|
-
.
|
217
|
-
.input,
|
218
|
-
.select
|
205
|
+
.control
|
219
206
|
flex-grow: 1
|
220
207
|
flex-shrink: 0
|
208
|
+
&.is-grouped
|
209
|
+
display: flex
|
210
|
+
justify-content: flex-start
|
211
|
+
& > .control
|
212
|
+
flex-basis: 0
|
213
|
+
flex-shrink: 0
|
214
|
+
&:not(:last-child)
|
215
|
+
margin-bottom: 0
|
216
|
+
margin-right: 0.75rem
|
217
|
+
&.is-expanded
|
218
|
+
flex-grow: 1
|
219
|
+
flex-shrink: 1
|
220
|
+
&.is-grouped-centered
|
221
|
+
justify-content: center
|
222
|
+
&.is-grouped-right
|
223
|
+
justify-content: flex-end
|
224
|
+
&.is-horizontal
|
225
|
+
+tablet
|
226
|
+
display: flex
|
227
|
+
|
228
|
+
.field-label
|
229
|
+
+mobile
|
230
|
+
margin-bottom: 0.5rem
|
231
|
+
+tablet
|
232
|
+
flex-basis: 0
|
233
|
+
flex-grow: 1
|
234
|
+
flex-shrink: 0
|
235
|
+
margin-right: 1.5rem
|
236
|
+
padding-top: 0.375em
|
237
|
+
text-align: right
|
238
|
+
|
239
|
+
.field-body
|
240
|
+
+tablet
|
241
|
+
display: flex
|
242
|
+
flex-basis: 0
|
243
|
+
flex-grow: 5
|
244
|
+
flex-shrink: 1
|
245
|
+
.field
|
246
|
+
flex-shrink: 1
|
247
|
+
&:not(.is-narrow)
|
248
|
+
flex-grow: 1
|
249
|
+
&:not(:last-child)
|
250
|
+
margin-bottom: 0
|
251
|
+
margin-right: 0.75rem
|
252
|
+
|
253
|
+
.control
|
254
|
+
font-size: $size-normal
|
255
|
+
position: relative
|
256
|
+
text-align: left
|
257
|
+
// Modifiers
|
221
258
|
&.has-icon
|
222
259
|
.icon
|
223
260
|
color: $input-icon
|
261
|
+
height: 2.25em
|
224
262
|
pointer-events: none
|
225
263
|
position: absolute
|
226
|
-
top:
|
264
|
+
top: 0
|
265
|
+
width: 2.25em
|
227
266
|
z-index: 4
|
228
267
|
.input
|
229
268
|
&:focus
|
@@ -231,70 +270,46 @@ $input-radius: $radius !default
|
|
231
270
|
color: $input-icon-active
|
232
271
|
&.is-small
|
233
272
|
& + .icon
|
234
|
-
|
273
|
+
font-size: $size-small
|
235
274
|
&.is-medium
|
236
275
|
& + .icon
|
237
|
-
|
276
|
+
font-size: $size-medium
|
238
277
|
&.is-large
|
239
278
|
& + .icon
|
240
|
-
|
279
|
+
font-size: $size-large
|
241
280
|
&:not(.has-icon-right)
|
242
281
|
.icon
|
243
|
-
left:
|
244
|
-
transform: translateX(-50%) translateY(-50%)
|
282
|
+
left: 0
|
283
|
+
// transform: translateX(-50%) translateY(-50%)
|
245
284
|
.input
|
246
|
-
padding-left: 2.
|
247
|
-
&.is-small
|
248
|
-
|
249
|
-
|
250
|
-
&.is-medium
|
251
|
-
|
252
|
-
|
253
|
-
&.is-large
|
254
|
-
|
255
|
-
|
285
|
+
padding-left: 2.25em
|
286
|
+
// &.is-small
|
287
|
+
// & + .icon
|
288
|
+
// left: ($size-small * 2.5) / 2
|
289
|
+
// &.is-medium
|
290
|
+
// & + .icon
|
291
|
+
// left: ($size-medium * 2.5) / 2
|
292
|
+
// &.is-large
|
293
|
+
// & + .icon
|
294
|
+
// left: ($size-large * 2.5) / 2
|
256
295
|
&.has-icon-right
|
257
296
|
.icon
|
258
|
-
right:
|
259
|
-
transform: translateX(50%) translateY(-50%)
|
297
|
+
right: 0
|
298
|
+
// transform: translateX(50%) translateY(-50%)
|
260
299
|
.input
|
261
|
-
padding-right: 2.
|
262
|
-
&.is-small
|
263
|
-
|
264
|
-
|
265
|
-
&.is-medium
|
266
|
-
|
267
|
-
|
268
|
-
&.is-large
|
269
|
-
|
270
|
-
|
271
|
-
&.is-grouped
|
272
|
-
display: flex
|
273
|
-
justify-content: flex-start
|
274
|
-
& > .control
|
275
|
-
flex-basis: 0
|
276
|
-
flex-shrink: 0
|
277
|
-
&:not(:last-child)
|
278
|
-
margin-bottom: 0
|
279
|
-
margin-right: 0.75rem
|
280
|
-
&.is-expanded
|
281
|
-
flex-grow: 1
|
282
|
-
flex-shrink: 1
|
283
|
-
&.is-grouped-centered
|
284
|
-
justify-content: center
|
285
|
-
&.is-grouped-right
|
286
|
-
justify-content: flex-end
|
287
|
-
&.is-horizontal
|
288
|
-
+tablet
|
289
|
-
display: flex
|
290
|
-
& > .control
|
291
|
-
display: flex
|
292
|
-
flex-basis: 0
|
293
|
-
flex-grow: 5
|
294
|
-
flex-shrink: 1
|
300
|
+
padding-right: 2.25em
|
301
|
+
// &.is-small
|
302
|
+
// & + .icon
|
303
|
+
// right: ($size-small * 2.5) / 2
|
304
|
+
// &.is-medium
|
305
|
+
// & + .icon
|
306
|
+
// right: ($size-medium * 2.5) / 2
|
307
|
+
// &.is-large
|
308
|
+
// & + .icon
|
309
|
+
// right: ($size-large * 2.5) / 2
|
295
310
|
&.is-loading
|
296
311
|
&:after
|
297
312
|
+loader
|
298
313
|
position: absolute !important
|
299
|
-
right: 0.
|
300
|
-
top: 0.
|
314
|
+
right: 0.625em
|
315
|
+
top: 0.625em
|
@@ -1,12 +1,25 @@
|
|
1
1
|
.icon
|
2
|
-
|
2
|
+
align-items: center
|
3
|
+
display: inline-flex
|
4
|
+
justify-content: center
|
5
|
+
height: 1.5rem
|
6
|
+
vertical-align: top
|
7
|
+
width: 1.5rem
|
3
8
|
.fa
|
4
|
-
font-size:
|
5
|
-
line-height: inherit
|
9
|
+
font-size: 21px
|
6
10
|
// Sizes
|
7
11
|
&.is-small
|
8
|
-
|
12
|
+
height: 1rem
|
13
|
+
width: 1rem
|
14
|
+
.fa
|
15
|
+
font-size: 14px
|
9
16
|
&.is-medium
|
10
|
-
|
17
|
+
height: 2rem
|
18
|
+
width: 2rem
|
19
|
+
.fa
|
20
|
+
font-size: 28px
|
11
21
|
&.is-large
|
12
|
-
|
22
|
+
height: 3rem
|
23
|
+
width: 3rem
|
24
|
+
.fa
|
25
|
+
font-size: 42px
|
@@ -5,13 +5,16 @@
|
|
5
5
|
position: relative
|
6
6
|
+desktop
|
7
7
|
margin: 0 auto
|
8
|
-
|
8
|
+
width: $desktop - 40px
|
9
9
|
// Modifiers
|
10
10
|
&.is-fluid
|
11
11
|
margin: 0 20px
|
12
12
|
max-width: none
|
13
|
+
width: auto
|
13
14
|
+widescreen
|
14
|
-
|
15
|
+
width: $widescreen - 40px
|
16
|
+
+fullhd
|
17
|
+
width: $fullhd - 40px
|
15
18
|
|
16
19
|
.delete
|
17
20
|
+delete
|
@@ -29,8 +29,8 @@ $subtitle-weight: $weight-light !default
|
|
29
29
|
color: inherit
|
30
30
|
& + .highlight
|
31
31
|
margin-top: -0.75rem
|
32
|
-
|
33
|
-
margin-top: -1.
|
32
|
+
&:not(.is-spaced) + .subtitle
|
33
|
+
margin-top: -1.5rem
|
34
34
|
// Colors
|
35
35
|
@each $size in $sizes
|
36
36
|
$i: index($sizes, $size)
|
@@ -44,7 +44,7 @@ $subtitle-weight: $weight-light !default
|
|
44
44
|
line-height: 1.25
|
45
45
|
strong
|
46
46
|
color: $subtitle-strong
|
47
|
-
|
47
|
+
&:not(.is-spaced) + .title
|
48
48
|
margin-top: -1.5rem
|
49
49
|
// Colors
|
50
50
|
@each $size in $sizes
|
@@ -10,11 +10,13 @@ $control-radius-small: $radius-small !default
|
|
10
10
|
box-shadow: none
|
11
11
|
display: inline-flex
|
12
12
|
font-size: $size-normal
|
13
|
-
height: 2.
|
13
|
+
height: 2.25em
|
14
14
|
justify-content: flex-start
|
15
|
-
line-height: 1.
|
16
|
-
padding-
|
17
|
-
padding-
|
15
|
+
line-height: 1.25
|
16
|
+
padding-bottom: 0.5em
|
17
|
+
padding-left: 0.625em
|
18
|
+
padding-right: 0.625em
|
19
|
+
padding-top: 0.5em
|
18
20
|
position: relative
|
19
21
|
vertical-align: top
|
20
22
|
// States
|
@@ -26,11 +26,3 @@
|
|
26
26
|
@return rgba(#000, 0.7)
|
27
27
|
@else
|
28
28
|
@return #fff
|
29
|
-
|
30
|
-
@function removeUnit($number)
|
31
|
-
@if type-of($number) == 'number' and not unitless($number)
|
32
|
-
@return $number / ($number * 0 + 1)
|
33
|
-
@return $number
|
34
|
-
|
35
|
-
@function roundToEvenNumber($number)
|
36
|
-
@return floor($number / 2) * 2
|
@@ -28,11 +28,6 @@
|
|
28
28
|
top: 50%
|
29
29
|
|
30
30
|
=delete
|
31
|
-
// We need even pixel dimensions to ensure the delete cross can be perfectly centered
|
32
|
-
$dimension-small: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-small)) * 1px
|
33
|
-
$dimension-normal: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-normal)) * 1px
|
34
|
-
$dimension-medium: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-medium)) * 1px
|
35
|
-
$dimension-large: roundToEvenNumber(1.5 * removeUnit($size-6) * removeUnit($size-large)) * 1px
|
36
31
|
+unselectable
|
37
32
|
-moz-appearance: none
|
38
33
|
-webkit-appearance: none
|
@@ -42,13 +37,11 @@
|
|
42
37
|
cursor: pointer
|
43
38
|
display: inline-block
|
44
39
|
font-size: $size-normal
|
45
|
-
height:
|
40
|
+
height: 20px
|
46
41
|
outline: none
|
47
42
|
position: relative
|
48
|
-
transform: rotate(45deg)
|
49
|
-
transform-origin: center center
|
50
43
|
vertical-align: top
|
51
|
-
width:
|
44
|
+
width: 20px
|
52
45
|
&:before,
|
53
46
|
&:after
|
54
47
|
background-color: $white
|
@@ -57,7 +50,8 @@
|
|
57
50
|
left: 50%
|
58
51
|
position: absolute
|
59
52
|
top: 50%
|
60
|
-
transform: translateX(-50%) translateY(-50%)
|
53
|
+
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
54
|
+
transform-origin: center center
|
61
55
|
&:before
|
62
56
|
height: 2px
|
63
57
|
width: 50%
|
@@ -71,14 +65,14 @@
|
|
71
65
|
background-color: rgba($black, 0.4)
|
72
66
|
// Sizes
|
73
67
|
&.is-small
|
74
|
-
height:
|
75
|
-
width:
|
68
|
+
height: 16px
|
69
|
+
width: 16px
|
76
70
|
&.is-medium
|
77
|
-
height:
|
78
|
-
width:
|
71
|
+
height: 24px
|
72
|
+
width: 24px
|
79
73
|
&.is-large
|
80
|
-
height:
|
81
|
-
width:
|
74
|
+
height: 32px
|
75
|
+
width: 32px
|
82
76
|
|
83
77
|
=fa($size, $dimensions)
|
84
78
|
display: inline-block
|
@@ -143,9 +137,9 @@
|
|
143
137
|
border-top-color: transparent
|
144
138
|
content: ""
|
145
139
|
display: block
|
146
|
-
height:
|
140
|
+
height: 1em
|
147
141
|
position: relative
|
148
|
-
width:
|
142
|
+
width: 1em
|
149
143
|
|
150
144
|
=overflow-touch
|
151
145
|
-webkit-overflow-scrolling: touch
|
@@ -172,14 +166,6 @@
|
|
172
166
|
|
173
167
|
// Responsiveness
|
174
168
|
|
175
|
-
$tablet: 769px !default
|
176
|
-
// 960px container + 40px
|
177
|
-
$desktop: 1000px !default
|
178
|
-
// 1152px container + 40
|
179
|
-
$widescreen: 1192px !default
|
180
|
-
// 960 and 1152 have been chosen because
|
181
|
-
// they are divisible by both 12 and 16
|
182
|
-
|
183
169
|
=from($device)
|
184
170
|
@media screen and (min-width: $device)
|
185
171
|
@content
|
@@ -215,3 +201,11 @@ $widescreen: 1192px !default
|
|
215
201
|
=widescreen
|
216
202
|
@media screen and (min-width: $widescreen)
|
217
203
|
@content
|
204
|
+
|
205
|
+
=widescreen-only
|
206
|
+
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
207
|
+
@content
|
208
|
+
|
209
|
+
=fullhd
|
210
|
+
@media screen and (min-width: $fullhd)
|
211
|
+
@content
|
@@ -27,14 +27,14 @@ $red: hsl(348, 100%, 61%) !default
|
|
27
27
|
|
28
28
|
// Typography
|
29
29
|
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
30
|
-
$family-monospace:
|
30
|
+
$family-monospace: monospace !default
|
31
31
|
|
32
|
-
$size-1:
|
33
|
-
$size-2: 2.
|
32
|
+
$size-1: 3rem !default
|
33
|
+
$size-2: 2.5rem !default
|
34
34
|
$size-3: 2rem !default
|
35
35
|
$size-4: 1.5rem !default
|
36
36
|
$size-5: 1.25rem !default
|
37
|
-
$size-6:
|
37
|
+
$size-6: 1rem !default
|
38
38
|
$size-7: 0.75rem !default
|
39
39
|
|
40
40
|
$weight-light: 300 !default
|
@@ -42,6 +42,21 @@ $weight-normal: 400 !default
|
|
42
42
|
$weight-semibold: 500 !default
|
43
43
|
$weight-bold: 700 !default
|
44
44
|
|
45
|
+
// Body
|
46
|
+
$body-background: $white !default
|
47
|
+
$body-size: 16px !default
|
48
|
+
|
49
|
+
// Responsiveness
|
50
|
+
// 960, 1152, and 1344 have been chosen because
|
51
|
+
// they are divisible by both 12 and 16
|
52
|
+
$tablet: 769px !default
|
53
|
+
// 960px container + 40px
|
54
|
+
$desktop: 1000px !default
|
55
|
+
// 1152px container + 40
|
56
|
+
$widescreen: 1192px !default
|
57
|
+
// 1344px container + 40
|
58
|
+
$fullhd: 1384px !default
|
59
|
+
|
45
60
|
// Miscellaneous
|
46
61
|
$easing: ease-out !default
|
47
62
|
$radius-small: 2px !default
|
@@ -122,7 +137,7 @@ $family-primary: $family-sans-serif !default
|
|
122
137
|
$family-code: $family-monospace !default
|
123
138
|
|
124
139
|
$size-small: $size-7 !default
|
125
|
-
$size-normal:
|
140
|
+
$size-normal: $size-6 !default
|
126
141
|
$size-medium: $size-5 !default
|
127
142
|
$size-large: $size-4 !default
|
128
143
|
|
data/bulma-rails.gemspec
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bulma-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Joshua Jansen
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-03-
|
11
|
+
date: 2017-03-20 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|