material-sass 4.0.0.beta2 → 4.0.0.beta3

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 (60) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +3 -3
  4. data/Rakefile +11 -9
  5. data/assets/javascripts/material.js +3278 -825
  6. data/assets/javascripts/material.min.js +17 -1
  7. data/assets/javascripts/material/{initializers/picker.js → addons/pickadate.js} +5 -23
  8. data/assets/javascripts/material/components/expansion-panel.js +9 -18
  9. data/assets/javascripts/material/components/floating-label.js +21 -24
  10. data/assets/javascripts/material/components/{navdrawer.js → nav-drawer.js} +51 -55
  11. data/assets/javascripts/material/components/selection-control-focus.js +15 -21
  12. data/assets/javascripts/material/components/tab-switch.js +13 -20
  13. data/assets/javascripts/material/components/util.js +31 -41
  14. data/assets/stylesheets/material/_functions.scss +1 -1
  15. data/assets/stylesheets/material/_print.scss +13 -2
  16. data/assets/stylesheets/material/_utilities.scss +0 -1
  17. data/assets/stylesheets/material/_variables.scss +0 -1
  18. data/assets/stylesheets/material/base/_base.scss +1 -16
  19. data/assets/stylesheets/material/bootstrap/_close.scss +4 -0
  20. data/assets/stylesheets/material/bootstrap/_code.scss +6 -0
  21. data/assets/stylesheets/material/bootstrap/_custom-form.scss +26 -28
  22. data/assets/stylesheets/material/bootstrap/_form.scss +7 -36
  23. data/assets/stylesheets/material/bootstrap/_pagination.scss +7 -2
  24. data/assets/stylesheets/material/bootstrap/_popover.scss +18 -14
  25. data/assets/stylesheets/material/material.scss +0 -1
  26. data/assets/stylesheets/material/material/_button-flat.scss +8 -8
  27. data/assets/stylesheets/material/material/_button-group.scss +26 -63
  28. data/assets/stylesheets/material/material/_button.scss +18 -18
  29. data/assets/stylesheets/material/material/_dialog.scss +6 -6
  30. data/assets/stylesheets/material/material/_expansion-panel.scss +4 -4
  31. data/assets/stylesheets/material/material/_menu.scss +2 -2
  32. data/assets/stylesheets/material/material/_picker.scss +3 -3
  33. data/assets/stylesheets/material/material/_progress.scss +2 -1
  34. data/assets/stylesheets/material/material/_selection-control.scss +88 -67
  35. data/assets/stylesheets/material/material/_text-field-input-group.scss +49 -82
  36. data/assets/stylesheets/material/material/_text-field.scss +36 -6
  37. data/assets/stylesheets/material/material/_toolbar.scss +4 -0
  38. data/assets/stylesheets/material/material/_tooltip.scss +1 -1
  39. data/assets/stylesheets/material/mixins/_breakpoint.scss +1 -1
  40. data/assets/stylesheets/material/mixins/_form.scss +79 -17
  41. data/assets/stylesheets/material/mixins/_grid-framework.scss +9 -3
  42. data/assets/stylesheets/material/mixins/_grid.scss +3 -1
  43. data/assets/stylesheets/material/mixins/_hover.scss +14 -55
  44. data/assets/stylesheets/material/mixins/_material-icons.scss +2 -4
  45. data/assets/stylesheets/material/mixins/_text-alignment.scss +2 -2
  46. data/assets/stylesheets/material/mixins/_text-hide.scss +1 -1
  47. data/assets/stylesheets/material/utilities/_border.scss +20 -0
  48. data/assets/stylesheets/material/variables/_palette.scss +2 -0
  49. data/assets/stylesheets/material/variables/_variable-bootstrap.scss +17 -0
  50. data/assets/stylesheets/material/variables/_variable-material.scss +2 -6
  51. data/lib/material-sass/version.rb +1 -1
  52. metadata +4 -12
  53. data/assets/javascripts/material/addons/picker.date.js +0 -234
  54. data/assets/javascripts/material/addons/picker.js +0 -172
  55. data/assets/javascripts/material/addons/textarea-autosize.js +0 -23
  56. data/assets/javascripts/material/addons/waves.js +0 -127
  57. data/assets/javascripts/material/initializers/textarea-autosize.js +0 -10
  58. data/assets/javascripts/material/initializers/waves.js +0 -13
  59. data/assets/stylesheets/material/material/_text-field-textarea.scss +0 -15
  60. data/assets/stylesheets/material/utilities/_waves.scss +0 -41
@@ -163,16 +163,46 @@ textarea {
163
163
 
164
164
  // Form validation
165
165
 
166
- @include form-control-validation($form-feedback-invalid-color, 'invalid');
167
- @include form-control-validation($form-feedback-valid-color, 'valid');
166
+ @include form-validation-state('invalid', $form-feedback-invalid-color);
167
+ @include form-validation-state('valid', $form-feedback-valid-color);
168
168
 
169
169
  // Style of Material design `select` should also be applied to `.custom-select`
170
170
 
171
171
  .custom-select {
172
172
  @extend %form-control;
173
- @extend %form-select;
174
173
 
175
- display: inline-block;
176
- vertical-align: middle;
177
- width: auto;
174
+ &[multiple],
175
+ &[size] {
176
+ @extend %form-textarea;
177
+ }
178
+
179
+ &:not([multiple]):not([size]) {
180
+ @extend %form-select;
181
+ }
182
+ }
183
+
184
+ .custom-select-lg {
185
+ @extend %form-control-lg;
186
+
187
+ &[multiple],
188
+ &[size] {
189
+ padding: $textfield-box-padding-y-lg $textfield-box-padding-x-lg;
190
+ }
191
+
192
+ &:not([multiple]):not([size]) {
193
+ @include form-select-size($textfield-font-size-lg, $textfield-height-lg, $textfield-padding-x-lg);
194
+ }
195
+ }
196
+
197
+ .custom-select-sm {
198
+ @extend %form-control-sm;
199
+
200
+ &[multiple],
201
+ &[size] {
202
+ padding: $textfield-box-padding-y-sm $textfield-box-padding-x-sm;
203
+ }
204
+
205
+ &:not([multiple]):not([size]) {
206
+ @include form-select-size($textfield-font-size-sm, $textfield-height-sm, $textfield-padding-x-sm);
207
+ }
178
208
  }
@@ -396,6 +396,10 @@
396
396
  &:focus {
397
397
  outline: 0;
398
398
  }
399
+
400
+ &:not([disabled]):not(.disabled) {
401
+ cursor: pointer;
402
+ }
399
403
  }
400
404
 
401
405
  .navbar-toggler-icon {
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  .tooltip-inner {
28
- @include border-radius($border-radius);
28
+ @include border-radius($tooltip-border-radius);
29
29
  @include transition-standard(transform);
30
30
 
31
31
  background-color: $tooltip-bg;
@@ -5,7 +5,7 @@
5
5
  @function breakpoint-max($name) {
6
6
  $next: breakpoint-next($name);
7
7
 
8
- @return if($next, breakpoint-min($next) - 1px, null);
8
+ @return if($next, breakpoint-min($next) - 0.02px, null);
9
9
  }
10
10
 
11
11
  @function breakpoint-min($name) {
@@ -39,27 +39,89 @@
39
39
  }
40
40
  }
41
41
 
42
- @mixin form-control-validation($color, $state) {
42
+ @mixin form-validation-state($state, $color) {
43
+ .#{$state}-feedback {
44
+ @include typography-caption;
45
+
46
+ color: $color;
47
+ display: none;
48
+ margin-top: $textfield-margin-y;
49
+ width: 100%;
50
+
51
+ .form-control-lg + & {
52
+ margin-top: $textfield-margin-y-lg;
53
+ }
54
+
55
+ .form-control-sm + & {
56
+ margin-top: $textfield-margin-y-sm;
57
+ }
58
+ }
59
+
60
+ .#{$state}-tooltip {
61
+ @include border-radius($border-radius);
62
+
63
+ background-color: $color;
64
+ color: color-yiq($color);
65
+ display: none;
66
+ font-size: $tooltip-font-size;
67
+ line-height: $tooltip-line-height;
68
+ margin-top: $textfield-margin-y;
69
+ max-width: 100%;
70
+ opacity: $tooltip-opacity;
71
+ padding: $tooltip-padding-y $tooltip-padding-x;
72
+ position: absolute;
73
+ top: 100%;
74
+ text-align: center;
75
+ word-break: break-word;
76
+ z-index: $tooltip-zindex;
77
+
78
+ @include media-breakpoint-up(md) {
79
+ font-size: $tooltip-font-size-desktop;
80
+ padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
81
+ }
82
+
83
+ .form-control-lg + & {
84
+ margin-top: $textfield-margin-y-lg;
85
+ }
86
+
87
+ .form-control-sm + & {
88
+ margin-top: $textfield-margin-y-sm;
89
+ }
90
+ }
91
+
43
92
  .custom-control-input {
44
- .was-validated &:#{$state},
45
- &.is-#{$state} {
46
- ~ .custom-control-indicator,
47
- ~ .custom-control-description {
48
- color: $color;
93
+ &.is-#{$state},
94
+ .was-validated &:#{$state} {
95
+ ~ .custom-control-label {
96
+ &,
97
+ &::after {
98
+ color: $color;
99
+ }
100
+
101
+ &::before {
102
+ background-color: $color;
103
+ }
104
+ }
105
+
106
+ ~ .#{$state}-feedback,
107
+ ~ .#{$state}-tooltip {
108
+ display: block;
49
109
  }
50
110
  }
51
111
  }
