@formixru/b2b-ui 3.1.0 → 3.2.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 (7) hide show
  1. package/package.json +3 -4
  2. package/src/components/button/index.scss +6 -2
  3. package/src/components/sidebar/index.scss +0 -20
  4. package/src/components/slider-nav/index.scss +10 -10
  5. package/src/components/warning-message/index.scss +16 -60
  6. package/src/components/warning-message/index.vue +2 -1
  7. package/src/variables.scss +20 -24
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formixru/b2b-ui",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
@@ -26,6 +26,7 @@
26
26
  "@advdominion/eslint-config": "^1.1.2",
27
27
  "@advdominion/get-scrollbar-width": "^2.0.1",
28
28
  "@advdominion/pluralize": "^1.0.2",
29
+ "@advdominion/scroll-to": "^1.0.0",
29
30
  "@advdominion/tooltip": "^6.0.0",
30
31
  "@floating-ui/dom": "^1.7.4",
31
32
  "@popperjs/core": "^2.11.8",
@@ -70,6 +71,7 @@
70
71
  "peerDependencies": {
71
72
  "@advdominion/get-scrollbar-width": "^2.0.0",
72
73
  "@advdominion/pluralize": "^1.0.0",
74
+ "@advdominion/scroll-to": "^1.0.0",
73
75
  "@advdominion/tooltip": "^6.0.0",
74
76
  "color": "^5.0.0",
75
77
  "dayjs": "^1.0.0",
@@ -98,8 +100,5 @@
98
100
  "workerDirectory": [
99
101
  ".storybook/static"
100
102
  ]
101
- },
102
- "dependencies": {
103
- "@advdominion/scroll-to": "^1.0.0"
104
103
  }
105
104
  }
package/src/components/button/index.scss CHANGED
@@ -193,8 +193,8 @@ $b: '.button';
193
193
  }
194
194
 
195
195
  &_narrow {
196
- min-width: 4px * 18;
197
- padding: 0 4px * 4;
196
+ min-width: 72px;
197
+ padding: 0 16px;
198
198
  }
199
199
 
200
200
  &_small {
@@ -211,6 +211,10 @@ $b: '.button';
211
211
 
212
212
  &_only-icon {
213
213
  @include only-icon;
214
+
215
+ &#{$b}_small {
216
+ @include only-icon($button-small-height);
217
+ }
214
218
  }
215
219
 
216
220
  &__icon {
package/src/components/sidebar/index.scss CHANGED
@@ -55,7 +55,6 @@ $b: '.sidebar';
55
55
  display: flex;
56
56
  height: 4px * 14;
57
57
  justify-content: center;
58
- position: relative;
59
58
  transition-duration: var(--duration-micro-s);
60
59
  transition-property: background-color, color;
61
60
  transition-timing-function: var(--easing-standard);
@@ -81,25 +80,6 @@ $b: '.sidebar';
81
80
  }
82
81
  }
83
82
 
84
- &[data-notification] {
85
- &::before {
86
- align-items: center;
87
- background-color: $sidebar-notification-bg;
88
- border-radius: 50%;
89
- color: $sidebar-notification-color;
90
- content: attr(data-notification);
91
- display: flex;
92
- height: 4px * 4;
93
- justify-content: center;
94
- position: absolute;
95
- right: 4px * 3;
96
- top: 4px * 3;
97
- width: 4px * 4;
98
-
99
- @include font($sidebar-notification-font);
100
- }
101
- }
102
-
103
83
  &[data-sidebar-close] {
104
84
  background-color: $sidebar-close-bg;
105
85
  color: $sidebar-close-color;
package/src/components/slider-nav/index.scss CHANGED
@@ -10,21 +10,21 @@ $b: '.slider-nav';
10
10
  border-radius: $slider-nav-button-radius;
11
11
  cursor: pointer;
12
12
  display: flex;
13
- height: 4px * 8;
13
+ height: 32px;
14
14
  justify-content: center;
15
15
  opacity: 1;
16
16
  transition-duration: var(--duration-micro-s);
17
- transition-property: border-color, color, opacity;
17
+ transition-property: background-color, border-color, color, opacity;
18
18
  transition-timing-function: var(--easing-standard);
19
- width: 4px * 8;
19
+ width: 32px;
20
20
 
21
21
  @media (--tablet-portrait-down) {
22
22
  display: none;
23
23
  }
24
24
 
25
25
  @media (--tablet-landscape-up) {
26
- height: 4px * 12;
27
- width: 4px * 12;
26
+ height: 48px;
27
+ width: 48px;
28
28
  }
29
29
 
30
30
  &_disabled {
@@ -65,16 +65,16 @@ $b: '.slider-nav';
65
65
 
66
66
  &__icon {
67
67
  fill: currentcolor;
68
- height: 4px * 4;
69
- width: 4px * 4;
68
+ height: 16px;
69
+ width: 16px;
70
70
 
71
71
  @media (--tablet-landscape-up) {
72
- height: 4px * 6;
73
- width: 4px * 6;
72
+ height: 24px;
73
+ width: 24px;
74
74
  }
75
75
 
76
76
  #{$b}__button_prev & {
77
- transform: translateX(-2px);
77
+ transform: translateX(-1px);
78
78
  }
79
79
 
80
80
  #{$b}__button_next & {
package/src/components/warning-message/index.scss CHANGED
@@ -7,6 +7,7 @@ $b: '.warning-message';
7
7
  background-color: $warning-message-bg;
8
8
  border-radius: $warning-message-radius;
9
9
  box-shadow: $warning-message-shadow;
10
+ color: $warning-message-color;
10
11
  display: flex;
11
12
  padding: 16px 16px 24px;
12
13
 
@@ -26,34 +27,43 @@ $b: '.warning-message';
26
27
  }
27
28
 
28
29
  &_success {
30
+ color: $warning-message-success-color;
29
31
  }
30
32
 
31
33
  &_info {
34
+ color: $warning-message-info-color;
32
35
  }
33
36
 
34
37
  &_light-info {
38
+ color: $warning-message-light-info-color;
35
39
  }
36
40
 
37
41
  &_error {
42
+ color: $warning-message-error-color;
38
43
  }
39
44
 
40
45
  &_solid {
41
- background-color: $warning-message-color;
46
+ background-color: $warning-message-solid-bg;
47
+ color: $warning-message-solid-color;
42
48
 
43
49
  &#{$b}_success {
44
- background-color: $warning-message-success-color;
50
+ background-color: $warning-message-solid-success-bg;
51
+ color: $warning-message-solid-success-color;
45
52
  }
46
53
 
47
54
  &#{$b}_info {
48
- background-color: $warning-message-info-color;
55
+ background-color: $warning-message-solid-info-bg;
56
+ color: $warning-message-solid-info-color;
49
57
  }
