bulma-rails 0.3.2 → 0.4.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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9d1d8cfd0cf354f404fe8c80915b8146d5528386
4
- data.tar.gz: de5743fe71430b524fe9969a0e0ad7e5360921ce
3
+ metadata.gz: db16d2faf9db0b9807a60d466dbffcea0d826a04
4
+ data.tar.gz: dda2dff29fb0b32c1ae6492baee6a7a12de8f443
5
5
  SHA512:
6
- metadata.gz: 4ebf9e3d91ab466b0e8622ba404f2177a160394dad1dbff4c3ad128e3a02c1255ebad923bbfb9385ac45467dab8a0661fb9de396d88ce6e789b2452775f7d3a6
7
- data.tar.gz: 96a5e7c42fd828d13b8ba3617159f4917d2248ab53ae4c82200e4acb70cd483b680f730b70bf25886c5045b57a766d72e1981833789745fa1e904add2a989a49
6
+ metadata.gz: 29e752ca65c94363206d6df6eb5eab7af8c306b8707eae87c91ebd4346a06c390191f552d50cd9cf8c341d2cb4d282f30629be88c89c854934360652a437648d
7
+ data.tar.gz: fc816a8708f338b8d7d0524b7e21caf97d45ba9ac1d6658ad7cf13c81a3665ab2527f121283e7613b59d5927b0b3268606a297bee11a2ddae0ec5bb69c5c9354
data/README.md CHANGED
@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
8
8
 
9
9
  Add this line to your application's Gemfile:
10
10
 
11
- gem "bulma-rails", "~> 0.3.2"
11
+ gem "bulma-rails", "~> 0.4.0"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,4 +1,4 @@
1
- /*! bulma.io v0.3.2 | MIT License | github.com/jgthms/bulma */
1
+ /*! bulma.io v0.4.0 | MIT License | github.com/jgthms/bulma */
2
2
  @charset "utf-8"
3
3
 
4
4
  @import "sass/utilities/_all"
@@ -1,6 +1,3 @@
1
- $body-background: $white !default
2
- $body-size: $size-6 !default
3
-
4
1
  html
5
2
  background-color: $body-background
6
3
  font-size: $body-size
@@ -24,8 +24,6 @@
24
24
 
25
25
  .card-content
26
26
  padding: 1.5rem
27
- .title + .subtitle
28
- margin-top: -1.5rem
29
27
 
30
28
  .card-footer
31
29
  border-top: 1px solid $border
@@ -54,7 +54,12 @@
54
54
  // Modifiers
55
55
  &.is-mobile
56
56
  display: flex
57
- & > .level-item
57
+ .level-left,
58
+ .level-right
59
+ display: flex
60
+ .level-left + .level-right
61
+ margin-top: 0
62
+ .level-item
58
63
  &:not(:last-child)
59
64
  margin-bottom: 0
60
65
  &:not(.is-narrow)
@@ -1,4 +1,4 @@
1
- $nav-height: 3.5rem !default
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.5rem - 1px)
47
+ padding-bottom: calc(0.75rem - 1px)
47
48
  padding-left: 1rem
48
49
  padding-right: 1rem
49
- padding-top: calc(0.5rem - 1px)
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.5rem - 3px)
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: 0.875rem
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.5em
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
- +button-icon($size-normal)
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(16px)
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: 10px
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.5em
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-weight: bold
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: 5px
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
- // Containers
162
+ .select select
163
+ line-height: 1
162
164
 
163
- .control-label
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
- .control
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
- .button,
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
- border-radius: $input-radius 0 0 $input-radius
196
- select
197
- border-radius: $input-radius 0 0 $input-radius
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
- border-radius: 0 $input-radius $input-radius 0
200
- select
201
- border-radius: 0 $input-radius $input-radius 0
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
- .button,
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: ($size-normal * 2.5) / 2
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
- top: ($size-small * 2.5) / 2
273
+ font-size: $size-small
235
274
  &.is-medium
236
275
  & + .icon
237
- top: ($size-medium * 2.5) / 2
276
+ font-size: $size-medium
238
277
  &.is-large
239
278
  & + .icon
