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
@@ -121,25 +121,19 @@
121
121
  }
122
122
 
123
123
  // stylelint-disable selector-no-qualifying-type
124
- select {
125
- &.form-control {
126
- &[multiple],
127
- &[size] {
128
- @extend %form-textarea;
129
- }
124
+ select.form-control {
125
+ &[multiple],
126
+ &[size] {
127
+ @extend %form-textarea;
128
+ }
130
129
 
131
- &:not([multiple]):not([size]) {
132
- @extend %form-select;
133
- }
130
+ &:not([multiple]):not([size]) {
131
+ @extend %form-select;
134
132
  }
135
133
  }
136
- // stylelint-enable
137
134
 
138
- // stylelint-disable selector-no-qualifying-type
139
- textarea {
140
- &.form-control:not(.textarea-autosize) {
141
- @extend %form-textarea;
142
- }
135
+ textarea.form-control:not(.textarea-autosize) {
136
+ @extend %form-textarea;
143
137
  }
144
138
  // stylelint-enable
145
139
 
@@ -149,6 +143,7 @@ textarea {
149
143
  @include form-control-size($textfield-font-size, $textfield-height, $textfield-line-height, $textfield-padding-x, $textfield-padding-y);
150
144
 
151
145
  border-color: transparent;
146
+ color: $textfield-plaintext-color;
152
147
  display: block;
153
148
  width: 100%;
154
149
 
@@ -8,21 +8,6 @@
8
8
  padding: $toolbar-padding-y $toolbar-padding-x;
9
9
  position: relative;
10
10
 
11
- // Horizontally align `.dropdown-menu-right` in `.navbar`
12
-
13
- .dropdown-menu-right {
14
- right: 0;
15
- left: auto;
16
-
17
- &.menu::before {
18
- transform-origin: 100% ($menu-link-height / 2 + $menu-padding-y);
19
- }
20
-
21
- &::before {
22
- transform-origin: 100% 0;
23
- }
24
- }
25
-
26
11
  // Vertically align some elements normally placed in `.navbar`
27
12
 
28
13
  .form-control {
@@ -389,7 +374,6 @@
389
374
  @include set-material-icons;
390
375
 
391
376
  display: block;
392
- margin: auto;
393
377
 
394
378
  &::before {
395
379
  content: $toolbar-toggler-icon;
@@ -10,7 +10,7 @@
10
10
  word-break: break-word;
11
11
  z-index: $tooltip-zindex;
12
12
 
13
- @include media-breakpoint-up(md) {
13
+ @include media-breakpoint-up($tooltip-breakpoint) {
14
14
  font-size: $tooltip-font-size-desktop;
15
15
  margin: $tooltip-margin-desktop;
16
16
  }
@@ -34,7 +34,7 @@
34
34
  text-align: center;
35
35
  transform: scale($tooltip-scale);
36
36
 
37
- @include media-breakpoint-up(md) {
37
+ @include media-breakpoint-up($tooltip-breakpoint) {
38
38
  padding: $tooltip-padding-y-desktop $tooltip-padding-x-desktop;
39
39
  }
40
40
  }
@@ -137,7 +137,8 @@
137
137
  }
138
138
 
139
139
  .custom-select,
140
- .form-control {
140
+ .form-control,
141
+ .form-control-file {
141
142
  &.is-#{$state},
142
143
  .was-validated &:#{$state} {
143
144
  border-color: $color;
@@ -1,6 +1,6 @@
1
- @mixin nav-divider($bg: $black-divider) {
1
+ @mixin nav-divider($bg: $black-divider, $margin-y: $spacer-sm) {
2
2
  background-color: $bg;
3
3
  height: 1px;
4
- margin: $spacer-sm 0;
4
+ margin: $margin-y 0;
5
5
  overflow: hidden;
6
6
  }
@@ -1,7 +1,6 @@
1
1
  @mixin sr-only {
2
2
  border: 0;
3
3
  clip: rect(0, 0, 0, 0);
4
- clip-path: inset(50%);
5
4
  height: 1px;
6
5
  overflow: hidden;
7
6
  padding: 0;
@@ -14,7 +13,6 @@
14
13
  &:active,
15
14
  &:focus {
16
15
  clip: auto;
17
- clip-path: none;
18
16
  height: auto;
19
17
  overflow: visible;
20
18
  position: static;
@@ -4,4 +4,6 @@
4
4
  color: transparent;
5
5
  font: 0/0 a; // stylelint-disable-line font-family-no-missing-generic-family-keyword
6
6
  text-shadow: none;
7
+
8
+ @warn 'The `text-hide()` mixin has been deprecated as of v4.1.0. It will be removed entirely in v5.';
7
9
  }
@@ -12,6 +12,10 @@
12
12
  @include media-breakpoint-up(lg) {
13
13
  transition-duration: $transition-duration-desktop-leaving;
14
14
  }
15
+
16
+ @media screen and (prefers-reduced-motion: reduce) {
17
+ transition: none;
18
+ }
15
19
  }
16
20
 
17
21
  // Deceleration curve: entering the screen
@@ -28,6 +32,10 @@
28
32
  @include media-breakpoint-up(lg) {
29
33
  transition-duration: $transition-duration-desktop-entering;
30
34
  }
35
+
36
+ @media screen and (prefers-reduced-motion: reduce) {
37
+ transition: none;
38
+ }
31
39
  }
32
40
 
33
41
  // Sharp curve: temporarily leaving the screen
@@ -44,6 +52,10 @@
44
52
  @include media-breakpoint-up(lg) {
45
53
  transition-duration: $transition-duration-desktop-leaving;
46
54
  }
55
+
56
+ @media screen and (prefers-reduced-motion: reduce) {
57
+ transition: none;
58
+ }
47
59
  }
48
60
 
49
61
  // Standard curve: relative movement
@@ -60,6 +72,10 @@
60
72
  @include media-breakpoint-up(lg) {
61
73
  transition-duration: $transition-duration-desktop;
62
74
  }
75
+
76
+ @media screen and (prefers-reduced-motion: reduce) {
77
+ transition: none;
78
+ }
63
79
  }
64
80
 
65
81
  // Standard curve: relative movement - complex, full-screen, large transitions
@@ -76,4 +92,8 @@
76
92
  @include media-breakpoint-up(lg) {
77
93
  transition-duration: $transition-duration-desktop-complex;
78
94
  }
95
+
96
+ @media screen and (prefers-reduced-motion: reduce) {
97
+ transition: none;
98
+ }
79
99
  }
@@ -17,3 +17,8 @@
17
17
  @each $color, $values in $theme-colors {
18
18
  @include bg-variant('.bg-#{$color}', theme-color($color), theme-color-dark($color));
19
19
  }
20
+
21
+ @include bg-variant('.bg-primary-dark', theme-color-dark(primary));
22
+ @include bg-variant('.bg-primary-light', theme-color-light(primary));
23
+ @include bg-variant('.bg-secondary-dark', theme-color-dark(secondary));
24
+ @include bg-variant('.bg-secondary-light', theme-color-light(secondary));
@@ -96,16 +96,32 @@
96
96
  flex-direction: row-reverse !important;
97
97
  }
98
98
 
99
- // Flex wrap
99
+ // Flex
100
100
 
101
101
  .flex#{$infix}-fill {
102
102
  flex: 1 1 auto !important;
103
103
  }
104
104
 
105
+ .flex#{$infix}-grow-0 {
106
+ flex-grow: 0 !important;
107
+ }
108
+
109
+ .flex#{$infix}-grow-1 {
110
+ flex-grow: 1 !important;
111
+ }
112
+
105
113
  .flex#{$infix}-nowrap {
106
114
  flex-wrap: nowrap !important;
107
115
  }
