@formixru/b2b-ui 4.4.0 → 4.5.1
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formixru/b2b-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.5.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -22,12 +22,14 @@
|
|
|
22
22
|
"dev": "storybook dev -p 3000",
|
|
23
23
|
"build": "storybook build -o www"
|
|
24
24
|
},
|
|
25
|
-
"
|
|
25
|
+
"dependencies": {
|
|
26
26
|
"@advdominion/css-var": "^1.0.1",
|
|
27
|
-
"@advdominion/eslint-config": "^2.1.0",
|
|
28
27
|
"@advdominion/get-scrollbar-width": "^2.0.1",
|
|
29
28
|
"@advdominion/pluralize": "^1.0.2",
|
|
30
|
-
"@advdominion/scroll-to": "^1.0.1"
|
|
29
|
+
"@advdominion/scroll-to": "^1.0.1"
|
|
30
|
+
},
|
|
31
|
+
"devDependencies": {
|
|
32
|
+
"@advdominion/eslint-config": "^2.1.0",
|
|
31
33
|
"@advdominion/stylelint-config": "^1.1.0",
|
|
32
34
|
"@advdominion/tooltip": "^7.0.1",
|
|
33
35
|
"@floating-ui/dom": "^1.7.6",
|
|
@@ -69,10 +71,6 @@
|
|
|
69
71
|
"yargs": "^18.0.0"
|
|
70
72
|
},
|
|
71
73
|
"peerDependencies": {
|
|
72
|
-
"@advdominion/css-var": "^1.0.0",
|
|
73
|
-
"@advdominion/get-scrollbar-width": "^2.0.0",
|
|
74
|
-
"@advdominion/pluralize": "^1.0.0",
|
|
75
|
-
"@advdominion/scroll-to": "^1.0.0",
|
|
76
74
|
"@advdominion/tooltip": "^7.0.0",
|
|
77
75
|
"color": "^5.0.0",
|
|
78
76
|
"dayjs": "^1.0.0",
|
|
@@ -10,8 +10,8 @@ $b: '.action-link';
|
|
|
10
10
|
|
|
11
11
|
@include font($action-link-font);
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
@include font($action-link-
|
|
13
|
+
&_important {
|
|
14
|
+
@include font($action-link-important-font);
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
&_danger {
|
|
@@ -20,12 +20,20 @@ $b: '.action-link';
|
|
|
20
20
|
text-decoration: none;
|
|
21
21
|
|
|
22
22
|
@include link.transform;
|
|
23
|
-
@include font($action-link-danger-font);
|
|
24
23
|
|
|
25
24
|
&:hover,
|
|
26
25
|
&:focus-visible {
|
|
27
26
|
color: $action-link-danger-active-color;
|
|
28
27
|
}
|
|
28
|
+
|
|
29
|
+
&#{$b}_important {
|
|
30
|
+
color: $action-link-important-danger-color;
|
|
31
|
+
|
|
32
|
+
&:hover,
|
|
33
|
+
&:focus-visible {
|
|
34
|
+
color: $action-link-important-danger-active-color;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
29
37
|
}
|
|
30
38
|
|
|
31
39
|
&__icon {
|
|
@@ -45,5 +53,14 @@ $b: '.action-link';
|
|
|
45
53
|
#{$b}_danger:focus-visible & {
|
|
46
54
|
fill: $action-link-danger-icon-active-color;
|
|
47
55
|
}
|
|
56
|
+
|
|
57
|
+
#{$b}_important#{$b}_danger & {
|
|
58
|
+
fill: $action-link-important-danger-icon-color;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#{$b}_important#{$b}_danger:hover &,
|
|
62
|
+
#{$b}_important#{$b}_danger:focus-visible & {
|
|
63
|
+
fill: $action-link-important-danger-icon-active-color;
|
|
64
|
+
}
|
|
48
65
|
}
|
|
49
66
|
}
|
|
@@ -15,7 +15,8 @@ $b: '.link';
|
|
|
15
15
|
@include transform;
|
|
16
16
|
|
|
17
17
|
&:any-link,
|
|
18
|
-
&:enabled
|
|
18
|
+
&:enabled,
|
|
19
|
+
&[tabindex] {
|
|
19
20
|
color: $color;
|
|
20
21
|
cursor: pointer;
|
|
21
22
|
|
|
@@ -30,7 +31,8 @@ $b: '.link';
|
|
|
30
31
|
@include link;
|
|
31
32
|
|
|
32
33
|
&_solid:any-link,
|
|
33
|
-
&_solid:enabled
|
|
34
|
+
&_solid:enabled,
|
|
35
|
+
&_solid[tabindex] {
|
|
34
36
|
&:not(#{$b}_partial),
|
|
35
37
|
& #{$b}__text {
|
|
36
38
|
@include ul-solid($link-color);
|
|
@@ -46,7 +48,8 @@ $b: '.link';
|
|
|
46
48
|
}
|
|
47
49
|
|
|
48
50
|
&_dashed:any-link,
|
|
49
|
-
&_dashed:enabled
|
|
51
|
+
&_dashed:enabled,
|
|
52
|
+
&_dashed[tabindex] {
|
|
50
53
|
&:not(#{$b}_partial),
|
|
51
54
|
& #{$b}__text {
|
|
52
55
|
@include ul-dashed($link-color);
|
|
@@ -62,7 +65,8 @@ $b: '.link';
|
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
&_dotted:any-link,
|
|
65
|
-
&_dotted:enabled
|
|
68
|
+
&_dotted:enabled,
|
|
69
|
+
&_dotted[tabindex] {
|
|
66
70
|
&:not(#{$b}_partial),
|
|
67
71
|
& #{$b}__text {
|
|
68
72
|
@include ul-dotted($link-color);
|
|
@@ -79,7 +83,8 @@ $b: '.link';
|
|
|
79
83
|
|
|
80
84
|
&_alt {
|
|
81
85
|
&:any-link,
|
|
82
|
-
&:enabled
|
|
86
|
+
&:enabled,
|
|
87
|
+
&[tabindex] {
|
|
83
88
|
color: $link-alt-color;
|
|
84
89
|
|
|
85
90
|
&:hover,
|
|
@@ -89,7 +94,8 @@ $b: '.link';
|
|
|
89
94
|
}
|
|
90
95
|
|
|
91
96
|
&#{$b}_solid:any-link,
|
|
92
|
-
&#{$b}_solid:enabled
|
|
97
|
+
&#{$b}_solid:enabled,
|
|
98
|
+
&#{$b}_solid[tabindex] {
|
|
93
99
|
&:not(#{$b}_partial),
|
|
94
100
|
& #{$b}__text {
|
|
95
101
|
@include ul-solid($link-alt-color);
|
|
@@ -105,7 +111,8 @@ $b: '.link';
|
|
|
105
111
|
}
|
|
106
112
|
|
|
107
113
|
&#{$b}_dashed:any-link,
|
|
108
|
-
&#{$b}_dashed:enabled
|
|
114
|
+
&#{$b}_dashed:enabled,
|
|
115
|
+
&#{$b}_dashed[tabindex] {
|
|
109
116
|
&:not(#{$b}_partial),
|
|
110
117
|
& #{$b}__text {
|
|
111
118
|
@include ul-dashed($link-alt-color);
|
|
@@ -121,7 +128,8 @@ $b: '.link';
|
|
|
121
128
|
}
|
|
122
129
|
|
|
123
130
|
&#{$b}_dotted:any-link,
|
|
124
|
-
&#{$b}_dotted:enabled
|
|
131
|
+
&#{$b}_dotted:enabled,
|
|
132
|
+
&#{$b}_dotted[tabindex] {
|
|
125
133
|
&:not(#{$b}_partial),
|
|
126
134
|
& #{$b}__text {
|
|
127
135
|
@include ul-dotted($link-alt-color);
|
|
@@ -139,7 +147,8 @@ $b: '.link';
|
|
|
139
147
|
|
|
140
148
|
&_grey {
|
|
141
149
|
&:any-link,
|
|
142
|
-
&:enabled
|
|
150
|
+
&:enabled,
|
|
151
|
+
&[tabindex] {
|
|
143
152
|
color: $link-grey-color;
|
|
144
153
|
|
|
145
154
|
&:hover,
|
|
@@ -149,7 +158,8 @@ $b: '.link';
|
|
|
149
158
|
}
|
|
150
159
|
|
|
151
160
|
&#{$b}_solid:any-link,
|
|
152
|
-
&#{$b}_solid:enabled
|
|
161
|
+
&#{$b}_solid:enabled,
|
|
162
|
+
&#{$b}_solid[tabindex] {
|
|
153
163
|
&:not(#{$b}_partial),
|
|
154
164
|
& #{$b}__text {
|
|
155
165
|
@include ul-solid($link-grey-color);
|
|
@@ -165,7 +175,8 @@ $b: '.link';
|
|
|
165
175
|
}
|
|
166
176
|
|
|
167
177
|
&#{$b}_dashed:any-link,
|
|
168
|
-
&#{$b}_dashed:enabled
|
|
178
|
+
&#{$b}_dashed:enabled,
|
|
179
|
+
&#{$b}_dashed[tabindex] {
|
|
169
180
|
&:not(#{$b}_partial),
|
|
170
181
|
& #{$b}__text {
|
|
171
182
|
@include ul-dashed($link-grey-color);
|
|
@@ -181,7 +192,8 @@ $b: '.link';
|
|
|
181
192
|
}
|
|
182
193
|
|
|
183
194
|
&#{$b}_dotted:any-link,
|
|
184
|
-
&#{$b}_dotted:enabled
|
|
195
|
+
&#{$b}_dotted:enabled,
|
|
196
|
+
&#{$b}_dotted[tabindex] {
|
|
185
197
|
&:not(#{$b}_partial),
|
|
186
198
|
& #{$b}__text {
|
|
187
199
|
@include ul-dotted($link-grey-color);
|
|
@@ -199,7 +211,8 @@ $b: '.link';
|
|
|
199
211
|
|
|
200
212
|
&_inverted {
|
|
201
213
|
&:any-link,
|
|
202
|
-
&:enabled
|
|
214
|
+
&:enabled,
|
|
215
|
+
&[tabindex] {
|
|
203
216
|
color: $link-inverted-color;
|
|
204
217
|
|
|
205
218
|
&:hover,
|
|
@@ -209,7 +222,8 @@ $b: '.link';
|
|
|
209
222
|
}
|
|
210
223
|
|
|
211
224
|
&#{$b}_solid:any-link,
|
|
212
|
-
&#{$b}_solid:enabled
|
|
225
|
+
&#{$b}_solid:enabled,
|
|
226
|
+
&#{$b}_solid[tabindex] {
|
|
213
227
|
&:not(#{$b}_partial),
|
|
214
228
|
& #{$b}__text {
|
|
215
229
|
@include ul-solid($link-inverted-color);
|
|
@@ -225,7 +239,8 @@ $b: '.link';
|
|
|
225
239
|
}
|
|
226
240
|
|
|
227
241
|
&#{$b}_dashed:any-link,
|
|
228
|
-
&#{$b}_dashed:enabled
|
|
242
|
+
&#{$b}_dashed:enabled,
|
|
243
|
+
&#{$b}_dashed[tabindex] {
|
|
229
244
|
&:not(#{$b}_partial),
|
|
230
245
|
& #{$b}__text {
|
|
231
246
|
@include ul-dashed($link-inverted-color);
|
|
@@ -241,7 +256,8 @@ $b: '.link';
|
|
|
241
256
|
}
|
|
242
257
|
|
|
243
258
|
&#{$b}_dotted:any-link,
|
|
244
|
-
&#{$b}_dotted:enabled
|
|
259
|
+
&#{$b}_dotted:enabled,
|
|
260
|
+
&#{$b}_dotted[tabindex] {
|
|
245
261
|
&:not(#{$b}_partial),
|
|
246
262
|
& #{$b}__text {
|
|
247
263
|
@include ul-dotted($link-inverted-color);
|
|
@@ -7,6 +7,7 @@ $b: '.total';
|
|
|
7
7
|
border-radius: $total-radius;
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: column;
|
|
10
|
+
gap: 16px 32px;
|
|
10
11
|
padding: 24px 16px;
|
|
11
12
|
|
|
12
13
|
@include dark-border;
|
|
@@ -16,30 +17,57 @@ $b: '.total';
|
|
|
16
17
|
align-items: center;
|
|
17
18
|
flex-direction: row;
|
|
18
19
|
justify-content: space-between;
|
|
19
|
-
padding:
|
|
20
|
+
padding-left: 32px;
|
|
21
|
+
padding-right: 32px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:has(#{$b}__action-list:first-child:last-child) {
|
|
25
|
+
justify-content: flex-end;
|
|
20
26
|
}
|
|
21
27
|
|
|
22
28
|
&_shadow {
|
|
23
29
|
box-shadow: $total-shadow;
|
|
24
30
|
}
|
|
25
31
|
|
|
32
|
+
&_flat {
|
|
33
|
+
background-color: transparent;
|
|
34
|
+
padding: 0;
|
|
35
|
+
|
|
36
|
+
@include dark-border-disable;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&_s {
|
|
40
|
+
gap: 12px 24px;
|
|
41
|
+
|
|
42
|
+
@media (--tablet-landscape-up) {
|
|
43
|
+
justify-content: center;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
26
47
|
&__title {
|
|
27
48
|
@include font($total-title-mobile-font);
|
|
28
49
|
|
|
29
50
|
@media (--tablet-landscape-up) {
|
|
30
51
|
@include font($total-title-desktop-font);
|
|
31
52
|
}
|
|
53
|
+
|
|
54
|
+
#{$b}_s & {
|
|
55
|
+
max-width: 144px;
|
|
56
|
+
|
|
57
|
+
@include font($total-s-title-mobile-font);
|
|
58
|
+
|
|
59
|
+
@media (--tablet-landscape-up) {
|
|
60
|
+
@include font($total-s-title-desktop-font);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
32
63
|
}
|
|
33
64
|
|
|
34
65
|
&__wrapper {
|
|
35
66
|
display: flex;
|
|
36
67
|
flex-direction: column;
|
|
37
|
-
margin-top: 24px;
|
|
38
68
|
|
|
39
69
|
@media (--tablet-landscape-up) {
|
|
40
70
|
flex-direction: row;
|
|
41
|
-
margin-left: 32px;
|
|
42
|
-
margin-top: 0;
|
|
43
71
|
}
|
|
44
72
|
}
|
|
45
73
|
|
|
@@ -83,6 +111,7 @@ $b: '.total';
|
|
|
83
111
|
&__amount-list {
|
|
84
112
|
display: flex;
|
|
85
113
|
flex-direction: column;
|
|
114
|
+
gap: 16px;
|
|
86
115
|
justify-content: center;
|
|
87
116
|
|
|
88
117
|
&:not(:first-child) {
|
|
@@ -100,14 +129,17 @@ $b: '.total';
|
|
|
100
129
|
&__amount-item {
|
|
101
130
|
align-items: baseline;
|
|
102
131
|
display: flex;
|
|
132
|
+
gap: 4px;
|
|
103
133
|
justify-content: space-between;
|
|
104
134
|
|
|
105
|
-
&:not(:first-child) {
|
|
106
|
-
margin-top: 16px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
135
|
&_big {
|
|
110
136
|
align-items: flex-start;
|
|
137
|
+
|
|
138
|
+
#{$b}_s & {
|
|
139
|
+
@media (--tablet-landscape-up) {
|
|
140
|
+
flex-direction: column;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
111
143
|
}
|
|
112
144
|
}
|
|
113
145
|
|
|
@@ -127,10 +159,22 @@ $b: '.total';
|
|
|
127
159
|
> b {
|
|
128
160
|
color: $total-amount-value-b-color;
|
|
129
161
|
|
|
130
|
-
@include font($total-amount-value-b-
|
|
162
|
+
@include font($total-amount-value-b-font);
|
|
131
163
|
|
|
132
|
-
|
|
133
|
-
@include font($total-amount-value-b-
|
|
164
|
+
#{$b}__amount-item_big & {
|
|
165
|
+
@include font($total-amount-big-value-b-mobile-font);
|
|
166
|
+
|
|
167
|
+
@media (--tablet-landscape-up) {
|
|
168
|
+
@include font($total-amount-big-value-b-desktop-font);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
#{$b}_s #{$b}__amount-item_big & {
|
|
173
|
+
@include font($total-s-amount-big-value-b-mobile-font);
|
|
174
|
+
|
|
175
|
+
@media (--tablet-landscape-up) {
|
|
176
|
+
@include font($total-s-amount-big-value-b-desktop-font);
|
|
177
|
+
}
|
|
134
178
|
}
|
|
135
179
|
}
|
|
136
180
|
|
|
@@ -140,6 +184,12 @@ $b: '.total';
|
|
|
140
184
|
|
|
141
185
|
@include font($total-amount-value-s-font);
|
|
142
186
|
}
|
|
187
|
+
|
|
188
|
+
#{$b}_s #{$b}__amount-item_big & {
|
|
189
|
+
@media (--tablet-landscape-up) {
|
|
190
|
+
text-align: left;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
143
193
|
}
|
|
144
194
|
|
|
145
195
|
&__amount-tax {
|
|
@@ -158,4 +208,18 @@ $b: '.total';
|
|
|
158
208
|
width: 340px;
|
|
159
209
|
}
|
|
160
210
|
}
|
|
211
|
+
|
|
212
|
+
&__action-list {
|
|
213
|
+
align-items: center;
|
|
214
|
+
display: flex;
|
|
215
|
+
gap: 24px;
|
|
216
|
+
justify-content: space-between;
|
|
217
|
+
|
|
218
|
+
&:has(#{$b}__action-item:first-child:last-child) {
|
|
219
|
+
justify-content: center;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
&__action-item {
|
|
224
|
+
}
|
|
161
225
|
}
|
package/src/variables.scss
CHANGED
|
@@ -561,7 +561,7 @@ $input-active-outline-color: $input-active-border-color !default;
|
|
|
561
561
|
$input-active-color: $input-color !default;
|
|
562
562
|
|
|
563
563
|
$input-disabled-bg: color.change($color-primary-20, $alpha: 0.07) !default;
|
|
564
|
-
$input-disabled-border-color: $color-
|
|
564
|
+
$input-disabled-border-color: color.change($color-primary-20, $alpha: 0.14) !default;
|
|
565
565
|
$input-disabled-color: color.change($input-color, $alpha: 0.5) !default;
|
|
566
566
|
$input-disabled-placeholder-color: color.change($input-color, $alpha: 0.25) !default;
|
|
567
567
|
|
|
@@ -1022,17 +1022,18 @@ $action-list-link-separator-width: 1px !default;
|
|
|
1022
1022
|
|
|
1023
1023
|
/********** Ссылка-действие (.action-link) **********/
|
|
1024
1024
|
|
|
1025
|
-
$action-link-font: (
|
|
1026
|
-
|
|
1027
|
-
$action-link-action-list-font: ('font-weight': normal) !default;
|
|
1028
|
-
|
|
1029
|
-
$action-link-danger-font: ('font-weight': normal) !default;
|
|
1025
|
+
$action-link-font: () !default;
|
|
1026
|
+
$action-link-important-font: ('font-weight': bold) !default;
|
|
1030
1027
|
|
|
1031
1028
|
$action-link-danger-color: $link-grey-color !default;
|
|
1032
1029
|
$action-link-danger-active-color: $color-error !default;
|
|
1030
|
+
$action-link-important-danger-color: $color-error !default;
|
|
1031
|
+
$action-link-important-danger-active-color: $color-error !default;
|
|
1033
1032
|
|
|
1034
1033
|
$action-link-danger-icon-color: $color-grey-70 !default;
|
|
1035
1034
|
$action-link-danger-icon-active-color: $action-link-danger-active-color !default;
|
|
1035
|
+
$action-link-important-danger-icon-color: $action-link-important-danger-color !default;
|
|
1036
|
+
$action-link-important-danger-icon-active-color: $action-link-danger-active-color !default;
|
|
1036
1037
|
|
|
1037
1038
|
/********** Панель с предупреждением (.warning) **********/
|
|
1038
1039
|
|
|
@@ -1163,6 +1164,9 @@ $total-shadow: $shadow !default;
|
|
|
1163
1164
|
$total-title-mobile-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
|
|
1164
1165
|
$total-title-desktop-font: ('font-size': $font-size-xl) !default;
|
|
1165
1166
|
|
|
1167
|
+
$total-s-title-mobile-font: () !default;
|
|
1168
|
+
$total-s-title-desktop-font: ('font-size': $font-size-l) !default;
|
|
1169
|
+
|
|
1166
1170
|
$total-specs-label-color: $font-color-secondary !default;
|
|
1167
1171
|
$total-specs-label-font: ('font-size': $font-size-s, 'line-height': $line-height-s) !default;
|
|
1168
1172
|
|
|
@@ -1182,8 +1186,13 @@ $total-amount-value-s-color: $font-color-secondary !default;
|
|
|
1182
1186
|
$total-amount-value-s-font: ('font-size': $font-size-xs) !default;
|
|
1183
1187
|
|
|
1184
1188
|
$total-amount-value-b-color: $font-color-primary !default;
|
|
1185
|
-
$total-amount-value-b-
|
|
1186
|
-
|
|
1189
|
+
$total-amount-value-b-font: ('font-weight': bold, 'font-size': $font-size) !default;
|
|
1190
|
+
|
|
1191
|
+
$total-amount-big-value-b-mobile-font: ('font-weight': bold, 'font-size': $font-size-l) !default;
|
|
1192
|
+
$total-amount-big-value-b-desktop-font: ('font-size': $font-size-xl) !default;
|
|
1193
|
+
|
|
1194
|
+
$total-s-amount-big-value-b-mobile-font: ('font-weight': bold, 'font-size': $font-size-l) !default;
|
|
1195
|
+
$total-s-amount-big-value-b-desktop-font: () !default;
|
|
1187
1196
|
|
|
1188
1197
|
$total-amount-tax-color: $font-color-tertiary !default;
|
|
1189
1198
|
$total-amount-tax-font: ('font-size': $font-size-xs, 'line-height': $line-height-s) !default;
|