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.
- checksums.yaml +4 -4
- data/README.md +5 -3
- data/Rakefile +4 -4
- data/assets/javascripts/material-sprockets.js +0 -1
- data/assets/javascripts/material.js +2994 -2927
- data/assets/javascripts/material.min.js +10 -10
- data/assets/javascripts/material/components/expansion-panel.js +1 -3
- data/assets/javascripts/material/components/floating-label.js +2 -3
- data/assets/javascripts/material/components/nav-drawer.js +10 -32
- data/assets/javascripts/material/components/pickdate.js +228 -0
- data/assets/javascripts/material/components/selection-control-focus.js +2 -2
- data/assets/javascripts/material/components/tab-switch.js +4 -20
- data/assets/javascripts/material/components/util.js +16 -1
- data/assets/stylesheets/material/_colors.scss +2 -0
- data/assets/stylesheets/material/_functions.scss +6 -0
- data/assets/stylesheets/material/_mixins.scss +0 -2
- data/assets/stylesheets/material/_print.scss +26 -1
- data/assets/stylesheets/material/_utilities.scss +1 -0
- data/assets/stylesheets/material/base/_base.scss +5 -2
- data/assets/stylesheets/material/bootstrap/_breadcrumb.scss +10 -7
- data/assets/stylesheets/material/bootstrap/_popover.scss +1 -2
- data/assets/stylesheets/material/bootstrap/_transition.scss +6 -10
- data/assets/stylesheets/material/material.scss +2 -0
- data/assets/stylesheets/material/material/_card.scss +58 -96
- data/assets/stylesheets/material/material/_chip.scss +1 -0
- data/assets/stylesheets/material/material/_data-table.scss +57 -1
- data/assets/stylesheets/material/material/_dialog.scss +2 -2
- data/assets/stylesheets/material/material/_expansion-panel.scss +4 -0
- data/assets/stylesheets/material/material/_menu.scss +164 -54
- data/assets/stylesheets/material/material/_navdrawer.scss +5 -6
- data/assets/stylesheets/material/material/_picker.scss +78 -67
- data/assets/stylesheets/material/material/_progress.scss +1 -6
- data/assets/stylesheets/material/material/_selection-control.scss +1 -1
- data/assets/stylesheets/material/material/_slider.scss +157 -0
- data/assets/stylesheets/material/material/_snackbar.scss +125 -0
- data/assets/stylesheets/material/material/_text-field-input-group.scss +101 -10
- data/assets/stylesheets/material/material/_text-field.scss +10 -15
- data/assets/stylesheets/material/material/_toolbar.scss +0 -16
- data/assets/stylesheets/material/material/_tooltip.scss +2 -2
- data/assets/stylesheets/material/mixins/_form.scss +2 -1
- data/assets/stylesheets/material/mixins/_nav-divider.scss +2 -2
- data/assets/stylesheets/material/mixins/_screenreader.scss +0 -2
- data/assets/stylesheets/material/mixins/_text-hide.scss +2 -0
- data/assets/stylesheets/material/mixins/_transition.scss +20 -0
- data/assets/stylesheets/material/utilities/_background.scss +5 -0
- data/assets/stylesheets/material/utilities/_flex.scss +17 -1
- data/assets/stylesheets/material/utilities/_position.scss +1 -0
- data/assets/stylesheets/material/utilities/_shadows.scss +23 -0
- data/assets/stylesheets/material/utilities/_text.scss +18 -0
- data/assets/stylesheets/material/variables/_elevation-shadow.scss +53 -47
- data/assets/stylesheets/material/variables/_palette.scss +9 -8
- data/assets/stylesheets/material/variables/_spacer.scss +2 -0
- data/assets/stylesheets/material/variables/_transition.scss +2 -0
- data/assets/stylesheets/material/variables/_typography.scss +3 -3
- data/assets/stylesheets/material/variables/_variable-bootstrap.scss +9 -8
- data/assets/stylesheets/material/variables/_variable-material.scss +56 -18
- data/lib/material-sass/version.rb +1 -1
- metadata +6 -6
- data/assets/javascripts/material/addons/pickadate.js +0 -152
- data/assets/stylesheets/material.min.css +0 -13
- data/assets/stylesheets/material/mixins/_hex-to-rgba.scss +0 -3
- 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.
|
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
|
@@ -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
|
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
|
}
|
@@ -22,7 +22,7 @@
|
|
22
22
|
--font-family-serif: #{inspect($font-family-serif)};
|
23
23
|
}
|
24
24
|
|
25
|
-
// stylelint-disable
|
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
|
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
|
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(
|
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
|
-
|
12
|
-
|
13
|
-
|
14
|
-
}
|
9
|
+
// stylelint-disable-next-line selector-no-qualifying-type
|
10
|
+
tbody.collapse.show {
|
11
|
+
display: table-row-group;
|
15
12
|
}
|
16
13
|
|
17
|
-
|
18
|
-
|
19
|
-
|
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
|
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
|
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-
|
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
|
-
|
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-
|
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
|
-
|
181
|
-
|
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-
|
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-
|
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) {
|