material-sass 4.0.0.alpha5 → 4.0.0.alpha6

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 (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/material/addons-materialise/textarea-autosize.js +7 -5
  3. data/app/assets/javascripts/material/addons-materialise/wave.js +11 -8
  4. data/app/assets/javascripts/material/src/floating-label.js +5 -5
  5. data/app/assets/javascripts/material/src/navdrawer.js +7 -7
  6. data/app/assets/javascripts/material/src/tab-switch.js +15 -18
  7. data/app/assets/javascripts/material/src/util.js +1 -1
  8. data/app/assets/javascripts/material.js +24 -27
  9. data/app/assets/stylesheets/material/_mixins.scss +2 -0
  10. data/app/assets/stylesheets/material/_utilities.scss +3 -0
  11. data/app/assets/stylesheets/material/_variables.scss +24 -2
  12. data/app/assets/stylesheets/material/base/_base.scss +5 -482
  13. data/app/assets/stylesheets/material/base/_grid.scss +11 -0
  14. data/app/assets/stylesheets/material/base/_normalize.scss +253 -0
  15. data/app/assets/stylesheets/material/base/_reboot.scss +239 -0
  16. data/app/assets/stylesheets/material/base/_typography.scss +0 -10
  17. data/app/assets/stylesheets/material/bootstrap/_alert.scss +0 -1
  18. data/app/assets/stylesheets/material/bootstrap/_breadcrumb.scss +15 -10
  19. data/app/assets/stylesheets/material/bootstrap/_button-group.scss +21 -42
  20. data/app/assets/stylesheets/material/bootstrap/_carousel.scss +81 -126
  21. data/app/assets/stylesheets/material/bootstrap/_close.scss +1 -4
  22. data/app/assets/stylesheets/material/bootstrap/_custom-form.scss +14 -16
  23. data/app/assets/stylesheets/material/bootstrap/_form.scss +95 -52
  24. data/app/assets/stylesheets/material/bootstrap/_media.scss +6 -67
  25. data/app/assets/stylesheets/material/bootstrap/_nav.scss +23 -45
  26. data/app/assets/stylesheets/material/bootstrap/_pagination.scss +4 -14
  27. data/app/assets/stylesheets/material/bootstrap/_popover.scss +7 -5
  28. data/app/assets/stylesheets/material/bootstrap/_responsive-embed.scss +18 -5
  29. data/app/assets/stylesheets/material/bootstrap/{_animation.scss → _transition.scss} +11 -2
  30. data/app/assets/stylesheets/material/material/_card.scss +185 -123
  31. data/app/assets/stylesheets/material/material/_chip.scss +12 -12
  32. data/app/assets/stylesheets/material/material/_data-table.scss +0 -2
  33. data/app/assets/stylesheets/material/material/_dialog.scss +23 -17
  34. data/app/assets/stylesheets/material/material/_expansion-panel.scss +42 -183
  35. data/app/assets/stylesheets/material/material/_menu.scss +19 -4
  36. data/app/assets/stylesheets/material/material/_navdrawer.scss +16 -12
  37. data/app/assets/stylesheets/material/material/_progress-circular.scss +2 -2
  38. data/app/assets/stylesheets/material/material/_progress.scss +68 -92
  39. data/app/assets/stylesheets/material/material/_selection-control.scss +11 -28
  40. data/app/assets/stylesheets/material/material/_tab.scss +52 -117
  41. data/app/assets/stylesheets/material/material/_text-field-floating-label.scss +9 -4
  42. data/app/assets/stylesheets/material/material/_text-field-input-group.scss +37 -35
  43. data/app/assets/stylesheets/material/material/_text-field.scss +41 -32
  44. data/app/assets/stylesheets/material/material/_toolbar.scss +192 -306
  45. data/app/assets/stylesheets/material/material/_tooltip.scss +19 -20
  46. data/app/assets/stylesheets/material/material.scss +2 -2
  47. data/app/assets/stylesheets/material/mixins/_border-radius.scss +9 -19
  48. data/app/assets/stylesheets/material/mixins/_breakpoint.scss +11 -3
  49. data/app/assets/stylesheets/material/mixins/_form.scss +15 -30
  50. data/app/assets/stylesheets/material/mixins/_grid-framework.scss +58 -0
  51. data/app/assets/stylesheets/material/mixins/_grid.scss +6 -78
  52. data/app/assets/stylesheets/material/mixins/_transform.scss +9 -0
  53. data/app/assets/stylesheets/material/utilities/_border.scss +31 -5
  54. data/app/assets/stylesheets/material/utilities/_display.scss +37 -8
  55. data/app/assets/stylesheets/material/utilities/_flex.scss +140 -0
  56. data/app/assets/stylesheets/material/utilities/_float.scss +5 -3
  57. data/app/assets/stylesheets/material/utilities/_position.scss +24 -0
  58. data/app/assets/stylesheets/material/utilities/_sizing.scss +16 -0
  59. data/app/assets/stylesheets/material/utilities/_spacing.scss +56 -46
  60. data/app/assets/stylesheets/material/utilities/_text.scss +5 -3
  61. data/app/assets/stylesheets/material/variables/_grid.scss +16 -10
  62. data/app/assets/stylesheets/material/variables/_spacer.scss +22 -3
  63. data/app/assets/stylesheets/material/variables/_typography.scss +2 -0
  64. data/app/assets/stylesheets/material/variables/_variable-bootstrap.scss +24 -17
  65. data/app/assets/stylesheets/material/variables/_variable-material.scss +47 -52
  66. data/lib/material-sass/version.rb +1 -1
  67. metadata +9 -2
@@ -6,116 +6,54 @@
6
6
  overflow: hidden;
7
7
  position: relative;
8
8
  width: 100%;
9
+ }
9
10
 
