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
@@ -0,0 +1,12 @@
1
+ .icon
2
+ +fa(21px, 1.5rem)
3
+ .fa
4
+ font-size: inherit
5
+ line-height: inherit
6
+ // Sizes
7
+ &.is-small
8
+ +fa(14px, 1rem)
9
+ &.is-medium
10
+ +fa(28px, 2rem)
11
+ &.is-large
12
+ +fa(42px, 3rem)
File without changes
@@ -1,14 +1,18 @@
1
1
  .notification
2
2
  +block
3
- +clearfix
4
3
  background-color: $background
5
4
  border-radius: $radius
6
- padding: 16px 20px
5
+ padding: 1.25rem 2.5rem 1.25rem 1.5rem
7
6
  position: relative
7
+ code,
8
+ pre
9
+ background: $white
10
+ pre code
11
+ background: transparent
8
12
  .delete
9
- border-radius: 0 $radius
10
- float: right
11
- margin: -16px -20px 0 20px
13
+ position: absolute
14
+ right: 0.5em
15
+ top: 0.5em
12
16
  .title,
13
17
  .subtitle,
14
18
  .content
@@ -5,13 +5,13 @@
5
5
  position: relative
6
6
  +desktop
7
7
  margin: 0 auto
8
- max-width: 960px
8
+ max-width: $desktop - 40px // 960px
9
9
  // Modifiers
10
10
  &.is-fluid
11
11
  margin: 0 20px
12
12
  max-width: none
13
13
  +widescreen
14
- max-width: 1200px
14
+ max-width: $widescreen - 40px // 1152px
15
15
 
16
16
  .delete
17
17
  +delete
@@ -21,19 +21,6 @@
21
21
  text-align: center
22
22
  vertical-align: top
23
23
 
24
- .icon
25
- +fa(21px, 24px)
26
- .fa
27
- font-size: inherit
28
- line-height: inherit
29
- // Sizes
30
- &.is-small
31
- +fa(14px, 16px)
32
- &.is-medium
33
- +fa(28px, 32px)
34
- &.is-large
35
- +fa(42px, 48px)
36
-
37
24
  .heading
38
25
  display: block
39
26
  font-size: 11px
@@ -43,8 +30,7 @@
43
30
 
44
31
  .highlight
45
32
  +block
46
- font-size: 12px
47
- font-weight: normal
33
+ font-weight: $weight-normal
48
34
  max-width: 100%
49
35
  overflow: hidden
50
36
  padding: 0
@@ -56,53 +42,15 @@
56
42
  +loader
57
43
 
58
44
  .number
59
- background-color: $background
60
- border-radius: 290486px
61
- display: inline-block
62
- font-size: $size-medium
63
- vertical-align: top
64
-
65
- .tag
66
45
  align-items: center
67
46
  background-color: $background
68
47
  border-radius: 290486px
69
- color: $text
70
48
  display: inline-flex
71
- font-size: 12px
72
- height: 24px
49
+ font-size: $size-medium
50
+ height: 2em
73
51
  justify-content: center
74
- line-height: 16px
75
- padding-left: 10px
76
- padding-right: 10px
52
+ margin-right: 1.5rem
53
+ min-width: 2.5em
54
+ padding: 0.25rem 0.5rem
55
+ text-align: center
77
56
  vertical-align: top
78
- white-space: nowrap
79
- .delete
80
- margin-left: 4px
81
- margin-right: -6px
82
- // Colors
83
- @each $name, $pair in $colors
84
- $color: nth($pair, 1)
85
- $color-invert: nth($pair, 2)
86
- &.is-#{$name}
87
- background-color: $color
88
- color: $color-invert
89
- // Sizes
90
- &.is-small
91
- font-size: $size-small
92
- height: 20px
93
- padding-left: 8px
94
- padding-right: 8px
95
- &.is-medium
96
- font-size: $size-normal
97
- height: 32px
98
- padding-left: 14px
99
- padding-right: 14px
100
- &.is-large
101
- font-size: $size-5
102
- height: 40px
103
- line-height: 24px
104
- padding-left: 18px
105
- padding-right: 18px
106
- .delete
107
- margin-left: 4px
108
- margin-right: -8px
@@ -5,7 +5,7 @@
5
5
  border: none
6
6
  border-radius: 290486px
7
7
  display: block
8
- height: 12px
8
+ height: $size-normal
9
9
  overflow: hidden
10
10
  padding: 0
11
11
  width: 100%
@@ -25,8 +25,8 @@
25
25
  background-color: $color
26
26
  // Sizes
27
27
  &.is-small
28
- height: 8px
28
+ height: $size-small
29
29
  &.is-medium
30
- height: 16px
30
+ height: $size-medium
31
31
  &.is-large