240
- top: ($size-large * 2.5) / 2
279
+ font-size: $size-large
241
280
  &:not(.has-icon-right)
242
281
  .icon
243
- left: ($size-normal * 2.5) / 2
244
- transform: translateX(-50%) translateY(-50%)
282
+ left: 0
283
+ // transform: translateX(-50%) translateY(-50%)
245
284
  .input
246
- padding-left: 2.5em
247
- &.is-small
248
- & + .icon
249
- left: ($size-small * 2.5) / 2
250
- &.is-medium
251
- & + .icon
252
- left: ($size-medium * 2.5) / 2
253
- &.is-large
254
- & + .icon
255
- left: ($size-large * 2.5) / 2
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: ($size-normal * 2.5) / 2
259
- transform: translateX(50%) translateY(-50%)
297
+ right: 0
298
+ // transform: translateX(50%) translateY(-50%)
260
299
  .input
261
- padding-right: 2.5em
262
- &.is-small
263
- & + .icon
264
- right: ($size-small * 2.5) / 2
265
- &.is-medium
266
- & + .icon
267
- right: ($size-medium * 2.5) / 2
268
- &.is-large
269
- & + .icon
270
- right: ($size-large * 2.5) / 2
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.75em
300
- top: 0.75em
314
+ right: 0.625em
315
+ top: 0.625em
@@ -1,12 +1,25 @@
1
1
  .icon
2
- +fa(21px, 1.5rem)
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: inherit
5
- line-height: inherit
9
+ font-size: 21px
6
10
  // Sizes
7
11
  &.is-small
8
- +fa(14px, 1rem)
12
+ height: 1rem
13
+ width: 1rem
14
+ .fa
15
+ font-size: 14px
9
16
  &.is-medium
10
- +fa(28px, 2rem)
17
+ height: 2rem
18
+ width: 2rem
19
+ .fa
20
+ font-size: 28px
11
21
  &.is-large
12
- +fa(42px, 3rem)
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
- max-width: $desktop - 40px // 960px
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
- max-width: $widescreen - 40px // 1152px
15
+ width: $widescreen - 40px
16
+ +fullhd
17
+ width: $fullhd - 40px
15
18
 
16
19
  .delete
17
20
  +delete
@@ -14,7 +14,7 @@
14
14
  white-space: nowrap
15
15
  .delete
16
16
  margin-left: 0.25em
17
- margin-right: -0.5em
17
+ margin-right: -0.375em
18
18
  // Colors
19
19
  @each $name, $pair in $colors
20
20
  $color: nth($pair, 1)
@@ -29,8 +29,8 @@ $subtitle-weight: $weight-light !default
29
29
  color: inherit
30
30
  & + .highlight
31
31
  margin-top: -0.75rem
32
- & + .subtitle
33
- margin-top: -1.25rem
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
- & + .title
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.285em
13
+ height: 2.25em
14
14
  justify-content: flex-start
15
- line-height: 1.5
16
- padding-left: 0.75em
17
- padding-right: 0.75em
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: $dimension-normal
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: $dimension-normal
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: $dimension-small
75
- width: $dimension-small
68
+ height: 16px
69
+ width: 16px
76
70
  &.is-medium
77
- height: $dimension-medium
78
- width: $dimension-medium
71
+ height: 24px
72
+ width: 24px
79
73
  &.is-large
80
- height: $dimension-large
81
- width: $dimension-large
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: 1rem
140
+ height: 1em
147
141
  position: relative
148
- width: 1rem
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: "Inconsolata", "Consolas", "Monaco", monospace !default
30
+ $family-monospace: monospace !default
31
31
 
32
- $size-1: 3.5rem !default
33
- $size-2: 2.75rem !default
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: 14px !default
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: 1rem !default
140
+ $size-normal: $size-6 !default
126
141
  $size-medium: $size-5 !default
127
142
  $size-large: $size-4 !default
128
143
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.3.2'
5
+ gem.version = '0.4.0'
6
6
  gem.date = Date.today
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]
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.3.2
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-01 00:00:00.000000000 Z
11
+ date: 2017-03-20 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass