@fishawack/lab-velocity 0.9.5 → 1.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.
- package/Svg.vue +6 -7
- package/basic/Button.vue +1 -1
- package/components/_button.scss +230 -105
- package/components/_icon.scss +8 -1
- package/index.js +3 -1
- package/modules/_AuthModule.scss +130 -0
- package/package.json +4 -3
package/Svg.vue
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
<div
|
|
3
|
+
v-if="embed">
|
|
4
|
+
<component v-if="embed" :is="icon" class="vel-svg"/>
|
|
5
|
+
</div>
|
|
3
6
|
<svg v-else class="vel-svg">
|
|
4
|
-
<use :xlink:href="
|
|
7
|
+
<use :xlink:href="'#' + name" />
|
|
5
8
|
</svg>
|
|
6
9
|
</template>
|
|
7
10
|
|
|
@@ -22,10 +25,6 @@
|
|
|
22
25
|
type: Boolean,
|
|
23
26
|
default: false,
|
|
24
27
|
},
|
|
25
|
-
artboard: {
|
|
26
|
-
type: Boolean,
|
|
27
|
-
default: false,
|
|
28
|
-
}
|
|
29
28
|
},
|
|
30
29
|
data() {
|
|
31
30
|
return {
|
|
@@ -34,7 +33,7 @@
|
|
|
34
33
|
},
|
|
35
34
|
computed: {
|
|
36
35
|
icon() {
|
|
37
|
-
return defineAsyncComponent(() => this.icons[`../../handlebars/generated/embed/svg${this.asis ? '--asis' : ''}--${this.name}
|
|
36
|
+
return defineAsyncComponent(() => this.icons[`../../handlebars/generated/embed/svg${this.asis ? '--asis' : ''}--${this.name}.svg`]())
|
|
38
37
|
},
|
|
39
38
|
}
|
|
40
39
|
}
|
package/basic/Button.vue
CHANGED
package/components/_button.scss
CHANGED
|
@@ -1,162 +1,287 @@
|
|
|
1
1
|
@import "element-plus/theme-chalk/el-button";
|
|
2
2
|
|
|
3
3
|
.vel-button {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
.el-button--default {
|
|
11
|
-
border: solid get-ratio(1px) $color5;
|
|
12
|
-
&:hover {
|
|
13
|
-
background-color: #AFAFAF;
|
|
14
|
-
color: $color1;
|
|
15
|
-
}
|
|
16
|
-
&:active {
|
|
17
|
-
background-color: #F2F2F2;
|
|
18
|
-
border: solid get-ratio(1px) #2D2D2D;
|
|
19
|
-
color: $color1;
|
|
4
|
+
height: auto;
|
|
5
|
+
--el-border-radius-base: 0px;
|
|
6
|
+
--el-font-size-base: get-ratio(16px);
|
|
7
|
+
|
|
8
|
+
.is-round {
|
|
9
|
+
--el-border-radius-base: 999px;
|
|
20
10
|
}
|
|
21
|
-
}
|
|
22
11
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
12
|
+
// colors
|
|
13
|
+
&.el-button--default {
|
|
14
|
+
--el-color-primary: #ffffff;
|
|
26
15
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
color: $
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
16
|
+
// text color
|
|
17
|
+
--el-text-color-regular: #{$color2};
|
|
18
|
+
--el-button-hover-text-color: #{$color1};
|
|
19
|
+
--el-button-active-text-color: #{$color1};
|
|
20
|
+
--el-button-disabled-text-color: #bdbdbd;
|
|
21
|
+
|
|
22
|
+
// background color
|
|
23
|
+
--el-button-bg-color: #ffffff;
|
|
24
|
+
--el-button-hover-bg-color: #{$color8};
|
|
25
|
+
--el-button-active-text-color: #{$color1};
|
|
26
|
+
--el-button-disabled-bg-color: #ffffff;
|
|
27
|
+
|
|
28
|
+
// border color
|
|
29
|
+
--el-button-border-color: #{$color5};
|
|
30
|
+
--el-button-hover-border-color: #afafaf;
|
|
31
|
+
--el-button-active-border-color: #{$color1};
|
|
32
|
+
--el-button-disabled-border-color: #{$color4};
|
|
33
|
+
|
|
34
|
+
&.is-loading {
|
|
35
|
+
--el-text-color-regular: #a4a4a4;
|
|
36
|
+
--el-button-border-color: #{$color4};
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.is-plain {
|
|
40
|
+
--el-color-primary: #ffffff;
|
|
41
|
+
|
|
42
|
+
// text color
|
|
43
|
+
--el-text-color-regular: #{$color2};
|
|
44
|
+
--el-button-hover-text-color: #{$color1};
|
|
45
|
+
--el-button-active-text-color: #{$color1};
|
|
46
|
+
--el-button-disabled-text-color: #bdbdbd;
|
|
47
|
+
|
|
48
|
+
// background color
|
|
49
|
+
--el-button-bg-color: #ffffff;
|
|
50
|
+
--el-button-hover-bg-color: ##ffffff;
|
|
51
|
+
--el-button-active-text-color: #{$color1};
|
|
52
|
+
--el-button-disabled-bg-color: #ffffff;
|
|
53
|
+
|
|
54
|
+
// border color
|
|
55
|
+
--el-button-border-color: #{$color5};
|
|
56
|
+
--el-button-hover-border-color: #{$color1};
|
|
57
|
+
--el-button-active-border-color: #{$color1};
|
|
58
|
+
--el-button-disabled-border-color: #{$color4};
|
|
59
|
+
|
|
60
|
+
&.is-loading {
|
|
61
|
+
--el-text-color-regular: #a4a4a4;
|
|
62
|
+
--el-button-border-color: #{$color4};
|
|
63
|
+
}
|
|
64
|
+
}
|
|
33
65
|
}
|
|
34
66
|
|
|
35
|
-
&.
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
67
|
+
&.el-button--primary {
|
|
68
|
+
--el-color-primary: #{$color1};
|
|
69
|
+
|
|
70
|
+
// text color
|
|
71
|
+
--el-text-color-regular: #ffffff;
|
|
72
|
+
--el-button-hover-text-color: #ffffff;
|
|
73
|
+
--el-button-active-text-color: #ffffff;
|
|
74
|
+
--el-button-disabled-text-color: #ffffff;
|
|
75
|
+
|
|
76
|
+
// background color
|
|
77
|
+
--el-button-bg-color: #{$color1};
|
|
78
|
+
--el-button-hover-bg-color: #{$color12};
|
|
79
|
+
--el-button-active-bg-color: #090909;
|
|
80
|
+
--el-button-disabled-bg-color: #afafaf;
|
|
81
|
+
|
|
82
|
+
// border color
|
|
83
|
+
--el-button-border-color: transparent;
|
|
84
|
+
--el-button-hover-border-color: transparent;
|
|
85
|
+
--el-button-active-border-color: transparent;
|
|
86
|
+
--el-button-disabled-border-color: transparent;
|
|
39
87
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
color:
|
|
88
|
+
&.is-loading {
|
|
89
|
+
--el-text-color-regular: #a4a4a4;
|
|
90
|
+
--el-button-border-color: transparent;
|
|
91
|
+
--el-button-bg-color: #5c5c5c;
|
|
43
92
|
}
|
|
44
93
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
94
|
+
&.is-plain {
|
|
95
|
+
--el-color-primary: #{$color1};
|
|
96
|
+
|
|
97
|
+
// text color
|
|
98
|
+
--el-text-color-regular: #{$color1};
|
|
99
|
+
--el-button-hover-text-color: #ffffff;
|
|
100
|
+
--el-button-active-text-color: #ffffff;
|
|
101
|
+
--el-button-disabled-text-color: #ffffff;
|
|
102
|
+
--el-color-primary-light-5: #757575;
|
|
103
|
+
|
|
104
|
+
// background color
|
|
105
|
+
--el-button-bg-color: #f2f2f2;
|
|
106
|
+
--el-button-hover-bg-color: #{$color1};
|
|
107
|
+
--el-button-active-bg-color: #090909;
|
|
108
|
+
--el-button-disabled-bg-color: #{$color8};
|
|
109
|
+
--el-color-primary-light-9: #{$color8};
|
|
110
|
+
|
|
111
|
+
// border color
|
|
112
|
+
--el-button-border-color: #757575;
|
|
113
|
+
--el-button-hover-border-color: transparent;
|
|
114
|
+
--el-button-active-border-color: transparent;
|
|
115
|
+
--el-button-disabled-border-color: #d5d5d5;
|
|
116
|
+
--el-color-primary-light-8: #d5d5d5;
|
|
117
|
+
|
|
118
|
+
&.is-loading {
|
|
119
|
+
--el-text-color-regular: #{$color12};
|
|
120
|
+
--el-button-border-color: #757575;
|
|
121
|
+
--el-button-bg-color: #{$color8};
|
|
122
|
+
}
|
|
48
123
|
}
|
|
49
124
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
color
|
|
125
|
+
&.is-text,
|
|
126
|
+
&.is-link {
|
|
127
|
+
// text color
|
|
128
|
+
--el-button-hover-link-text-color: #{$color12};
|
|
129
|
+
--el-button-active-color: #090909;
|
|
130
|
+
|
|
131
|
+
&.is-disabled {
|
|
132
|
+
--el-color-primary-light-5: #bdbdbd;
|
|
133
|
+
}
|
|
53
134
|
}
|
|
54
135
|
}
|
|
55
|
-
}
|
|
56
|
-
.el-button--success {
|
|
57
136
|
|
|
58
|
-
|
|
59
|
-
|
|
137
|
+
&.el-button--danger {
|
|
138
|
+
--el-color-primary: #{$colorAlert};
|
|
60
139
|
|
|
61
|
-
|
|
62
|
-
|
|
140
|
+
// text color
|
|
141
|
+
--el-text-color-regular: #ffffff;
|
|
142
|
+
--el-button-hover-text-color: #ffffff;
|
|
143
|
+
--el-button-active-text-color: #ffffff;
|
|
144
|
+
--el-button-disabled-text-color: #ffffff;
|
|
63
145
|
|
|
64
|
-
|
|
65
|
-
|
|
146
|
+
// background color
|
|
147
|
+
--el-button-bg-color: #{$colorAlert};
|
|
148
|
+
--el-button-hover-bg-color: #df6b6b;
|
|
149
|
+
--el-button-active-bg-color: #b42929;
|
|
150
|
+
--el-button-disabled-bg-color: #ea9c9c;
|
|
66
151
|
|
|
67
|
-
|
|
68
|
-
|
|
152
|
+
// border color
|
|
153
|
+
--el-button-border-color: transparent;
|
|
154
|
+
--el-button-hover-border-color: transparent;
|
|
155
|
+
--el-button-active-border-color: transparent;
|
|
156
|
+
--el-button-disabled-border-color: transparent;
|
|
69
157
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
158
|
+
&.is-loading {
|
|
159
|
+
--el-text-color-regular: #ffffff;
|
|
160
|
+
--el-button-border-color: transparent;
|
|
161
|
+
--el-button-bg-color: #df6b6b;
|
|
162
|
+
}
|
|
73
163
|
|
|
164
|
+
&.is-plain {
|
|
165
|
+
// border: 2px solid orange !important;
|
|
166
|
+
--el-color-primary: #{$colorAlert};
|
|
167
|
+
|
|
168
|
+
// text color
|
|
169
|
+
--el-button-text-color: #d53a3a;
|
|
170
|
+
--el-text-color-regular: #d53a3a;
|
|
171
|
+
--el-button-hover-text-color: #ffffff;
|
|
172
|
+
--el-button-active-text-color: #ffffff;
|
|
173
|
+
--el-button-disabled-text-color: ##ea9c9c;
|
|
174
|
+
|
|
175
|
+
// background color
|
|
176
|
+
--el-button-bg-color: #fcf1f1;
|
|
177
|
+
--el-button-hover-bg-color: #d53a3a;
|
|
178
|
+
--el-button-active-bg-color: #b42929;
|
|
179
|
+
--el-button-disabled-bg-color: #fcf1f1;
|
|
180
|
+
|
|
181
|
+
// border color
|
|
182
|
+
--el-button-border-color: #ea9c9c;
|
|
183
|
+
--el-button-hover-border-color: transparent;
|
|
184
|
+
--el-button-active-border-color: transparent;
|
|
185
|
+
--el-button-disabled-border-color: #f9e1e1;
|
|
186
|
+
|
|
187
|
+
&.is-loading {
|
|
188
|
+
--el-text-color-regular: ##df6b6b;
|
|
189
|
+
--el-button-border-color: #ea9c9c;
|
|
190
|
+
--el-button-bg-color: #fcf1f1;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
74
193
|
}
|
|
75
|
-
|
|
76
|
-
|
|
194
|
+
|
|
195
|
+
&.el-button--success {
|
|
77
196
|
}
|
|
78
|
-
|
|
79
|
-
|
|
197
|
+
|
|
198
|
+
&.el-button--info {
|
|
80
199
|
}
|
|
81
200
|
|
|
82
|
-
&.
|
|
83
|
-
|
|
84
|
-
background-color: #F2F2F2;
|
|
85
|
-
color: #EA9C9C;
|
|
201
|
+
&.el-button--warning {
|
|
202
|
+
}
|
|
86
203
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
204
|
+
.vel-icon {
|
|
205
|
+
fill: currentColor;
|
|
206
|
+
path {
|
|
207
|
+
fill: currentColor;
|
|
90
208
|
}
|
|
209
|
+
}
|
|
91
210
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
211
|
+
// sizes & spacing
|
|
212
|
+
&.el-button--default,
|
|
213
|
+
&.el-button--primary,
|
|
214
|
+
&.el-button--danger,
|
|
215
|
+
&.el-button--success,
|
|
216
|
+
&.el-button--warning,
|
|
217
|
+
&.el-button--info {
|
|
218
|
+
// line-height: 1;
|
|
219
|
+
padding: get-ratio(11px) $spacing * 2;
|
|
220
|
+
}
|
|
96
221
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
border-color:#F9E1E1;
|
|
101
|
-
}
|
|
102
|
-
&.is-loading {
|
|
103
|
-
background-color: #FCF1F1;
|
|
104
|
-
border-color: #EA9C9C;
|
|
105
|
-
color:#DF6B6B;
|
|
106
|
-
}
|
|
222
|
+
&.el-button--large {
|
|
223
|
+
// line-height: 1;
|
|
224
|
+
padding: get-ratio(15px) $spacing * 2;
|
|
107
225
|
}
|
|
108
|
-
}
|
|
109
226
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
padding: get-ratio(7px) get-ratio(16px);
|
|
115
|
-
}
|
|
227
|
+
&.el-button--small {
|
|
228
|
+
// line-height: 1;
|
|
229
|
+
padding: get-ratio(5px) $spacing;
|
|
230
|
+
}
|
|
116
231
|
|
|
117
|
-
|
|
118
|
-
padding: get-ratio(15px) get-ratio(24px);
|
|
119
|
-
}
|
|
232
|
+
// shapes
|
|
120
233
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
234
|
+
&.is-circle, &.is-square {
|
|
235
|
+
width: auto;
|
|
236
|
+
& [class*=el-icon] + span {
|
|
237
|
+
margin-left: 0;
|
|
238
|
+
}
|
|
239
|
+
&.el-button--default,
|
|
240
|
+
&.el-button--primary,
|
|
241
|
+
&.el-button--danger,
|
|
242
|
+
&.el-button--success,
|
|
243
|
+
&.el-button--warning,
|
|
244
|
+
&.el-button--info {
|
|
245
|
+
padding: get-ratio(11px);
|
|
246
|
+
}
|
|
125
247
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
248
|
+
&.el-button--large {
|
|
249
|
+
padding: get-ratio(15px);
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
&.el-button--small {
|
|
253
|
+
padding: get-ratio(5px);
|
|
254
|
+
}
|
|
129
255
|
|
|
130
|
-
&.is-circle {
|
|
131
|
-
width: auto;
|
|
132
|
-
padding: 1.5 * $spacing;
|
|
133
256
|
}
|
|
134
257
|
}
|
|
135
258
|
|
|
136
259
|
.vel-button {
|
|
137
|
-
&[disabled=true] {
|
|
260
|
+
&[disabled="true"] {
|
|
138
261
|
pointer-events: none !important;
|
|
139
262
|
}
|
|
263
|
+
|
|
140
264
|
&--iconRight {
|
|
141
|
-
.vel-button__button {
|
|
142
265
|
.el-icon {
|
|
143
266
|
order: 2;
|
|
144
267
|
}
|
|
145
|
-
|
|
268
|
+
|
|
269
|
+
> span {
|
|
146
270
|
order: 1;
|
|
147
271
|
margin: 0 0.5rem 0 0;
|
|
148
272
|
}
|
|
149
|
-
}
|
|
150
273
|
}
|
|
151
|
-
|
|
152
|
-
|
|
274
|
+
|
|
275
|
+
&--iconOnly1 {
|
|
153
276
|
> span {
|
|
154
277
|
margin: 0;
|
|
155
278
|
}
|
|
156
|
-
|
|
279
|
+
|
|
280
|
+
.vel-icon {
|
|
157
281
|
width: 1.5 * $spacing;
|
|
158
282
|
height: 1.5 * $spacing;
|
|
159
283
|
}
|
|
284
|
+
|
|
160
285
|
svg {
|
|
161
286
|
width: 100%;
|
|
162
287
|
height: 100%;
|
|
@@ -170,4 +295,4 @@
|
|
|
170
295
|
padding: 2 * $spacing 2.5 * $spacing;
|
|
171
296
|
}
|
|
172
297
|
}
|
|
173
|
-
}
|
|
298
|
+
}
|
package/components/_icon.scss
CHANGED
|
@@ -2,12 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
.vel-icon {
|
|
4
4
|
|
|
5
|
-
.
|
|
5
|
+
.vel-link &, .vel-button &, .vel-basic & {
|
|
6
6
|
width: get-ratio(16px);
|
|
7
7
|
min-width: get-ratio(16px);
|
|
8
|
+
max-height: get-ratio(16px);
|
|
8
9
|
padding-bottom: 0px;
|
|
9
10
|
line-height: 0px;
|
|
10
11
|
}
|
|
12
|
+
|
|
13
|
+
.vel-button.el-button--small & {
|
|
14
|
+
width: get-ratio(12px);
|
|
15
|
+
min-width: get-ratio(12px);
|
|
16
|
+
max-height: get-ratio(12px);
|
|
17
|
+
}
|
|
11
18
|
.vel-side-bar__button & {
|
|
12
19
|
width: get-ratio(20px);
|
|
13
20
|
min-width: get-ratio(20px);
|
package/index.js
CHANGED
|
@@ -29,4 +29,6 @@ export { default as BreadcrumbsItem } from "./navigation/BreadcrumbsItem.vue";
|
|
|
29
29
|
|
|
30
30
|
export { default as Icon } from "./Icon.vue";
|
|
31
31
|
export { default as Svg } from "./Svg.vue";
|
|
32
|
-
export { default as Loader } from "./layout/Loader.vue";
|
|
32
|
+
export { default as Loader } from "./layout/Loader.vue";
|
|
33
|
+
|
|
34
|
+
export {authRoutes} from './AuthModule/js/routes.js';
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
// AuthModule
|
|
2
|
+
.AuthModule {
|
|
3
|
+
position: fixed;
|
|
4
|
+
background-color: black;
|
|
5
|
+
height: 100vh;
|
|
6
|
+
width: 100%;
|
|
7
|
+
background: url('../media/content/images/hero-login-large.jpg') center top no-repeat;
|
|
8
|
+
background-size: cover;
|
|
9
|
+
z-index: 10;
|
|
10
|
+
&:after {
|
|
11
|
+
position: absolute;
|
|
12
|
+
content: '';
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
background-image: radial-gradient(circle at 15% 105%, #00e677de, rgba(0, 230, 118, 0) 35%);
|
|
18
|
+
z-index: 0;
|
|
19
|
+
@include breakpoint (max-width $mobileMax) {
|
|
20
|
+
background-image: radial-gradient(circle at 15% 90%, #00e677de, rgba(0, 230, 118, 0) 50%);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.logo {
|
|
25
|
+
width: 13.3rem;
|
|
26
|
+
z-index: 99;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.AuthModule__form {
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 50%;
|
|
33
|
+
left: 50%;
|
|
34
|
+
transform: translate(-50%, -50%);
|
|
35
|
+
background-color: white;
|
|
36
|
+
min-width: 320px;
|
|
37
|
+
width: 460px;
|
|
38
|
+
padding: 48px 40px 40px;
|
|
39
|
+
z-index: 1;
|
|
40
|
+
|
|
41
|
+
@include breakpoint (max-width $mobileMax) {
|
|
42
|
+
top: 84px;
|
|
43
|
+
transform: translate(-50%, 0);
|
|
44
|
+
padding: 24px;
|
|
45
|
+
width: calc(100% - 80px);
|
|
46
|
+
.h2 {
|
|
47
|
+
font-size: 2.4rem;
|
|
48
|
+
line-height: 3.2rem;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
h2, .h2 {
|
|
53
|
+
font-family: $font2;
|
|
54
|
+
line-height: 4.4rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
p {
|
|
58
|
+
font-size: 1.4rem;
|
|
59
|
+
line-height: 2rem;
|
|
60
|
+
margin-bottom: 2rem;
|
|
61
|
+
letter-spacing: -0.1px;
|
|
62
|
+
&.disclaimer {
|
|
63
|
+
font-size: 1.2rem;
|
|
64
|
+
color: rgba($color1, 0.5);
|
|
65
|
+
margin: 0;
|
|
66
|
+
}
|
|
67
|
+
a {
|
|
68
|
+
color: $color1;
|
|
69
|
+
}
|
|
70
|
+
&.form__error {
|
|
71
|
+
font-size: 1.2rem;
|
|
72
|
+
line-height: 1.5;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.button {
|
|
77
|
+
max-width: 200px;
|
|
78
|
+
width: 200px;
|
|
79
|
+
@include breakpoint (max-width $mobileMax) {
|
|
80
|
+
max-width: unset;
|
|
81
|
+
width: 100%;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.form {
|
|
86
|
+
&.error {
|
|
87
|
+
.form__input {
|
|
88
|
+
.el-input__wrapper {
|
|
89
|
+
border: 0.2rem solid $color20;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
.form__input.error {
|
|
93
|
+
border:none;
|
|
94
|
+
.el-input__wrapper {
|
|
95
|
+
border: 0.2rem solid $color10;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
&__icon-container{
|
|
100
|
+
position: absolute;
|
|
101
|
+
top: 50%;
|
|
102
|
+
right: get-ratio($spacing * 1.5);
|
|
103
|
+
transform: translateY(-50%);
|
|
104
|
+
display: flex;
|
|
105
|
+
}
|
|
106
|
+
&__action-icon {
|
|
107
|
+
margin-left: get-ratio($spacing * 0.5);
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.AuthModule__logo__container {
|
|
114
|
+
position: absolute;
|
|
115
|
+
top:48px;
|
|
116
|
+
left:0%;
|
|
117
|
+
}
|
|
118
|
+
.AuthModule__logo {
|
|
119
|
+
position: relative;
|
|
120
|
+
}
|
|
121
|
+
.AuthModule__Content {
|
|
122
|
+
position: absolute;
|
|
123
|
+
z-index: 1;
|
|
124
|
+
top: 50%;
|
|
125
|
+
left: 50%;
|
|
126
|
+
transform: translate(-50%, -50%);
|
|
127
|
+
max-width: 1024px;
|
|
128
|
+
width: 100%;
|
|
129
|
+
height: 100%;
|
|
130
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fishawack/lab-velocity",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Avalere Health branded style system",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"setup": "npm ci || npm i && npm run content",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"mail": "npm run mail --prefix node_modules/@fishawack/core/",
|
|
14
14
|
"story:dev": "histoire dev",
|
|
15
15
|
"story:build": "histoire build",
|
|
16
|
-
"preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./"
|
|
16
|
+
"preversion": "cp -r _Build/sass/** ./ && cp -r _Build/vue/components/** ./ && cp -r _Build/vue/modules/** ./"
|
|
17
17
|
},
|
|
18
18
|
"license": "BSD-3-Clause",
|
|
19
19
|
"author": {
|
|
@@ -62,7 +62,8 @@
|
|
|
62
62
|
"components",
|
|
63
63
|
"layout",
|
|
64
64
|
"navigation",
|
|
65
|
-
"basic"
|
|
65
|
+
"basic",
|
|
66
|
+
"modules"
|
|
66
67
|
],
|
|
67
68
|
"main": "index.js",
|
|
68
69
|
"release": {
|