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