bulma-rails 0.0.12 → 0.0.14

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 9dff5111bb133a0c6a8459f28a72b7fa52742de1
4
- data.tar.gz: 894b6acd0a5a303b801a93e11b326e6bf8b76a96
3
+ metadata.gz: 5b0f4d6f41267e12ff732b169a7c209cd613c387
4
+ data.tar.gz: ec5d9ac2ad39f0c4c043d6b93f76500ac9c82065
5
5
  SHA512:
6
- metadata.gz: bc149aec5b1db97d6bf13f63de5427f54d85f2eeaa9e83bdcb33280c9f010f3ad59a0e55115db6aa3ab9844bea71b531872cc3e4bef3db6fa02e1ef97fa93690
7
- data.tar.gz: 9e82f40f5ed056e0e304f7af4f040d5a3bf4808502b141f8a4b30bd1c10d27ede169a499eba3f81942d245e1f99b3f2c821efbfe25c17e6e0faff2c614cc2b47
6
+ metadata.gz: ccc262c5aad2f836d702f46483e95a0908e67152b70d3430690877bfcb37bb924d36561bcd334f43356bebc710dc7670301421424890ed0eaa8dd47968c28dba
7
+ data.tar.gz: 6f576cab241f16d91959f11a51acb811b14628ba7999aa3f94b4adcc5d4c1a27fec3cd0660e755a885b6ec65de64d8431e4ef795256b25424454448154c782c9
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.12"
11
+ gem "bulma-rails", "~> 0.0.14"
12
12
 
13
13
  And then execute:
14
14
 
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import generic
4
- @import content
5
- @import highlight
6
- @import helpers
3
+ @import "generic"
4
+ @import "content"
5
+ @import "highlight"
6
+ @import "helpers"
@@ -1,4 +1,5 @@
1
1
  .content
2
+ @extend .block
2
3
  &.is-medium
3
4
  font-size: $size-5
4
5
  code
@@ -7,8 +8,6 @@
7
8
  font-size: $size-4
8
9
  code
9
10
  font-size: $size-5
10
- &:not(:last-child)
11
- margin-bottom: 20px
12
11
  h1,
13
12
  h2,
14
13
  h3,
@@ -7,6 +7,8 @@ html
7
7
  overflow-x: hidden
8
8
  overflow-y: scroll
9
9
  text-rendering: optimizeLegibility
10
+ &.has-modal-open
11
+ overflow: hidden
10
12
 
11
13
  body,
12
14
  button,
@@ -47,7 +49,6 @@ hr
47
49
  margin: 20px 0
48
50
 
49
51
  img
50
- max-height: 100%
51
52
  max-width: 100%
52
53
 
53
54
  input[type="checkbox"],
@@ -90,10 +91,17 @@ table
90
91
  th
91
92
  color: $text-strong
92
93
 
94
+ .block:not(:last-child)
95
+ margin-bottom: 20px
96
+
93
97
  .container
94
- margin: 0 auto
95
- max-width: 960px
96
98
  position: relative
99
+ +desktop
100
+ margin: 0 auto
101
+ max-width: 960px
102
+ &.is-fluid
103
+ margin: 0 20px
104
+ max-width: none
97
105
 
98
106
  .fa
99
107
  font-size: 21px
@@ -1,14 +1,3 @@
1
- // Alignment
2
-
3
- .is-centered
4
- text-align: center
5
-
6
- .is-left
7
- text-align: left
8
-
9
- .is-right
10
- text-align: right
11
-
12
1
  // Display
13
2
 
14
3
  .is-block
@@ -20,7 +9,7 @@
20
9
  .is-flex
21
10
  display: flex
22
11
 
23
- // Pull
12
+ // Float
24
13
 
25
14
  .is-clearfix
26
15
  +clearfix
@@ -31,11 +20,27 @@
31
20
  .is-pulled-right
32
21
  float: right
33
22
 
23
+ // Overlay
24
+
25
+ .is-overlay
26
+ +overlay
27
+
34
28
  // Size
35
29
 
36
30
  .is-fullwidth
37
31
  width: 100%
38
32
 
33
+ // Text
34
+
35
+ .is-text-centered
36
+ text-align: center
37
+
38
+ .is-text-left
39
+ text-align: left
40
+
41
+ .is-text-right
42
+ text-align: right
43
+
39
44
  // Visibility
40
45
 
41
46
  .is-hidden-mobile