50
58
 
51
59
  &#{$b}_light-info {
52
- background-color: $warning-message-light-info-color;
60
+ background-color: $warning-message-solid-light-info-bg;
61
+ color: $warning-message-solid-light-info-color;
53
62
  }
54
63
 
55
64
  &#{$b}_error {
56
- background-color: $warning-message-error-color;
65
+ background-color: $warning-message-solid-error-bg;
66
+ color: $warning-message-solid-error-color;
57
67
  }
58
68
  }
59
69
 
@@ -138,49 +148,11 @@ $b: '.warning-message';
138
148
  }
139
149
 
140
150
  &__title {
141
- color: $warning-message-color;
142
-
143
151
  @include font($warning-message-title-font);
144
152
 
145
153
  #{$b}_small & {
146
154
  @include font($warning-message-small-title-font);
147
155
  }
148
-
149
- #{$b}_solid & {
150
- color: $warning-message-solid-color;
151
- }
152
-
153
- #{$b}_success & {
154
- color: $warning-message-success-color;
155
- }
156
-
157
- #{$b}_solid#{$b}_success & {
158
- color: $warning-message-solid-success-color;
159
- }
160
-
161
- #{$b}_info & {
162
- color: $warning-message-info-color;
163
- }
164
-
165
- #{$b}_solid#{$b}_info & {
166
- color: $warning-message-solid-info-color;
167
- }
168
-
169
- #{$b}_light-info & {
170
- color: $warning-message-light-info-color;
171
- }
172
-
173
- #{$b}_solid#{$b}_light-info & {
174
- color: $warning-message-solid-light-info-color;
175
- }
176
-
177
- #{$b}_error & {
178
- color: $warning-message-error-color;
179
- }
180
-
181
- #{$b}_solid#{$b}_error & {
182
- color: $warning-message-solid-error-color;
183
- }
184
156
  }
185
157
 
186
158
  &__descr {
@@ -197,23 +169,7 @@ $b: '.warning-message';
197
169
  }
198
170
 
199
171
  #{$b}_solid & {
200
- color: $warning-message-solid-descr-color;
201
- }
202
-
203
- #{$b}_solid#{$b}_success & {
204
- color: $warning-message-solid-success-descr-color;
205
- }
206
-
207
- #{$b}_solid#{$b}_info & {
208
- color: $warning-message-solid-info-descr-color;
209
- }
210
-
211
- #{$b}_solid#{$b}_light-info & {
212
- color: $warning-message-solid-light-info-descr-color;
213
- }
214
-
215
- #{$b}_solid#{$b}_error & {
216
- color: $warning-message-solid-error-descr-color;
172
+ color: inherit;
217
173
  }
218
174
  }
219
175
 
