concisecss 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/javascripts/concisecss/close.js +4 -4
  4. data/app/assets/javascripts/concisecss/dropdown.js +30 -30
  5. data/app/assets/javascripts/concisecss/naver.js +348 -348
  6. data/app/assets/javascripts/concisecss/navigation.js +18 -18
  7. data/app/assets/javascripts/concisecss/non-responsive.js +46 -46
  8. data/app/assets/stylesheets/_defaults.scss +55 -58
  9. data/app/assets/stylesheets/base/_blockquotes.scss +32 -32
  10. data/app/assets/stylesheets/base/_container.scss +8 -8
  11. data/app/assets/stylesheets/base/_forms.scss +83 -81
  12. data/app/assets/stylesheets/base/_grid.scss +63 -59
  13. data/app/assets/stylesheets/base/_headings.scss +137 -134
  14. data/app/assets/stylesheets/base/_lists.scss +109 -109
  15. data/app/assets/stylesheets/base/_main.scss +28 -25
  16. data/app/assets/stylesheets/base/_selection.scss +18 -18
  17. data/app/assets/stylesheets/base/_tables.scss +78 -76
  18. data/app/assets/stylesheets/base/_type.scss +50 -50
  19. data/app/assets/stylesheets/concise.scss +7 -12
  20. data/app/assets/stylesheets/generic/_clearfix.scss +9 -9
  21. data/app/assets/stylesheets/generic/_conditional.scss +111 -107
  22. data/app/assets/stylesheets/generic/_helper.scss +81 -81
  23. data/app/assets/stylesheets/generic/_mixins.scss +73 -66
  24. data/app/assets/stylesheets/generic/_normalize.scss +189 -189
  25. data/app/assets/stylesheets/generic/_print.scss +105 -104
  26. data/app/assets/stylesheets/generic/_shared.scss +36 -32
  27. data/app/assets/stylesheets/objects/_badges.scss +43 -43
  28. data/app/assets/stylesheets/objects/_breadcrumbs.scss +30 -30
  29. data/app/assets/stylesheets/objects/_buttons.scss +264 -264
  30. data/app/assets/stylesheets/objects/_colors.scss +28 -25
  31. data/app/assets/stylesheets/objects/_dropdowns.scss +153 -153
  32. data/app/assets/stylesheets/objects/_groups.scss +82 -82
  33. data/app/assets/stylesheets/objects/_navigation.scss +330 -325
  34. data/app/assets/stylesheets/objects/_progress.scss +92 -88
  35. data/app/assets/stylesheets/objects/_wells.scss +93 -93
  36. data/lib/concisecss/concisecss_source.rb +1 -6
  37. data/lib/concisecss/version.rb +1 -1
  38. metadata +2 -3
  39. data/app/assets/stylesheets/generic/_debug.scss +0 -98