52
112
 
53
113
  .custom-file-input {
54
- .was-validated &:#{$state},
55
- &.is-#{$state} {
56
- &:focus ~ .custom-file-control {
57
- border-bottom-color: $color;
58
- box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $color;
114
+ &.is-#{$state},
115
+ .was-validated &:#{$state} {
116
+ @include focus-hover {
117
+ ~ .custom-file-label {
118
+ border-bottom-color: $color;
119
+ box-shadow: inset 0 ($textfield-border-width-focus * -1) 0 ($textfield-border-width * -1) $color;
120
+ }
59
121
  }
60
122
 
61
- ~ .custom-file-control {
62
- border-color: $color;
123
+ ~ .custom-file-label {
124
+ border-bottom-color: $color;
63
125
 
64
126
  @include hover {
65
127
  border-bottom-color: $color;
@@ -76,8 +138,8 @@
76
138
 
77
139
  .custom-select,
78
140
  .form-control {
79
- .was-validated &:#{$state},
80
- &.is-#{$state} {
141
+ &.is-#{$state},
142
+ .was-validated &:#{$state} {
81
143
  border-color: $color;
82
144
 
83
145
  @include focus-hover {
@@ -93,8 +155,8 @@
93
155
  }
94
156
 
95
157
  .form-check-input {
96
- .was-validated &:#{$state},
97
- &.is-#{$state} {
158
+ &.is-#{$state},
159
+ .was-validated &:#{$state} {
98
160
  + .form-check-label {
99
161
  color: $color;
100
162
  }
@@ -16,12 +16,14 @@
16
16
  }
17
17
 
18
18
  @for $i from 0 through ($grid-columns - 1) {
19
- .offset#{$infix}-#{$i} {
20
- @include make-col-offset($i);
19
+ @if not ($infix == '' and $i == 0) {
20
+ .offset#{$infix}-#{$i} {
21
+ @include make-col-offset($i);
22
+ }
21
23
  }
22
24
  }
23
25
 
24
- @for $i from 1 through $grid-columns {
26
+ @for $i from 0 through $grid-columns {
25
27
  .order#{$infix}-#{$i} {
26
28
  order: $i;
27
29
  }
@@ -38,6 +40,10 @@
38
40
  max-width: none;
39
41
  width: auto;
40
42
  }
43
+
44
+ .order#{$infix}-first {
45
+ order: -1;
46
+ }
41
47
  }
42
48
 
43
49
  .col#{$infix},
@@ -6,7 +6,9 @@
6
6
  }
7
7
 
8
8
  @mixin make-col-offset($size) {
9
- margin-left: percentage($size / $grid-columns);
9
+ $num: $size / $grid-columns;
10
+
11
+ margin-left: if($num == 0, 0, percentage($num));
10
12
  }
11
13
 
12
14
  @mixin make-gutters($type: padding) {
@@ -1,70 +1,29 @@
1
1
  @mixin active-focus-hover {
2
- @if $enable-hover-media-query {
3
- @include hover {
4
- @content;
5
- }
6
-
7
- &:active,
8
- &:focus {
9
- @content;
10
- }
11
- } @else {
12
- &:active,
13
- &:focus,
14
- &:hover {
15
- @content;
16
- }
2
+ &:active,
3
+ &:focus,
4
+ &:hover {
5
+ @content;
17
6
  }
18
7
  }
19
8
 
20
9
  @mixin focus-hover {
21
- @if $enable-hover-media-query {
22
- @include hover {
23
- @content;
24
- }
25
-
26
- &:focus {
27
- @content;
28
- }
29
- } @else {
30
- &:focus,
31
- &:hover {
32
- @content;
33
- }
10
+ &:focus,
11
+ &:hover {
12
+ @content;
34
13
  }
35
14
  }
36
15
 
37
16
  @mixin hover {
38
- @if $enable-hover-media-query {
39
- @media (hover: hover) {
40
- &:hover {
41
- @content;
42
- }
43
- }
44
- } @else {
45
- &:hover {
46
- @content;
47
- }
17
+ &:hover {
18
+ @content;
48
19
  }
49
20
  }
50
21
 
51
22
  @mixin plain-active-focus-hover {
52
- @if $enable-hover-media-query {
53
- @include hover {
54
- @content;
55
- }
56
-
57
- &,
58
- &:active,
59
- &:focus {
60
- @content;
61
- }
62
- } @else {
63
- &,
64
- &:active,
65
- &:focus,
66
- &:hover {
67
- @content;
68
- }
23
+ &,
24
+ &:active,
25
+ &:focus,
26
+ &:hover {
27
+ @content;
69
28
  }
70
29
  }
@@ -1,5 +1,3 @@
1
- // stylelint-disable font-weight-notation
2
-
3
1
  @mixin reset-material-icons {
4
2
  font-size: ($material-icon-size / $font-size-base * 1em);
5
3
  line-height: ($font-size-base / $material-icon-size * 1em);
@@ -24,12 +22,12 @@
24
22
  @mixin set-material-icons {
25
23
  @include reset-material-icons;
26
24
 
27
- font-family: 'Material Icons';
25
+ font-family: 'Material Icons'; // stylelint-disable-line font-family-no-missing-generic-family-keyword
28
26
  font-feature-settings: 'liga';
29
27
  -moz-osx-font-smoothing: grayscale;
30
28
  -webkit-font-smoothing: antialiased;
31
29
  font-style: normal;
32
- font-weight: normal;
30
+ font-weight: normal; // stylelint-disable-line font-weight-notation
33
31
  letter-spacing: normal;
34
32
  text-rendering: optimizeLegibility;
35
33
  text-transform: none;
@@ -1,5 +1,6 @@
1
+ // scss-lint:disable DuplicateProperty
2
+
1
3
  @mixin text-align($direction: 'left') {
2
- // scss-lint:disable DuplicateProperty
3
4
  @if $direction == 'left' {
4
5
  text-align: left;
5
6
  text-align: start;
@@ -19,5 +20,4 @@
19
20
  text-align: end;
20
21
  }
21
22
  }
22
- // scss-lint:enable DuplicateProperty
23
23
  }
@@ -2,6 +2,6 @@
2
2
  background-color: transparent;
3
3
  border: 0;
4
4
  color: transparent;
5
- font: 0/0 a;
5
+ font: 0/0 a; // stylelint-disable-line font-family-no-missing-generic-family-keyword
6
6
  text-shadow: none;
7
7
  }
@@ -2,22 +2,42 @@
2
2
 
3
3
  // Border
4
4
 
5
+ .border {
6
+ border: $border-width solid $border-color !important;
7
+ }
8
+
5
9
  .border-0 {
6
10
  border: 0 !important;
7
11
  }
8
12
 
13
+ .border-top {
14
+ border-top: $border-width solid $border-color !important;
15
+ }
16
+
9
17
  .border-top-0 {
10
18
  border-top: 0 !important;
11
19
  }
12
20
 
21
+ .border-right {
22
+ border-right: $border-width solid $border-color !important;
23
+ }
24
+
13
25
  .border-right-0 {
14
26
  border-right: 0 !important;
15
27
  }
16
28
 
29
+ .border-bottom {
30
+ border-bottom: $border-width solid $border-color !important;
31
+ }
32
+
17
33
  .border-bottom-0 {
18
34
  border-bottom: 0 !important;
19
35
  }
20
36
 
37
+ .border-left {
38
+ border-left: $border-width solid $border-color !important;
39
+ }
40
+
21
41
  .border-left-0 {
22
42
  border-left: 0 !important;
23
43
  }
@@ -64,3 +64,5 @@ $theme-colors: map-merge(
64
64
  ),
65
65
  $theme-colors
66
66
  );
67
+
68
+ $yiq-contrasted-threshold: 150 !default;
@@ -169,3 +169,20 @@ $pagination-color-disabled: $black-hint !default;
169
169
  $pagination-inner-spacer-x: 1px !default;
170
170
  $pagination-padding-x: 0.5rem !default;
171
171
  $pagination-padding-y: 0.625rem !default;
172
+
173
+ // Popover
174
+
175
+ $popover-bg: $white !default;
176
+ $popover-border-radius: $border-radius !default;
177
+ $popover-elevation-shadow: $elevation-shadow-24dp !default;
178
+ $popover-font-size: $font-size-base !default;
179
+ $popover-margin: 1.5rem !default;
180
+ $popover-margin-desktop: 0.875rem !default;
181
+ $popover-max-width: 17.5rem !default;
182
+ $popover-padding-x: 1.5rem !default;
183
+ $popover-padding-y: 1.25rem !default;
184
+
185
+ // Print
186
+
187
+ $print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
188
+ $print-page-size: a3 !default;