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
@@ -1,4 +1,4 @@
1
- $nav-height: 50px !default
1
+ $nav-height: 3.5rem !default
2
2
 
3
3
  // Components
4
4
 
@@ -13,20 +13,21 @@ $nav-height: 50px !default
13
13
  display: flex
14
14
  flex-grow: 0
15
15
  flex-shrink: 0
16
+ font-size: $size-normal
16
17
  justify-content: center
17
- padding: 10px
18
+ padding: 0.5rem 0.75rem
18
19
  a
19
20
  flex-grow: 1
20
21
  flex-shrink: 0
21
22
  img
22
- max-height: 24px
23
+ max-height: 1.75rem
23
24
  .button + .button
24
- margin-left: 10px
25
+ margin-left: 0.75rem
25
26
  .tag
26
- &:first-child
27
- margin-right: 5px
28
- &:last-child
29
- margin-left: 5px
27
+ &:first-child:not(:last-child)
28
+ margin-right: 0.5rem
29
+ &:last-child:not(:first-child)
30
+ margin-left: 0.5rem
30
31
  // Responsiveness
31
32
  +mobile
32
33
  justify-content: flex-start
@@ -42,15 +43,21 @@ a.nav-item
42
43
  &.is-tab
43
44
  border-bottom: 1px solid transparent
44
45
  border-top: 1px solid transparent
45
- padding-left: 12px
46
- padding-right: 12px
46
+ padding-bottom: calc(0.5rem - 1px)
47
+ padding-left: 1rem
48
+ padding-right: 1rem
49
+ padding-top: calc(0.5rem - 1px)
47
50
  &:hover
48
- border-bottom: 1px solid $link
49
- border-top: 1px solid transparent
51
+ border-bottom-color: $primary
52
+ border-top-color: transparent
50
53
  &.is-active
51
- border-bottom: 3px solid $link
52
- border-top: 3px solid transparent
53
- color: $link
54
+ border-bottom: 3px solid $primary
55
+ color: $primary
56
+ padding-bottom: calc(0.5rem - 3px)
57
+ // Responsiveness
58
+ +desktop
59
+ &.is-brand
60
+ padding-left: 0
54
61
 
55
62
  // Containers
56
63
 
@@ -66,18 +73,22 @@ a.nav-item
66
73
  position: absolute
67
74
  .nav-item
68
75
  border-top: 1px solid rgba($border, 0.5)
69
- padding: 10px
76
+ padding: 0.75rem
70
77
  &.is-active
71
78
  display: block
72
79
  +tablet-only
73
- padding-right: 20px
80
+ padding-right: 1.5rem
74
81
 
75
- .nav-left
82
+
83
+ .nav-left,
84
+ .nav-right
76
85
  align-items: stretch
77
- display: flex
78
86
  flex-basis: 0
79
87
  flex-grow: 1
80
88
  flex-shrink: 0
89
+
90
+ .nav-left
91
+ display: flex
81
92
  justify-content: flex-start
82
93
  overflow: hidden
83
94
  overflow-x: auto
@@ -86,19 +97,17 @@ a.nav-item
86
97
  .nav-center
87
98
  align-items: stretch
88
99
  display: flex
100
+ flex-grow: 0
101
+ flex-shrink: 0
89
102
  justify-content: center
90
103
  margin-left: auto
91
104
  margin-right: auto
92
105
 
93
106
  .nav-right
107
+ justify-content: flex-end
94
108
  // Responsiveness
95
109
  +tablet
96
- align-items: stretch
97
110
  display: flex
98
- flex-basis: 0
99
- flex-grow: 1
100
- flex-shrink: 0
101
- justify-content: flex-end
102
111
 
103
112
  // Main container
104
113
 
@@ -115,26 +124,6 @@ a.nav-item
115
124
  display: flex
116
125
  min-height: $nav-height
117
126
  width: 100%
