bulma-rails 0.1.2 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/stylesheets/bulma.sass +7 -5
  4. data/app/assets/stylesheets/sass/base/_all.sass +5 -0
  5. data/app/assets/stylesheets/sass/base/generic.sass +7 -2
  6. data/app/assets/stylesheets/sass/base/helpers.sass +4 -1
  7. data/app/assets/stylesheets/sass/base/minireset.sass +81 -0
  8. data/app/assets/stylesheets/sass/components/_all.sass +13 -0
  9. data/app/assets/stylesheets/sass/components/level.sass +1 -1
  10. data/app/assets/stylesheets/sass/components/media.sass +8 -5
  11. data/app/assets/stylesheets/sass/components/message.sass +1 -1
  12. data/app/assets/stylesheets/sass/components/modal.sass +10 -5
  13. data/app/assets/stylesheets/sass/components/nav.sass +9 -2
  14. data/app/assets/stylesheets/sass/components/pagination.sass +2 -0
  15. data/app/assets/stylesheets/sass/components/tabs.sass +4 -2
  16. data/app/assets/stylesheets/sass/elements/_all.sass +13 -0
  17. data/app/assets/stylesheets/sass/elements/box.sass +1 -1
  18. data/app/assets/stylesheets/sass/elements/button.sass +8 -8
  19. data/app/assets/stylesheets/sass/elements/content.sass +2 -1
  20. data/app/assets/stylesheets/sass/elements/form.sass +23 -19
  21. data/app/assets/stylesheets/sass/elements/notification.sass +3 -2
  22. data/app/assets/stylesheets/sass/elements/other.sass +22 -101
  23. data/app/assets/stylesheets/sass/elements/progress.sass +1 -1
  24. data/app/assets/stylesheets/sass/elements/table.sass +18 -12
  25. data/app/assets/stylesheets/sass/elements/title.sass +1 -1
  26. data/app/assets/stylesheets/sass/grid/_all.sass +4 -0
  27. data/app/assets/stylesheets/sass/grid/columns.sass +251 -0
  28. data/app/assets/stylesheets/sass/grid/tiles.sass +32 -0
  29. data/app/assets/stylesheets/sass/layout/_all.sass +5 -0
  30. data/app/assets/stylesheets/sass/layout/hero.sass +6 -4
  31. data/app/assets/stylesheets/sass/utilities/_all.sass +6 -0
  32. data/app/assets/stylesheets/sass/utilities/controls.sass +28 -5
  33. data/app/assets/stylesheets/sass/utilities/functions.sass +2 -8
  34. data/app/assets/stylesheets/sass/utilities/mixins.sass +118 -0
  35. data/app/assets/stylesheets/sass/utilities/variables.sass +40 -62
  36. data/bulma-rails.gemspec +1 -1
  37. metadata +11 -2
@@ -0,0 +1,32 @@
1
+ .tile
2
+ align-items: stretch
3
+ display: block
4
+ flex-basis: auto
5
+ flex-grow: 1
6
+ flex-shrink: 1
7
+ min-height: min-content
8
+ // Modifiers
9
+ &.is-ancestor
10
+ margin-left: -10px
11
+ margin-right: -10px
12
+ margin-top: -10px
13
+ &:last-child
14
+ margin-bottom: -10px
15
+ &:not(:last-child)
16
+ margin-bottom: 10px
17
+ &.is-child
18
+ margin: 0 !important
19
+ &.is-parent
20
+ padding: 10px
21
+ &.is-vertical
22
+ flex-direction: column
23
+ & > .tile.is-child:not(:last-child)
24
+ margin-bottom: 20px !important
25
+ // Responsiveness
26
+ +tablet
27
+ &:not(.is-child)
28
+ display: flex
29
+ @for $i from 1 through 12
30
+ &.is-#{$i}
31
+ flex: none
32
+ width: ($i / 12) * 100%
@@ -0,0 +1,5 @@
1
+ @charset "utf-8"
2
+
3
+ @import "hero.sass"
4
+ @import "section.sass"
5
+ @import "footer.sass"
@@ -39,9 +39,10 @@
39
39
 
40
40
  .hero-body
41
41
  flex-grow: 1
42
+ flex-shrink: 0
42
43
  padding: 40px 20px
43
44
  // Responsiveness
44
- +desktop
45
+ +from(1240px)
45
46
  padding-left: 0
46
47
  padding-right: 0
47
48
 
@@ -72,7 +73,7 @@
72
73
  strong
73
74
  color: inherit
74
75
  .subtitle
75
- color: rgba($color-invert, 0.7)
76
+ color: rgba($color-invert, 0.9)
76
77
  a,
77
78
  strong
78
79
  color: $color-invert
