modularis 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +8 -8
  2. data/demo/test/config.rb +26 -0
  3. data/lib/modularis/generators/install_generator.rb +1 -1
  4. data/lib/modularis/version.rb +1 -1
  5. data/templates/project/config.rb +32 -9
  6. metadata +3 -40
  7. data/scss/compagecss/components/_alert-boxes.scss +0 -106
  8. data/scss/compagecss/components/_block-grid.scss +0 -70
  9. data/scss/compagecss/components/_breadcrumbs.scss +0 -124
  10. data/scss/compagecss/components/_button-groups.scss +0 -88
  11. data/scss/compagecss/components/_buttons.scss +0 -226
  12. data/scss/compagecss/components/_clearing.scss +0 -217
  13. data/scss/compagecss/components/_custom-forms.scss +0 -246
  14. data/scss/compagecss/components/_dropdown-buttons.scss +0 -114
  15. data/scss/compagecss/components/_dropdown.scss +0 -149
  16. data/scss/compagecss/components/_flex-video.scss +0 -45
  17. data/scss/compagecss/components/_flexbox-grid.scss +0 -225
  18. data/scss/compagecss/components/_flip.scss +0 -105
  19. data/scss/compagecss/components/_forms.scss +0 -361
  20. data/scss/compagecss/components/_global.scss +0 -289
  21. data/scss/compagecss/components/_grid.scss +0 -184
  22. data/scss/compagecss/components/_inline-lists.scss +0 -52
  23. data/scss/compagecss/components/_joyride.scss +0 -210
  24. data/scss/compagecss/components/_keystrokes.scss +0 -56
  25. data/scss/compagecss/components/_labels.scss +0 -84
  26. data/scss/compagecss/components/_magellan.scss +0 -21
  27. data/scss/compagecss/components/_off-canvas.scss +0 -86
  28. data/scss/compagecss/components/_orbit.scss +0 -209
  29. data/scss/compagecss/components/_pagination.scss +0 -99
  30. data/scss/compagecss/components/_panels.scss +0 -76
  31. data/scss/compagecss/components/_pricing-tables.scss +0 -130
  32. data/scss/compagecss/components/_progress-bars.scss +0 -70
  33. data/scss/compagecss/components/_reveal.scss +0 -131
  34. data/scss/compagecss/components/_section.scss +0 -303
  35. data/scss/compagecss/components/_side-nav.scss +0 -68
  36. data/scss/compagecss/components/_split-buttons.scss +0 -166
  37. data/scss/compagecss/components/_sub-nav.scss +0 -67
  38. data/scss/compagecss/components/_switch.scss +0 -249
  39. data/scss/compagecss/components/_tables.scss +0 -80
  40. data/scss/compagecss/components/_thumbs.scss +0 -47
  41. data/scss/compagecss/components/_tooltips.scss +0 -113
  42. data/scss/compagecss/components/_top-bar.scss +0 -462
  43. data/scss/compagecss/components/_type.scss +0 -422
  44. data/scss/compagecss/components/_visibility.scss +0 -320
  45. /data/scss/compagecss/{_variables.scss → _settings.scss} +0 -0
