@formixru/b2b-ui 2.1.0 → 2.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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/components/tabs/index.scss +19 -17
  4. package/src/components/warning-message/index.scss +25 -29
  5. package/src/components/warning-message/index.vue +5 -2
  6. package/src/variables.scss +25 -12
package/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ ## v2.2.0
2
+
3
+ - Доработки по стилям `.tabs`/`.warning-message`
4
+
1
5
  ## v2.1.0
2
6
 
3
7
  - В Request добавлены `reloadOnHideSidebar`/`hideSidebar`, а так же параметр `hideLoaderOnSuccess`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@formixru/b2b-ui",
3
- "version": "2.1.0",
3
+ "version": "2.2.0",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",
package/src/components/tabs/index.scss CHANGED
@@ -13,19 +13,19 @@ $b: '.tabs';
13
13
  width: 100%;
14
14
 
15
15
  @media (--tablet-portrait-down) {
16
- margin-left: -4px * 4;
17
- margin-right: -4px * 4;
18
- padding-left: 4px * 4;
19
- padding-right: 4px * 4;
16
+ margin-left: -16px;
17
+ margin-right: -16px;
18
+ padding-left: 16px;
19
+ padding-right: 16px;
20
20
  width: calc(100% + 32px);
21
21
  }
22
22
 
23
23
  .account & {
24
24
  @media (--tablet-portrait-down) {
25
- margin-left: -4px * 6;
26
- margin-right: -4px * 6;
27
- padding-left: 4px * 6;
28
- padding-right: 4px * 6;
25
+ margin-left: -24px;
26
+ margin-right: -24px;
27
+ padding-left: 24px;
28
+ padding-right: 24px;
29
29
  }
30
30
  }
31
31
 
@@ -38,7 +38,7 @@ $b: '.tabs';
38
38
  left: 0;
39
39
  position: absolute;
40
40
  top: 0;
41
- width: 4px * 4;
41
+ width: 16px;
42
42
  z-index: 2;
43
43
  }
44
44
 
@@ -59,7 +59,7 @@ $b: '.tabs';
59
59
  position: absolute;
60
60
  right: 0;
61
61
  top: 0;
62
- width: 4px * 4;
62
+ width: 16px;
63
63
  z-index: 2;
64
64
  }
65
65
 
@@ -82,9 +82,9 @@ $b: '.tabs';
82
82
  border-bottom: $tabs-border-width solid $tabs-border-color;
83
83
  display: block;
84
84
  margin-bottom: $tabs-border-width * -1;
85
- padding: 0 4px * 4;
86
- padding-bottom: 4px * 3;
87
- padding-top: 4px * 3;
85
+ padding: 0 16px;
86
+ padding-bottom: 12px;
87
+ padding-top: 12px;
88
88
 
89
89
  &:first-of-type {
90
90
  padding-left: 0;
@@ -96,7 +96,7 @@ $b: '.tabs';
96
96
 
97
97
  div#{$b}__item + &:any-link,
98
98
  div#{$b}__item + &:enabled {
99
- padding-left: 4px * 4;
99
+ padding-left: 16px;
100
100
  }
101
101
 
102
102
  &.swiper-slide {
@@ -114,11 +114,13 @@ $b: '.tabs';
114
114
  background-color: $tabs-counter-bg;
115
115
  border-radius: $tabs-counter-radius;
116
116
  color: $tabs-counter-color;
117
- height: 4px * 5;
117
+ height: 20px;
118
118
  padding-bottom: 2px;
119
- padding-left: 4px * 2;
120
- padding-right: 4px * 2;
119
+ padding-left: 4px;
120
+ padding-right: 4px;
121
121
  padding-top: 3px;
122
+ position: relative;
123
+ top: -1px;
122
124
 
123
125
  @include font($tabs-counter-font);
124
126
  }
package/src/components/warning-message/index.scss CHANGED
@@ -8,25 +8,21 @@ $b: '.warning-message';
8
8
  border-radius: $warning-message-radius;
9
9
  box-shadow: $warning-message-shadow;
10
10
  display: flex;
11
- padding-bottom: 4px * 6;
12
- padding-left: 4px * 4;
13
- padding-right: 4px * 4;
14
- padding-top: 4px * 4;
11
+ padding: 16px 16px 24px;
15
12
 
16
13
  @include dark-border;
17
14
 
