bulma-rails 0.0.16 → 0.0.17.1

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: 9dbaf4ca3046063bf1bdeac1621a4d346f540440
4
- data.tar.gz: dca3ed5c677d15069139ad626316bd9339f4915e
3
+ metadata.gz: 4d301838a70878cdbe59a68e49a8f94d5d002a72
4
+ data.tar.gz: f7764db67f2419659742b63b71643603ea19095d
5
5
  SHA512:
6
- metadata.gz: 93b51adfa84f2056413fb7fe8bf8ae544f1bff5ddcf3d4df446903e76395b7e076de11afdd8e9e53175821b9ed8e35f8e98616a927c531e328814a34953f03c8
7
- data.tar.gz: 80ca991c3cfa8d58ba2aae12721c2a7e489440e262e60f2ba850eb7d2e83e5ac987c5f878c68a904081508c5c6144c045c4fc2d5ce313ede4c945b8416ff09de
6
+ metadata.gz: ee000e39bad1cc3f0d31716e10db577079a54aa64ca5758033658bfe99dba7d4059d30db6731ad7837de34cbed585a6941e2733f3f1f0897d432d1b759641775
7
+ data.tar.gz: 1ac59afcf75741a40235bdc583cfa8e0e8e6f27f9e2e76181617532eba997c27a121bababfa3bf269fb39c8e4b0cc688c1ca7ee83418ff3812c478d2c2fe9980
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.14"
11
+ gem "bulma-rails", "~> 0.0.17.1"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,11 +1,5 @@
1
1
  // Display
2
2
 
3
- .is-block
4
- display: block
5
-
6
- .is-inline
7
- display: inline
8
-
9
3
  .is-flex
10
4
  display: flex
11
5
 
@@ -1,3 +1,24 @@
1
+ .card-header
2
+ align-items: stretch
3
+ box-shadow: 0 1px 2px rgba(black, 0.1)
4
+ display: flex
5
+ min-height: 40px
6
+
7
+ .card-header-title
8
+ align-items: flex-start
9
+ color: $text-strong
10
+ display: flex
11
+ flex: 1
12
+ font-weight: bold
13
+ padding: 10px
14
+
15
+ .card-header-icon
16
+ align-items: center
17
+ cursor: pointer
18
+ display: flex
19
+ justify-content: center
20
+ width: 40px
21
+
1
22
  .card-image
2
23
  display: block
3
24
  position: relative
@@ -9,8 +30,18 @@
9
30
 
10
31
  .card-footer
11
32
  background: $background
12
- display: block
33
+ border-top: 1px solid $border
34
+ align-items: stretch
35
+ display: flex
36
+
37
+ .card-footer-item
38
+ align-items: center
39
+ display: flex
40
+ flex: 1
41
+ justify-content: center
13
42
  padding: 10px
43
+ &:not(:last-child)
44
+ border-right: 1px solid $border
14
45
 
15
46
  .card
16
47
  background: white
@@ -22,3 +53,5 @@
22
53
  margin-bottom: 10px
23
54
  &.is-rounded
24
55
  border-radius: 5px
56
+ &.is-fullwidth
57
+ width: 100%
@@ -7,4 +7,13 @@
7
7
  @import "tabs"
8
8
  @import "media"
9
9
  @import "menu"
10
+ @import "pagination"
11
+ @import "panel"
10
12
  @import "modal"
13
+
14
+ .box
15
+ @extend .block
16
+ background: white
17
+ border-radius: 5px
18
+ box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
19
+ padding: 20px
@@ -1,76 +1,30 @@
1
- .menu-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
9
-
10
- .menu-heading
11
- background: $background
12
- border-bottom: 1px solid $border
13
- border-radius: 4px 4px 0 0
14
- color: $text-strong
15
- font-size: $size-medium
16
- font-weight: 300
17
- padding: 10px
1
+ .menu-nav
2
+ a
3
+ display: block
4
+ padding: 5px 10px
18
5
 
19
6
  .menu-list
20
7
  a
8
+ border-radius: 2px
21
9
  color: $text
10
+ display: block
11
+ padding: 5px 10px
22
12
  &:hover
13
+ background: $background
23
14
  color: $link
24
-
25
- .menu-tabs
26
- display: flex
27
- font-size: $size-small
28
- padding: 5px 10px 0
29
- justify-content: center
30
- &:not(:last-child)
31
- border-bottom: 1px solid $border
32
- a
33
- border-bottom: 1px solid $border
34
- margin-bottom: -1px
35
- padding: 5px
36
15
  &.is-active