@@ -1,12 +1,10 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import grid
4
- @import navbar
5
- @import card
6
- @import table
7
- @import tabs
8
- @import media
9
- @import menu
10
-
11
- .block:not(:last-child)
12
- margin-bottom: 20px
3
+ @import "grid"
4
+ @import "navbar"
5
+ @import "card"
6
+ @import "table"
7
+ @import "tabs"
8
+ @import "media"
9
+ @import "menu"
10
+ @import "modal"
@@ -10,10 +10,18 @@
10
10
  .columns.is-mobile > &.is-quarter
11
11
  flex: none
12
12
  width: 25%
13
+ .columns.is-mobile > &.is-offset-half
14
+ margin-left: 50%
15
+ .columns.is-mobile > &.is-offset-third
16
+ margin-left: 33.3333%
17
+ .columns.is-mobile > &.is-offset-quarter
18
+ margin-left: 25%
13
19
  @for $i from 1 through 11
14
- .columns.is-mobile > &.is-#{$i}-mobile
20
+ .columns.is-mobile > &.is-#{$i}
15
21
  flex: none
16
22
  width: ($i / 12) * 100%
23
+ .columns.is-mobile > &.is-offset-#{$i}
24
+ margin-left: ($i / 12) * 100%
17
25
  +mobile
18
26
  &.is-half-mobile
19
27
  flex: none
@@ -24,10 +32,18 @@
24
32
  &.is-quarter-mobile
25
33
  flex: none
26
34
  width: 25%
35
+ &.is-offset-half-mobile
36
+ margin-left: 50%
37
+ &.is-offset-third-mobile
38
+ margin-left: 33.3333%
39
+ &.is-offset-quarter-mobile
40
+ margin-left: 25%
27
41
  @for $i from 1 through 11
28
42
  &.is-#{$i}-mobile
29
43
  flex: none
30
44
  width: ($i / 12) * 100%
45
+ &.is-offset-#{$i}-mobile
46
+ margin-left: ($i / 12) * 100%
31
47
  +tablet
32
48
  &.is-half,
33
49
  &.is-half-tablet
@@ -41,11 +57,23 @@
41
57
  &.is-quarter-tablet
42
58
  flex: none
43
59
  width: 25%
60
+ &.is-offset-half,
61
+ &.is-offset-half-tablet
62
+ margin-left: 50%
63
+ &.is-offset-third,
64
+ &.is-offset-third-tablet
65
+ margin-left: 33.3333%
66
+ &.is-offset-quarter,
67
+ &.is-offset-quarter-tablet
68
+ margin-left: 25%
44
69
  @for $i from 1 through 11
45
70
  &.is-#{$i},
46
71
  &.is-#{$i}-tablet
47
72
  flex: none
48
73
  width: ($i / 12) * 100%
74
+ &.is-offset-#{$i},
75
+ &.is-offset-#{$i}-tablet
76
+ margin-left: ($i / 12) * 100%
49
77
  +desktop
50
78
  &.is-half-desktop
51
79
  flex: none
@@ -56,10 +84,18 @@
56
84
  &.is-quarter-desktop
57
85
  flex: none
58
86
  width: 25%
87
+ &.is-offset-half-desktop
88
+ margin-left: 50%
89
+ &.is-offset-third-desktop
90
+ margin-left: 33.3333%
91
+ &.is-offset-quarter-desktop
92
+ margin-left: 25%
59
93
  @for $i from 1 through 11
60
94
  &.is-#{$i}-desktop
61
95
  flex: none
62
96
  width: ($i / 12) * 100%
97
+ &.is-offset-#{$i}-desktop
98
+ margin-left: ($i / 12) * 100%
63
99
 
64
100
  .columns
65
101
  margin-left: -10px
@@ -71,15 +107,11 @@
71
107
  margin-bottom: 10px
72
108
  &.is-mobile
73
109
  display: flex
74
- +tablet
75
- &:not(.is-desktop)
76
- display: flex
77
- +desktop
78
- &.is-desktop
79
- display: flex
80
110
  &.is-gapless
111
+ margin-left: 0
112
+ margin-right: 0
81
113
  &:not(:last-child)
82
- margin: 0 0 20px
114
+ margin-bottom: 20px
83
115
  & > .column
84
116
  margin: 0
85
117
  padding: 0
@@ -97,3 +129,9 @@
97
129
  width: 33.3333%