32
- height: 20px
32
+ height: $size-large
@@ -1,43 +1,25 @@
1
- $table: $text-strong !default
2
- $table-background: $white !default
3
- $table-border: $border !default
1
+ $table: $grey-darker !default
2
+ $table-background: $white !default
3
+ $table-border: $grey-lighter !default
4
4
 
5
- $table-head: $text-light !default
5
+ $table-head: $grey !default
6
6
 
7
- $table-row-hover-background: $white-ter !default
8
- $table-row-even-background: $white-bis !default
7
+ $table-row-hover-background: $white-bis !default
8
+ $table-row-even-background: $white-bis !default
9
+ $table-row-even-hover-background: $white-ter !default
9
10
 
10
11
  .table
11
12
  background-color: $table-background
12
13
  color: $table
13
- margin-bottom: 20px
14
+ margin-bottom: 1.5rem
14
15
  width: 100%
15
16
  td,
16
17
  th
17
18
  border: 1px solid $table-border
18
19
  border-width: 0 0 1px
19
- padding: 8px 10px
20
+ padding: 0.5em 0.75em
20
21
  vertical-align: top
21
22
  // Modifiers
22
- &.is-icon
23
- padding: 5px
24
- text-align: center
25
- white-space: nowrap
26
- width: 1%
27
- .fa
28
- +fa(21px, 24px)
29
- &.is-link
30
- padding: 0
31
- & > a
32
- padding: 5px
33
- &.is-link
34
- padding: 0
35
- & > a
36
- display: block
37
- padding: 8px 10px
38
- &:hover
39
- background-color: $link
40
- color: $link-invert
41
23
  &.is-narrow
42
24
  white-space: nowrap
43
25
  width: 1%
@@ -52,17 +34,17 @@ $table-row-even-background: $white-bis !default
52
34
  th
53
35
  border-width: 0 0 2px
54
36
  color: $table-head
37
+ tfoot
38
+ td,
39
+ th
40
+ border-width: 2px 0 0
41
+ color: $table-head
55
42
  tbody
56
43
  tr
57
44
  &:last-child
58
45
  td,
59
46
  th
60
47
  border-bottom-width: 0
61
- tfoot
62
- td,
63
- th
64
- border-width: 2px 0 0
65
- color: $table-head
66
48
  // Modifiers
67
49
  &.is-bordered
68
50
  td,
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
76
58
  &.is-narrow
77
59
  td,
78
60
  th
79
- padding: 5px 10px
80
- // Modifiers
81
- &.is-icon
82
- padding: 2px
83
- &.is-link
84
- padding: 0
85
- & > a
86
- padding: 2px
87
- &.is-link
88
- padding: 0
89
- & > a
90
- padding: 5px 10px
61
+ padding: 0.25em 0.5em
91
62
  &.is-striped
92
63
  tbody
93
64
  tr
94
65
  &:nth-child(even)
95
66
  background-color: $table-row-even-background
96
67
  &:hover
97
- background-color: $table-row-hover-background
68
+ background-color: $table-row-even-hover-background
@@ -0,0 +1,29 @@
1
+ .tag
2
+ align-items: center
3
+ background-color: $background
4
+ border-radius: 290486px
5
+ color: $text
6
+ display: inline-flex
7
+ font-size: $size-small
8
+ height: 2em
9
+ justify-content: center
10
+ line-height: 1.5
11
+ padding-left: 0.875em
12
+ padding-right: 0.875em
13
+ vertical-align: top
14
+ white-space: nowrap
15
+ .delete
16
+ margin-left: 0.25em
17
+ margin-right: -0.5em
18
+ // Colors
19
+ @each $name, $pair in $colors
20
+ $color: nth($pair, 1)
21
+ $color-invert: nth($pair, 2)
22
+ &.is-#{$name}
23
+ background-color: $color
24
+ color: $color-invert
25
+ // Sizes
26
+ &.is-medium
27
+ font-size: $size-normal
28
+ &.is-large
29
+ font-size: $size-medium
@@ -1,72 +1,53 @@
1
+ $title: $grey-darker !default
2
+ $title-size: $size-3 !default
3
+ $title-weight: $weight-light !default
4
+ $title-weight-bold: $weight-semibold !default
5
+
6
+ $subtitle: $grey-dark !default
7
+ $subtitle-size: $size-5 !default
8
+ $subtitle-strong: $grey-darker !default
9
+ $subtitle-weight: $weight-light !default
10
+
1
11
  .title,
2
12
  .subtitle
3
13
  +block
4
- font-weight: $weight-title-normal
5
14
  word-break: break-word
6
15
  em,
7
16
  span
8
- font-weight: $weight-title-normal
9
- a
10
- &:hover
11
- border-bottom: 1px solid
17
+ font-weight: $title-weight
12
18
  strong
13
- font-weight: $weight-title-bold
19
+ font-weight: $title-weight-bold
14
20
  .tag
15
- vertical-align: bottom
21
+ vertical-align: middle
16
22
 
17
23
  .title
