urfu-ui-kit-vanilla 0.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.
- package/README.md +92 -0
- package/package.json +23 -0
- package/playground/index.html +257 -0
- package/playground/main.ts +1 -0
- package/src/fonts/urfu-ui-icons-fonts.eot +0 -0
- package/src/fonts/urfu-ui-icons-fonts.svg +91 -0
- package/src/fonts/urfu-ui-icons-fonts.ttf +0 -0
- package/src/fonts/urfu-ui-icons-fonts.woff +0 -0
- package/src/main.less +97 -0
- package/src/styles/components/button.less +166 -0
- package/src/styles/components/checkbox.less +33 -0
- package/src/styles/components/icon.less +63 -0
- package/src/styles/components/input.less +217 -0
- package/src/styles/components/message.less +32 -0
- package/src/styles/components/preloader.less +124 -0
- package/src/styles/components/radio.less +33 -0
- package/src/styles/components/status.less +45 -0
- package/src/styles/components/switch.less +63 -0
- package/src/styles/components/tab.less +79 -0
- package/src/styles/const/base.less +9 -0
- package/src/styles/const/colors.less +22 -0
- package/src/styles/const/fonts.less +52 -0
- package/src/styles/const/icons.less +8 -0
- package/src/styles/fonts.less +5 -0
- package/src/styles/reset.less +63 -0
- package/src/styles/special-classes/colors.less +58 -0
- package/src/styles/special-classes/font-weight.less +11 -0
- package/src/styles/special-classes/selectors.less +44 -0
- package/src/ui-icons.css +356 -0
- package/tsconfig.json +18 -0
- package/vite.config.ts +12 -0
|
@@ -0,0 +1,217 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.input() {
|
|
4
|
+
height: @height-main;
|
|
5
|
+
padding: 14px 16px;
|
|
6
|
+
border-radius: @radius;
|
|
7
|
+
font-weight: 400;
|
|
8
|
+
font-size: 14px;
|
|
9
|
+
line-height: 20px;
|
|
10
|
+
color: @clr-main-dark;
|
|
11
|
+
.transition;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.u-input {
|
|
15
|
+
.input;
|
|
16
|
+
border: 1px solid @clr-border;
|
|
17
|
+
&:hover, &:focus, &.active {
|
|
18
|
+
border: 1px solid @clr-border-active;
|
|
19
|
+
}
|
|
20
|
+
&::placeholder {
|
|
21
|
+
color: @clr-secondary-subject;
|
|
22
|
+
}
|
|
23
|
+
&:disabled, &.disabled {
|
|
24
|
+
cursor: not-allowed;
|
|
25
|
+
border: none;
|
|
26
|
+
background-color: @clr-main-light;
|
|
27
|
+
}
|
|
28
|
+
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
29
|
+
color: @clr-secondary-subject;
|
|
30
|
+
opacity: 1; /* Firefox */
|
|
31
|
+
}
|
|
32
|
+
&:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
33
|
+
color: @clr-secondary-subject;
|
|
34
|
+
}
|
|
35
|
+
&::-ms-input-placeholder { /* Microsoft Edge */
|
|
36
|
+
color: @clr-secondary-subject;
|
|
37
|
+
}
|
|
38
|
+
&[type="number"] {
|
|
39
|
+
display: block;
|
|
40
|
+
box-sizing: border-box;
|
|
41
|
+
-moz-appearance: textfield;
|
|
42
|
+
-webkit-appearance: textfield;
|
|
43
|
+
appearance: textfield;
|
|
44
|
+
&::-webkit-outer-spin-button,
|
|
45
|
+
&::-webkit-inner-spin-button {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
&[type="search"]::-webkit-search-cancel-button {
|
|
50
|
+
.transition;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
-webkit-appearance: none;
|
|
53
|
+
width: 12px;
|
|
54
|
+
height: 12px;
|
|
55
|
+
margin-left: 10px;
|
|
56
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%23A7A7A7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%23A7A7A7'/%3E%3C/svg%3E ");
|
|
57
|
+
background-repeat: no-repeat;
|
|
58
|
+
&:hover {
|
|
59
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.3386 0.661444C11.7039 1.02675 11.7039 1.61903 11.3386 1.98433L1.98434 11.3386C1.61904 11.7039 1.02676 11.7039 0.661455 11.3386C0.29615 10.9733 0.296149 10.381 0.661454 10.0157L10.0157 0.661444C10.381 0.296138 10.9733 0.296138 11.3386 0.661444Z' fill='%231E4391'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.661432 0.661444C1.02674 0.296138 1.61901 0.296138 1.98432 0.661444L11.3385 10.0157C11.7039 10.381 11.7038 10.9733 11.3385 11.3386C10.9732 11.7039 10.381 11.7039 10.0157 11.3386L0.661432 1.98433C0.296127 1.61903 0.296127 1.02675 0.661432 0.661444Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
&[type="date"]::-webkit-calendar-picker-indicator {
|
|
63
|
+
.transition;
|
|
64
|
+
cursor: pointer;
|
|
65
|
+
color: rgba(0, 0, 0, 0);
|
|
66
|
+
opacity: 1;
|
|
67
|
+
display: block;
|
|
68
|
+
background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7666_4018)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 4C2.89543 4 2 4.89543 2 6V16C2 17.1046 2.89543 18 4 18H16C17.1046 18 18 17.1046 18 16V6C18 4.89543 17.1046 4 16 4H4ZM0 6C0 3.79086 1.79086 2 4 2H16C18.2091 2 20 3.79086 20 6V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V6Z' fill='%231E4391'/%3E%3Cpath d='M5 1C5 0.447715 5.44772 0 6 0C6.55228 0 7 0.447715 7 1V5C7 5.55228 6.55228 6 6 6C5.44772 6 5 5.55228 5 5V1Z' fill='%231E4391'/%3E%3Cpath d='M13 1C13 0.447715 13.4477 0 14 0C14.5523 0 15 0.447715 15 1V5C15 5.55228 14.5523 6 14 6C13.4477 6 13 5.55228 13 5V1Z' fill='%231E4391'/%3E%3Cpath d='M3 9C3 8.44772 3.44772 8 4 8H16C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10H4C3.44772 10 3 9.55228 3 9Z' fill='%231E4391'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7666_4018'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ") no-repeat;
|
|
69
|
+
width: 20px;
|
|
70
|
+
height: 20px;
|
|
71
|
+
margin-top: 2px;
|
|
72
|
+
}
|
|
73
|
+
&-required {
|
|
74
|
+
.input;
|
|
75
|
+
border: 1px solid @clr-main-danger;
|
|
76
|
+
&:hover, &:focus, &.active {
|
|
77
|
+
border: 1px solid @clr-border-active;
|
|
78
|
+
}
|
|
79
|
+
&::placeholder {
|
|
80
|
+
color: @clr-secondary-subject;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// https://snipp.ru/html-css/input-type-number
|
|
86
|
+
.u-number {
|
|
87
|
+
display: inline-block;
|
|
88
|
+
position: relative;
|
|
89
|
+
&:hover {
|
|
90
|
+
.u-input {
|
|
91
|
+
border: 1px solid @clr-border-active;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
.u-number-down {
|
|
95
|
+
cursor: pointer;
|
|
96
|
+
position: absolute;
|
|
97
|
+
top: calc(50% + 2px);
|
|
98
|
+
right: 16px;
|
|
99
|
+
width: 10px;
|
|
100
|
+
height: 6px;
|
|
101
|
+
padding: 0;
|
|
102
|
+
display: block;
|
|
103
|
+
border: none;
|
|
104
|
+
background-color: transparent;
|
|
105
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%23748AB9'/%3E%3C/svg%3E%0A");
|
|
106
|
+
background-repeat: no-repeat;
|
|
107
|
+
.transition;
|
|
108
|
+
&:hover {
|
|
109
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
.u-number-up {
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
position: absolute;
|
|
115
|
+
top: calc(50% - 8px);
|
|
116
|
+
right: 16px;
|
|
117
|
+
width: 10px;
|
|
118
|
+
height: 6px;
|
|
119
|
+
padding: 0;
|
|
120
|
+
display: block;
|
|
121
|
+
border: none;
|
|
122
|
+
background-color: transparent;
|
|
123
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%23748AB9'/%3E%3C/svg%3E%0A");
|
|
124
|
+
background-repeat: no-repeat;
|
|
125
|
+
transform: rotate(180deg);
|
|
126
|
+
.transition;
|
|
127
|
+
&:hover {
|
|
128
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.38415 5.53884L9.31663 0.819867C9.58801 0.494204 9.35643 -0.000225067 8.93252 -0.000225067L1.06756 -0.000225067C0.64364 -0.000225067 0.412061 0.494203 0.683447 0.819866L4.61593 5.53884C4.81582 5.77872 5.18425 5.77872 5.38415 5.53884Z' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.u-selectbox {
|
|
134
|
+
position: relative;
|
|
135
|
+
&-select {
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
.u-input;
|
|
138
|
+
position: relative;
|
|
139
|
+
&-open {
|
|
140
|
+
border: 1px solid @clr-border-active;
|
|
141
|
+
.u-selectbox-select-icon {
|
|
142
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.7071 10.3819C11.3166 10.7724 10.6834 10.7724 10.2929 10.3819L5.99999 6.08902L1.70711 10.3819C1.31658 10.7724 0.683418 10.7724 0.292894 10.3819C-0.0976305 9.99139 -0.0976315 9.35822 0.292892 8.9677L5.29288 3.9677C5.48042 3.78016 5.73477 3.67481 5.99999 3.6748C6.26521 3.6748 6.51956 3.78016 6.7071 3.9677L11.7071 8.9677C12.0976 9.35822 12.0976 9.99139 11.7071 10.3819Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
143
|
+
}
|
|
144
|
+
& + .u-selectbox-options {
|
|
145
|
+
display: block;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
&-icon {
|
|
149
|
+
position: absolute;
|
|
150
|
+
display: block;
|
|
151
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292892 4.29289C0.683416 3.90237 1.31658 3.90237 1.70711 4.29289L6.00001 8.58579L10.2929 4.29289C10.6834 3.90237 11.3166 3.90237 11.7071 4.29289C12.0976 4.68342 12.0976 5.31658 11.7071 5.70711L6.70712 10.7071C6.51958 10.8946 6.26523 11 6.00001 11C5.73479 11 5.48044 10.8946 5.2929 10.7071L0.292894 5.70711C-0.0976308 5.31658 -0.0976314 4.68342 0.292892 4.29289Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
152
|
+
background-repeat: no-repeat;
|
|
153
|
+
width: 12px;
|
|
154
|
+
height: 12px;
|
|
155
|
+
right: 20px;
|
|
156
|
+
top: calc(50% - 7px);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
&-options {
|
|
160
|
+
display: none;
|
|
161
|
+
position: absolute;
|
|
162
|
+
width: 100%;
|
|
163
|
+
border: 1px solid @clr-secondary-cold;
|
|
164
|
+
border-radius: @radius;
|
|
165
|
+
margin-top: 2px;
|
|
166
|
+
}
|
|
167
|
+
&-option {
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
min-height: 48px;
|
|
170
|
+
height: 100%;
|
|
171
|
+
background-color: @clr-secondary-empty;
|
|
172
|
+
border-bottom: 1px solid @clr-secondary-quiet;
|
|
173
|
+
padding: 14px 16px;
|
|
174
|
+
.tt;
|
|
175
|
+
&:first-child {
|
|
176
|
+
border-top-right-radius: @radius;
|
|
177
|
+
border-top-left-radius: @radius;
|
|
178
|
+
}
|
|
179
|
+
&:last-child {
|
|
180
|
+
border-bottom: none;
|
|
181
|
+
border-bottom-right-radius: @radius;
|
|
182
|
+
border-bottom-left-radius: @radius;
|
|
183
|
+
}
|
|
184
|
+
&:hover {
|
|
185
|
+
background-color: #E7F2FF;
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.u-search {
|
|
191
|
+
display: inline-block;
|
|
192
|
+
position: relative;
|
|
193
|
+
.u-input {
|
|
194
|
+
padding-left: 46px;
|
|
195
|
+
}
|
|
196
|
+
&:hover {
|
|
197
|
+
.u-input {
|
|
198
|
+
border: 1px solid @clr-border-active;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
&-loupe {
|
|
202
|
+
cursor: pointer;
|
|
203
|
+
position: absolute;
|
|
204
|
+
top: calc(50% - 10px);
|
|
205
|
+
left: 16px;
|
|
206
|
+
width: 20px;
|
|
207
|
+
height: 20px;
|
|
208
|
+
padding: 0;
|
|
209
|
+
display: block;
|
|
210
|
+
border: none;
|
|
211
|
+
background-color: transparent;
|
|
212
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.728 4C13.6396 4 16 6.36036 16 9.272C16 12.1836 13.6396 14.544 10.728 14.544C9.2719 14.544 7.95527 13.955 7.00013 12.9999C6.04499 12.0447 5.456 10.7281 5.456 9.272C5.456 6.36036 7.81635 4 10.728 4ZM18 9.272C18 5.25579 14.7442 2 10.728 2C6.71178 2 3.456 5.25579 3.456 9.272C3.456 10.9191 4.00448 12.4394 4.92744 13.6583L1.58579 17L3 18.4142L6.34165 15.0726C7.56063 15.9955 9.0809 16.544 10.728 16.544C14.7442 16.544 18 13.2882 18 9.272Z' fill='%231E4391'/%3E%3C/svg%3E ");
|
|
213
|
+
background-repeat: no-repeat;
|
|
214
|
+
.transition;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.message() {
|
|
4
|
+
padding: 18px 16px 18px 52px;
|
|
5
|
+
border-radius: @radius;
|
|
6
|
+
font-weight: 400;
|
|
7
|
+
font-size: 16px;
|
|
8
|
+
color: @clr-main-dark;
|
|
9
|
+
background-repeat: no-repeat;
|
|
10
|
+
background-position: top calc(50% - 1px) left 16px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.u-message {
|
|
14
|
+
background-color: #E7F2FF;
|
|
15
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%231E4391' stroke-width='2'%3E%3C/circle%3E%3Crect x='9' y='8' width='2' height='8' rx='1' fill='%231E4391'%3E%3C/rect%3E%3Ccircle cx='10' cy='6' r='1' fill='%231E4391'%3E%3C/circle%3E%3C/svg%3E");
|
|
16
|
+
.message;
|
|
17
|
+
&-fail {
|
|
18
|
+
.message;
|
|
19
|
+
background-color: #FDEAEA;
|
|
20
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23EF302B' stroke-width='2'%3E%3C/circle%3E%3Ccircle cx='10' cy='15' r='1' fill='%23EF302B'%3E%3C/circle%3E%3Cpath d='M8.59357 6.49708C8.54286 5.68582 9.18716 5 10 5C10.8128 5 11.4571 5.68582 11.4064 6.49708L11.0624 12.0019C11.0273 12.563 10.5621 13 10 13C9.4379 13 8.97268 12.563 8.93762 12.0019L8.59357 6.49708Z' fill='%23EF302B'%3E%3C/path%3E%3C/svg%3E");
|
|
21
|
+
}
|
|
22
|
+
&-success {
|
|
23
|
+
.message;
|
|
24
|
+
background-color: #EDF7EB;
|
|
25
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23147246' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M6 10.5L9.10148 13.6015C9.31345 13.8134 9.663 13.7925 9.8482 13.5568L15 7' stroke='%23147246' stroke-width='2' stroke-linecap='round'%3E%3C/path%3E%3C/svg%3E");
|
|
26
|
+
}
|
|
27
|
+
&-warning {
|
|
28
|
+
.message;
|
|
29
|
+
background-color: #FCF4E6;
|
|
30
|
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23E98446' stroke-width='2'%3E%3C/circle%3E%3Cpath d='M9.24233 13C9.03869 13 8.87361 12.8349 8.87361 12.6313C8.87361 12.229 8.92092 11.8715 9.01552 11.5587C9.11013 11.2458 9.25795 10.9665 9.45898 10.7207C9.67184 10.4749 9.84922 10.2905 9.99113 10.1676C10.1449 10.0335 10.3696 9.86034 10.6652 9.64805C10.9017 9.48045 11.0791 9.34637 11.1973 9.24581C11.3274 9.13408 11.4693 8.99441 11.6231 8.82682C11.7886 8.64804 11.9069 8.4581 11.9778 8.25698C12.0488 8.05587 12.0843 7.82681 12.0843 7.56983C12.0843 7.20112 11.9897 6.8771 11.8004 6.59777C11.6231 6.30727 11.3747 6.08939 11.0554 5.94413C10.748 5.78771 10.3991 5.7095 10.0089 5.7095C9.42942 5.7095 8.92683 5.87709 8.50111 6.21229C8.33022 6.34607 8.19259 6.4989 8.08823 6.67078C7.82922 7.09735 7.45131 7.51955 6.95227 7.51955C6.4297 7.51955 5.99284 7.08288 6.12856 6.57825C6.30589 5.91891 6.6651 5.37233 7.20621 4.93855C7.99852 4.31285 8.93275 4 10.0089 4C11.1323 4 12.0783 4.32402 12.847 4.97207C13.6157 5.62012 14 6.48603 14 7.56983C14 7.97207 13.9527 8.32961 13.8581 8.64246C13.7635 8.95531 13.6157 9.24023 13.4146 9.49721C13.2136 9.74302 13.0362 9.93296 12.8825 10.067C12.7288 10.2011 12.51 10.3743 12.2262 10.5866C11.9778 10.7765 11.7945 10.9218 11.6763 11.0223C11.5698 11.1117 11.4339 11.2458 11.2683 11.4246C11.1146 11.6034 11.0022 11.7933 10.9313 11.9944C10.8721 12.1844 10.8426 12.3966 10.8426 12.6313C10.8426 12.8349 10.6775 13 10.4739 13H9.24233Z' fill='%23E98446'%3E%3C/path%3E%3Ccircle cx='10' cy='15' r='1' fill='%23E98446'%3E%3C/circle%3E%3C/svg%3E");
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
.u-preloader {
|
|
2
|
+
text-align: center;
|
|
3
|
+
&-container {
|
|
4
|
+
overflow: visible;
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
&-dot {
|
|
8
|
+
transform-origin: center;
|
|
9
|
+
animation: rotate 3s linear infinite;
|
|
10
|
+
-webkit-animation: rotate 3s linear infinite;
|
|
11
|
+
-moz-animation: rotate 3s linear infinite;
|
|
12
|
+
}
|
|
13
|
+
&-logo {
|
|
14
|
+
position: absolute;
|
|
15
|
+
top: 50%;
|
|
16
|
+
&:hover {
|
|
17
|
+
transform-origin: center;
|
|
18
|
+
animation: negative_rotate 3s linear infinite;
|
|
19
|
+
-webkit-animation: negative_rotate 3s linear infinite;
|
|
20
|
+
-moz-animation: negative_rotate 3s linear infinite;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.u-preloader-gradient {
|
|
26
|
+
text-align: center;
|
|
27
|
+
&-container {
|
|
28
|
+
overflow: visible;
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
&-dot {
|
|
32
|
+
transform-origin: center;
|
|
33
|
+
animation: rotate 3s linear infinite;
|
|
34
|
+
-webkit-animation: rotate 3s linear infinite;
|
|
35
|
+
-moz-animation: rotate 3s linear infinite;
|
|
36
|
+
}
|
|
37
|
+
&-logo {
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: 50%;
|
|
40
|
+
&:hover {
|
|
41
|
+
transform-origin: center;
|
|
42
|
+
animation: negative_rotate 3s linear infinite;
|
|
43
|
+
-webkit-animation: negative_rotate 3s linear infinite;
|
|
44
|
+
-moz-animation: negative_rotate 3s linear infinite;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.u-preloader-mini {
|
|
50
|
+
text-align: center;
|
|
51
|
+
&-gradient {
|
|
52
|
+
text-align: center;
|
|
53
|
+
&-container {
|
|
54
|
+
overflow: visible;
|
|
55
|
+
position: relative;
|
|
56
|
+
}
|
|
57
|
+
&-dot {
|
|
58
|
+
transform-origin: center;
|
|
59
|
+
animation: rotate 3s linear infinite;
|
|
60
|
+
-webkit-animation: rotate 3s linear infinite;
|
|
61
|
+
-moz-animation: rotate 3s linear infinite;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
&-container {
|
|
65
|
+
overflow: visible;
|
|
66
|
+
position: relative;
|
|
67
|
+
}
|
|
68
|
+
&-dot {
|
|
69
|
+
transform-origin: center;
|
|
70
|
+
animation: rotate 3s linear infinite;
|
|
71
|
+
-webkit-animation: rotate 3s linear infinite;
|
|
72
|
+
-moz-animation: rotate 3s linear infinite;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.u-preloader-mini-gradient {
|
|
77
|
+
text-align: center;
|
|
78
|
+
&-container {
|
|
79
|
+
overflow: visible;
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
&-dot {
|
|
83
|
+
transform-origin: center;
|
|
84
|
+
animation: rotate 3s linear infinite;
|
|
85
|
+
-webkit-animation: rotate 3s linear infinite;
|
|
86
|
+
-moz-animation: rotate 3s linear infinite;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@keyframes rotate {
|
|
91
|
+
to {
|
|
92
|
+
transform: rotate(360deg);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
@-webkit-keyframes rotate {
|
|
97
|
+
to {
|
|
98
|
+
-webkit-transform: rotate(360deg);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@-moz-keyframes rotate {
|
|
103
|
+
to {
|
|
104
|
+
transform: rotate(360deg);
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
@keyframes negative_rotate {
|
|
109
|
+
to {
|
|
110
|
+
transform: rotate(-360deg);
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@-webkit-keyframes negative_rotate {
|
|
115
|
+
to {
|
|
116
|
+
-webkit-transform: rotate(-360deg);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
@-moz-keyframes negative_rotate {
|
|
121
|
+
to {
|
|
122
|
+
transform: rotate(-360deg);
|
|
123
|
+
}
|
|
124
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.radio() {
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
width: 16px;
|
|
6
|
+
height: 16px;
|
|
7
|
+
position: relative;
|
|
8
|
+
transition: all .15s ease-in-out;
|
|
9
|
+
background-repeat: no-repeat;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.u-radio {
|
|
13
|
+
input {
|
|
14
|
+
display: none;
|
|
15
|
+
&:hover + div {
|
|
16
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%231E4391'/%3E%3C/svg%3E%0A");
|
|
17
|
+
}
|
|
18
|
+
&:checked + div {
|
|
19
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%231E4391'/%3E%3Crect x='4' y='4' width='8' height='8' rx='4' fill='%231E4391'/%3E%3C/svg%3E%0A");
|
|
20
|
+
}
|
|
21
|
+
&:disabled + div {
|
|
22
|
+
cursor: not-allowed;
|
|
23
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' fill='%23F6F6F6' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
|
|
24
|
+
}
|
|
25
|
+
&:disabled:checked + div {
|
|
26
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='%23F6F6F6' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%23D3D3D3'/%3E%3Crect x='4' y='4' width='8' height='8' rx='4' fill='%23D3D3D3'/%3E%3C/svg%3E%0A");
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
div {
|
|
30
|
+
.radio;
|
|
31
|
+
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='7.5' stroke='%23D3D3D3'/%3E%3C/svg%3E%0A");
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.status() {
|
|
4
|
+
display: flex;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
align-items: center;
|
|
7
|
+
width: max-content;
|
|
8
|
+
font-size: 12px;
|
|
9
|
+
line-height: 140%;
|
|
10
|
+
font-weight: 400;
|
|
11
|
+
height: 27px;
|
|
12
|
+
padding: 0 12px;
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.u-status-warning {
|
|
17
|
+
.status;
|
|
18
|
+
background-color: #fcf4e6;
|
|
19
|
+
color: #e98446;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.u-status-info {
|
|
23
|
+
.status;
|
|
24
|
+
background-color: #e7f2ff;
|
|
25
|
+
color: #1e4391;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.u-status-neutral {
|
|
29
|
+
.status;
|
|
30
|
+
background-color: #eee;
|
|
31
|
+
color: #222;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.u-status-success {
|
|
35
|
+
.status;
|
|
36
|
+
background-color: #edf7eb;
|
|
37
|
+
color: #147246;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.u-status-danger {
|
|
41
|
+
.status;
|
|
42
|
+
background-color: #fdeaea;
|
|
43
|
+
color: #ef302b;
|
|
44
|
+
}
|
|
45
|
+
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.switch() {
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
width: 54px;
|
|
6
|
+
height: 26px;
|
|
7
|
+
position: relative;
|
|
8
|
+
border-radius: 16px;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.switch-after() {
|
|
12
|
+
content: '';
|
|
13
|
+
display: block;
|
|
14
|
+
position: absolute;
|
|
15
|
+
left: 4px;
|
|
16
|
+
top: 4px;
|
|
17
|
+
width: 18px;
|
|
18
|
+
height: 18px;
|
|
19
|
+
border-radius: 50%;
|
|
20
|
+
background-color: @clr-secondary-empty;
|
|
21
|
+
transition: all .2s ease-in-out;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
.u-switch {
|
|
26
|
+
input {
|
|
27
|
+
display: none;
|
|
28
|
+
&:checked + div::after {
|
|
29
|
+
left: 60%;
|
|
30
|
+
}
|
|
31
|
+
&:disabled + div {
|
|
32
|
+
cursor: not-allowed;
|
|
33
|
+
background-color: @clr-secondary-outside;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
div {
|
|
37
|
+
.switch;
|
|
38
|
+
background-color: @clr-main-primary;
|
|
39
|
+
&::after {
|
|
40
|
+
.switch-after;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.u-switch-gradient {
|
|
46
|
+
input {
|
|
47
|
+
display: none;
|
|
48
|
+
&:checked + div::after {
|
|
49
|
+
left: 60%;
|
|
50
|
+
}
|
|
51
|
+
&:disabled + div {
|
|
52
|
+
cursor: not-allowed;
|
|
53
|
+
background: @clr-secondary-outside;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
div {
|
|
57
|
+
.switch;
|
|
58
|
+
background: @gradient;
|
|
59
|
+
&::after {
|
|
60
|
+
.switch-after;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
@import "../../main.less";
|
|
2
|
+
|
|
3
|
+
.tab() {
|
|
4
|
+
cursor: pointer;
|
|
5
|
+
height: @height-main;
|
|
6
|
+
border-radius: 24px;
|
|
7
|
+
padding: 0 18px;
|
|
8
|
+
font-size: 16px;
|
|
9
|
+
font-weight: 600;
|
|
10
|
+
transition: all .15s ease-out;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.tab-secondary() {
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
height: @height-secondary;
|
|
16
|
+
padding: 0 16px;
|
|
17
|
+
font-size: 16px;
|
|
18
|
+
font-weight: 400;
|
|
19
|
+
border: none;
|
|
20
|
+
border-radius: 10px;
|
|
21
|
+
transition: all .15s ease-out;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.tab-line() {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
height: @height-secondary;
|
|
27
|
+
padding: 0 16px;
|
|
28
|
+
border: none;
|
|
29
|
+
border-bottom: 2px solid @clr-secondary-empty;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
font-weight: 400;
|
|
32
|
+
transition: all .15s ease-out;
|
|
33
|
+
background-color: @clr-secondary-empty
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.u-tab {
|
|
37
|
+
.tab;
|
|
38
|
+
color: @clr-secondary-subject;
|
|
39
|
+
background-color: @clr-secondary-empty;
|
|
40
|
+
border: 2px solid @clr-secondary-outside;
|
|
41
|
+
&:focus, &.u-tab-active {
|
|
42
|
+
color: @clr-main-primary;
|
|
43
|
+
background-color: @clr-secondary-empty;
|
|
44
|
+
border: 2px solid @clr-main-primary;
|
|
45
|
+
}
|
|
46
|
+
&:hover {
|
|
47
|
+
color: @clr-secondary-empty;
|
|
48
|
+
background-color: @clr-main-primary;
|
|
49
|
+
border: 2px solid @clr-main-primary;
|
|
50
|
+
}
|
|
51
|
+
&.all-danger {
|
|
52
|
+
&:focus, &.u-tab-active {
|
|
53
|
+
color: @clr-main-danger;
|
|
54
|
+
background-color: @clr-secondary-empty;
|
|
55
|
+
border: 2px solid @clr-main-danger;
|
|
56
|
+
}
|
|
57
|
+
&:hover {
|
|
58
|
+
color: @clr-secondary-empty;
|
|
59
|
+
background-color: @clr-main-danger;
|
|
60
|
+
border: 2px solid @clr-main-danger;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
&-line {
|
|
64
|
+
.tab-line;
|
|
65
|
+
color: #545454;
|
|
66
|
+
&:hover, &:focus, &.u-tab-active {
|
|
67
|
+
color: @clr-main-primary;
|
|
68
|
+
border-bottom: 2px solid @clr-main-primary;
|
|
69
|
+
}
|
|
70
|
+
&-secondary {
|
|
71
|
+
.tab-line;
|
|
72
|
+
color: @clr-secondary-cold;
|
|
73
|
+
&:hover, &:focus, &.u-tab-active {
|
|
74
|
+
color: @clr-main-primary;
|
|
75
|
+
border-bottom: 2px solid @clr-main-primary;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
@gradient: linear-gradient(270deg, #FF2D7F -0.71%, #FB3727 47.63%, #FEEA0F 100%);
|
|
2
|
+
|
|
3
|
+
@clr-main-primary: #1E4391;
|
|
4
|
+
@clr-main-danger: #EF302B;
|
|
5
|
+
@clr-main-light: #F6F6F6;
|
|
6
|
+
@clr-main-dark: #222222;
|
|
7
|
+
@clr-secondary-primary: #0F2B5E;
|
|
8
|
+
@clr-secondary-quiet: #CAD1E1;
|
|
9
|
+
@clr-secondary-chilly: #9FAECD;
|
|
10
|
+
@clr-secondary-cold: #748AB9;
|
|
11
|
+
@clr-secondary-danger: #C0231F;
|
|
12
|
+
@clr-secondary-empty: #FFFFFF;
|
|
13
|
+
@clr-secondary-outside: #D3D3D3;
|
|
14
|
+
@clr-secondary-subject: #A7A7A7;
|
|
15
|
+
@clr-secondary-supportive: #7A7A7A;
|
|
16
|
+
@clr-secondary-focusing: #F58380;
|
|
17
|
+
@clr-additional-warning: #E98446;
|
|
18
|
+
@clr-additional-danger: #E54B6A;
|
|
19
|
+
@clr-additional-done: #3BA68C;
|
|
20
|
+
|
|
21
|
+
@clr-border: @clr-secondary-outside;
|
|
22
|
+
@clr-border-active: @clr-secondary-cold;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@import "./colors.less";
|
|
2
|
+
|
|
3
|
+
.h1() {
|
|
4
|
+
font-weight: 600;
|
|
5
|
+
font-size: 52px;
|
|
6
|
+
line-height: 57.2px;
|
|
7
|
+
}
|
|
8
|
+
.h2() {
|
|
9
|
+
font-weight: 600;
|
|
10
|
+
font-size: 40px;
|
|
11
|
+
line-height: 48px;
|
|
12
|
+
}
|
|
13
|
+
.h3() {
|
|
14
|
+
font-weight: 600;
|
|
15
|
+
font-size: 24px;
|
|
16
|
+
line-height: 28px;
|
|
17
|
+
}
|
|
18
|
+
.h4() {
|
|
19
|
+
font-weight: 600;
|
|
20
|
+
font-size: 18px;
|
|
21
|
+
line-height: 22px;
|
|
22
|
+
}
|
|
23
|
+
.h5() {
|
|
24
|
+
font-weight: 400;
|
|
25
|
+
font-size: 12px;
|
|
26
|
+
line-height: 16.8px;
|
|
27
|
+
}
|
|
28
|
+
.st() { /*simple text*/
|
|
29
|
+
font-weight: 400;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
line-height: 22.4px;
|
|
32
|
+
}
|
|
33
|
+
.ds() { /*descriptor*/
|
|
34
|
+
font-weight: 600;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
line-height: 22.4px;
|
|
37
|
+
}
|
|
38
|
+
.th() { /*table header*/
|
|
39
|
+
font-weight: 600;
|
|
40
|
+
font-size: 14px;
|
|
41
|
+
line-height: 20px;
|
|
42
|
+
}
|
|
43
|
+
.tt() { /*table text*/
|
|
44
|
+
font-weight: 400;
|
|
45
|
+
font-size: 14px;
|
|
46
|
+
line-height: 20px;
|
|
47
|
+
}
|
|
48
|
+
.bt() { /*button text*/
|
|
49
|
+
font-weight: 500;
|
|
50
|
+
font-size: 13px;
|
|
51
|
+
line-height: 15.6px;
|
|
52
|
+
}
|