98
130
  & + .column
99
131
  margin-left: 0
132
+ +tablet
133
+ &:not(.is-desktop)
134
+ display: flex
135
+ +desktop
136
+ &.is-desktop
137
+ display: flex
@@ -1,14 +1,3 @@
1
- .media-image
2
- &.is-32
3
- width: 32px
4
- &.is-40
5
- width: 40px
6
- +mobile
7
- margin-bottom: 10px
8
- +tablet
9
- margin-right: 10px
10
- width: 60px
11
-
12
1
  .media-number
13
2
  background: $background
14
3
  border-radius: 290486px
@@ -26,25 +15,18 @@
26
15
  margin-right: 10px
27
16
 
28
17
  .media-left
29
- +mobile
30
- margin-bottom: 20px
31
- +tablet
32
- margin-right: 20px
18
+ margin-right: 10px
33
19
 
34
20
  .media-right
35
- +mobile
36
- margin-top: 20px
37
- +tablet
38
- margin-left: 20px
21
+ margin-left: 10px
39
22
 
40
23
  .media-content
41
24
  flex: 1
42
25
  text-align: left
43
- .textarea
44
- min-height: 60px
45
26
 
46
27
  .media
47
28
  align-items: flex-start
29
+ display: flex
48
30
  text-align: left
49
31
  .content:not(:last-child)
50
32
  margin-bottom: 10px
@@ -52,10 +34,6 @@
52
34
  border-top: 1px solid rgba($border, 0.5)
53
35
  display: flex
54
36
  padding-top: 10px
55
- .media-image
56
- margin-bottom: 0
57
- margin-right: 10px
58
- width: 40px
59
37
  .textarea
60
38
  +control-small
61
39
  .button
@@ -77,7 +55,6 @@
77
55
  margin-top: 20px
78
56
  padding-top: 20px
79
57
  +tablet
80
- display: flex
81
58
  &.is-large
82
59
  .media-number
83
60
  margin-right: 20px
@@ -7,8 +7,7 @@
7
7
  margin-bottom: 10px
8
8
 
9
9
  .navbar
10
- &:not(:last-child)
11
- margin-bottom: 20px
10
+ @extend .block
12
11
  code
13
12
  border-radius: $radius
14
13
  img
@@ -9,6 +9,9 @@
9
9
  border-width: 0 0 1px
10
10
  padding: 8px 10px
11
11
  vertical-align: top
12
+ &.table-narrow
13
+ white-space: nowrap
14
+ width: 1%
12
15
  &.table-link
13
16
  padding: 0
14
17
  & > a
@@ -1,10 +1,9 @@
1
1
  .tabs
2
+ @extend .block
2
3
  line-height: 24px
3
4
  overflow: hidden
4
5
  overflow-x: auto
5
6
  white-space: nowrap
6
- &:not(:last-child)
7
- margin-bottom: 20px
8
7
  .fa
9
8
  font-size: 14px
10
9
  line-height: 20px
@@ -4,7 +4,6 @@ $grey-darker: #222324
4
4
  $grey-dark: #69707a
5
5
  $grey: #aeb1b5
6
6
  $grey-light: #d3d6db
7
- $grey-lighter: #ebeff5
8
7
  $grey-lighter: #f5f7fa
9
8
 
10
9
  $blue: #42afe3
@@ -182,15 +182,15 @@
182
182
  top: 8px
183
183
  &:not(:last-child)
184
184
  margin-bottom: 10px
185
- &.is-withicon
186
- .fa
185
+ &.has-icon
186
+ & > .fa
187
187
  +fa(14px, 20px)
188
188
  color: $text-light
189
189
  left: 6px
190
190
  pointer-events: none
191
191
  position: absolute
192
192
  top: 6px
193
- z-index: 1
193
+ z-index: 4
194
194
  .input
195
195
  padding-left: 32px
196
196
  &:focus + .fa
@@ -1,10 +1,17 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import controls
4
- @import buttons
5
- @import titles
6
- @import messages
7
- @import notifications
3
+ @import "controls"
4
+ @import "buttons"
5
+ @import "titles"
6
+ @import "images"
7
+ @import "messages"
8
+ @import "notifications"
9
+
10
+ .box
11
+ background: white
12
+ border-radius: 5px
13
+ box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
14
+ padding: 20px
8
15
 
9
16
  .delete
10
17
  +unselectable
@@ -25,24 +32,27 @@
25
32
  content: ""