data/app/assets/stylesheets/objects/_navigation.scss CHANGED
@@ -1,377 +1,382 @@
1
1
  @if $use-navigation == true {
2
- //------------------------------------//
3
- // $NAVIGATION
4
- //------------------------------------//
5
- nav {
6
- ul {
7
- list-style: none;
8
- margin: 0;
9
- }
10
-
11
- li {
12
- cursor: pointer;
13
- position: relative;
14
- }
15
-
16
-
17
- // Dropdown
18
- .dropdown li { margin-right: 0px; }
2
+ //------------------------------------
3
+ // NAVIGATION
4
+ //------------------------------------
5
+ nav {
6
+ ul {
7
+ list-style: none;
8
+ margin: 0;
9
+ }
10
+
11
+ li {
12
+ cursor: pointer;
13
+ position: relative;
19
14
  }
15
+
16
+
17
+ // Dropdown
18
+ .dropdown li { margin-right: 0px; }
19
+ }
20
20
 
21
21
 
22
- // Nested dropdown
23
- .nav-dropdown {
24
- ul {
25
- ul {
26
- display: none;
27
- left: 0;
28
- margin: 0;
29
- opacity: 0;
30
- padding: 0;
31
- position: absolute;
32
- visibility: hidden;
33
- width: 150px;
34
- z-index: 99999;
35
-
36
- ul {
37
- display: none;
38
- left: 0;
39
- margin: 0;
40
- opacity: 0;
41
- padding: 0;
42
- position: absolute;
43
- visibility: hidden;
44
- width: 150px;
45
- z-index: 99999;
46
- }
47
- }
48
-
49
- ol ul,
50
- ul ol,
51
- ol ol {
52
- display: none;
53
- left: 0;
54
- margin: 0;
55
- opacity: 0;
56
- padding: 0;
57
- position: absolute;
58
- visibility: hidden;
59
- width: 150px;
60
- z-index: 99999;
61
- }
62
- }
22
+ // Nested dropdown
23
+ .nav-dropdown {
24
+ ul {
25
+ ul {
26
+ display: none;
27
+ left: 0;
28
+ margin: 0;
29
+ opacity: 0;
30
+ padding: 0;
31
+ position: absolute;
32
+ visibility: hidden;
33
+ width: 150px;
34
+ z-index: 99999;
63
35
 
64
- ol {
65
- ol,
66
- ul {
67
- display: none;
68
- left: 0;
69
- margin: 0;
70
- opacity: 0;
71
- padding: 0;
72
- position: absolute;
73
- visibility: hidden;
74
- width: 150px;
75
- z-index: 99999;
76
- }
77
-
78
- ol {
79
- ol,
80
- ul {
81
- display: none;
82
- left: 0;
83
- margin: 0;
84
- opacity: 0;
85
- padding: 0;
86
- position: absolute;
87
- visibility: hidden;
88
- width: 150px;
89
- z-index: 99999;
90
- }
91
- }
92
-
93
- ul {
94
- ul,
95
- ol {
96
- display: none;
97
- left: 0;
98
- margin: 0;
99
- opacity: 0;
100
- padding: 0;
101
- position: absolute;
102
- visibility: hidden;
103
- width: 150px;
104
- z-index: 99999;
105
- }
106
- }
107
- }
108
-
109
- .list-inline li li,
110
- &.list-inline li li { margin-right: 0px; }
111
-
112
- li li {
113
- background: #fff;
114
- display: block;
36
+ ul {
37
+ display: none;
38
+ left: 0;
39
+ margin: 0;
40
+ opacity: 0;
41
+ padding: 0;
42
+ position: absolute;
43
+ visibility: hidden;
44
+ width: 150px;
45
+ z-index: 99999;
115
46
  }
116
-
47
+ }
48
+
49
+ ol ul,
50
+ ul ol,
51
+ ol ol {
52
+ display: none;
53
+ left: 0;
54
+ margin: 0;
55
+ opacity: 0;
56
+ padding: 0;
57
+ position: absolute;
58
+ visibility: hidden;
59
+ width: 150px;
60
+ z-index: 99999;
61
+ }
62
+ }
63
+
64
+ ol {
65
+ ol,
66
+ ul {
67
+ display: none;
68
+ left: 0;
69
+ margin: 0;
70
+ opacity: 0;
71
+ padding: 0;
72
+ position: absolute;
73
+ visibility: hidden;
74
+ width: 150px;
75
+ z-index: 99999;
76
+ }
77
+
78
+ ol {
79
+ ol,
117
80
  ul {
118
- ul ul,
119
- ol ul,
120
- ul ol,
121
- ol ol { display: block; }
81
+ display: none;
82
+ left: 0;
83
+ margin: 0;
84
+ opacity: 0;
85
+ padding: 0;
86
+ position: absolute;
87
+ visibility: hidden;
88
+ width: 150px;
89
+ z-index: 99999;
122
90
  }
123
-
91
+ }
92
+
93
+ ul {
94
+ ul,
124
95
  ol {
125
- ul ul,
126
- ol ul,
127
- ul ol { display: block; }
96
+ display: none;
97
+ left: 0;
98
+ margin: 0;
99
+ opacity: 0;
100
+ padding: 0;
101
+ position: absolute;
102
+ visibility: hidden;
103
+ width: 150px;
104
+ z-index: 99999;
128
105
  }
129
-
130
- ul li:hover {
131
- ul,
132
- ol {
133
- display: block;
134
- opacity: 1;
135
- top: 100%;
136
- visibility: visible;
137
- }
138
- }
139
-
140
- ol li:hover {
141
- ul,
142
- ol {
143
- display: block;
144
- opacity: 1;
145
- top: 100%;
146
- visibility: visible;
147
- }
148
- }
149
-
150
- ul li:hover {
151
- ul ul,
152
- ol ul,
153
- ul ol,
154
- ol ol {
155
- display: none;
156
- opacity: 0;
157
- visibility: hidden;
158
- }
159
- }
160
-
161
- ol li:hover {
162
- ul ul,
163
- ol ul,
164
- ul ol,
165
- ol ol {
166
- display: none;
167
- opacity: 0;
168
- visibility: hidden;
169
- }
106
+ }
107
+ }
108
+
109
+ .list-inline li li,
110
+ &.list-inline li li { margin-right: 0px; }
111
+
112
+ li li {
113
+ background: #fff;
114
+ display: block;
115
+ }
116
+
117
+ ul {
118
+ ul ul,
119
+ ol ul,
120
+ ul ol,
121
+ ol ol { display: block; }
122
+ }
123
+
124
+ ol {
125
+ ul ul,
126
+ ol ul,
127
+ ul ol { display: block; }
128
+ }
129
+
130
+ ul li:hover {
131
+ ul,
132
+ ol {
133
+ display: block;
134
+ opacity: 1;
135
+ top: 100%;
136
+ visibility: visible;
137
+ }
138
+ }
139
+
140
+ ol li:hover {
141
+ ul,
142
+ ol {
143
+ display: block;
144
+ opacity: 1;
145
+ top: 100%;
146
+ visibility: visible;
147
+ }
148
+ }
149
+
150
+ ul li:hover {
151
+ ul ul,
152
+ ol ul,
153
+ ul ol,
154
+ ol ol {
155
+ display: none;
156
+ opacity: 0;
157
+ visibility: hidden;
158
+ }
159
+ }
160
+
161
+ ol li:hover {
162
+ ul ul,
163
+ ol ul,
164
+ ul ol,
165
+ ol ol {
166
+ display: none;
167
+ opacity: 0;
168
+ visibility: hidden;
169
+ }
170
+ }
171
+
172
+ ul {
173
+ ul li:hover {
174
+ ul,
175
+ ol {
176
+ display: block;
177
+ left: 100%;
178
+ opacity: 1;
179
+ position: absolute;
180
+ top: 0;
181
+ visibility: visible;
170
182
  }
171
-
183
+ }
184
+
185
+ ol li:hover {
186
+ ol,
172
187
  ul {
173
- ul li:hover {
174
- ul,
175
- ol {
176
- display: block;
177
- left: 100%;
178
- opacity: 1;
179
- position: absolute;
180
- top: 0;
181
- visibility: visible;
182
- }
183
- }
184
-
185
- ol li:hover {
186
- ol,
187
- ul {
188
- display: block;
189
- left: 100%;
190
- opacity: 1;
191
- position: absolute;
192
- top: 0;
193
- visibility: visible;
194
- }
195
- }
188
+ display: block;
189
+ left: 100%;
190
+ opacity: 1;
191
+ position: absolute;
192
+ top: 0;
193
+ visibility: visible;
196
194
  }
197
-
195
+ }
196
+ }
197
+
198
+ ol {
199
+ ul li:hover {
200
+ ul,
198
201
  ol {
199
- ul li:hover {
200
- ul,
201
- ol {
202
- display: block;
203
- left: 100%;
204
- opacity: 1;
205
- position: absolute;
206
- top: 0;
207
- visibility: visible;
208
- }
209
- }
210
-
211
- ol li:hover {
212
- ol,
213
- ul {
214
- display: block;
215
- left: 100%;
216
- opacity: 1;
217
- position: absolute;
218
- top: 0;
219
- visibility: visible;
220
- }
221
- }
202
+ display: block;
203
+ left: 100%;
204
+ opacity: 1;
205
+ position: absolute;
206
+ top: 0;
207
+ visibility: visible;
222
208
  }
209
+ }
210
+
211
+ ol li:hover {
212
+ ol,
213
+ ul {
214
+ display: block;
215
+ left: 100%;
216
+ opacity: 1;
217
+ position: absolute;
218
+ top: 0;
219
+ visibility: visible;
220
+ }
221
+ }
223
222
  }
223
+ }
224
224
 
225
225
 
226
- // Vertical
227
- .nav-vertical {
228
- li {
229
- display: block;
230
- margin-right: 0px;
231
- padding: 10px;
232
- }
233
-
234
- .icon {
235
- line-height: inherit;
236
- margin-right: 7px;
237
-
238
- &.right, &.text-right { margin-right: 0px; }
239
- }
240
-
241
- &.nav-bordered {
242
- border: 1px solid #eee;
243
-
244
- li:hover { background-color: #f6f6f6; }
245
- }
246
-
247
- &.nav-line li:hover { background-color: #f6f6f6; }
248
-
249
- .badge,
250
- .label { margin-top: 5px; }
251
-
252
- .dropdown .dropdown-menu { top: 100%; }
226
+ // Vertical
227
+ .nav-vertical {
228
+ li {
229
+ display: block;
230
+ margin-right: 0px;
231
+ padding: 10px;
232
+ }
233
+
234
+ .icon {
235
+ line-height: inherit;
236
+ margin-right: 7px;
237
+
238
+ &.right, &.text-right { margin-right: 0px; }
253
239
  }
240
+
241
+ &.nav-bordered {
242
+ border: 1px solid #eee;
243
+
244
+ li:hover { background-color: #f6f6f6; }
245
+ }
246
+
247
+ &.nav-line li:hover { background-color: #f6f6f6; }
248
+
249
+ .badge,
250
+ .label { margin-top: 5px; }
251
+
252
+ .dropdown .dropdown-menu { top: 100%; }
253
+ }
254
254
 
255
- @include breakpoint(small) {
256
- .nav-vertical .dropdown .dropdown-menu {
257
- left: 100%;
258
- top: 0;
259
- }
255
+ @include breakpoint(small) {
256
+ .nav-vertical .dropdown .dropdown-menu {
257
+ left: 100%;
258
+ top: 0;
260
259
  }
260
+ }
261
261
 
262
262
 
263
+ @if $use-responsive-navigation == true {
263
264
  // Responsive navigation
265
+ //
266
+ // Thanks to Ben Plum for the great work on his
267
+ // Naver plugin (https://github.com/benplum/Naver/)
264
268
  .naver {
265
- .naver-handle {
266
- color: inherit;
267
- cursor: pointer;
268
- display: none;
269
- @include font-size(24px);
270
- text-align: right;
271
- text-transform: uppercase;
272
-
273
- @include vendor(user-select, none);
274
- }
269
+ .naver-handle {
270
+ color: inherit;
271
+ cursor: pointer;
272
+ display: none;
273
+ @include font-size(24px);
274
+ text-align: right;
275
+ text-transform: uppercase;
275
276
 
276
- .naver-wrapper {
277
- height: auto;
278
- width: 100%;
279
- }
277
+ @include vendor(user-select, none);
278
+ }
279
+
280
+ .naver-wrapper {
281
+ height: auto;
282
+ width: 100%;
283
+ }
284
+
285
+ &.enabled {
286
+ .naver-handle { display: block; }
280
287
 
281
- &.enabled {
282
- .naver-handle { display: block; }
288
+ .naver-wrapper {
289
+ height: 0px;
290
+ overflow: hidden;
291
+
292
+ li {
293
+ display: block;
294
+ padding: 8px;
295
+ text-align: left;
296
+ width: 100%;
283
297
 
284
- .naver-wrapper {
285
- height: 0px;
286
- overflow: hidden;
287
-
288
- li {
289
- display: block;
290
- padding: 8px;
291
- text-align: left;
292
- width: 100%;
293
-
294
- &:hover { background: #f9f9f9; }
295
- }
296
- }
298
+ &:hover { background: #f9f9f9; }
299
+ }
297
300
  }
301
+ }
298
302
  }
299
303
 
300
304
  .nav-responsive {
301
- &.naver .naver-handle:after {
302
- content: "\f0c9";
303
- font-family: FontAwesome;
304
- text-align: right;
305
- }
305
+ &.naver .naver-handle:after {
306
+ content: "\f0c9";
307
+ font-family: FontAwesome;
308
+ text-align: right;
309
+ }
310
+
311
+ &.nav-responsive-text.naver {
312
+ .naver-handle:after { content: "\00a0 \f0c9"; }
306
313
 
307
- &.nav-responsive-text.naver {
308
- .naver-handle:after { content: "\00a0 \f0c9"; }
309
-
310
- .naver-container:before {
311
- clear: both;
312
- content: ".";
313
- display: block;
314
- height: 0;
315
- line-height: 0;
316
- text-align: right;
317
- visibility: hidden;
318
- }
314
+ .naver-container:before {
315
+ clear: both;
316
+ content: ".";
317
+ display: block;
318
+ height: 0;
319
+ line-height: 0;
320
+ text-align: right;
321
+ visibility: hidden;
319
322
  }
323
+ }
320
324
  }
321
325
 
322
326
 
323
327
  // Left-aligned responsive navigation
324
328
  .nav-responsive-left {
325
- &.naver .naver-handle {
326
- text-align: left;
327
-
328
- &:before {
329
- content: "\f0c9";
330
- font-family: FontAwesome;
331
- text-align: left;
332
- }
329
+ &.naver .naver-handle {
330
+ text-align: left;
331
+
332
+ &:before {
333
+ content: "\f0c9";
334
+ font-family: FontAwesome;
335
+ text-align: left;
333
336
  }
337
+ }
338
+
339
+ &.nav-responsive-text.naver {
340
+ .naver-handle:before { content: "\f0c9 \00a0"; }
334
341
 
335
- &.nav-responsive-text.naver {
336
- .naver-handle:before { content: "\f0c9 \00a0"; }
337
-
338
- .naver-container:after {
339
- clear: both;
340
- content: ".";
341
- display: block;
342
- height: 0;
343
- line-height: 0;
344
- text-align: left;
345
- visibility: hidden;
346
- }
342
+ .naver-container:after {
343
+ clear: both;
344
+ content: ".";
345
+ display: block;
346
+ height: 0;
347
+ line-height: 0;
348
+ text-align: left;
349
+ visibility: hidden;
347
350
  }
351
+ }
348
352
  }
349
353
 
350
354
 
351
355
  // Centered responsive navigation
352
356
  .nav-responsive-center {
353
- &.naver .naver-handle {
354
- text-align: center;
355
-
356
- &:before {
357
- content: "\f0c9";
358
- font-family: FontAwesome;
359
- text-align: center;
360
- }
357
+ &.naver .naver-handle {
358
+ text-align: center;
359
+
360
+ &:before {
361
+ content: "\f0c9";
362
+ font-family: FontAwesome;
363
+ text-align: center;
361
364
  }
365
+ }
366
+
367
+ &.nav-responsive-text.naver {
368
+ .naver-handle:before { content: "\f0c9 \00a0"; }
362
369
 
363
- &.nav-responsive-text.naver {
364
- .naver-handle:before { content: "\f0c9 \00a0"; }
365
-
366
- .naver-container:after {
367
- clear: both;
368
- content: ".";
369
- display: block;
370
- height: 0;
371
- line-height: 0;
372
- text-align: center;
373
- visibility: hidden;
374
- }
370
+ .naver-container:after {
371
+ clear: both;
372
+ content: ".";
373
+ display: block;
374
+ height: 0;
375
+ line-height: 0;
376
+ text-align: center;
377
+ visibility: hidden;
375
378
  }
379
+ }
376
380
  }
381
+ }
377
382
  }