package/src/components/warning-message/index.vue CHANGED
@@ -84,7 +84,8 @@ const icon = computed(() => {
84
84
  icon = 'check';
85
85
  break;
86
86
  }
87
- case 'info': {
87
+ case 'info':
88
+ case 'light-info': {
88
89
  icon = 'info';
89
90
  break;
90
91
  }
package/src/variables.scss CHANGED
@@ -939,10 +939,6 @@ $sidebar-active-button-label-color: $sidebar-active-button-color !default;
939
939
  $sidebar-close-bg: $sidebar-button-bg !default;
940
940
  $sidebar-close-color: $color-grey-20 !default;
941
941
 
942
- $sidebar-notification-bg: $color-error !default;
943
- $sidebar-notification-color: $color-white !default;
944
- $sidebar-notification-font: ('font-weight': bold, 'font-size': $font-size-3xs, 'line-height': 1) !default;
945
-
946
942
  $sidebar-header-separator-color: autocolor(('light': $color-grey-alpha-80, 'dark': $color-grey-alpha-i-90), $sidebar-bg) !default;
947
943
  $sidebar-header-separator-width: 1px !default;
948
944
  $sidebar-header-icon-border-color: $color-primary !default;
@@ -1029,15 +1025,20 @@ $warning-message-color: $color-warning !default;
1029
1025
 
1030
1026
  $warning-message-small-shadow: $shadow-s !default;
1031
1027
 
1032
- $warning-message-solid-color: $font-color-inverted !default;
1033
-
1034
1028
  $warning-message-success-color: $color-success !default;
1035
- $warning-message-solid-success-color: $warning-message-solid-color !default;
1036
1029
  $warning-message-info-color: $color-primary !default;
1030
+ $warning-message-light-info-color: $color-primary-70 !default;
1031
+ $warning-message-error-color: $color-error !default;
1032
+
1033
+ $warning-message-solid-bg: $warning-message-color !default;
1034
+ $warning-message-solid-color: $font-color-inverted !default;
1035
+ $warning-message-solid-success-bg: $warning-message-success-color !default;
1036
+ $warning-message-solid-success-color: $warning-message-solid-color !default;
1037
+ $warning-message-solid-info-bg: $warning-message-info-color !default;
1037
1038
  $warning-message-solid-info-color: $warning-message-solid-color !default;
1038
- $warning-message-light-info-color: $color-primary-80 !default;
1039
+ $warning-message-solid-light-info-bg: $color-primary-80 !default;
1039
1040
  $warning-message-solid-light-info-color: $font-color-secondary !default;
1040
- $warning-message-error-color: $color-error !default;
1041
+ $warning-message-solid-error-bg: $warning-message-error-color !default;
1041
1042
  $warning-message-solid-error-color: $warning-message-solid-color !default;
1042
1043
 
1043
1044
  $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
@@ -1047,22 +1048,17 @@ $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-heig
1047
1048
  $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
1048
1049
 
1049
1050
  $warning-message-descr-color: $font-color-secondary !default;
1050
- $warning-message-solid-descr-color: $warning-message-solid-color !default;
1051
- $warning-message-solid-success-descr-color: $warning-message-solid-success-color !default;
1052
- $warning-message-solid-info-descr-color: $warning-message-solid-info-color !default;
1053
- $warning-message-solid-light-info-descr-color: $warning-message-solid-light-info-color !default;
1054
- $warning-message-solid-error-descr-color: $warning-message-solid-error-color !default;
1055
-
1056
- $warning-message-icon-color: $warning-message-solid-color !default;
1057
- $warning-message-solid-icon-color: $warning-message-icon-color !default;
1058
- $warning-message-success-icon-color: $warning-message-solid-success-color !default;
1059
- $warning-message-solid-success-icon-color: $warning-message-success-icon-color !default;
1060
- $warning-message-info-icon-color: $warning-message-solid-info-color !default;
1061
- $warning-message-solid-info-icon-color: $warning-message-info-icon-color !default;
1062
- $warning-message-light-info-icon-color: $color-primary-70 !default;
1051
+
1052
+ $warning-message-icon-color: $warning-message-color !default;
1053
+ $warning-message-solid-icon-color: $warning-message-solid-color !default;
1054
+ $warning-message-success-icon-color: $warning-message-success-color !default;
1055
+ $warning-message-solid-success-icon-color: $warning-message-solid-success-color !default;
1056
+ $warning-message-info-icon-color: $warning-message-info-color !default;
1057
+ $warning-message-solid-info-icon-color: $warning-message-solid-info-color !default;
1058
+ $warning-message-light-info-icon-color: $warning-message-light-info-color !default;
1063
1059
  $warning-message-solid-light-info-icon-color: $color-primary !default;
1064
- $warning-message-error-icon-color: $warning-message-solid-error-color !default;
1065
- $warning-message-solid-error-icon-color: $warning-message-error-icon-color !default;
1060
+ $warning-message-error-icon-color: $warning-message-error-color !default;
1061
+ $warning-message-solid-error-icon-color: $warning-message-solid-error-color !default;
1066
1062
 
1067
1063
  /********** Панель пустого состояния (.empty-list) **********/
1068
1064