Initial Drupal 11 with DDEV setup
This commit is contained in:
gluebox
101
web/core/misc/dialog/off-canvas/css/base.css
Normal file
101
web/core/misc/dialog/off-canvas/css/base.css
Normal file
@ -0,0 +1,101 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-background-color-light: #666;
|
||||
--off-canvas-background-color-medium: #444;
|
||||
--off-canvas-background-color-dark: #333;
|
||||
--off-canvas-background-color: var(--off-canvas-background-color-medium);
|
||||
--off-canvas-padding: 1.25rem;
|
||||
--off-canvas-text-color: #e5e5e5;
|
||||
--off-canvas-link-color: #85bef4;
|
||||
--off-canvas-border-color: #666;
|
||||
--off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
--off-canvas-vertical-spacing-unit: 0.5rem;
|
||||
--off-canvas-focus-outline-width: 2px;
|
||||
--off-canvas-focus-outline-color: #fff;
|
||||
|
||||
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
|
||||
color: var(--off-canvas-text-color);
|
||||
background-color: var(--off-canvas-background-color);
|
||||
font-family: var(--off-canvas-font-family);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper *:focus {
|
||||
outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper a,
|
||||
#drupal-off-canvas-wrapper .link {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper hr {
|
||||
height: 1px;
|
||||
background: var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h1,
|
||||
#drupal-off-canvas-wrapper .heading-a {
|
||||
font-size: 1.4375rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h2,
|
||||
#drupal-off-canvas-wrapper .heading-b {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1.1875rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h3,
|
||||
#drupal-off-canvas-wrapper .heading-c {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h4,
|
||||
#drupal-off-canvas-wrapper .heading-d {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h5,
|
||||
#drupal-off-canvas-wrapper .heading-e,
|
||||
#drupal-off-canvas-wrapper h6,
|
||||
#drupal-off-canvas-wrapper .heading-f {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper p {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .links li {
|
||||
margin: calc(var(--off-canvas-vertical-spacing-unit) / 2) 0;
|
||||
}
|
||||
93
web/core/misc/dialog/off-canvas/css/base.pcss.css
Normal file
93
web/core/misc/dialog/off-canvas/css/base.pcss.css
Normal file
@ -0,0 +1,93 @@
|
||||
/**
|
||||
* @file
|
||||
* Set base styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-background-color-light: #666;
|
||||
--off-canvas-background-color-medium: #444;
|
||||
--off-canvas-background-color-dark: #333;
|
||||
--off-canvas-background-color: var(--off-canvas-background-color-medium);
|
||||
--off-canvas-padding: 20px;
|
||||
--off-canvas-text-color: #e5e5e5;
|
||||
--off-canvas-link-color: #85bef4;
|
||||
--off-canvas-border-color: #666;
|
||||
--off-canvas-font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
|
||||
--off-canvas-vertical-spacing-unit: 8px;
|
||||
--off-canvas-focus-outline-width: 2px;
|
||||
--off-canvas-focus-outline-color: #fff;
|
||||
|
||||
padding: 0 var(--off-canvas-padding) var(--off-canvas-padding);
|
||||
color: var(--off-canvas-text-color);
|
||||
background-color: var(--off-canvas-background-color);
|
||||
font-family: var(--off-canvas-font-family);
|
||||
|
||||
& *:focus {
|
||||
outline: solid var(--off-canvas-focus-outline-width) var(--off-canvas-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
& a,
|
||||
& .link {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
|
||||
& hr {
|
||||
height: 1px;
|
||||
background: var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
& h1,
|
||||
& .heading-a {
|
||||
font-size: 23px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
& h2,
|
||||
& .heading-b {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
& h3,
|
||||
& .heading-c {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
& h4,
|
||||
& .heading-d {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
& h5,
|
||||
& .heading-e,
|
||||
& h6,
|
||||
& .heading-f {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& .links {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& li {
|
||||
margin: calc(var(--off-canvas-vertical-spacing-unit) / 2) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
110
web/core/misc/dialog/off-canvas/css/button.css
Normal file
110
web/core/misc/dialog/off-canvas/css/button.css
Normal file
@ -0,0 +1,110 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-button-background-color: #777;
|
||||
--off-canvas-button-background-color-hover: #999;
|
||||
--off-canvas-button-text-color: #f5f5f5;
|
||||
--off-canvas-button-text-color-hover: #fff;
|
||||
--off-canvas-button-font-size: 0.875rem;
|
||||
--off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 1.25rem;
|
||||
--off-canvas-button-border-color: transparent;
|
||||
--off-canvas-button-border-radius: 20em;
|
||||
--off-canvas-button-font-weight: 600;
|
||||
--off-canvas-primary-button-background-color: #277abd;
|
||||
--off-canvas-primary-button-background-color-hover: #236aaf;
|
||||
--off-canvas-primary-button-text-color: #fff;
|
||||
--off-canvas-primary-button-text-color-hover: #fff;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
margin: 0 0 0.625rem;
|
||||
padding: var(--off-canvas-button-padding);
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: var(--off-canvas-button-text-color);
|
||||
border: solid 1px var(--off-canvas-button-border-color);
|
||||
border-radius: var(--off-canvas-button-border-radius);
|
||||
background: var(--off-canvas-button-background-color);
|
||||
font-family: inherit;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
font-weight: var(--off-canvas-button-font-weight);
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button:hover,
|
||||
#drupal-off-canvas-wrapper .button:active {
|
||||
z-index: 10;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-button-text-color-hover);
|
||||
background-color: var(--off-canvas-button-background-color-hover);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button:disabled,
|
||||
#drupal-off-canvas-wrapper .button:disabled:active,
|
||||
#drupal-off-canvas-wrapper .button.is-disabled,
|
||||
#drupal-off-canvas-wrapper .button.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--primary {
|
||||
margin-top: 0.9375rem;
|
||||
color: var(--off-canvas-primary-button-text-color);
|
||||
background: var(--off-canvas-primary-button-background-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--primary:hover,
|
||||
#drupal-off-canvas-wrapper .button--primary:active {
|
||||
color: var(--off-canvas-primary-button-text-color-hover);
|
||||
background: var(--off-canvas-primary-button-background-color-hover);
|
||||
}
|
||||
#drupal-off-canvas-wrapper button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: var(--off-canvas-link-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
}
|
||||
#drupal-off-canvas-wrapper button.link:hover,
|
||||
#drupal-off-canvas-wrapper button.link:focus {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger:hover,
|
||||
#drupal-off-canvas-wrapper .button--danger:focus,
|
||||
#drupal-off-canvas-wrapper .button--danger:active {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .button--danger:disabled,
|
||||
#drupal-off-canvas-wrapper .button--danger.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
.no-touchevents #drupal-off-canvas-wrapper .button--small {
|
||||
padding: 2px 1em;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
111
web/core/misc/dialog/off-canvas/css/button.pcss.css
Normal file
111
web/core/misc/dialog/off-canvas/css/button.pcss.css
Normal file
@ -0,0 +1,111 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for buttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-button-background-color: #777;
|
||||
--off-canvas-button-background-color-hover: #999;
|
||||
--off-canvas-button-text-color: #f5f5f5;
|
||||
--off-canvas-button-text-color-hover: #fff;
|
||||
--off-canvas-button-font-size: 14px;
|
||||
--off-canvas-button-padding: calc(var(--off-canvas-vertical-spacing-unit) / 2) 20px;
|
||||
--off-canvas-button-border-color: transparent;
|
||||
--off-canvas-button-border-radius: 20em;
|
||||
--off-canvas-button-font-weight: 600;
|
||||
--off-canvas-primary-button-background-color: #277abd;
|
||||
--off-canvas-primary-button-background-color-hover: #236aaf;
|
||||
--off-canvas-primary-button-text-color: #fff;
|
||||
--off-canvas-primary-button-text-color-hover: #fff;
|
||||
|
||||
& .button {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
margin: 0 0 10px;
|
||||
padding: var(--off-canvas-button-padding);
|
||||
cursor: pointer;
|
||||
transition: background 0.5s ease;
|
||||
text-align: center;
|
||||
color: var(--off-canvas-button-text-color);
|
||||
border: solid 1px var(--off-canvas-button-border-color);
|
||||
border-radius: var(--off-canvas-button-border-radius);
|
||||
background: var(--off-canvas-button-background-color);
|
||||
font-family: inherit;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
font-weight: var(--off-canvas-button-font-weight);
|
||||
line-height: normal;
|
||||
appearance: none;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
z-index: 10;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-button-text-color-hover);
|
||||
background-color: var(--off-canvas-button-background-color-hover);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:active,
|
||||
&.is-disabled,
|
||||
&.is-disabled:active {
|
||||
cursor: default;
|
||||
color: #5c5c5c;
|
||||
background: #555;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
& .button--primary {
|
||||
margin-top: 15px;
|
||||
color: var(--off-canvas-primary-button-text-color);
|
||||
background: var(--off-canvas-primary-button-background-color);
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
color: var(--off-canvas-primary-button-text-color-hover);
|
||||
background: var(--off-canvas-primary-button-background-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
& button.link {
|
||||
display: inline;
|
||||
transition: color 0.5s ease;
|
||||
color: var(--off-canvas-link-color);
|
||||
border: 0;
|
||||
background: transparent;
|
||||
font-size: var(--off-canvas-button-font-size);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-link-color);
|
||||
}
|
||||
}
|
||||
|
||||
& .button--danger {
|
||||
text-decoration: none;
|
||||
color: #c72100;
|
||||
border-radius: 0;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: none;
|
||||
color: #ff2a00;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.is-disabled {
|
||||
cursor: default;
|
||||
color: #737373;
|
||||
}
|
||||
}
|
||||
|
||||
.no-touchevents & .button--small {
|
||||
padding: 2px 1em;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
69
web/core/misc/dialog/off-canvas/css/details.css
Normal file
69
web/core/misc/dialog/off-canvas/css/details.css
Normal file
@ -0,0 +1,69 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-details-border-width: 0;
|
||||
--off-canvas-details-border-color: none;
|
||||
--off-canvas-details-background-color: #474747;
|
||||
--off-canvas-details-text-color: #ddd;
|
||||
--off-canvas-details-summary-border: none;
|
||||
--off-canvas-details-summary-padding: 0.625rem 1.25rem;
|
||||
--off-canvas-details-summary-font-size: 0.875rem;
|
||||
--off-canvas-details-summary-background-color: #333;
|
||||
--off-canvas-details-summary-background-color-hover: #222;
|
||||
--off-canvas-details-summary-text-color: #eee;
|
||||
--off-canvas-details-summary-text-color-hover: #fff;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper details {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
|
||||
padding: 0 var(--off-canvas-padding);
|
||||
color: var(--off-canvas-details-text-color);
|
||||
border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
|
||||
background: var(--off-canvas-details-background-color);
|
||||
}
|
||||
|
||||
:is(#drupal-off-canvas-wrapper details) + details {
|
||||
margin-top: calc(-1 * var(--off-canvas-details-border-width));
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-details-summary-padding);
|
||||
color: var(--off-canvas-details-summary-text-color);
|
||||
border: var(--off-canvas-details-summary-border);
|
||||
background-color: var(--off-canvas-details-summary-background-color);
|
||||
font-size: var(--off-canvas-details-summary-font-size);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
background-color: var(--off-canvas-details-summary-background-color-hover);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary:focus {
|
||||
outline-offset: -4px; /* Ensure focus doesn't get cut off. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary a {
|
||||
color: var(--off-canvas-details-text-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper summary a:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .details-wrapper {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
62
web/core/misc/dialog/off-canvas/css/details.pcss.css
Normal file
62
web/core/misc/dialog/off-canvas/css/details.pcss.css
Normal file
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for summary and details in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-details-border-width: 0;
|
||||
--off-canvas-details-border-color: none;
|
||||
--off-canvas-details-background-color: #474747;
|
||||
--off-canvas-details-text-color: #ddd;
|
||||
--off-canvas-details-summary-border: none;
|
||||
--off-canvas-details-summary-padding: 10px 20px;
|
||||
--off-canvas-details-summary-font-size: 14px;
|
||||
--off-canvas-details-summary-background-color: #333;
|
||||
--off-canvas-details-summary-background-color-hover: #222;
|
||||
--off-canvas-details-summary-text-color: #eee;
|
||||
--off-canvas-details-summary-text-color-hover: #fff;
|
||||
|
||||
& details {
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding)); /* Cancel out the padding of the parent. */
|
||||
padding: 0 var(--off-canvas-padding);
|
||||
color: var(--off-canvas-details-text-color);
|
||||
border: solid var(--off-canvas-details-border-color) var(--off-canvas-details-border-width);
|
||||
background: var(--off-canvas-details-background-color);
|
||||
|
||||
& + details {
|
||||
margin-top: calc(-1 * var(--off-canvas-details-border-width));
|
||||
}
|
||||
}
|
||||
|
||||
& summary {
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-details-summary-padding);
|
||||
color: var(--off-canvas-details-summary-text-color);
|
||||
border: var(--off-canvas-details-summary-border);
|
||||
background-color: var(--off-canvas-details-summary-background-color);
|
||||
font-size: var(--off-canvas-details-summary-font-size);
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
background-color: var(--off-canvas-details-summary-background-color-hover);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-offset: -4px; /* Ensure focus doesn't get cut off. */
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--off-canvas-details-text-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-details-summary-text-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .details-wrapper {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
}
|
||||
157
web/core/misc/dialog/off-canvas/css/dropbutton.css
Normal file
157
web/core/misc/dialog/off-canvas/css/dropbutton.css
Normal file
@ -0,0 +1,157 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-dropbutton-height: 1.5rem;
|
||||
--off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
|
||||
--off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
|
||||
--off-canvas-dropbutton-border-color: transparent;
|
||||
--off-canvas-dropbutton-border-width: 1px;
|
||||
--off-canvas-dropbutton-border-radius: 2px;
|
||||
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
|
||||
--off-canvas-dropbutton-font-size: 0.75rem;
|
||||
--off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
--off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper {
|
||||
margin-block: var(--off-canvas-vertical-spacing-unit);
|
||||
|
||||
/*
|
||||
* Styles for when the dropbutton is expanded.
|
||||
*/
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-widget {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.open .dropbutton-toggle button::before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
/*
|
||||
* Styles for single link variant of dropbutton.
|
||||
*/
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-widget {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child {
|
||||
border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action:first-child:dir(rtl) {
|
||||
border: solid 1px var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-wrapper.dropbutton-single .dropbutton-action a {
|
||||
justify-content: center;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-widget {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding-inline-end: var(--off-canvas-dropbutton-height);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton {
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
font-size: var(--off-canvas-dropbutton-font-size);
|
||||
}
|
||||
/* This is the button that expands/collapses the secondary options. */
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--off-canvas-dropbutton-height);
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-color: var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button::before {
|
||||
display: block;
|
||||
width: 0.375rem;
|
||||
height: 0.375rem;
|
||||
content: "";
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
border-right: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-toggle button:dir(rtl) {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
/* This is the first <li> element in the list of actions. */
|
||||
#drupal-off-canvas-wrapper .dropbutton-action:first-child {
|
||||
margin-inline-end: 2px;
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action:first-child:dir(rtl) {
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--off-canvas-dropbutton-height);
|
||||
margin-bottom: -2px;
|
||||
padding: 0 0.5625rem;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .dropbutton-action a:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
/* These are the <li> elements other than the first. */
|
||||
#drupal-off-canvas-wrapper .secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + var(--off-canvas-dropbutton-height));
|
||||
margin-top: var(--off-canvas-dropbutton-border-width);
|
||||
border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
background-color: var(--off-canvas-dropbutton-primary-background-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .secondary-action:last-child {
|
||||
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
#drupal-off-canvas-wrapper .secondary-action a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color-hover);
|
||||
background-color: var(--off-canvas-dropbutton-secondary-background-color);
|
||||
}
|
||||
179
web/core/misc/dialog/off-canvas/css/dropbutton.pcss.css
Normal file
179
web/core/misc/dialog/off-canvas/css/dropbutton.pcss.css
Normal file
@ -0,0 +1,179 @@
|
||||
/**
|
||||
* @file
|
||||
* Styles for dropbuttons in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-dropbutton-height: 24px;
|
||||
--off-canvas-dropbutton-primary-background-color: var(--off-canvas-button-background-color);
|
||||
--off-canvas-dropbutton-secondary-background-color: var(--off-canvas-button-hover-background-color);
|
||||
--off-canvas-dropbutton-border-color: transparent;
|
||||
--off-canvas-dropbutton-border-width: 1px;
|
||||
--off-canvas-dropbutton-border-radius: 2px;
|
||||
--off-canvas-dropbutton-focus-outline-color: var(--off-canvas-focus-outline-color);
|
||||
--off-canvas-dropbutton-font-size: 12px;
|
||||
--off-canvas-dropbutton-text-color: var(--off-canvas-button-text-color); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
--off-canvas-dropbutton-text-color-hover: var(--off-canvas-button-text-color-hover); /* Minimum 4.5:1 contrast ratio against --off-canvas-dropbutton-primary-background-color and --off-canvas-dropbutton-secondary-background-color. */
|
||||
|
||||
& .dropbutton-wrapper {
|
||||
margin-block: var(--off-canvas-vertical-spacing-unit);
|
||||
|
||||
/*
|
||||
* Styles for when the dropbutton is expanded.
|
||||
*/
|
||||
&.open {
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
|
||||
& .secondary-action {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
& .dropbutton-widget {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0 0;
|
||||
}
|
||||
|
||||
& .dropbutton-toggle button::before {
|
||||
transform: translateY(25%) rotate(225deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Styles for single link variant of dropbutton.
|
||||
*/
|
||||
&.dropbutton-single {
|
||||
& .dropbutton-widget {
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
& .dropbutton-action {
|
||||
&:first-child {
|
||||
border-right: solid 1px var(--off-canvas-dropbutton-border-color); /* LTR */
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
|
||||
&:dir(rtl) {
|
||||
border: solid 1px var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .dropbutton-widget {
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding-inline-end: var(--off-canvas-dropbutton-height);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
|
||||
& .dropbutton {
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
margin-block: 0;
|
||||
margin-inline-start: 0;
|
||||
padding-inline-start: 0;
|
||||
list-style: none;
|
||||
font-size: var(--off-canvas-dropbutton-font-size);
|
||||
}
|
||||
|
||||
/* This is the button that expands/collapses the secondary options. */
|
||||
& .dropbutton-toggle {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
& button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--off-canvas-dropbutton-height);
|
||||
height: var(--off-canvas-dropbutton-height);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-color: var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
inset-inline-end: 0;
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
content: "";
|
||||
transform: translateY(-25%) rotate(45deg);
|
||||
border-right: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
border-bottom: solid 2px var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the first <li> element in the list of actions. */
|
||||
& .dropbutton-action {
|
||||
&:first-child {
|
||||
margin-inline-end: 2px;
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: var(--off-canvas-dropbutton-border-radius) 0 0 var(--off-canvas-dropbutton-border-radius); /* LTR */
|
||||
background: var(--off-canvas-dropbutton-primary-background-color);
|
||||
|
||||
&:dir(rtl) {
|
||||
border: solid var(--off-canvas-dropbutton-border-width) var(--off-canvas-dropbutton-border-color);
|
||||
border-radius: 0 var(--off-canvas-dropbutton-border-radius) var(--off-canvas-dropbutton-border-radius) 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: var(--off-canvas-dropbutton-height);
|
||||
margin-bottom: -2px;
|
||||
padding: 0 9px;
|
||||
text-decoration: none;
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px var(--off-canvas-dropbutton-focus-outline-color);
|
||||
outline-offset: -1px; /* Overlap parent container by 1px. */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* These are the <li> elements other than the first. */
|
||||
& .secondary-action {
|
||||
visibility: hidden;
|
||||
width: calc(100% + var(--off-canvas-dropbutton-height));
|
||||
margin-top: var(--off-canvas-dropbutton-border-width);
|
||||
border-right: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
border-left: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
background-color: var(--off-canvas-dropbutton-primary-background-color);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: var(--off-canvas-dropbutton-border-width) solid var(--off-canvas-dropbutton-border-color);
|
||||
}
|
||||
|
||||
& a:hover {
|
||||
color: var(--off-canvas-dropbutton-text-color-hover);
|
||||
background-color: var(--off-canvas-dropbutton-secondary-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
35
web/core/misc/dialog/off-canvas/css/drupal.css
Normal file
35
web/core/misc/dialog/off-canvas/css/drupal.css
Normal file
@ -0,0 +1,35 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Recreate Drupal admin styling that was removed with reset.
|
||||
* @see system.admin.css
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .panel {
|
||||
padding: 0.3125rem 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .panel__description {
|
||||
margin: 0 0 0.1875rem;
|
||||
padding: 2px 0 0.1875rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .compact-link {
|
||||
margin: 0 0 0.625rem 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper small .admin-link::before {
|
||||
content: " [";
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper small .admin-link::after {
|
||||
content: "]";
|
||||
}
|
||||
30
web/core/misc/dialog/off-canvas/css/drupal.pcss.css
Normal file
30
web/core/misc/dialog/off-canvas/css/drupal.pcss.css
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @file
|
||||
* Recreate Drupal admin styling that was removed with reset.
|
||||
* @see system.admin.css
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .panel {
|
||||
padding: 5px 5px 15px;
|
||||
}
|
||||
|
||||
& .panel__description {
|
||||
margin: 0 0 3px;
|
||||
padding: 2px 0 3px 0;
|
||||
}
|
||||
|
||||
& .compact-link {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
& small .admin-link::before {
|
||||
content: " [";
|
||||
}
|
||||
|
||||
& small .admin-link::after {
|
||||
content: "]";
|
||||
}
|
||||
}
|
||||
192
web/core/misc/dialog/off-canvas/css/form.css
Normal file
192
web/core/misc/dialog/off-canvas/css/form.css
Normal file
@ -0,0 +1,192 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
|
||||
--drupal-off-canvas-input-background-color: #fff;
|
||||
--drupal-off-canvas-input-border: solid 1px transparent;
|
||||
--drupal-off-canvas-input-border-radius: 2px;
|
||||
--drupal-off-canvas-input-font-size: 0.875rem;
|
||||
--drupal-off-canvas-input-text-color: #333;
|
||||
--drupal-off-canvas-fieldset-background-color: transparent;
|
||||
--drupal-off-canvas-fieldset-border-width: 1px;
|
||||
--drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper form {
|
||||
padding-block: var(--off-canvas-padding);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper form > *:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ck-content {
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-item:where(:not(fieldset)) {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-items-inline > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-type-boolean {
|
||||
padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .description,
|
||||
#drupal-off-canvas-wrapper .form-item__description {
|
||||
margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-required::after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .fieldset,
|
||||
#drupal-off-canvas-wrapper fieldset {
|
||||
margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
padding: var(--off-canvas-vertical-spacing-unit);
|
||||
border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
|
||||
background-color: var(--drupal-off-canvas-fieldset-background-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper legend,
|
||||
#drupal-off-canvas-wrapper .fieldset__legend {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper :is(.fieldset, fieldset, .draggable-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
|
||||
width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input,
|
||||
#drupal-off-canvas-wrapper textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])),
|
||||
#drupal-off-canvas-wrapper select,
|
||||
#drupal-off-canvas-wrapper textarea {
|
||||
max-width: 100%;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
}
|
||||
|
||||
:is(#drupal-off-canvas-wrapper input[type="checkbox"]) + label,
|
||||
:is(#drupal-off-canvas-wrapper input[type="radio"]) + label {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input[type="file"] {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper input[type="search"] {
|
||||
appearance: none; /* Necessary for Safari. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper select {
|
||||
appearance: none;
|
||||
padding-inline-end: 1.25rem;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23545560'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 5px; /* LTR */
|
||||
background-size: 0.75rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper select:dir(rtl) {
|
||||
background-position: center left 5px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper select {
|
||||
appearance: revert;
|
||||
padding-inline-end: 0;
|
||||
background: revert;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Autocomplete.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .form-autocomplete {
|
||||
padding-inline-end: 2.5rem; /* Room for icon. */
|
||||
background-image: url("data:image/svg+xml,%3csvg width='40' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 1C3.46.827-.188 5.787 1.313 10.068c1.176 4.384 6.993 6.417 10.637 3.7.326-.39.565.276.846.442l3.74 3.739 1.413-1.414-4.35-4.35c2.811-3.468 1.15-9.247-3.062-10.71A7.003 7.003 0 008 1zm0 2c3.242-.123 5.849 3.42 4.777 6.477-.842 3.132-4.994 4.58-7.6 2.65-2.745-1.73-2.9-6.125-.285-8.044A5.006 5.006 0 018 3z' fill='%23868686'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 1px; /* LTR */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-autocomplete.ui-autocomplete-loading {
|
||||
background-image: url(../../../icons/spinner.gif);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .form-autocomplete:dir(rtl) {
|
||||
background-position: center left 1px;
|
||||
}
|
||||
|
||||
/* This is the background <ul> for the autocomplete dropdown. */
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a {
|
||||
display: block;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
cursor: pointer;
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a:focus,
|
||||
#drupal-off-canvas-wrapper .ui-autocomplete a.ui-state-active {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Claro injects a "Loading" autocomplete message that affects the positioning
|
||||
* of the ui-autocomplete dropdown. We remove this to normalize the markup.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .claro-autocomplete__message {
|
||||
display: none;
|
||||
}
|
||||
182
web/core/misc/dialog/off-canvas/css/form.pcss.css
Normal file
182
web/core/misc/dialog/off-canvas/css/form.pcss.css
Normal file
@ -0,0 +1,182 @@
|
||||
/**
|
||||
* @file
|
||||
* Visual styling for forms in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--drupal-off-canvas-input-padding: var(--off-canvas-vertical-spacing-unit);
|
||||
--drupal-off-canvas-input-background-color: #fff;
|
||||
--drupal-off-canvas-input-border: solid 1px transparent;
|
||||
--drupal-off-canvas-input-border-radius: 2px;
|
||||
--drupal-off-canvas-input-font-size: 14px;
|
||||
--drupal-off-canvas-input-text-color: #333;
|
||||
--drupal-off-canvas-fieldset-background-color: transparent;
|
||||
--drupal-off-canvas-fieldset-border-width: 1px;
|
||||
--drupal-off-canvas-fieldset-border-color: var(--off-canvas-border-color);
|
||||
|
||||
& form {
|
||||
padding-block: var(--off-canvas-padding);
|
||||
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& .ck-content {
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
}
|
||||
|
||||
& .form-item:where(:not(fieldset)) {
|
||||
padding: var(--off-canvas-vertical-spacing-unit) 0;
|
||||
}
|
||||
|
||||
& .form-items-inline > * {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .form-type-boolean {
|
||||
padding: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
}
|
||||
|
||||
& .description,
|
||||
& .form-item__description {
|
||||
margin: calc(0.5 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& .form-required::after {
|
||||
content: "*";
|
||||
}
|
||||
|
||||
& .fieldset,
|
||||
& fieldset {
|
||||
margin: calc(2 * var(--off-canvas-vertical-spacing-unit)) 0;
|
||||
padding: var(--off-canvas-vertical-spacing-unit);
|
||||
border: solid var(--drupal-off-canvas-fieldset-border-width) var(--drupal-off-canvas-fieldset-border-color);
|
||||
background-color: var(--drupal-off-canvas-fieldset-background-color);
|
||||
}
|
||||
|
||||
& legend, /* Bartik doesn't apply BEM classes, so we use the element. */
|
||||
& .fieldset__legend {
|
||||
display: contents;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& :is(.fieldset, fieldset, .draggable-table) input:where(:not([type="submit"], [type="checkbox"], [type="radio"])) {
|
||||
width: 100%; /* Prevent text fields from breaking out of tables and fieldsets at narrow widths. */
|
||||
}
|
||||
|
||||
& input,
|
||||
& textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
& input:where(:not([type="submit"], [type="checkbox"], [type="radio"], [type="file"])),
|
||||
& select,
|
||||
& textarea {
|
||||
max-width: 100%;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
}
|
||||
|
||||
& input[type="checkbox"],
|
||||
& input[type="radio"] {
|
||||
& + label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="file"] {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
}
|
||||
|
||||
& input[type="search"] {
|
||||
appearance: none; /* Necessary for Safari. */
|
||||
}
|
||||
|
||||
& select {
|
||||
appearance: none;
|
||||
padding-inline-end: 20px;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
border-radius: var(--drupal-off-canvas-input-border-radius);
|
||||
background-image: url(../../../icons/545560/chevron-down.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 5px; /* LTR */
|
||||
background-size: 12px;
|
||||
|
||||
&:dir(rtl) {
|
||||
background-position: center left 5px;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
appearance: revert;
|
||||
padding-inline-end: 0;
|
||||
background: revert;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Autocomplete.
|
||||
*/
|
||||
& .form-autocomplete {
|
||||
padding-inline-end: 40px; /* Room for icon. */
|
||||
background-image: url(../../../icons/868686/magnifier.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right 1px; /* LTR */
|
||||
|
||||
&.ui-autocomplete-loading {
|
||||
background-image: url(../../../icons/spinner.gif);
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
background-position: center left 1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is the background <ul> for the autocomplete dropdown. */
|
||||
& .ui-autocomplete {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border: var(--drupal-off-canvas-input-border);
|
||||
background-color: var(--drupal-off-canvas-input-background-color);
|
||||
box-shadow: 0 1px 1px 0 var(--off-canvas-background-color); /* Ensure edge is visible if appearing over another form element. */
|
||||
|
||||
& a {
|
||||
display: block;
|
||||
padding: var(--drupal-off-canvas-input-padding);
|
||||
cursor: pointer;
|
||||
color: var(--drupal-off-canvas-input-text-color);
|
||||
font-size: var(--drupal-off-canvas-input-font-size);
|
||||
|
||||
&:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ui-state-active {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Claro injects a "Loading" autocomplete message that affects the positioning
|
||||
* of the ui-autocomplete dropdown. We remove this to normalize the markup.
|
||||
*/
|
||||
& .claro-autocomplete__message {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
125
web/core/misc/dialog/off-canvas/css/messages.css
Normal file
125
web/core/misc/dialog/off-canvas/css/messages.css
Normal file
@ -0,0 +1,125 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for messages in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-messages-icon-size: 1.25rem;
|
||||
--off-canvas-messages-background-color: #f3faef;
|
||||
--off-canvas-messages-text-color-status: #325e1c;
|
||||
--off-canvas-messages-text-color-warning: #734c00;
|
||||
--off-canvas-messages-text-color-error: #a51b00;
|
||||
--off-canvas-messages-icon-status: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2373b355'%3e%3cpath d='M6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707l-8.741 8.736z'/%3e%3c/svg%3e");
|
||||
--off-canvas-messages-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e29700'%3e%3cpath d='M14.66 12.316l-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002v-5zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.239z'/%3e%3c/svg%3e");
|
||||
--off-canvas-messages-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23e32700'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages {
|
||||
position: relative; /* Anchor ::before pseudo-element. */
|
||||
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
|
||||
border: solid 1px transparent;
|
||||
background-color: var(--off-canvas-messages-background-color);
|
||||
|
||||
/* Icon. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: var(--off-canvas-messages-icon-size);
|
||||
height: var(--off-canvas-messages-icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
inset-inline-start: 0.625rem;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .messages::before {
|
||||
background: canvastext;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Some themes (Olivero) insert SVG icon. We use a background icon, so we
|
||||
* need to remove this.
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .messages__icon,
|
||||
#drupal-off-canvas-wrapper .messages__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages__list {
|
||||
margin: 0;
|
||||
padding-inline-start: 1.25rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages abbr {
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--status {
|
||||
color: var(--off-canvas-messages-text-color-status);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--status::before {
|
||||
background-image: var(--off-canvas-messages-icon-status);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .messages--status::before {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-status);
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--warning {
|
||||
color: var(--off-canvas-messages-text-color-warning);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--warning::before {
|
||||
background-image: var(--off-canvas-messages-icon-warning);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .messages--warning::before {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-warning);
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--error {
|
||||
color: var(--off-canvas-messages-text-color-error);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .messages--error::before {
|
||||
background-image: var(--off-canvas-messages-icon-error);
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .messages--error::before {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-error);
|
||||
}
|
||||
}
|
||||
107
web/core/misc/dialog/off-canvas/css/messages.pcss.css
Normal file
107
web/core/misc/dialog/off-canvas/css/messages.pcss.css
Normal file
@ -0,0 +1,107 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for messages in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-messages-icon-size: 20px;
|
||||
--off-canvas-messages-background-color: #f3faef;
|
||||
--off-canvas-messages-text-color-status: #325e1c;
|
||||
--off-canvas-messages-text-color-warning: #734c00;
|
||||
--off-canvas-messages-text-color-error: #a51b00;
|
||||
--off-canvas-messages-icon-status: url(../../../icons/73b355/check.svg);
|
||||
--off-canvas-messages-icon-warning: url(../../../icons/e29700/warning.svg);
|
||||
--off-canvas-messages-icon-error: url(../../../icons/e32700/error.svg);
|
||||
|
||||
& .messages {
|
||||
position: relative; /* Anchor ::before pseudo-element. */
|
||||
margin-top: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding: calc(2 * var(--off-canvas-vertical-spacing-unit));
|
||||
padding-inline-start: calc(2 * var(--off-canvas-messages-icon-size)); /* Room for icon. */
|
||||
border: solid 1px transparent;
|
||||
background-color: var(--off-canvas-messages-background-color);
|
||||
|
||||
/* Icon. */
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: var(--off-canvas-messages-icon-size);
|
||||
height: var(--off-canvas-messages-icon-size);
|
||||
content: "";
|
||||
transform: translateY(-50%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
inset-inline-start: 10px;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Some themes (Olivero) insert SVG icon. We use a background icon, so we
|
||||
* need to remove this.
|
||||
*/
|
||||
& .messages__icon,
|
||||
& .messages__close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .messages__list {
|
||||
margin: 0;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
& .messages abbr {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& .messages--status {
|
||||
color: var(--off-canvas-messages-text-color-status);
|
||||
|
||||
&::before {
|
||||
background-image: var(--off-canvas-messages-icon-status);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-status);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .messages--warning {
|
||||
color: var(--off-canvas-messages-text-color-warning);
|
||||
|
||||
&::before {
|
||||
background-image: var(--off-canvas-messages-icon-warning);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-warning);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .messages--error {
|
||||
color: var(--off-canvas-messages-text-color-error);
|
||||
|
||||
&::before {
|
||||
background-image: var(--off-canvas-messages-icon-error);
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: canvastext;
|
||||
mask-image: var(--off-canvas-messages-icon-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
27
web/core/misc/dialog/off-canvas/css/reset.css
Normal file
27
web/core/misc/dialog/off-canvas/css/reset.css
Normal file
@ -0,0 +1,27 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Reset HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle))::after,
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle))::before {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
20
web/core/misc/dialog/off-canvas/css/reset.pcss.css
Normal file
20
web/core/misc/dialog/off-canvas/css/reset.pcss.css
Normal file
@ -0,0 +1,20 @@
|
||||
/**
|
||||
* @file
|
||||
* Reset HTML elements styles for the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper *:where(:not(svg, svg *, .ck-reset *, [data-drupal-ck-style-fence] *, .ui-resizable-handle)) {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
line-height: 1.4;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
all: revert;
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
44
web/core/misc/dialog/off-canvas/css/table.css
Normal file
44
web/core/misc/dialog/off-canvas/css/table.css
Normal file
@ -0,0 +1,44 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for tables in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-table-cell-padding: 2px;
|
||||
--off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper table {
|
||||
width: calc(100% + 2 * var(--off-canvas-padding));
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper tr {
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td,
|
||||
#drupal-off-canvas-wrapper th {
|
||||
padding: var(--off-canvas-table-cell-padding);
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td:first-child,
|
||||
#drupal-off-canvas-wrapper th:first-child {
|
||||
padding-inline-start: var(--off-canvas-first-cell-padding-start);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td:not(:last-child) td,
|
||||
#drupal-off-canvas-wrapper th:not(:last-child) td {
|
||||
border-bottom: solid 1px var(--off-canvas-border-color);
|
||||
}
|
||||
35
web/core/misc/dialog/off-canvas/css/table.pcss.css
Normal file
35
web/core/misc/dialog/off-canvas/css/table.pcss.css
Normal file
@ -0,0 +1,35 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for tables in the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-table-cell-padding: 2px;
|
||||
--off-canvas-first-cell-padding-start: calc(var(--off-canvas-padding) / 2);
|
||||
|
||||
& table {
|
||||
width: calc(100% + 2 * var(--off-canvas-padding));
|
||||
margin: var(--off-canvas-vertical-spacing-unit) calc(-1 * var(--off-canvas-padding));
|
||||
}
|
||||
|
||||
& tr {
|
||||
border-bottom: 1px solid var(--off-canvas-border-color);
|
||||
}
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: var(--off-canvas-table-cell-padding);
|
||||
text-align: start;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
padding-inline-start: var(--off-canvas-first-cell-padding-start);
|
||||
}
|
||||
|
||||
&:not(:last-child) td {
|
||||
border-bottom: solid 1px var(--off-canvas-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
112
web/core/misc/dialog/off-canvas/css/tabledrag.css
Normal file
112
web/core/misc/dialog/off-canvas/css/tabledrag.css
Normal file
@ -0,0 +1,112 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Table drag styling for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
/* The draggable <tr> element. */
|
||||
|
||||
#drupal-off-canvas-wrapper .draggable:hover,
|
||||
#drupal-off-canvas-wrapper .draggable:focus-within {
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
}
|
||||
|
||||
/* Appears when the row is being dragged. */
|
||||
|
||||
#drupal-off-canvas-wrapper .draggable.drag {
|
||||
cursor: move;
|
||||
background-color: var(--off-canvas-background-color-dark);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
/* We have to horizontally align all descendent nodes including text nodes
|
||||
* that do not have wrapper elements. Since we use flex to do this, we need
|
||||
* try to keep it vertically centered, so we have to give it a minimum height
|
||||
* to match the rest of the table cells. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 3.125rem;
|
||||
gap: var(--off-canvas-table-cell-padding);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper td abbr {
|
||||
margin-inline: 0 0.3125rem;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle::after {
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
content: "";
|
||||
cursor: move;
|
||||
background-color: transparent;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .tabledrag-handle::after {
|
||||
background: linktext;
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cpath fill='%23bebebe' d='M14.904 7.753l-2.373-2.372c-.291-.292-.529-.193-.529.22v1.399h-3v-3h1.398c.414 0 .512-.239.221-.53l-2.371-2.372c-.137-.136-.36-.136-.497 0l-2.372 2.372c-.292.292-.193.53.22.53h1.399v3h-3v-1.369c0-.413-.239-.511-.53-.22l-2.372 2.372c-.136.136-.136.359 0 .494l2.372 2.372c.291.292.53.192.53-.219v-1.43h3v3h-1.4c-.413 0-.511.238-.22.529l2.374 2.373c.137.137.36.137.495 0l2.373-2.373c.29-.291.19-.529-.222-.529h-1.398v-3h3v1.4c0 .412.238.511.529.219l2.373-2.371c.137-.137.137-.359 0-.495z'/%3e%3c/svg%3e");
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make the "row weight" <select> as small as possible. */
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-hide select {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-changed-warning {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 0.625rem;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .indentation {
|
||||
width: 0.3125rem;
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper .draggable td {
|
||||
padding: 0 0.625rem;
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 0.625rem 0;
|
||||
}
|
||||
|
||||
.touchevents #drupal-off-canvas-wrapper a.tabledrag-handle {
|
||||
width: 2.5rem;
|
||||
height: 2.75rem;
|
||||
}
|
||||
102
web/core/misc/dialog/off-canvas/css/tabledrag.pcss.css
Normal file
102
web/core/misc/dialog/off-canvas/css/tabledrag.pcss.css
Normal file
@ -0,0 +1,102 @@
|
||||
/**
|
||||
* @file
|
||||
* Table drag styling for off-canvas dialog.
|
||||
*
|
||||
* @see tabledrag.js
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
/* The draggable <tr> element. */
|
||||
& .draggable {
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--off-canvas-background-color-light);
|
||||
}
|
||||
|
||||
/* Appears when the row is being dragged. */
|
||||
&.drag {
|
||||
cursor: move;
|
||||
background-color: var(--off-canvas-background-color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
& td {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
/* We have to horizontally align all descendent nodes including text nodes
|
||||
* that do not have wrapper elements. Since we use flex to do this, we need
|
||||
* try to keep it vertically centered, so we have to give it a minimum height
|
||||
* to match the rest of the table cells. */
|
||||
&:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
gap: var(--off-canvas-table-cell-padding);
|
||||
}
|
||||
|
||||
& abbr {
|
||||
margin-inline: 0 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .tabledrag-handle {
|
||||
flex-shrink: 0;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
content: "";
|
||||
cursor: move;
|
||||
background-color: transparent;
|
||||
background-image: url(../../../icons/bebebe/move.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background: linktext;
|
||||
mask-image: url(../../../icons/bebebe/move.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Make the "row weight" <select> as small as possible. */
|
||||
& .tabledrag-hide select {
|
||||
all: revert;
|
||||
}
|
||||
|
||||
& .tabledrag-changed-warning {
|
||||
margin-bottom: var(--off-canvas-vertical-spacing-unit);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
& .tabledrag-toggle-weight-wrapper {
|
||||
padding-top: 10px;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
& .indentation {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.touchevents & .draggable td {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.touchevents & .draggable .menu-item__link {
|
||||
display: inline-block;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.touchevents & a.tabledrag-handle {
|
||||
width: 40px;
|
||||
height: 44px;
|
||||
}
|
||||
}
|
||||
51
web/core/misc/dialog/off-canvas/css/throbber.css
Normal file
51
web/core/misc/dialog/off-canvas/css/throbber.css
Normal file
@ -0,0 +1,51 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling of AJAX actions throbber in off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .ajax-progress-throbber {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 0.9375rem;
|
||||
height: 0.9375rem;
|
||||
margin: 0 0.625rem;
|
||||
animation: off-canvas-throbber-spin 1s linear infinite;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--off-canvas-text-color);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .ajax-progress-throbber {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress,
|
||||
#drupal-off-canvas-wrapper .layout-selection .ajax-progress-throbber,
|
||||
#drupal-off-canvas-wrapper .inline-block-list .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
@keyframes off-canvas-throbber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
44
web/core/misc/dialog/off-canvas/css/throbber.pcss.css
Normal file
44
web/core/misc/dialog/off-canvas/css/throbber.pcss.css
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling of AJAX actions throbber in off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .ajax-progress, /* This is the CSS class used in Claro. */
|
||||
& .ajax-progress-throbber {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 0 10px;
|
||||
animation: off-canvas-throbber-spin 1s linear infinite;
|
||||
vertical-align: middle;
|
||||
border: 2px solid var(--off-canvas-text-color);
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& .layout-selection,
|
||||
& .inline-block-list {
|
||||
& .ajax-progress,
|
||||
& .ajax-progress-throbber {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
margin-block: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes off-canvas-throbber-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
104
web/core/misc/dialog/off-canvas/css/titlebar.css
Normal file
104
web/core/misc/dialog/off-canvas/css/titlebar.css
Normal file
@ -0,0 +1,104 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Styling for the titlebar within the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
|
||||
--off-canvas-title-background-color: #2d2d2d;
|
||||
--off-canvas-title-text-color: #fff;
|
||||
--off-canvas-title-font-size: 1rem;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-title-padding) 3.125rem;
|
||||
color: var(--off-canvas-title-text-color);
|
||||
background-color: var(--off-canvas-title-background-color);
|
||||
font-family: var(--off-canvas-title-font-family);
|
||||
font-size: var(--off-canvas-title-font-size);
|
||||
font-weight: bold;
|
||||
|
||||
/* The pencil icon. */
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 1em;
|
||||
display: block;
|
||||
width: 1.25rem;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='%23ffffff' d='M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z'/%3e%3crect fill='%23ffffff' x='5.129' y='3.8' transform='matrix(-.707 -.707 .707 -.707 6.189 20.064)' width='4.243' height='9.899'/%3e%3cpath fill='%23ffffff' d='M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
@media (forced-colors: active) {
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar::before {
|
||||
background-color: canvastext;
|
||||
}
|
||||
}
|
||||
|
||||
/* Close button. */
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline: auto 0.625rem;
|
||||
overflow: hidden;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
text-indent: -624.9375rem;
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* The plus icon. */
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::before,
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::before {
|
||||
transform: translate(-50%, 50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close::after {
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
|
||||
#drupal-off-canvas-wrapper .ui-dialog-titlebar-close .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
91
web/core/misc/dialog/off-canvas/css/titlebar.pcss.css
Normal file
91
web/core/misc/dialog/off-canvas/css/titlebar.pcss.css
Normal file
@ -0,0 +1,91 @@
|
||||
/**
|
||||
* @file
|
||||
* Styling for the titlebar within the off-canvas dialog.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-title-padding: calc(3 * var(--off-canvas-vertical-spacing-unit));
|
||||
--off-canvas-title-background-color: #2d2d2d;
|
||||
--off-canvas-title-text-color: #fff;
|
||||
--off-canvas-title-font-size: 16px;
|
||||
|
||||
& .ui-dialog-titlebar {
|
||||
position: relative;
|
||||
margin: 0 calc(-1 * var(--off-canvas-padding));
|
||||
padding: var(--off-canvas-title-padding) 50px;
|
||||
color: var(--off-canvas-title-text-color);
|
||||
background-color: var(--off-canvas-title-background-color);
|
||||
font-family: var(--off-canvas-title-font-family);
|
||||
font-size: var(--off-canvas-title-font-size);
|
||||
font-weight: bold;
|
||||
|
||||
/* The pencil icon. */
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 1em;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: currentColor;
|
||||
mask-image: url(../../../icons/ffffff/pencil.svg);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
|
||||
@media (forced-colors: active) {
|
||||
background-color: canvastext;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Close button. */
|
||||
& .ui-dialog-titlebar-close {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline: auto 10px;
|
||||
overflow: hidden;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
transform: translateY(-50%);
|
||||
text-indent: -9999px;
|
||||
color: inherit;
|
||||
border: 1px solid transparent;
|
||||
background-color: transparent;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
outline: solid 2px currentColor;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* The plus icon. */
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1px);
|
||||
left: 50%;
|
||||
width: 50%;
|
||||
height: 0;
|
||||
content: "";
|
||||
border-top: solid 2px currentColor;
|
||||
}
|
||||
|
||||
&::before {
|
||||
transform: translate(-50%, 50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
/* Hide the default jQuery UI dialog close button. */
|
||||
& .ui-icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
38
web/core/misc/dialog/off-canvas/css/utility.css
Normal file
38
web/core/misc/dialog/off-canvas/css/utility.css
Normal file
@ -0,0 +1,38 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Re-create utility styles for off-canvas dialog that are removed in the reset.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .visually-hidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .visually-hidden.focusable:is(:active, :focus) {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
#drupal-off-canvas-wrapper .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
33
web/core/misc/dialog/off-canvas/css/utility.pcss.css
Normal file
33
web/core/misc/dialog/off-canvas/css/utility.pcss.css
Normal file
@ -0,0 +1,33 @@
|
||||
/**
|
||||
* @file
|
||||
* Re-create utility styles for off-canvas dialog that are removed in the reset.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
|
||||
#drupal-off-canvas-wrapper {
|
||||
& .hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .visually-hidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
word-wrap: normal;
|
||||
|
||||
&.focusable:is(:active, :focus) {
|
||||
position: static !important;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
& .invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
52
web/core/misc/dialog/off-canvas/css/wrapper.css
Normal file
52
web/core/misc/dialog/off-canvas/css/wrapper.css
Normal file
@ -0,0 +1,52 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog wrapper.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-wrapper-box-shadow: 0 0 0.25rem 2px rgb(0, 0, 0, 0.3);
|
||||
--off-canvas-wrapper-border-color: #2d2d2d;
|
||||
--off-canvas-wrapper-border-width: 1px;
|
||||
|
||||
z-index: 501; /* Layer the dialog just under the toolbar. */
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
|
||||
box-shadow: var(--off-canvas-wrapper-box-shadow);
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog to be 100% width at the same breakpoint the
|
||||
* dialog system uses to expand dialog widths.
|
||||
*/
|
||||
}
|
||||
@media (max-width: 48rem) {
|
||||
#drupal-off-canvas-wrapper {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
/* When off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
@media (max-width: 48rem) {
|
||||
body.js-off-canvas-dialog-open {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
/* This is a page level content wrapper that shrinks when off-canvas is open. */
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition:
|
||||
padding-right 0.7s ease,
|
||||
padding-left 0.7s ease,
|
||||
padding-top 0.3s ease;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
45
web/core/misc/dialog/off-canvas/css/wrapper.pcss.css
Normal file
45
web/core/misc/dialog/off-canvas/css/wrapper.pcss.css
Normal file
@ -0,0 +1,45 @@
|
||||
/**
|
||||
* @file
|
||||
* CSS for off-canvas dialog wrapper.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
#drupal-off-canvas-wrapper {
|
||||
--off-canvas-wrapper-box-shadow: 0 0 4px 2px rgb(0, 0, 0, 0.3);
|
||||
--off-canvas-wrapper-border-color: #2d2d2d;
|
||||
--off-canvas-wrapper-border-width: 1px;
|
||||
|
||||
z-index: 501; /* Layer the dialog just under the toolbar. */
|
||||
overflow: auto;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
border-inline-start: solid var(--off-canvas-wrapper-border-width) var(--off-canvas-wrapper-border-color);
|
||||
box-shadow: var(--off-canvas-wrapper-box-shadow);
|
||||
|
||||
/*
|
||||
* Force the off-canvas dialog to be 100% width at the same breakpoint the
|
||||
* dialog system uses to expand dialog widths.
|
||||
*/
|
||||
@media (max-width: 768px) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* When off-canvas dialog is at 100% width stop the body from scrolling */
|
||||
body.js-off-canvas-dialog-open {
|
||||
@media (max-width: 768px) {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
/* This is a page level content wrapper that shrinks when off-canvas is open. */
|
||||
.dialog-off-canvas-main-canvas {
|
||||
transition:
|
||||
padding-right 0.7s ease,
|
||||
padding-left 0.7s ease,
|
||||
padding-top 0.3s ease;
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user