37
- border-bottom-color: $link-active-border
38
- color: $link-active
16
+ background: $link
17
+ color: $link-invert
18
+ li ul
19
+ border-left: 1px solid $border
20
+ margin: 10px
21
+ padding-left: 10px
39
22
 
40
- .menu-block
41
- color: $text-strong
42
- display: block
43
- line-height: 16px
44
- padding: 10px
45
- &:not(:last-child)
46
- border-bottom: 1px solid $border
47
- .checkbox
48
- border: 1px solid transparent
49
- border-radius: $radius
50
- display: block
51
- padding: 8px
52
- padding-left: 32px
53
- input
54
- left: 9px
55
- top: 9px
56
- &:hover
57
- border-color: $link
58
-
59
- a.menu-block:hover
60
- background: $background
61
-
62
- .menu-checkbox
63
- @extend .checkbox
64
- display: block
65
- padding: 9px 10px 9px 30px
66
- &:not(:last-child)
67
- border-bottom: 1px solid $border
68
- input
69
- left: 8px
70
- top: 10px
71
-
72
- .menu
73
- border: 1px solid $border
74
- border-radius: 5px
75
- &:not(:last-child)
76
- margin-bottom: 20px
23
+ .menu-label
24
+ color: $text-light
25
+ font-size: $size-small
26
+ letter-spacing: 1px
27
+ margin-bottom: 5px
28
+ text-transform: uppercase
29
+ &:not(:first-child)
30
+ margin-top: 20px
@@ -0,0 +1,39 @@
1
+ .pagination
2
+ align-items: center
3
+ display: flex
4
+ justify-content: center
5
+ text-align: center
6
+ a
7
+ @extend .button
8
+ display: block
9
+ min-width: 32px
10
+ padding: 3px 8px
11
+ &.is-active
12
+ background: $link
13
+ border-color: $link
14
+ color: $link-invert
15
+ span
16
+ color: $text-light
17
+ display: block
18
+ margin: 0 4px
19
+ li
20
+ margin: 0 2px
21
+ ul
22
+ align-items: center
23
+ display: flex
24
+ flex: 1
25
+ justify-content: center
26
+ +mobile
27
+ flex-wrap: wrap
28
+ & > a
29
+ width: calc(50% - 5px)
30
+ &:not(:first-child)
31
+ margin-left: 10px
32
+ li
33
+ flex: 1
34
+ ul
35
+ margin-top: 10px
36
+ +tablet
37
+ & > a
38
+ &:not(:first-child)
39
+ order: 1
@@ -0,0 +1,76 @@
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
9
+
10
+ .panel-heading
11
+ background: $background
12
+ border-bottom: 1px solid $border
13
+ border-radius: 4px 4px 0 0
14
+ 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
24
+
25
+ .panel-tabs
26
+ display: flex
27
+ font-size: $size-small
28
+ padding: 5px 10px 0
29
+ justify-content: center
30
+ &:not(:last-child)
31
+ border-bottom: 1px solid $border
32
+ a
33
+ border-bottom: 1px solid $border
34
+ margin-bottom: -1px
35
+ padding: 5px
36
+ &.is-active
37
+ border-bottom-color: $link-active-border
38
+ color: $link-active
39
+
40
+ .panel-block
41
+ color: $text-strong
42
+ display: block
43
+ line-height: 16px
44
+ padding: 10px
45
+ &:not(:last-child)
46
+ border-bottom: 1px solid $border
47
+ .checkbox
48
+ border: 1px solid transparent
49
+ border-radius: $radius
50
+ display: block
51
+ padding: 8px
52
+ padding-left: 32px
53
+ input
54
+ left: 9px
55
+ top: 9px
56
+ &:hover
57
+ border-color: $link
58
+
59
+ a.panel-block:hover
60
+ background: $background
61
+
62
+ .panel-checkbox
63
+ @extend .checkbox
64
+ display: block
65
+ padding: 9px 10px 9px 30px
66
+ &:not(:last-child)
67
+ border-bottom: 1px solid $border
68
+ input
69
+ left: 8px
70
+ top: 10px
71
+
72
+ .panel
73
+ border: 1px solid $border
74
+ border-radius: 5px
75
+ &:not(:last-child)
76
+ margin-bottom: 20px
@@ -16,6 +16,7 @@
16
16
  .button
17
17
  +control
18
18
  +unselectable
19
+ justify-content: center
19
20
  padding: 3px 10px
20
21
  text-align: center
21
22
  white-space: nowrap
@@ -26,10 +27,11 @@
26
27
  font-size: $size-small
27
28
  line-height: 1
28
29
  margin-top: 5px