18
15
  @media (--tablet-landscape-up) {
19
- padding-bottom: 4px * 8;
20
- padding-left: 4px * 6;
21
- padding-right: 4px * 6;
22
- padding-top: 4px * 6;
16
+ padding: 24px 24px 32px;
23
17
  }
24
18
 
25
19
  &_small {
26
- padding-bottom: 4px * 6;
27
- padding-left: 4px * 4;
28
- padding-right: 4px * 4;
29
- padding-top: 4px * 4;
20
+ box-shadow: $warning-message-small-shadow;
21
+ padding: 16px 16px 24px;
22
+
23
+ &:has(#{$b}__content:last-child #{$b}__descr:first-child) {
24
+ padding-bottom: 16px;
25
+ }
30
26
  }
31
27
 
32
28
  &_success {
@@ -62,51 +58,51 @@ $b: '.warning-message';
62
58
  }
63
59
 
64
60
  &__icon {
65
- fill: $warning-message-color;
61
+ fill: $warning-message-icon-color;
66
62
  flex-shrink: 0;
67
- height: 4px * 6;
68
- margin-right: 4px * 2;
69
- width: 4px * 6;
63
+ height: 24px;
64
+ margin-right: 8px;
65
+ width: 24px;
70
66
 
71
67
  #{$b}_small & {
72
- height: 4px * 5;
73
- width: 4px * 5;
68
+ height: 20px;
69
+ width: 20px;
74
70
  }
75
71
 
76
72
  #{$b}_solid & {
77
- fill: $warning-message-solid-descr-color;
73
+ fill: $warning-message-solid-icon-color;
78
74
  }
79
75
 
80
76
  #{$b}_success & {
81
- fill: $warning-message-success-color;
77
+ fill: $warning-message-success-icon-color;
82
78
  }
83
79
 
84
80
  #{$b}_solid#{$b}_success & {
85
- fill: $warning-message-solid-success-color;
81
+ fill: $warning-message-solid-success-icon-color;
86
82
  }
87
83
 
88
84
  #{$b}_info & {
89
- fill: $warning-message-info-color;
85
+ fill: $warning-message-info-icon-color;
90
86
  }
91
87
 
92
88
  #{$b}_solid#{$b}_info & {
93
- fill: $warning-message-solid-info-color;
89
+ fill: $warning-message-solid-info-icon-color;
94
90
  }
95
91
 
96
92
  #{$b}_light-info & {
97
- fill: $warning-message-light-info-color;
93
+ fill: $warning-message-light-info-icon-color;
98
94
  }
99
95
 
100
96
  #{$b}_solid#{$b}_light-info & {
101
- fill: $warning-message-solid-light-info-color;
97
+ fill: $warning-message-solid-light-info-icon-color;
102
98
  }
103
99
 
104
100
  #{$b}_error & {
105
- fill: $warning-message-error-color;
101
+ fill: $warning-message-error-icon-color;
106
102
  }
107
103
 
108
104
  #{$b}_solid#{$b}_error & {
109
- fill: $warning-message-solid-error-color;
105
+ fill: $warning-message-solid-error-icon-color;
110
106
  }
111
107
  }
112
108
 
@@ -223,10 +219,10 @@ $b: '.warning-message';
223
219
 
224
220
  &__action {
225
221
  flex-shrink: 0;
226
- margin-top: 4px * 4;
222
+ margin-top: 16px;
227
223
 
228
224
  @media (--tablet-landscape-up) {
229
- margin-left: 4px * 6;
225
+ margin-left: 24px;
230
226
  margin-top: 0;
231
227
  }
232
228
  }
package/src/components/warning-message/index.vue CHANGED
@@ -9,7 +9,10 @@
9
9
  <a
10
10
  v-if="actionUrl.length > 0"
11
11
  class="warning-message__action button"
12
- :class="{ button_inverted: solid, button_alt: !solid }"
12
+ :class="{
13
+ button_inverted: solid && type !== 'light-info',
14
+ button_alt: !solid || type === 'light-info',
15
+ }"
13
16
  :href="actionUrl"
14
17
  >
15
18
  <svg v-if="actionIcon.length > 0" class="button__icon">
@@ -61,7 +64,7 @@ const props = defineProps({
61
64
  },
62
65
  });
63
66
 
64
- const { type, small, solid, title, descr } = toRefs(props);
67
+ const { type, small, solid, title, descr, actionUrl, actionIcon, noIcon } = toRefs(props);
65
68
 
