bulma-rails 0.0.4.1 → 0.0.8

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: 0e0cbbe8c1c8c47635888d2b82edffac42193fa5
4
- data.tar.gz: 65dea609ba253e7156c7fdfdae5cf40f8a834b0c
3
+ metadata.gz: b1903a5de5e3268108dd6776f114f9c650dbd717
4
+ data.tar.gz: e0318dc987d4efafa59e9906824d38c9dceb1ac5
5
5
  SHA512:
6
- metadata.gz: d2255241567041ee73fe6486b74904c237560bae3e012aa70e2f2ee0c197a2f0759486e6f76625c3a1ff24ba0f22df1fd5a258fe698e34c4c35e212010d82bd5
7
- data.tar.gz: 4a2ad8a5c2191b499149c57056cf028029d3354aa3271b91f8b6e75f30b9b267b8920c48090eeba6b9f09fc0bad74c908dae9a1a98eb1240b64877c8cfc4036f
6
+ metadata.gz: ae78f714a1cfc30a3bb06b9d1cad78c2e8ac30a2f7a4a62c5164de0bd8412f8d03c38145dde10703c63fdd92f6b7e912909ad5c2cd56abb8ecaab9ede7019597
7
+ data.tar.gz: f34805456093ee13b4d2bebb8ea503a7f2eb71e8a4cc994a8748683ad94a7da67fc14c16392b01f99bd86ee160d0565f78851407968b9bed1b6974d7f79a2b31
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.4"
11
+ gem "bulma-rails", "~> 0.0.4.1"
12
12
 
13
13
  And then execute:
14
14
 
@@ -6,6 +6,7 @@
6
6
  @import table
7
7
  @import tabs
8
8
  @import media
9
+ @import menu
9
10
 
10
11
  .block:not(:last-child)
11
12
  margin-bottom: 20px
@@ -1,11 +1,12 @@
1
1
  .column
2
+ overflow: hidden
2
3
  +mobile
3
4
  & + .column
4
- margin-top: 20px
5
+ margin-top: $column-gap
5
6
  +tablet
6
7
  flex: 1
7
8
  & + .column
8
- margin-left: 20px
9
+ margin-left: $column-gap
9
10
  &.is-double
10
11
  flex: 2
11
12
  &.is-triple
@@ -28,12 +29,12 @@
28
29
 
29
30
  .columns
30
31
  &:not(:last-child)
31
- margin-bottom: 20px
32
+ margin-bottom: $column-gap
32
33
  +tablet
33
34
  display: flex
34
35
  &.is-gapless
35
36
  & > .column + .column
36
- margin-left: 0
37
+ margin: 0
37
38
  &.is-vcentered
38
39
  align-items: center
39
40
  &.is-grid
@@ -25,13 +25,27 @@
25
25
  +tablet
26
26
  margin-right: 10px
27
27
 
28
+ .media-left
29
+ +mobile
30
+ margin-bottom: 20px
31
+ +tablet
32
+ margin-right: 20px
33
+
34
+ .media-right
35
+ +mobile
36
+ margin-top: 20px
37
+ +tablet
38
+ margin-left: 20px
39
+
28
40
  .media-content
29
41
  flex: 1
42
+ text-align: left
30
43
  .textarea
31
44
  min-height: 60px
32
45
 
33
46
  .media
34
47
  align-items: flex-start
48
+ text-align: left
35
49
  .content:not(:last-child)
36
50
  margin-bottom: 10px
37
51
  .media
@@ -1,9 +1,20 @@
1
- .menu
2
- border: 1px solid $border
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
3
9
 
4
10
  .menu-heading
5
- @extend .heading
11
+ background: $background
12
+ border-bottom: 1px solid $border
13
+ border-radius: 4px 4px 0 0
6
14
  color: $text-strong
15
+ font-size: $size-medium
16
+ font-weight: 300
17
+ padding: 10px
7
18
 
8
19
  .menu-list
9
20
  a
@@ -11,7 +22,28 @@
11
22
  &:hover
12
23
  color: $link
13
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
+ &.is-active
37
+ border-bottom-color: $link-active-border
38
+ color: $link-active
39
+
14
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
15
47
  .checkbox
16
48
  border: 1px solid transparent
17
49
  border-radius: $radius
@@ -23,3 +55,22 @@
23
55
  top: 9px
24
56
  &:hover
25
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
@@ -1,5 +1,8 @@
1
1
  // Colors
2
2
 
3
+ $dark: $grey-darker
4
+ $dark-invert: findColorInvert($dark)
5
+
3
6
  $primary-invert: findColorInvert($primary)
4
7
  $info: $blue
5
8
  $info-invert: findColorInvert($info)
@@ -10,7 +13,7 @@ $warning-invert: findColorInvert($warning)
10
13
  $danger: $red
11
14
  $danger-invert: findColorInvert($danger)
12
15
 