29
- .fa
30
- line-height: 24px
31
- margin: 0 -2px
32
- width: 24px
30
+ .icon
31
+ &:first-child
32
+ margin-right: 4px
33
+ &:last-child
34
+ margin-left: 4px
33
35
  &:hover
34
36
  color: $control-hover
35
37
  &:active
@@ -69,6 +71,14 @@
69
71
  background: rgba(black, 0.05)
70
72
  &.is-loading:after
71
73
  border-color: transparent transparent $color-invert $color-invert !important
74
+ &.is-link
75
+ border-color: transparent
76
+ color: $text
77
+ text-decoration: underline
78
+ &:hover,
79
+ &:focus
80
+ background: $border
81
+ color: $text-strong
72
82
  &.is-small
73
83
  +button-small
74
84
  &.is-medium
@@ -91,12 +101,3 @@
91
101
  &[disabled]
92
102
  opacity: 0.5
93
103
  pointer-events: none
94
- +tablet
95
- small
96
- color: $text
97
- left: 0
98
- margin-top: 10px
99
- position: absolute
100
- top: 100%
101
- width: 100%
102
-
@@ -1,11 +1,12 @@
1
1
  =control
2
2
  -moz-appearance: none
3
3
  -webkit-appearance: none
4
+ align-items: center
4
5
  background: $control-background
5
6
  border: 1px solid $control-border
6
7
  border-radius: $radius
7
8
  color: $control
8
- display: inline-block
9
+ display: inline-flex
9
10
  font-size: $size-normal
10
11
  height: 32px
11
12
  line-height: 24px
@@ -31,10 +32,8 @@
31
32
  +control
32
33
  @each $name, $pair in $colors
33
34
  $color: nth($pair, 1)
34
- $color-invert: nth($pair, 2)
35
35
  &.is-#{$name}
36
36
  border-color: $color
37
- color: $color
38
37
 
39
38
  =control-small
40
39
  border-radius: 2px
@@ -172,6 +171,10 @@
172
171
  border-color: $control-hover-border
173
172
  &::ms-expand
174
173
  display: none
174
+ &.is-fullwidth
175
+ width: 100%
176
+ select
177
+ width: 100%
175
178
  &:after
176
179
  +arrow($link)
177
180
  margin-top: -6px
@@ -184,9 +187,30 @@
184
187
  .label
185
188
  color: $text-strong
186
189
  display: block
190
+ font-weight: bold
187
191
  &:not(:last-child)
188
192
  margin-bottom: 5px
189
193
 
194
+ .help
195
+ display: block
196
+ font-size: $size-small
197
+ margin-top: 5px
198
+ @each $name, $pair in $colors
199
+ $color: nth($pair, 1)
200
+ &.is-#{$name}
201
+ color: $color
202
+
203
+ // Containers
204
+
205
+ .control-label
206
+ +mobile
207
+ margin-bottom: 5px
208
+ +tablet
209
+ flex: 1
210
+ margin-right: 20px
211
+ padding-top: 7px
212
+ text-align: right
213
+
190
214
  .control
191
215
  position: relative
192
216
  text-align: left
@@ -200,27 +224,26 @@
200
224
  margin-bottom: 10px
201
225
  &.has-icon
202
226
  & > .fa
203
- +fa(14px, 20px)
227
+ +fa(14px, 16px)
204
228
  color: $text-light
205
- left: 6px
206
229
  pointer-events: none
207
230
  position: absolute
208
- top: 6px
231
+ top: 8px
209
232
  z-index: 4
210
233
  .input
211
- padding-left: 32px
212
234
  &:focus + .fa
213
- color: $control-active
214
- &.is-horizontal
215
- display: flex
216
- & > .button,
217
- & > .input,
218
- & > .select
219
- &:not(:last-child)
220
- margin-right: 10px
221
- & > .input
222
- flex: 1
223
- &.is-grouped
235
+ color: $text-strong
236
+ &:not(.has-icon-right)
237
+ & > .fa
238
+ left: 8px
239
+ .input
240
+ padding-left: 32px
241
+ &.has-icon-right
242
+ & > .fa
243
+ right: 8px
244
+ .input
245
+ padding-right: 32px
246
+ &.has-addons
224
247
  display: flex
225
248
  .input,
226
249
  .button,
@@ -240,3 +263,18 @@
240
263
  border-radius: 0 $radius $radius 0
241
264
  &.is-centered
242
265
  justify-content: center
266
+ &.is-grouped
267
+ display: flex
268
+ & > .button,
269
+ & > .input,
270
+ & > .select
271
+ &:not(:last-child)
272
+ margin-right: 10px
273
+ & > .input
274
+ flex: 1
275
+ &.is-horizontal
276
+ +tablet
277
+ display: flex
278
+ & > .control
279
+ display: flex
280
+ flex: 5
@@ -6,13 +6,7 @@
6
6
  @import "images"
