@patternfly/patternfly 6.5.0-prerelease.77 → 6.5.0-prerelease.79
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/README.md +1 -1
- package/components/Button/button.css +10 -4
- package/components/Button/button.scss +7 -1
- package/components/Compass/compass.css +147 -3
- package/components/Compass/compass.scss +142 -3
- package/components/Masthead/masthead.css +3 -3
- package/components/Masthead/masthead.scss +1 -1
- package/components/MenuToggle/menu-toggle.css +3 -3
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Nav/nav.css +2 -2
- package/components/Nav/nav.scss +1 -1
- package/components/Page/page.css +12 -8
- package/components/Page/page.scss +6 -1
- package/components/Pagination/pagination.css +56 -4
- package/components/Pagination/pagination.scss +66 -5
- package/components/_index.css +233 -27
- package/docs/components/Compass/examples/Compass.css +2 -11
- package/docs/components/Compass/examples/Compass.md +8 -1
- package/docs/components/Nav/examples/Navigation.md +105 -9
- package/docs/components/Pagination/examples/Pagination.md +495 -3
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/Compass/examples/Compass.md +2108 -267
- package/docs/demos/DataList/examples/DataList.md +1 -1
- package/docs/demos/Nav/examples/Nav.md +272 -90
- package/docs/demos/Table/examples/Table.md +1 -1
- package/docs/demos/Toolbar/examples/Toolbar.md +7 -7
- package/package.json +1 -1
- package/patternfly-no-globals.css +233 -27
- package/patternfly.css +233 -27
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/mixins.scss +2 -2
package/patternfly.css
CHANGED
|
@@ -11264,6 +11264,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
|
11264
11264
|
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
|
11265
11265
|
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
|
11266
11266
|
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
|
|
11267
|
+
--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1;
|
|
11267
11268
|
--pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
|
|
11268
11269
|
}
|
|
11269
11270
|
|
|
@@ -11659,6 +11660,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11659
11660
|
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
|
11660
11661
|
--pf-v6-c-button--hover__icon--TransitionProperty: scale;
|
|
11661
11662
|
}
|
|
11663
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger {
|
|
11664
|
+
--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1;
|
|
11665
|
+
--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1;
|
|
11666
|
+
}
|
|
11667
|
+
|
|
11662
11668
|
.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
|
|
11663
11669
|
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
11664
11670
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
@@ -11673,9 +11679,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11673
11679
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
11674
11680
|
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
11675
11681
|
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
11676
|
-
--pf-v6-c-button__icon--ScaleX:
|
|
11682
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
11677
11683
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
11678
|
-
--pf-v6-c-button--hover__icon--ScaleX:
|
|
11684
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
11679
11685
|
}
|
|
11680
11686
|
.pf-v6-c-button.pf-m-circle {
|
|
11681
11687
|
--pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
|
|
@@ -11771,11 +11777,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
|
11771
11777
|
display: none;
|
|
11772
11778
|
}
|
|
11773
11779
|
}
|
|
11774
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
|
|
11780
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
|
|
11775
11781
|
justify-content: flex-start;
|
|
11776
11782
|
width: 100%;
|
|
11777
11783
|
}
|
|
11778
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
|
|
11784
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
|
|
11779
11785
|
display: revert;
|
|
11780
11786
|
}
|
|
11781
11787
|
|
|
@@ -12990,6 +12996,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
12990
12996
|
--pf-v6-c-compass__message-bar--Width: 450px;
|
|
12991
12997
|
--pf-v6-c-compass__message-bar--MinWidth: 300px;
|
|
12992
12998
|
--pf-v6-c-compass__message-bar--MaxWidth: 600px;
|
|
12999
|
+
--pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
12993
13000
|
--pf-v6-c-compass--section--slide--length--header: 100%;
|
|
12994
13001
|
--pf-v6-c-compass--section--slide--length--sidebar: 100%;
|
|
12995
13002
|
--pf-v6-c-compass--section--slide--length--main-footer: 100%;
|
|
@@ -13002,6 +13009,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
13002
13009
|
--pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
|
|
13003
13010
|
--pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
|
|
13004
13011
|
--pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
|
|
13012
|
+
--pf-v6-c-compass__dock--Width: 15.625rem;
|
|
13013
|
+
--pf-v6-c-compass__dock--desktop--Width: auto;
|
|
13014
|
+
--pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
|
|
13015
|
+
--pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
|
|
13016
|
+
--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
|
|
13017
|
+
--pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
|
|
13018
|
+
--pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
13019
|
+
--pf-v6-c-compass__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
13020
|
+
--pf-v6-c-compass__dock-main--BoxShadow: none;
|
|
13021
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
|
|
13022
|
+
--pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
13023
|
+
--pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
|
|
13024
|
+
--pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
|
|
13025
|
+
--pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
|
|
13026
|
+
--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
13027
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
|
|
13028
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
|
|
13005
13029
|
}
|
|
13006
13030
|
@media screen and (prefers-reduced-motion: no-preference) {
|
|
13007
13031
|
.pf-v6-c-compass {
|
|
@@ -13037,18 +13061,90 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
13037
13061
|
background-size: cover;
|
|
13038
13062
|
}
|
|
13039
13063
|
.pf-v6-c-compass.pf-m-docked {
|
|
13040
|
-
grid-template-areas: "
|
|
13041
|
-
grid-template-rows:
|
|
13042
|
-
grid-template-columns:
|
|
13064
|
+
grid-template-areas: "header" "main";
|
|
13065
|
+
grid-template-rows: max-content 1fr;
|
|
13066
|
+
grid-template-columns: 1fr;
|
|
13043
13067
|
align-items: stretch;
|
|
13044
13068
|
padding: 0;
|
|
13045
13069
|
}
|
|
13046
13070
|
.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
|
|
13047
13071
|
padding: var(--pf-v6-c-compass--Padding);
|
|
13048
13072
|
}
|
|
13073
|
+
.pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
|
|
13074
|
+
--pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
|
|
13075
|
+
grid-area: header;
|
|
13076
|
+
}
|
|
13049
13077
|
:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
|
|
13050
13078
|
--pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
|
|
13051
13079
|
}
|
|
13080
|
+
@media (min-width: 62rem) {
|
|
13081
|
+
.pf-v6-c-compass.pf-m-docked {
|
|
13082
|
+
grid-template-areas: "dock main";
|
|
13083
|
+
grid-template-rows: auto;
|
|
13084
|
+
grid-template-columns: auto 1fr;
|
|
13085
|
+
row-gap: var(--pf-v6-c-compass__main--RowGap);
|
|
13086
|
+
align-items: stretch;
|
|
13087
|
+
padding: 0;
|
|
13088
|
+
}
|
|
13089
|
+
.pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
|
|
13090
|
+
display: none;
|
|
13091
|
+
}
|
|
13092
|
+
}
|
|
13093
|
+
.pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
13094
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13095
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
13096
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
13097
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
13098
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
13099
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
13100
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
13101
|
+
}
|
|
13102
|
+
.pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
|
13103
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13104
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
13105
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
13106
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
13107
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13108
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
13109
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13110
|
+
}
|
|
13111
|
+
.pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
|
|
13112
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13113
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
13114
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
13115
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
13116
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13117
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
13118
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13119
|
+
}
|
|
13120
|
+
@media (min-width: 62rem) {
|
|
13121
|
+
.pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
|
|
13122
|
+
.pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
|
|
13123
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
13124
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
13125
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
13126
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
13127
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
13128
|
+
}
|
|
13129
|
+
.pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
13130
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13131
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
13132
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
13133
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
13134
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
13135
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
13136
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
13137
|
+
}
|
|
13138
|
+
.pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
13139
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
13140
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
13141
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
13142
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
13143
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13144
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
13145
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
13146
|
+
}
|
|
13147
|
+
}
|
|
13052
13148
|
|
|
13053
13149
|
.pf-v6-c-compass__header,
|
|
13054
13150
|
.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
|
|
@@ -13166,6 +13262,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
|
|
|
13166
13262
|
margin-inline-start: var(--pf-v6-c-compass--Gap);
|
|
13167
13263
|
}
|
|
13168
13264
|
|
|
13265
|
+
.pf-v6-c-compass__dock {
|
|
13266
|
+
position: fixed;
|
|
13267
|
+
inset-block-start: 0;
|
|
13268
|
+
inset-block-end: 0;
|
|
13269
|
+
inset-inline-start: 0;
|
|
13270
|
+
z-index: var(--pf-v6-c-compass__dock--ZIndex);
|
|
13271
|
+
display: flex;
|
|
13272
|
+
flex-direction: column;
|
|
13273
|
+
grid-area: dock;
|
|
13274
|
+
width: var(--pf-v6-c-compass__dock--Width);
|
|
13275
|
+
transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
|
|
13276
|
+
translate: -100% 0;
|
|
13277
|
+
}
|
|
13278
|
+
.pf-v6-c-compass__dock.pf-m-expanded {
|
|
13279
|
+
--pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
|
|
13280
|
+
translate: 0;
|
|
13281
|
+
}
|
|
13282
|
+
@media (min-width: 62rem) {
|
|
13283
|
+
.pf-v6-c-compass__dock {
|
|
13284
|
+
--pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
|
|
13285
|
+
--pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
|
|
13286
|
+
position: revert;
|
|
13287
|
+
inset: revert;
|
|
13288
|
+
width: auto;
|
|
13289
|
+
translate: 0;
|
|
13290
|
+
}
|
|
13291
|
+
}
|
|
13292
|
+
.pf-v6-c-compass__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
|
|
13293
|
+
align-items: stretch;
|
|
13294
|
+
}
|
|
13295
|
+
.pf-v6-c-compass__dock.pf-m-text-expanded {
|
|
13296
|
+
width: var(--pf-v6-c-compass__dock--Width);
|
|
13297
|
+
}
|
|
13298
|
+
|
|
13299
|
+
.pf-v6-c-compass__dock-main {
|
|
13300
|
+
flex-grow: 1;
|
|
13301
|
+
background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
|
|
13302
|
+
backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
|
|
13303
|
+
border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
|
|
13304
|
+
box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
|
|
13305
|
+
}
|
|
13306
|
+
.pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
|
|
13307
|
+
border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);
|
|
13308
|
+
box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
|
|
13309
|
+
}
|
|
13310
|
+
@media (min-width: 62rem) {
|
|
13311
|
+
.pf-v6-c-compass__dock-main {
|
|
13312
|
+
--pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
|
|
13313
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
|
|
13314
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
|
|
13315
|
+
--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
|
|
13316
|
+
}
|
|
13317
|
+
}
|
|
13318
|
+
|
|
13169
13319
|
.pf-v6-c-compass__main {
|
|
13170
13320
|
display: flex;
|
|
13171
13321
|
flex-direction: column;
|
|
@@ -19936,13 +20086,13 @@ ul.pf-v6-c-list {
|
|
|
19936
20086
|
display: revert;
|
|
19937
20087
|
}
|
|
19938
20088
|
}
|
|
19939
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
20089
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
|
|
19940
20090
|
display: revert;
|
|
19941
20091
|
}
|
|
19942
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
|
|
20092
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
|
|
19943
20093
|
display: none;
|
|
19944
20094
|
}
|
|
19945
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
|
|
20095
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
|
|
19946
20096
|
align-items: flex-start;
|
|
19947
20097
|
}
|
|
19948
20098
|
|
|
@@ -21413,12 +21563,12 @@ ul.pf-v6-c-list {
|
|
|
21413
21563
|
display: none;
|
|
21414
21564
|
}
|
|
21415
21565
|
}
|
|
21416
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
|
|
21566
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
|
|
21417
21567
|
justify-content: flex-start;
|
|
21418
21568
|
width: 100%;
|
|
21419
21569
|
}
|
|
21420
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
|
|
21421
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
|
|
21570
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
|
|
21571
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
|
|
21422
21572
|
.pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
|
|
21423
21573
|
display: revert;
|
|
21424
21574
|
}
|
|
@@ -22185,10 +22335,10 @@ ul.pf-v6-c-list {
|
|
|
22185
22335
|
display: none;
|
|
22186
22336
|
}
|
|
22187
22337
|
}
|
|
22188
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
|
|
22338
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
|
|
22189
22339
|
width: 100%;
|
|
22190
22340
|
}
|
|
22191
|
-
.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
|
|
22341
|
+
:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
|
|
22192
22342
|
display: revert;
|
|
22193
22343
|
}
|
|
22194
22344
|
|
|
@@ -23094,9 +23244,9 @@ ul.pf-v6-c-list {
|
|
|
23094
23244
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
23095
23245
|
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
23096
23246
|
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
23097
|
-
--pf-v6-c-button__icon--ScaleX:
|
|
23247
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23098
23248
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
23099
|
-
--pf-v6-c-button--hover__icon--ScaleX:
|
|
23249
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23100
23250
|
}
|
|
23101
23251
|
@media (min-width: 75rem) {
|
|
23102
23252
|
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
|
@@ -23111,9 +23261,9 @@ ul.pf-v6-c-list {
|
|
|
23111
23261
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
23112
23262
|
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
23113
23263
|
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
23114
|
-
--pf-v6-c-button__icon--ScaleX:
|
|
23264
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23115
23265
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
23116
|
-
--pf-v6-c-button--hover__icon--ScaleX:
|
|
23266
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23117
23267
|
}
|
|
23118
23268
|
.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
23119
23269
|
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
@@ -23130,9 +23280,9 @@ ul.pf-v6-c-list {
|
|
|
23130
23280
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
23131
23281
|
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
23132
23282
|
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
23133
|
-
--pf-v6-c-button__icon--ScaleX:
|
|
23283
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23134
23284
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
23135
|
-
--pf-v6-c-button--hover__icon--ScaleX:
|
|
23285
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23136
23286
|
}
|
|
23137
23287
|
@media (min-width: 62rem) {
|
|
23138
23288
|
.pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
|
|
@@ -23157,9 +23307,9 @@ ul.pf-v6-c-list {
|
|
|
23157
23307
|
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
23158
23308
|
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
23159
23309
|
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
23160
|
-
--pf-v6-c-button__icon--ScaleX:
|
|
23310
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23161
23311
|
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
23162
|
-
--pf-v6-c-button--hover__icon--ScaleX:
|
|
23312
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
|
|
23163
23313
|
}
|
|
23164
23314
|
}
|
|
23165
23315
|
|
|
@@ -23189,6 +23339,10 @@ ul.pf-v6-c-list {
|
|
|
23189
23339
|
transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
|
|
23190
23340
|
translate: -100% 0;
|
|
23191
23341
|
}
|
|
23342
|
+
:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
|
|
23343
|
+
translate: 100% 0;
|
|
23344
|
+
}
|
|
23345
|
+
|
|
23192
23346
|
.pf-v6-c-page__dock.pf-m-expanded {
|
|
23193
23347
|
--pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
|
|
23194
23348
|
translate: 0;
|
|
@@ -23843,7 +23997,7 @@ ul.pf-v6-c-list {
|
|
|
23843
23997
|
--pf-v6-c-pagination__total-items--Display: block;
|
|
23844
23998
|
--pf-v6-c-pagination--m-display-summary__total-items--Display: block;
|
|
23845
23999
|
--pf-v6-c-pagination--m-display-full__total-items--Display: none;
|
|
23846
|
-
--pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--
|
|
24000
|
+
--pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
|
|
23847
24001
|
--pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
|
|
23848
24002
|
--pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
|
|
23849
24003
|
--pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
|
|
@@ -23852,6 +24006,12 @@ ul.pf-v6-c-list {
|
|
|
23852
24006
|
--pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
|
|
23853
24007
|
--pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
|
|
23854
24008
|
--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
|
|
24009
|
+
--pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
|
|
24010
|
+
--pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
|
|
24011
|
+
--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
|
24012
|
+
--pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
|
|
24013
|
+
--pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
|
|
24014
|
+
--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
|
|
23855
24015
|
--pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
23856
24016
|
--pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
23857
24017
|
--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
|
|
@@ -23866,6 +24026,15 @@ ul.pf-v6-c-list {
|
|
|
23866
24026
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
|
|
23867
24027
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
|
|
23868
24028
|
--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
|
|
24029
|
+
--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
|
|
24030
|
+
}
|
|
24031
|
+
:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
|
|
24032
|
+
--pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
|
|
24033
|
+
--pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
|
|
24034
|
+
--pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
|
|
24035
|
+
--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
|
|
24036
|
+
}
|
|
24037
|
+
.pf-v6-c-pagination {
|
|
23869
24038
|
--pf-v6-c-pagination__page-menu--Display--base: block;
|
|
23870
24039
|
--pf-v6-c-pagination__page-menu--Display: none;
|
|
23871
24040
|
--pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
|
|
@@ -23900,6 +24069,9 @@ ul.pf-v6-c-list {
|
|
|
23900
24069
|
border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
|
|
23901
24070
|
border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
|
|
23902
24071
|
}
|
|
24072
|
+
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
|
|
24073
|
+
--pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
|
|
24074
|
+
}
|
|
23903
24075
|
.pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
|
|
23904
24076
|
display: var(--pf-v6-c-pagination__page-menu--Display);
|
|
23905
24077
|
}
|
|
@@ -23917,6 +24089,9 @@ ul.pf-v6-c-list {
|
|
|
23917
24089
|
background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
|
|
23918
24090
|
box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
|
|
23919
24091
|
}
|
|
24092
|
+
:where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
|
|
24093
|
+
--pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
|
|
24094
|
+
}
|
|
23920
24095
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
|
|
23921
24096
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
|
|
23922
24097
|
.pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
|
|
@@ -23971,15 +24146,46 @@ ul.pf-v6-c-list {
|
|
|
23971
24146
|
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
|
|
23972
24147
|
--pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
|
|
23973
24148
|
--pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
|
|
23974
|
-
position: sticky;
|
|
23975
24149
|
inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
|
|
24150
|
+
background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
|
|
24151
|
+
box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
|
|
24152
|
+
}
|
|
24153
|
+
.pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
|
|
24154
|
+
position: sticky;
|
|
23976
24155
|
z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
|
|
23977
24156
|
padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
|
|
23978
24157
|
padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
|
|
23979
24158
|
padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
|
|
23980
24159
|
padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
|
|
23981
|
-
|
|
23982
|
-
|
|
24160
|
+
}
|
|
24161
|
+
.pf-v6-c-pagination.pf-m-sticky-base {
|
|
24162
|
+
inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
|
|
24163
|
+
border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
|
|
24164
|
+
}
|
|
24165
|
+
.pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
|
|
24166
|
+
--pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
|
|
24167
|
+
--pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
|
|
24168
|
+
}
|
|
24169
|
+
.pf-v6-c-pagination.pf-m-sticky-base::before {
|
|
24170
|
+
position: absolute;
|
|
24171
|
+
inset: 0;
|
|
24172
|
+
z-index: -1;
|
|
24173
|
+
content: "";
|
|
24174
|
+
background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
|
|
24175
|
+
border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
|
|
24176
|
+
box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
|
|
24177
|
+
opacity: 0;
|
|
24178
|
+
transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
|
|
24179
|
+
transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
|
|
24180
|
+
transition-property: opacity;
|
|
24181
|
+
}
|
|
24182
|
+
.pf-v6-c-pagination.pf-m-sticky-stuck {
|
|
24183
|
+
--pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
|
|
24184
|
+
--pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
|
|
24185
|
+
--pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
|
|
24186
|
+
}
|
|
24187
|
+
.pf-v6-c-pagination.pf-m-sticky-stuck::before {
|
|
24188
|
+
opacity: 1;
|
|
23983
24189
|
}
|
|
23984
24190
|
.pf-v6-c-pagination.pf-m-page-insets {
|
|
23985
24191
|
--pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);
|