material 0.9.27 → 0.9.28

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 (21) hide show
  1. package/package.json +1 -1
  2. package/src/skin/material/_variables.scss +30 -0
  3. package/src/skin/material/button/action.scss +12 -24
  4. package/src/skin/material/button/button.scss +35 -45
  5. package/src/skin/material/button/floating.scss +32 -26
  6. package/src/skin/material/button/raised.scss +32 -26
  7. package/src/skin/material/button/stroked.scss +20 -18
  8. package/src/skin/material/component/component.scss +1 -0
  9. package/src/skin/material/component/progress.scss +16 -11
  10. package/src/skin/material/component/text.scss +1 -1
  11. package/src/skin/material/container/appbar.scss +13 -11
  12. package/src/skin/material/container/dialog.scss +21 -50
  13. package/src/skin/material/container/tabs.scss +4 -3
  14. package/src/skin/material/container/toolbar.scss +9 -22
  15. package/src/skin/material/control/button.scss +29 -25
  16. package/src/skin/material/control/checkbox.scss +5 -8
  17. package/src/skin/material/control/progress.scss +16 -11
  18. package/src/skin/material/control/search.scss +11 -9
  19. package/src/skin/material/control/slider.scss +16 -32
  20. package/src/skin/material/control/switch.scss +25 -52
  21. package/src/skin/material/control/textfield.scss +16 -29
package/src/skin/material/component/progress.scss CHANGED
@@ -1,10 +1,11 @@
1
- // Here is where the magic happens
1
+ @use "sass:color";
2
2
 
3
+ // Here is where the magic happens
3
4
 
4
5
  .material-progress {
5
6
  width: 100%;
6
7
  height: 4px;
7
- background-color: lighten($primary-color, 30%);
8
+ background-color: color.adjust($primary-color, $lightness: 30%);
8
9
  .bar {
9
10
  width: 0%;
10
11
  height: 100%;
@@ -18,7 +19,7 @@
18
19
  height: 4px;
19
20
  display: block;
20
21
  width: 100%;
21
- background-color: lighten($primary-color, 30%);
22
+ background-color: color.adjust($primary-color, $lightness: 30%);
22
23
  overflow: hidden;
23
24
  .determinate {
24
25
  position: absolute;
@@ -26,31 +27,35 @@
26
27
  top: 0;
27
28
  bottom: 0;
28
29
  background-color: $primary-color;
29
- transition: width .3s linear;
30
+ transition: width 0.3s linear;
30
31
  }
31
32
  .bar {
32
33
  background-color: $primary-color;
33
34
  &:before {
34
- content: '';
35
+ content: "";
35
36
  position: absolute;
36
37
  background-color: inherit;
37
38
  top: 0;
38
39
  left: 0;
39
40
  bottom: 0;
40
41
  will-change: left, right;
41
- -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
42
- animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
42
+ -webkit-animation: indeterminate 2.1s
43
+ cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
44
+ animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
45
+ infinite;
43
46
  }
44
47
  &:after {
45
- content: '';
48
+ content: "";
46
49
  position: absolute;
47
50
  background-color: inherit;
48
51
  top: 0;
49
52
  left: 0;
50
53
  bottom: 0;
51
54
  will-change: left, right;
52
- -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
53
- animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
55
+ -webkit-animation: indeterminate-short 2.1s
56
+ cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
57
+ animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
58
+ infinite;
54
59
  -webkit-animation-delay: 1.15s;
55
60
  animation-delay: 1.15s;
56
61
  }
@@ -141,7 +146,7 @@
141
146
  }
142
147
 
143
148
  .path {
144
- stroke: #4285F4;
149
+ stroke: #4285f4;
145
150
  stroke-dasharray: 187;
146
151
  stroke-dashoffset: 0;
147
152
  transform-origin: center;
package/src/skin/material/component/text.scss CHANGED
@@ -1,3 +1,4 @@
1
+
1
2
  .material-text {
2
3
  // -moz-osx-font-smoothing: grayscale
3
4
  // -webkit-font-smoothing: antialiased
@@ -94,7 +95,6 @@
94
95
  &.primary-color {
95
96
  color: $primary-color;
96
97
 
97
-
98
98
  // margin-bottom: 30px;
99
99
  }
100
100
  }
package/src/skin/material/container/appbar.scss CHANGED
@@ -1,3 +1,4 @@
1
+
1
2
  .material-appbar {
2
3
  display: flex;
3
4
  flex-direction: row;
@@ -28,8 +29,10 @@
28
29
  position: fixed;
29
30
  }
30
31
  &.is-scrolled {
31
- transition: box-shadow .3s;
32
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
32
+ transition: box-shadow 0.3s;
33
+ box-shadow:
34
+ 0 0 4px rgba(0, 0, 0, 0.14),
35
+ 0 4px 8px rgba(0, 0, 0, 0.28);
33
36
  }
34
37
  }
35
38
 
@@ -48,8 +51,10 @@
48
51
  right: 0;
49
52
  //display: block
50
53
  &.is-scrolled {
51
- transition: box-shadow .3s;
52
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
54
+ transition: box-shadow 0.3s;
55
+ box-shadow:
56
+ 0 0 4px rgba(0, 0, 0, 0.14),
57
+ 0 4px 8px rgba(0, 0, 0, 0.28);
53
58
  }
54
59
  &.type-bottom {
55
60
  bottom: 0;
@@ -189,13 +194,10 @@
189
194
  color: $secondary-color-text;
190
195
  padding: 10px 0 6px;
191
196
 
192
-
193
-
194
-
195
- // @media only screen and (max-width: 768px)
196
- // .material-appbar
197
- // &.type-app
198
- // padding: 10px 16px
197
+ // @media only screen and (max-width: 768px)
198
+ // .material-appbar
199
+ // &.type-app
200
+ // padding: 10px 16px
199
201
  }
200
202
  }
201
203
  }
