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.
- checksums.yaml +8 -8
- data/demo/test/config.rb +26 -0
- data/lib/modularis/generators/install_generator.rb +1 -1
- data/lib/modularis/version.rb +1 -1
- data/templates/project/config.rb +32 -9
- metadata +3 -40
- data/scss/compagecss/components/_alert-boxes.scss +0 -106
- data/scss/compagecss/components/_block-grid.scss +0 -70
- data/scss/compagecss/components/_breadcrumbs.scss +0 -124
- data/scss/compagecss/components/_button-groups.scss +0 -88
- data/scss/compagecss/components/_buttons.scss +0 -226
- data/scss/compagecss/components/_clearing.scss +0 -217
- data/scss/compagecss/components/_custom-forms.scss +0 -246
- data/scss/compagecss/components/_dropdown-buttons.scss +0 -114
- data/scss/compagecss/components/_dropdown.scss +0 -149
- data/scss/compagecss/components/_flex-video.scss +0 -45
- data/scss/compagecss/components/_flexbox-grid.scss +0 -225
- data/scss/compagecss/components/_flip.scss +0 -105
- data/scss/compagecss/components/_forms.scss +0 -361
- data/scss/compagecss/components/_global.scss +0 -289
- data/scss/compagecss/components/_grid.scss +0 -184
- data/scss/compagecss/components/_inline-lists.scss +0 -52
- data/scss/compagecss/components/_joyride.scss +0 -210
- data/scss/compagecss/components/_keystrokes.scss +0 -56
- data/scss/compagecss/components/_labels.scss +0 -84
- data/scss/compagecss/components/_magellan.scss +0 -21
- data/scss/compagecss/components/_off-canvas.scss +0 -86
- data/scss/compagecss/components/_orbit.scss +0 -209
- data/scss/compagecss/components/_pagination.scss +0 -99
- data/scss/compagecss/components/_panels.scss +0 -76
- data/scss/compagecss/components/_pricing-tables.scss +0 -130
- data/scss/compagecss/components/_progress-bars.scss +0 -70
- data/scss/compagecss/components/_reveal.scss +0 -131
- data/scss/compagecss/components/_section.scss +0 -303
- data/scss/compagecss/components/_side-nav.scss +0 -68
- data/scss/compagecss/components/_split-buttons.scss +0 -166
- data/scss/compagecss/components/_sub-nav.scss +0 -67
- data/scss/compagecss/components/_switch.scss +0 -249
- data/scss/compagecss/components/_tables.scss +0 -80
- data/scss/compagecss/components/_thumbs.scss +0 -47
- data/scss/compagecss/components/_tooltips.scss +0 -113
- data/scss/compagecss/components/_top-bar.scss +0 -462
- data/scss/compagecss/components/_type.scss +0 -422
- data/scss/compagecss/components/_visibility.scss +0 -320
- /data/scss/compagecss/{_variables.scss → _settings.scss} +0 -0
@@ -1,361 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Form Variables
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use this to set the base for lots of form spacing and positioning styles
|
6
|
-
$form-spacing: emCalc(16px) !default;
|
7
|
-
|
8
|
-
// We use these to style the labels in different ways
|
9
|
-
$form-label-pointer: pointer !default;
|
10
|
-
$form-label-font-size: emCalc(14px) !default;
|
11
|
-
$form-label-font-weight: 500 !default;
|
12
|
-
$form-label-font-color: lighten(#000, 30%) !default;
|
13
|
-
$form-label-bottom-margin: emCalc(3px) !default;
|
14
|
-
$input-font-family: inherit !default;
|
15
|
-
$input-font-color: rgba(0,0,0,0.75) !default;
|
16
|
-
$input-font-size: emCalc(14px) !default;
|
17
|
-
$input-bg-color: #fff !default;
|
18
|
-
$input-focus-bg-color: darken(#fff, 2%) !default;
|
19
|
-
$input-border-color: darken(#fff, 20%) !default;
|
20
|
-
$input-focus-border-color: darken(#fff, 40%) !default;
|
21
|
-
$input-border-style: solid !default;
|
22
|
-
$input-border-width: 1px !default;
|
23
|
-
$input-disabled-bg: #ddd !default;
|
24
|
-
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
|
25
|
-
$input-include-glowing-effect: true !default;
|
26
|
-
|
27
|
-
// We use these to style the fieldset border and spacing.
|
28
|
-
$fieldset-border-style: solid !default;
|
29
|
-
$fieldset-border-width: 1px !default;
|
30
|
-
$fieldset-border-color: #ddd !default;
|
31
|
-
$fieldset-padding: emCalc(20px) !default;
|
32
|
-
$fieldset-margin: emCalc(18px) 0 !default;
|
33
|
-
|
34
|
-
// We use these to style the legends when you use them
|
35
|
-
$legend-bg: #fff !default;
|
36
|
-
$legend-font-weight: bold !default;
|
37
|
-
$legend-padding: 0 emCalc(3px) !default;
|
38
|
-
|
39
|
-
// We use these to style the prefix and postfix input elements
|
40
|
-
$input-prefix-bg: darken(#fff, 5%) !default;
|
41
|
-
$input-prefix-border-color: darken(#fff, 20%) !default;
|
42
|
-
$input-prefix-border-size: 1px !default;
|
43
|
-
$input-prefix-border-type: solid !default;
|
44
|
-
$input-prefix-overflow: hidden !default;
|
45
|
-
$input-prefix-font-color: #333 !default;
|
46
|
-
$input-prefix-font-color-alt: #fff !default;
|
47
|
-
|
48
|
-
// We use these to style the error states for inputs and labels
|
49
|
-
$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
|
50
|
-
$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
|
51
|
-
$input-error-message-font-size: emCalc(12px) !default;
|
52
|
-
$input-error-message-font-weight: bold !default;
|
53
|
-
$input-error-message-font-color: #fff !default;
|
54
|
-
$input-error-message-font-color-alt: #333 !default;
|
55
|
-
|
56
|
-
//We use this to style the glowing effect of inputs when focused
|
57
|
-
$glowing-effect-fade-time: 0.45s !default;
|
58
|
-
$glowing-effect-color: $input-focus-border-color !default;
|
59
|
-
|
60
|
-
//
|
61
|
-
// Form Mixins
|
62
|
-
//
|
63
|
-
|
64
|
-
// We use this mixin to give us form styles for rows inside of forms
|
65
|
-
@mixin form-row-base {
|
66
|
-
.row { margin: 0 ((-$form-spacing) / 2);
|
67
|
-
|
68
|
-
.column,
|
69
|
-
.columns { padding: 0 $form-spacing / 2; }
|
70
|
-
|
71
|
-
// Use this to collapse the margins of a form row
|
72
|
-
&.collapse { margin: 0;
|
73
|
-
|
74
|
-
.column,
|
75
|
-
.columns { padding: 0; }
|
76
|
-
|
77
|
-
}
|
78
|
-
}
|
79
|
-
input.column,
|
80
|
-
input.columns,
|
81
|
-
textarea.column,
|
82
|
-
textarea.columns { padding-#{$default-float}: $form-spacing / 2; }
|
83
|
-
}
|
84
|
-
|
85
|
-
// We use this mixin to give all basic form elements their style
|
86
|
-
@mixin form-element() {
|
87
|
-
background-color: $input-bg-color;
|
88
|
-
font-family: $input-font-family;
|
89
|
-
border: $input-border-width $input-border-style $input-border-color;
|
90
|
-
-webkit-box-shadow: $input-box-shadow;
|
91
|
-
box-shadow: $input-box-shadow;
|
92
|
-
color: $input-font-color;
|
93
|
-
display: block;
|
94
|
-
font-size: $input-font-size;
|
95
|
-
margin: 0 0 $form-spacing 0;
|
96
|
-
padding: $form-spacing / 2;
|
97
|
-
height: emCalc(13px) + ($form-spacing * 1.5);
|
98
|
-
width: 100%;
|
99
|
-
@include box-sizing(border-box);
|
100
|
-
@if $input-include-glowing-effect {
|
101
|
-
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
|
102
|
-
}
|
103
|
-
// Basic focus styles
|
104
|
-
&:focus {
|
105
|
-
background: $input-focus-bg-color;
|
106
|
-
border-color: $input-focus-border-color;
|
107
|
-
outline: none;
|
108
|
-
}
|
109
|
-
|
110
|
-
// Disabled background input background color
|
111
|
-
&[disabled] { background-color: $input-disabled-bg; }
|
112
|
-
}
|
113
|
-
|
114
|
-
// We use this mixin to create form labels
|
115
|
-
@mixin form-label($alignment:false, $base-style:true) {
|
116
|
-
|
117
|
-
// Control whether or not the base styles come through.
|
118
|
-
@if $base-style {
|
119
|
-
font-size: $form-label-font-size;
|
120
|
-
color: $form-label-font-color;
|
121
|
-
cursor: $form-label-pointer;
|
122
|
-
display: block;
|
123
|
-
font-weight: $form-label-font-weight;
|
124
|
-
margin-bottom: $form-label-bottom-margin;
|
125
|
-
}
|
126
|
-
|
127
|
-
// Alignment options
|
128
|
-
@if $alignment == right {
|
129
|
-
float: none;
|
130
|
-
text-align: right;
|
131
|
-
}
|
132
|
-
@else if $alignment == inline {
|
133
|
-
margin: 0 0 $form-spacing 0;
|
134
|
-
padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
|
135
|
-
}
|
136
|
-
}
|
137
|
-
|
138
|
-
// We use this mixin to create postfix/prefix form Labels
|
139
|
-
@mixin prefix-postfix-base {
|
140
|
-
display: block;
|
141
|
-
position: relative;
|
142
|
-
z-index: 2;
|
143
|
-
text-align: center;
|
144
|
-
width: 100%;
|
145
|
-
padding-top: 0;
|
146
|
-
padding-bottom: 0;
|
147
|
-
border-style: $input-prefix-border-type;
|
148
|
-
border-width: $input-prefix-border-size;
|
149
|
-
overflow: $input-prefix-overflow;
|
150
|
-
font-size: $form-label-font-size;
|
151
|
-
height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
152
|
-
line-height: ($form-label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
153
|
-
}
|
154
|
-
|
155
|
-
// We use this mixin to create prefix label styles
|
156
|
-
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
157
|
-
|
158
|
-
@if $bg {
|
159
|
-
$bg-lightness: lightness($bg);
|
160
|
-
background: $bg;
|
161
|
-
border-color: darken($bg, 10%);
|
162
|
-
border-#{$opposite-direction}: none;
|
163
|
-
|
164
|
-
// Control the font color based on background brightness
|
165
|
-
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
166
|
-
@else { color: $input-prefix-font-color-alt; }
|
167
|
-
}
|
168
|
-
|
169
|
-
@if $is-button {
|
170
|
-
padding-#{$default-float}: 0;
|
171
|
-
padding-#{$opposite-direction}: 0;
|
172
|
-
padding-top: 0;
|
173
|
-
padding-bottom: 0;
|
174
|
-
text-align: center;
|
175
|
-
line-height: emCalc(34px);
|
176
|
-
}
|
177
|
-
|
178
|
-
}
|
179
|
-
|
180
|
-
// We use this mixin to create postfix label styles
|
181
|
-
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
182
|
-
|
183
|
-
@if $bg {
|
184
|
-
$bg-lightness: lightness($bg);
|
185
|
-
background: $bg;
|
186
|
-
border-color: darken($bg, 15%);
|
187
|
-
border-#{$default-float}: none;
|
188
|
-
|
189
|
-
// Control the font color based on background brightness
|
190
|
-
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
191
|
-
@else { color: $input-prefix-font-color-alt; }
|
192
|
-
}
|
193
|
-
|
194
|
-
@if $is-button {
|
195
|
-
padding-#{$default-float}: 0;
|
196
|
-
padding-#{$opposite-direction}: 0;
|
197
|
-
padding-top: 0;
|
198
|
-
padding-bottom: 0;
|
199
|
-
text-align: center;
|
200
|
-
line-height: emCalc(34px);
|
201
|
-
}
|
202
|
-
|
203
|
-
}
|
204
|
-
|
205
|
-
// We use this mixin to style fieldsets
|
206
|
-
@mixin fieldset {
|
207
|
-
border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
|
208
|
-
padding: $fieldset-padding;
|
209
|
-
margin: $fieldset-margin;
|
210
|
-
|
211
|
-
// and legend styles
|
212
|
-
legend {
|
213
|
-
font-weight: $legend-font-weight;
|
214
|
-
background: $legend-bg;
|
215
|
-
padding: $legend-padding;
|
216
|
-
margin: 0;
|
217
|
-
margin-#{$default-float}: emCalc(-3px);
|
218
|
-
}
|
219
|
-
}
|
220
|
-
|
221
|
-
// We use this mixin to control border and background color of error inputs
|
222
|
-
@mixin form-error-color($color:$alert-color) {
|
223
|
-
border-color: $color;
|
224
|
-
background-color: rgba($color, 0.1);
|
225
|
-
|
226
|
-
// Go back to normal on focus
|
227
|
-
&:focus {
|
228
|
-
background: $input-focus-bg-color;
|
229
|
-
border-color: $input-focus-border-color;
|
230
|
-
}
|
231
|
-
}
|
232
|
-
|
233
|
-
// We use this simple mixin to style labels for error inputs
|
234
|
-
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
235
|
-
|
236
|
-
// We use this mixin to create error message styles
|
237
|
-
@mixin form-error-message($bg:$alert-color) {
|
238
|
-
display: block;
|
239
|
-
padding: $input-error-message-padding;
|
240
|
-
margin-top: $input-error-message-top;
|
241
|
-
margin-bottom: $form-spacing;
|
242
|
-
font-size: $input-error-message-font-size;
|
243
|
-
font-weight: $input-error-message-font-weight;
|
244
|
-
|
245
|
-
// We can control the text color based on the brightness of the background.
|
246
|
-
$bg-lightness: lightness($bg);
|
247
|
-
background: $bg;
|
248
|
-
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
|
249
|
-
@else { color: $input-error-message-font-color-alt; }
|
250
|
-
}
|
251
|
-
|
252
|
-
// Only include these classes if the variable is true, otherwise they'll be left out.
|
253
|
-
@if $include-html-form-classes != false {
|
254
|
-
/* Standard Forms */
|
255
|
-
form { margin: 0 0 $form-spacing; }
|
256
|
-
|
257
|
-
/* Using forms within rows, we need to set some defaults */
|
258
|
-
form .row { @include form-row-base; }
|
259
|
-
|
260
|
-
/* Label Styles */
|
261
|
-
label { @include form-label;
|
262
|
-
&.right { @include form-label(right,false); }
|
263
|
-
&.inline { @include form-label(inline,false); }
|
264
|
-
}
|
265
|
-
|
266
|
-
/* Attach elements to the beginning or end of an input */
|
267
|
-
.prefix,
|
268
|
-
.postfix { @include prefix-postfix-base; }
|
269
|
-
|
270
|
-
/* Adjust padding, alignment and radius if pre/post element is a button */
|
271
|
-
.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
|
272
|
-
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
273
|
-
|
274
|
-
.prefix.button.radius { @include radius(0); @include side-radius(left, $button-radius); }
|
275
|
-
.postfix.button.radius { @include radius(0); @include side-radius(right, $button-radius); }
|
276
|
-
.prefix.button.round { @include radius(0); @include side-radius(left, $button-round); }
|
277
|
-
.postfix.button.round { @include radius(0); @include side-radius(right, $button-round); }
|
278
|
-
|
279
|
-
/* Separate prefix and postfix styles when on span so buttons keep their own */
|
280
|
-
span.prefix { @include prefix();
|
281
|
-
&.radius { @include radius(0); @include side-radius(left, $global-radius); }
|
282
|
-
}
|
283
|
-
span.postfix { @include postfix();
|
284
|
-
&.radius { @include radius(0); @include side-radius(right, $global-radius); }
|
285
|
-
}
|
286
|
-
|
287
|
-
/* Input groups will automatically style first and last elements of the group */
|
288
|
-
.input-group {
|
289
|
-
&.radius {
|
290
|
-
&>*:first-child, &>*:first-child * {
|
291
|
-
@include side-radius($default-float, $global-radius);
|
292
|
-
}
|
293
|
-
&>*:last-child, &>*:last-child * {
|
294
|
-
@include side-radius($opposite-direction, $global-radius);
|
295
|
-
}
|
296
|
-
}
|
297
|
-
&.round {
|
298
|
-
&>*:first-child, &>*:first-child * {
|
299
|
-
@include side-radius($default-float, $button-round);
|
300
|
-
}
|
301
|
-
&>*:last-child, &>*:last-child * {
|
302
|
-
@include side-radius($opposite-direction, $button-round);
|
303
|
-
}
|
304
|
-
}
|
305
|
-
}
|
306
|
-
|
307
|
-
/* We use this to get basic styling on all basic form elements */
|
308
|
-
input[type="text"],
|
309
|
-
input[type="password"],
|
310
|
-
input[type="date"],
|
311
|
-
input[type="datetime"],
|
312
|
-
input[type="datetime-local"],
|
313
|
-
input[type="month"],
|
314
|
-
input[type="week"],
|
315
|
-
input[type="email"],
|
316
|
-
input[type="number"],
|
317
|
-
input[type="search"],
|
318
|
-
input[type="tel"],
|
319
|
-
input[type="time"],
|
320
|
-
input[type="url"],
|
321
|
-
textarea {
|
322
|
-
@include form-element;
|
323
|
-
@if not $input-include-glowing-effect {
|
324
|
-
@include single-transition(all, 0.15s, linear);
|
325
|
-
}
|
326
|
-
}
|
327
|
-
|
328
|
-
/* Adjust margin for form elements below */
|
329
|
-
input[type="file"],
|
330
|
-
input[type="checkbox"],
|
331
|
-
input[type="radio"],
|
332
|
-
select {
|
333
|
-
margin: 0 0 $form-spacing 0;
|
334
|
-
}
|
335
|
-
|
336
|
-
/* Normalize file input width */
|
337
|
-
input[type="file"] {
|
338
|
-
width:100%;
|
339
|
-
}
|
340
|
-
|
341
|
-
/* We add basic fieldset styling */
|
342
|
-
fieldset {
|
343
|
-
@include fieldset;
|
344
|
-
}
|
345
|
-
|
346
|
-
/* Error Handling */
|
347
|
-
.error input,
|
348
|
-
input.error,
|
349
|
-
.error textarea,
|
350
|
-
textarea.error {
|
351
|
-
@include form-error-color;
|
352
|
-
}
|
353
|
-
|
354
|
-
.error label,
|
355
|
-
label.error { @include form-label-error-color; }
|
356
|
-
|
357
|
-
.error small,
|
358
|
-
small.error {
|
359
|
-
@include form-error-message;
|
360
|
-
}
|
361
|
-
}
|
@@ -1,289 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Global Modularis Mixins
|
3
|
-
//
|
4
|
-
|
5
|
-
// We use this to control border radius.
|
6
|
-
@mixin radius($radius:$global-radius) {
|
7
|
-
@if $radius {
|
8
|
-
-webkit-border-radius: $radius;
|
9
|
-
border-radius: $radius;
|
10
|
-
}
|
11
|
-
}
|
12
|
-
|
13
|
-
// We use this to create equal side border radius on elements.
|
14
|
-
@mixin side-radius($side, $radius) {
|
15
|
-
@if $side == left {
|
16
|
-
-moz-border-radius-bottomleft: $radius;
|
17
|
-
-moz-border-radius-topleft: $radius;
|
18
|
-
-webkit-border-bottom-left-radius: $radius;
|
19
|
-
-webkit-border-top-left-radius: $radius;
|
20
|
-
border-bottom-left-radius: $radius;
|
21
|
-
border-top-left-radius: $radius;
|
22
|
-
}
|
23
|
-
@else if $side == right {
|
24
|
-
-moz-border-radius-topright: $radius;
|
25
|
-
-moz-border-radius-bottomright: $radius;
|
26
|
-
-webkit-border-top-right-radius: $radius;
|
27
|
-
-webkit-border-bottom-right-radius: $radius;
|
28
|
-
border-top-right-radius: $radius;
|
29
|
-
border-bottom-right-radius: $radius;
|
30
|
-
}
|
31
|
-
@else if $side == top {
|
32
|
-
-moz-border-radius-topright: $radius;
|
33
|
-
-moz-border-radius-topleft: $radius;
|
34
|
-
-webkit-border-top-right-radius: $radius;
|
35
|
-
-webkit-border-top-left-radius: $radius;
|
36
|
-
border-top-right-radius: $radius;
|
37
|
-
border-top-left-radius: $radius;
|
38
|
-
}
|
39
|
-
@else if $side == bottom {
|
40
|
-
-moz-border-radius-bottomright: $radius;
|
41
|
-
-moz-border-radius-bottomleft: $radius;
|
42
|
-
-webkit-border-bottom-right-radius: $radius;
|
43
|
-
-webkit-border-bottom-left-radius: $radius;
|
44
|
-
border-bottom-right-radius: $radius;
|
45
|
-
border-bottom-left-radius: $radius;
|
46
|
-
}
|
47
|
-
}
|
48
|
-
|
49
|
-
// We can control whether or not we have inset shadows edges.
|
50
|
-
@mixin inset-shadow($active:true) {
|
51
|
-
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
52
|
-
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
53
|
-
|
54
|
-
@if $active { &:active {
|
55
|
-
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
56
|
-
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
57
|
-
}
|
58
|
-
|
59
|
-
// We use this to add transitions to elements
|
60
|
-
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
61
|
-
-webkit-transition: $property $speed $ease;
|
62
|
-
-moz-transition: $property $speed $ease;
|
63
|
-
transition: $property $speed $ease;
|
64
|
-
}
|
65
|
-
|
66
|
-
// We use this to add box-sizing across browser prefixes
|
67
|
-
@mixin box-sizing($type:border-box) {
|
68
|
-
-moz-box-sizing: $type;
|
69
|
-
-webkit-box-sizing: $type;
|
70
|
-
box-sizing: $type;
|
71
|
-
}
|
72
|
-
|
73
|
-
// We use this to create equilateral triangles
|
74
|
-
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
75
|
-
content: "";
|
76
|
-
display: block;
|
77
|
-
width: 0;
|
78
|
-
height: 0;
|
79
|
-
border: inset $triangle-size;
|
80
|
-
@if ($triangle-direction == top) {
|
81
|
-
border-color: $triangle-color transparent transparent transparent;
|
82
|
-
border-top-style: solid;
|
83
|
-
}
|
84
|
-
@if ($triangle-direction == bottom) {
|
85
|
-
border-color: transparent transparent $triangle-color transparent;
|
86
|
-
border-bottom-style: solid;
|
87
|
-
}
|
88
|
-
@if ($triangle-direction == left) {
|
89
|
-
border-color: transparent transparent transparent $triangle-color;
|
90
|
-
border-left-style: solid;
|
91
|
-
}
|
92
|
-
@if ($triangle-direction == right) {
|
93
|
-
border-color: transparent $triangle-color transparent transparent;
|
94
|
-
border-right-style: solid;
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
// We use this to do clear floats
|
99
|
-
@mixin clearfix() {
|
100
|
-
*zoom:1;
|
101
|
-
&:before, &:after { content: " "; display: table; }
|
102
|
-
&:after { clear: both; }
|
103
|
-
}
|
104
|
-
|
105
|
-
|
106
|
-
// We use this to add a glowing effect to block elements
|
107
|
-
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
|
108
|
-
-webkit-transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
|
109
|
-
-moz-transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
|
110
|
-
transition: box-shadow, $fade-time, -moz-box-shadow, $fade-time, -webkit-box-shadow, $fade-time, border-color, $fade-time, ease-in-out;
|
111
|
-
|
112
|
-
&:#{$selector} {
|
113
|
-
-webkit-box-shadow: 0 0 5px $glowing-effect-color;
|
114
|
-
-moz-box-shadow: 0 0 5px $glowing-effect-color;
|
115
|
-
box-shadow: 0 0 5px $glowing-effect-color;
|
116
|
-
border-color: $glowing-effect-color;
|
117
|
-
}
|
118
|
-
}
|
119
|
-
|
120
|
-
//
|
121
|
-
// Modularis Variables
|
122
|
-
//
|
123
|
-
|
124
|
-
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
125
|
-
// for compatibility with brower-based text zoom or user-set defaults.
|
126
|
-
|
127
|
-
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
|
128
|
-
// If you want your base font-size to be different and not have it effect the grid breakpoints,
|
129
|
-
// set $em-base to $base-font-size and make sure $base-font-size is a px value.
|
130
|
-
$base-font-size: 100% !default;
|
131
|
-
|
132
|
-
// $base-line-height is 24px while $base-font-size is 16px
|
133
|
-
$base-line-height: 150% !default;
|
134
|
-
|
135
|
-
// This is the default html and body font-size for the base em value.
|
136
|
-
$em-base: 16px !default;
|
137
|
-
|
138
|
-
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
|
139
|
-
@function emCalc($pxWidth) {
|
140
|
-
@return $pxWidth / $em-base * 1em;
|
141
|
-
}
|
142
|
-
|
143
|
-
// Maybe you want to create rems and pixels
|
144
|
-
// @function remCalc($pxWidth) {
|
145
|
-
// @return $pxWidth / $em-base * 1rem;
|
146
|
-
// }
|
147
|
-
|
148
|
-
// We use these to control various global styles
|
149
|
-
$body-bg: #fff !default;
|
150
|
-
$body-font-color: #222 !default;
|
151
|
-
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
152
|
-
$body-font-weight: normal !default;
|
153
|
-
$body-font-style: normal !default;
|
154
|
-
|
155
|
-
// We use this to control font-smoothing
|
156
|
-
$font-smoothing: antialiased !default;
|
157
|
-
|
158
|
-
// We use these to control text direction settings
|
159
|
-
$text-direction: ltr !default;
|
160
|
-
|
161
|
-
// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
|
162
|
-
$default-float: left !default;
|
163
|
-
$opposite-direction: right !default;
|
164
|
-
@if $text-direction == ltr {
|
165
|
-
$default-float: left;
|
166
|
-
$opposite-direction: right;
|
167
|
-
} @else {
|
168
|
-
$default-float: right;
|
169
|
-
$opposite-direction: left;
|
170
|
-
}
|
171
|
-
|
172
|
-
// We use these as default colors throughout
|
173
|
-
$primary-color: #2ba6cb !default;
|
174
|
-
$secondary-color: #e9e9e9 !default;
|
175
|
-
$alert-color: #c60f13 !default;
|
176
|
-
$success-color: #5da423 !default;
|
177
|
-
|
178
|
-
// We use these to make sure border radius matches unless we want it different.
|
179
|
-
$global-radius: 3px !default;
|
180
|
-
$global-rounded: 1000px !default;
|
181
|
-
|
182
|
-
// We use these to control inset shadow shiny edges and depressions.
|
183
|
-
$shiny-edge-size: 0 1px 0 !default;
|
184
|
-
$shiny-edge-color: rgba(#fff, .5) !default;
|
185
|
-
$shiny-edge-active-color: rgba(#000, .2) !default;
|
186
|
-
|
187
|
-
// We use this to control whether or not CSS classes come through in the gem files.
|
188
|
-
$include-html-classes: true !default;
|
189
|
-
$include-print-styles: true !default;
|
190
|
-
$include-html-grid-classes: $include-html-classes !default;
|
191
|
-
$include-html-visibility-classes: $include-html-classes !default;
|
192
|
-
$include-html-button-classes: $include-html-classes !default;
|
193
|
-
$include-html-form-classes: $include-html-classes !default;
|
194
|
-
$include-html-media-classes: $include-html-classes !default;
|
195
|
-
$include-html-section-classes: $include-html-classes !default;
|
196
|
-
$include-html-reveal-classes: $include-html-classes !default;
|
197
|
-
$include-html-alert-classes: $include-html-classes !default;
|
198
|
-
$include-html-nav-classes: $include-html-classes !default;
|
199
|
-
$include-html-label-classes: $include-html-classes !default;
|
200
|
-
$include-html-panel-classes: $include-html-classes !default;
|
201
|
-
$include-html-pricing-classes: $include-html-classes !default;
|
202
|
-
$include-html-progress-classes: $include-html-classes !default;
|
203
|
-
$include-html-magellan-classes: $include-html-classes !default;
|
204
|
-
|
205
|
-
// Media Queries
|
206
|
-
$small-screen: emCalc(768px) !default;
|
207
|
-
$medium-screen: emCalc(1280px) !default;
|
208
|
-
$large-screen: emCalc(1440px) !default;
|
209
|
-
|
210
|
-
$screen: "only screen" !default;
|
211
|
-
$small: "only screen and (min-width:"#{$small-screen}")" !default;
|
212
|
-
$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
|
213
|
-
$large: "only screen and (min-width:"#{$large-screen}")" !default;
|
214
|
-
$landscape: "only screen and (orientation: landscape)" !default;
|
215
|
-
$portrait: "only screen and (orientation: portrait)" !default;
|
216
|
-
|
217
|
-
// Set box-sizing globally to handle padding and border widths
|
218
|
-
*,
|
219
|
-
*:before,
|
220
|
-
*:after {
|
221
|
-
@include box-sizing(border-box);
|
222
|
-
}
|
223
|
-
|
224
|
-
html,
|
225
|
-
body { font-size: $base-font-size; }
|
226
|
-
|
227
|
-
// Default body styles
|
228
|
-
body {
|
229
|
-
background: $body-bg;
|
230
|
-
color: $body-font-color;
|
231
|
-
padding: 0;
|
232
|
-
margin: 0;
|
233
|
-
font-family: $body-font-family;
|
234
|
-
font-weight: $body-font-weight;
|
235
|
-
font-style: $body-font-style;
|
236
|
-
line-height: 1; // Set to $base-line-height to take on browser default of 150%
|
237
|
-
position: relative;
|
238
|
-
}
|
239
|
-
|
240
|
-
// Override outline from normalize, we don't like it
|
241
|
-
a:focus { outline: none; }
|
242
|
-
|
243
|
-
// Grid Defaults to get images and embeds to work properly
|
244
|
-
img,
|
245
|
-
object,
|
246
|
-
embed { max-width: 100%; height: auto; }
|
247
|
-
|
248
|
-
object,
|
249
|
-
embed { height: 100%; }
|
250
|
-
img { -ms-interpolation-mode: bicubic; }
|
251
|
-
|
252
|
-
#map_canvas,
|
253
|
-
.map_canvas {
|
254
|
-
img,
|
255
|
-
embed,
|
256
|
-
object { max-width: none !important;
|
257
|
-
}
|
258
|
-
}
|
259
|
-
|
260
|
-
// Miscellaneous useful HTML classes
|
261
|
-
.left { float: left !important; }
|
262
|
-
.right { float: right !important; }
|
263
|
-
.text-left { text-align: left !important; }
|
264
|
-
.text-right { text-align: right !important; }
|
265
|
-
.text-center { text-align: center !important; }
|
266
|
-
.text-justify { text-align: justify !important; }
|
267
|
-
.hide { display: none; }
|
268
|
-
|
269
|
-
// Font smoothing
|
270
|
-
// Antialiased font smoothing works best for light text on a dark background.
|
271
|
-
// Apply to single elements instead of globally to body.
|
272
|
-
// Note this only applies to webkit-based desktop browsers on the Mac.
|
273
|
-
.antialiased { -webkit-font-smoothing: antialiased; }
|
274
|
-
|
275
|
-
// Get rid of gap under images by making them display: inline-block; by default
|
276
|
-
img {
|
277
|
-
display: inline-block;
|
278
|
-
vertical-align: middle;
|
279
|
-
}
|
280
|
-
|
281
|
-
//
|
282
|
-
// Global resets for forms
|
283
|
-
//
|
284
|
-
|
285
|
-
// Make sure textarea takes on height automatically
|
286
|
-
textarea { height: auto; min-height: 50px; }
|
287
|
-
|
288
|
-
// Make select elements 100% width by default
|
289
|
-
select { width: 100%; }
|