118
- & > .nav-left
119
- & > .nav-item:first-child:not(.is-tab)
120
- padding-left: 0
121
- & > .nav-right
122
- & > .nav-item:last-child:not(.is-tab)
123
- padding-right: 0
124
- .container > &
125
- & > .nav-left
126
- & > .nav-item:first-child:not(.is-tab)
127
- padding-left: 0
128
- & > .nav-right
129
- & > .nav-item:last-child:not(.is-tab)
130
- padding-right: 0
131
127
  // Modifiers
132
128
  &.has-shadow
133
129
  box-shadow: 0 2px 3px rgba($black, 0.1)
134
- // Responsiveness
135
- +touch
136
- & > .container,
137
- .container > &
138
- & > .nav-left
139
- & > .nav-item.is-brand:first-child
140
- padding-left: 20px
@@ -1,37 +1,133 @@
1
- .pagination
1
+ $pagination: $grey-darker !default
2
+ $pagination-background: $white !default
3
+ $pagination-border: $grey-lighter !default
4
+
5
+ $pagination-hover: $link-hover !default
6
+ $pagination-hover-border: $link-hover-border !default
7
+
8
+ $pagination-focus: $link-focus !default
9
+ $pagination-focus-border: $link-focus-border !default
10
+
11
+ $pagination-active: $link-active !default
12
+ $pagination-active-border: $link-active-border !default
13
+
14
+ $pagination-disabled: $grey !default
15
+ $pagination-disabled-background: $grey-lighter !default
16
+ $pagination-disabled-border: $grey-lighter !default
17
+
18
+ $pagination-current: $link-invert !default
19
+ $pagination-current-background: $link !default
20
+ $pagination-current-border: $link !default
21
+
22
+ $pagination-ellipsis: $grey-light !default
23
+
24
+ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
25
+
26
+ .pagination,
27
+ .pagination-list
2
28
  align-items: center
3
29
  display: flex
4
30
  justify-content: center
5
31
  text-align: center
6
- a
7
- display: block
8
- min-width: 32px
9
- padding: 3px 8px
10
- span
11
- color: $text-light
12
- display: block
13
- margin: 0 4px
32
+
33
+ .pagination-previous,
34
+ .pagination-next,
35
+ .pagination-link,
36
+ .pagination-ellipsis
37
+ +control
38
+ +unselectable
39
+ font-size: 0.875rem
40
+ padding-left: 0.5em
41
+ padding-right: 0.5em
42
+ justify-content: center
43
+ text-align: center
44
+
45
+ .pagination-previous,
46
+ .pagination-next,
47
+ .pagination-link
48
+ border: 1px solid $pagination-border
49
+ min-width: 2.5em
50
+ &:hover
51
+ border-color: $pagination-hover-border
52
+ color: $pagination-hover
53
+ &:focus
54
+ border-color: $pagination-focus-border
55
+ &:active
56
+ box-shadow: $pagination-shadow-inset
57
+ &[disabled],
58
+ &.is-disabled
59
+ background: $pagination-disabled-background
60
+ color: $pagination-disabled
61
+ opacity: 0.5
62
+ pointer-events: none
63
+
64
+ .pagination-previous,
65
+ .pagination-next
66
+ padding-left: 0.75em
67
+ padding-right: 0.75em
68
+
69
+ .pagination-link
70
+ &.is-current
71
+ background-color: $pagination-current-background
72
+ border-color: $pagination-current-border
73
+ color: $pagination-current
74
+
75
+ .pagination-ellipsis
76
+ color: $pagination-ellipsis
77
+ pointer-events: none
78
+
79
+ .pagination-list
14
80
  li
15
- margin: 0 2px
16
- ul
17
- align-items: center
18
- display: flex
19
- flex-grow: 1
20
- flex-shrink: 0
21
- justify-content: center
22
- // Responsiveness
23
- +mobile
81
+ &:not(:first-child)
82
+ margin-left: 0.375rem
83
+
84
+ +mobile
85
+ .pagination
24
86
  flex-wrap: wrap