package/src/skin/material/container/dialog.scss CHANGED
@@ -1,3 +1,4 @@
1
+
1
2
  .dialog {
2
3
  position: fixed;
3
4
  top: 0;
@@ -9,32 +10,23 @@
9
10
  align-items: center;
10
11
  justify-content: center;
11
12
  overflow: hidden;
12
-
13
- //display: none;
14
- //visibility: hidden;
15
13
  opacity: 0;
16
-
17
- //z-index: -1;
18
- transition: .2s;
14
+ transition: 0.2s;
19
15
 
20
16
  &.show {
21
- // display: flex;
22
- // width: 10;
23
- // height: 0;
24
- //transition: .2s;
25
- transition: .1s;
17
+ transition: 0.1s;
26
18
  opacity: 1;
27
19
 
28
20
  .surface {
29
21
  transform: translateY(0) scale(1);
30
22
  opacity: 1;
31
23
  margin-top: 0;
32
- transition: .1s;
24
+ transition: 0.1s;
33
25
  }
34
26
  }
35
27
 
36
28
  .surface {
37
- transition: .1s;
29
+ transition: 0.1s;
38
30
  max-height: 600px;
39
31
  display: flex;
40
32
  flex-direction: column;
@@ -42,7 +34,10 @@
42
34
  opacity: 0;
43
35
  border-radius: 2px;
44
36
  background-color: $background-color;
45
- box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
37
+ box-shadow:
38
+ 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
39
+ 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
40
+ 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
46
41
  transform: translateY(150px) scale(0.8);
47
42
  }
48
43
  }
@@ -53,8 +48,6 @@
53
48
  left: 0;
54
49
  bottom: 0;
55
50
  right: 0;
56
-
57
- //height: 0;
58
51
  background-color: rgba(0, 0, 0, 0.5);
59
52
  display: -webkit-box;
60
53
  display: -ms-flexbox;
@@ -62,17 +55,12 @@
62
55
  align-items: center;
63
56
  justify-content: center;
64
57
  overflow: hidden;