@@ -1,462 +0,0 @@
1
- //
2
- // Top Bar Variables
3
- //
4
-
5
- // Background color for the top bar
6
- $topbar-bg: #111 !default;
7
-
8
- // Height and margin
9
- $topbar-height: 45px !default;
10
- $topbar-margin-bottom: emCalc(30px) !default;
11
-
12
- // Control Input height for top bar
13
- $topbar-input-height: 2.45em !default;
14
-
15
- // Controlling the styles for the title in the top bar
16
- $topbar-title-weight: bold !default;
17
- $topbar-title-font-size: emCalc(17px) !default;
18
-
19
- // Set the link colors and styles for top-level nav
20
- $topbar-link-color: #fff !default;
21
- $topbar-link-weight: bold !default;
22
- $topbar-link-font-size: emCalc(13px) !default;
23
- $topbar-link-hover-lightness: -30% !default; // Darken by 30%
24
-
25
- // Style the top bar dropdown elements
26
- $topbar-dropdown-bg: #333 !default;
27
- $topbar-dropdown-link-color: #fff !default;
28
- $topbar-dropdown-toggle-size: 5px !default;
29
- $topbar-dropdown-toggle-color: #fff !default;
30
- $topbar-dropdown-toggle-alpha: 0.5 !default;
31
- $dropdown-label-color: #555 !default;
32
-
33
- // Top menu icon styles
34
- $topbar-menu-link-transform: uppercase !default;
35
- $topbar-menu-link-font-size: emCalc(13px) !default;
36
- $topbar-menu-link-weight: bold !default;
37
- $topbar-menu-link-color: #fff !default;
38
- $topbar-menu-icon-color: #fff !default;
39
- $topbar-menu-link-color-toggled: #888 !default;
40
- $topbar-menu-icon-color-toggled: #888 !default;
41
-
42
- // Transitions and breakpoint styles
43
- $topbar-transition-speed: 300ms !default;
44
- $topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
45
- $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
46
-
47
-
48
- /* Wrapped around .top-bar to contain to grid width */
49
- .contain-to-grid {
50
- width: 100%;
51
- background: $topbar-bg;
52
- }
53
-
54
- // Wrapped around .top-bar to make it fixed at the top
55
- .fixed {
56
- width: 100%;
57
- #{$default-float}: 0;
58
- position: fixed;
59
- top: 0;
60
- z-index: 99;
61
- }
62
-
63
- .top-bar {
64
- overflow: hidden;
65
- height: $topbar-height;
66
- line-height: $topbar-height;
67
- position: relative;
68
- background: $topbar-bg;
69
- margin-bottom: $topbar-margin-bottom;
70
-
71
- // Topbar Global list Styles
72
- ul {
73
- margin-bottom: 0;
74
- list-style: none;
75
- }
76
-
77
- .row { max-width: none; }
78
-
79
- form,
80
- input { margin-bottom: 0; }
81
-
82
- input { height: $topbar-input-height; }
83
-
84
- .button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
85
-
86
- // Title Area
87
- .title-area { position: relative; }
88
-
89
- .name {
90
- height: $topbar-height;
91
- margin: 0;
92
- font-size: $em-base;
93
-
94
- h1 {
95
- line-height: $topbar-height;
96
- font-size: $topbar-title-font-size;
97
- margin: 0;
98
- a {
99
- font-weight: $topbar-title-weight;
100
- color: $topbar-link-color;
101
- width: 50%;
102
- display: block;
103
- padding: 0 $topbar-height / 3;
104
- }
105
- }
106
- }
107
-
108
- // Menu toggle button on small devices
109
- .toggle-topbar {
110
- position: absolute;
111
- #{$opposite-direction}: 0;
112
- top: 0;
113
-
114
- a {
115
- color: $topbar-link-color;
116
- text-transform: $topbar-menu-link-transform;
117
- font-size: $topbar-menu-link-font-size;
118
- font-weight: $topbar-menu-link-weight;
119
- position: relative;
120
- display: block;
121
- padding: 0 $topbar-height / 3;
122
- height: $topbar-height;
123
- line-height: $topbar-height;
124
- }
125
-
126
- // Adding the class "menu-icon" will add the 3-line icon people love and adore.
127
- &.menu-icon {
128
- #{$opposite-direction}: $topbar-height / 3;
129
- top: 50%;
130
- margin-top: -16px;
131
- padding-#{$default-float}: 40px;
132
-
133
- a {
134
- text-indent: -48px;
135
- width: 34px;
136
- height: 34px;
137
- line-height: 33px;
138
- padding: 0;
139
- color: $topbar-menu-link-color;
140
-
141
- span {
142
- position: absolute;
143
- #{$opposite-direction}: 0;
144
- display: block;
145
- width: 16px;
146
- height: 0;
147
- // Shh, don't tell, but box-shadows create the menu icon :)
148
- -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
149
- 0 16px 0 1px $topbar-menu-icon-color,
150
- 0 22px 0 1px $topbar-menu-icon-color;
151
-
152
- box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
153
- 0 16px 0 1px $topbar-menu-icon-color,
154
- 0 22px 0 1px $topbar-menu-icon-color;
155
- }
156
- }
157
- }
158
- }
159
-
160
- // Change things up when the top-bar is expanded
161
- &.expanded {
162
- height: auto;
163
- background: transparent;
164
-
165
- .title-area { background: $topbar-bg; }
166
-
167
- .toggle-topbar {
168
- a { color: $topbar-menu-link-color-toggled;
169
- span {
170
- // Shh, don't tell, but box-shadows create the menu icon :)
171
- -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
172
- 0 16px 0 1px $topbar-menu-icon-color-toggled,
173
- 0 22px 0 1px $topbar-menu-icon-color-toggled;
174
-
175
- box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
176
- 0 16px 0 1px $topbar-menu-icon-color-toggled,
177
- 0 22px 0 1px $topbar-menu-icon-color-toggled;
178
- }
179
- }
180
- }
181
- }
182
-
183
- }
184
-
185
- // Right and Left Navigation that stacked by default
186
- .top-bar-section {
187
- #{$default-float}: 0;
188
- position: relative;
189
- width: auto;
190
- @include single-transition($default-float, $topbar-transition-speed);
191
-
192
- ul {
193
- width: 100%;
194
- height: auto;
195
- display: block;
196
- background: $topbar-dropdown-bg;
197
- font-size: $em-base;
198
- margin: 0;
199
- }
200
-
201
- .divider,
202
- [role="separator"] {
203
- border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
204
- border-top: solid 1px darken($topbar-dropdown-bg, 10%);
205
- clear: both;
206
- height: 1px;
207
- width: 100%;
208
- }
209
-
210
- ul li {
211
- & > a {
212
- display: block;
213
- width: 100%;
214
- color: $topbar-link-color;
215
- padding: 12px 0 12px 0;
216
- padding-#{$default-float}: $topbar-height / 3;
217
- font-size: $topbar-link-font-size;
218
- font-weight: $topbar-link-weight;
219
- background: $topbar-dropdown-bg;
220
-
221
- &:hover { background: darken($topbar-dropdown-bg, 3%); }
222
-
223
-
224
- &.button {
225
- background: $primary-color;
226
- font-size: $topbar-link-font-size;
227
- &:hover {
228
- background: darken($primary-color, 10%);
229
- }
230
- }
231
- &.button.secondary {
232
- background: $secondary-color;
233
- &:hover {
234
- background: darken($secondary-color, 10%);
235
- }
236
- }
237
- &.button.success {
238
- background: $success-color;
239
- &:hover {
240
- background: darken($success-color, 10%);
241
- }
242
- }
243
- &.button.alert {
244
- background: $alert-color;
245
- &:hover {
246
- background: darken($alert-color, 10%);
247
- }
248
- }
249
-
250
- }
251
-
252
- // Apply the active link color when it has that class
253
- &.active > a { background: darken($topbar-dropdown-bg, 3%); }
254
- }
255
-
256
- // Add some extra padding for list items contains buttons
257
- .has-form { padding: $topbar-height / 3; }
258
-
259
- // Styling for list items that have a dropdown within them.
260
- .has-dropdown {
261
- position: relative;
262
-
263
- & > a {
264
- &:after {
265
- @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
266
- margin-#{$opposite-direction}: $topbar-height / 3;
267
- margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
268
- position: absolute;
269
- top: 22px;
270
- #{$opposite-direction}: 0;
271
- }
272
- }
273
-
274
- &.moved { position: static;
275
- & > .dropdown {
276
- visibility: visible;
277
- }
278
- }
279
- }
280
-
281
- // Styling elements inside of dropdowns
282
- .dropdown {
283
- position: absolute;
284
- #{$default-float}: 100%;
285
- top: 0;
286
- visibility: hidden;
287
- z-index: 99;
288
-
289
- li { width: 100%;
290
- a {
291
- font-weight: normal;
292
- padding: 8px $topbar-height / 3;
293
- }
294
-
295
- &.title h5 { margin-bottom: 0;
296
- a {
297
- color: $topbar-link-color;
298
- line-height: $topbar-height / 2;
299
- display: block;
300
- }
301
- }
302
- }
303
-
304
- label {
305
- padding: 8px $topbar-height / 3 2px;
306
- margin-bottom: 0;
307
- text-transform: uppercase;
308
- color: $dropdown-label-color;
309
- font-weight: bold;
310
- font-size: emCalc(10px);
311
- }
312
- }
313
- }
314
-
315
- // Element that controls breakpoint, no need to change this ever
316
- .top-bar-js-breakpoint {
317
- width: $topbar-breakpoint !important;
318
- visibility: hidden;
319
- }
320
- .js-generated { display: block; }
321
-
322
-
323
- // Top Bar styles intended for screen sizes above the breakpoint.
324
- @media #{$topbar-media-query} {
325
- .top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
326
- .toggle-topbar { display: none; }
327
-
328
- .title-area { float: $default-float; }
329
- .name h1 a { width: auto; }
330
-
331
- input,
332
- .button {
333
- line-height: 2em;
334
- font-size: emCalc(14px);
335
- height: 2em;
336
- padding: 0 10px;
337
- position: relative;
338
- top: 8px;
339
- }
340
-
341
- &.expanded { background: $topbar-bg; }
342
- }
343
-
344
- .contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; margin-bottom: $topbar-margin-bottom; }
345
-
346
- .top-bar-section {
347
- @include single-transition(none,0,0);
348
- #{$default-float}: 0 !important;
349
-
350
- ul {
351
- width: auto;
352
- height: auto !important;
353
- display: inline;
354
-
355
- li {
356
- float: $default-float;
357
- .js-generated { display: none; }
358
- }
359
- }
360
-
361
- li {
362
- a:not(.button) {
363
- padding: 0 $topbar-height / 3;
364
- line-height: $topbar-height;
365
- background: $topbar-bg;
366
- &:hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
367
- }
368
- }
369
-
370
- .has-dropdown {
371
- & > a {
372
- padding-#{$opposite-direction}: $topbar-height / 3 + 20 !important;
373
-
374
- &:after {
375
- @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
376
- margin-top: -($topbar-dropdown-toggle-size / 2);
377
- top: $topbar-height / 2;
378
- }
379
- }
380
-
381
- &.moved { position: relative;
382
- & > .dropdown { visibility: hidden; }
383
- }
384
-
385
- &:hover,
386
- &:active {
387
- & > .dropdown {
388
- visibility: visible;
389
- }
390
- }
391
-
392
- .dropdown li.has-dropdown {
393
- & > a {
394
- &:after {
395
- border: none;
396
- content: "\00bb";
397
- margin-top: -15px;
398
- #{$opposite-direction}: 5px;
399
- }
400
- }
401
- }
402
-
403
- }
404
-
405
- .dropdown {
406
- #{$default-float}: 0;
407
- top: auto;
408
- background: transparent;
409
- min-width: 100%;
410
-
411
- li {
412
- a {
413
- color: $topbar-dropdown-link-color;
414
- line-height: 1;
415
- white-space: nowrap;
416
- padding: 7px $topbar-height / 3;
417
- background: lighten($topbar-bg, 5%);
418
- }
419
-
420
- label {
421
- white-space: nowrap;
422
- background: lighten($topbar-bg, 5%);
423
- }
424
-
425
- // Second Level Dropdowns
426
- .dropdown {
427
- #{$default-float}: 100%;
428
- top: 0;
429
- }
430
- }
431
- }
432
-
433
- & > ul > .divider,
434
- & > ul > [role="separator"] {
435
- border-bottom: none;
436
- border-top: none;
437
- border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
438
- border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
439
- clear: none;
440
- height: $topbar-height;
441
- width: 0px;
442
- }
443
-
444
- .has-form {
445
- background: $topbar-bg;
446
- padding: 0 $topbar-height / 3;
447
- height: $topbar-height;
448
- }
449
-
450
- // Position overrides for ul.right
451
- ul.right {
452
- li .dropdown {
453
- left: auto;
454
- right: 0;
455
-
456
- li .dropdown { right: 100%; }
457
- }
458
- }
459
-
460
- }
461
-
462
- }