@snabcentr/client-ui 0.2.3 → 0.2.6
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +0 -6
- package/package.json +1 -1
- package/styles/taiga/variables.less +3 -150
package/README.md
CHANGED
|
@@ -7,9 +7,3 @@
|
|
|
7
7
|
## License
|
|
8
8
|
|
|
9
9
|
Commercial (Коммерческая)
|
|
10
|
-
|
|
11
|
-
## Запуск приложения
|
|
12
|
-
|
|
13
|
-
* Сборка тестового приложения `ng build client-ui-example`.
|
|
14
|
-
* Перед запуском приложения нужно выполнить сборку библиотеки `ng build @snabcentr/client-ui`. Собранная библиотека будет находиться в папке `dist/`.
|
|
15
|
-
* Запуск `npm start`.
|
package/package.json
CHANGED
|
@@ -1,70 +1,11 @@
|
|
|
1
|
-
// TODO: TASK:[6824]: Доработать файл стилей.
|
|
2
|
-
@font-fallback: -apple-system, 'BlinkMacSystemFont', system-ui, 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif;
|
|
3
|
-
|
|
4
1
|
:root {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
--tui-font-heading: var(--tui-heading-font);
|
|
9
|
-
--tui-font-heading-1: bold 3.125rem/3.5rem var(--tui-font-heading);
|
|
10
|
-
--tui-font-heading-2: bold 2.75rem/3rem var(--tui-font-heading);
|
|
11
|
-
--tui-font-heading-3: bold 2.25rem/2.5rem var(--tui-font-heading);
|
|
12
|
-
--tui-font-heading-4: bold 1.75rem/2rem var(--tui-font-heading);
|
|
13
|
-
--tui-font-heading-5: bold 1.5rem/1.75rem var(--tui-font-heading);
|
|
14
|
-
--tui-font-heading-6: bold 1.25rem/1.5rem var(--tui-font-heading);
|
|
15
|
-
--tui-font-text: var(--tui-text-font);
|
|
16
|
-
--tui-font-text-xl: normal 1.25rem/1.75rem var(--tui-font-text);
|
|
17
|
-
--tui-font-text-l: normal 1.125rem/1.75rem var(--tui-font-text);
|
|
18
|
-
--tui-font-text-l-2: normal 1.125rem/1.5rem var(--tui-font-text);
|
|
19
|
-
--tui-font-text-m: normal 1rem/1.5rem var(--tui-font-text);
|
|
20
|
-
--tui-font-text-m-2: normal 1rem/1.25rem var(--tui-font-text);
|
|
21
|
-
--tui-font-text-s: normal 0.875rem/1.25rem var(--tui-font-text);
|
|
22
|
-
--tui-font-text-s-2: normal 0.875rem/1rem var(--tui-font-text);
|
|
23
|
-
--tui-font-text-xs: normal 0.75rem/1rem var(--tui-font-text);
|
|
24
|
-
// Sizes
|
|
25
|
-
--tui-radius-xs: 0.25rem;
|
|
26
|
-
--tui-radius-s: 0.5rem;
|
|
27
|
-
--tui-radius-m: 0.75rem;
|
|
28
|
-
--tui-radius-l: 0.75rem;
|
|
29
|
-
--tui-radius-xl: 1.5rem;
|
|
30
|
-
--tui-skeleton-radius: var(--tui-radius-m);
|
|
31
|
-
--tui-height-xs: 1.5rem;
|
|
32
|
-
--tui-height-s: 2rem;
|
|
33
|
-
--tui-height-m: 2.75rem;
|
|
34
|
-
--tui-height-l: 3.5rem;
|
|
35
|
-
// Input padding
|
|
36
|
-
--tui-padding-s: 0.75rem;
|
|
37
|
-
--tui-padding-m: 0.75rem;
|
|
38
|
-
--tui-padding-l: 1rem;
|
|
39
|
-
// Misc
|
|
40
|
-
--tui-duration: 0.3s;
|
|
41
|
-
--tui-backdrop: none;
|
|
42
|
-
// Special colors
|
|
43
|
-
--tui-disabled-opacity: 0.56;
|
|
44
|
-
--tui-autofill: #fff5c0;
|
|
45
|
-
// Base colors
|
|
46
|
-
--tui-base-01: #fff; // background and icons on inverted background
|
|
47
|
-
--tui-base-02: #f6f6f6; // secondary background, marker icons background
|
|
48
|
-
--tui-base-03: #eeefef; // basic border
|
|
49
|
-
--tui-base-04: #e0dfe0; // hovered borders
|
|
50
|
-
--tui-base-05: #cbcbcb; // interface icons
|
|
51
|
-
--tui-base-06: #b8b8b8; // hovered interface icons
|
|
52
|
-
--tui-base-07: #888888; // inverted background
|
|
53
|
-
--tui-base-08: #666666; // dark interface icons
|
|
54
|
-
--tui-base-09: #000; // icons on inverted background
|
|
2
|
+
// Sizes
|
|
3
|
+
--tui-skeleton-radius: var(--tui-radius-m);
|
|
4
|
+
// Base colors
|
|
55
5
|
--tui-primary: #ffcc40; // primary buttons, background
|
|
56
6
|
--tui-primary-hover: #ffe49b; // primary buttons hover
|
|
57
7
|
--tui-primary-active: #ffbb00; // primary buttons pressed
|
|
58
8
|
--tui-primary-text: #000; // text on primary background
|
|
59
|
-
--tui-secondary: var(--tui-base-01); // inputs and secondary buttons
|
|
60
|
-
--tui-secondary-hover: var(--tui-base-04); // inputs and secondary buttons hover
|
|
61
|
-
--tui-secondary-active: var(--tui-base-02); // inputs and secondary buttons pressed
|
|
62
|
-
--tui-accent: #ff7043; // fill and outline of accent elements
|
|
63
|
-
--tui-accent-hover: #ff9a94; // accent elements hover
|
|
64
|
-
--tui-accent-active: #e7716a; // accent elements pressed
|
|
65
|
-
--tui-accent-text: #fff; // text on accent background
|
|
66
|
-
--tui-selection: rgba(112, 182, 246, 0.12); // selected text background
|
|
67
|
-
--tui-focus: rgba(51, 51, 51, 0.64); // focus ring color
|
|
68
9
|
--tui-clear: rgba(246, 246, 246, 1); // translucent dark fill
|
|
69
10
|
--tui-clear-disabled: rgb(230, 229, 229); // translucent dark fill disabled
|
|
70
11
|
--tui-clear-hover: rgba(238, 239, 239, 1); // translucent dark fill hover
|
|
@@ -72,88 +13,6 @@
|
|
|
72
13
|
--tui-clear-inverse: rgba(255, 255, 255, 0.16); // translucent light fill
|
|
73
14
|
--tui-clear-inverse-hover: rgba(255, 255, 255, 0.24); // translucent light fill hover
|
|
74
15
|
--tui-clear-inverse-active: rgba(255, 255, 255, 0.4); // translucent light fill pressed
|
|
75
|
-
--tui-elevation-01: #fff; // background of elevated elements
|
|
76
|
-
--tui-elevation-02: #fff; // background of elevated elements
|
|
77
|
-
// Statuses
|
|
78
|
-
--tui-error-fill: rgba(226, 56, 56, 1); // icons and decorative elements with error status
|
|
79
|
-
--tui-error-bg: rgba(252, 230, 230, 1); // translucent error background
|
|
80
|
-
--tui-error-bg-hover: rgba(252, 209, 209, 1); // translucent hover error background
|
|
81
|
-
--tui-success-fill: rgba(67, 146, 39, 1); // icon and decorative elements with success status
|
|
82
|
-
--tui-success-bg: rgba(228, 242, 224, 1); // translucent success background
|
|
83
|
-
--tui-success-bg-hover: rgba(194, 220, 185, 1); // translucent success hover
|
|
84
|
-
--tui-warning-fill: var(--tui-primary); // icon and decorative elements with warning status
|
|
85
|
-
--tui-warning-bg: rgba(255, 246, 223, 1); // translucent warning background
|
|
86
|
-
--tui-warning-bg-hover: var(--tui-primary-hover); // translucent warning background
|
|
87
|
-
--tui-info-fill: rgba(119, 174, 237, 1); // icon and decorative elements with info status
|
|
88
|
-
--tui-info-bg: rgba(235, 245, 255, 1); // translucent info background
|
|
89
|
-
--tui-info-bg-hover: rgba(212, 231, 255, 1); // translucent info background
|
|
90
|
-
--tui-neutral-fill: var(--tui-base-07); // icon and decorative elements with neutral status
|
|
91
|
-
--tui-neutral-bg: var(--tui-base-02); // translucent info background
|
|
92
|
-
--tui-neutral-bg-hover: var(--tui-base-04); // translucent info background
|
|
93
|
-
// Text
|
|
94
|
-
--tui-text-01: var(--tui-base-09);
|
|
95
|
-
--tui-text-02: var(--tui-base-07);
|
|
96
|
-
--tui-text-03: var(--tui-base-05);
|
|
97
|
-
--tui-link: #1e50c8;
|
|
98
|
-
--tui-link-hover: #4c91ed;
|
|
99
|
-
--tui-positive: var(--tui-success-fill);
|
|
100
|
-
--tui-positive-hover: var(--tui-success-bg);
|
|
101
|
-
--tui-negative: var(--tui-error-fill);
|
|
102
|
-
--tui-negative-hover: var(--tui-error-bg-hover);
|
|
103
|
-
// Modifiers for dark background
|
|
104
|
-
--tui-error-fill-night: rgba(255, 140, 103, 1);
|
|
105
|
-
--tui-error-bg-night: rgba(244, 87, 37, 0.32);
|
|
106
|
-
--tui-error-bg-night-hover: rgba(244, 87, 37, 0.4);
|
|
107
|
-
--tui-success-fill-night: rgb(74, 201, 155);
|
|
108
|
-
--tui-success-bg-night: rgba(74, 201, 155, 0.32);
|
|
109
|
-
--tui-success-bg-night-hover: rgba(74, 201, 155, 0.4);
|
|
110
|
-
--tui-warning-fill-night: rgb(255, 199, 0);
|
|
111
|
-
--tui-warning-bg-night: rgba(255, 199, 0, 0.32);
|
|
112
|
-
--tui-warning-bg-night-hover: rgba(255, 199, 0, 0.4);
|
|
113
|
-
--tui-info-fill-night: rgb(112, 182, 246);
|
|
114
|
-
--tui-info-bg-night: rgba(112, 182, 246, 0.32);
|
|
115
|
-
--tui-info-bg-night-hover: rgba(112, 182, 246, 0.4);
|
|
116
|
-
--tui-neutral-fill-night: rgb(149, 155, 164);
|
|
117
|
-
--tui-neutral-bg-night: rgba(149, 155, 164, 0.32);
|
|
118
|
-
--tui-neutral-bg-night-hover: rgba(149, 155, 164, 0.48);
|
|
119
|
-
--tui-autofill-night: rgb(85, 74, 42);
|
|
120
|
-
//
|
|
121
|
-
--tui-text-01-night: rgba(255, 255, 255, 1);
|
|
122
|
-
--tui-text-02-night: rgba(255, 255, 255, 0.72);
|
|
123
|
-
--tui-text-03-night: rgba(255, 255, 255, 0.6);
|
|
124
|
-
--tui-link-night: #6788ff;
|
|
125
|
-
--tui-link-night-hover: #526ed3;
|
|
126
|
-
--tui-positive-night: #44c596;
|
|
127
|
-
--tui-positive-night-hover: #3aa981;
|
|
128
|
-
--tui-negative-night: #ff8c67;
|
|
129
|
-
--tui-negative-night-hover: #bb593a;
|
|
130
|
-
//
|
|
131
|
-
--tui-support-01: #a8cef1;
|
|
132
|
-
--tui-support-02: #3682db;
|
|
133
|
-
--tui-support-03: #8dda71;
|
|
134
|
-
--tui-support-04: #34b41f;
|
|
135
|
-
--tui-support-05: #e29398;
|
|
136
|
-
--tui-support-06: #b8474e;
|
|
137
|
-
--tui-support-07: #fcc068;
|
|
138
|
-
--tui-support-08: #ff8a00;
|
|
139
|
-
--tui-support-09: #dab3f9;
|
|
140
|
-
--tui-support-10: #7b439e;
|
|
141
|
-
--tui-support-11: #fee797;
|
|
142
|
-
--tui-support-12: #fcbb14;
|
|
143
|
-
--tui-support-13: #ea97c4;
|
|
144
|
-
--tui-support-14: #bd65a4;
|
|
145
|
-
--tui-support-15: #7fd7cc;
|
|
146
|
-
--tui-support-16: #2fad96;
|
|
147
|
-
--tui-support-17: #d4aca2;
|
|
148
|
-
--tui-support-18: #9d6f64;
|
|
149
|
-
--tui-support-19: #d2e9a2;
|
|
150
|
-
--tui-support-20: #aadc42;
|
|
151
|
-
--tui-support-21: #a0c5df;
|
|
152
|
-
--tui-chart-0: var(--tui-primary);
|
|
153
|
-
--tui-chart-1: var(--tui-support-13);
|
|
154
|
-
--tui-chart-2: var(--tui-support-21);
|
|
155
|
-
--tui-chart-3: var(--tui-support-11);
|
|
156
|
-
--tui-chart-4: var(--tui-base-05);
|
|
157
16
|
}
|
|
158
17
|
|
|
159
18
|
sc-input-quantity {
|
|
@@ -183,9 +42,3 @@ sc-input-quantity {
|
|
|
183
42
|
display: none !important;
|
|
184
43
|
}
|
|
185
44
|
}
|
|
186
|
-
|
|
187
|
-
tui-hint {
|
|
188
|
-
background-color: #526ed3 !important;
|
|
189
|
-
color: white !important;
|
|
190
|
-
font: var(--tui-font-text-s) !important;
|
|
191
|
-
}
|