@@ -83,14 +84,14 @@
83
84
  background-color: $color
84
85
  a.nav-item,
85
86
  .nav-item a:not(.button)
86
- color: rgba($color-invert, 0.5)
87
+ color: rgba($color-invert, 0.7)
87
88
  &:hover,
88
89
  &.is-active
89
90
  color: $color-invert
90
91
  .tabs
91
92
  a
92
93
  color: $color-invert
93
- opacity: 0.5
94
+ opacity: 0.9
94
95
  &:hover
95
96
  opacity: 1
96
97
  li
@@ -144,3 +145,4 @@
144
145
  display: flex
145
146
  & > .container
146
147
  flex-grow: 1
148
+ flex-shrink: 1
@@ -0,0 +1,6 @@
1
+ @charset "utf-8"
2
+
3
+ @import "functions.sass"
4
+ @import "variables.sass"
5
+ @import "mixins.sass"
6
+ @import "controls.sass"
@@ -1,13 +1,36 @@
1
+ $control: $text-strong !default
2
+ $control-background: $text-invert !default
3
+ $control-border: $border !default
4
+
5
+ $control-hover: $link-hover !default
6
+ $control-hover-border: $border-hover !default
7
+
8
+ $control-active: $link !default
9
+ $control-active-background: $link !default
10
+ $control-active-background-invert: $link-invert !default
11
+ $control-active-border: $link !default
12
+
13
+ $control-disabled: $border !default
14
+ $control-disabled-background: $background !default
15
+
16
+ $control-radius: $radius !default
17
+ $control-radius-small: $radius-small !default
18
+ $control-size: $size-normal !default
19
+ $control-size-small: $size-small !default
20
+
21
+ $control-icon: $grey-lighter !default
22
+ $control-icon-active: $grey-light !default
23
+
1
24
  =control
2
25
  -moz-appearance: none
3
26
  -webkit-appearance: none
4
27
  align-items: center
5
28
  background-color: $control-background
6
29
  border: 1px solid $control-border
7
- border-radius: $radius
30
+ border-radius: $control-radius
8
31
  color: $control
9
32
  display: inline-flex
10
- font-size: $size-normal
33
+ font-size: $control-size
11
34
  height: 32px
12
35
  justify-content: flex-start
13
36
  line-height: 24px
@@ -24,15 +47,15 @@
24
47
  outline: none
25
48
  &[disabled],
26
49
  &.is-disabled
27
- background-color: $background
28
- border-color: $control-border
50
+ background-color: $control-disabled-background
51
+ border-color: $control-disabled
29
52
  cursor: not-allowed
30
53
  pointer-events: none
31
54
  +placeholder
32
55
  color: rgba($control, 0.3)
33
56
 
34
57
  =control-small
35
- border-radius: $radius-small
58
+ border-radius: $control-radius-small
36
59
  font-size: 11px
37
60
  height: 24px
38
61
  line-height: 16px
@@ -21,14 +21,8 @@
21
21
  $color-rgb: map-merge($color-rgb, ($name: $value))
22
22
  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
23
23
 
24
- @function closestEvenNumber($number)
25
- @if ($number % 2 == 0px)
26
- @return $number
27
- @else
28
- @return ($number + 1px)
29
-
30
24
  @function findColorInvert($color)
31
- @if (colorLuminance($color) > 0.8)
32
- @return rgba($black, 0.5)
25
+ @if (colorLuminance($color) > 0.55)
26
+ @return rgba(black, 0.7)
33
27
  @else
34
28
  @return white
@@ -10,6 +10,10 @@
10
10
  transform: rotate(-45deg)
11
11
  width: 7px
12
12
 
13
+ =block
14
+ &:not(:last-child)
15
+ margin-bottom: 20px
16
+
13
17
  =clearfix
14
18
  &:after
15
19
  clear: both
@@ -23,6 +27,49 @@
23
27
  position: absolute
24
28
  top: 50%
25
29
 
30
+ =delete
31
+ +unselectable
32
+ -moz-appearance: none
33
+ -webkit-appearance: none
34
+ background-color: rgba($black, 0.1)
35
+ border: none
36
+ border-radius: 290486px
37
+ cursor: pointer
38
+ display: inline-block
39
+ height: 24px
40
+ outline: none
41
+ position: relative
42
+ vertical-align: top
43
+ width: 24px
44
+ &:before,
45
+ &:after
46
+ background-color: $white
47
+ content: ""
48
+ display: block
49
+ height: 2px
50
+ left: 50%
51
+ margin-left: -25%
52
+ margin-top: -1px
53
+ position: absolute
54
+ top: 50%
55
+ width: 50%
56
+ &:before
57
+ transform: rotate(45deg)
58
+ &:after
59
+ transform: rotate(-45deg)
60
+ &:hover
61
+ background-color: rgba($black, 0.2)
62
+ // Sizes
63
+ &.is-small
64
+ height: 16px
65
+ width: 16px
66
+ &.is-medium
67
+ height: 32px
68
+ width: 32px
69
+ &.is-large
70
+ height: 40px
71
+ width: 40px
72
+
26
73
  =fa($size, $dimensions)