65
-
66
- //display: none;
67
- //visibility: hidden;
68
58
  z-index: 20;
69
59
  opacity: 0;
70
-
71
- //z-index: -1;
72
- transition: .2s;
60
+ transition: 0.2s;
73
61
 
74
62
  .dialog-surface {
75
- transition: .1s;
63
+ transition: 0.1s;
76
64
  max-height: 600px;
77
65
  display: flex;
78
66
  min-width: 320px;
@@ -83,13 +71,12 @@
83
71
  border-radius: 2px;
84
72
  background-color: $background-color;
85
73
  overflow: scroll;
86
- box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
74
+ box-shadow:
75
+ 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
76
+ 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
77
+ 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
87
78
  transform: translateY(150px) scale(0.8);
88
79
 
89
- // >*:first-child
90
- // margin-top: 24px
91
-
92
-
93
80
  .dialog-title {
94
81
  font-weight: bold;
95
82
  flex: none;
@@ -101,7 +88,7 @@
101
88
  flex: 1;
102
89
  padding: 0 24px 24px 24px;
103
90
  &.material-text {
104
- opacity: .7;
91
+ opacity: 0.7;
105
92
  }
106
93
  }
107
94
 
@@ -110,7 +97,6 @@
110
97
  display: block;
111
98
  text-align: right;
112
99
  overflow: hidden;
113
- //padding: 8px
114
100
  }
115
101
 
116
102
  .material-toolbar {
@@ -134,11 +120,8 @@
134
120
 
135
121
  .component-action {
136
122
  flex: none;
137
- display: 'flex';
123
+ display: "flex";
138
124
  text-align: right;
139
-
140
- // float: right;
141
- // justify-content: flex-end;
142
125
  padding: 8px;
143
126
 
144
127
  .material-button {
@@ -148,38 +131,26 @@
148
131
  }
149
132
 
150
133
  &.dialog-show {
151
- // display: flex;
152
- // width: 10;
153
- // height: 0;
154
- //transition: .2s;
155
- transition: .1s;
134
+ transition: 0.1s;
156
135
  opacity: 1;
157
136
 
158
- //
159
137
  .dialog-surface {
160
138
  transform: translateY(0) scale(1);
161
139
  opacity: 1;
162
140
  margin-top: 0;
163
- transition: .1s;
141
+ transition: 0.1s;
164
142
  }
165
143
  }
166
144
 
167
145
  &.dialog-closing {
168
146
  pointer-events: none;
169
147
  opacity: 0;
148
+ transition: 0.2s;
170
149
 
171
- // display: flex;
172
- // width: 10;
173
- // height: 0;
174
- transition: .2s;
175
-
176
- // transition: .2s;
177
- //opacity: 1;
178
- //
179
150
  .dialog-surface {
180
151
  opacity: 0;
181
152
  transform: translateY(150px) scale(0.8);
182
- transition: .1s;
153
+ transition: 0.1s;
183
154
  }
184
155
  }
185
156
  }
package/src/skin/material/container/tabs.scss CHANGED
@@ -1,9 +1,10 @@
1
+
1
2
  .material-tabs {
2
3
  position: relative;
3
4
  text-align: center;
4
5
  overflow: hidden;
5
6
  white-space: nowrap;
6
- >.material-list {
7
+ > .material-list {
7
8
  display: inline-block;
8
9
  white-space: nowrap;
9
10
  padding: 0;
@@ -30,7 +31,7 @@
30
31
  cursor: pointer;
31
32
  overflow: hidden;
32
33
  vertical-align: middle;
33
- transition: .4s;
34
+ transition: 0.4s;
34
35
  margin: 0;
35
36
  background-color: transparent;
36
37
  }
@@ -40,7 +41,7 @@
40
41
  height: 2px;
41
42
  bottom: 0;
42
43
  background-color: $primary-color;
43
- transition: .2s;
44
+ transition: 0.2s;
44
45
  }
45
46
 
46
47
  &.primary-color {
package/src/skin/material/container/toolbar.scss CHANGED
@@ -1,19 +1,13 @@
1
+
1
2
  .material-toolbar {
2
3
  display: flex;
3
4
  flex-direction: row;
4
- //height: 64px
5
-
6
- // position: absolute
7
- // top: 0
8
- // left: 0
9
- // right: 0
10
5
 
11
6
  z-index: 3;
12
7
  flex: none;
13
8
  display: flex;
14
9
  flex-direction: row;
15
10
  flex-wrap: nowrap;
16
- //padding: 14px 16px
17
11
 
18
12
  &.type-app {
19
13
  z-index: 5;
@@ -23,8 +17,10 @@
23
17
  position: fixed;
24
18
  }
25
19
  &.is-scrolled {
26
- transition: box-shadow .3s;
27
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
20
+ transition: box-shadow 0.3s;
21
+ box-shadow:
22
+ 0 0 4px rgba(0, 0, 0, 0.14),
23
+ 0 4px 8px rgba(0, 0, 0, 0.28);
28
24
  }
29
25
  }
30
26
 
@@ -33,7 +29,6 @@
33
29
  top: 0;
34
30
  left: 0;
35
31
  right: 0;
36
- //display: block
37
32
  }
38
33
 
39
34
  &.is-fixed {
@@ -41,10 +36,11 @@
41
36
  top: 0;
42
37
  left: 0;
43
38
  right: 0;
44
- //display: block
45
39
  &.is-scrolled {
46
- transition: box-shadow .3s;
47
- box-shadow: 0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);
40
+ transition: box-shadow 0.3s;
41
+ box-shadow:
42
+ 0 0 4px rgba(0, 0, 0, 0.14),
43
+ 0 4px 8px rgba(0, 0, 0, 0.28);
48
44
  }
49
45
  }
50
46
 
@@ -64,7 +60,6 @@
64
60
  font-size: 1.3rem;
65
61
  font-weight: 300;
66
62
  line-height: 2.3rem;
67
- //color: $primary-color-text
68
63
  padding: 0;
69
64
  margin-left: 16px;
70
65
  overflow: hidden;
@@ -179,14 +174,6 @@
179
174
  .checkbox-label {
180
175
  color: $secondary-color-text;
181
176
  padding: 10px 0 6px;
182
-
183
-
184
-
185
-
186
- // @media only screen and (max-width: 768px)
187
- // .material-toolbar
188
- // &.type-app
189
- // padding: 10px 16px
190
177
  }
191
178
  }