13
- $colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
16
+ $colors: (dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
14
17
 
15
18
  $body-background: $grey-lighter
16
19
 
@@ -20,6 +20,7 @@ $primary: $turquoise
20
20
  // Typography
21
21
 
22
22
  $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
23
+ $family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace
23
24
 
24
25
  $size-1: 48px
25
26
  $size-2: 40px
@@ -32,6 +33,8 @@ $size-7: 11px
32
33
 
33
34
  // Dimensions
34
35
 
36
+ $column-gap: 20px
37
+
35
38
  $header-height: 50px
36
39
 
37
40
  // Miscellaneous
@@ -16,6 +16,7 @@
16
16
  .button
17
17
  +control
18
18
  padding: 3px 10px
19
+ text-align: center
19
20
  white-space: nowrap
20
21
  strong
21
22
  color: inherit
@@ -160,6 +160,8 @@
160
160
  padding-right: 36px
161
161
  &:hover
162
162
  border-color: $control-hover-border
163
+ &::ms-expand
164
+ display: none
163
165
  &:after
164
166
  +arrow($link)
165
167
  margin-top: -6px
@@ -6,18 +6,6 @@
6
6
  @import messages
7
7
  @import notifications
8
8
 
9
- .highlight
10
- font-size: 12px
11
- font-weight: normal
12
- max-width: 100%
13
- overflow: hidden
14
- padding: 0
15
- &:not(:last-child)
16
- margin-bottom: 20px
17
- pre
18
- overflow: auto
19
- max-width: 100%
20
-
21
9
  .delete
22
10
  background: rgba(black, 0.2)
23
11
  border-radius: 290486px
@@ -67,40 +55,44 @@
67
55
  .hamburger
68
56
  cursor: pointer
69
57
  display: block
70
- height: $header-height
71
- padding: 19px 17px
58
+ height: 50px
72
59
  position: relative
73
- width: $header-height
60
+ width: 50px
74
61
  span
75
62
  background: $text
76
63
  display: block
77
64
  height: 1px
78
- left: 17px
65
+ left: 50%
66
+ margin-left: -7px
79
67
  position: absolute
68
+ top: 50%
80
69
  transition: none $speed $easing
81
70
  transition-property: background, left, opacity, transform
82
71
  width: 15px
83
72
  &:nth-child(1)
84
- top: 19px
73
+ margin-top: -6px
85
74
  &:nth-child(2)
86
- top: 24px
75
+ margin-top: -1px
87
76
  &:nth-child(3)
88
- bottom: 20px
77
+ margin-top: 4px
89
78
  &:hover
90
79
  background: $background
91
80
  &.is-active
92
81
  span
93
82
  background: $link
94
83
  &:nth-child(1)
95
- left: 20px
84
+ margin-left: -5px
96
85
  transform: rotate(45deg)
97
86
  transform-origin: left top
98
87
  &:nth-child(2)
99
88
  opacity: 0
100
89
  &:nth-child(3)
101
- left: 20px
90
+ margin-left: -5px
102
91
  transform: rotate(-45deg)
103
92
  transform-origin: left bottom
93
+ +tablet
94
+ height: $header-height
95
+ width: $header-height
104
96
 
105
97
  .heading
106
98
  display: block
@@ -109,6 +101,29 @@
109
101
  margin-bottom: 5px
110
102
  text-transform: uppercase
111
103
 
104
+ .highlight
105
+ font-size: 12px
106
+ font-weight: normal
107
+ max-width: 100%
108
+ overflow: hidden
109
+ padding: 0
110
+ &:not(:last-child)
111
+ margin-bottom: 20px
112
+ pre
113
+ overflow: auto
114
+ max-width: 100%
115
+
116
+ .image
117
+ display: block
118
+ position: relative
119
+ vertical-align: top
120
+ img
121
+ +overlay
122
+ display: block
123
+ width: 100%
124
+ &.is-3x2
125
+ padding-top: 66.6666%
126
+
112
127
  .loader
113
128
  animation: spin-around 500ms infinite linear
114
129
  border: 2px solid $border
@@ -3,7 +3,7 @@
3
3
  background: white
4
4
  box-shadow: 0 1px 2px rgba(black, 0.1)
5
5
  display: flex
6
- height: $header-height
6
+ height: 50px
7
7
  line-height: 24px
8
8
  position: relative
9
9
  text-align: center
@@ -13,6 +13,8 @@
13
13
  box-shadow: 0 1px 0 rgba($border, 0.3)
14
14
  display: flex
15
15
  width: 100%
16
+ +tablet
17
+ height: $header-height
16
18
 
17
19
  .header-toggle
18
20
  @extend .hamburger
@@ -109,9 +111,10 @@
109
111
  background: white
110
112
  box-shadow: 0 4px 7px rgba(black, 0.1)
111
113
  display: none
114
+ min-width: 120px
112
115
  position: absolute
113
116
  right: 0
114
- top: $header-height
117
+ top: 50px
115
118
  z-index: 100
116
119
  .header-item
117
120
  border-top: 1px solid rgba($border, 0.5)
@@ -131,8 +131,8 @@
131
131
  align-items: stretch
132
132
  display: flex
133
133
  flex-direction: column
134
- height: 100vh
135
134
  justify-content: space-between
135
+ min-height: 100vh
136
136
  .tabs
137
137
  a
138
138
  padding: 15px 20px
@@ -9,8 +9,8 @@
9
9
  @return $value
10
10
 
11
11
  @function colorLuminance($color)
12
- $colors: ('red': red($color),'green': green($color),'blue': blue($color))
13
- @each $name, $value in $colors
12
+ $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
13
+ @each $name, $value in $color-rgb
14
14
  $adjusted: 0
15
15
  $value: $value / 255
16
16
  @if $value < 0.03928
@@ -18,8 +18,8 @@
18
18
  @else
19
19
  $value: ($value + .055) / 1.055
20
20
  $value: powerNumber($value, 2)
21
- $colors: map-merge($colors, ($name: $value))
22
- @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
21
+ $color-rgb: map-merge($color-rgb, ($name: $value))
22
+ @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
23
23
 
24
24
  @function closestEvenNumber($number)
25
25
  @if ($number % 2 == 0px)
@@ -2,7 +2,7 @@
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'bulma-rails'
5
- gem.version = '0.0.4.1'
5
+ gem.version = '0.0.8'
6
6
  gem.date = '2016-01-29'
7
7
  gem.authors = ["Joshua Jansen"]
8
8
  gem.email = ["joshuajansen88@gmail.com"]
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bulma-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.4.1
4
+ version: 0.0.8
5
5
  platform: ruby
6
6
  authors:
7
7
  - Joshua Jansen