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,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%; }