26
33
  display: block
27
34
  height: 2px
28
- left: 6px
35
+ left: 50%
36
+ margin-left: -25%
37
+ margin-top: -1px
29
38
  position: absolute
30
- top: 11px
31
- width: 12px
39
+ top: 50%
40
+ width: 50%
32
41
  &:before
33
42
  transform: rotate(45deg)
34
43
  &:after
35
44
  transform: rotate(-45deg)
36
45
  &:hover
37
- background: rgba(black, 0.5)
46
+ background: $red
38
47
  &.is-small
39
48
  height: 16px
40
49
  width: 16px
41
- &:before,
42
- &:after
43
- left: 4px
44
- top: 7px
45
- width: 8px
50
+ &.is-medium
51
+ height: 32px
52
+ width: 32px
53
+ &.is-large
54
+ height: 40px
55
+ width: 40px
46
56
 
47
57
  .icon
48
58
  +fa(21px, 24px)
@@ -106,13 +116,12 @@
106
116
  text-transform: uppercase
107
117
 
108
118
  .highlight
119
+ @extend .block
109
120
  font-size: 12px
110
121
  font-weight: normal
111
122
  max-width: 100%
112
123
  overflow: hidden
113
124
  padding: 0
114
- &:not(:last-child)
115
- margin-bottom: 20px
116
125
  pre
117
126
  overflow: auto
118
127
  max-width: 100%
@@ -19,10 +19,9 @@
19
19
  border-top: none
20
20
 
21
21
  .message
22
+ @extend .block
22
23
  background: $background
23
24
  border-radius: $radius
24
- &:not(:last-child)
25
- margin-bottom: 20px
26
25
  @each $name, $pair in $colors
27
26
  $color: nth($pair, 1)
28
27
  $color-invert: nth($pair, 2)
@@ -1,11 +1,10 @@
1
1
  .notification
2
+ @extend .block
2
3
  +clearfix
3
4
  background: $background
4
5
  border-radius: $radius
5
6
  padding: 16px 20px
6
7
  position: relative
7
- &:not(:last-child)
8
- margin-bottom: 20px
9
8
  .title
10
9
  color: inherit
11
10
  @each $name, $pair in $colors
@@ -15,6 +14,10 @@
15
14
  background: $color
16
15
  color: $color-invert
17
16
  .delete
17
+ background: rgba(black, 0.2)
18
18
  border-radius: 0 $radius
19
19
  float: right
20
20
  margin: -16px -20px 0 20px
21
+ &:hover
22
+ background: rgba(black, 0.5)
23
+
@@ -1,8 +1,10 @@
1
1
  .title,
2
2
  .subtitle
3
+ @extend .block
3
4
  font-weight: 300
4
- &:not(:last-child)
5
- margin-bottom: 20px
5
+ a
6
+ &:hover
7
+ border-bottom: 1px solid
6
8
 
7
9
  .title
8
10
  color: $text-strong
@@ -42,6 +42,9 @@
42
42
  border: none
43
43
  ul
44
44
  border-bottom: none
45
+ &.is-boxed
46
+ a
47
+ padding: 8px 15px
45
48
  &.is-alt
46
49
  background: $background
47
50
  color: $text-light
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import header
4
- @import hero
5
- @import section
6
- @import footer
3
+ @import "header"
4
+ @import "hero"
5
+ @import "section"
6
+ @import "footer"
@@ -64,6 +64,7 @@
64
64
 
65
65
  $tablet: 769px
66
66
  $desktop: 980px
67
+ $widescreen: 1180px
67
68
 
68
69
  =from($device)
69
70
  @media screen and (min-width: $device)
@@ -88,3 +89,7 @@ $desktop: 980px
88
89
  =desktop
89
90
  @media screen and (min-width: $desktop)
90
91
  @content
92
+
93
+ =widescreen
94
+ @media screen and (min-width: $widescreen)
95
+ @content
@@ -1,6 +1,6 @@
1
1
  @charset "utf-8"
2
2
 
3
- @import reset
4
- @import functions
5
- @import mixins
6
- @import animations
3
+ @import "reset"
4
+ @import "functions"
5
+ @import "mixins"
6
+ @import "animations"
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.12'
5
+ gem.version = '0.0.14'
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.12
4
+ version: 0.0.14
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-02-10 00:00:00.000000000 Z
11
+ date: 2016-02-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: sass