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,303 +0,0 @@
1
- //
2
- // Section Variables
3
- //
4
-
5
- // We use these to set padding and hover factor
6
- $section-padding: emCalc(15px) !default;
7
- $section-function-factor: 10% !default;
8
-
9
- // These style the titles
10
- $section-title-color: #333 !default;
11
- $section-title-bg: #efefef !default;
12
- $section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
13
- $section-title-bg-active-tabs: #fff !default;
14
-
15
- // Want to control border size, here ya go!
16
- $section-border-size: 1px !default;
17
- $section-border-style: solid !default;
18
- $section-border-color: #ccc !default;
19
-
20
- // Control the color of the background and some size options
21
- $section-content-bg: #fff !default;
22
- $section-vertical-nav-min-width: emCalc(200px) !default;
23
- $section-vertical-tabs-title-width: emCalc(200px) !default;
24
- $section-bottom-margin: emCalc(20px) !default;
25
-
26
-
27
- //
28
- // Section Mixins
29
- //
30
-
31
- // We use this mixin to create the basic container styles for sections when they act like accordions
32
- @mixin section-container($base-style:true, $section-type:accordion) {
33
-
34
- // We can set this to false to not include these styles to avoid repeated CSS on classes.
35
- @if $base-style {
36
- width: 100%;
37
- display: block;
38
- margin-bottom: $section-bottom-margin;
39
- }
40
-
41
- // Accordion container border styles
42
- @if $section-type == accordion {
43
- border: $section-border-size $section-border-style $section-border-color;
44
- border-top: none;
45
- }
46
-
47
- // Tabs container border styles
48
- @else if $section-type == tabs {
49
- border: 0;
50
- position: relative;
51
- }
52
-
53
- // Vertical Tabs container border styles
54
- @else if $section-type == vertical-tabs {
55
- border: $section-border-size $section-border-style $section-border-color;
56
- position: relative;
57
- }
58
-
59
- // Vertical Nav container border styles
60
- @else if $section-type == vertical-nav {
61
-
62
- }
63
-
64
- // Horizontal Nav container border styles
65
- @else if $section-type == horizontal-nav {
66
- position: relative;
67
- background: $section-title-bg;
68
- border: $section-border-size $section-border-style $section-border-color;
69
- }
70
- }
71
-
72
- // We use this mixin to create the styles for sections as accordions.
73
- @mixin section($section-type:accordion) {
74
-
75
- // Accordion styles
76
- @if $section-type == accordion {
77
-
78
- border-top: $section-border-size $section-border-style $section-border-color;
79
- position: relative;
80
-
81
- .title {
82
- top: 0;
83
- cursor: pointer;
84
- width: 100%;
85
- margin: 0;
86
- background-color: $section-title-bg;
87
-
88
- a {
89
- padding: $section-padding;
90
- display: inline-block;
91
- color: $section-title-color;
92
- font-size: emCalc(14px);
93
- white-space: nowrap;
94
- width: 100%;
95
- }
96
- &:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
97
- }
98
-
99
- .content {
100
- display: none;
101
- padding: $section-padding;
102
- background-color: $section-content-bg;
103
-
104
- &>*:last-child { margin-bottom: 0; }
105
- &>*:first-child { padding-top: 0; }
106
- &>*:last-child { padding-bottom: 0; }
107
- }
108
-
109
-
110
- &.active {
111
- & > .content { display: block; }
112
- & > .title { background: $section-title-bg-active; }
113
- }
114
-
115
-
116
- }
117
-
118
- // Tab Styles
119
- @else if $section-type == tabs {
120
- padding-top: 0;
121
- border: 0;
122
- position: static;
123
-
124
- .title {
125
- width: auto;
126
- border: $section-border-size $section-border-style $section-border-color;
127
- border-#{$opposite-direction}: 0;
128
- border-bottom: 0;
129
- position: absolute;
130
- z-index: 1;
131
-
132
- a { width: 100%; }
133
- }
134
- &:last-child .title { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
135
-
136
- .content {
137
- border: $section-border-size $section-border-style $section-border-color;
138
- position: absolute;
139
- z-index: 10;
140
- top: -1px;
141
- }
142
-
143
- &.active {
144
-
145
- & > .title {
146
- background-color: $section-title-bg-active-tabs;
147
- z-index: 11;
148
- border-bottom: 0;
149
- }
150
- & > .content { position: relative; }
151
- }
152
- }
153
-
154
- @else if $section-type == vertical-tabs {
155
- padding-top: 0 !important;
156
- border: 0;
157
- position: static;
158
- background-color: $section-title-bg;
159
-
160
- .title {
161
- position: absolute;
162
- border-top: $section-border-size $section-border-style $section-border-color;
163
- width: $section-vertical-tabs-title-width;
164
- }
165
-
166
- &:first-child .title { border-top: 0; }
167
-
168
- .content {
169
- // Display all content blocks to account for the scrollbar
170
- // in the outerWidth measurements. JavaScript will toggle the active tabs.
171
- display: block;
172
-
173
- position: relative;
174
- left: $section-vertical-tabs-title-width;
175
- border-left: $section-border-size $section-border-style $section-border-color;
176
- z-index: 10;
177
- }
178
-
179
- &.active {
180
-
181
- & > .title {
182
- background-color: $section-title-bg-active-tabs;
183
- width: $section-vertical-tabs-title-width + emCalc(2px); // Cover the content's left border
184
- border-right: 0;
185
- z-index: 11; // Put active title on top of the content
186
- }
187
-
188
- &:last-child .title {
189
- border-bottom: $section-border-size $section-border-style $section-border-color;
190
- }
191
- }
192
- }
193
-
194
- // Vertical Nav Styles
195
- @else if $section-type == vertical-nav {
196
-
197
- padding-top: 0 !important;
198
-
199
- .title a { display: block; width: 100%; }
200
-
201
- .content { display: none; }
202
-
203
- &.active {
204
- & > .content {
205
- display: block;
206
- position: absolute;
207
- #{$default-float}: 100%;
208
- top: -1px;
209
- z-index: 999;
210
- min-width: $section-vertical-nav-min-width;
211
- border: $section-border-size $section-border-style $section-border-color;
212
- }
213
- }
214
- }
215
-
216
- // Horizontal Nav Styles
217
- @else if $section-type == horizontal-nav {
218
- padding-top: 0;
219
- border: 0;
220
- position: static;
221
-
222
- .title {
223
- width: auto;
224
- border: $section-border-size $section-border-style $section-border-color;
225
- border-#{$default-float}: 0;
226
- top: -1px;
227
- position: absolute;
228
- z-index: 1;
229
-
230
- a { width: 100%; }
231
- }
232
-
233
- .content { display: none; }
234
-
235
- &.active {
236
- & > .content {
237
- display: block;
238
- position: absolute;
239
- z-index: 999;
240
- #{$default-float}: 0;
241
- top: -2px;
242
- min-width: $section-vertical-nav-min-width;
243
- border: $section-border-size $section-border-style $section-border-color;
244
- }
245
- }
246
- }
247
- }
248
-
249
-
250
- @if $include-html-section-classes != false {
251
-
252
- /* Sections */
253
- .section-container, .section-container.auto {
254
- @include section-container;
255
-
256
- &>section,
257
- &>.section {
258
- @include section;
259
- }
260
- }
261
-
262
- .section-container.tabs {
263
- @include section-container(false, tabs);
264
-
265
- &>section,
266
- &>.section { @include section(tabs); }
267
- }
268
-
269
- @media #{$small} {
270
-
271
- .section-container.auto {
272
- @include section-container(false, tabs);
273
-
274
- &>section,
275
- &>.section { @include section(tabs); }
276
- }
277
- .section-container.accordion .section {
278
- padding-top: 0 !important;
279
- }
280
-
281
- .section-container.vertical-tabs {
282
- @include section-container(false, vertical-tabs);
283
-
284
- section,
285
- .section { @include section(vertical-tabs); }
286
- }
287
-
288
- .section-container.vertical-nav {
289
- @include section-container(false);
290
-
291
- &>section,
292
- &>.section { @include section(vertical-nav); }
293
- }
294
-
295
- .section-container.horizontal-nav {
296
- @include section-container(false, horizontal-nav);
297
-
298
- &>section,
299
- &>.section { @include section(horizontal-nav); }
300
- }
301
- }
302
-
303
- }
@@ -1,68 +0,0 @@
1
- //
2
- // Side Nav Variables
3
- //
4
-
5
- // We use this to control padding.
6
- $side-nav-padding: emCalc(14px) 0 !default;
7
-
8
- // We use these to control list styles.
9
- $side-nav-list-type: none !default;
10
- $side-nav-list-position: inside !default;
11
- $side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
12
-
13
- // We use these to control link styles.
14
- $side-nav-link-color: $primary-color !default;
15
- $side-nav-link-color-active: lighten(#000, 30%) !default;
16
- $side-nav-font-size: emCalc(14px) !default;
17
- $side-nav-font-weight: bold !default;
18
-
19
- // We use these to control border styles
20
- $side-nav-divider-size: 1px !default;
21
- $side-nav-divider-style: solid !default;
22
- $side-nav-divider-color: darken(#fff, 10%) !default;
23
-
24
-
25
- //
26
- // Side Nav Mixins
27
- //
28
-
29
-
30
- // We use this to style the side-nav
31
- @mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
32
- display: block;
33
- margin: 0;
34
- padding: $side-nav-padding;
35
- list-style-type: $side-nav-list-type;
36
- list-style-position: $side-nav-list-position;
37
-
38
- li {
39
- margin: $side-nav-list-margin;
40
- font-size: $font-size;
41
-
42
- a {
43
- display: block;
44
- color: $link-color;
45
- }
46
-
47
- &.active a {
48
- color: $side-nav-link-color-active;
49
- font-weight: $side-nav-font-weight;
50
- }
51
-
52
- &.divider {
53
- border-top: $side-nav-divider-size $side-nav-divider-style;
54
- height: 0;
55
- padding: 0;
56
- list-style: none;
57
- border-top-color: $divider-color;
58
- }
59
- }
60
- }
61
-
62
-
63
- @if $include-html-nav-classes != false {
64
-
65
- /* Side Nav */
66
- .side-nav { @include side-nav; }
67
-
68
- }
@@ -1,166 +0,0 @@
1
- //
2
- // Split Button Variables
3
- //
4
-
5
- // We use these to control different shared styles for Split Buttons
6
- $split-button-function-factor: 15% !default;
7
- $split-button-pip-color: #fff !default;
8
- $split-button-pip-color-alt: #333 !default;
9
- $split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
10
-
11
- // We use these to control tiny split buttons
12
- $split-button-padding-tny: $button-tny * 9 !default;
13
- $split-button-span-width-tny: $button-tny * 6.5 !default;
14
- $split-button-pip-size-tny: $button-tny !default;
15
- $split-button-pip-top-tny: $button-tny * 2 !default;
16
- $split-button-pip-default-float-tny: emCalc(-5px) !default;
17
-
18
- // We use these to control small split buttons
19
- $split-button-padding-sml: $button-sml * 7 !default;
20
- $split-button-span-width-sml: $button-sml * 5 !default;
21
- $split-button-pip-size-sml: $button-sml !default;
22
- $split-button-pip-top-sml: $button-sml * 1.5 !default;
23
- $split-button-pip-default-float-sml: emCalc(-9px) !default;
24
-
25
- // We use these to control medium split buttons
26
- $split-button-padding-med: $button-med * 6.4 !default;
27
- $split-button-span-width-med: $button-med * 4 !default;
28
- $split-button-pip-size-med: $button-med - emCalc(3px) !default;
29
- $split-button-pip-top-med: $button-med * 1.5 !default;
30
- $split-button-pip-default-float-med: emCalc(-9px) !default;
31
-
32
- // We use these to control large split buttons
33
- $split-button-padding-lrg: $button-lrg * 6 !default;
34
- $split-button-span-width-lrg: $button-lrg * 3.75 !default;
35
- $split-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
36
- $split-button-pip-top-lrg: $button-lrg + emCalc(5px) !default;
37
- $split-button-pip-default-float-lrg: emCalc(-9px) !default;
38
-
39
-
40
- //
41
- // Split Button Mixin
42
- //
43
-
44
- // We use this mixin to create split buttons that build upon the button mixins
45
- @mixin split-button($padding:medium, $pip-color:$split-button-pip-color, $span-border:$primary-color, $base-style:true) {
46
-
47
- // With this, we can control whether or not the base styles come through.
48
- @if $base-style {
49
- position: relative;
50
-
51
- // Styling for the split arrow clickable area
52
- span {
53
- display: block;
54
- height: 100%;
55
- position: absolute;
56
- #{$opposite-direction}: 0;
57
- top: 0;
58
- border-#{$default-float}: solid 1px;
59
-
60
- // Building the triangle pip indicator
61
- &:before {
62
- position: absolute;
63
- content: "";
64
- width: 0;
65
- height: 0;
66
- display: block;
67
- border-style: inset;
68
-
69
- #{$default-float}: 50%;
70
- }
71
-
72
- &:active { background-color: $split-button-active-bg-tint; }
73
- }
74
- }
75
-
76
- // Control the border color for the span area of the split button
77
- @if $span-border {
78
- span {
79
- border-#{$default-float}-color: darken($span-border, $split-button-function-factor);
80
- }
81
- }
82
-
83
- // Style of the button and clickable area for tiny sizes
84
- @if $padding == tiny {
85
- padding-#{$opposite-direction}: $split-button-padding-tny;
86
-
87
- span { width: $split-button-span-width-tny;
88
- &:before {
89
- border-top-style: solid;
90
- border-width: $split-button-pip-size-tny;
91
- top: $split-button-pip-top-tny;
92
- margin-#{$default-float}: $split-button-pip-default-float-tny;
93
- }
94
- }
95
- }
96
-
97
- // Style of the button and clickable area for small sizes
98
- @else if $padding == small {
99
- padding-#{$opposite-direction}: $split-button-padding-sml;
100
-
101
- span { width: $split-button-span-width-sml;
102
- &:before {
103
- border-top-style: solid;
104
- border-width: $split-button-pip-size-sml;
105
- top: $split-button-pip-top-sml;
106
- margin-#{$default-float}: $split-button-pip-default-float-sml;
107
- }
108
- }
109
- }
110
-
111
- // Style of the button and clickable area for default (medium) sizes
112
- @else if $padding == medium {
113
- padding-#{$opposite-direction}: $split-button-padding-med;
114
-
115
- span { width: $split-button-span-width-med;
116
- &:before {
117
- border-top-style: solid;
118
- border-width: $split-button-pip-size-med;
119
- top: $split-button-pip-top-med;
120
- margin-#{$default-float}: $split-button-pip-default-float-med;
121
- }
122
- }
123
- }
124
-
125
- // Style of the button and clickable area for large sizes
126
- @else if $padding == large {
127
- padding-#{$opposite-direction}: $split-button-padding-lrg;
128
-
129
- span { width: $split-button-span-width-lrg;
130
- &:before {
131
- border-top-style: solid;
132
- border-width: $split-button-pip-size-lrg;
133
- top: $split-button-pip-top-lrg;
134
- margin-#{$default-float}: $split-button-pip-default-float-lrg;
135
- }
136
- }
137
- }
138
-
139
- // Control the color of the triangle pip
140
- @if $pip-color {
141
- span:before { border-color: $pip-color transparent transparent transparent; }
142
- }
143
- }
144
-
145
-
146
- @if $include-html-button-classes != false {
147
-
148
- /* Split Buttons */
149
- .split.button { @include split-button;
150
-
151
- &.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
152
- &.alert { @include split-button(false, false, $alert-color, false); }
153
- &.success { @include split-button(false, false, $success-color, false); }
154
-
155
- &.tiny { @include split-button(tiny, false, false, false); }
156
- &.small { @include split-button(small, false, false, false); }
157
- &.large { @include split-button(large, false, false, false); }
158
- &.expand { padding-left: 2em; }
159
-
160
- &.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
161
-
162
- &.radius span { @include side-radius($opposite-direction, $global-radius); }
163
- &.round span { @include side-radius($opposite-direction, 1000px); }
164
- }
165
-
166
- }
@@ -1,67 +0,0 @@
1
- //
2
- // Sub Nav Variables
3
- //
4
-
5
- // We use these to control margin and padding
6
- $sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
7
- $sub-nav-list-padding-top: emCalc(4px) !default;
8
-
9
- // We use this to control the definition
10
- $sub-nav-font-size: emCalc(14px) !default;
11
- $sub-nav-font-color: #999 !default;
12
- $sub-nav-font-weight: normal !default;
13
- $sub-nav-text-decoration: none !default;
14
- $sub-nav-border-radius: 1000px !default;
15
-
16
- // We use these to control the active item styles
17
- $sub-nav-active-font-weight: bold !default;
18
- $sub-nav-active-bg: $primary-color !default;
19
- $sub-nav-active-color: #fff !default;
20
- $sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
21
- $sub-nav-active-cursor: default !default;
22
-
23
- //
24
- // Sub Nav Mixins
25
- //
26
-
27
- @mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
28
- display: block;
29
- width: auto;
30
- overflow: hidden;
31
- margin: $sub-nav-list-margin;
32
- padding-top: $sub-nav-list-padding-top;
33
- margin-#{$opposite-direction}: 0;
34
- margin-#{$default-float}: emCalc(-9px);
35
-
36
- dt,
37
- dd {
38
- float: $default-float;
39
- display: inline;
40
- margin-#{$default-float}: emCalc(9px);
41
- margin-bottom: emCalc(10px);
42
- font-weight: $sub-nav-font-weight;
43
- font-size: $font-size;
44
-
45
- a {
46
- color: $font-color;
47
- text-decoration: $sub-nav-text-decoration; }
48
-
49
- &.active a {
50
- @include radius($sub-nav-border-radius);
51
- font-weight: $sub-nav-active-font-weight;
52
- background: $active-bg;
53
- padding: $sub-nav-active-padding;
54
- cursor: $sub-nav-active-cursor;
55
- color: $sub-nav-active-color;
56
- }
57
- }
58
-
59
- }
60
-
61
-
62
- @if $include-html-nav-classes != false {
63
-
64
- /* Side Nav */
65
- .sub-nav { @include sub-nav; }
66
-
67
- }