27
74
  display: inline-block
28
75
  font-size: $size
@@ -32,6 +79,64 @@
32
79
  vertical-align: top
33
80
  width: $dimensions
34
81
 
82
+ =hamburger($dimensions)
83
+ cursor: pointer
84
+ display: block
85
+ height: $dimensions
86
+ position: relative
87
+ width: $dimensions
88
+ span
89
+ background-color: $text
90
+ display: block
91
+ height: 1px
92
+ left: 50%
93
+ margin-left: -7px
94
+ position: absolute
95
+ top: 50%
96
+ transition: none $speed $easing
97
+ transition-property: background, left, opacity, transform
98
+ width: 15px
99
+ &:nth-child(1)
100
+ margin-top: -6px
101
+ &:nth-child(2)
102
+ margin-top: -1px
103
+ &:nth-child(3)
104
+ margin-top: 4px
105
+ &:hover
106
+ background-color: $background
107
+ // Modifers
108
+ &.is-active
109
+ span
110
+ background-color: $link
111
+ &:nth-child(1)
112
+ margin-left: -5px
113
+ transform: rotate(45deg)
114
+ transform-origin: left top
115
+ &:nth-child(2)
116
+ opacity: 0
117
+ &:nth-child(3)
118
+ margin-left: -5px
119
+ transform: rotate(-45deg)
120
+ transform-origin: left bottom
121
+
122
+ @keyframes spinAround
123
+ from
124
+ transform: rotate(0deg)
125
+ to
126
+ transform: rotate(359deg)
127
+
128
+ =loader
129
+ animation: spinAround 500ms infinite linear
130
+ border: 2px solid $border
131
+ border-radius: 290486px
132
+ border-right-color: transparent
133
+ border-top-color: transparent
134
+ content: ""
135
+ display: block
136
+ height: 16px
137
+ position: relative
138
+ width: 16px
139
+
35
140
  =overlay($offset: 0)
36
141
  bottom: $offset
37
142
  left: $offset
@@ -57,6 +162,19 @@
57
162
  text-indent: -290486px
58
163
  width: $width
59
164
 
165
+ =unselectable
166
+ -webkit-touch-callout: none
167
+ -webkit-user-select: none
168
+ -moz-user-select: none
169
+ -ms-user-select: none
170
+ user-select: none
171
+
172
+ // Responsiveness
173
+
174
+ $tablet: 769px !default
175
+ $desktop: 980px !default
176
+ $widescreen: 1180px !default
177
+
60
178
  =from($device)
61
179
  @media screen and (min-width: $device)
62
180
  @content
@@ -1,27 +1,33 @@
1
+ ////////////////////////////////////////////////
2
+ ////////////////////////////////////////////////
1
3
  // 1. Initial variables
2
4
 
3
5
  // Colors
4
-
5
- $black: #111 !default
6
- $grey-darker: #222324 !default
7
- $grey-dark: #69707a !default
8
- $grey: #aeb1b5 !default
9
- $grey-light: #d3d6db !default
10
- $grey-lighter: #f5f7fa !default
11
- $white: #fff !default
12
-
13
- $blue: #42afe3 !default
14
- $green: #97cd76 !default
15
- $orange: #f68b39 !default
16
- $purple: #847bb9 !default
17
- $red: #ed6c63 !default
18
- $turquoise: #1fc8db !default
19
- $yellow: #fce473 !default
6
+ $black: hsl(0, 0%, 4%) !default
7
+ $black-bis: hsl(0, 0%, 7%) !default
8
+ $black-ter: hsl(0, 0%, 14%) !default
9
+
10
+ $grey-darker: hsl(0, 0%, 21%) !default
11
+ $grey-dark: hsl(0, 0%, 29%) !default
12
+ $grey: hsl(0, 0%, 48%) !default
13
+ $grey-light: hsl(0, 0%, 71%) !default
14
+ $grey-lighter: hsl(0, 0%, 86%) !default
15
+
16
+ $white-ter: hsl(0, 0%, 96%) !default
17
+ $white-bis: hsl(0, 0%, 98%) !default
18
+ $white: hsl(0, 0%, 100%) !default
19
+
20
+ $orange: hsl(14, 100%, 53%) !default
21
+ $yellow: hsl(48, 100%, 67%) !default
22
+ $green: hsl(141, 71%, 48%) !default
23
+ $turquoise: hsl(171, 100%, 41%) !default
24
+ $blue: hsl(217, 71%, 53%) !default
25
+ $purple: hsl(271, 100%, 71%) !default
26
+ $red: hsl(348, 100%, 61%) !default
20
27
 