10
- > .carousel-item {
11
- display: none;
12
- position: relative;
13
- @include transition-standard(left);
14
-
15
- > img,
16
- > a > img {
17
- @include img-fluid;
18
- line-height: 1;
19
- }
20
- }
11
+ .carousel-item {
12
+ display: none;
13
+ position: relative;
14
+ width: 100%;
21
15
 
22
- @media all and (transform-3d), (-webkit-transform-3d) {
16
+ @include if-supports-3d-transforms() {
23
17
  backface-visibility: hidden;
24
18
  perspective: 1000px;
25
19
  @include transition-standard(transform);
26
-
27
- &.active {
28
- // position
29
- left: 0;
30
- transform: translate3d(0, 0, 0);
31
- }
32
-
33
- &.active.left {
34
- // position
35
- left: 0;
36
- transform: translate3d(-100%, 0, 0);
37
- }
38
-
39
- &.active.right {
40
- // position
41
- left: 0;
42
- transform: translate3d(100%, 0, 0);
43
- }
44
-
45
- &.next {
46
- // position
47
- left: 0;
48
- transform: translate3d(100%, 0, 0);
49
- }
50
-
51
- &.next.left {
52
- // position
53
- left: 0;
54
- transform: translate3d(0, 0, 0);
55
- }
56
-
57
- &.prev {
58
- // position
59
- left: 0;
60
- transform: translate3d(-100%, 0, 0);
61
- }
62
-
63
- &.prev.right {
64
- // position
65
- left: 0;
66
- transform: translate3d(0, 0, 0);
67
- }
68
- }
69
-
70
- > .active,
71
- > .next,
72
- > .prev {
73
- display: block;
74
- }
75
-
76
- > .active {
77
- // position
78
- left: 0;
79
- }
80
-
81
- > .active.left {
82
- // position
83
- left: -100%;
84
20
  }
21
+ }
85
22
 
86
- > .active.right {
87
- // position
88
- left: 100%;
89
- }
23
+ .carousel-item.active,
24
+ .carousel-item-next,
25
+ .carousel-item-prev {
26
+ display: flex;
27
+ }
90
28
 
91
- > .next,
92
- > .prev {
93
- position: absolute;
94
- top: 0;
95
- width: 100%;
96
- }
29
+ .carousel-item-next,
30
+ .carousel-item-prev {
31
+ position: absolute;
32
+ top: 0;
33
+ }
97
34
 
98
- > .next {
99
- // position
100
- left: 100%;
35
+ @include if-supports-3d-transforms() {
36
+ .carousel-item-next.carousel-item-left,
37
+ .carousel-item-prev.carousel-item-right {
38
+ transform: translate3d(0, 0, 0);
101
39
  }
102
40
 
103
- > .prev {
104
- // position
105
- left: -100%;
41
+ .carousel-item-next,
42
+ .active.carousel-item-right {
43
+ transform: translate3d(100%, 0, 0);
106
44
  }
107
45
 
108
- > .next.left,
109
- > .prev.right {
110
- // position
111
- left: 0;
46
+ .carousel-item-prev,
47
+ .active.carousel-item-left {
48
+ transform: translate3d(-100%, 0, 0);
112
49
  }
113
50
  }
114
51
 
115
52
  //
116
53
  // left/right controls
117
54
  //
118
- .carousel-control {
55
+ .carousel-control-next,
56
+ .carousel-control-prev {
119
57
  background-color: $btn-bg;
120
58
  border-radius: 50%;
121
59
  box-shadow: map-get($btn-float-elevation-shadow, shadow);
@@ -126,6 +64,7 @@
126
64
  height: $btn-float-size-sm;
127
65
  line-height: $btn-float-size-sm;
128
66
  margin-top: ($btn-float-size-sm / -2);
67
+ opacity: 0;
129
68
  position: absolute;
130
69
  top: 50%;
131
70
  text-align: center;
@@ -134,26 +73,12 @@
134
73
  vertical-align: middle;
135
74
  white-space: nowrap;
136
75
  width: $btn-float-size-sm;
137
- z-index: map-get($btn-elevation-shadow, elevation);
138
-
139
- &.left {
140
- // position
141
- left: ($btn-float-size-sm / 2);
142
- }
143
-
144
- &.right {
145
- // position
146
- right: ($btn-float-size-sm / 2);
147
- }
148
76
 
149
77
  // active, focus, hover
150
78
  @include active-focus-hover {
151
79
  background-color: $btn-bg-active;
152
80
  color: $btn-color;
153
-
154
- @if ($link-decoration-active != "none") {
155
- text-decoration: none;
156
- }
81
+ text-decoration: none;
157
82
  }
158
83
 
159
84
  &:active {
@@ -163,28 +88,57 @@
163
88
  &:focus {
164
89
  outline: 0;
165
90
  }
91
+ }
166
92
 
167
- .icon-next,
168
- .icon-prev {
169
- display: inline-block;
170
- font-size: $material-icon-size;
93
+ // active, focus, hover
94
+ .carousel {
95
+ @include hover {
96
+ .carousel-control-next,
97
+ .carousel-control-prev {
98
+ opacity: 1;
99
+ }
100
+ }
171
101
  }
172
102
 
173
- .icon-next::before {
174
- content: "\203a";
175
- }
103
+ .carousel-control-next {
104
+ // position
105
+ right: ($btn-float-size-sm / 2);
106
+ }
176
107
 
177
- .icon-prev::before {
178
- content: "\2039";
179
- }
108
+ .carousel-control-prev {
109
+ // position
110
+ left: ($btn-float-size-sm / 2);
111
+ }
112
+
113
+ .carousel-control-next-icon,
114
+ .carousel-control-prev-icon {
115
+ background-color: transparent;
116
+ background-position: 50% 50%;
117
+ background-repeat: no-repeat;
118
+ background-size: $material-icon-size $material-icon-size;
119
+ display: block;
120
+ height: $btn-float-size-sm;
121
+ opacity: $carousel-control-icon-opacity;
122
+ width: $btn-float-size-sm;
180
123
  }
181
124
 
182
- .carousel {
183
- @include hover {
184
- .carousel-control {
185
- opacity: 1;
125
+ // active, focus, hover
126
+ .carousel-control-next,
127
+ .carousel-control-prev {
128
+ @include active-focus-hover {
129
+ .carousel-control-next-icon,
130
+ .carousel-control-prev-icon {
131
+ opacity: 1;
132
+ }
186
133
  }
187
- };
134
+ }
135
+
136
+ .carousel-control-next-icon {
137
+ background-image: $carousel-control-next-icon-bg;
138
+ }
139
+
140
+ .carousel-control-prev-icon {
141
+ background-image: $carousel-control-prev-icon-bg;
188
142
  }
189
143
 
190
144
  //
@@ -194,7 +148,7 @@
194
148
  color: $carousel-caption-color;
195
149
  position: absolute;
196
150
  right: ((100% - $carousel-caption-width) / 2);
197
- bottom: ($carousel-indicator-size * 2);
151
+ bottom: ($carousel-indicator-size * 3);
198
152
  left: ((100% - $carousel-caption-width) / 2);
199
153
  text-align: center;
200
154
  z-index: 1;
@@ -204,14 +158,15 @@
204
158
  // optional indicators
205
159
  //
206
160
  .carousel-indicators {
161
+ display: flex;
162
+ justify-content: center;
207
163
  list-style: none;
208
164
  margin-bottom: 0;
209
165
  padding-left: 0;
210
166
  position: absolute;
211
- right: ($btn-float-size-sm / -2);
167
+ right: ($btn-float-size-sm * 2);
212
168
  bottom: $carousel-indicator-size;
213
- left: ($btn-float-size-sm / -2);
214
- text-align: center;
169
+ left: ($btn-float-size-sm * 2);
215
170
  z-index: 1;
216
171
 
217
172
  li {
@@ -219,7 +174,7 @@
219
174
  border: 1px solid $carousel-indicator-color;
220
175
  border-radius: $carousel-indicator-size;
221
176
  cursor: pointer;
222
- display: inline-block;
177
+ flex: 0 0 auto;
223
178
  height: $carousel-indicator-size;
224
179
  margin-right: 1px;
225
180
  margin-left: 1px;
@@ -10,10 +10,7 @@
10
10
  // active, focus, hover
11
11
  @include active-focus-hover {
12
12
  color: $close-color-active;
13
-
14
- @if ($link-decoration-active != "none") {
15
- text-decoration: none;
16
- }
13
+ text-decoration: none;
17
14
  }
18
15
 
19
16
  &:focus {
@@ -9,7 +9,7 @@
9
9
  //
10
10
  .custom-file {
11
11
  cursor: pointer;
12
- display: block;
12
+ display: inline-block;
13
13
  height: $textfield-height;
14
14
  max-width: 100%;
15
15
  position: relative;
@@ -25,38 +25,36 @@
25
25
  left: 0;
26
26
  user-select: none;
27
27
  z-index: 1;
28
- @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-line-height, $textfield-margin-bottom, $textfield-padding-top);
28
+ @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
29
29
  @include transition-standard(border-bottom-color);
30
30
 
31
- @each $lang, $text in map-get($custom-file-text, placeholder) {
31
+ @each $lang, $text in $custom-file-text {
32
32
  &:lang(#{$lang})::after {
33
33
  content: $text;
34
34
  }
35
35
  }
36
36
 
37
37
  &::before {
38
- @include reset-to-material-icons($textfield-font-size);
39
- color: $textfield-hint-color;
40
- height: $textfield-height;
41
- padding-top: $textfield-padding-top;
38
+ background-color: transparent;
39
+ background-image: $custom-file-button-bg;
40
+ background-position: 50% 50%;
41
+ background-repeat: no-repeat;
42
+ background-size: $material-icon-size $material-icon-size;
43
+ content: "";
44
+ opacity: $custom-file-button-opacity;
42
45
  position: absolute;
43
- top: 0;
46
+ top: $textfield-padding-top;
44
47
  right: 0;
45
48
  bottom: 0;
49
+ width: $material-icon-size;
46
50
  z-index: 2;
47
- @include transition-standard(color);
48
- }
49
-
50
- @each $lang, $text in map-get($custom-file-text, button-label) {
51
- &:lang(#{$lang})::before {
52
- content: $text;
53
- }
51
+ @include transition-standard(opacity);
54
52
  }
55
53
 
56
54
  // active, focus, hover
57
55
  @include active-focus-hover {
58
56
  &::before {
59
- color: $textfield-color;
57
+ opacity: $custom-file-button-opacity-visible;
60
58
  }
61
59
  }
62
60
  }
@@ -4,7 +4,6 @@
4
4
  .form-check {
5
5
  display: block;
6
6
  margin-bottom: $textfield-margin-bottom;
7
- position: relative;
8
7
 
9
8
  // disabled
10
9
  &.disabled {
@@ -13,62 +12,27 @@
13
12
  cursor: $cursor-disabled;
14
13
  }
15
14
  }
16
-
17
- @include media-breakpoint-up(sm) {
18
- .form-inline & {
19
- display: inline-block;
20
- margin-top: 0;
21
- margin-bottom: 0;
22
- vertical-align: middle;
23
- }
24
- }
25
15
  }
26
16
 
27
17
  .form-check-input {
28
- margin-top: 0.25rem;
29
- margin-left: -1.25rem;
30
- position: absolute;
31
- // &:only-child {
32
- // position: static;
33
- // }
34
-
35
- @include media-breakpoint-up(sm) {
36
- .form-inline & {
37
- margin-left: 0;
38
- position: relative;
39
- }
40
- }
18
+ margin-right: $form-check-input-margin-x;
41
19
  }
42
20
 
43
21
  .form-check-label {
22
+ align-items: center;
44
23
  cursor: pointer;
24
+ display: inline-flex;
45
25
  margin-bottom: 0;
46
- min-height: $font-size-base;
47
- padding-left: 1.25rem;
48
-
49
- @include media-breakpoint-up(sm) {
50
- .form-inline & {
51
- padding-left: 0;
52
- }
53
- }
54
26
  }
55
27
 
56
28
  // inline
57
29
  .form-check-inline {
58
- cursor: pointer;
59
30
  display: inline-block;
60
31
  margin-bottom: 0;
61
- padding-left: 1.25rem;
62
- position: relative;
63
32
  vertical-align: middle;
64
33
 
65
- // disabled
66
- &.disabled {
67
- cursor: $cursor-disabled;
68
- }
69
-
70
34
  + .form-check-inline {
71
- margin-left: (1.25rem - 0.75rem);
35
+ margin-left: $form-check-inline-margin-x;
72
36
  }
73
37
  }
74
38
 
@@ -78,39 +42,118 @@
78
42
  .form-group {
79
43
  margin-bottom: $form-group-margin-bottom;
80
44
 
45
+ &:not(.floating-label) label:not(.form-check-label) {
46
+ font-size: $form-group-label-font-size;
47
+ margin-bottom: 0;
48
+ }
49
+ }
50
+
51
+ //
52
+ // inline
53
+ //
54
+ .form-inline {
55
+ align-items: center;
56
+ display: flex;
57
+ flex-flow: row wrap;
58
+
59
+ .form-check {
60
+ width: 100%;
61
+ }
62
+
81
63
  @include media-breakpoint-up(sm) {
82
- .form-inline & {
83
- display: inline-block;
64
+ label {
65
+ align-items: center;
66
+ display: flex;
67
+ justify-content: center;
68
+ margin-bottom: 0;
69
+ }
70
+
71
+ .form-check {
84
72
  margin-bottom: 0;
73
+ width: auto;
74
+ }
75
+
76
+ .form-control {
77
+ display: inline-block;
85
78
  vertical-align: middle;
79
+ width: auto;
80
+ }
81
+
82
+ .form-control-static {
83
+ display: inline-block;
84
+ }
85
+
86
+ .form-group {
87
+ align-items: center;
88
+ display: flex;
89
+ flex: 0 0 auto;
90
+ flex-flow: row wrap;
91
+ margin-bottom: 0;
92
+ }
93
+
94
+ .input-group {
95
+ width: auto;
86
96
  }
87
97
  }
88
98
  }
89
99
 
90
100
  //
91
- // misc
101
+ // label
92
102
  //
93
- .form-control-file,
94
- .form-control-range {
95
- display: block;
103
+ .col-form-label {
104
+ line-height: ($textfield-height - $textfield-padding-top - $textfield-padding-bottom);
105
+ padding-top: $textfield-padding-top;
106
+ padding-bottom: $textfield-padding-bottom;
96
107
  }
97
108
 
98
- .form-control-file {
99
- margin-top: $textfield-margin-bottom;
100
- margin-bottom: $textfield-margin-bottom;
109
+ .col-form-label-lg {
110
+ line-height: ($textfield-height-lg - $textfield-padding-top-lg - $textfield-padding-bottom-lg);
111
+ padding-top: $textfield-padding-top-lg;
112
+ padding-bottom: $textfield-padding-bottom-lg;
113
+ }
114
+
115
+ .col-form-label-sm {
116
+ line-height: ($textfield-height-sm - $textfield-padding-top-sm - $textfield-padding-bottom-sm);
117
+ padding-top: $textfield-padding-top-sm;
118
+ padding-bottom: $textfield-padding-bottom-sm;
101
119
  }
102
120
 
121
+ .col-form-legend {
122
+ font-size: $font-size-base;
123
+ margin-bottom: 0;
124
+ padding-top: $textfield-padding-top;
125
+ padding-bottom: $textfield-padding-bottom;
126
+
127
+ .form-group & {
128
+ font-size: $form-group-label-font-size;
129
+ }
130
+ }
131
+
132
+ //
133
+ // misc
134
+ //
135
+ .form-control-feedback,
103
136
  .form-text {
104
137
  display: block;
105
138
  margin-top: $textfield-margin-bottom;
106
139
 
107
140
  .form-control-lg + &,
108
- .textfield-lg + & {
141
+ .form-control-static-lg + & {
109
142
  margin-top: $textfield-margin-bottom-lg;
110
143
  }
111
144
 
112
- .form-control-sm + &,
113
- .textfield-sm + & {
145
+ .form-control-sm + &,,
146
+ .form-control-static-sm + & {
114
147
  margin-top: $textfield-margin-bottom-sm;
115
148
  }
116
149
  }
150
+
151
+ .form-control-file,
152
+ .form-control-range {
153
+ display: block;
154
+ }
155
+
156
+ .form-control-file {
157
+ margin-top: $textfield-padding-top;
158
+ margin-bottom: $textfield-margin-bottom;
159
+ }
@@ -1,69 +1,8 @@
1
- @if $enable-flex {
2
- .media {
3
- display: flex;
4
- }
5
-
6
- .media-body {
7
- flex: 1;
8
- }
9
-
10
- .media-bottom {
11
- align-self: flex-end;
12
- }
13
-
14
- .media-middle {
15
- align-self: center;
16
- }
17
- } @else {
18
- .media,
19
- .media-body {
20
- overflow: hidden;
21
- }
22
-
23
- .media-body {
24
- width: 10000px;
25
- }
26
-
27
- .media-body,
28
- .media-left,
29
- .media-right {
30
- display: table-cell;
31
- vertical-align: top;
32
- }
33
-
34
- .media-bottom {
35
- vertical-align: bottom;
36
- }
37
-
38
- .media-middle {
39
- vertical-align: middle;
40
- }
1
+ .media {
2
+ align-items: flex-start;
3
+ display: flex;
41
4
  }
42
5
 
43
- //
44
- // alignment
45
- //
46
- .media-right {
47
- padding-left: $media-alignment-padding-x;
48
- }
49
-
50
- .media-left {
51
- padding-right: $media-alignment-padding-x;
52
- }
53
-
54
- //
55
- // misc
56
- //
57
- .media-heading {
58
- margin-top: 0;
59
- margin-bottom: $media-heading-margin-bottom;
60
- }
61
-
62
- .media-list {
63
- list-style: none;
64
- padding-left: 0;
65
- }
66
-
67
- .media-object {
68
- display: block;
69
- }
6
+ .media-body {
7
+ flex: 1;
8
+ }