material-sass 4.0.0 → 4.1.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.
Files changed (62) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +5 -3
  3. data/Rakefile +4 -4
  4. data/assets/javascripts/material-sprockets.js +0 -1
  5. data/assets/javascripts/material.js +2994 -2927
  6. data/assets/javascripts/material.min.js +10 -10
  7. data/assets/javascripts/material/components/expansion-panel.js +1 -3
  8. data/assets/javascripts/material/components/floating-label.js +2 -3
  9. data/assets/javascripts/material/components/nav-drawer.js +10 -32
  10. data/assets/javascripts/material/components/pickdate.js +228 -0
  11. data/assets/javascripts/material/components/selection-control-focus.js +2 -2
  12. data/assets/javascripts/material/components/tab-switch.js +4 -20
  13. data/assets/javascripts/material/components/util.js +16 -1
  14. data/assets/stylesheets/material/_colors.scss +2 -0
  15. data/assets/stylesheets/material/_functions.scss +6 -0
  16. data/assets/stylesheets/material/_mixins.scss +0 -2
  17. data/assets/stylesheets/material/_print.scss +26 -1
  18. data/assets/stylesheets/material/_utilities.scss +1 -0
  19. data/assets/stylesheets/material/base/_base.scss +5 -2
  20. data/assets/stylesheets/material/bootstrap/_breadcrumb.scss +10 -7
  21. data/assets/stylesheets/material/bootstrap/_popover.scss +1 -2
  22. data/assets/stylesheets/material/bootstrap/_transition.scss +6 -10
  23. data/assets/stylesheets/material/material.scss +2 -0
  24. data/assets/stylesheets/material/material/_card.scss +58 -96
  25. data/assets/stylesheets/material/material/_chip.scss +1 -0
  26. data/assets/stylesheets/material/material/_data-table.scss +57 -1
  27. data/assets/stylesheets/material/material/_dialog.scss +2 -2
  28. data/assets/stylesheets/material/material/_expansion-panel.scss +4 -0
  29. data/assets/stylesheets/material/material/_menu.scss +164 -54
  30. data/assets/stylesheets/material/material/_navdrawer.scss +5 -6
  31. data/assets/stylesheets/material/material/_picker.scss +78 -67
  32. data/assets/stylesheets/material/material/_progress.scss +1 -6
  33. data/assets/stylesheets/material/material/_selection-control.scss +1 -1
  34. data/assets/stylesheets/material/material/_slider.scss +157 -0
  35. data/assets/stylesheets/material/material/_snackbar.scss +125 -0
  36. data/assets/stylesheets/material/material/_text-field-input-group.scss +101 -10
  37. data/assets/stylesheets/material/material/_text-field.scss +10 -15
  38. data/assets/stylesheets/material/material/_toolbar.scss +0 -16
  39. data/assets/stylesheets/material/material/_tooltip.scss +2 -2
  40. data/assets/stylesheets/material/mixins/_form.scss +2 -1
  41. data/assets/stylesheets/material/mixins/_nav-divider.scss +2 -2
  42. data/assets/stylesheets/material/mixins/_screenreader.scss +0 -2
  43. data/assets/stylesheets/material/mixins/_text-hide.scss +2 -0
  44. data/assets/stylesheets/material/mixins/_transition.scss +20 -0
  45. data/assets/stylesheets/material/utilities/_background.scss +5 -0
  46. data/assets/stylesheets/material/utilities/_flex.scss +17 -1
  47. data/assets/stylesheets/material/utilities/_position.scss +1 -0
  48. data/assets/stylesheets/material/utilities/_shadows.scss +23 -0
  49. data/assets/stylesheets/material/utilities/_text.scss +18 -0
  50. data/assets/stylesheets/material/variables/_elevation-shadow.scss +53 -47
  51. data/assets/stylesheets/material/variables/_palette.scss +9 -8
  52. data/assets/stylesheets/material/variables/_spacer.scss +2 -0
  53. data/assets/stylesheets/material/variables/_transition.scss +2 -0
  54. data/assets/stylesheets/material/variables/_typography.scss +3 -3
  55. data/assets/stylesheets/material/variables/_variable-bootstrap.scss +9 -8
  56. data/assets/stylesheets/material/variables/_variable-material.scss +56 -18
  57. data/lib/material-sass/version.rb +1 -1
  58. metadata +6 -6
  59. data/assets/javascripts/material/addons/pickadate.js +0 -152
  60. data/assets/stylesheets/material.min.css +0 -13
  61. data/assets/stylesheets/material/mixins/_hex-to-rgba.scss +0 -3
  62. data/assets/stylesheets/material/mixins/_strip-unit.scss +0 -3