108
116
 
117
+ .flex#{$infix}-shrink-0 {
118
+ flex-shrink: 0 !important;
119
+ }
120
+
121
+ .flex#{$infix}-shrink-1 {
122
+ flex-shrink: 1 !important;
123
+ }
124
+
109
125
  .flex#{$infix}-wrap {
110
126
  flex-wrap: wrap !important;
111
127
  }
@@ -2,6 +2,7 @@
2
2
 
3
3
  // Common values
4
4
 
5
+ // stylelint-disable-next-line scss/dollar-variable-default
5
6
  $positions: absolute, fixed, relative, static, sticky;
6
7
 
7
8
  @each $position in $positions {
@@ -0,0 +1,23 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ .shadow {
4
+ box-shadow: map-get($shadows, 8) !important;
5
+ }
6
+
7
+ .shadow-lg {
8
+ box-shadow: map-get($shadows, 24) !important;
9
+ }
10
+
11
+ .shadow-none {
12
+ box-shadow: none !important;
13
+ }
14
+
15
+ .shadow-sm {
16
+ box-shadow: map-get($shadows, 2) !important;
17
+ }
18
+
19
+ @each $shadow, $value in $shadows {
20
+ .shadow-#{$shadow} {
21
+ box-shadow: $value !important;
22
+ }
23
+ }
@@ -50,6 +50,24 @@
50
50
  @include text-emphasis-variant('.text-#{$color}', theme-color($color), theme-color-dark($color));