7
7
  @import "messages"
8
8
  @import "notifications"
9
-
10
- .box
11
- @extend .block
12
- background: white
13
- border-radius: 5px
14
- box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
15
- padding: 20px
9
+ @import "progress"
16
10
 
17
11
  .delete
18
12
  +unselectable
@@ -61,7 +55,7 @@
61
55
  font-size: inherit
62
56
  line-height: inherit
63
57
  &.is-small
64
- +fa(14px, 20px)
58
+ +fa(14px, 16px)
65
59
  &.is-medium
66
60
  +fa(28px, 32px)
67
61
  &.is-large
@@ -0,0 +1,30 @@
1
+ .progress
2
+ -moz-appearance: none
3
+ -webkit-appearance: none
4
+ @extend .block
5
+ border: none
6
+ border-radius: 290486px
7
+ display: block
8
+ height: 12px
9
+ overflow: hidden
10
+ padding: 0
11
+ width: 100%
12
+ &::-webkit-progress-bar
13
+ background: $border
14
+ &::-webkit-progress-value
15
+ background: $text
16
+ &::-moz-progress-bar
17
+ background: $text
18
+ &.is-small
19
+ height: 8px
20
+ &.is-medium
21
+ height: 16px
22
+ &.is-large
23
+ height: 20px
24
+ @each $name, $pair in $colors
25
+ $color: nth($pair, 1)
26
+ &.is-#{$name}
27
+ &::-webkit-progress-value
28
+ background: $color
29
+ &::-moz-progress-bar
30
+ background: $color
@@ -35,12 +35,7 @@
35
35
  img
36
36
  max-height: 24px
37
37
  a
38
- color: $text
39
- flex: 1
40
- &:hover
41
- color: $link-hover
42
- &.is-active
43
- color: $link-active
38
+ flex-grow: 1
44
39
  .fa
45
40
  font-size: 21px
46
41
  line-height: 24px
@@ -49,6 +44,14 @@
49
44
  +mobile
50
45
  text-align: left
51
46
 
47
+ .header-item a,
48
+ a.header-item
49
+ color: $text
50
+ &:hover
51
+ color: $link-hover
52
+ &.is-active
53
+ color: $link-active
54
+
52
55
  .header-icon
53
56
  +fa(14px, 24px)
54
57
  color: $text
@@ -143,4 +146,3 @@
143
146
  &:hover,
144
147
  &.is-active
145
148
  border-bottom-width: 2px
146
-
@@ -64,12 +64,12 @@
64
64
  .header .container
65
65
  box-shadow: 0 1px 0 rgba($color-invert, 0.2)
66
66
  .header-icon,
67
+ a.header-item,
67
68
  .header-item > a:not(.button)
68
- color: $color-invert
69
- opacity: 0.5
69
+ color: rgba($color-invert, 0.5)
70
70
  &:hover,
71
71
  &.is-active
72
- opacity: 1
72
+ color: $color-invert
73
73
  .tabs
74
74
  a
75
75
  color: $color-invert
data/bulma-rails.gemspec CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.0.16'
5
+ gem.version = '0.0.17.1'
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.0.16
4
+ version: 0.0.17.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2016-03-01 00:00:00.000000000 Z
11
+ date: 2016-03-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass
@@ -46,6 +46,8 @@ files:
46
46
  - app/assets/stylesheets/bulma/components/menu.sass
47
47
  - app/assets/stylesheets/bulma/components/modal.sass
48
48
  - app/assets/stylesheets/bulma/components/navbar.sass
49
+ - app/assets/stylesheets/bulma/components/pagination.sass
50
+ - app/assets/stylesheets/bulma/components/panel.sass
49
51
  - app/assets/stylesheets/bulma/components/table.sass
50
52
  - app/assets/stylesheets/bulma/components/tabs.sass
51
53
  - app/assets/stylesheets/bulma/config/generated-variables.sass
@@ -56,6 +58,7 @@ files:
56
58
  - app/assets/stylesheets/bulma/elements/images.sass
57
59
  - app/assets/stylesheets/bulma/elements/messages.sass
58
60
  - app/assets/stylesheets/bulma/elements/notifications.sass
61
+ - app/assets/stylesheets/bulma/elements/progress.sass
59
62
  - app/assets/stylesheets/bulma/elements/titles.sass
60
63
  - app/assets/stylesheets/bulma/layout/footer.sass
61
64
  - app/assets/stylesheets/bulma/layout/header.sass