mui-sass 0.2.10 → 0.3.0

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.
@@ -2,60 +2,32 @@
2
2
  * MUI Appbar
3
3
  */
4
4
 
5
+ $x-mobile-breakpoint: 480px;
6
+
5
7
  // ============================================================================
6
8
  // HELPER CLASSES
7
9
  // ============================================================================
8
10
 
9
- .mui--appbar-height {
10
- height: $mui-appbar-height-xs-portrait;
11
-
12
- // mobile landscape
13
- @media (orientation: landscape) and (max-height: $mui-screen-xs) {
14
- height: $mui-appbar-height-xs-landscape;
15
- }
16
-
17
- @media (min-width: $mui-screen-xs) {
18
- height: $mui-appbar-height;
19
- }
20
- }
21
-
22
- .mui--appbar-min-height {
23
- min-height: $mui-appbar-height-xs-portrait;
24
-
25
- // mobile landscape
26
- @media (orientation: landscape) and (max-height: $mui-screen-xs) {
27
- min-height: $mui-appbar-height-xs-landscape;
28
- }
29
-
30
- @media (min-width: $mui-screen-xs) {
31
- min-height: $mui-appbar-height;
32
- }
11
+ // mobile portrait
12
+ .mui--appbar-height { height: $mui-appbar-height-xs-portrait; }
13
+ .mui--appbar-min-height { min-height: $mui-appbar-height-xs-portrait; }
14
+ .mui--appbar-line-height { line-height: $mui-appbar-height-xs-portrait; }
15
+ .mui--appbar-top { top: $mui-appbar-height-xs-portrait; }
16
+
17
+ // mobile landscape
18
+ @media (orientation: landscape) and (max-height: $x-mobile-breakpoint) {
19
+ .mui--appbar-height { height: $mui-appbar-height-xs-landscape; }
20
+ .mui--appbar-min-height { min-height: $mui-appbar-height-xs-landscape; }
21
+ .mui--appbar-line-height { line-height: $mui-appbar-height-xs-landscape; }
22
+ .mui--appbar-top { top: $mui-appbar-height-xs-landscape; }
33
23
  }
34
24
 
35
- .mui--appbar-line-height {
36
- line-height: $mui-appbar-height-xs-portrait;
37
-
38
- // mobile landscape
39
- @media (orientation: landscape) and (max-height: $mui-screen-xs) {
40
- line-height: $mui-appbar-height-xs-landscape;
41
- }
42
-
43
- @media (min-width: $mui-screen-xs) {
44
- line-height: $mui-appbar-height;
45
- }
46
- }
47
-
48
- .mui--appbar-top {
49
- top: $mui-appbar-height-xs-portrait;
50
-
51
- // mobile landscape
52
- @media (orientation: landscape) and (max-height: $mui-screen-xs) {
53
- top: $mui-appbar-height-xs-landscape;
54
- }
55
-
56
- @media (min-width: $mui-screen-xs) {
57
- top: $mui-appbar-height;
58
- }
25
+ // all other screen sizes
26
+ @media (min-width: $x-mobile-breakpoint) {
27
+ .mui--appbar-height { height: $mui-appbar-height; }
28
+ .mui--appbar-min-height { min-height: $mui-appbar-height; }
29
+ .mui--appbar-line-height { line-height: $mui-appbar-height; }
30
+ .mui--appbar-top { top: $mui-appbar-height; }
59
31
  }
60
32
 
61
33
 
@@ -73,7 +73,7 @@ input[type="checkbox"]:disabled {
73
73
 
74
74
  > textarea {
75
75
  padding-top: 5px;
76
- min-height: $mui-textarea-height;
76
+ //min-height: $mui-textarea-height;
77
77
  }
78
78
 
79
79
  > input,
@@ -153,7 +153,6 @@ input[type="checkbox"]:disabled {
153
153
  border: none;
154
154
  border-bottom: 1px solid $mui-input-border-color;
155
155
  outline: none;
156
- height: $mui-input-height;
157
156
  width: 100%;
158
157
  font-size: $mui-input-font-size;
159
158
  padding: 0;
@@ -181,8 +180,24 @@ input[type="checkbox"]:disabled {
181
180
  }
182
181
  }
183
182
 
183
+ .mui-textfield > input {
184
+ height: $mui-input-height;
185
+
186
+ // Compensate for height change on focus
187
+ &:focus {
188
+ height: $mui-input-height + 1px;
189
+ margin-bottom: -1px;
190
+ }
191
+ }
192
+
184
193
  .mui-textfield > textarea {
185
- height: auto; // Reset height for <textarea>s
194
+ //height: auto; // Reset height for <textarea>s
195
+ min-height: $mui-textarea-height;
196
+
197
+ // Compensate for height change on focus
198
+ &[rows]:not([rows="2"]):focus {
199
+ margin-bottom: -1px;
200
+ }
186
201
  }
187
202
 
188
203
  .mui-textfield > input:focus {
@@ -359,7 +374,7 @@ input[type="checkbox"]:disabled {
359
374
  background-color: mui-color('grey', '300');
360
375
  }
361
376
 
362
- &[selected] {
377
+ &.mui--is-selected {
363
378
  background-color: mui-color('grey', '200');
364
379
  }
365
380
  }
@@ -416,8 +431,8 @@ input[type="checkbox"]:disabled {
416
431
 
417
432
  .mui-textfield > input:invalid:not(:focus),
418
433
  .mui-textfield > textarea:invalid:not(:focus),
419
- .mui-textfield--invalid > input:not(:focus),
420
- .mui-textfield--invalid > textarea:not(:focus) {
434
+ .mui-textfield > input:not(:focus).mui--is-invalid,
435
+ .mui-textfield > textarea:not(:focus).mui--is-invalid {
421
436
  &:not(:required),
422
437
  &:required.mui--is-not-empty,
423
438
  &:required.mui--is-empty.mui--is-dirty,
@@ -430,7 +445,7 @@ input[type="checkbox"]:disabled {
430
445
 
431
446
  // Treat <input>'s different from <textarea>'s
432
447
  .mui-textfield > input:invalid:not(:focus),
433
- .mui-textfield--invalid > input:not(:focus) {
448
+ .mui-textfield > input:not(:focus).mui--is-invalid {
434
449
  &:not(:required),
435
450
  &:required.mui--is-not-empty,
436
451
  &:required.mui--is-empty.mui--is-dirty,
@@ -443,8 +458,8 @@ input[type="checkbox"]:disabled {
443
458
 
444
459
  .mui-textfield > input:invalid:not(:focus),
445
460
  .mui-textfield > textarea:invalid:not(:focus),
446
- .mui-textfield--invalid > input:not(:focus),
447
- .mui-textfield--invalid > textarea:not(:focus) {
461
+ .mui-textfield > input:not(:focus).mui--is-invalid,
462
+ .mui-textfield > textarea:not(:focus).mui--is-invalid {
448
463
  // Set label color to danger color
449
464
  &:not(:required),
450
465
  &:required.mui--is-not-empty,
@@ -458,8 +473,8 @@ input[type="checkbox"]:disabled {
458
473
 
459
474
  .mui-textfield:not(.mui-textfield--float-label) > input:invalid:not(:focus),
460
475
  .mui-textfield:not(.mui-textfield--float-label) > textarea:invalid:not(:focus),
461
- .mui-textfield--invalid:not(.mui-textfield--float-label) > input:not(:focus),
462
- .mui-textfield--invalid:not(.mui-textfield--float-label) > textarea:not(:focus) {
476
+ .mui-textfield:not(.mui-textfield--float-label) > input:not(:focus).mui--is-invalid,
477
+ .mui-textfield:not(.mui-textfield--float-label) > textarea:not(:focus).mui--is-invalid {
463
478
  // Set label color to danger color for dirty, empty fields
464
479
  &:required.mui--is-empty.mui--is-dirty ~ label {
465
480
  color: $mui-danger-color;
@@ -30,3 +30,8 @@
30
30
  @media (min-width: $mui-screen-lg-min) {
31
31
  @include mui-make-grid('lg');
32
32
  }
33
+
34
+ // extra-large grid
35
+ @media (min-width: $mui-screen-xl-min) {
36
+ @include mui-make-grid('xl');
37
+ }
@@ -75,24 +75,23 @@
75
75
  // TEXT COLOR HELPERS
76
76
  // ============================================================================
77
77
 
78
- .mui--text-danger { color: $mui-danger-color; }
78
+ .mui--text-dark { color: $mui-text-dark; }
79
+ .mui--text-dark-secondary { color: $mui-text-dark-secondary; }
80
+ .mui--text-dark-hint { color: $mui-text-dark-hint; }
79
81
 
80
- .mui--text-black { color: mui-color('black'); }
81
- .mui--text-black-87 { color: mui-color('black-alpha-87'); }
82
- .mui--text-black-54 { color: mui-color('black-alpha-54'); }
83
- .mui--text-black-38 { color: mui-color('black-alpha-38'); }
84
- .mui--text-black-12 { color: mui-color('black-alpha-12'); }
82
+ .mui--text-light { color: $mui-text-light; }
83
+ .mui--text-light-secondary { color: $mui-text-light-secondary; }
84
+ .mui--text-light-hint { color: $mui-text-light-hint; }
85
+
86
+ .mui--text-accent { color: $mui-text-accent; }
87
+ .mui--text-accent-secondary { color: $mui-text-accent-secondary; }
88
+ .mui--text-accent-hint { color: $mui-text-accent-hint; }
89
+
90
+ .mui--text-black { color: mui-color('black'); }
91
+ .mui--text-white { color: mui-color('white'); }
92
+ .mui--text-danger { color: $mui-text-danger; }
85
93
 
86
- .mui--text-white { color: mui-color('white'); }
87
- .mui--text-white-70 { color: mui-color('white-alpha-70'); }
88
- .mui--text-white-30 { color: mui-color('white-alpha-30'); }
89
- .mui--text-white-12 { color: mui-color('white-alpha-12'); }
90
94
 
91
- .mui--text-accent { color: $mui-accent-color; }
92
- .mui--text-accent-87 { color: rgba($mui-accent-color, .87); }
93
- .mui--text-accent-54 { color: rgba($mui-accent-color, .54); }
94
- .mui--text-accent-38 { color: rgba($mui-accent-color, .38); }
95
- .mui--text-accent-12 { color: rgba($mui-accent-color, .12); }
96
95
 
97
96
 
98
97
  // ============================================================================
@@ -239,115 +238,84 @@
239
238
  .mui--visible-md-inline-block,
240
239
  .mui--visible-lg-block,
241
240
  .mui--visible-lg-inline,
242
- .mui--visible-lg-inline-block {
241
+ .mui--visible-lg-inline-block,
242
+ .mui--visible-xl-block,
243
+ .mui--visible-xl-inline,
244
+ .mui--visible-xl-inline-block {
243
245
  display: none !important;
244
246
  }
245
247
 
248
+
246
249
  @media (max-width: $mui-screen-xs-max) {
247
250
  @include x-responsive-visibility('.mui-visible-xs');
251
+
252
+ .mui--visible-xs-block { display: block !important; }
253
+ .mui--visible-xs-inline { display: inline !important; }
254
+ .mui--visible-xs-inline-block { display: inline-block !important; }
248
255
  }
249
256
 
250
- .mui--visible-xs-block {
251
- @media (max-width: $mui-screen-xs-max) {
252
- display: block !important;
253
- }
254
- }
255
-
256
- .mui--visible-xs-inline {
257
- @media (max-width: $mui-screen-xs-max) {
258
- display: inline !important;
259
- }
260
- }
261
-
262
- .mui--visible-xs-inline-block {
263
- @media (max-width: $mui-screen-xs-max) {
264
- display: inline-block !important;
265
- }
266
- }
267
257
 
268
258
  @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
269
- @include x-responsive-visibility('.mui--visible-sm');
270
- }
271
-
272
- .mui--visible-sm-block {
273
- @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
274
- display: block !important;
275
- }
259
+ @include x-responsive-visibility('.mui-visible-sm');
260
+
261
+ .mui--visible-sm-block { display: block !important; }
262
+ .mui--visible-sm-inline { display: inline !important; }
263
+ .mui--visible-sm-inline-block { display: inline-block !important; }
276
264
  }
277
265
 
278
- .mui--visible-sm-inline {
279
- @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
280
- display: inline !important;
281
- }
282
- }
283
-
284
- .mui--visible-sm-inline-block {
285
- @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
286
- display: inline-block !important;
287
- }
288
- }
289
266
 
290
267
  @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
291
- @include x-responsive-visibility('.mui--visible-md');
268
+ @include x-responsive-visibility('.mui-visible-md');
269
+
270
+ .mui--visible-md-block { display: block !important; }
271
+ .mui--visible-md-inline { display: inline !important; }
272
+ .mui--visible-md-inline-block { display: inline-block !important; }
292
273
  }
293
274
 
294
- .mui--visible-md-block {
295
- @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
296
- display: block !important;
297
- }
298
- }
299
275
 
300
- .mui--visible-md-inline {
301
- @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
302
- display: inline !important;
303
- }
276
+ @media (min-width: $mui-screen-lg-min) and (max-width: $mui-screen-lg-max) {
277
+ @include x-responsive-visibility('.mui-visible-lg');
278
+
279
+ .mui--visible-lg-block { display: block !important; }
280
+ .mui--visible-lg-inline { display: inline !important; }
281
+ .mui--visible-lg-inline-block { display: inline-block !important; }
304
282
  }
305
283
 
306
- .mui--visible-md-inline-block {
307
- @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
308
- display: inline-block !important;
309
- }
310
- }
311
284
 
312
- @media (min-width: $mui-screen-lg-min) {
313
- @include x-responsive-visibility('.mui--visible-lg');
285
+ @media (min-width: $mui-screen-xl-min) {
286
+ @include x-responsive-visibility('.mui-visible-xl');
287
+
288
+ .mui--visible-xl-block { display: block !important; }
289
+ .mui--visible-xl-inline { display: inline !important; }
290
+ .mui--visible-xl-inline-block { display: inline-block !important; }
314
291
  }
315
292
 
316
- .mui--visible-lg-block {
317
- @media (min-width: $mui-screen-lg-min) {
318
- display: block !important;
319
- }
320
- }
321
-
322
- .mui--visible-lg-inline {
323
- @media (min-width: $mui-screen-lg-min) {
324
- display: inline !important;
325
- }
326
- }
327
-
328
- .mui--visible-lg-inline-block {
329
- @media (min-width: $mui-screen-lg-min) {
330
- display: inline-block !important;
331
- }
332
- }
333
293
 
334
294
  @media (max-width: $mui-screen-xs-max) {
335
295
  @include x-responsive-invisibility('.mui--hidden-xs');
336
296
  }
337
297
 
298
+
338
299
  @media (min-width: $mui-screen-sm-min) and (max-width: $mui-screen-sm-max) {
339
300
  @include x-responsive-invisibility('.mui--hidden-sm');
340
301
  }
341
302
 
303
+
342
304
  @media (min-width: $mui-screen-md-min) and (max-width: $mui-screen-md-max) {
343
305
  @include x-responsive-invisibility('.mui--hidden-md');
344
306
  }
345
307
 
346
- @media (min-width: $mui-screen-lg-min) {
308
+
309
+ @media (min-width: $mui-screen-lg-min) and (max-width: $mui-screen-lg-max) {
347
310
  @include x-responsive-invisibility('.mui--hidden-lg');
348
311
  }
349
312
 
350
313
 
314
+ @media (min-width: $mui-screen-xl-min) {
315
+ @include x-responsive-invisibility('.mui--hidden-xl');
316
+ }
317
+
318
+
351
319
 
352
320
  // ============================================================================
353
321
  // SCROLL BLOCK
@@ -6,13 +6,16 @@
6
6
  @include mui-container-fixed();
7
7
 
8
8
  @media (min-width: $mui-screen-sm-min) {
9
- width: $mui-container-sm;
9
+ max-width: $mui-container-sm;
10
10
  }
11
11
  @media (min-width: $mui-screen-md-min) {
12
- width: $mui-container-md;
12
+ max-width: $mui-container-md;
13
13
  }
14
14
  @media (min-width: $mui-screen-lg-min) {
15
- width: $mui-container-lg;
15
+ max-width: $mui-container-lg;
16
+ }
17
+ @media (min-width: $mui-screen-xl-min) {
18
+ max-width: $mui-container-xl;
16
19
  }
17
20
  }
18
21
 
@@ -19,10 +19,10 @@ $mui-danger-color: mui-color('red', '500') !default;
19
19
  // MEDIA QUERY BREAKPOINTS
20
20
  // ============================================================================
21
21
 
22
- $mui-screen-xs: 480px !default;
23
- $mui-screen-sm-min: 768px !default;
24
- $mui-screen-md-min: 992px !default;
25
- $mui-screen-lg-min: 1200px !default;
22
+ $mui-screen-sm-min: 544px !default;
23
+ $mui-screen-md-min: 768px !default;
24
+ $mui-screen-lg-min: 992px !default;
25
+ $mui-screen-xl-min: 1200px !default;
26
26
 
27
27
 
28
28
 
@@ -42,9 +42,10 @@ $mui-grid-float-breakpoint: $mui-screen-sm-min !default;
42
42
  // CONTAINER SIZES
43
43
  // ============================================================================
44
44
 
45
- $mui-container-sm: ($mui-screen-sm-min - 18px) !default;
46
- $mui-container-md: (940px + $mui-grid-gutter-width) !default;
47
- $mui-container-lg: (1140px + $mui-grid-gutter-width) !default;
45
+ $mui-container-sm: 570px !default;
46
+ $mui-container-md: 740px !default;
47
+ $mui-container-lg: 960px !default;
48
+ $mui-container-xl: 1170px !default;
48
49
 
49
50
 
50
51
 
@@ -81,6 +82,27 @@ $mui-base-font-smoothing: false;
81
82
 
82
83
 
83
84
 
85
+ // ============================================================================
86
+ // TEXT COLORS
87
+ // ============================================================================
88
+
89
+ $mui-text-dark: mui-color('black-alpha-87') !default;
90
+ $mui-text-dark-secondary: mui-color('black-alpha-54') !default;
91
+ $mui-text-dark-hint: mui-color('black-alpha-38') !default;
92
+
93
+ $mui-text-light: mui-color('white') !default;
94
+ $mui-text-light-secondary: mui-color('white-alpha-70') !default;
95
+ $mui-text-light-hint: mui-color('white-alpha-30') !default;
96
+
97
+ $mui-text-accent: rgba($mui-accent-color, .87) !default;
98
+ $mui-text-accent-secondary: rgba($mui-accent-color, .54) !default;
99
+ $mui-text-accent-hint: rgba($mui-accent-color, .38) !default;
100
+
101
+ $mui-text-danger: $mui-danger-color !default;
102
+
103
+
104
+
105
+
84
106
  // ============================================================================
85
107
  // BUTTONS
86
108
  // ============================================================================
@@ -268,4 +290,4 @@ $mui-base-line-height-computed: floor(($mui-base-font-size * $mui-base-line-heig
268
290
  $mui-screen-xs-max: ($mui-screen-sm-min - 1);
269
291
  $mui-screen-sm-max: ($mui-screen-md-min - 1);
270
292
  $mui-screen-md-max: ($mui-screen-lg-min - 1);
271
-
293
+ $mui-screen-lg-max: ($mui-screen-xl-min - 1);