51
51
  }
52
52
 
53
+ .text-black-50 {
54
+ color: rgba($black, 0.5) !important;
55
+ }
56
+
57
+ .text-body {
58
+ color: $body-color !important;
59
+ }
60
+
61
+ .text-white-50 {
62
+ color: rgba($white, 0.5) !important;
63
+ }
64
+
65
+ // Family
66
+
67
+ .text-monospace {
68
+ font-family: $font-family-monospace;
69
+ }
70
+
53
71
  // Italcs and weight
54
72
 
55
73
  .font-italic {
@@ -1,14 +1,16 @@
1
1
  // Elevation
2
2
  // Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-
3
3
 
4
- $elevation-24dp: 24 * 10 !default;
5
- $elevation-16dp: 16 * 10 !default;
6
- $elevation-12dp: 12 * 10 !default;
7
- $elevation-8dp: 8 * 10 !default;
8
- $elevation-6dp: 6 * 10 !default;
9
- $elevation-4dp: 4 * 10 !default;
10
- $elevation-2dp: 2 * 10 !default;
11
- $elevation-1dp: 1 * 10 !default;
4
+ $elevations: (
5
+ 24: (24 * 10),
6
+ 16: (16 * 10),
7
+ 12: (12 * 10),
8
+ 8: (8 * 10),
9
+ 6: (6 * 10),
10
+ 4: (4 * 10),
11
+ 2: (2 * 10),
12
+ 1: (1 * 10)
13
+ ) !default;
12
14
 
13
15
  // Shadow
14
16
  // Based on https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows
@@ -17,47 +19,51 @@ $shadow-color-1: rgba(0, 0, 0, 0.14) !default;
17
19
  $shadow-color-2: rgba(0, 0, 0, 0.12) !default;
18
20
  $shadow-color-3: rgba(0, 0, 0, 0.2) !default;
19
21
 
20
- $shadow-24dp: 0 24px 38px 3px $shadow-color-1, 0 9px 46px 8px $shadow-color-2, 0 11px 15px 0 $shadow-color-3 !default;
21
- $shadow-16dp: 0 16px 24px 2px $shadow-color-1, 0 6px 30px 5px $shadow-color-2, 0 8px 10px 0 $shadow-color-3 !default;
22
- $shadow-12dp: 0 12px 17px 2px $shadow-color-1, 0 5px 22px 4px $shadow-color-2, 0 7px 8px 0 $shadow-color-3 !default;
23
- $shadow-8dp: 0 8px 10px 1px $shadow-color-1, 0 3px 14px 3px $shadow-color-2, 0 4px 15px 0 $shadow-color-3 !default;
24
- $shadow-6dp: 0 6px 10px 0 $shadow-color-1, 0 1px 18px 0 $shadow-color-2, 0 3px 5px 0 $shadow-color-3 !default;
25
- $shadow-4dp: 0 2px 4px 0 $shadow-color-1, 0 4px 5px 0 $shadow-color-2, 0 1px 10px 0 $shadow-color-3 !default;
26
- $shadow-2dp: 0 0 4px 0 $shadow-color-1, 0 3px 4px 0 $shadow-color-2, 0 1px 5px 0 $shadow-color-3 !default;
27
- $shadow-1dp: 0 0 2px 0 $shadow-color-1, 0 2px 2px 0 $shadow-color-2, 0 1px 3px 0 $shadow-color-3 !default;
22
+ $shadows: (
23
+ 24: unquote('0 24px 38px 3px #{$shadow-color-1}, 0 9px 46px 8px #{$shadow-color-2}, 0 11px 15px 0 #{$shadow-color-3}'),
24
+ 16: unquote('0 16px 24px 2px #{$shadow-color-1}, 0 6px 30px 5px #{$shadow-color-2}, 0 8px 10px 0 #{$shadow-color-3}'),
25
+ 12: unquote('0 12px 17px 2px #{$shadow-color-1}, 0 5px 22px 4px #{$shadow-color-2}, 0 7px 8px 0 #{$shadow-color-3}'),
26
+ 8: unquote('0 8px 10px 1px #{$shadow-color-1}, 0 3px 14px 3px #{$shadow-color-2}, 0 4px 15px 0 #{$shadow-color-3}'),
27
+ 6: unquote('0 6px 10px 0 #{$shadow-color-1}, 0 1px 18px 0 #{$shadow-color-2}, 0 3px 5px 0 #{$shadow-color-3}'),
28
+ 4: unquote('0 2px 4px 0 #{$shadow-color-1}, 0 4px 5px 0 #{$shadow-color-2}, 0 1px 10px 0 #{$shadow-color-3}'),
29
+ 2: unquote('0 0 4px 0 #{$shadow-color-1}, 0 3px 4px 0 #{$shadow-color-2}, 0 1px 5px 0 #{$shadow-color-3}'),
30
+ 1: unquote('0 0 2px 0 #{$shadow-color-1}, 0 2px 2px 0 #{$shadow-color-2}, 0 1px 3px 0 #{$shadow-color-3}')
31
+ ) !default;
28
32
 
29
33
  // Value pair
30
34
  // Combination of elevation and shadow
31
35
 
32
- $elevation-shadow-24dp: (
33
- elevation: $elevation-24dp,
34
- shadow: $shadow-24dp
35
- ) !default;
36
- $elevation-shadow-16dp: (
37
- elevation: $elevation-16dp,
38
- shadow: $shadow-16dp
39
- ) !default;
40
- $elevation-shadow-12dp: (
41
- elevation: $elevation-12dp,
42
- shadow: $shadow-12dp
43
- ) !default;
44
- $elevation-shadow-8dp: (
45
- elevation: $elevation-8dp,
46
- shadow: $shadow-8dp
47
- ) !default;
48
- $elevation-shadow-6dp: (
49
- elevation: $elevation-6dp,
50
- shadow: $shadow-6dp
51
- ) !default;
52
- $elevation-shadow-4dp: (
53
- elevation: $elevation-4dp,
54
- shadow: $shadow-4dp
55
- ) !default;
56
- $elevation-shadow-2dp: (
57
- elevation: $elevation-2dp,
58
- shadow: $shadow-2dp
59
- ) !default;
60
- $elevation-shadow-1dp: (
61
- elevation: $elevation-1dp,
62
- shadow: $shadow-1dp
36
+ $elevation-shadows: (
37
+ 24: (
38
+ elevation: map-get($elevations, 24),
39
+ shadow: map-get($shadows, 4)
40
+ ),
41
+ 16: (
42
+ elevation: map-get($elevations, 16),
43
+ shadow: map-get($shadows, 6)
44
+ ),
45
+ 12: (
46
+ elevation: map-get($elevations, 12),
47
+ shadow: map-get($shadows, 2)
48
+ ),
49
+ 8: (
50
+ elevation: map-get($elevations, 8),
51
+ shadow: map-get($shadows, 8)
52
+ ),
53
+ 6: (
54
+ elevation: map-get($elevations, 6),
55
+ shadow: map-get($shadows, 6)
56
+ ),
57
+ 4: (
58
+ elevation: map-get($elevations, 4),
59
+ shadow: map-get($shadows, 4)
60
+ ),
61
+ 2: (
62
+ elevation: map-get($elevations, 2),
63
+ shadow: map-get($shadows, 2)
64
+ ),
65
+ 1: (
66
+ elevation: map-get($elevations, 1),
67
+ shadow: map-get($shadows, 1)
68
+ )
63
69
  ) !default;
@@ -50,16 +50,17 @@ $light: (
50
50
  ) !default;
51
51
 
52
52
  $theme-colors: () !default;
53
+ // stylelint-disable-next-line scss/dollar-variable-default
53
54
  $theme-colors: map-merge(
54
55
  (
55
- 'primary': $primary,
56
- 'secondary': $secondary,
57
- 'danger': $danger,
58
- 'info': $info,
59
- 'success': $success,
60
- 'warning': $warning,
61
- 'dark': $dark,
62
- 'light': $light
56
+ primary: $primary,
57
+ secondary: $secondary,
58
+ danger: $danger,
59
+ info: $info,
60
+ success: $success,
61
+ warning: $warning,
62
+ dark: $dark,
63
+ light: $light
63
64
  ),
64
65
  $theme-colors
65
66
  );
@@ -4,6 +4,7 @@ $border-radius: 2px !default;
4
4
  $border-width: 1px !default;
5
5
 
6
6
  $sizes: () !default;
7
+ // stylelint-disable-next-line scss/dollar-variable-default
7
8
  $sizes: map-merge(
8
9
  (
9
10
  25: 25%,
@@ -23,6 +24,7 @@ $spacer-lg: ($spacer * 1.5) !default;
23
24
  $spacer-xl: ($spacer * 3) !default;
24
25
 
25
26
  $spacers: () !default;
27
+ // stylelint-disable-next-line scss/dollar-variable-default
26
28
  $spacers: map-merge(
27
29
  (
28
30
  0: 0,