66
69
  const classes = computed(() => {
67
70
  return {
package/src/variables.scss CHANGED
@@ -977,8 +977,8 @@ $tabs-line-color: $color-primary !default;
977
977
  $tabs-label-font: ('font-weight': bold, 'font-size': $font-size, 'line-height': 1) !default;
978
978
 
979
979
  $tabs-counter-bg: $color-grey-80 !default;
980
- $tabs-counter-color: $color-grey-100 !default;
981
- $tabs-counter-font: ('font-weight': normal, 'font-size': $font-size-s) !default;
980
+ $tabs-counter-color: $font-color-primary !default;
981
+ $tabs-counter-font: ('font-size': $font-size-xs) !default;
982
982
  $tabs-counter-radius: $radius-s !default;
983
983
 
984
984
  /********** Всплывающие подсказки / Tooltips **********/
@@ -1013,30 +1013,43 @@ $warning-message-radius: $radius !default;
1013
1013
  $warning-message-shadow: $shadow !default;
1014
1014
  $warning-message-color: $color-warning !default;
1015
1015
 
1016
- $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
1017
- $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
1018
- $warning-message-descr-color: $font-color-secondary !default;
1016
+ $warning-message-small-shadow: $shadow-s !default;
1019
1017
 
1020
- $warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
1021
- $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
1018
+ $warning-message-solid-color: $font-color-inverted !default;
1022
1019
 
1023
1020
  $warning-message-success-color: $color-success !default;
1024
- $warning-message-info-color: $color-primary !default;
1025
- $warning-message-light-info-color: $color-primary-80 !default;
1026
- $warning-message-error-color: $color-error !default;
1027
-
1028
- $warning-message-solid-color: $font-color-inverted !default;
1029
1021
  $warning-message-solid-success-color: $warning-message-solid-color !default;
1022
+ $warning-message-info-color: $color-primary !default;
1030
1023
  $warning-message-solid-info-color: $warning-message-solid-color !default;
1024
+ $warning-message-light-info-color: $color-primary-70 !default;
1031
1025
  $warning-message-solid-light-info-color: $font-color-secondary !default;
1026
+ $warning-message-error-color: $color-error !default;
1032
1027
  $warning-message-solid-error-color: $warning-message-solid-color !default;
1033
1028
 
1029
+ $warning-message-title-font: ('font-weight': bold, 'font-size': $font-size-l, 'line-height': $line-height-s) !default;
1030
+ $warning-message-small-title-font: ('font-weight': bold, 'font-size': $font-size-s, 'line-height': $line-height-s) !default;
1031
+
1032
+ $warning-message-descr-font: ('font-size': $font-size, 'line-height': $line-height) !default;
1033
+ $warning-message-small-descr-font: ('font-size': $font-size-xs, 'line-height': $line-height) !default;
1034
+
1035
+ $warning-message-descr-color: $font-color-secondary !default;
1034
1036
  $warning-message-solid-descr-color: $warning-message-solid-color !default;
1035
1037
  $warning-message-solid-success-descr-color: $warning-message-solid-success-color !default;
1036
1038
  $warning-message-solid-info-descr-color: $warning-message-solid-info-color !default;
1037
1039
  $warning-message-solid-light-info-descr-color: $warning-message-solid-light-info-color !default;
1038
1040
  $warning-message-solid-error-descr-color: $warning-message-solid-error-color !default;
1039
1041
 
1042
+ $warning-message-icon-color: $warning-message-solid-color !default;
1043
+ $warning-message-solid-icon-color: $warning-message-icon-color !default;
1044
+ $warning-message-success-icon-color: $warning-message-solid-success-color !default;
1045
+ $warning-message-solid-success-icon-color: $warning-message-success-icon-color !default;
1046
+ $warning-message-info-icon-color: $warning-message-solid-info-color !default;
1047
+ $warning-message-solid-info-icon-color: $warning-message-info-icon-color !default;
1048
+ $warning-message-light-info-icon-color: $color-primary-70 !default;
1049
+ $warning-message-solid-light-info-icon-color: $color-primary !default;
1050
+ $warning-message-error-icon-color: $warning-message-solid-error-color !default;
1051
+ $warning-message-solid-error-icon-color: $warning-message-error-icon-color !default;
1052
+
1040
1053
  /********** Панель пустого состояния (.empty-list) **********/
1041
1054
 
1042
1055
  $empty-list-bg: $bg-color-tertiary !default;