@@ -1,9 +1,10 @@
1
1
  /*
2
2
  * Global util js
3
- * Based on Bootstrap's (v4.0.0) `util.js`
3
+ * Based on Bootstrap's (v4.1.0) `util.js`
4
4
  */
5
5
  var Util = function ($) {
6
6
  var MAX_UID = 1000000;
7
+ var MILLISECONDS_MULTIPLIER = 1000;
7
8
  var transition = false;
8
9
 
9
10
  function getSpecialTransitionEndEvent() {
@@ -74,6 +75,20 @@ var Util = function ($) {
74
75
  return null;
75
76
  }
76
77
  },
78
+ getTransitionDurationFromElement: function getTransitionDurationFromElement(element) {
79
+ if (!element) {
80
+ return 0;
81
+ }
82
+
83
+ var transitionDuration = $(element).css('transition-duration');
84
+
85
+ if (!transitionDuration) {
86
+ return 0;
87
+ }
88
+
89
+ transitionDuration = transitionDuration.split(',')[0];
90
+ return parseFloat(transitionDuration) * MILLISECONDS_MULTIPLIER;
91
+ },
77
92
  getUID: function getUID(prefix) {
78
93
  do {
79
94
  // eslint-disable-next-line no-bitwise
@@ -274,6 +274,7 @@ $material-color-yellow-a200: #ffff00 !default;
274
274
  $material-color-yellow-a400: #ffea00 !default;
275
275
  $material-color-yellow-a700: #ffd600 !default;
276
276
 
277
+ // stylelint-disable scss/dollar-variable-default
277
278
  $ambers: () !default;
278
279
  $ambers: map-merge(
279
280
  (
@@ -686,6 +687,7 @@ $colors: map-merge(
686
687
  ),
687
688
  $colors
688
689
  );
690
+ // stylelint-enable
689
691
 
690
692
  // Black and white
691
693
  // Based on https://material.google.com/style/color.html#color-text-background-colors
@@ -69,3 +69,9 @@
69
69
  @function theme-color-light($key: primary) {
70
70
  @return map-get(map-get($theme-colors, $key), light);
71
71
  }
72
+
73
+ // Strip unit
74
+
75
+ @function strip-unit($val) {
76
+ @return $val / ($val * 0 + 1);
77
+ }
@@ -6,7 +6,6 @@
6
6
  @import 'mixins/form';
7
7
  @import 'mixins/grid';
8
8
  @import 'mixins/grid-framework';
9
- @import 'mixins/hex-to-rgba';
10
9
  @import 'mixins/hover';
11
10
  @import 'mixins/image';
12
11
  @import 'mixins/list';
@@ -14,7 +13,6 @@
14
13
  @import 'mixins/nav-divider';
15
14
  @import 'mixins/reset-text';
16
15
  @import 'mixins/screenreader';
17
- @import 'mixins/strip-unit';
18
16
  @import 'mixins/text-alignment';
19
17
  @import 'mixins/text-emphasis';
20
18
  @import 'mixins/text-hide';
@@ -1,4 +1,4 @@
1
- // stylelint-disable declaration-no-important, selector-no-qualifying-type
1
+ // stylelint-disable declaration-no-important
2
2
 
3
3
  @if $enable-print-styles {
4
4
  @media print {
@@ -17,6 +17,7 @@
17
17
  text-decoration: underline;
18
18
  }
19
19
 
20
+ // stylelint-disable-next-line selector-no-qualifying-type
20
21
  abbr[title]::after {
21
22
  content: ' (" attr(title) ") ';
22
23
  }
@@ -106,8 +107,32 @@
106
107
  border: $border-width solid $border-color-solid;
107
108
  }
108
109
 
110
+ .table {
111
+ td,
112
+ th {
113
+ background-color: $white !important;
114
+ }
115
+ }
116
+
109
117
  .table-bordered {
110
118
  border: $border-width solid $border-color-solid;
111
119
  }
120
+
121
+ .table-dark {
122
+ color: inherit;
123
+
124
+ td,
125
+ th,
126
+ .table {
127
+ border-color: $border-color-solid;
128
+ }
129
+ }
130
+
131
+ .table .thead-dark {
132
+ td,
133
+ th {
134
+ color: inherit;
135
+ }
136
+ }
112
137
  }
113
138
  }
@@ -9,6 +9,7 @@
9
9
  @import 'utilities/float';
10
10
  @import 'utilities/position';
11
11
  @import 'utilities/screenreader';
12
+ @import 'utilities/shadows';
12
13
  @import 'utilities/sizing';
13
14
  @import 'utilities/spacing';
14
15
  @import 'utilities/text';
@@ -22,7 +22,7 @@
22
22
  --font-family-serif: #{inspect($font-family-serif)};
23
23
  }
24
24
 
25
- // stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
25
+ // stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
26
26
 
27
27
  // Box sizing
28
28
 
@@ -33,6 +33,7 @@
33
33
  }
