kickstart_rails 3.0.16 → 3.0.17

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/kickstart_rails/docs.js +3 -3
  3. data/app/assets/javascripts/kickstart_rails/kickstart.js +85 -17
  4. data/app/assets/javascripts/kickstart_rails/kickstart.min.js +1 -1
  5. data/app/assets/javascripts/kickstart_rails/test.js +129 -24
  6. data/app/assets/stylesheets/kickstart_rails/components/_buttons.sass +2 -2
  7. data/app/assets/stylesheets/kickstart_rails/components/_dropdown_menu.sass +1 -1
  8. data/app/assets/stylesheets/kickstart_rails/components/_forms.sass +25 -57
  9. data/app/assets/stylesheets/kickstart_rails/components/_labels.sass +1 -1
  10. data/app/assets/stylesheets/kickstart_rails/components/_modals.sass +49 -5
  11. data/app/assets/stylesheets/kickstart_rails/components/_nav.sass +2 -2
  12. data/app/assets/stylesheets/kickstart_rails/components/_navbar.sass +51 -22
  13. data/app/assets/stylesheets/kickstart_rails/components/_notifications.sass +1 -1
  14. data/app/assets/stylesheets/kickstart_rails/components/_tabs.sass +37 -0
  15. data/app/assets/stylesheets/kickstart_rails/core/_animations.sass +2 -2
  16. data/app/assets/stylesheets/kickstart_rails/core/_direct-apply.sass +62 -1
  17. data/app/assets/stylesheets/kickstart_rails/core/_grid.sass +1 -1
  18. data/app/assets/stylesheets/kickstart_rails/core/_mixins.sass +0 -1
  19. data/app/assets/stylesheets/kickstart_rails/core/_typography.sass +13 -3
  20. data/app/assets/stylesheets/kickstart_rails/docs.sass +34 -240
  21. data/app/assets/stylesheets/kickstart_rails/kickstart.sass +35 -25
  22. data/app/assets/stylesheets/kickstart_rails/pages/docs/index.sass +74 -0
  23. data/app/assets/stylesheets/kickstart_rails/pages/index.sass +59 -0
  24. data/app/assets/stylesheets/kickstart_rails/themes/_canary.sass +258 -0
  25. data/app/assets/stylesheets/kickstart_rails/themes/_default.sass +17 -20
  26. data/lib/kickstart_rails/version.rb +1 -1
  27. metadata +18 -15
@@ -13,7 +13,7 @@
13
13
  pointer-events: none
14
14
  // TODO: Cursor disabled?
15
15
 
16
- &.with-submenu
16
+ &.menu-item
17
17
  position: relative
18
18
 
19
19
  ul
@@ -72,7 +72,7 @@
72
72
  left: $size * $size * map-get($rootElement, paddingH)
73
73
  right: $size * $size * map-get($rootElement, paddingH)
74
74
 
75
- &.with-submenu
75
+ &.menu-item
76
76
  &:after
77
77
  font-size: $size * 0.85rem
78
78
  margin-left: $size * $size * $space/4
@@ -1,5 +1,5 @@
1
1
  =dropdown_menu-default
2
- .with-submenu
2
+ .menu-item
3
3
  ul
4
4
  display: none
5
5
  position: absolute
@@ -3,51 +3,13 @@ label, legend
3
3
  font-weight: 500
4
4
  margin-bottom: $space/4
5
5
 
6
- %error_message
7
- font-style: italic
8
- margin:
9
- top: 7px
10
- bottom: 14px
11
-
12
- =form-default
6
+ =form-default($layout: 'none')
13
7
  margin-bottom: $space
14
8
 
15
- .errors, .warnings, .successes
16
- p
17
- @extend %error_message
18
-
19
- .errors
20
- +field-colors(map-get($colors, red))
21
-
22
- .warnings
23
- +field-colors(map-get($colors, yellow))
24
-
25
- .successes
26
- +field-colors(map-get($colors, green))
27
-
28
- p
29
- &.error, &.warning, &.success
30
- @extend %error_message
31
-
32
- label, span, p
33
- &.error
34
- color: map-get($colors, red)
35
-
36
- &.warning
37
- color: map-get($colors, yellow)
38
-
39
- &.success
40
- color: map-get($colors, green)
41
-
42
- input, select
43
- &.error
44
- border-color: map-get($colors, red)
45
-
46
- &.warning
47
- border-color: map-get($colors, yellow)
48
-
49
- &.success
50
- border-color: map-get($colors, green)
9
+ @if ($layout == 'horizontal')
10
+ +form-horizontal
11
+ @if ($layout == 'left')
12
+ +form-left
51
13
 