25
- & > a
26
- width: calc(50% - 5px)
27
- &:not(:first-child)
28
- margin-left: 10px
87
+ .pagination-previous,
88
+ .pagination-next
89
+ flex-grow: 1
90
+ flex-shrink: 1
91
+ width: calc(50% - 0.375rem)
92
+ .pagination-next
93
+ margin-left: 0.75rem
94
+ .pagination-list
95
+ margin-top: 0.75rem
29
96
  li
30
97
  flex-grow: 1
31
- flex-shrink: 0
32
- ul
33
- margin-top: 10px
34
- +tablet
35
- & > a
36
- &:not(:first-child)
98
+ flex-shrink: 1
99
+
100
+ +tablet
101
+ .pagination-list
102
+ flex-grow: 1
103
+ flex-shrink: 1
104
+ justify-content: flex-start
105
+ order: 1
106
+ .pagination-previous,
107
+ .pagination-next
108
+ margin-left: 0.75rem
109
+ .pagination-previous
110
+ order: 2
111
+ .pagination-next
112
+ order: 3
113
+ .pagination
114
+ justify-content: space-between
115
+ &.is-centered
116
+ .pagination-previous
117
+ margin-left: 0
118
+ order: 1
119
+ .pagination-list
120
+ justify-content: center
121
+ order: 2
122
+ .pagination-next
123
+ order: 3
124
+ &.is-right
125
+ .pagination-previous
126
+ margin-left: 0
37
127
  order: 1
128
+ .pagination-next
129
+ order: 2
130
+ margin-right: 0.75rem
131
+ .pagination-list
132
+ justify-content: flex-end
133
+ order: 3
@@ -1,57 +1,74 @@
1
- .panel-icon
2
- +fa(14px, 16px)
3
- color: $text-light
4
- float: left
5
- margin: 0 4px 0 -2px
6
- .fa
7
- font-size: inherit
8
- line-height: inherit
1
+ .panel
2
+ font-size: $size-normal
3
+ &:not(:last-child)
4
+ margin-bottom: 1.5rem
5
+
6
+ .panel-heading,
7
+ .panel-tabs,
8
+ .panel-block
9
+ border-bottom: 1px solid $border
10
+ border-left: 1px solid $border
11
+ border-right: 1px solid $border
12
+ &:first-child
13
+ border-top: 1px solid $border
9
14
 
10
15
  .panel-heading
11
16
  background-color: $background
12
- border-bottom: 1px solid $border
13
- border-radius: 4px 4px 0 0
17
+ border-radius: $radius $radius 0 0
14
18
  color: $text-strong
15
- font-size: $size-medium
16
- font-weight: 300
17
- padding: 10px
18
-
19
- .panel-list
20
- a
21
- color: $text
22
- &:hover
23
- color: $link
19
+ font-size: 1.25em
20
+ font-weight: $weight-light
21
+ line-height: 1.25
22
+ padding: 0.5em 0.75em
24
23
 
25
24
  .panel-tabs
25
+ align-items: flex-end
26
26
  display: flex
27
- font-size: $size-small
28
- padding: 5px 10px 0
27
+ font-size: 0.875em
29
28
  justify-content: center
30
29
  a
31
30
  border-bottom: 1px solid $border
32
31
  margin-bottom: -1px
33
- padding: 5px
32
+ padding: 0.5em
34
33
  // Modifiers
35
34
  &.is-active
36
35
  border-bottom-color: $link-active-border
37
36
  color: $link-active
38
- &:not(:last-child)
39
- border-bottom: 1px solid $border
37
+
38
+ .panel-list
39
+ a
40
+ color: $text
41
+ &:hover
42
+ color: $link
40
43
 
41
44
  .panel-block
45
+ align-items: center
42
46
  color: $text-strong
43
- display: block
44
- line-height: 16px
45
- padding: 10px
46
- &:not(:last-child)
47
- border-bottom: 1px solid $border
47
+ display: flex
48
+ justify-content: flex-start
49
+ padding: 0.5em 0.75em
50
+ input[type="checkbox"]
51
+ margin-right: 0.75em
52
+ & > .control
53
+ flex-grow: 1
54
+ flex-shrink: 1
55
+ width: 100%
56
+ &.is-active
57
+ border-left-color: $link
58
+ color: $link-active
59
+ .panel-icon
60
+ color: $link
48
61
 
