@cloud-ru/ds-uikit-product-header 2.1.8-preview-c09d42fe.0 → 2.1.8-preview-0dfd928f.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.
@@ -88,11 +88,23 @@
88
88
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
89
89
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
90
  }
91
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
91
+ .root[data-layout=item] .centeredWrapperAfter{
92
+ width:auto;
93
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
95
+ }
96
+ .root[data-layout=item] .elementBeforeContent{
92
97
  flex-direction:column;
93
98
  align-items:flex-start;
99
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
100
  height:24px;
95
101
  }
102
+ .root[data-layout=item] .elementAfterContent{
103
+ display:flex;
104
+ flex-direction:row;
105
+ align-items:center;
106
+ height:auto;
107
+ }
96
108
  .root[data-layout=item] .headline{
97
109
  gap:var(--sn-primitive-dimension-4, 4px);
98
110
  }
@@ -131,11 +131,23 @@
131
131
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
132
132
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
133
133
  }
134
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
134
+ .root[data-layout=item] .centeredWrapperAfter{
135
+ width:auto;
136
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
138
+ }
139
+ .root[data-layout=item] .elementBeforeContent{
135
140
  flex-direction:column;
136
141
  align-items:flex-start;
142
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
143
  height:24px;
138
144
  }
145
+ .root[data-layout=item] .elementAfterContent{
146
+ display:flex;
147
+ flex-direction:row;
148
+ align-items:center;
149
+ height:auto;
150
+ }
139
151
  .root[data-layout=item] .headline{
140
152
  gap:var(--sn-primitive-dimension-4, 4px);
141
153
  }
@@ -88,11 +88,23 @@
88
88
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
89
89
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
90
  }
91
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
91
+ .root[data-layout=item] .centeredWrapperAfter{
92
+ width:auto;
93
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
95
+ }
96
+ .root[data-layout=item] .elementBeforeContent{
92
97
  flex-direction:column;
93
98
  align-items:flex-start;
99
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
94
100
  height:24px;
95
101
  }
102
+ .root[data-layout=item] .elementAfterContent{
103
+ display:flex;
104
+ flex-direction:row;
105
+ align-items:center;
106
+ height:auto;
107
+ }
96
108
  .root[data-layout=item] .headline{
97
109
  gap:var(--sn-primitive-dimension-4, 4px);
98
110
  }
@@ -131,11 +131,23 @@
131
131
  width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
132
132
  height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
133
133
  }
134
- .root[data-layout=item] .elementBeforeContent, .root[data-layout=item] .elementAfterContent{
134
+ .root[data-layout=item] .centeredWrapperAfter{
135
+ width:auto;
136
+ min-width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
+ min-height:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-height, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
138
+ }
139
+ .root[data-layout=item] .elementBeforeContent{
135
140
  flex-direction:column;
136
141
  align-items:flex-start;
142
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
137
143
  height:24px;
138
144
  }
145
+ .root[data-layout=item] .elementAfterContent{
146
+ display:flex;
147
+ flex-direction:row;
148
+ align-items:center;
149
+ height:auto;
150
+ }
139
151
  .root[data-layout=item] .headline{
140
152
  gap:var(--sn-primitive-dimension-4, 4px);
141
153
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-uikit-product-header",
3
- "version": "2.1.8-preview-c09d42fe.0",
3
+ "version": "2.1.8-preview-0dfd928f.0",
4
4
  "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -48,18 +48,18 @@
48
48
  "@cloud-ru/ds-accordion": "1.2.4",
49
49
  "@cloud-ru/ds-adaptive": "1.0.2",
50
50
  "@cloud-ru/ds-avatar": "1.0.13",
51
+ "@cloud-ru/ds-breadcrumbs": "1.0.34-preview-0dfd928f.0",
51
52
  "@cloud-ru/ds-button": "1.0.4",
52
- "@cloud-ru/ds-breadcrumbs": "1.0.34-preview-c09d42fe.0",
53
- "@cloud-ru/ds-divider": "1.0.2",
54
- "@cloud-ru/ds-drag-and-drop": "1.1.3",
55
- "@cloud-ru/ds-icons": "1.6.0",
56
- "@cloud-ru/ds-list": "2.3.7-preview-c09d42fe.0",
57
53
  "@cloud-ru/ds-card": "1.0.25",
58
- "@cloud-ru/ds-locale": "1.0.0",
54
+ "@cloud-ru/ds-drag-and-drop": "1.1.3",
59
55
  "@cloud-ru/ds-drawer": "2.1.2",
56
+ "@cloud-ru/ds-divider": "1.0.2",
57
+ "@cloud-ru/ds-icons": "1.6.0",
60
58
  "@cloud-ru/ds-info-block": "1.0.3",
61
- "@cloud-ru/ds-modal": "2.0.3",
59
+ "@cloud-ru/ds-list": "2.3.7-preview-0dfd928f.0",
60
+ "@cloud-ru/ds-locale": "1.0.0",
62
61
  "@cloud-ru/ds-materials": "2.0.1",
62
+ "@cloud-ru/ds-modal": "2.0.3",
63
63
  "@cloud-ru/ds-portal-context": "1.0.2",
64
64
  "@cloud-ru/ds-promo-tag": "1.0.3",
65
65
  "@cloud-ru/ds-scroll": "1.0.5",
@@ -71,7 +71,7 @@
71
71
  "@cloud-ru/ds-tooltip": "1.0.13",
72
72
  "@cloud-ru/ds-truncate-string": "1.0.14",
73
73
  "@cloud-ru/ds-typography": "1.0.2",
74
- "@cloud-ru/ds-uikit-product-card-predefined": "4.0.14-preview-c09d42fe.0",
74
+ "@cloud-ru/ds-uikit-product-card-predefined": "4.0.14-preview-0dfd928f.0",
75
75
  "@cloud-ru/ds-uikit-product-switch-row": "1.0.16",
76
76
  "@cloud-ru/ds-uikit-product-title-clickable": "1.0.19",
77
77
  "@cloud-ru/ds-utils": "1.2.0"
@@ -98,17 +98,33 @@
98
98
  align-items: flex-start;
99
99
  padding: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-4;
100
100
 
101
+ // before — icon-сетка; after (badge + kebab) шире иконки — иначе слот
102
+ // width:icon-s и контент наезжает на truncate label.
101
103
  .centeredWrapper {
102
104
  width: base.$sn-density-icon-s;
103
105
  height: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-height;
104
106
  }
105
107
 
106
- .elementBeforeContent, .elementAfterContent {
108
+ .centeredWrapperAfter {
109
+ width: auto;
110
+ min-width: base.$sn-density-icon-s;
111
+ min-height: list.$sn-list-anatomy-size-s-listItem-centeredWrapper-height;
112
+ }
113
+
114
+ .elementBeforeContent {
107
115
  flex-direction: column;
108
116
  align-items: flex-start;
117
+ width: base.$sn-density-icon-s;
109
118
  height: 24px; // TODO: raw value?
110
119
  }
111
120
 
121
+ .elementAfterContent {
122
+ display: flex;
123
+ flex-direction: row;
124
+ align-items: center;
125
+ height: auto; // 24px
126
+ }
127
+
112
128
  .headline {
113
129
  gap: base.$sn-primitive-dimension-4;
114
130
  }