modularis 0.0.2 → 0.0.3

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 (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
- }