| Current Path : /var/www/html/sirius-pallets/web/core/modules/navigation/css/components/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html/sirius-pallets/web/core/modules/navigation/css/components/admin-toolbar.css |
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore csvg cpath */
/**
* @file
* Admin Toolbar styles.
*/
/**
* Sidebar width is attached to the <body> element because it's used as a
* fallback value to the margin-inline-start property of the layout container.
*/
body {
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
}
[data-admin-toolbar="expanded"] body {
--admin-toolbar-sidebar-width: 80vw;
}
@media (min-width: 35rem) {
[data-admin-toolbar="expanded"] body {
--admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
}
}
/* We apply transitions after page load to avoid shifts. */
[data-admin-toolbar-transitions] .admin-toolbar {
transition: transform var(--admin-toolbar-transition);
}
@media (min-width: 64rem) {
[data-admin-toolbar-transitions] .admin-toolbar {
transition: width var(--admin-toolbar-transition);
}
:is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas {
transition: margin-inline-start var(--admin-toolbar-transition);
}
}
/**
* This zero height div has the [data-offset-left] attribute for
* Drupal.displace() to measure. It purposefully does not have any transitions
* because we want Drupal.displace() to measure the width immediately
*/
.admin-toolbar__displace-placeholder {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
@media (min-width: 64rem) {
.admin-toolbar__displace-placeholder {
width: var(--admin-toolbar-sidebar-width);
}
}
/**
* The Admin toolbar component.
*/
.admin-toolbar {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--admin-toolbar-z-index);
display: flex;
flex-direction: column;
height: 100vh;
transform: translateX(-100%);
background-color: var(--admin-toolbar-color-white);
font-family: var(--admin-toolbar-font-family);
inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
}
[dir="rtl"] .admin-toolbar {
right: 0;
transform: translateX(100%);
}
@media (min-width: 64rem) {
[dir="rtl"] .admin-toolbar {
transform: none;
}
}
@media (min-width: 64rem) {
.admin-toolbar ~ .dialog-off-canvas-main-canvas {
margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
}
[dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {
margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
}
}
[data-admin-toolbar="expanded"] .admin-toolbar {
transform: none;
}
@media (min-width: 64rem) {
.admin-toolbar {
transform: none;
}
}
@media only screen and (max-height: 18.75rem) {
.admin-toolbar {
min-height: 20rem;
}
}
.admin-toolbar__back-button {
display: none;
flex-grow: 0;
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
display: flex;
}
@media (min-width: 64rem) {
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
display: none;
}
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
display: none;
}
@media (min-width: 64rem) {
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
display: inline-flex;
}
}
.admin-toolbar__close-button {
flex-grow: 0;
justify-self: end;
margin-inline-start: auto;
}
@media (min-width: 64rem) {
.admin-toolbar__close-button {
display: none;
}
}
.admin-toolbar__expand-button {
display: none;
align-items: center;
justify-content: center;
width: calc(2.25 * var(--admin-toolbar-rem));
height: calc(2.25 * var(--admin-toolbar-rem));
margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
cursor: pointer;
color: var(--admin-toolbar-color-gray-500);
border: 1px solid var(--admin-toolbar-color-gray-300);
border-radius: 50%;
background-color: transparent;
}
.admin-toolbar__expand-button:hover {
color: var(--admin-toolbar-color-blue-700);
}
.admin-toolbar__expand-button::before {
display: block;
flex-shrink: 0;
width: calc(1 * var(--admin-toolbar-rem));
height: calc(1 * var(--admin-toolbar-rem));
content: "";
transition:
opacity var(--admin-toolbar-transition),
transform var(--admin-toolbar-transition);
opacity: 0;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
}
[data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {
opacity: 1;
}
[dir="rtl"] .admin-toolbar__expand-button::before {
transform: rotate(180deg);
}
@media (forced-colors: active) {
.admin-toolbar__expand-button::before {
background: canvastext;
}
}
.admin-toolbar__expand-button[aria-expanded="true"]::before {
transform: rotate(180deg);
}
[dir="rtl"] .admin-toolbar__expand-button[aria-expanded="true"]::before {
transform: none;
}
@media (min-width: 64rem) {
.admin-toolbar__expand-button {
display: flex;
}
}
.admin-toolbar__header {
position: sticky;
z-index: var(--admin-toolbar-z-index-header);
inset-block-start: 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
padding-block-start: var(--admin-toolbar-space-16);
background-color: var(--admin-toolbar-color-white);
}
.admin-toolbar__header + .toolbar-block {
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
}
@media (min-width: 64rem) {
.admin-toolbar__header + .toolbar-block {
margin-block-start: 0;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
display: none;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header {
position: static;
align-items: start;
margin-block-start: revert;
padding-block-start: revert;
padding-block-end: 0;
}
}
.admin-toolbar__item {
flex: 1 0 100%;
}
.admin-toolbar__logo {
display: inline-flex;
overflow: hidden;
border-radius: var(--admin-toolbar-space-8);
}
.admin-toolbar__logo:hover {
background-color: transparent;
}
.admin-toolbar__logo img {
display: block;
max-width: var(--admin-toolbar-space-40);
}
/**
* Scroll wrapper for Mobile.
*/
.admin-toolbar__scroll-wrapper {
display: flex;
overflow-y: auto;
flex-direction: column;
height: 100%;
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, scroll;
background-position-y: 3rem;
background-size:
100% 2.5rem,
100% 1rem;
}
@media (min-width: 64rem) {
.admin-toolbar__scroll-wrapper {
display: contents;
overflow-y: unset;
background: none;
}
}
/**
* Content region.
* Region where most of the content will be printed.
*/
.admin-toolbar__content {
display: grid;
gap: var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
padding-inline: var(--admin-toolbar-space-16);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
@media (min-width: 64rem) {
.admin-toolbar__content {
display: flex;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
flex-grow: 1;
padding-block-start: var(--admin-toolbar-space-16);
background:
linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size:
100% 2.5rem,
100% 2.5rem,
100% 1rem,
100% 1rem;
}
}
/**
* Sticky bottom region.
* Region with less used items and button for collapse.
*/
.admin-toolbar__footer {
z-index: var(--admin-toolbar-z-index-footer);
display: grid;
gap: var(--admin-toolbar-space-4);
margin-block-start: auto;
padding: var(--admin-toolbar-space-16);
border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
.admin-toolbar__footer > .toolbar-block:last-of-type {
margin-block-end: var(--admin-toolbar-space-12);
}
@media (min-width: 64rem) {
.admin-toolbar__footer {
--admin-toolbar-z-index-footer: -1;
position: sticky;
bottom: 0;
background-color: var(--admin-toolbar-color-white);
}
}
/**
* Sidebar toggle.
*/
.admin-toolbar__toggle {
display: none;
}
@media (min-width: 64rem) {
.admin-toolbar__toggle {
display: flex;
}
}
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip),
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:focus + .admin-toolbar__tooltip) {
display: none;
}
/**
* Element is used to overlay the content when Toolbar is expanded in smaller devices.
* It is created in the template templates/navigation.html.twig.
*/
.admin-toolbar-overlay {
position: fixed;
z-index: var(--admin-toolbar-z-index-overlay);
inset-block-start: 0;
inset-inline-start: 0;
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.14);
}
:where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {
display: block;
}
@media (min-width: 64rem) {
.admin-toolbar-overlay {
display: none;
}
}