bulma-rails 0.0.24 → 0.0.26

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 (35) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -1
  3. data/README.md +2 -2
  4. data/app/assets/stylesheets/sass/base/classes.sass +2 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +4 -3
  6. data/app/assets/stylesheets/sass/base/helpers.sass +44 -3
  7. data/app/assets/stylesheets/sass/components/card.sass +3 -4
  8. data/app/assets/stylesheets/sass/components/components.sass +2 -1
  9. data/app/assets/stylesheets/sass/components/grid.sass +0 -13
  10. data/app/assets/stylesheets/sass/components/level.sass +57 -0
  11. data/app/assets/stylesheets/sass/components/message.sass +1 -1
  12. data/app/assets/stylesheets/sass/components/modal.sass +40 -1
  13. data/app/assets/stylesheets/sass/components/nav.sass +120 -0
  14. data/app/assets/stylesheets/sass/components/navbar.sass +10 -2
  15. data/app/assets/stylesheets/sass/components/panel.sass +4 -2
  16. data/app/assets/stylesheets/sass/components/tabs.sass +68 -43
  17. data/app/assets/stylesheets/sass/elements/box.sass +4 -4
  18. data/app/assets/stylesheets/sass/elements/button.sass +14 -19
  19. data/app/assets/stylesheets/sass/elements/content.sass +6 -0
  20. data/app/assets/stylesheets/sass/elements/elements.sass +1 -2
  21. data/app/assets/stylesheets/sass/elements/{controls.sass → form.sass} +2 -50
  22. data/app/assets/stylesheets/sass/elements/other.sass +22 -16
  23. data/app/assets/stylesheets/sass/elements/table.sass +4 -2
  24. data/app/assets/stylesheets/sass/layout/footer.sass +8 -6
  25. data/app/assets/stylesheets/sass/layout/header.sass +7 -10
  26. data/app/assets/stylesheets/sass/layout/hero.sass +57 -62
  27. data/app/assets/stylesheets/sass/layout/layout.sass +0 -1
  28. data/app/assets/stylesheets/sass/layout/section.sass +1 -3
  29. data/app/assets/stylesheets/sass/utilities/controls.sass +51 -0
  30. data/app/assets/stylesheets/sass/utilities/functions.sass +1 -1
  31. data/app/assets/stylesheets/sass/utilities/mixins.sass +8 -7
  32. data/app/assets/stylesheets/sass/utilities/utilities.sass +1 -0
  33. data/app/assets/stylesheets/sass/utilities/variables.sass +8 -4
  34. data/bulma-rails.gemspec +1 -1
  35. metadata +6 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a8689a719d4414df33f407969a8b0a34642dbb8e
4
- data.tar.gz: 1a020eebc90466db2d4fca369ceb5d1f6e92c1b4
3
+ metadata.gz: ed3444a73e5a373d05cdf16d22f6aa5a1b7b3151
4
+ data.tar.gz: f15af369eae758a17b5674aee5f5b3221ceceaf9
5
5
  SHA512:
6
- metadata.gz: 88a24cad2e0f639944af056c4389ef765f5019a61b7c43d71cd074b7b0673e28a376e23f13063abdb0c771684fca83381e599c5436374ae647450fd758e1e6d6
7
- data.tar.gz: 460123e1dfe947ea487a599b09baa8d03daf50baef31084a804f8d9874cf993f3c76d19dc7f0ea337f77f449e855881d2b5797a241795d9330fc2cceb1e723b8
6
+ metadata.gz: d5a93527343b77b5c9a9bec48d6f1ea93dff034ccfe8ea92bb5ffa0efbb4e8c1d8b4c40c04d1d9caf698e344a7f103f24a6250b24e2c4f735902eb25f5f1d664
7
+ data.tar.gz: aea072fc7a5133b09c68aa59edbef30b74fa8df07790f6f897d8ddab4d766e5f80aeea776c3c4e521ccffdae19a3c691f947f26a95ca13f53a72f1451946726e
data/.gitignore CHANGED
@@ -1,2 +1,2 @@
1
-
1
+ .bundle
2
2
  *.gem
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.0.24"
11
+ gem "bulma-rails", "~> 0.0.26"
12
12
 