21
28
  // Typography
22
-
23
- $family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
24
- $family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace !default
29
+ $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
30
+ $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
25
31
 
26
32
  $size-1: 48px !default
27
33
  $size-2: 40px !default
@@ -37,26 +43,15 @@ $weight-bold: 700 !default
37
43
  $weight-title-normal: 300 !default
38
44
  $weight-title-bold: 500 !default
39
45
 
40
- // Breakpoints
41
-
42
- $tablet: 769px !default
43
- $desktop: 980px !default
44
- $widescreen: 1180px !default
45
-
46
- // Dimensions
47
-
48
- $column-gap: 20px !default
49
-
50
- $nav-height: 50px !default
51
-
52
46
  // Miscellaneous
53
-
54
47
  $easing: ease-out !default
55
48
  $radius-small: 2px !default
56
49
  $radius: 3px !default
57
50
  $radius-large: 5px !default
58
51
  $speed: 86ms !default
59
52
 
53
+ ////////////////////////////////////////////////
54
+ ////////////////////////////////////////////////
60
55
  // 2. Primary colors
61
56
 
62
57
  $primary: $turquoise !default
@@ -66,15 +61,14 @@ $success: $green !default
66
61
  $warning: $yellow !default
67
62
  $danger: $red !default
68
63
 
69
- $light: $grey-lighter !default
70
- $dark: $grey-dark !default
64
+ $light: $white-ter !default
65
+ $dark: $grey-darker !default
71
66
 
72
- $text: $grey-dark !default
73
-
74
- // 3. Generated variables
67
+ ////////////////////////////////////////////////
68
+ ////////////////////////////////////////////////
69
+ // 3. Applied variables
75
70
 
76
71
  // Invert colors
77
-
78
72
  $primary-invert: findColorInvert($primary) !default
79
73
 
80
74
  $info-invert: findColorInvert($info) !default
@@ -86,22 +80,20 @@ $light-invert: $dark !default
86
80
  $dark-invert: $light !default
87
81
 
88
82
  // General colors
83
+ $body-background: $white-ter !default
89
84
 
90
- $body-background: $grey-lighter !default
85
+ $background: $white-ter !default
91
86
 
92
- $background: $grey-lighter !default
93
-
94
- $border: $grey-light !default
95
- $border-hover: $grey !default
87
+ $border: $grey-lighter !default
88
+ $border-hover: $grey-light !default
96
89
 
97
90
  // Text colors
98
-
91
+ $text: $grey-dark !default
99
92
  $text-invert: findColorInvert($text) !default
100
93
  $text-light: $grey !default
101
94
  $text-strong: $grey-darker !default
102
95
 
103
96
  // Code colors
104
-
105
97
  $code: $red !default
106
98
  $code-background: $background !default
107
99
 
@@ -109,34 +101,18 @@ $pre: $text !default
109
101
  $pre-background: $background !default
110
102
 
111
103
  // Link colors
112
-
113
104
  $link: $primary !default
114
105
  $link-invert: $primary-invert !default
115
106
  $link-visited: $purple !default
116
107
 
117
108
  $link-hover: $grey-darker !default
118
- $link-hover-background: $grey-lighter !default
109
+ $link-hover-background: $white-ter !default
119
110
  $link-hover-border: $grey-darker !default
120
111
 
121
112
  $link-active: $grey-darker !default
122
113
  $link-active-border: $grey-darker !default
123
114
 
124
- // Control colors
125
-
126
- $control: $text-strong !default
127
- $control-background: $text-invert !default
128
- $control-border: $border !default
129
-
130
- $control-hover: $link-hover !default
131
- $control-hover-border: $border-hover !default
132
-
133
- $control-active: $link !default
134
- $control-active-background: $link !default
135
- $control-active-background-invert: $link-invert !default
136
- $control-active-border: $link !default
137
-
138
115
  // Typography
139
-
140
116
  $family-primary: $family-sans-serif !default
141
117
  $family-code: $family-monospace !default
142
118
 
@@ -146,6 +122,8 @@ $size-medium: $size-5 !default
146
122
  $size-large: $size-3 !default
147
123
  $size-huge: $size-1 !default
148
124
 
125
+ ////////////////////////////////////////////////
126
+ ////////////////////////////////////////////////
149
127
  // 4. Lists and maps
150
128
 
151
129
  $colors: (white: ($white, $black), black: ($black, $white), light: ($light, $light-invert), dark: ($dark, $dark-invert), primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert)) !default