49
- a.panel-block
62
+ a.panel-block,
63
+ label.panel-block
64
+ cursor: pointer
50
65
  &:hover
51
66
  background-color: $background
52
67
 
53
- .panel
54
- border: 1px solid $border
55
- border-radius: $radius-large
56
- &:not(:last-child)
57
- margin-bottom: 20px
68
+ .panel-icon
69
+ +fa(14px, 1em)
70
+ color: $text-light
71
+ margin-right: 0.75em
72
+ .fa
73
+ font-size: inherit
74
+ line-height: inherit
@@ -3,8 +3,8 @@
3
3
  +unselectable
4
4
  align-items: stretch
5
5
  display: flex
6
+ font-size: $size-normal
6
7
  justify-content: space-between
7
- line-height: 24px
8
8
  overflow: hidden
9
9
  overflow-x: auto
10
10
  white-space: nowrap
@@ -15,7 +15,7 @@
15
15
  display: flex
16
16
  justify-content: center
17
17
  margin-bottom: -1px
18
- padding: 6px 12px
18
+ padding: 0.5em 1em
19
19
  vertical-align: top
20
20
  &:hover
21
21
  border-bottom-color: $text-strong
@@ -24,8 +24,8 @@
24
24
  display: block
25
25
  &.is-active
26
26
  a
27
- border-bottom-color: $link
28
- color: $link
27
+ border-bottom-color: $primary
28
+ color: $primary
29
29
  ul
30
30
  align-items: center
31
31
  border-bottom: 1px solid $border
@@ -34,20 +34,20 @@
34
34
  flex-shrink: 0
35
35
  justify-content: flex-start
36
36
  &.is-left
37
- padding-right: 10px
37
+ padding-right: 0.75em
38
38
  &.is-center
39
39
  flex: none
40
40
  justify-content: center
41
- padding-left: 10px
42
- padding-right: 10px
41
+ padding-left: 0.75em
42
+ padding-right: 0.75em
43
43
  &.is-right
44
44
  justify-content: flex-end
45
- padding-left: 10px
45
+ padding-left: 0.75em
46
46
  .icon
47
47
  &:first-child
48
- margin-right: 8px
48
+ margin-right: 0.5em
49
49
  &:last-child
50
- margin-left: 8px
50
+ margin-left: 0.5em
51
51
  // Alignment
52
52
  &.is-centered
53
53
  ul
@@ -60,8 +60,6 @@
60
60
  a
61
61
  border: 1px solid transparent
62
62
  border-radius: $radius $radius 0 0
63
- padding-bottom: 5px
64
- padding-top: 5px
65
63
  &:hover
66
64
  background-color: $background
67
65
  border-bottom-color: $border
@@ -79,8 +77,6 @@
79
77
  a
80
78
  border: 1px solid $border
81
79
  margin-bottom: 0
82
- padding-bottom: 5px
83
- padding-top: 5px
84
80
  position: relative
85
81
  &:hover
86
82
  background-color: $background
@@ -104,28 +100,7 @@
104
100
  // Sizes
105
101
  &.is-small
106
102
  font-size: $size-small
107
- a
108
- padding: 2px 8px
109
- &.is-boxed,
110
- &.is-toggle
111
- a
112
- padding-bottom: 1px
113
- padding-top: 1px
114
103
  &.is-medium
115
104
  font-size: $size-medium
116
- a
117
- padding: 10px 16px
118
- &.is-boxed,
119
- &.is-toggle
120
- a
121
- padding-bottom: 9px
122
- padding-top: 9px
123
105
  &.is-large
124
106
  font-size: $size-large
125
- a
126
- padding: 14px 20px
127
- &.is-boxed,
128
- &.is-toggle
129
- a
130
- padding-bottom: 13px
131
- padding-top: 13px