13
13
  And then execute:
14
14
 
@@ -22,7 +22,7 @@ To import all assets in your Rails project, add the following line to your appli
22
22
  ```
23
23
 
24
24
  For information about customizing Bulma,
25
- see: [http://bulma.io/documentation/overview/](http://bulma.io/documentation/overview/)
25
+ see: [http://bulma.io/documentation/overview/start/](http://bulma.io/documentation/overview/start/)
26
26
 
27
27
  ## Contributing
28
28
 
@@ -11,6 +11,8 @@
11
11
  &.is-fluid
12
12
  margin: 0 20px
13
13
  max-width: none
14
+ +widescreen
15
+ max-width: 1200px
14
16
 
15
17
  .fa
16
18
  font-size: 21px
@@ -7,9 +7,6 @@ html
7
7
  overflow-x: hidden
8
8
  overflow-y: scroll
9
9
  text-rendering: optimizeLegibility
10
- // Modifiers
11
- &.has-modal
12
- overflow: hidden
13
10
 
14
11
  article,
15
12
  aside,
@@ -71,6 +68,10 @@ input[type="radio"]
71
68
  small
72
69
  font-size: $size-small
73
70
 
71
+ span
72
+ font-style: inherit
73
+ font-weight: inherit
74
+
74
75
  strong
75
76
  color: $text-strong
76
77
  font-weight: $weight-bold
@@ -1,7 +1,31 @@
1
1
  // Display
2
2
 
3
- .is-flex
4
- display: flex
3
+ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
4
+
5
+ @each $display in $displays
6
+ .is-#{$display}
7
+ display: #{$display}
8
+ .is-#{$display}-mobile
9
+ +mobile
10
+ display: #{$display} !important
11
+ .is-#{$display}-tablet
12
+ +tablet
13
+ display: #{$display} !important
14
+ .is-#{$display}-tablet-only
15
+ +tablet-only
16
+ display: #{$display} !important
17
+ .is-#{$display}-touch
18
+ +touch
19
+ display: #{$display} !important
20
+ .is-#{$display}-desktop
21
+ +desktop
22
+ display: #{$display} !important
23
+ .is-#{$display}-desktop-only
24
+ +desktop-only
25
+ display: #{$display} !important
26
+ .is-#{$display}-widescreen
27
+ +widescreen
28
+ display: #{$display} !important
5
29
 
6
30
  // Float
7
31
 
@@ -14,6 +38,11 @@
14
38
  .is-pulled-right
15
39
  float: right
16
40
 
41
+ // Overflow
42
+
43
+ .is-clipped
44
+ overflow: hidden !important
45
+
17
46
  // Overlay
18
47
 
19
48
  .is-overlay
@@ -43,6 +72,10 @@
43
72
  +tablet
44
73
  display: none !important
45
74
 
75
+ .is-hidden-tablet-only
76
+ +tablet-only
77
+ display: none !important
78
+
46
79
  .is-hidden-touch
47
80
  +touch
48
81
  display: none !important
@@ -51,6 +84,14 @@
51
84
  +desktop
52
85
  display: none !important
53
86
 
87
+ .is-hidden-desktop-only
88
+ +desktop-only
89
+ display: none !important
90
+
91
+ .is-hidden-widescreen
92
+ +widescreen
93
+ display: none !important
94
+
54
95
  // Other
55
96
 
56
97
  .is-disabled
@@ -60,4 +101,4 @@
60
101
  margin: 0 !important
61
102
 
62
103
  .is-unselectable
63
- +unselectable
104
+ @extend .unselectable
@@ -1,6 +1,6 @@
1
1
  .card-header
2
2
  align-items: stretch
3
- box-shadow: 0 1px 2px rgba(black, 0.1)
3
+ box-shadow: 0 1px 2px rgba($black, 0.1)
4
4
  display: flex
5
5
  min-height: 40px
6
6
 
@@ -29,7 +29,6 @@
29
29
  margin-top: -20px
30
30
 
31
31
  .card-footer
32
- background: $background
33
32
  border-top: 1px solid $border
34
33
  align-items: stretch
35
34
  display: flex
@@ -44,8 +43,8 @@
44
43
  border-right: 1px solid $border
45
44
 
46
45
  .card
47
- background: white
48
- box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
46
+ background: $white
47
+ box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
49
48
  color: $text
50
49
  max-width: 100%
51
50
  position: relative
@@ -3,11 +3,12 @@
3
3
  @import "card"
4
4
  @import "grid"
5
5
  @import "highlight"
6
+ @import "level"
6
7
  @import "media"
7
8
  @import "menu"
8
9
  @import "message"
9
10
  @import "modal"
10
- @import "navbar"
11
+ @import "nav"
11
12
  @import "pagination"
12
13
  @import "panel"
13
14
  @import "tabs"
@@ -211,19 +211,6 @@
211
211
  &.is-desktop
212
212
  display: flex
213
213
 
214
- .tilefiejsoif
215
- flex: 1
216
- // Modifiers
217
- &.is-parent
218
- padding: 10px
219
- // Responsiveness
220
- +tablet
221
- // Sizes
222
- @for $i from 1 through 12
223
- &.is-#{$i}
224
- flex: none
225
- width: ($i / 12) * 100%
226
-
227
214
  .tile
228
215
  align-items: stretch
229
216
  flex: 1
@@ -0,0 +1,57 @@
1
+ .level-item
2
+ .title,
3
+ .subtitle
4
+ margin-bottom: 0
5
+ // Responsiveness
6
+ +mobile
7
+ &:not(:last-child)
8
+ margin-bottom: 10px
9
+
10
+ .level-left,
11
+ .level-right
12
+ .level-item
13
+ &:not(:last-child)
14
+ margin-right: 10px
15
+ // Modifiers
16
+ &.is-flexible
17
+ flex: 1
18
+
19
+ .level-left
20
+ // Responsiveness
21
+ +mobile
22
+ & + .level-right
23
+ margin-top: 20px
24
+ +tablet
25
+ align-items: center
26
+ display: flex
27
+
28
+ .level-right
29
+ // Responsiveness
30
+ +tablet
31
+ align-items: center
32
+ display: flex
33
+ justify-content: flex-end
34
+
35
+ .level
36
+ @extend .block
37
+ align-items: center
38
+ justify-content: space-between
39
+ code
40
+ border-radius: $radius
41
+ img
42
+ display: inline-block
43
+ vertical-align: top
44
+ // Modifiers
45
+ &.is-mobile
46
+ display: flex
47
+ & > .level-item
48
+ &:not(:last-child)
49
+ margin-bottom: 0
50
+ &:not(.is-narrow)
51
+ flex: 1
52
+ // Responsiveness
53
+ +tablet
54
+ display: flex
55
+ & > .level-item
56
+ &:not(.is-narrow)
57
+ flex: 1
@@ -24,7 +24,7 @@
24
24
  @each $name, $pair in $colors
25
25
  $color: nth($pair, 1)
26
26
  $color-invert: nth($pair, 2)
27
- $lightning: (100% - lightness($color)) - 4%
27
+ $lightning: max((100% - lightness($color)) - 4%, 0%)
28
28
  $darkness: max(lightness($color) - 10%, lightness($color))
29
29
  &.is-#{$name}
30
30
  background: lighten($color, $lightning)
@@ -1,6 +1,6 @@
1
1
  .modal-background
2
2
  +overlay
3
- background: rgba(black, 0.86)
3
+ background: rgba($black, 0.86)
4
4
 
5
5
  .modal-content
6
6
  margin: 0 20px
@@ -23,6 +23,45 @@
23
23
  top: 20px
24
24
  width: 40px
25
25
 
26
+ .modal-card
27
+ @extend .modal-content
28
+ background: $white
29
+ border-radius: 5px
30
+ display: flex
31
+ flex-direction: column
32
+ max-height: calc(100vh - 40px)
33
+ overflow: hidden
34
+
35
+ .modal-card-head,
36
+ .modal-card-foot
37
+ align-items: center
38
+ background: $background
39
+ display: flex
40
+ flex-shrink: 0
41
+ justify-content: flex-start
42
+ padding: 20px
43
+ position: relative
44
+
45
+ .modal-card-head
46
+ border-bottom: 1px solid $border
47
+
48
+ .modal-card-title
49
+ color: $text-strong
50
+ flex: 1
51
+ font-size: $size-4
52
+ line-height: 1
53
+
54
+ .modal-card-foot
55
+ border-top: 1px solid $border
56
+ .button
57
+ &:not(:last-child)
58
+ margin-right: 10px
59
+
60
+ .modal-card-body
61
+ flex: 1
62
+ overflow: auto
63
+ padding: 20px
64
+
26
65
  .modal
27
66
  +overlay
28
67
  align-items: center
@@ -0,0 +1,120 @@
1
+ // Components
2
+
3
+ .nav-toggle
4
+ @extend .hamburger
5
+ // Responsiveness
6
+ +tablet
7
+ display: none
8
+
9
+ .nav-item
10
+ align-items: center
11
+ display: flex
12
+ justify-content: center
13
+ padding: 10px
14
+ a
15
+ flex-grow: 1
16
+ img
17
+ max-height: 24px
18
+ .button + .button
19
+ margin-left: 10px
20
+ .tag
21
+ &:first-child
22
+ margin-right: 5px
23
+ &:last-child
24
+ margin-left: 5px
25
+ // Responsiveness
26
+ +mobile
27
+ justify-content: flex-start
28
+
29
+ .nav-item a,
30
+ a.nav-item
31
+ color: $text
32
+ &:hover
33
+ color: $link-hover
34
+ // Modifiers
35
+ &.is-active
36
+ color: $link-active
37
+ &.is-tab
38
+ border-bottom: 1px solid transparent
39
+ border-top: 1px solid transparent
40
+ padding-left: 12px
41
+ padding-right: 12px
42
+ &:hover
43
+ border-bottom: 1px solid $link
44
+ border-top: 1px solid transparent
45
+ &.is-active
46
+ border-bottom: 3px solid $link
47
+ border-top: 3px solid transparent
48
+ color: $link
49
+
50
+ // Containers
51
+
52
+ .nav-menu
53
+ // Responsiveness
54
+ +mobile
55
+ background: $white
56
+ box-shadow: 0 4px 7px rgba($black, 0.1)
57
+ left: 0
58
+ display: none
59
+ right: 0
60
+ top: 100%
61
+ position: absolute
62
+ .nav-item
63
+ border-top: 1px solid rgba($border, 0.5)
64
+ padding: 10px
65
+ &.is-active
66
+ display: block
67
+
68
+ .nav-left
69
+ align-items: stretch
70
+ display: flex
71
+ flex: 1
72
+ justify-content: flex-start
73
+ overflow: hidden
74
+ overflow-x: auto
75
+ white-space: nowrap
76
+
77
+ .nav-center
78
+ align-items: stretch
79
+ display: flex
80
+ justify-content: center
81
+
82
+ .nav-right
83
+ // Responsiveness
84
+ +tablet
85
+ align-items: stretch
86
+ display: flex
87
+ flex: 1
88
+ justify-content: flex-end
89
+
90
+ // Main container
91
+
92
+ .nav
93
+ align-items: stretch
94
+ background: $white
95
+ display: flex
96
+ min-height: $nav-height
97
+ position: relative
98
+ text-align: center
99
+ z-index: 2
100
+ & > .container
101
+ align-items: stretch
102
+ display: flex
103
+ min-height: $nav-height
104
+ width: 100%
105
+ & > .nav-left
106
+ & > .nav-item:first-child:not(.is-tab)
107
+ padding-left: 0
108
+ & > .nav-right
109
+ & > .nav-item:last-child:not(.is-tab)
110
+ padding-right: 0
111
+ .container > &
112
+ & > .nav-left
113
+ & > .nav-item:first-child:not(.is-tab)
114
+ padding-left: 0
115
+ & > .nav-right
116
+ & > .nav-item:last-child:not(.is-tab)
117
+ padding-right: 0
118
+ // Modifiers
119
+ &.has-shadow
120
+ box-shadow: 0 2px 3px rgba($black, 0.1)