192
179
  }
package/src/skin/material/control/button.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use "sass:color";
2
+
1
3
  .button {
2
4
  user-select: none;
3
5
  font-size: 0.875rem;
@@ -28,20 +30,19 @@
28
30
 
29
31
  &.hide {
30
32
  display: none;
31
-
32
- // pseudo class
33
33
  }
34
34
 
35
+ // pseudo class
35
36
  &:focus {
36
- background-color: rgba(0, 0, 0, .1);
37
+ background-color: rgba(0, 0, 0, 0.1);
37
38
  }
38
39
 
39
40
  &:active {
40
- background-color: rgba(0, 0, 0, .1);
41
+ background-color: rgba(0, 0, 0, 0.1);
41
42
  }
42
43
 
43
44
  &:disabled {
44
- opacity: .5;
45
+ opacity: 0.5;
45
46
  background-color: transparent;
46
47
  &:hover {
47
48
  background-color: transparent;
@@ -51,21 +52,24 @@
51
52
  &[type="submit"] {
52
53
  font-weight: 600;
53
54
  padding: 6px 20px;
55
+ }
54
56
 
55
57
  // size
56
- }
57
58
  &.small-size {
58
59
  height: 36px;
59
60
  padding: 6px 12px;
61
+ }
60
62
 
61
63
  // styles
62
- }
63
64
  &.style-raised {
64
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
65
+ box-shadow:
66
+ 0 2px 2px 0 rgba(0, 0, 0, 0.14),
67
+ 0 3px 1px -2px rgba(0, 0, 0, 0.2),
68
+ 0 1px 5px 0 rgba(0, 0, 0, 0.12);
65
69
  }
66
70
 
67
71
  &.style-outline {
68
- border: 1px solid #E1E1E1;
72
+ border: 1px solid #e1e1e1;
69
73
  }
70
74
 
71
75
  &.style-action {
@@ -76,7 +80,6 @@
76
80
  background-position: center;
77
81
  i {
78
82
  pointer-events: none;
79
-
80
83
  height: 24px;
81
84
  width: 24px;
82
85
  margin-left: 0;
@@ -86,7 +89,7 @@
86
89
  }
87
90
 
88
91
  &:hover {
89
- background-color: rgba(0,0,0,.1);
92
+ background-color: rgba(0, 0, 0, 0.1);
90
93
  }
91
94
 
92
95
  &.small-size {
@@ -106,40 +109,40 @@
106
109
 
107
110
  &.color-secondary {
108
111
  color: $secondary-color-text;
109
- background-color: darken($secondary-color, 10%);
112
+ background-color: color.adjust($secondary-color, $lightness: -10%);
110
113
  &:hover {
111
- background-color: darken($secondary-color, 5%);
114
+ background-color: color.adjust($secondary-color, $lightness: -5%);
112
115
  &:focus {
113
- background-color: darken($secondary-color, 5%);
116
+ background-color: color.adjust($secondary-color, $lightness: -5%);
114
117
  }
115
118
  }
116
119
  &:focus {
117
- background-color: darken($secondary-color, 10%);
120
+ background-color: color.adjust($secondary-color, $lightness: -10%);
118
121
  }
119
122
  &:disabled {
120
- background-color: darken($secondary-color, 10%);
123
+ background-color: color.adjust($secondary-color, $lightness: -10%);
121
124
  &:hover {
122
- background-color: darken($secondary-color, 10%);
125
+ background-color: color.adjust($secondary-color, $lightness: -10%);
123
126
  }
124
127
  }
125
128
  }
126
129
 
127
130
  &.color-primary {
128
131
  color: $primary-color-text;
129
- background-color: darken($primary-color, 10%);
132
+ background-color: color.adjust($primary-color, $lightness: -10%);
130
133
  &:hover {
131
- background-color: darken($primary-color, 5%);
134
+ background-color: color.adjust($primary-color, $lightness: -5%);
132
135
  &:focus {
133
- background-color: darken($primary-color, 5%);
136
+ background-color: color.adjust($primary-color, $lightness: -5%);
134
137
  }
135
138
  }
136
139
  &:focus {
137
- background-color: darken($primary-color, 10%);
140
+ background-color: color.adjust($primary-color, $lightness: -10%);
138
141
  }
139
142
  &:disabled {
140
- background-color: darken($primary-color, 10%);
143
+ background-color: color.adjust($primary-color, $lightness: -10%);
141
144
  &:hover {
142
- background-color: darken($primary-color, 10%);
145
+ background-color: color.adjust($primary-color, $lightness: -10%);
143
146
  }
144
147
  }
145
148
  }
@@ -148,11 +151,12 @@
148
151
  @media only screen and (min-width: 640px) {
149
152
  /* empty */
150
153
  }
154
+
151
155
  .button {
152
156
  &:hover {
153
- background-color: rgba(0, 0, 0, .1);
157
+ background-color: rgba(0, 0, 0, 0.1);
154
158
  &:focus {
155
- background-color: rgba(0, 0, 0, .1);
159
+ background-color: rgba(0, 0, 0, 0.1);
156
160
  }
157
161
  }
158
162
  }
package/src/skin/material/control/checkbox.scss CHANGED
@@ -1,3 +1,4 @@
1
+
1
2
  .checkbox {
2
3
  display: block;
3
4
  position: relative;
@@ -19,7 +20,6 @@
19
20
  }
20
21
 
21
22
  .control {
22
- //flex: none;
23
23
  order: 1;
24
24
  cursor: pointer;
25
25
  position: relative;
@@ -29,16 +29,14 @@
29
29
  margin: 4px;
30
30
  border-radius: 50%;
31
31
 
32
- //margin: 10px 10px 10px 4px;
33
32
  .icon {
34
33
  position: absolute;
35
34
  top: 11px;
36
35
  left: 11px;
37
36
  border: 2px solid rgba(0, 0, 0, 0.5);
38
37
  border-radius: 2px;
39
- transition: .3s;
38
+ transition: 0.3s;
40
39
 
41
- //stroke: rgba(0, 0, 0, 0.5);
42
40
  .check {
43
41
  opacity: 0;
44
42
  position: absolute;
@@ -63,7 +61,7 @@
63
61
  &.is-checked {
64
62
  .control {
65
63
  .icon {
66
- transition: .3s;
64
+ transition: 0.3s;
67
65
  border-color: $secondary-color;
68
66
  background-color: $secondary-color;
69
67
 
@@ -80,18 +78,17 @@
80
78
 
81
79
  &.is-disabled {
82
80
  label {
83
- opacity: .4;
81
+ opacity: 0.4;
84
82
  }
85
83
 
86
84
  .icon {
87
85
  background-color: rgba(0, 0, 0, 0.26);
88
86
  border-color: rgba(0, 0, 0, 0.26);
89
- //opacity: .4
90
87
  }
91
88
 
92
89
  .control {
93
90
  .icon {
94
- opacity: .4;
91
+ opacity: 0.4;
95
92
  }
96
93
  }
97
94
  }
package/src/skin/material/control/progress.scss CHANGED
@@ -1,10 +1,11 @@
1
- // Here is where the magic happens
1
+ @use "sass:color";
2
2
 
3
+ // Here is where the magic happens
3
4
 
4
5
  .progress {
5
6
  width: 100%;
6
7
  height: 4px;
7
- background-color: lighten($primary-color, 30%);
8
+ background-color: color.adjust($primary-color, $lightness: 30%);
8
9
  .bar {
9
10
  width: 0%;
10
11
  height: 100%;
@@ -18,7 +19,7 @@
18
19
  height: 4px;
19
20
  display: block;
20
21
  width: 100%;
21
- background-color: lighten($primary-color, 30%);
22
+ background-color: color.adjust($primary-color, $lightness: 30%);
22
23
  overflow: hidden;
23
24
  .determinate {
24
25
  position: absolute;
@@ -26,31 +27,35 @@
26
27
  top: 0;
27
28
  bottom: 0;
28
29
  background-color: $primary-color;
29
- transition: width .3s linear;
30
+ transition: width 0.3s linear;
30
31
  }
31
32
  .bar {
32
33
  background-color: $primary-color;
33
34
  &:before {
34
- content: '';
35
+ content: "";
35
36
  position: absolute;
36
37
  background-color: inherit;
37
38
  top: 0;
38
39
  left: 0;
39
40
  bottom: 0;
40
41
  will-change: left, right;
41
- -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
42
- animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
42
+ -webkit-animation: indeterminate 2.1s
43
+ cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
44
+ animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
45
+ infinite;
43
46
  }
44
47
  &:after {
45
- content: '';
48
+ content: "";
46
49
  position: absolute;
47
50
  background-color: inherit;
48
51
  top: 0;
49
52
  left: 0;
50
53
  bottom: 0;
51
54
  will-change: left, right;
52
- -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
53
- animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
55
+ -webkit-animation: indeterminate-short 2.1s
56
+ cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
57
+ animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
58
+ infinite;
54
59
  -webkit-animation-delay: 1.15s;
55
60
  animation-delay: 1.15s;
56
61
  }
@@ -141,7 +146,7 @@
141
146
  }
142
147
 
143
148
  .path {
144
- stroke: #4285F4;
149
+ stroke: #4285f4;
145
150
  stroke-dasharray: 187;
146
151
  stroke-dashoffset: 0;
147
152
  transform-origin: center;