18
- color: $text-strong
19
- font-size: $size-large
20
- line-height: 1
21
- code
22
- display: inline-block
23
- font-size: $size-large
24
+ color: $title
25
+ font-size: $title-size
26
+ font-weight: $title-weight
27
+ line-height: 1.125
24
28
  strong
25
29
  color: inherit
26
30
  & + .highlight
27
- margin-top: -10px
31
+ margin-top: -0.75rem
28
32
  & + .subtitle
29
- margin-top: -10px
33
+ margin-top: -1.25rem
30
34
  // Colors
31
35
  @each $size in $sizes
32
36
  $i: index($sizes, $size)
33
37
  &.is-#{$i}
34
38
  font-size: $size
35
- code
36
- font-size: nth($sizes, min($i + 1, 6))
37
- // Modifiers
38
- &.is-normal
39
- font-weight: 400
40
- strong
41
- font-weight: 700
42
- // Responsiveness
43
- +tablet
44
- & + .subtitle
45
- margin-top: -15px
46
39
 
47
40
  .subtitle
48
- color: $text
49
- font-size: $size-medium
50
- line-height: 1.125
51
- code
52
- border-radius: $radius
53
- display: inline-block
54
- font-size: $size-normal
55
- padding: 2px 3px
56
- vertical-align: top
41
+ color: $subtitle
42
+ font-size: $subtitle-size
43
+ font-weight: $subtitle-weight
44
+ line-height: 1.25
57
45
  strong
58
- color: $text-strong
46
+ color: $subtitle-strong
59
47
  & + .title
60
- margin-top: -20px
48
+ margin-top: -1.5rem
61
49
  // Colors
62
50
  @each $size in $sizes
63
51
  $i: index($sizes, $size)
64
52
  &.is-#{$i}
65
53
  font-size: $size
66
- code
67
- font-size: nth($sizes, min($i + 1, 6))
68
- // Modifiers
69
- &.is-normal
70
- font-weight: 400
71
- strong
72
- font-weight: 700
File without changes
@@ -3,7 +3,7 @@
3
3
  flex-basis: 0
4
4
  flex-grow: 1
5
5
  flex-shrink: 1
6
- padding: 10px
6
+ padding: 0.75rem
7
7
  .columns.is-mobile > &.is-narrow
8
8
  flex: none
9
9
  .columns.is-mobile > &.is-full
@@ -204,13 +204,13 @@
204
204
  margin-left: ($i / 12) * 100%
205
205
 
206
206
  .columns
207
- margin-left: -10px
208
- margin-right: -10px
209
- margin-top: -10px
207
+ margin-left: -0.75rem
208
+ margin-right: -0.75rem
209
+ margin-top: -0.75rem
210
210
  &:last-child
211
- margin-bottom: -10px
211
+ margin-bottom: -0.75rem
212
212
  &:not(:last-child)
213
- margin-bottom: 10px
213
+ margin-bottom: 0.75rem
214
214
  // Modifiers
215
215
  &.is-centered
216
216
  justify-content: center
@@ -221,7 +221,7 @@
221
221
  &:last-child
222
222
  margin-bottom: 0
223
223
  &:not(:last-child)
224
- margin-bottom: 20px
224
+ margin-bottom: 1.5rem
225
225
  & > .column
226
226
  margin: 0
227
227
  padding: 0
@@ -231,7 +231,7 @@
231
231
  flex-wrap: wrap
232
232
  & > .column
233
233
  max-width: 33.3333%
234
- padding: 10px
234
+ padding: 0.75rem
235
235
  width: 33.3333%
236
236
  & + .column
237
237
  margin-left: 0
@@ -1,27 +1,27 @@
1
1
  .tile
2
2
  align-items: stretch
3
3
  display: block
4
- flex-basis: auto
4
+ flex-basis: 0
5
5
  flex-grow: 1
6
6
  flex-shrink: 1
7
7
  min-height: min-content
8
8
  // Modifiers
9
9
  &.is-ancestor
10
- margin-left: -10px
11
- margin-right: -10px
12
- margin-top: -10px
10
+ margin-left: -0.75rem
11
+ margin-right: -0.75rem
12
+ margin-top: -0.75rem
13
13
  &:last-child
14
- margin-bottom: -10px
14
+ margin-bottom: -0.75rem
15
15
  &:not(:last-child)
16
- margin-bottom: 10px
16
+ margin-bottom: 0.75rem
17
17
  &.is-child
18
18
  margin: 0 !important
19
19
  &.is-parent
20
- padding: 10px
20
+ padding: 0.75rem
21
21
  &.is-vertical
22
22
  flex-direction: column
23
23
  & > .tile.is-child:not(:last-child)
24
- margin-bottom: 20px !important
24
+ margin-bottom: 1.5rem !important
25
25
  // Responsiveness
26
26
  +tablet
27
27
  &:not(.is-child)