34
34
 
35
35
  @at-root {
36
+ // stylelint-disable-next-line at-rule-no-vendor-prefix
36
37
  @-ms-viewport {
37
38
  width: device-width;
38
39
  }
@@ -61,6 +62,8 @@ body {
61
62
  color: $body-color;
62
63
  font-family: $font-family-base;
63
64
  font-size: $font-size-base;
65
+ -moz-osx-font-smoothing: grayscale;
66
+ -webkit-font-smoothing: antialiased;
64
67
  font-weight: $font-weight-base;
65
68
  line-height: $line-height-base;
66
69
  margin: 0;
@@ -307,7 +310,7 @@ table {
307
310
  }
308
311
 
309
312
  th {
310
- text-align: inherit;
313
+ @include text-align(left);
311
314
  }
312
315
 
313
316
  // Typography
@@ -32,13 +32,16 @@
32
32
  text-decoration: none;
33
33
  }
34
34
 
35
- + .breadcrumb-item::before {
36
- @include set-material-icons;
37
-
38
- color: $breadcrumb-item-color;
39
- content: $breadcrumb-item-icon;
40
- display: inline-block;
41
- margin-right: $breadcrumb-inner-spacer-x;
35
+ + .breadcrumb-item {
42
36
  margin-left: $breadcrumb-inner-spacer-x;
37
+
38
+ &::before {
39
+ @include set-material-icons;
40
+
41
+ color: $breadcrumb-item-color;
42
+ content: $breadcrumb-item-icon;
43
+ display: inline-block;
44
+ margin-right: $breadcrumb-inner-spacer-x;
45
+ }
43
46
  }
44
47
  }
@@ -6,7 +6,6 @@
6
6
  @include reset-text;
7
7
  @include border-radius($popover-border-radius);
8
8
 
9
- background-clip: padding-box;
10
9
  background-color: $popover-bg;
11
10
  box-shadow: map-get($popover-elevation-shadow, shadow);
12
11
  display: block;
@@ -44,7 +43,7 @@
44
43
 
45
44
  // Desktop
46
45
 
47
- @include media-breakpoint-up(md) {
46
+ @include media-breakpoint-up($popover-breakpoint) {
48
47
  .popover {
49
48
  margin: $popover-margin-desktop;
50
49
  }
@@ -1,5 +1,3 @@
1
- // stylelint-disable selector-no-qualifying-type
2
-
3
1
  .collapse {
4
2
  display: none;
5
3
 
@@ -8,16 +6,14 @@
8
6
  }
9
7
  }
10
8
 
11
- tbody {
12
- &.collapse.show {
13
- display: table-row-group;
14
- }
9
+ // stylelint-disable-next-line selector-no-qualifying-type
10
+ tbody.collapse.show {
11
+ display: table-row-group;
15
12
  }
16
13
 
17
- tr {
18
- &.collapse.show {
19
- display: table-row;
20
- }
14
+ // stylelint-disable-next-line selector-no-qualifying-type
15
+ tr.collapse.show {
16
+ display: table-row;
21
17
  }
22
18
 
23
19
  .collapsing {
@@ -47,6 +47,8 @@
47
47
  @import 'material/progress';
48
48
  @import 'material/progress-circular';
49
49
  @import 'material/selection-control';
50
+ @import 'material/slider';
51
+ @import 'material/snackbar';
50
52
  @import 'material/stepper';
51
53
  @import 'material/tab';
52
54
  @import 'material/text-field';
@@ -1,7 +1,6 @@
1
1
  .card {
2
2
  @include border-radius($card-border-radius);
3
3
 
4
- background-clip: border-box;
5
4
  background-color: $card-bg;
6
5
  box-shadow: map-get($card-elevation-shadow, shadow);
7
6
  display: flex;
@@ -12,12 +11,12 @@
12
11
 
13
12
  @each $color, $values in $theme-colors {
14
13
  &.border-#{$color} {
15
- box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 1px theme-color($color);
14
+ box-shadow: map-get($card-elevation-shadow, shadow), inset 0 0 0 $card-border-width theme-color($color);
16
15
 
17
16
  &[href],
18
17
  &[tabindex] {
19
18
  @include active-focus-hover {
20
- box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 1px theme-color($color);
19
+ box-shadow: map-get($card-elevation-shadow-hover, shadow), inset 0 0 0 $card-border-width theme-color($color);
21
20
  }
22
21
  }
23
22
  }
@@ -36,6 +35,47 @@
36
35
  }
37
36
  }
38
37
 
38
+ // Accordion
39
+
40
+ .accordion {
41
+ .card:first-of-type {
42
+ @include border-bottom-radius(0);
43
+ }
44
+
45
+ .card:last-of-type {
46
+ @include border-top-radius(0);
47
+ }
48
+
49
+ .card:not(:first-of-type):not(:last-of-type) {
50
+ border-radius: 0;
51
+ }
52
+
53
+ .card:not(:first-of-type) {
54
+ .card-body:first-child,
55
+ .card-footer:first-child,
56
+ .card-header:first-child {
57
+ @include border-top-radius(0);
58
+ }
59
+ }
60
+
61
+ .card:not(:last-of-type) {
62
+ .card-body:last-child,
63
+ .card-footer:last-child,
64
+ .card-header:last-child {
65
+ @include border-bottom-radius(0);
66
+ }
67
+ }
68
+
69
+ .collapse,
70
+ .collapsing {
71
+ .card-body:first-child,
72
+ .card-footer:first-child,
73
+ .card-header:first-child {
74
+ @include border-top-radius(0);
75
+ }
76
+ }
77
+ }
78
+
39
79
  // Action
40
80
 
41
81
  .card-actions {
@@ -61,20 +101,17 @@
61
101
  padding-right: $card-action-inner-spacer-x;
62
102
  padding-left: $card-action-inner-spacer-x;
63
103
  }
104
+
105
+ .dropdown-toggle::after {
106
+ margin-right: 0;
107
+ }
64
108
  }
65
109
 
66
110
  // Body
67
111
 
68
112
  .card-body {
69
113
  flex: 1 1 auto;
70
- padding: $card-inner-spacer-y $card-padding-x;
71
-
72
- &:first-child,
73
- .card-header[class*='border-'] + &,
74
- .card-img-top + &,
75
- .list-group + & {
76
- padding-top: $card-padding-y;
77
- }
114
+ padding: $card-padding-y $card-padding-x;
78
115
 
79
116
  &:first-child {
80
117
  @include border-top-radius($card-border-radius);
@@ -82,34 +119,18 @@
82
119
 
83
120
  &:last-child {
84
121
  @include border-bottom-radius($card-border-radius);
85
-
86
- padding-bottom: $card-padding-y;
87
- }
88
-
89
- .card-header:not([class*='border-']) + & {
90
- padding-top: 0;
91
122
  }
92
123
 
93
124
  > :last-child {
94
125
  margin-bottom: 0;
95
126
  }
96
-
97
- + .card-img-bottom,
98
- + .list-group {
99
- margin-top: ($card-padding-y - $card-inner-spacer-y);
100
- }
101
127
  }
102
128
 
103
129
  // Footer
104
130
 
105
131
  .card-footer {
106
- padding: $card-inner-spacer-y $card-padding-x;
107
-
108
- @each $color, $values in $theme-colors {
109
- &.border-#{$color} {
110
- border-top: $card-border-width solid theme-color($color);
111
- }
112
- }
132
+ border-top: $card-border-width solid $card-border-color;
133
+ padding: $card-padding-y $card-padding-x;
113
134
 
114
135
  &:first-child {
115
136
  @include border-top-radius($card-border-radius);
@@ -121,23 +142,6 @@
121
142
  @include border-bottom-radius($card-border-radius);
122
143
  }
123
144
 
124
- .card-body + &,
125
- .card-header + & {
126
- &[class*='border-'] {
127
- margin-top: ($card-padding-y - $card-inner-spacer-y);
128
- }
129
-
130
- &:not[class*='border-'] {
131
- padding-top: 0;
132
- }
133
- }
134
-
135
- .card-header[class*='border-'] + & {
136
- &[class*='border-'] {
137
- margin-top: ($card-border-width * -1);
138
- }
139
- }
140
-
141
145
  > :last-child {
142
146
  margin-bottom: 0;
143
147
  }
@@ -146,25 +150,9 @@
146
150
  // Header
147
151
 
148
152
  .card-header {
153
+ border-bottom: $card-border-width solid $card-border-color;
149
154
  margin-bottom: 0;
150
- padding: $card-inner-spacer-y $card-padding-x;
151
-
152
- @each $color, $values in $theme-colors {
153
- &.border-#{$color} {
154
- border-bottom: $card-border-width solid theme-color($color);
155
- }
156
- }
157
-
158
- &[class*='border-'] {
159
- padding-top: $card-padding-y;
160
- padding-bottom: $card-padding-y;
161
- }
162
-
163
- &:first-child,
164
- .card-img-top + &,
165
- .list-group + & {
166
- padding-top: $card-padding-y;
167
- }
155
+ padding: $card-padding-y $card-padding-x;
168
156
 
169
157
  &:first-child {
170
158
  @include border-top-radius($card-border-radius);
@@ -174,32 +162,17 @@
174
162
  @include border-bottom-radius($card-border-radius);
175
163
 
176
164
  border-bottom: 0;
177
- padding-bottom: $card-padding-y;
178
165
  }
179
166
 
180
- &:not([class*='border-']) {
181
- + .card-img-bottom,
182
- + .list-group {
183
- margin-top: ($card-padding-y - $card-inner-spacer-y);
184
- }
167
+ + .list-group .list-group-item:first-child {
168
+ border-top: 0;
185
169
  }
186
170
  }
187
171
 
188
172
  .card-header-pills {
189
- margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) 0;
173
+ margin: ($card-padding-y * -1) ($card-padding-x * -1);
190
174
  padding: $card-action-padding-y ($card-action-padding-x - $card-action-inner-spacer-x) ($card-action-padding-y - $card-action-inner-spacer-y) $card-action-padding-x;
191
175
 
192
- .card-header:first-child &,
193
- .card-header[class*='border-'] &,
194
- .card-img-top + .card-header & {
195
- margin-top: ($card-padding-y * -1);
196
- }
197
-
198
- .card-header:last-child &,
199
- .card-header[class*='border-'] & {
200
- margin-bottom: ($card-padding-y * -1);
201
- }
202
-
203
176
  .nav-link {
204
177
  margin-right: $card-action-inner-spacer-x;
205
178
  margin-bottom: $card-action-inner-spacer-y;
@@ -209,19 +182,7 @@
209
182
  }
210
183
 
211
184
  .card-header-tabs {
212
- margin: ($card-inner-spacer-y * -1) ($card-inner-spacer-x * -1) ($card-padding-y - $card-inner-spacer-y);
213
-
214
- .card-header:first-child &,
215
- .card-header[class*='border-'] &,
216
- .card-img-top + .card-header &,
217
- .list-group + .card-header & {
218
- margin-top: ($card-padding-y * -1);
219
- }
220
-
221
- .card-header[class*='border-'] &,
222
- .card-header:last-child & {
223
- margin-bottom: ($card-padding-y * -1);
224
- }
185
+ margin: ($card-padding-y * -1) ($card-padding-x * -1) calc(#{$card-padding-y * -1} - #{$card-border-width});
225
186
  }
226
187
 
227
188
  // Image
@@ -256,6 +217,8 @@
256
217
  column-gap: $card-margin-x;
257
218
  margin-top: ($card-margin-y / -2);
258
219
  margin-bottom: ($card-margin-y / 2);
220
+ orphans: 1;
221
+ widows: 1;
259
222
 
260
223
  @include media-breakpoint-up(md) {
261
224
  column-count: $card-columns-count-desktop;
@@ -295,7 +258,6 @@
295
258
  }
296
259
 
297
260
  .card {
298
- box-shadow: $shadow-1dp;
299
261
  margin-bottom: $card-margin-y;
300
262
 
301
263
  @include media-breakpoint-up(sm) {