52
14
  @content
53
15
 
@@ -58,6 +20,7 @@ label, legend
58
20
  border: 1px solid #CCC
59
21
  display: block
60
22
  border-radius: 3px
23
+ max-width: 100%
61
24
 
62
25
  label + &
63
26
  margin-top: ($space/5)
@@ -88,38 +51,43 @@ select
88
51
  height: calc(#{$default-line-height} + #{2 * map-get($rootElement, paddingV)})
89
52
  background-image: none
90
53
 
91
- =form-horizontal-default
54
+ =form-horizontal
55
+ display: inline-block
56
+
92
57
  label, input
93
58
  display: inline-block
94
59
 
95
60
  @content
96
61
 
97
- =form-left-default()
62
+ =form-left
98
63
  label
64
+ +root-element
65
+ padding:
66
+ right: 0
67
+ left: 0
99
68
  display: inline-block
100
- width: 50%
101
- text-align: right
102
- padding-right: 10px
103
- margin: 0
104
- + input[type="text"]
105
- width: 50%
106
- display: inline-block
69
+ margin:
70
+ top: 0
71
+ bottom: 0
72
+
73
+ @media screen and (min-width: $tablet)
74
+ label:not(.checkbox):not(.radio)
75
+ text-align: right
107
76
 
108
77
  @content
109
78
 
110
- =form_group-default($orientation)
79
+ =form_group-default($layout)
111
80
  display: block
112
81
  margin-bottom: $space
113
82
 
114
- @if $orientation == 'horizontal'
115
- display: inline-block
83
+ @if $layout == 'horizontal'
84
+ display: inherit
116
85
  margin:
117
- bottom: 0
118
86
  right: $space/5
119
87
 
120
88
  > *
121
89
  display: inline-block
122
- margin-right: $space/5
90
+ margin-right: $space/5
123
91
 
124
92
  @content
125
93
 
@@ -1,4 +1,4 @@
1
- =label-default($background-color: map-get($colors, blue))
1
+ =label-default($background-color: $primary-color)
2
2
  +root-element
3
3
  background: $background-color
4
4
  font-size: 0.8rem
@@ -1,20 +1,21 @@
1
1
  =modal-default()
2
2
  +root-element
3
+ border-width: 0
4
+ padding: $space
3
5
  position: fixed
4
6
  box-shadow: 0px 0px 99999px 99999px rgba(0, 0, 0, 0.35), 0px 0px 25px rgba(0, 0, 0, 0.5)
5
7
  top: 15px
6
- top: 1vh
7
- width: 98%
8
+ top: 5vh
8
9
  left: 2%
10
+ right: 2%
9
11
  margin: 0px auto
10
12
  display: none
11
13
  background: white
12
14
  border-color: map-get($white, dark)
13
- animation-duration: 0.25s
14
- animation-delay: 0.2s
15
+ animation-duration: 0.2s
15
16
  animation-timing-function: ease
16
17
  animation-fill-mode: both
17
- z-index: 1000
18
+ z-index: 1500
18
19
 
19
20
  &[style="display: block;"]
20
21
  animation-name: fadeInDown
@@ -26,4 +27,47 @@
26
27
  left: 50%
27
28
  margin-left: -325px
28
29
 
30
+ > header, > footer
31
+ +alert
32
+
33
+ > h1, > h2, > h3, > h4, > h5, > h6
34
+ margin-bottom: 0
35
+
36
+ background: map-get($white, dark)
37
+ color: $default-font-color
38
+ margin: -$space
39
+ bottom: $space
40
+
41
+ > header
42
+ border-bottom-left-radius: 0
43
+ border-bottom-right-radius: 0
44
+ position: relative
45
+
46
+ a[data-modal-close]
47
+ position: absolute
48
+ top: $space/2
49
+ right: $space/2
50
+ line-height: 1.3rem
51
+ text-decoration: none
52
+ font-size: 1.3rem
53
+
54
+ > footer
55
+ margin:
56
+ top: $space
57
+ bottom: -$space
58
+ border-top-left-radius: 0
59
+ border-top-right-radius: 0
60
+
61
+ ul
62
+ +list($style: 'unstyled horizontal')
63
+ text-align: right
64
+
65
+ li
66
+ margin:
67
+ bottom: 0
68
+ right: 0
69
+
70
+ [role="button"]
71
+ text-decoration: none
72
+
29
73
  @content
@@ -67,7 +67,7 @@
67
67
 
68
68
  &:last-child
69
69
  @media screen and (min-width: $breakpoint)
70
- > li.with-submenu.open
70
+ > li.menu-item.open
71
71
  ul
72
72
  left: auto
73
73
  right: -1px
@@ -120,7 +120,7 @@
120
120
  @media screen and (min-width: $breakpoint)
121
121
  display: none
122
122
 
123
- &.with-submenu // Added via k$.nav()
123
+ &.menu-item // Added via k$.nav()
124
124
  padding: (2 * map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
125
125
  +color($background)
126
126
  cursor: pointer
@@ -25,9 +25,27 @@
25
25
  +container(false)
26
26
  +navbar-align_menus($breakpoint)
27
27
 
28
- =navbar-default($layout: 'none', $background: map-get($white, dark), $breakpoint: $tablet, $collapse: false)
29
- background: $background
30
- box-shadow: 0px 1px 0px darken($background, 12%) inset
28
+ =navbar-fixed
29
+ position: fixed
30
+ z-index: 100
31
+ left: 0
32
+ right: 0
33
+ top: 0
34
+
35
+ =navbar-color($background-color)
36
+ background-color: $background-color
37
+
38
+ nav
39
+ > ul
40
+ > li
41
+ &.menu-item
42
+ +color($background-color)
43
+
44
+ > a:not([role=button])
45
+ +color($background-color)
46
+
47
+ =navbar-default($layout: 'none', $background-color: map-get($white, dark), $breakpoint: $tablet, $collapse: false, $fixed: false)
48
+ box-shadow: 0px 1px 0px darken($background-color, 12%) inset
31
49
  font-size: $default-font-size
32
50
  margin-bottom: $space
33
51
 
@@ -36,14 +54,14 @@
36
54
  border-radius: 0
37
55
  position: relative
38
56
 
39
- @if (lightness($background) < 75%)
57
+ @if (lightness($background-color) < 75%)
40
58
  color: white
41
59
  @else
42
60
  color: $default-font-color
43
61
 
44
62
  @media screen and (min-width: $breakpoint)
45
63
  display: flex
46
- align-items: flex-start
64
+ align-items: center
47
65
  flex-wrap: wrap
48
66
  justify-content: space-between
49
67
  align-content: space-between
@@ -75,14 +93,14 @@
75
93
 
76
94
  &:last-child
77
95
  @media screen and (min-width: $breakpoint)
78
- > li.with-submenu.open
96
+ > li.menu-item.open
79
97
  ul
80
98
  left: auto
81
99
  right: -1px
82
100
 
83
101
  &:only-child
84
102
  @media screen and (min-width: $breakpoint)
85
- > li.with-submenu.open
103
+ > li.menu-item.open
86
104
  ul
87
105
  left: -1px
88
106
  right: auto
@@ -113,6 +131,12 @@
113
131
  justify-content: space-between
114
132
  align-items: center
115
133
 
134
+ @media screen and (min-width: $breakpoint)
135
+ padding: 0
136
+
137
+ > h1, > h2, > h3, > h4, > h5, > h6
138
+ padding: (map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
139
+
116
140
  button
117
141
  +button-default(transparent)
118
142
  background: transparent
@@ -125,6 +149,8 @@
125
149
  left: 0
126
150
  right: 0
127
151
  opacity: 0.5
152
+ @if ($collapse == false)
153
+ display: none
128
154
 
129
155
  &:hover, &:active
130
156
  box-shadow: none
@@ -135,9 +161,8 @@
135
161
  @media screen and (min-width: $breakpoint)
136
162
  display: none
137
163
 
138
- &.with-submenu // Added via k$.nav()
164
+ &.menu-item // Added via k$.nav()
139
165
  padding: (2 * map-get($rootElement, paddingV) - 1) (map-get($rootElement, paddingH))
140
- +color($background)
141
166
  cursor: pointer
142
167
 
143
168
  &:before
@@ -160,16 +185,16 @@
160
185
  margin-left: 8px
161
186
 
162
187
  &:hover
163
- @if (lightness($background) < 75%)
188
+ @if (lightness($background-color) < 75%)
164
189
  color: white
165
190
  @else
166
191
  color: rgba(0, 0, 0, 0.85)
167
- background: darken($background, 5%)
168
- border-color: darken($background, 5%)
192
+ background: darken($background-color, 5%)
193
+ border-color: darken($background-color, 5%)
169
194
 
170
195
  &:active
171
- background: darken($background, 15%)
172
- border-color: darken($background, 15%)
196
+ background: darken($background-color, 15%)
197
+ border-color: darken($background-color, 15%)
173
198
 
174
199
  &.open
175
200
  color: rgba(0, 0, 0, 0.85)
@@ -205,7 +230,6 @@
205
230
  display: inherit
206
231
 
207
232
  > a:not([role=button])
208
- +color($background)
209
233
  text-decoration: none
210
234
  cursor: pointer
211
235
  display: block
@@ -220,21 +244,26 @@
220
244
  right: map-get($rootElement, paddingH)
221
245
 
222
246
  &:hover
223
- @if (lightness($background) < 75%)
247
+ @if (lightness($background-color) < 75%)
224
248
  color: white
225
249
  @else
226
250
  color: rgba(0, 0, 0, 0.85)
227
- background: darken($background, 5%)
228
- border-color: darken($background, 5%)
251
+ background: darken($background-color, 5%)
252
+ border-color: darken($background-color, 5%)
229
253
 
230
254
  &:active
231
- background: darken($background, 15%)
232
- border-color: darken($background, 15%)
255
+ background: darken($background-color, 15%)
256
+ border-color: darken($background-color, 15%)
233
257
 
234
- @if $layout == 'fluid'
258
+ @if ($layout == 'fluid')
235
259
  +navbar-fluid($breakpoint)
236
260
 
237
- @if $layout == 'fluid-fixed'
261
+ @if ($layout == 'fluid-fixed')
238
262
  +navbar-fluid_fixed($breakpoint)
239
263
 
264
+ @if ($fixed == true)
265
+ +navbar-fixed
266
+
267
+ +navbar-color($background-color)
268
+
240
269
  @content
@@ -3,7 +3,7 @@
3
3
  top: 0
4
4
  left: 0
5
5
  right: 0
6
- z-index: 1100 // Above modal
6
+ z-index: 2000 // Above modal
7
7
  display: flex
8
8
  pointer-events: none
9
9
 
@@ -0,0 +1,37 @@
1
+ =tabs-default
2
+ +list($style: 'unstyled horizontal')
3
+ border-bottom: 1px solid map-get($white, darker)
4
+
5
+ li
6
+ margin: 0
7
+ right: -1px
8
+ bottom: -1px
9
+
10
+ &.open
11
+ a
12
+ border-bottom-color: transparent
13
+ background: white
14
+
15
+ &:hover, &.active
16
+ box-shadow: none
17
+
18
+ a
19
+ +button
20
+ border: 1px solid $secondary-color
21
+ padding:
22
+ left: map-get($rootElement, paddingH)
23
+ right: map-get($rootElement, paddingH)
24
+ border-bottom-left-radius: 0
25
+ border-bottom-right-radius: 0
26
+
27
+ =tab_pane_container-default
28
+ +root-element
29
+ background: white
30
+ border-color: $secondary-color
31
+ border-top: 0
32
+ border-top-left-radius: 0
33
+ border-top-right-radius: 0
34
+ padding: $space
35
+ margin-top: -$space
36
+
37
+ @content