@kaizen/components 3.3.5 → 3.3.6
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/dist/cjs/src/TitleBlock/TitleBlock.cjs +20 -18
- package/dist/cjs/src/TitleBlock/TitleBlock.module.scss.cjs +54 -53
- package/dist/esm/src/TitleBlock/TitleBlock.mjs +20 -18
- package/dist/esm/src/TitleBlock/TitleBlock.module.scss.mjs +54 -53
- package/dist/styles.css +1 -1
- package/dist/types/TitleBlock/TitleBlock.d.ts +1 -1
- package/dist/types/TitleBlock/types.d.ts +11 -0
- package/package.json +1 -1
- package/src/TitleBlock/TitleBlock.module.scss +42 -0
- package/src/TitleBlock/TitleBlock.tsx +2 -0
- package/src/TitleBlock/_docs/TitleBlock--sticky-banner-guidelines.mdx +192 -0
- package/src/TitleBlock/_docs/TitleBlock.stories.tsx +240 -0
- package/src/TitleBlock/_docs/stickyBanner.module.css +44 -0
- package/src/TitleBlock/types.ts +11 -0
|
@@ -190,33 +190,35 @@ var TitleBlock = function (_a) {
|
|
|
190
190
|
navigationTabs = _a.navigationTabs,
|
|
191
191
|
_e = _a.collapseNavigationAreaWhenPossible,
|
|
192
192
|
collapseNavigationAreaWhenPossible = _e === void 0 ? false : _e,
|
|
193
|
+
_f = _a.sticky,
|
|
194
|
+
sticky = _f === void 0 ? false : _f,
|
|
193
195
|
textDirection = _a.textDirection,
|
|
194
196
|
surveyStatus = _a.surveyStatus,
|
|
195
197
|
id = _a.id,
|
|
196
|
-
|
|
197
|
-
titleAutomationId =
|
|
198
|
-
|
|
199
|
-
avatarAutomationId =
|
|
200
|
-
|
|
201
|
-
subtitleAutomationId =
|
|
202
|
-
|
|
203
|
-
sectionTitleAutomationId =
|
|
204
|
-
|
|
205
|
-
sectionTitleDescriptionAutomationId =
|
|
206
|
-
|
|
207
|
-
breadcrumbAutomationId =
|
|
208
|
-
|
|
209
|
-
breadcrumbTextAutomationId =
|
|
198
|
+
_g = _a.titleAutomationId,
|
|
199
|
+
titleAutomationId = _g === void 0 ? 'TitleBlock__Title' : _g,
|
|
200
|
+
_h = _a.avatarAutomationId,
|
|
201
|
+
avatarAutomationId = _h === void 0 ? 'TitleBlock__Avatar' : _h,
|
|
202
|
+
_j = _a.subtitleAutomationId,
|
|
203
|
+
subtitleAutomationId = _j === void 0 ? 'TitleBlock__Subtitle' : _j,
|
|
204
|
+
_k = _a.sectionTitleAutomationId,
|
|
205
|
+
sectionTitleAutomationId = _k === void 0 ? 'TitleBlock__SectionTitle' : _k,
|
|
206
|
+
_l = _a.sectionTitleDescriptionAutomationId,
|
|
207
|
+
sectionTitleDescriptionAutomationId = _l === void 0 ? 'TitleBlock__SectionTitleDescription' : _l,
|
|
208
|
+
_m = _a.breadcrumbAutomationId,
|
|
209
|
+
breadcrumbAutomationId = _m === void 0 ? 'TitleBlock__Breadcrumb' : _m,
|
|
210
|
+
_o = _a.breadcrumbTextAutomationId,
|
|
211
|
+
breadcrumbTextAutomationId = _o === void 0 ? 'TitleBlock__BreadcrumbText' : _o;
|
|
210
212
|
var hasNavigationTabs = navigationTabs && navigationTabs.length > 0;
|
|
211
213
|
var collapseNavigationArea = collapseNavigationAreaWhenPossible && !hasNavigationTabs && secondaryActions === undefined;
|
|
212
|
-
var
|
|
213
|
-
isSmall =
|
|
214
|
-
isMedium =
|
|
214
|
+
var _p = useMediaQueries.useMediaQueries().queries,
|
|
215
|
+
isSmall = _p.isSmall,
|
|
216
|
+
isMedium = _p.isMedium;
|
|
215
217
|
var isSmallOrMediumViewport = isMedium || isSmall;
|
|
216
218
|
var formatMessage = i18nReactIntl.useIntl().formatMessage;
|
|
217
219
|
return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", {
|
|
218
220
|
id: id,
|
|
219
|
-
className: classnames__default.default(TitleBlock_module.titleBlock, TitleBlock_module["".concat(variant, "Variant")], Boolean(subtitle) && TitleBlock_module.hasSubtitle, Boolean(pageSwitcherSelect) && TitleBlock_module.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && TitleBlock_module.collapseNavigationArea, title && title.length >= 30 && TitleBlock_module.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && TitleBlock_module.hasLongSubtitle, hasNavigationTabs && TitleBlock_module.hasNavigationTabs)
|
|
221
|
+
className: classnames__default.default(TitleBlock_module.titleBlock, TitleBlock_module["".concat(variant, "Variant")], Boolean(subtitle) && TitleBlock_module.hasSubtitle, Boolean(pageSwitcherSelect) && TitleBlock_module.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && TitleBlock_module.collapseNavigationArea, sticky && TitleBlock_module.sticky, title && title.length >= 30 && TitleBlock_module.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && TitleBlock_module.hasLongSubtitle, hasNavigationTabs && TitleBlock_module.hasNavigationTabs)
|
|
220
222
|
}, React__default.default.createElement("div", {
|
|
221
223
|
className: TitleBlock_module.titleRow
|
|
222
224
|
}, React__default.default.createElement("div", {
|
|
@@ -1,58 +1,59 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var modules_59bd9bfb = {
|
|
4
|
-
"titleBlock": "
|
|
5
|
-
"lightVariant": "
|
|
6
|
-
"educationVariant": "
|
|
7
|
-
"adminVariant": "
|
|
8
|
-
"titleRow": "
|
|
9
|
-
"rowBelowSeparator": "
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"
|
|
56
|
-
"
|
|
4
|
+
"titleBlock": "TitleBlock_module_titleBlock__bf81bfa7",
|
|
5
|
+
"lightVariant": "TitleBlock_module_lightVariant__bf81bfa7",
|
|
6
|
+
"educationVariant": "TitleBlock_module_educationVariant__bf81bfa7",
|
|
7
|
+
"adminVariant": "TitleBlock_module_adminVariant__bf81bfa7",
|
|
8
|
+
"titleRow": "TitleBlock_module_titleRow__bf81bfa7",
|
|
9
|
+
"rowBelowSeparator": "TitleBlock_module_rowBelowSeparator__bf81bfa7",
|
|
10
|
+
"sticky": "TitleBlock_module_sticky__bf81bfa7",
|
|
11
|
+
"rowBelowSeparatorInner": "TitleBlock_module_rowBelowSeparatorInner__bf81bfa7",
|
|
12
|
+
"titleRowInner": "TitleBlock_module_titleRowInner__bf81bfa7",
|
|
13
|
+
"titleRowInnerContent": "TitleBlock_module_titleRowInnerContent__bf81bfa7",
|
|
14
|
+
"collapseNavigationArea": "TitleBlock_module_collapseNavigationArea__bf81bfa7",
|
|
15
|
+
"title": "TitleBlock_module_title__bf81bfa7",
|
|
16
|
+
"titleAndSubtitle": "TitleBlock_module_titleAndSubtitle__bf81bfa7",
|
|
17
|
+
"hasSubtitle": "TitleBlock_module_hasSubtitle__bf81bfa7",
|
|
18
|
+
"titleAndSubtitleInner": "TitleBlock_module_titleAndSubtitleInner__bf81bfa7",
|
|
19
|
+
"hasLongTitle": "TitleBlock_module_hasLongTitle__bf81bfa7",
|
|
20
|
+
"hasLongSubtitle": "TitleBlock_module_hasLongSubtitle__bf81bfa7",
|
|
21
|
+
"hasPageSwitcherSelect": "TitleBlock_module_hasPageSwitcherSelect__bf81bfa7",
|
|
22
|
+
"titleTextOverride": "TitleBlock_module_titleTextOverride__bf81bfa7",
|
|
23
|
+
"avatar": "TitleBlock_module_avatar__bf81bfa7",
|
|
24
|
+
"withBorder": "TitleBlock_module_withBorder__bf81bfa7",
|
|
25
|
+
"hamburger": "TitleBlock_module_hamburger__bf81bfa7",
|
|
26
|
+
"subtitle": "TitleBlock_module_subtitle__bf81bfa7",
|
|
27
|
+
"subtitleText": "TitleBlock_module_subtitleText__bf81bfa7",
|
|
28
|
+
"sectionTitleContainer": "TitleBlock_module_sectionTitleContainer__bf81bfa7",
|
|
29
|
+
"sectionTitle": "TitleBlock_module_sectionTitle__bf81bfa7",
|
|
30
|
+
"sectionTitleInner": "TitleBlock_module_sectionTitleInner__bf81bfa7",
|
|
31
|
+
"sectionTitleOverride": "TitleBlock_module_sectionTitleOverride__bf81bfa7",
|
|
32
|
+
"sectionTitleDescription": "TitleBlock_module_sectionTitleDescription__bf81bfa7",
|
|
33
|
+
"dark": "TitleBlock_module_dark__bf81bfa7",
|
|
34
|
+
"rowBelowSeparatorInnerContent": "TitleBlock_module_rowBelowSeparatorInnerContent__bf81bfa7",
|
|
35
|
+
"titleAndAdjacent": "TitleBlock_module_titleAndAdjacent__bf81bfa7",
|
|
36
|
+
"titleAndAdjacentNotBreadcrumb": "TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7",
|
|
37
|
+
"breadcrumb": "TitleBlock_module_breadcrumb__bf81bfa7",
|
|
38
|
+
"breadcrumbTextLink": "TitleBlock_module_breadcrumbTextLink__bf81bfa7",
|
|
39
|
+
"tag": "TitleBlock_module_tag__bf81bfa7",
|
|
40
|
+
"pageSwitcherSelectNextToTitle": "TitleBlock_module_pageSwitcherSelectNextToTitle__bf81bfa7",
|
|
41
|
+
"pageSwitcherSelectUnderneathTitle": "TitleBlock_module_pageSwitcherSelectUnderneathTitle__bf81bfa7",
|
|
42
|
+
"navigationTabsContainer": "TitleBlock_module_navigationTabsContainer__bf81bfa7",
|
|
43
|
+
"navigationTabsContainerCollapsed": "TitleBlock_module_navigationTabsContainerCollapsed__bf81bfa7",
|
|
44
|
+
"hasNavigationTabs": "TitleBlock_module_hasNavigationTabs__bf81bfa7",
|
|
45
|
+
"navigationTabScrollerContainer": "TitleBlock_module_navigationTabScrollerContainer__bf81bfa7",
|
|
46
|
+
"navigationTabsNav": "TitleBlock_module_navigationTabsNav__bf81bfa7",
|
|
47
|
+
"navigationTabsList": "TitleBlock_module_navigationTabsList__bf81bfa7",
|
|
48
|
+
"navigationTabEdgeShadowRight": "TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7",
|
|
49
|
+
"navigationTabEdgeShadowLeft": "TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7",
|
|
50
|
+
"secondaryActionsContainer": "TitleBlock_module_secondaryActionsContainer__bf81bfa7",
|
|
51
|
+
"secondaryOverflowCombinedMenu": "TitleBlock_module_secondaryOverflowCombinedMenu__bf81bfa7",
|
|
52
|
+
"secondaryButtonContainer": "TitleBlock_module_secondaryButtonContainer__bf81bfa7",
|
|
53
|
+
"secondaryOverflowMenu": "TitleBlock_module_secondaryOverflowMenu__bf81bfa7",
|
|
54
|
+
"slide-fade": "TitleBlock_module_slideFade__bf81bfa7",
|
|
55
|
+
"reverse-slide-fade": "TitleBlock_module_reverseSlideFade__bf81bfa7",
|
|
56
|
+
"breadcrumbText": "TitleBlock_module_breadcrumbText__bf81bfa7",
|
|
57
|
+
"circle": "TitleBlock_module_circle__bf81bfa7"
|
|
57
58
|
};
|
|
58
59
|
module.exports = modules_59bd9bfb;
|
|
@@ -181,33 +181,35 @@ var TitleBlock = function (_a) {
|
|
|
181
181
|
navigationTabs = _a.navigationTabs,
|
|
182
182
|
_e = _a.collapseNavigationAreaWhenPossible,
|
|
183
183
|
collapseNavigationAreaWhenPossible = _e === void 0 ? false : _e,
|
|
184
|
+
_f = _a.sticky,
|
|
185
|
+
sticky = _f === void 0 ? false : _f,
|
|
184
186
|
textDirection = _a.textDirection,
|
|
185
187
|
surveyStatus = _a.surveyStatus,
|
|
186
188
|
id = _a.id,
|
|
187
|
-
|
|
188
|
-
titleAutomationId =
|
|
189
|
-
|
|
190
|
-
avatarAutomationId =
|
|
191
|
-
|
|
192
|
-
subtitleAutomationId =
|
|
193
|
-
|
|
194
|
-
sectionTitleAutomationId =
|
|
195
|
-
|
|
196
|
-
sectionTitleDescriptionAutomationId =
|
|
197
|
-
|
|
198
|
-
breadcrumbAutomationId =
|
|
199
|
-
|
|
200
|
-
breadcrumbTextAutomationId =
|
|
189
|
+
_g = _a.titleAutomationId,
|
|
190
|
+
titleAutomationId = _g === void 0 ? 'TitleBlock__Title' : _g,
|
|
191
|
+
_h = _a.avatarAutomationId,
|
|
192
|
+
avatarAutomationId = _h === void 0 ? 'TitleBlock__Avatar' : _h,
|
|
193
|
+
_j = _a.subtitleAutomationId,
|
|
194
|
+
subtitleAutomationId = _j === void 0 ? 'TitleBlock__Subtitle' : _j,
|
|
195
|
+
_k = _a.sectionTitleAutomationId,
|
|
196
|
+
sectionTitleAutomationId = _k === void 0 ? 'TitleBlock__SectionTitle' : _k,
|
|
197
|
+
_l = _a.sectionTitleDescriptionAutomationId,
|
|
198
|
+
sectionTitleDescriptionAutomationId = _l === void 0 ? 'TitleBlock__SectionTitleDescription' : _l,
|
|
199
|
+
_m = _a.breadcrumbAutomationId,
|
|
200
|
+
breadcrumbAutomationId = _m === void 0 ? 'TitleBlock__Breadcrumb' : _m,
|
|
201
|
+
_o = _a.breadcrumbTextAutomationId,
|
|
202
|
+
breadcrumbTextAutomationId = _o === void 0 ? 'TitleBlock__BreadcrumbText' : _o;
|
|
201
203
|
var hasNavigationTabs = navigationTabs && navigationTabs.length > 0;
|
|
202
204
|
var collapseNavigationArea = collapseNavigationAreaWhenPossible && !hasNavigationTabs && secondaryActions === undefined;
|
|
203
|
-
var
|
|
204
|
-
isSmall =
|
|
205
|
-
isMedium =
|
|
205
|
+
var _p = useMediaQueries().queries,
|
|
206
|
+
isSmall = _p.isSmall,
|
|
207
|
+
isMedium = _p.isMedium;
|
|
206
208
|
var isSmallOrMediumViewport = isMedium || isSmall;
|
|
207
209
|
var formatMessage = useIntl().formatMessage;
|
|
208
210
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
209
211
|
id: id,
|
|
210
|
-
className: classnames(modules_59bd9bfb.titleBlock, modules_59bd9bfb["".concat(variant, "Variant")], Boolean(subtitle) && modules_59bd9bfb.hasSubtitle, Boolean(pageSwitcherSelect) && modules_59bd9bfb.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && modules_59bd9bfb.collapseNavigationArea, title && title.length >= 30 && modules_59bd9bfb.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && modules_59bd9bfb.hasLongSubtitle, hasNavigationTabs && modules_59bd9bfb.hasNavigationTabs)
|
|
212
|
+
className: classnames(modules_59bd9bfb.titleBlock, modules_59bd9bfb["".concat(variant, "Variant")], Boolean(subtitle) && modules_59bd9bfb.hasSubtitle, Boolean(pageSwitcherSelect) && modules_59bd9bfb.hasPageSwitcherSelect, collapseNavigationArea && !((_b = sectionTitle !== null && sectionTitle !== void 0 ? sectionTitle : sectionTitleDescription) !== null && _b !== void 0 ? _b : renderSectionTitle) && modules_59bd9bfb.collapseNavigationArea, sticky && modules_59bd9bfb.sticky, title && title.length >= 30 && modules_59bd9bfb.hasLongTitle, subtitle && typeof subtitle === 'string' && subtitle.length >= 18 && modules_59bd9bfb.hasLongSubtitle, hasNavigationTabs && modules_59bd9bfb.hasNavigationTabs)
|
|
211
213
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
212
214
|
className: modules_59bd9bfb.titleRow
|
|
213
215
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -1,56 +1,57 @@
|
|
|
1
1
|
var modules_59bd9bfb = {
|
|
2
|
-
"titleBlock": "
|
|
3
|
-
"lightVariant": "
|
|
4
|
-
"educationVariant": "
|
|
5
|
-
"adminVariant": "
|
|
6
|
-
"titleRow": "
|
|
7
|
-
"rowBelowSeparator": "
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
"
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
2
|
+
"titleBlock": "TitleBlock_module_titleBlock__bf81bfa7",
|
|
3
|
+
"lightVariant": "TitleBlock_module_lightVariant__bf81bfa7",
|
|
4
|
+
"educationVariant": "TitleBlock_module_educationVariant__bf81bfa7",
|
|
5
|
+
"adminVariant": "TitleBlock_module_adminVariant__bf81bfa7",
|
|
6
|
+
"titleRow": "TitleBlock_module_titleRow__bf81bfa7",
|
|
7
|
+
"rowBelowSeparator": "TitleBlock_module_rowBelowSeparator__bf81bfa7",
|
|
8
|
+
"sticky": "TitleBlock_module_sticky__bf81bfa7",
|
|
9
|
+
"rowBelowSeparatorInner": "TitleBlock_module_rowBelowSeparatorInner__bf81bfa7",
|
|
10
|
+
"titleRowInner": "TitleBlock_module_titleRowInner__bf81bfa7",
|
|
11
|
+
"titleRowInnerContent": "TitleBlock_module_titleRowInnerContent__bf81bfa7",
|
|
12
|
+
"collapseNavigationArea": "TitleBlock_module_collapseNavigationArea__bf81bfa7",
|
|
13
|
+
"title": "TitleBlock_module_title__bf81bfa7",
|
|
14
|
+
"titleAndSubtitle": "TitleBlock_module_titleAndSubtitle__bf81bfa7",
|
|
15
|
+
"hasSubtitle": "TitleBlock_module_hasSubtitle__bf81bfa7",
|
|
16
|
+
"titleAndSubtitleInner": "TitleBlock_module_titleAndSubtitleInner__bf81bfa7",
|
|
17
|
+
"hasLongTitle": "TitleBlock_module_hasLongTitle__bf81bfa7",
|
|
18
|
+
"hasLongSubtitle": "TitleBlock_module_hasLongSubtitle__bf81bfa7",
|
|
19
|
+
"hasPageSwitcherSelect": "TitleBlock_module_hasPageSwitcherSelect__bf81bfa7",
|
|
20
|
+
"titleTextOverride": "TitleBlock_module_titleTextOverride__bf81bfa7",
|
|
21
|
+
"avatar": "TitleBlock_module_avatar__bf81bfa7",
|
|
22
|
+
"withBorder": "TitleBlock_module_withBorder__bf81bfa7",
|
|
23
|
+
"hamburger": "TitleBlock_module_hamburger__bf81bfa7",
|
|
24
|
+
"subtitle": "TitleBlock_module_subtitle__bf81bfa7",
|
|
25
|
+
"subtitleText": "TitleBlock_module_subtitleText__bf81bfa7",
|
|
26
|
+
"sectionTitleContainer": "TitleBlock_module_sectionTitleContainer__bf81bfa7",
|
|
27
|
+
"sectionTitle": "TitleBlock_module_sectionTitle__bf81bfa7",
|
|
28
|
+
"sectionTitleInner": "TitleBlock_module_sectionTitleInner__bf81bfa7",
|
|
29
|
+
"sectionTitleOverride": "TitleBlock_module_sectionTitleOverride__bf81bfa7",
|
|
30
|
+
"sectionTitleDescription": "TitleBlock_module_sectionTitleDescription__bf81bfa7",
|
|
31
|
+
"dark": "TitleBlock_module_dark__bf81bfa7",
|
|
32
|
+
"rowBelowSeparatorInnerContent": "TitleBlock_module_rowBelowSeparatorInnerContent__bf81bfa7",
|
|
33
|
+
"titleAndAdjacent": "TitleBlock_module_titleAndAdjacent__bf81bfa7",
|
|
34
|
+
"titleAndAdjacentNotBreadcrumb": "TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7",
|
|
35
|
+
"breadcrumb": "TitleBlock_module_breadcrumb__bf81bfa7",
|
|
36
|
+
"breadcrumbTextLink": "TitleBlock_module_breadcrumbTextLink__bf81bfa7",
|
|
37
|
+
"tag": "TitleBlock_module_tag__bf81bfa7",
|
|
38
|
+
"pageSwitcherSelectNextToTitle": "TitleBlock_module_pageSwitcherSelectNextToTitle__bf81bfa7",
|
|
39
|
+
"pageSwitcherSelectUnderneathTitle": "TitleBlock_module_pageSwitcherSelectUnderneathTitle__bf81bfa7",
|
|
40
|
+
"navigationTabsContainer": "TitleBlock_module_navigationTabsContainer__bf81bfa7",
|
|
41
|
+
"navigationTabsContainerCollapsed": "TitleBlock_module_navigationTabsContainerCollapsed__bf81bfa7",
|
|
42
|
+
"hasNavigationTabs": "TitleBlock_module_hasNavigationTabs__bf81bfa7",
|
|
43
|
+
"navigationTabScrollerContainer": "TitleBlock_module_navigationTabScrollerContainer__bf81bfa7",
|
|
44
|
+
"navigationTabsNav": "TitleBlock_module_navigationTabsNav__bf81bfa7",
|
|
45
|
+
"navigationTabsList": "TitleBlock_module_navigationTabsList__bf81bfa7",
|
|
46
|
+
"navigationTabEdgeShadowRight": "TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7",
|
|
47
|
+
"navigationTabEdgeShadowLeft": "TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7",
|
|
48
|
+
"secondaryActionsContainer": "TitleBlock_module_secondaryActionsContainer__bf81bfa7",
|
|
49
|
+
"secondaryOverflowCombinedMenu": "TitleBlock_module_secondaryOverflowCombinedMenu__bf81bfa7",
|
|
50
|
+
"secondaryButtonContainer": "TitleBlock_module_secondaryButtonContainer__bf81bfa7",
|
|
51
|
+
"secondaryOverflowMenu": "TitleBlock_module_secondaryOverflowMenu__bf81bfa7",
|
|
52
|
+
"slide-fade": "TitleBlock_module_slideFade__bf81bfa7",
|
|
53
|
+
"reverse-slide-fade": "TitleBlock_module_reverseSlideFade__bf81bfa7",
|
|
54
|
+
"breadcrumbText": "TitleBlock_module_breadcrumbText__bf81bfa7",
|
|
55
|
+
"circle": "TitleBlock_module_circle__bf81bfa7"
|
|
55
56
|
};
|
|
56
57
|
export { modules_59bd9bfb as default };
|
package/dist/styles.css
CHANGED
|
@@ -159,7 +159,7 @@
|
|
|
159
159
|
@layer kz-components{.TitleBlockMenuItem_module_menuListItem__53835be1{display:flex}.TitleBlockMenuItem_module_menuItem__53835be1{display:flex;align-items:center;flex:1 1 auto;box-sizing:border-box;background:none;border:2px solid transparent;text-align:start;padding:6px calc(var(--spacing-sm, .75rem) - 2px);margin:0 var(--spacing-xs,.375rem);min-height:calc(var(--spacing-md, 1.5rem)*1.75);border-radius:4px;font-family:var(--typography-paragraph-body-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-body-font-weight,400);font-size:var(--typography-paragraph-body-font-size,1rem);line-height:var(--typography-paragraph-body-line-height,1.5rem);letter-spacing:var(--typography-paragraph-body-letter-spacing,normal);text-decoration:none;color:var(--color-purple-800,#2f2438)}.TitleBlockMenuItem_module_menuItem__53835be1:hover{text-decoration:none}.TitleBlockMenuItem_module_menuItem__53835be1:focus,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover{background:var(--color-blue-100,#e6f6ff);color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem__53835be1:focus .TitleBlockMenuItem_module_menuItem__Icon__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem__53835be1:focus.TitleBlockMenuItem_module_menuItem_Destructive__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover.TitleBlockMenuItem_module_menuItem_Destructive__53835be1{background:var(--color-red-100,#fdeaee);color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem__53835be1:focus.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1,.TitleBlockMenuItem_module_menuItem__53835be1:not(.TitleBlockMenuItem_module_menuItem_Disabled__53835be1):hover.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem__53835be1:focus{outline:none}.TitleBlockMenuItem_module_menuItem__53835be1:focus-visible{border-color:var(--color-blue-500,#0168b3)}.TitleBlockMenuItem_module_menuItem_Disabled__53835be1,.TitleBlockMenuItem_module_menuItem_Disabled__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:rgba(var(--color-purple-800-rgb,47,36,56),.3)}.TitleBlockMenuItem_module_menuItem_Active__53835be1{color:var(--color-blue-500,#0168b3);font-weight:var(--typography-paragraph-bold-font-weight,600)}.TitleBlockMenuItem_module_menuItem_Destructive__53835be1,.TitleBlockMenuItem_module_menuItem_Destructive__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:var(--color-red-600,#a82433)}.TitleBlockMenuItem_module_menuItem_Destructive__53835be1.TitleBlockMenuItem_module_menuItem_Disabled__53835be1,.TitleBlockMenuItem_module_menuItem_Destructive__53835be1.TitleBlockMenuItem_module_menuItem_Disabled__53835be1 .TitleBlockMenuItem_module_menuItem__Icon__53835be1{color:rgba(var(--color-red-600-rgb,168,36,51),.3)}.TitleBlockMenuItem_module_menuItem__Label__53835be1{flex-grow:1}.TitleBlockMenuItem_module_menuItem__Icon__53835be1{margin-inline-end:calc(var(--spacing-md, 1.5rem)/3);display:flex;align-self:flex-start;transform:translateY(.2em);color:rgba(var(--color-purple-800-rgb,47,36,56),.75)}}
|
|
160
160
|
@layer kz-components{.Toolbar_module_toolbar__f237a56f{display:flex;align-items:center;gap:inherit}}
|
|
161
161
|
@layer kz-components{.MainActions_module_mainActionsContainer__057dc38a{display:flex;align-self:flex-start;flex-shrink:0;gap:4px}@container (max-width: 576px){.MainActions_module_mainActionsContainer__057dc38a{justify-content:flex-start;margin-inline-start:48px}}.MainActions_module_mainActionsContainer__057dc38a .MainActions_module_defaultActionButtonMinimized__057dc38a{display:none}@media (max-width:360px){.MainActions_module_mainActionsContainer__057dc38a{gap:0}.MainActions_module_mainActionsContainer__057dc38a .MainActions_module_defaultActionButton__057dc38a{display:none}.MainActions_module_mainActionsContainer__057dc38a .MainActions_module_defaultActionButtonMinimized__057dc38a{display:flex;margin-inline-end:8px}}}
|
|
162
|
-
@layer kz-components{.TitleBlock_module_titleBlock__4c011478{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-purple-600,#5f3361);width:100%;display:flex;justify-content:center;flex-direction:column}.TitleBlock_module_titleBlock__4c011478.TitleBlock_module_lightVariant__4c011478{background-color:var(--color-white,#fff)}.TitleBlock_module_titleBlock__4c011478.TitleBlock_module_educationVariant__4c011478{background-color:var(--color-blue-100,#e6f6ff)}.TitleBlock_module_titleBlock__4c011478.TitleBlock_module_adminVariant__4c011478{background-color:var(--color-gray-100,#f9f9f9)}@media print{.TitleBlock_module_titleBlock__4c011478{display:none}}.TitleBlock_module_titleRow__4c011478{box-sizing:border-box}.TitleBlock_module_rowBelowSeparator__4c011478,.TitleBlock_module_titleRow__4c011478{display:flex;width:100%;justify-content:center}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_titleRow__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_titleRow__4c011478{background-color:var(--color-white,#fff)}.TitleBlock_module_rowBelowSeparatorInner__4c011478,.TitleBlock_module_titleRowInner__4c011478{box-sizing:border-box;max-width:1392px;display:flex;flex-direction:column;width:100%;min-width:0;padding:0 20px 0 0}@media (min-width:1080px){.TitleBlock_module_rowBelowSeparatorInner__4c011478,.TitleBlock_module_titleRowInner__4c011478{padding:0;margin-inline:24px}}.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_titleRowInner__4c011478{box-shadow:inset 0 -.0625rem 0 0 var(--color-gray-300,#eaeaec)}.TitleBlock_module_rowBelowSeparatorInner__4c011478{padding:0 4px 0 12px}@media (min-width:1080px){.TitleBlock_module_rowBelowSeparatorInner__4c011478{padding:0;margin-inline:24px}}.TitleBlock_module_titleRowInnerContent__4c011478{box-sizing:border-box;min-height:88px;position:relative;display:flex;width:100%;align-items:center;gap:12px;padding-block:20px;justify-content:space-between;box-shadow:inset 0 -.0625rem 0 0 rgba(var(--color-white-rgb,255,255,255),.1)}.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_titleRowInnerContent__4c011478{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--color-purple-700-rgb,74,35,77),.2)}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_titleRowInnerContent__4c011478,.TitleBlock_module_collapseNavigationArea__4c011478 .TitleBlock_module_titleRowInnerContent__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_titleRowInnerContent__4c011478{box-shadow:none}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_titleRowInnerContent__4c011478,.TitleBlock_module_titleRowInnerContent__4c011478{box-shadow:none}}@container (max-width: 576px){.TitleBlock_module_titleRowInnerContent__4c011478{flex-wrap:wrap;gap:4px}}.TitleBlock_module_title__4c011478{align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical}@container (max-width: 1365px){.TitleBlock_module_title__4c011478{width:100%}}.TitleBlock_module_titleAndSubtitle__4c011478{display:flex;align-items:center;min-width:0;transform:translateY(-.0833em)}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleAndSubtitle__4c011478{transform:translateY(-12px)}}.TitleBlock_module_titleAndSubtitleInner__4c011478{display:flex;min-width:0}.TitleBlock_module_hasSubtitle__4c011478.TitleBlock_module_hasLongTitle__4c011478.TitleBlock_module_hasLongSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:center}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__4c011478.TitleBlock_module_hasLongTitle__4c011478.TitleBlock_module_hasLongSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:baseline}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_hasPageSwitcherSelect__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:baseline;overflow:hidden}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}.TitleBlock_module_hasLongTitle__4c011478.TitleBlock_module_hasLongSubtitle__4c011478 .TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{align-items:baseline}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleAndSubtitleInner__4c011478{transform:translateY(.75rem)}}.TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:8px 0}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{margin-bottom:0}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{margin-bottom:0}}}@container (min-width: 1080px){.TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{margin-bottom:0}}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_hasLongTitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_hasLongTitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{margin-bottom:0}}}@container (min-width: 1080px) and (max-width: 1365px){.TitleBlock_module_hasLongTitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__4c011478 .TitleBlock_module_hasLongTitle__4c011478 .TitleBlock_module_titleTextOverride__4c011478.TitleBlock_module_titleTextOverride__4c011478{margin-bottom:0}}.TitleBlock_module_avatar__4c011478{display:none;align-self:self-start;box-sizing:border-box;height:3rem;width:3rem;margin-inline-end:.75rem;margin-inline-start:0}.TitleBlock_module_avatar__4c011478>*{max-width:100%}.TitleBlock_module_avatar__4c011478.TitleBlock_module_withBorder__4c011478{overflow:hidden;border:3px solid var(--color-white,#fff);border-radius:50%}.TitleBlock_module_hasLongTitle__4c011478 .TitleBlock_module_avatar__4c011478{display:none}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_avatar__4c011478{display:block}}}@container (min-width: 1080px){.TitleBlock_module_avatar__4c011478{display:block}}.TitleBlock_module_hamburger__4c011478{display:flex;align-self:self-start}@media (min-width:1080px){.TitleBlock_module_hamburger__4c011478{display:none}}.TitleBlock_module_subtitle__4c011478{display:flex;align-items:center;color:var(--color-white,#fff);font-family:var(--typography-paragraph-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-small-font-weight,400);font-size:var(--typography-paragraph-small-font-size,.875rem);line-height:var(--typography-paragraph-small-line-height,1.125rem);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);max-width:230px;margin-inline:var(--spacing-12) 0}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_subtitle__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_subtitle__4c011478{color:var(--color-purple-800,#2f2438)}@container (max-width: 1365px){.TitleBlock_module_subtitle__4c011478{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:none;margin:.3rem 0}.TitleBlock_module_subtitleText__4c011478{max-width:42vw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@container (max-width: calc(768px - 1px)){.TitleBlock_module_subtitleText__4c011478{max-width:88vw}}.TitleBlock_module_sectionTitleContainer__4c011478{display:flex;align-items:center;padding-block:9px;padding-inline-end:8px}@container (min-width: 1080px){.TitleBlock_module_sectionTitleContainer__4c011478{padding-block:17px}}.TitleBlock_module_sectionTitle__4c011478{display:block}.TitleBlock_module_sectionTitleInner__4c011478{display:flex;flex-direction:column;row-gap:4px}@container (min-width: 1080px){.TitleBlock_module_sectionTitleInner__4c011478{flex-direction:row;align-items:center;column-gap:12px}}.TitleBlock_module_sectionTitleOverride__4c011478.TitleBlock_module_sectionTitleOverride__4c011478{white-space:nowrap;font-family:var(--typography-heading-2-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-2-font-weight,600);font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal)}@container (max-width: 1644px){.TitleBlock_module_sectionTitleOverride__4c011478.TitleBlock_module_sectionTitleOverride__4c011478{font-family:var(--typography-heading-3-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-3-font-weight,600);font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal)}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_sectionTitleOverride__4c011478.TitleBlock_module_sectionTitleOverride__4c011478{font-family:var(--typography-heading-4-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-4-font-weight,600);font-size:var(--typography-heading-4-font-size,1.125rem);line-height:var(--typography-heading-4-line-height,1.5rem);letter-spacing:var(--typography-heading-4-letter-spacing,normal)}}.TitleBlock_module_sectionTitleDescription__4c011478{color:var(--color-white,#fff);max-width:780px;font-family:var(--typography-paragraph-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-small-font-weight,400);font-size:var(--typography-paragraph-small-font-size,.875rem);line-height:var(--typography-paragraph-small-line-height,1.125rem);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal)}.TitleBlock_module_sectionTitleDescription__4c011478.TitleBlock_module_dark__4c011478{color:rgba(var(--color-purple-800-rgb,47,36,56),.7)}.TitleBlock_module_rowBelowSeparatorInnerContent__4c011478{display:flex;width:100%;justify-content:space-between}.TitleBlock_module_titleAndAdjacent__4c011478{display:flex;min-width:0}.TitleBlock_module_titleAndAdjacentNotBreadcrumb__4c011478{display:flex;transition:opacity .3s ease;min-width:0;align-items:center}.TitleBlock_module_breadcrumbTextLink__4c011478:focus~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__4c011478,.TitleBlock_module_breadcrumbTextLink__4c011478:hover~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__4c011478,.TitleBlock_module_breadcrumb__4c011478:focus~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__4c011478,.TitleBlock_module_breadcrumb__4c011478:hover~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__4c011478{opacity:0}.TitleBlock_module_tag__4c011478{display:none;align-items:center;margin-inline:var(--spacing-12) 0}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_tag__4c011478{display:flex}}}@container (min-width: 1080px){.TitleBlock_module_tag__4c011478{display:flex}}.TitleBlock_module_tag__4c011478+.TitleBlock_module_pageSwitcherSelectNextToTitle__4c011478{margin-inline-start:0}.TitleBlock_module_pageSwitcherSelectNextToTitle__4c011478{flex-shrink:0;width:var(--spacing-240);margin-inline:var(--spacing-12) 0}.TitleBlock_module_pageSwitcherSelectUnderneathTitle__4c011478{flex-shrink:0;max-width:var(--spacing-240)}.TitleBlock_module_navigationTabsContainer__4c011478{height:4.5rem}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabsContainer__4c011478{height:3.75rem}}.TitleBlock_module_navigationTabsContainerCollapsed__4c011478{height:0}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_navigationTabsContainerCollapsed__4c011478{height:0}}@container (max-width: calc(768px - 1px)){.TitleBlock_module_hasNavigationTabs__4c011478 .TitleBlock_module_navigationTabScrollerContainer__4c011478{height:3.75rem;display:block;overflow-x:scroll;scrollbar-width:none;width:100vw}.TitleBlock_module_hasNavigationTabs__4c011478 .TitleBlock_module_navigationTabScrollerContainer__4c011478::-webkit-scrollbar{display:none}}.TitleBlock_module_navigationTabsNav__4c011478{height:100%}.TitleBlock_module_navigationTabsList__4c011478{list-style:none;padding:0;margin:0;display:flex;height:100%}.TitleBlock_module_navigationTabEdgeShadowLeft__4c011478,.TitleBlock_module_navigationTabEdgeShadowRight__4c011478{display:none;pointer-events:none}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowLeft__4c011478,.TitleBlock_module_navigationTabEdgeShadowRight__4c011478{display:block;position:absolute;top:3.75rem;width:3.75rem;height:3.75rem;background:linear-gradient(0deg,var(--color-purple-600,#5f3361),rgba(var(--color-purple-600-rgb,95,51,97),0));z-index:1}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowLeft__4c011478,.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowRight__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowLeft__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowRight__4c011478{background:linear-gradient(0deg,var(--color-gray-100,#f9f9f9),rgba(var(--color-gray-100-rgb,249,249,249),0))}.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowLeft__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_navigationTabEdgeShadowRight__4c011478{background:linear-gradient(0deg,var(--color-blue-200,#bde2f5),rgba(var(--color-blue-200-rgb,189,226,245),0))}}.TitleBlock_module_navigationTabEdgeShadowLeft__4c011478{transform:rotate(90deg);left:0;top:calc(100% - 4.5rem)}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowLeft__4c011478{top:calc(100% - 3.75rem)}}.TitleBlock_module_navigationTabEdgeShadowRight__4c011478{transform:rotate(-90deg);right:0;top:calc(100% - 4.5rem)}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowRight__4c011478{top:calc(100% - 3.75rem)}}.TitleBlock_module_secondaryActionsContainer__4c011478{display:flex}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_secondaryActionsContainer__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_secondaryActionsContainer__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_secondaryActionsContainer__4c011478{color:var(--color-blue-500,#0168b3)}.TitleBlock_module_secondaryActionsContainer__4c011478 .TitleBlock_module_secondaryOverflowCombinedMenu__4c011478{display:none}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_secondaryActionsContainer__4c011478 .TitleBlock_module_secondaryButtonContainer__4c011478,.TitleBlock_module_secondaryActionsContainer__4c011478 .TitleBlock_module_secondaryOverflowMenu__4c011478{display:none}.TitleBlock_module_secondaryActionsContainer__4c011478 .TitleBlock_module_secondaryOverflowCombinedMenu__4c011478{display:flex}}.TitleBlock_module_breadcrumb__4c011478{appearance:none;display:inline;background:transparent;color:inherit;font:inherit;margin:0;padding:0;border:none;cursor:pointer;position:absolute;align-items:center;top:50%;transform:translateY(-50%);text-decoration:none;inset-inline-end:auto;inset-inline-start:calc(-48px - 1.5rem);align-self:self-start;display:none}.TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_breadcrumbTextLink__4c011478{text-decoration:underline}.TitleBlock_module_breadcrumb__4c011478:focus{outline:none}.TitleBlock_module_breadcrumb__4c011478:focus:after{content:"";position:absolute;background:transparent;border-color:var(--color-blue-200,#bde2f5);border-radius:50%;border-width:var(--border-focus-ring-border-width,2px);border-style:var(--border-focus-ring-border-style,solid);inset:calc(var(--border-focus-ring-border-width, 2px)*-2 - var(--border-focus-ring-border-width, 2px))}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_breadcrumb__4c011478{display:flex;position:relative;transform:translateY(0);margin-inline:0 var(--spacing-12);inset-inline-end:auto;inset-inline-start:0}}}@container (min-width: 1080px){.TitleBlock_module_breadcrumb__4c011478{display:flex;position:relative;transform:translateY(0);margin-inline:0 var(--spacing-12);inset-inline-end:auto;inset-inline-start:0}}.TitleBlock_module_breadcrumbTextLink__4c011478{clip-path:rect(0 0 0 0);height:1px;overflow:hidden;white-space:nowrap;width:1px;inset-inline-end:auto;inset-inline-start:-3rem;position:absolute}@container (max-width: 1644px){.TitleBlock_module_breadcrumbTextLink__4c011478{inset-inline-end:auto;inset-inline-start:1.5rem}}@media only screen{@container (min-width: 1644px){.TitleBlock_module_breadcrumbTextLink__4c011478{inset-inline-end:auto;inset-inline-start:calc(48px - 1.5rem)}}}.TitleBlock_module_breadcrumbTextLink__4c011478:focus,.TitleBlock_module_breadcrumbTextLink__4c011478:hover,.TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_breadcrumbTextLink__4c011478,.TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_breadcrumbTextLink__4c011478{clip-path:none;height:auto;overflow:initial;position:static;white-space:normal;width:auto;position:absolute;display:block;animation:TitleBlock_module_slideFade__4c011478 .4s}[dir=rtl] .TitleBlock_module_breadcrumbTextLink__4c011478:focus,[dir=rtl] .TitleBlock_module_breadcrumbTextLink__4c011478:hover,[dir=rtl] .TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_breadcrumbTextLink__4c011478,[dir=rtl] .TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_breadcrumbTextLink__4c011478{animation:TitleBlock_module_reverseSlideFade__4c011478 .4s}.TitleBlock_module_breadcrumbText__4c011478{margin-inline-start:var(--spacing-xl,3rem);white-space:nowrap;font-family:var(--typography-heading-5-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-5-font-weight,600);font-size:var(--typography-heading-5-font-size,1rem);line-height:var(--typography-heading-5-line-height,1.5rem);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.TitleBlock_module_breadcrumbText__4c011478,.TitleBlock_module_breadcrumb__4c011478,.TitleBlock_module_breadcrumb__4c011478:hover{color:var(--color-white,#fff)}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_breadcrumbText__4c011478,.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478,.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_breadcrumbText__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_breadcrumbText__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover{color:var(--color-purple-800,#2f2438)}.TitleBlock_module_circle__4c011478{flex:0 0 48px;box-sizing:border-box;width:48px;height:48px;color:var(--color-white,#fff);border-color:rgba(var(--color-white-rgb,255,255,255),.5);border-width:2px;border-radius:50%;border-style:solid;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,transform .3s ease}.TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_circle__4c011478,.TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_circle__4c011478{transform:scale(1.1);border-color:var(--color-white,#fff);color:var(--color-white,#fff);background-color:rgba(var(--color-white-rgb,255,255,255),.1)}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_circle__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_circle__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_circle__4c011478{color:var(--color-blue-500,#0168b3);border-color:var(--color-blue-300,#73c0e8);border-width:3px}.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_circle__4c011478,.TitleBlock_module_adminVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_circle__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_circle__4c011478,.TitleBlock_module_educationVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_circle__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:focus .TitleBlock_module_circle__4c011478,.TitleBlock_module_lightVariant__4c011478 .TitleBlock_module_breadcrumb__4c011478:hover .TitleBlock_module_circle__4c011478{border-color:var(--color-blue-500,#0168b3);color:var(--color-blue-500,#0168b3);background-color:rgba(var(--color-blue-500-rgb,1,104,179),.1)}}@keyframes TitleBlock_module_slideFade__4c011478{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(-30px)}to{opacity:100%;transform:translateX(0)}}@keyframes TitleBlock_module_reverseSlideFade__4c011478{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(30px)}to{opacity:100%;transform:translateX(0)}}
|
|
162
|
+
@layer kz-components{.TitleBlock_module_titleBlock__bf81bfa7{position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-purple-600,#5f3361);width:100%;display:flex;justify-content:center;flex-direction:column}.TitleBlock_module_titleBlock__bf81bfa7.TitleBlock_module_lightVariant__bf81bfa7{background-color:var(--color-white,#fff)}.TitleBlock_module_titleBlock__bf81bfa7.TitleBlock_module_educationVariant__bf81bfa7{background-color:var(--color-blue-100,#e6f6ff)}.TitleBlock_module_titleBlock__bf81bfa7.TitleBlock_module_adminVariant__bf81bfa7{background-color:var(--color-gray-100,#f9f9f9)}@media print{.TitleBlock_module_titleBlock__bf81bfa7{display:none}}.TitleBlock_module_titleRow__bf81bfa7{box-sizing:border-box;display:flex;width:100%;justify-content:center}.TitleBlock_module_rowBelowSeparator__bf81bfa7{display:flex;width:100%;justify-content:center;position:relative}.TitleBlock_module_sticky__bf81bfa7{display:contents}.TitleBlock_module_sticky__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7{z-index:5;position:sticky;top:calc(var(--app-chrome-sticky-offset, 72px) + var(--titleblock-sticky-offset, 0px))}@media (width < 1080px){.TitleBlock_module_sticky__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7{top:var(--titleblock-sticky-offset,0)}}.TitleBlock_module_sticky__bf81bfa7 .TitleBlock_module_rowBelowSeparator__bf81bfa7{z-index:0}.TitleBlock_module_sticky__bf81bfa7 .TitleBlock_module_rowBelowSeparator__bf81bfa7,.TitleBlock_module_sticky__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7{background-color:var(--color-purple-600,#5f3361)}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7,.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7,.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_rowBelowSeparator__bf81bfa7,.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7{background-color:var(--color-white,#fff)}.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_rowBelowSeparator__bf81bfa7{background-color:var(--color-gray-100,#f9f9f9)}.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_rowBelowSeparator__bf81bfa7,.TitleBlock_module_sticky__bf81bfa7.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_titleRow__bf81bfa7{background-color:var(--color-blue-100,#e6f6ff)}.TitleBlock_module_rowBelowSeparatorInner__bf81bfa7,.TitleBlock_module_titleRowInner__bf81bfa7{box-sizing:border-box;max-width:1392px;display:flex;flex-direction:column;width:100%;min-width:0;padding:0 20px 0 0}@media (min-width:1080px){.TitleBlock_module_rowBelowSeparatorInner__bf81bfa7,.TitleBlock_module_titleRowInner__bf81bfa7{padding:0;margin-inline:24px}}.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_titleRowInner__bf81bfa7{box-shadow:inset 0 -.0625rem 0 0 var(--color-gray-300,#eaeaec)}.TitleBlock_module_rowBelowSeparatorInner__bf81bfa7{padding:0 4px 0 12px}@media (min-width:1080px){.TitleBlock_module_rowBelowSeparatorInner__bf81bfa7{padding:0;margin-inline:24px}}.TitleBlock_module_titleRowInnerContent__bf81bfa7{box-sizing:border-box;min-height:88px;position:relative;display:flex;width:100%;align-items:center;gap:12px;padding-block:20px;justify-content:space-between;box-shadow:inset 0 -.0625rem 0 0 rgba(var(--color-white-rgb,255,255,255),.1)}.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_titleRowInnerContent__bf81bfa7{box-shadow:inset 0 -.0625rem 0 0 rgba(var(--color-purple-700-rgb,74,35,77),.2)}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_titleRowInnerContent__bf81bfa7,.TitleBlock_module_collapseNavigationArea__bf81bfa7 .TitleBlock_module_titleRowInnerContent__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_titleRowInnerContent__bf81bfa7{box-shadow:none}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_titleRowInnerContent__bf81bfa7,.TitleBlock_module_titleRowInnerContent__bf81bfa7{box-shadow:none}}@container (max-width: 576px){.TitleBlock_module_titleRowInnerContent__bf81bfa7{flex-wrap:wrap;gap:4px}}.TitleBlock_module_title__bf81bfa7{align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical}@container (max-width: 1365px){.TitleBlock_module_title__bf81bfa7{width:100%}}.TitleBlock_module_titleAndSubtitle__bf81bfa7{display:flex;align-items:center;min-width:0;transform:translateY(-.0833em)}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitle__bf81bfa7{transform:translateY(-12px)}}.TitleBlock_module_titleAndSubtitleInner__bf81bfa7{display:flex;min-width:0}.TitleBlock_module_hasSubtitle__bf81bfa7.TitleBlock_module_hasLongTitle__bf81bfa7.TitleBlock_module_hasLongSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:center}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__bf81bfa7.TitleBlock_module_hasLongTitle__bf81bfa7.TitleBlock_module_hasLongSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:baseline}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_hasPageSwitcherSelect__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:baseline;overflow:hidden}@container (max-width: 1365px){.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:normal;flex-direction:column;justify-content:space-between;transform:translateY(.5rem)}.TitleBlock_module_hasLongTitle__bf81bfa7.TitleBlock_module_hasLongSubtitle__bf81bfa7 .TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{align-items:baseline}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleAndSubtitleInner__bf81bfa7{transform:translateY(.75rem)}}.TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:8px 0}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{margin-bottom:0}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{margin-bottom:0}}}@container (min-width: 1080px){.TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{margin-bottom:0}}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_hasLongTitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_hasLongTitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{margin-bottom:0}}}@container (min-width: 1080px) and (max-width: 1365px){.TitleBlock_module_hasLongTitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal);margin:2px 0}.TitleBlock_module_hasSubtitle__bf81bfa7 .TitleBlock_module_hasLongTitle__bf81bfa7 .TitleBlock_module_titleTextOverride__bf81bfa7.TitleBlock_module_titleTextOverride__bf81bfa7{margin-bottom:0}}.TitleBlock_module_avatar__bf81bfa7{display:none;align-self:self-start;box-sizing:border-box;height:3rem;width:3rem;margin-inline-end:.75rem;margin-inline-start:0}.TitleBlock_module_avatar__bf81bfa7>*{max-width:100%}.TitleBlock_module_avatar__bf81bfa7.TitleBlock_module_withBorder__bf81bfa7{overflow:hidden;border:3px solid var(--color-white,#fff);border-radius:50%}.TitleBlock_module_hasLongTitle__bf81bfa7 .TitleBlock_module_avatar__bf81bfa7{display:none}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_avatar__bf81bfa7{display:block}}}@container (min-width: 1080px){.TitleBlock_module_avatar__bf81bfa7{display:block}}.TitleBlock_module_hamburger__bf81bfa7{display:flex;align-self:self-start}@media (min-width:1080px){.TitleBlock_module_hamburger__bf81bfa7{display:none}}.TitleBlock_module_subtitle__bf81bfa7{display:flex;align-items:center;color:var(--color-white,#fff);font-family:var(--typography-paragraph-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-small-font-weight,400);font-size:var(--typography-paragraph-small-font-size,.875rem);line-height:var(--typography-paragraph-small-line-height,1.125rem);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal);max-width:230px;margin-inline:var(--spacing-12) 0}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_subtitle__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_subtitle__bf81bfa7{color:var(--color-purple-800,#2f2438)}@container (max-width: 1365px){.TitleBlock_module_subtitle__bf81bfa7{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:none;margin:.3rem 0}.TitleBlock_module_subtitleText__bf81bfa7{max-width:42vw;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}@container (max-width: calc(768px - 1px)){.TitleBlock_module_subtitleText__bf81bfa7{max-width:88vw}}.TitleBlock_module_sectionTitleContainer__bf81bfa7{display:flex;align-items:center;padding-block:9px;padding-inline-end:8px}@container (min-width: 1080px){.TitleBlock_module_sectionTitleContainer__bf81bfa7{padding-block:17px}}.TitleBlock_module_sectionTitle__bf81bfa7{display:block}.TitleBlock_module_sectionTitleInner__bf81bfa7{display:flex;flex-direction:column;row-gap:4px}@container (min-width: 1080px){.TitleBlock_module_sectionTitleInner__bf81bfa7{flex-direction:row;align-items:center;column-gap:12px}}.TitleBlock_module_sectionTitleOverride__bf81bfa7.TitleBlock_module_sectionTitleOverride__bf81bfa7{white-space:nowrap;font-family:var(--typography-heading-2-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-2-font-weight,600);font-size:var(--typography-heading-2-font-size,1.75rem);line-height:var(--typography-heading-2-line-height,2.25rem);letter-spacing:var(--typography-heading-2-letter-spacing,normal)}@container (max-width: 1644px){.TitleBlock_module_sectionTitleOverride__bf81bfa7.TitleBlock_module_sectionTitleOverride__bf81bfa7{font-family:var(--typography-heading-3-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-3-font-weight,600);font-size:var(--typography-heading-3-font-size,1.375rem);line-height:var(--typography-heading-3-line-height,1.875rem);letter-spacing:var(--typography-heading-3-letter-spacing,normal)}}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_sectionTitleOverride__bf81bfa7.TitleBlock_module_sectionTitleOverride__bf81bfa7{font-family:var(--typography-heading-4-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-4-font-weight,600);font-size:var(--typography-heading-4-font-size,1.125rem);line-height:var(--typography-heading-4-line-height,1.5rem);letter-spacing:var(--typography-heading-4-letter-spacing,normal)}}.TitleBlock_module_sectionTitleDescription__bf81bfa7{color:var(--color-white,#fff);max-width:780px;font-family:var(--typography-paragraph-small-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-paragraph-small-font-weight,400);font-size:var(--typography-paragraph-small-font-size,.875rem);line-height:var(--typography-paragraph-small-line-height,1.125rem);letter-spacing:var(--typography-paragraph-small-letter-spacing,normal)}.TitleBlock_module_sectionTitleDescription__bf81bfa7.TitleBlock_module_dark__bf81bfa7{color:rgba(var(--color-purple-800-rgb,47,36,56),.7)}.TitleBlock_module_rowBelowSeparatorInnerContent__bf81bfa7{display:flex;width:100%;justify-content:space-between}.TitleBlock_module_titleAndAdjacent__bf81bfa7{display:flex;min-width:0}.TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7{display:flex;transition:opacity .3s ease;min-width:0;align-items:center}.TitleBlock_module_breadcrumbTextLink__bf81bfa7:focus~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7,.TitleBlock_module_breadcrumbTextLink__bf81bfa7:hover~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7:focus~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7:hover~.TitleBlock_module_titleAndAdjacentNotBreadcrumb__bf81bfa7{opacity:0}.TitleBlock_module_tag__bf81bfa7{display:none;align-items:center;margin-inline:var(--spacing-12) 0}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_tag__bf81bfa7{display:flex}}}@container (min-width: 1080px){.TitleBlock_module_tag__bf81bfa7{display:flex}}.TitleBlock_module_tag__bf81bfa7+.TitleBlock_module_pageSwitcherSelectNextToTitle__bf81bfa7{margin-inline-start:0}.TitleBlock_module_pageSwitcherSelectNextToTitle__bf81bfa7{flex-shrink:0;width:var(--spacing-240);margin-inline:var(--spacing-12) 0}.TitleBlock_module_pageSwitcherSelectUnderneathTitle__bf81bfa7{flex-shrink:0;max-width:var(--spacing-240)}.TitleBlock_module_navigationTabsContainer__bf81bfa7{height:4.5rem}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabsContainer__bf81bfa7{height:3.75rem}}.TitleBlock_module_navigationTabsContainerCollapsed__bf81bfa7{height:0}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_navigationTabsContainerCollapsed__bf81bfa7{height:0}}@container (max-width: calc(768px - 1px)){.TitleBlock_module_hasNavigationTabs__bf81bfa7 .TitleBlock_module_navigationTabScrollerContainer__bf81bfa7{height:3.75rem;display:block;overflow-x:scroll;scrollbar-width:none;width:100vw}.TitleBlock_module_hasNavigationTabs__bf81bfa7 .TitleBlock_module_navigationTabScrollerContainer__bf81bfa7::-webkit-scrollbar{display:none}}.TitleBlock_module_navigationTabsNav__bf81bfa7{height:100%}.TitleBlock_module_navigationTabsList__bf81bfa7{list-style:none;padding:0;margin:0;display:flex;height:100%}.TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7,.TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{display:none;pointer-events:none}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7,.TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{display:block;position:absolute;top:3.75rem;width:3.75rem;height:3.75rem;background:linear-gradient(0deg,var(--color-purple-600,#5f3361),rgba(var(--color-purple-600-rgb,95,51,97),0));z-index:1}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7,.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{background:linear-gradient(0deg,var(--color-gray-100,#f9f9f9),rgba(var(--color-gray-100-rgb,249,249,249),0))}.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{background:linear-gradient(0deg,var(--color-blue-200,#bde2f5),rgba(var(--color-blue-200-rgb,189,226,245),0))}}.TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7{transform:rotate(90deg);left:0;top:calc(100% - 4.5rem)}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowLeft__bf81bfa7{top:calc(100% - 3.75rem)}}.TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{transform:rotate(-90deg);right:0;top:calc(100% - 4.5rem)}@container (max-width: calc(768px - 1px)){.TitleBlock_module_navigationTabEdgeShadowRight__bf81bfa7{top:calc(100% - 3.75rem)}}.TitleBlock_module_secondaryActionsContainer__bf81bfa7{display:flex}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_secondaryActionsContainer__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_secondaryActionsContainer__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_secondaryActionsContainer__bf81bfa7{color:var(--color-blue-500,#0168b3)}.TitleBlock_module_secondaryActionsContainer__bf81bfa7 .TitleBlock_module_secondaryOverflowCombinedMenu__bf81bfa7{display:none}@container (max-width: calc(1080px - 1px)){.TitleBlock_module_secondaryActionsContainer__bf81bfa7 .TitleBlock_module_secondaryButtonContainer__bf81bfa7,.TitleBlock_module_secondaryActionsContainer__bf81bfa7 .TitleBlock_module_secondaryOverflowMenu__bf81bfa7{display:none}.TitleBlock_module_secondaryActionsContainer__bf81bfa7 .TitleBlock_module_secondaryOverflowCombinedMenu__bf81bfa7{display:flex}}.TitleBlock_module_breadcrumb__bf81bfa7{appearance:none;display:inline;background:transparent;color:inherit;font:inherit;margin:0;padding:0;border:none;cursor:pointer;position:absolute;align-items:center;top:50%;transform:translateY(-50%);text-decoration:none;inset-inline-end:auto;inset-inline-start:calc(-48px - 1.5rem);align-self:self-start;display:none}.TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_breadcrumbTextLink__bf81bfa7{text-decoration:underline}.TitleBlock_module_breadcrumb__bf81bfa7:focus{outline:none}.TitleBlock_module_breadcrumb__bf81bfa7:focus:after{content:"";position:absolute;background:transparent;border-color:var(--color-blue-200,#bde2f5);border-radius:50%;border-width:var(--border-focus-ring-border-width,2px);border-style:var(--border-focus-ring-border-style,solid);inset:calc(var(--border-focus-ring-border-width, 2px)*-2 - var(--border-focus-ring-border-width, 2px))}@media (min-width:1080px) and (max-width:1095px){@container (min-width: 1065px){.TitleBlock_module_breadcrumb__bf81bfa7{display:flex;position:relative;transform:translateY(0);margin-inline:0 var(--spacing-12);inset-inline-end:auto;inset-inline-start:0}}}@container (min-width: 1080px){.TitleBlock_module_breadcrumb__bf81bfa7{display:flex;position:relative;transform:translateY(0);margin-inline:0 var(--spacing-12);inset-inline-end:auto;inset-inline-start:0}}.TitleBlock_module_breadcrumbTextLink__bf81bfa7{clip-path:rect(0 0 0 0);height:1px;overflow:hidden;white-space:nowrap;width:1px;inset-inline-end:auto;inset-inline-start:-3rem;position:absolute}@container (max-width: 1644px){.TitleBlock_module_breadcrumbTextLink__bf81bfa7{inset-inline-end:auto;inset-inline-start:1.5rem}}@media only screen{@container (min-width: 1644px){.TitleBlock_module_breadcrumbTextLink__bf81bfa7{inset-inline-end:auto;inset-inline-start:calc(48px - 1.5rem)}}}.TitleBlock_module_breadcrumbTextLink__bf81bfa7:focus,.TitleBlock_module_breadcrumbTextLink__bf81bfa7:hover,.TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_breadcrumbTextLink__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_breadcrumbTextLink__bf81bfa7{clip-path:none;height:auto;overflow:initial;position:static;white-space:normal;width:auto;position:absolute;display:block;animation:TitleBlock_module_slideFade__bf81bfa7 .4s}[dir=rtl] .TitleBlock_module_breadcrumbTextLink__bf81bfa7:focus,[dir=rtl] .TitleBlock_module_breadcrumbTextLink__bf81bfa7:hover,[dir=rtl] .TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_breadcrumbTextLink__bf81bfa7,[dir=rtl] .TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_breadcrumbTextLink__bf81bfa7{animation:TitleBlock_module_reverseSlideFade__bf81bfa7 .4s}.TitleBlock_module_breadcrumbText__bf81bfa7{margin-inline-start:var(--spacing-xl,3rem);white-space:nowrap;font-family:var(--typography-heading-5-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-5-font-weight,600);font-size:var(--typography-heading-5-font-size,1rem);line-height:var(--typography-heading-5-line-height,1.5rem);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}.TitleBlock_module_breadcrumbText__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7:hover{color:var(--color-white,#fff)}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_breadcrumbText__bf81bfa7,.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7,.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_breadcrumbText__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_breadcrumbText__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover{color:var(--color-purple-800,#2f2438)}.TitleBlock_module_circle__bf81bfa7{flex:0 0 48px;box-sizing:border-box;width:48px;height:48px;color:var(--color-white,#fff);border-color:rgba(var(--color-white-rgb,255,255,255),.5);border-width:2px;border-radius:50%;border-style:solid;display:flex;align-items:center;justify-content:center;transition:background-color .3s ease,transform .3s ease}.TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_circle__bf81bfa7{transform:scale(1.1);border-color:var(--color-white,#fff);color:var(--color-white,#fff);background-color:rgba(var(--color-white-rgb,255,255,255),.1)}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_circle__bf81bfa7{color:var(--color-blue-500,#0168b3);border-color:var(--color-blue-300,#73c0e8);border-width:3px}.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_adminVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_educationVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:focus .TitleBlock_module_circle__bf81bfa7,.TitleBlock_module_lightVariant__bf81bfa7 .TitleBlock_module_breadcrumb__bf81bfa7:hover .TitleBlock_module_circle__bf81bfa7{border-color:var(--color-blue-500,#0168b3);color:var(--color-blue-500,#0168b3);background-color:rgba(var(--color-blue-500-rgb,1,104,179),.1)}}@keyframes TitleBlock_module_slideFade__bf81bfa7{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(-30px)}to{opacity:100%;transform:translateX(0)}}@keyframes TitleBlock_module_reverseSlideFade__bf81bfa7{0%{display:none;opacity:0}1%{display:block;opacity:0;transform:translateX(30px)}to{opacity:100%;transform:translateX(0)}}
|
|
163
163
|
@layer kz-components{.NavigationTabs_module_container__4922a6ad{display:flex;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.NavigationTabs_module_linkAnchor__4922a6ad{display:flex;height:100%;align-items:center;padding:0 var(--spacing-sm,.75rem);position:relative;color:rgba(var(--color-white-rgb,255,255,255),.7);font-family:var(--typography-heading-4-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-4-font-weight,600);font-size:var(--typography-heading-4-font-size,1.125rem);line-height:var(--typography-heading-4-line-height,1.5rem);letter-spacing:var(--typography-heading-4-letter-spacing,normal);text-decoration:none;white-space:nowrap;margin-inline-end:var(--spacing-md,1.5rem)}.NavigationTabs_module_linkAnchor__4922a6ad:hover{color:var(--color-white,#fff);text-decoration:none}@container (max-width: 1365px){.NavigationTabs_module_linkAnchor__4922a6ad{font-family:var(--typography-heading-5-font-family,"Inter","Noto Sans",Helvetica,Arial,sans-serif);font-weight:var(--typography-heading-5-font-weight,600);font-size:var(--typography-heading-5-font-size,1rem);line-height:var(--typography-heading-5-line-height,1.5rem);letter-spacing:var(--typography-heading-5-letter-spacing,normal)}}@container (max-width: 1439px){.NavigationTabs_module_linkAnchor__4922a6ad{margin-inline-end:var(--spacing-xs,.375rem)}}@media (max-width:1189px){.NavigationTabs_module_linkAnchor__4922a6ad{margin:0}}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_active__4922a6ad,.NavigationTabs_module_linkAnchor__4922a6ad:focus{color:var(--color-white,#fff)}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_active__4922a6ad:before,.NavigationTabs_module_linkAnchor__4922a6ad:focus:before{content:"";display:block;height:5px;position:absolute;top:0;left:0;right:0;background-color:var(--color-white,#fff);transition:transform .15s cubic-bezier(.55,.085,.68,.53);border-radius:0 0 var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px)}@container (max-width: calc(1080px - 1px)){.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_active__4922a6ad:before,.NavigationTabs_module_linkAnchor__4922a6ad:focus:before{top:auto;bottom:0;border-radius:var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px) 0 0}}.NavigationTabs_module_linkAnchor__4922a6ad:focus{outline:none}.NavigationTabs_module_linkAnchor__4922a6ad:focus:before{background-color:var(--color-blue-200,#bde2f5)}.NavigationTabs_module_linkAnchor__4922a6ad:focus:after{content:"";position:absolute;background:transparent;border-color:var(--color-blue-200,#bde2f5);border-radius:0 0 var(--border-focus-ring-border-radius,10px) var(--border-focus-ring-border-radius,10px);border-width:var(--border-focus-ring-border-width,2px);border-style:var(--border-focus-ring-border-style,solid);inset:0 calc(var(--border-focus-ring-border-width, 2px)*-1) 5px}@container (max-width: calc(1080px - 1px)){.NavigationTabs_module_linkAnchor__4922a6ad:focus:after{border-radius:var(--border-focus-ring-border-radius,10px) var(--border-focus-ring-border-radius,10px) 0 0;inset:5px calc(var(--border-focus-ring-border-width, 2px)*-1) 0 calc(var(--border-focus-ring-border-width, 2px)*-1)}}@media (forced-colors:active){.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_active__4922a6ad:before,.NavigationTabs_module_linkAnchor__4922a6ad:focus:before{background:transparent;border:5px solid transparent;height:0}}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_lightBackground__4922a6ad{color:rgba(var(--color-purple-800-rgb,47,36,56),.75)}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_lightBackground__4922a6ad:hover{color:var(--color-blue-500,#0168b3)}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_lightBackground__4922a6ad.NavigationTabs_module_active__4922a6ad{color:var(--color-blue-500,#0168b3)}.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_lightBackground__4922a6ad.NavigationTabs_module_active__4922a6ad:before{background-color:var(--color-blue-500,#0168b3)}@container (max-width: calc(1080px - 1px)){.NavigationTabs_module_linkAnchor__4922a6ad.NavigationTabs_module_lightBackground__4922a6ad.NavigationTabs_module_active__4922a6ad:before{top:auto;bottom:0;border-radius:var(--border-solid-border-radius,7px) var(--border-solid-border-radius,7px) 0 0}}}
|
|
164
164
|
@layer kz-components{:root{--animation-timing:var(--animation-duration-immediate) var(--animation-easing-function-linear);--focus-ring-offset:1px}.ToggleSwitch_module_checkbox__798b80e2{opacity:0;position:absolute;.ideal-sans &{position:absolute}}.ToggleSwitch_module_track__798b80e2{position:relative;background-color:var(--color-gray-500);border:var(--border-borderless-border-width) var(--border-borderless-border-style) var(--border-borderless-border-color);border-radius:var(--spacing-md);box-sizing:content-box;width:calc((var(--spacing-md)*1.05)*2);height:calc(var(--spacing-md)*1.25);padding:0 calc(var(--spacing-md)*.15);display:flex;align-items:center;transition:background-color var(--animation-timing);.ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2):focus+&,.ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2):hover:focus+&{border-color:transparent;outline:2px solid var(--color-blue-500);outline-offset:var(--focus-ring-offset);background-color:var(--color-gray-600)}.ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+&:hover,label:hover .ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+&{background-color:var(--color-gray-600)}}.ToggleSwitch_module_thumb__798b80e2{display:flex;align-items:center;justify-content:center;background-color:var(--color-white);border:var(--border-borderless-border-width) var(--border-borderless-border-style) var(--border-borderless-border-color);border-radius:var(--spacing-md);transition:left var(--animation-timing),right var(--animation-timing);cursor:default}.ToggleSwitch_module_checkIcon__798b80e2{color:var(--color-green-500);opacity:0;transition-duration:var(--animation-duration-rapid)}.ToggleSwitch_module_on__798b80e2{.ToggleSwitch_module_checkbox__798b80e2+.ToggleSwitch_module_track__798b80e2{border-color:var(--border-borderless-border-color);background-color:var(--color-green-500)}.ToggleSwitch_module_checkbox__798b80e2:focus+.ToggleSwitch_module_track__798b80e2{border-color:transparent;background-color:var(--color-green-600)}.ToggleSwitch_module_thumb__798b80e2{position:relative;right:auto;inset-inline-start:calc(var(--spacing-md)*1.1)}.ToggleSwitch_module_checkIcon__798b80e2{opacity:1;transition-delay:var(--animation-duration-immediate);transition-duration:var(--animation-duration-fast)}.ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+.ToggleSwitch_module_track__798b80e2:hover,label:hover & .ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+.ToggleSwitch_module_track__798b80e2{background-color:var(--color-green-600)}}.ToggleSwitch_module_off__798b80e2{.ToggleSwitch_module_thumb__798b80e2{position:relative;right:auto;inset-inline-start:calc(var(--spacing-md)*-.05)}}.ToggleSwitch_module_reversed__798b80e2{.ToggleSwitch_module_checkbox__798b80e2:focus+.ToggleSwitch_module_track__798b80e2,.ToggleSwitch_module_checkbox__798b80e2:hover:focus+.ToggleSwitch_module_track__798b80e2{outline-color:var(--color-blue-300)}&.ToggleSwitch_module_off__798b80e2{.ToggleSwitch_module_track__798b80e2{background-color:rgb(var(--color-white-rgb),.2)}.ToggleSwitch_module_checkbox__798b80e2:focus+.ToggleSwitch_module_track__798b80e2,.ToggleSwitch_module_checkbox__798b80e2:hover:focus+.ToggleSwitch_module_track__798b80e2{background-color:rgb(var(--color-white-rgb),.65)}.ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+.ToggleSwitch_module_track__798b80e2:hover,label:hover & .ToggleSwitch_module_checkbox__798b80e2:not(.ToggleSwitch_module_disabled__798b80e2)+.ToggleSwitch_module_track__798b80e2{background-color:rgb(var(--color-white-rgb),.65)}}}label .ToggleSwitch_module_disabled__798b80e2.ToggleSwitch_module_track__798b80e2{opacity:1}.ToggleSwitch_module_disabled__798b80e2.ToggleSwitch_module_track__798b80e2{opacity:.3}}
|
|
165
165
|
@layer kz-components{.ToggleSwitchField_module_container__30498bc6{display:flex}.ToggleSwitchField_module_fullWidth__30498bc6{.ToggleSwitchField_module_inner__30498bc6{width:100%}}.ToggleSwitchField_module_on__30498bc6 label{font-weight:var(--typography-paragraph-bold-font-weight)}}
|
|
@@ -4,6 +4,6 @@ import { type TitleBlockProps } from './types';
|
|
|
4
4
|
* {@link https://cultureamp.design/?path=/docs/components-titleblock-api-specification--docs Storybook}
|
|
5
5
|
*/
|
|
6
6
|
export declare const TitleBlock: {
|
|
7
|
-
({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
|
|
7
|
+
({ title, variant, breadcrumb, avatar, subtitle, sectionTitle, sectionTitleDescription, renderSectionTitle, pageSwitcherSelect, handleHamburgerClick, primaryAction, defaultAction, secondaryActions, secondaryOverflowMenuItems, navigationTabs, collapseNavigationAreaWhenPossible, sticky, textDirection, surveyStatus, id, titleAutomationId, avatarAutomationId, subtitleAutomationId, sectionTitleAutomationId, sectionTitleDescriptionAutomationId, breadcrumbAutomationId, breadcrumbTextAutomationId, }: TitleBlockProps): JSX.Element;
|
|
8
8
|
displayName: string;
|
|
9
9
|
};
|
|
@@ -31,6 +31,17 @@ export type TitleBlockProps = {
|
|
|
31
31
|
secondaryOverflowMenuItems?: TitleBlockMenuItemProps[];
|
|
32
32
|
navigationTabs?: NavigationTabs;
|
|
33
33
|
collapseNavigationAreaWhenPossible?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Makes the top strip stick to the top of its scrollable container as the
|
|
36
|
+
* content scrolls. The TitleBlock must be rendered inside a scrollable
|
|
37
|
+
* ancestor. When enabled the root becomes `display: contents` so the strip
|
|
38
|
+
* pins as a sibling of the scrolling content; its offset is
|
|
39
|
+
* `--app-chrome-sticky-offset` (owned by AppChrome, read-only) plus the
|
|
40
|
+
* opt-in `--titleblock-sticky-offset` a consumer sets to reserve space for a
|
|
41
|
+
* banner above it. Below 1080px the app-chrome offset is dropped to match the
|
|
42
|
+
* collapsed hamburger nav.
|
|
43
|
+
*/
|
|
44
|
+
sticky?: boolean;
|
|
34
45
|
textDirection?: TextDirection;
|
|
35
46
|
surveyStatus?: SurveyStatus;
|
|
36
47
|
id?: string;
|
package/package.json
CHANGED
|
@@ -61,6 +61,35 @@
|
|
|
61
61
|
display: flex;
|
|
62
62
|
width: 100%;
|
|
63
63
|
justify-content: center;
|
|
64
|
+
position: relative;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.sticky {
|
|
68
|
+
display: contents;
|
|
69
|
+
|
|
70
|
+
.titleRow {
|
|
71
|
+
z-index: 5;
|
|
72
|
+
position: sticky;
|
|
73
|
+
top: calc(var(--app-chrome-sticky-offset, 72px) + var(--titleblock-sticky-offset, 0px));
|
|
74
|
+
|
|
75
|
+
@media (width < 1080px) {
|
|
76
|
+
top: var(--titleblock-sticky-offset, 0);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.rowBelowSeparator {
|
|
81
|
+
z-index: 0;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sticky .titleRow,
|
|
86
|
+
.sticky .rowBelowSeparator {
|
|
87
|
+
background-color: $dt-color-background-color-default;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.sticky.lightVariant .titleRow,
|
|
91
|
+
.sticky.lightVariant .rowBelowSeparator {
|
|
92
|
+
background-color: $color-white;
|
|
64
93
|
}
|
|
65
94
|
|
|
66
95
|
.lightVariant .titleRow {
|
|
@@ -71,6 +100,19 @@
|
|
|
71
100
|
background-color: $color-white;
|
|
72
101
|
}
|
|
73
102
|
|
|
103
|
+
.sticky.adminVariant .titleRow {
|
|
104
|
+
background-color: $color-white;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.sticky.adminVariant .rowBelowSeparator {
|
|
108
|
+
background-color: $dt-color-background-color-admin;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.sticky.educationVariant .titleRow,
|
|
112
|
+
.sticky.educationVariant .rowBelowSeparator {
|
|
113
|
+
background-color: $dt-color-background-color-eduction;
|
|
114
|
+
}
|
|
115
|
+
|
|
74
116
|
%titleBlockInner {
|
|
75
117
|
box-sizing: border-box;
|
|
76
118
|
max-width: $layout-content-max-width;
|
|
@@ -248,6 +248,7 @@ export const TitleBlock = ({
|
|
|
248
248
|
secondaryOverflowMenuItems,
|
|
249
249
|
navigationTabs,
|
|
250
250
|
collapseNavigationAreaWhenPossible = false,
|
|
251
|
+
sticky = false,
|
|
251
252
|
textDirection,
|
|
252
253
|
surveyStatus,
|
|
253
254
|
id,
|
|
@@ -280,6 +281,7 @@ export const TitleBlock = ({
|
|
|
280
281
|
collapseNavigationArea &&
|
|
281
282
|
!(sectionTitle ?? sectionTitleDescription ?? renderSectionTitle) &&
|
|
282
283
|
styles.collapseNavigationArea,
|
|
284
|
+
sticky && styles.sticky,
|
|
283
285
|
title && title.length >= 30 && styles.hasLongTitle,
|
|
284
286
|
subtitle &&
|
|
285
287
|
typeof subtitle === 'string' &&
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
import { Canvas, Meta } from '@storybook/blocks'
|
|
2
|
+
import { ResourceLinks } from '~storybook/components'
|
|
3
|
+
import * as TitleBlockStories from './TitleBlock.stories'
|
|
4
|
+
|
|
5
|
+
<Meta title="Components/TitleBlock/Sticky Banner" />
|
|
6
|
+
|
|
7
|
+
# Sticky banner above a sticky TitleBlock
|
|
8
|
+
|
|
9
|
+
How to reserve sticky space for a banner above a Kaizen `TitleBlock` — using an
|
|
10
|
+
**additive** CSS variable.
|
|
11
|
+
|
|
12
|
+
📌 **The rule.** The banner and the TitleBlock strip both pin to the top of the
|
|
13
|
+
scroll container. TitleBlock exposes an additive offset
|
|
14
|
+
`--titleblock-sticky-offset` that your app sets to the banner's height, so the
|
|
15
|
+
strip pins directly below the banner.
|
|
16
|
+
|
|
17
|
+
<Canvas of={TitleBlockStories.WithGlobalNotificationAbove} />
|
|
18
|
+
|
|
19
|
+
## 1. The mechanism (@kaizen/components)
|
|
20
|
+
|
|
21
|
+
Passing `sticky` sets the TitleBlock root to `display: contents` (so it generates
|
|
22
|
+
no box and its strip becomes a sibling of your content in the scroll container)
|
|
23
|
+
and makes the top strip `position: sticky`. The strip's `top` is the sum of two
|
|
24
|
+
variables:
|
|
25
|
+
|
|
26
|
+
```scss
|
|
27
|
+
/* @kaizen/components — TitleBlock strip */
|
|
28
|
+
.titleRow {
|
|
29
|
+
position: sticky;
|
|
30
|
+
top: calc(
|
|
31
|
+
var(--app-chrome-sticky-offset, 72px) /* owned by AppChrome */ +
|
|
32
|
+
var(--titleblock-sticky-offset, 0px) /* opt-in, per consumer */
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
@media (width < 1080px) {
|
|
36
|
+
/* nav collapses to a hamburger: no top bar */
|
|
37
|
+
.titleRow {
|
|
38
|
+
top: var(--titleblock-sticky-offset, 0);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
**Additive = safe by default.** `--titleblock-sticky-offset` defaults to `0`, so
|
|
44
|
+
every existing TitleBlock is byte-for-byte unchanged unless a consumer opts in.
|
|
45
|
+
And because the shared `--app-chrome-sticky-offset` keeps its value, apps that
|
|
46
|
+
read it for other things (e.g. public-api-ui's
|
|
47
|
+
`min-h-[calc(100vh - var(--app-chrome-sticky-offset))]`) are unaffected.
|
|
48
|
+
|
|
49
|
+
## 2. Structure (consuming apps)
|
|
50
|
+
|
|
51
|
+
Render the banner and the TitleBlock as siblings in the scroll container. Set
|
|
52
|
+
`--titleblock-sticky-offset` on a thin `display: contents` wrapper around the
|
|
53
|
+
TitleBlock (it adds no box, so it doesn't affect sticky). The banner just reads
|
|
54
|
+
the shared offset for its own pinned position — read-only, never reassigned.
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
scroll container (AppChrome content / window)
|
|
58
|
+
│
|
|
59
|
+
├─ <banner> position: sticky
|
|
60
|
+
│ top: 0 → var(--app-chrome-sticky-offset) at ≥1080px
|
|
61
|
+
│
|
|
62
|
+
└─ <div> display: contents
|
|
63
|
+
--titleblock-sticky-offset: {bannerHeight}px
|
|
64
|
+
│
|
|
65
|
+
└─ <TitleBlock sticky />
|
|
66
|
+
└─ .titleRow sticky, top = chromeOffset + bannerHeight
|
|
67
|
+
│
|
|
68
|
+
└─ page content (scrolls beneath both)
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## 3. The code (consuming apps)
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<div
|
|
75
|
+
ref={bannerRef}
|
|
76
|
+
// sticky at all widths: top:0 on mobile (no nav bar),
|
|
77
|
+
// below the app-chrome bar at >=1080px
|
|
78
|
+
className="sticky top-0 z-[7] flex items-center justify-center
|
|
79
|
+
min-[1080px]:top-[var(--app-chrome-sticky-offset)]"
|
|
80
|
+
>
|
|
81
|
+
Banner content
|
|
82
|
+
</div>
|
|
83
|
+
|
|
84
|
+
<div
|
|
85
|
+
style={{
|
|
86
|
+
display: 'contents',
|
|
87
|
+
// reserve space for the banner; kaizen adds this to the strip's top
|
|
88
|
+
'--titleblock-sticky-offset': `${bannerHeight}px`,
|
|
89
|
+
}}
|
|
90
|
+
>
|
|
91
|
+
<TitleBlock sticky … />
|
|
92
|
+
</div>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
No alias variable, no cyclic-reference workaround, no second wrapper, and no
|
|
96
|
+
breakpoint gate on the banner — the additive var handles both breakpoints.
|
|
97
|
+
|
|
98
|
+
## 4. Measure the banner height (consuming app)
|
|
99
|
+
|
|
100
|
+
Feed a live height into `--titleblock-sticky-offset` so the strip stays flush no
|
|
101
|
+
matter how tall the banner gets (wrapping text, responsive padding). A
|
|
102
|
+
`ResizeObserver` keeps it accurate. If the banner is a fixed height, a constant
|
|
103
|
+
is fine instead.
|
|
104
|
+
|
|
105
|
+
```tsx
|
|
106
|
+
const bannerRef = React.useRef<HTMLDivElement>(null)
|
|
107
|
+
// set the initial bannerHeight to the height of the GlobalNotification banner on desktop with English text
|
|
108
|
+
const [bannerHeight, setBannerHeight] = React.useState(48)
|
|
109
|
+
|
|
110
|
+
React.useLayoutEffect(() => {
|
|
111
|
+
const el = bannerRef.current
|
|
112
|
+
if (!el) return
|
|
113
|
+
const update = () => setBannerHeight(el.offsetHeight)
|
|
114
|
+
update()
|
|
115
|
+
const observer = new ResizeObserver(update)
|
|
116
|
+
observer.observe(el)
|
|
117
|
+
return () => observer.disconnect()
|
|
118
|
+
}, [])
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
> **⚠️ Server-side rendering.** With a **dynamic** banner height the measured
|
|
122
|
+
> value is only known after hydration. In an SSR app, when a user navigates
|
|
123
|
+
> back/forward the browser restores the saved scroll position (Chrome's default),
|
|
124
|
+
> but the page's memory cache can be missed — so the banner (starting at its
|
|
125
|
+
> initial `useState` value) can flash and shift the TitleBlock into place after
|
|
126
|
+
> hydration. Two mitigations, in order of preference:
|
|
127
|
+
>
|
|
128
|
+
> - **Prefer a fixed/bounded banner height.** Before reaching for a dynamic
|
|
129
|
+
> height, ask whether the content can be bounded: overflow the scroll, move
|
|
130
|
+
> items into a dropdown, or trim excess text with a "read more" modal. A
|
|
131
|
+
> constant height needs no measurement and can't flash.
|
|
132
|
+
> - **Seed a sensible initial height** (as above — the desktop/English
|
|
133
|
+
> GlobalNotification height, e.g. `48`). This matches most users on first
|
|
134
|
+
> paint; only smaller screens or longer translations (where the text wraps to
|
|
135
|
+
> more lines) will adjust after measuring.
|
|
136
|
+
|
|
137
|
+
## 5. Result: verified both widths
|
|
138
|
+
|
|
139
|
+
Banner and strip stack flush, with no overlap or gap, both pinned through
|
|
140
|
+
scroll. `strip.top − banner.top` equals the banner height at every width
|
|
141
|
+
(example: a 48px banner on desktop may turn into a 128px banner on mobile as
|
|
142
|
+
content shifts to new lines).
|
|
143
|
+
|
|
144
|
+
<table>
|
|
145
|
+
<thead>
|
|
146
|
+
<tr>
|
|
147
|
+
<th>Width</th>
|
|
148
|
+
<th>Banner top</th>
|
|
149
|
+
<th>Strip top</th>
|
|
150
|
+
<th>Gap</th>
|
|
151
|
+
</tr>
|
|
152
|
+
</thead>
|
|
153
|
+
<tbody>
|
|
154
|
+
<tr>
|
|
155
|
+
<td>Desktop (≥1080px)</td>
|
|
156
|
+
<td>72px (chrome bar)</td>
|
|
157
|
+
<td>120px (72 + 48)</td>
|
|
158
|
+
<td>48px = banner height</td>
|
|
159
|
+
</tr>
|
|
160
|
+
<tr>
|
|
161
|
+
<td>Mobile (<1080px)</td>
|
|
162
|
+
<td>0px (hamburger, no bar)</td>
|
|
163
|
+
<td>128px (0 + 128)</td>
|
|
164
|
+
<td>128px = banner height</td>
|
|
165
|
+
</tr>
|
|
166
|
+
</tbody>
|
|
167
|
+
</table>
|
|
168
|
+
|
|
169
|
+
Mobile pins the banner at `0` because the top nav collapses to a hamburger —
|
|
170
|
+
there's no persistent bar to sit under. The `<1080px` rule drops the chrome
|
|
171
|
+
offset and keeps only the additive banner offset, so the two stay in sync.
|
|
172
|
+
|
|
173
|
+
## 6. Do & don't
|
|
174
|
+
|
|
175
|
+
**Do**
|
|
176
|
+
|
|
177
|
+
- Keep the banner and TitleBlock as **siblings** in the scroll container.
|
|
178
|
+
- Set `--titleblock-sticky-offset` on a `display: contents` wrapper right around
|
|
179
|
+
the TitleBlock.
|
|
180
|
+
- Feed a **measured** banner height into it (or a constant for a fixed banner).
|
|
181
|
+
- Let the banner _read_ `--app-chrome-sticky-offset` for its own pin.
|
|
182
|
+
|
|
183
|
+
**Don't**
|
|
184
|
+
|
|
185
|
+
- Reassign `--app-chrome-sticky-offset` — it's a shared "app-chrome height"
|
|
186
|
+
signal other apps read; changing it resizes their layouts.
|
|
187
|
+
- Wrap the TitleBlock in a box with height (e.g. a `<header>`) —
|
|
188
|
+
`display: contents` makes the strip's containing block that box, killing its
|
|
189
|
+
sticky travel.
|
|
190
|
+
- Set `--titleblock-sticky-offset` on `:root`/`html` — scope it near the
|
|
191
|
+
TitleBlock so it can't leak to another nested one.
|
|
192
|
+
- Hardcode `120px` — derive it from the banner height.
|
|
@@ -3,9 +3,11 @@ import { type Meta, type StoryObj } from '@storybook/react'
|
|
|
3
3
|
import { expect, waitFor, within } from '@storybook/test'
|
|
4
4
|
import { Heading } from 'react-aria-components'
|
|
5
5
|
import { Icon } from '~components/Icon'
|
|
6
|
+
import { GlobalNotification } from '~components/Notification'
|
|
6
7
|
import { assetUrl } from '~components/utils/hostedAssets'
|
|
7
8
|
import { StickerSheet } from '~storybook/components/StickerSheet'
|
|
8
9
|
import { NavigationTab, TitleBlock } from '../index'
|
|
10
|
+
import stickyBannerStyles from './stickyBanner.module.css'
|
|
9
11
|
|
|
10
12
|
const SECONDARY_ACTIONS = [
|
|
11
13
|
{
|
|
@@ -125,6 +127,50 @@ export default meta
|
|
|
125
127
|
|
|
126
128
|
type Story = StoryObj<typeof meta>
|
|
127
129
|
|
|
130
|
+
const STICKY_SCROLLABLE_CONTAINER_STYLES = {
|
|
131
|
+
height: '200px',
|
|
132
|
+
overflowY: 'auto' as const,
|
|
133
|
+
backgroundColor: 'var(--color-white)',
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
const STICKY_SCROLLABLE_FRAME_STYLES = {
|
|
137
|
+
margin: '0 auto',
|
|
138
|
+
maxWidth: '1200px',
|
|
139
|
+
border: '1px solid var(--border-solid-border-color)',
|
|
140
|
+
borderRadius: '12px',
|
|
141
|
+
overflow: 'hidden' as const,
|
|
142
|
+
backgroundColor: 'var(--color-white)',
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const renderStickyScrollableTitleBlock = (
|
|
146
|
+
args: React.ComponentProps<typeof TitleBlock>,
|
|
147
|
+
): JSX.Element => (
|
|
148
|
+
<div style={STICKY_SCROLLABLE_FRAME_STYLES}>
|
|
149
|
+
<div
|
|
150
|
+
data-scroll-container="sticky-top-strip"
|
|
151
|
+
className={stickyBannerStyles.scrollContainer}
|
|
152
|
+
style={{
|
|
153
|
+
...STICKY_SCROLLABLE_CONTAINER_STYLES,
|
|
154
|
+
// Taller than the shared default so the fake nav and the TitleBlock
|
|
155
|
+
// content fit without cramping.
|
|
156
|
+
height: '400px',
|
|
157
|
+
}}
|
|
158
|
+
>
|
|
159
|
+
<div className={stickyBannerStyles.fakeAppChromeNav}>Fake app chrome nav (72px)</div>
|
|
160
|
+
|
|
161
|
+
<TitleBlock {...args} />
|
|
162
|
+
|
|
163
|
+
<div
|
|
164
|
+
style={{
|
|
165
|
+
// Taller than the container so it overflows and the sticky behaviour
|
|
166
|
+
// (+ the play() scroll assertion) stays exercised.
|
|
167
|
+
height: '500px',
|
|
168
|
+
}}
|
|
169
|
+
/>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
)
|
|
173
|
+
|
|
128
174
|
export const Playground: Story = {
|
|
129
175
|
parameters: {
|
|
130
176
|
docs: {
|
|
@@ -692,3 +738,197 @@ export const WithOnlySecondaryActions: Story = {
|
|
|
692
738
|
avatar: undefined,
|
|
693
739
|
},
|
|
694
740
|
}
|
|
741
|
+
|
|
742
|
+
export const StickyTopStripInScrollableContainer: Story = {
|
|
743
|
+
name: 'Sticker Sheet (Sticky Top Strip In Scrollable Container)',
|
|
744
|
+
parameters: {
|
|
745
|
+
viewport: viewports,
|
|
746
|
+
chromatic: chromaticViewports,
|
|
747
|
+
},
|
|
748
|
+
args: {
|
|
749
|
+
sticky: true,
|
|
750
|
+
},
|
|
751
|
+
render: (args) => {
|
|
752
|
+
const { variant: _variant, ...argsWithoutVariant } = args
|
|
753
|
+
|
|
754
|
+
return (
|
|
755
|
+
<StickerSheet title="Sticky top strip within a scrollable container">
|
|
756
|
+
<StickerSheet.Row header="Default (Purple background)">
|
|
757
|
+
{renderStickyScrollableTitleBlock({
|
|
758
|
+
...argsWithoutVariant,
|
|
759
|
+
title: 'Default Variant',
|
|
760
|
+
subtitle: 'Sticky top strip inside a scrollable content area',
|
|
761
|
+
breadcrumb: {
|
|
762
|
+
path: '#',
|
|
763
|
+
text: 'Back to home',
|
|
764
|
+
},
|
|
765
|
+
navigationTabs: [
|
|
766
|
+
<NavigationTab key="1" text="Overview" href="#" active />,
|
|
767
|
+
<NavigationTab key="2" text="Settings" href="#" />,
|
|
768
|
+
],
|
|
769
|
+
})}
|
|
770
|
+
</StickerSheet.Row>
|
|
771
|
+
<StickerSheet.Row header="Education (Blue background)">
|
|
772
|
+
{renderStickyScrollableTitleBlock({
|
|
773
|
+
...argsWithoutVariant,
|
|
774
|
+
variant: 'education',
|
|
775
|
+
title: 'Education Variant',
|
|
776
|
+
subtitle: 'Sticky top strip inside a scrollable content area',
|
|
777
|
+
breadcrumb: {
|
|
778
|
+
path: '#',
|
|
779
|
+
text: 'Back to courses',
|
|
780
|
+
},
|
|
781
|
+
navigationTabs: [
|
|
782
|
+
<NavigationTab key="1" variant="education" text="Lessons" href="#" active />,
|
|
783
|
+
<NavigationTab key="2" variant="education" text="Assignments" href="#" />,
|
|
784
|
+
],
|
|
785
|
+
})}
|
|
786
|
+
</StickerSheet.Row>
|
|
787
|
+
<StickerSheet.Row header="Admin (White background)">
|
|
788
|
+
{renderStickyScrollableTitleBlock({
|
|
789
|
+
...argsWithoutVariant,
|
|
790
|
+
variant: 'admin',
|
|
791
|
+
title: 'Admin Variant',
|
|
792
|
+
subtitle: 'Sticky top strip inside a scrollable content area',
|
|
793
|
+
breadcrumb: {
|
|
794
|
+
path: '#',
|
|
795
|
+
text: 'Back to dashboard',
|
|
796
|
+
},
|
|
797
|
+
navigationTabs: [
|
|
798
|
+
<NavigationTab key="1" variant="admin" text="Users" href="#" active />,
|
|
799
|
+
<NavigationTab key="2" variant="admin" text="Settings" href="#" />,
|
|
800
|
+
],
|
|
801
|
+
})}
|
|
802
|
+
</StickerSheet.Row>
|
|
803
|
+
<StickerSheet.Row header="Light (White background)">
|
|
804
|
+
{renderStickyScrollableTitleBlock({
|
|
805
|
+
...argsWithoutVariant,
|
|
806
|
+
variant: 'light',
|
|
807
|
+
title: 'Light Variant',
|
|
808
|
+
subtitle: 'Sticky top strip inside a scrollable content area',
|
|
809
|
+
breadcrumb: {
|
|
810
|
+
path: '#',
|
|
811
|
+
text: 'Back to overview',
|
|
812
|
+
},
|
|
813
|
+
navigationTabs: [
|
|
814
|
+
<NavigationTab key="1" variant="light" text="Details" href="#" active />,
|
|
815
|
+
<NavigationTab key="2" variant="light" text="Analytics" href="#" />,
|
|
816
|
+
],
|
|
817
|
+
})}
|
|
818
|
+
</StickerSheet.Row>
|
|
819
|
+
</StickerSheet>
|
|
820
|
+
)
|
|
821
|
+
},
|
|
822
|
+
play: async ({ canvasElement, step }) => {
|
|
823
|
+
await step('scroll each sticky container before snapshot', async () => {
|
|
824
|
+
const scrollContainers = canvasElement.querySelectorAll<HTMLElement>(
|
|
825
|
+
'[data-scroll-container="sticky-top-strip"]',
|
|
826
|
+
)
|
|
827
|
+
|
|
828
|
+
scrollContainers.forEach((scrollContainer) => {
|
|
829
|
+
scrollContainer.scrollTo({
|
|
830
|
+
top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
|
|
831
|
+
})
|
|
832
|
+
})
|
|
833
|
+
|
|
834
|
+
await waitFor(() => {
|
|
835
|
+
scrollContainers.forEach((scrollContainer) => {
|
|
836
|
+
expect(scrollContainer.scrollTop).toBeGreaterThan(0)
|
|
837
|
+
})
|
|
838
|
+
})
|
|
839
|
+
})
|
|
840
|
+
},
|
|
841
|
+
}
|
|
842
|
+
|
|
843
|
+
/**
|
|
844
|
+
* Sticky banner (GlobalNotification) above a sticky TitleBlock.
|
|
845
|
+
*
|
|
846
|
+
* Follows the additive-offset pattern: the banner pins below the app-chrome
|
|
847
|
+
* bar by *reading* the shared `--app-chrome-sticky-offset` (never reassigning
|
|
848
|
+
* it), and the TitleBlock strip reserves space for the banner via the opt-in
|
|
849
|
+
* `--titleblock-sticky-offset`, set on a `display: contents` wrapper right
|
|
850
|
+
* around the TitleBlock. The banner height is measured with a ResizeObserver
|
|
851
|
+
* and fed into that variable so the strip stays flush at any banner height.
|
|
852
|
+
*/
|
|
853
|
+
const StickyBannerAboveTitleBlock = (
|
|
854
|
+
args: React.ComponentProps<typeof TitleBlock>,
|
|
855
|
+
): JSX.Element => {
|
|
856
|
+
const containerRef = React.useRef<HTMLDivElement>(null)
|
|
857
|
+
const [bannerHeight, setBannerHeight] = React.useState(0)
|
|
858
|
+
|
|
859
|
+
React.useLayoutEffect(() => {
|
|
860
|
+
// GlobalNotification doesn't forward a ref, so grab its DOM node by the
|
|
861
|
+
// data attribute to measure the banner height.
|
|
862
|
+
const el = containerRef.current?.querySelector<HTMLElement>('[data-sticky-banner]')
|
|
863
|
+
if (!el) return
|
|
864
|
+
const update = (): void => setBannerHeight(el.offsetHeight)
|
|
865
|
+
update()
|
|
866
|
+
const observer = new ResizeObserver(update)
|
|
867
|
+
observer.observe(el)
|
|
868
|
+
return () => observer.disconnect()
|
|
869
|
+
}, [])
|
|
870
|
+
|
|
871
|
+
return (
|
|
872
|
+
<div
|
|
873
|
+
ref={containerRef}
|
|
874
|
+
data-scroll-container="sticky-top-strip"
|
|
875
|
+
className={stickyBannerStyles.scrollContainer}
|
|
876
|
+
style={{
|
|
877
|
+
height: '500px',
|
|
878
|
+
overflowY: 'auto',
|
|
879
|
+
}}
|
|
880
|
+
>
|
|
881
|
+
<div className={stickyBannerStyles.fakeAppChromeNav}>Fake app chrome nav (72px)</div>
|
|
882
|
+
<GlobalNotification
|
|
883
|
+
variant="informative"
|
|
884
|
+
persistent
|
|
885
|
+
data-sticky-banner
|
|
886
|
+
classNameOverride={stickyBannerStyles.stickyBanner}
|
|
887
|
+
>
|
|
888
|
+
This global notification renders directly above the TitleBlock.
|
|
889
|
+
</GlobalNotification>
|
|
890
|
+
<div
|
|
891
|
+
style={{
|
|
892
|
+
display: 'contents',
|
|
893
|
+
['--titleblock-sticky-offset' as string]: `${bannerHeight}px`,
|
|
894
|
+
}}
|
|
895
|
+
>
|
|
896
|
+
<TitleBlock {...args} />
|
|
897
|
+
</div>
|
|
898
|
+
|
|
899
|
+
{/* Taller than the container so it overflows and the sticky behaviour
|
|
900
|
+
(+ the play() scroll assertion) stays exercised. */}
|
|
901
|
+
<div style={{ height: '600px' }} />
|
|
902
|
+
</div>
|
|
903
|
+
)
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
export const WithGlobalNotificationAbove: Story = {
|
|
907
|
+
parameters: {
|
|
908
|
+
viewport: viewports,
|
|
909
|
+
chromatic: chromaticViewports,
|
|
910
|
+
},
|
|
911
|
+
args: {
|
|
912
|
+
sticky: true,
|
|
913
|
+
},
|
|
914
|
+
render: (args) => <StickyBannerAboveTitleBlock {...args} />,
|
|
915
|
+
play: async ({ canvasElement, step }) => {
|
|
916
|
+
await step('scroll the sticky container before snapshot', async () => {
|
|
917
|
+
const scrollContainers = canvasElement.querySelectorAll<HTMLElement>(
|
|
918
|
+
'[data-scroll-container="sticky-top-strip"]',
|
|
919
|
+
)
|
|
920
|
+
|
|
921
|
+
scrollContainers.forEach((scrollContainer) => {
|
|
922
|
+
scrollContainer.scrollTo({
|
|
923
|
+
top: scrollContainer.scrollHeight - scrollContainer.clientHeight,
|
|
924
|
+
})
|
|
925
|
+
})
|
|
926
|
+
|
|
927
|
+
await waitFor(() => {
|
|
928
|
+
scrollContainers.forEach((scrollContainer) => {
|
|
929
|
+
expect(scrollContainer.scrollTop).toBeGreaterThan(0)
|
|
930
|
+
})
|
|
931
|
+
})
|
|
932
|
+
})
|
|
933
|
+
},
|
|
934
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
/* Pin below the app-chrome bar by reading the shared offset (read-only). */
|
|
2
|
+
.stickyBanner {
|
|
3
|
+
position: sticky;
|
|
4
|
+
top: var(--app-chrome-sticky-offset, 72px);
|
|
5
|
+
z-index: 5;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/*
|
|
9
|
+
* Stand-in for the AppChrome content scroll area. Sets the shared
|
|
10
|
+
* `--app-chrome-sticky-offset` that the sticky titleRow and banner read.
|
|
11
|
+
* Below 1080px the AppChrome nav collapses to a hamburger (no persistent top
|
|
12
|
+
* bar), so the offset drops to 0 — matching kaizen's own
|
|
13
|
+
* `@media (width < 1080px)` rule on the titleRow.
|
|
14
|
+
*/
|
|
15
|
+
.scrollContainer {
|
|
16
|
+
--app-chrome-sticky-offset: 72px;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/*
|
|
20
|
+
* Fake AppChrome top nav — a sticky bar at >=1080px, removed below that
|
|
21
|
+
* (the real nav becomes a hamburger with no top bar).
|
|
22
|
+
*/
|
|
23
|
+
.fakeAppChromeNav {
|
|
24
|
+
position: sticky;
|
|
25
|
+
top: 0;
|
|
26
|
+
z-index: 2;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
height: 72px;
|
|
30
|
+
padding-inline: 16px;
|
|
31
|
+
background-color: var(--color-purple-800);
|
|
32
|
+
color: var(--color-white);
|
|
33
|
+
font-weight: 600;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (width < 1080px) {
|
|
37
|
+
.scrollContainer {
|
|
38
|
+
--app-chrome-sticky-offset: 0;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.fakeAppChromeNav {
|
|
42
|
+
display: none;
|
|
43
|
+
}
|
|
44
|
+
}
|
package/src/TitleBlock/types.ts
CHANGED
|
@@ -32,6 +32,17 @@ export type TitleBlockProps = {
|
|
|
32
32
|
secondaryOverflowMenuItems?: TitleBlockMenuItemProps[]
|
|
33
33
|
navigationTabs?: NavigationTabs
|
|
34
34
|
collapseNavigationAreaWhenPossible?: boolean
|
|
35
|
+
/**
|
|
36
|
+
* Makes the top strip stick to the top of its scrollable container as the
|
|
37
|
+
* content scrolls. The TitleBlock must be rendered inside a scrollable
|
|
38
|
+
* ancestor. When enabled the root becomes `display: contents` so the strip
|
|
39
|
+
* pins as a sibling of the scrolling content; its offset is
|
|
40
|
+
* `--app-chrome-sticky-offset` (owned by AppChrome, read-only) plus the
|
|
41
|
+
* opt-in `--titleblock-sticky-offset` a consumer sets to reserve space for a
|
|
42
|
+
* banner above it. Below 1080px the app-chrome offset is dropped to match the
|
|
43
|
+
* collapsed hamburger nav.
|
|
44
|
+
*/
|
|
45
|
+
sticky?: boolean
|
|
35
46
|
textDirection?: TextDirection
|
|
36
47
|
surveyStatus?: SurveyStatus
|
|
37
48
|
id?: string
|