Unverified Commit 2fccc04d authored by alexpott's avatar alexpott
Browse files

Issue #2958588 by cainaru, lauriii, DamienMcKenna, longwave, galactus86,...

Issue #2958588 by cainaru, lauriii, DamienMcKenna, longwave, galactus86, bkosborne, pawandubey, clayfreeman, doublealpha, Blackstallion, tim.plunkett, justcaldwell, kpaxman, mark_fullmer: Off-canvas style resets are overriding styles (especially SVGs) resulting in display issues
parent 7e922b6d
......@@ -2,3 +2,9 @@ themes/claro/**/*.css
!themes/claro/**/*.pcss.css
themes/olivero/**/*.css
!themes/olivero/**/*.pcss.css
misc/dialog/off-canvas.reset.css
misc/dialog/off-canvas.base.css
themes/stable/css/core/dialog/off-canvas.reset.css
themes/stable/css/core/dialog/off-canvas.base.css
themes/stable9/css/core/dialog/off-canvas.reset.css
themes/stable9/css/core/dialog/off-canvas.base.css
/*
* 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.
*/
/* Set some global attributes. */
#drupal-off-canvas *,
#drupal-off-canvas *:not(div) {
#drupal-off-canvas {
color: #ddd;
background: #444;
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
}
/**
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
* data, svg, map and math.
*
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
*/
#drupal-off-canvas span,
#drupal-off-canvas applet,
#drupal-off-canvas object,
#drupal-off-canvas iframe,
#drupal-off-canvas h1,
#drupal-off-canvas h2,
#drupal-off-canvas h3,
#drupal-off-canvas h4,
#drupal-off-canvas h5,
#drupal-off-canvas h6,
#drupal-off-canvas p,
#drupal-off-canvas blockquote,
#drupal-off-canvas pre,
#drupal-off-canvas a,
#drupal-off-canvas abbr,
#drupal-off-canvas acronym,
#drupal-off-canvas address,
#drupal-off-canvas big,
#drupal-off-canvas button,
#drupal-off-canvas cite,
#drupal-off-canvas code,
#drupal-off-canvas del,
#drupal-off-canvas dfn,
#drupal-off-canvas em,
#drupal-off-canvas img,
#drupal-off-canvas ins,
#drupal-off-canvas kbd,
#drupal-off-canvas q,
#drupal-off-canvas s,
#drupal-off-canvas samp,
#drupal-off-canvas small,
#drupal-off-canvas strike,
#drupal-off-canvas strong,
#drupal-off-canvas sub,
#drupal-off-canvas sup,
#drupal-off-canvas tt,
#drupal-off-canvas var,
#drupal-off-canvas b,
#drupal-off-canvas u,
#drupal-off-canvas i,
#drupal-off-canvas center,
#drupal-off-canvas dl,
#drupal-off-canvas dt,
#drupal-off-canvas dd,
#drupal-off-canvas ol,
#drupal-off-canvas ul,
#drupal-off-canvas li,
#drupal-off-canvas fieldset,
#drupal-off-canvas form,
#drupal-off-canvas label,
#drupal-off-canvas legend,
#drupal-off-canvas table,
#drupal-off-canvas caption,
#drupal-off-canvas tbody,
#drupal-off-canvas tfoot,
#drupal-off-canvas thead,
#drupal-off-canvas tr,
#drupal-off-canvas th,
#drupal-off-canvas td,
#drupal-off-canvas article,
#drupal-off-canvas aside,
#drupal-off-canvas canvas,
#drupal-off-canvas details,
#drupal-off-canvas embed,
#drupal-off-canvas figure,
#drupal-off-canvas figcaption,
#drupal-off-canvas footer,
#drupal-off-canvas header,
#drupal-off-canvas hgroup,
#drupal-off-canvas main,
#drupal-off-canvas menu,
#drupal-off-canvas meter,
#drupal-off-canvas nav,
#drupal-off-canvas output,
#drupal-off-canvas progress,
#drupal-off-canvas ruby,
#drupal-off-canvas section,
#drupal-off-canvas summary,
#drupal-off-canvas time,
#drupal-off-canvas mark,
#drupal-off-canvas audio,
#drupal-off-canvas video,
#drupal-off-canvas input,
#drupal-off-canvas select,
#drupal-off-canvas textarea {
color: inherit;
background: inherit;
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
}
/* Generic elements. */
#drupal-off-canvas a,
#drupal-off-canvas .link {
cursor: pointer;
transition: color 0.5s ease;
text-decoration: none;
color: #85bef4;
......@@ -29,14 +134,17 @@
#drupal-off-canvas .link:hover {
text-decoration: underline;
}
#drupal-off-canvas hr {
height: 1px;
background: #ccc;
}
#drupal-off-canvas summary,
#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
font-weight: bold;
}
#drupal-off-canvas h1,
#drupal-off-canvas .heading-a {
display: block;
......@@ -44,87 +152,105 @@
font-weight: bold;
line-height: 1.875em;
}
#drupal-off-canvas h2,
#drupal-off-canvas .heading-b {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.385em;
font-weight: bold;
}
#drupal-off-canvas h3,
#drupal-off-canvas .heading-c {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.231em;
font-weight: bold;
}
#drupal-off-canvas h4,
#drupal-off-canvas .heading-d {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.154em;
font-weight: bold;
}
#drupal-off-canvas h5,
#drupal-off-canvas .heading-e {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.077em;
font-weight: bold;
}
#drupal-off-canvas h6,
#drupal-off-canvas .heading-f {
display: block;
margin: 10px 0;
margin: 0.625rem 0;
font-size: 1.077em;
font-weight: bold;
}
#drupal-off-canvas p {
margin: 1em 0;
}
#drupal-off-canvas dl {
margin: 0 0 20px;
margin: 0 0 1.25rem;
}
#drupal-off-canvas dl dd,
#drupal-off-canvas dl dl {
margin-bottom: 10px;
margin-left: 20px; /* LTR */
margin-bottom: 0.625rem;
margin-left: 1.25rem; /* LTR */
}
[dir="rtl"] #drupal-off-canvas dl dd,
[dir="rtl"] #drupal-off-canvas dl dl {
margin-right: 20px;
margin-right: 1.25rem;
}
#drupal-off-canvas blockquote {
margin: 1em 40px;
margin: 1em 2.5rem;
}
#drupal-off-canvas address {
font-style: italic;
}
#drupal-off-canvas u,
#drupal-off-canvas ins {
text-decoration: underline;
}
#drupal-off-canvas s,
#drupal-off-canvas strike,
#drupal-off-canvas del {
text-decoration: line-through;
}
#drupal-off-canvas big {
font-size: larger;
}
#drupal-off-canvas small {
font-size: smaller;
}
#drupal-off-canvas sub {
vertical-align: sub;
font-size: smaller;
line-height: normal;
}
#drupal-off-canvas sup {
vertical-align: super;
font-size: smaller;
line-height: normal;
}
#drupal-off-canvas abbr,
#drupal-off-canvas acronym {
border-bottom: dotted 1px;
......@@ -135,29 +261,48 @@
list-style-type: disc;
list-style-image: none;
}
[dir="rtl"] #drupal-off-canvas .messages__list {
margin-right: 0;
}
#drupal-off-canvas ol {
list-style-type: decimal;
}
#drupal-off-canvas ul li,
#drupal-off-canvas ol li {
display: block;
}
#drupal-off-canvas blockquote,
#drupal-off-canvas code {
margin: 20px 0;
margin: 1.25rem 0;
}
#drupal-off-canvas pre {
margin: 20px 0;
margin: 1.25rem 0;
white-space: pre-wrap;
}
#drupal-off-canvas details {
display: block;
}
#drupal-off-canvas summary {
display: list-item;
}
#drupal-off-canvas select::-ms-expand {
display: block;
}
/* Classes for hidden and visually hidden elements. See hidden.module.css. */
#drupal-off-canvas .hidden {
display: none;
}
#drupal-off-canvas .visually-hidden {
position: absolute !important;
overflow: hidden;
......@@ -166,6 +311,7 @@
height: 1px;
word-wrap: normal;
}
#drupal-off-canvas .visually-hidden.focusable:active,
#drupal-off-canvas .visually-hidden.focusable:focus {
position: static !important;
......@@ -174,58 +320,70 @@
width: auto;
height: auto;
}
#drupal-off-canvas .invisible {
visibility: hidden;
}
/* Some system classes. See system.admin.css. */
#drupal-off-canvas .panel {
padding: 5px 5px 15px;
padding: 0.3125rem 0.3125rem 0.9375rem;
}
#drupal-off-canvas .panel__description {
margin: 0 0 3px;
padding: 2px 0 3px 0;
margin: 0 0 0.1875rem;
padding: 2px 0 0.1875rem 0;
}
#drupal-off-canvas .compact-link {
margin: 0 0 10px 0;
margin: 0 0 0.625rem 0;
}
#drupal-off-canvas small .admin-link:before {
content: " [";
}
#drupal-off-canvas small .admin-link:after {
content: "]";
}
/* Override jQuery UI */
#drupal-off-canvas .ui-widget-content a {
color: #85bef4 !important;
}
/* Message styles */
#drupal-off-canvas .messages {
background: no-repeat 10px 17px;
background: no-repeat 0.625rem 1.0625rem;
}
[dir="rtl"] #drupal-off-canvas .messages {
background-position: right 10px top 17px;
}
#drupal-off-canvas .messages abbr {
color: #444;
}
#drupal-off-canvas .messages--status {
color: #325e1c;
background-color: #f3faef;
background-image: url(../icons/73b355/check.svg);
background-image: 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");
}
#drupal-off-canvas .messages--warning {
color: #734c00;
background-color: #fdf8ed;
background-image: url(../icons/e29700/warning.svg);
background-image: 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");
}
#drupal-off-canvas .messages--error {
color: #a51b00;
background-color: #fcf4f2;
background-image: url(../icons/e32700/error.svg);
background-image: 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 .messages--error div[role="alert"] {
......
/**
* @file
* Set base styles for the off-canvas dialog.
*/
/* Set some global attributes. */
#drupal-off-canvas {
color: #ddd;
background: #444;
}
/**
* All HTML elements that could be used in off-canvas except div, bdo, bdi,
* data, svg, map and math.
*
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element
*/
#drupal-off-canvas {
& span,
& applet,
& object,
& iframe,
& h1,
& h2,
& h3,
& h4,
& h5,
& h6,
& p,
& blockquote,
& pre,
& a,
& abbr,
& acronym,
& address,
& big,
& button,
& cite,
& code,
& del,
& dfn,
& em,
& img,
& ins,
& kbd,
& q,
& s,
& samp,
& small,
& strike,
& strong,
& sub,
& sup,
& tt,
& var,
& b,
& u,
& i,
& center,
& dl,
& dt,
& dd,
& ol,
& ul,
& li,
& fieldset,
& form,
& label,
& legend,
& table,
& caption,
& tbody,
& tfoot,
& thead,
& tr,
& th,
& td,
& article,
& aside,
& canvas,
& details,
& embed,
& figure,
& figcaption,
& footer,
& header,
& hgroup,
& main,
& menu,
& meter,
& nav,
& output,
& progress,
& ruby,
& section,
& summary,
& time,
& mark,
& audio,
& video,
& input,
& select,
& textarea {
color: inherit;
background: inherit;
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
}
}
/* Generic elements. */
#drupal-off-canvas a,
#drupal-off-canvas .link {
cursor: pointer;
transition: color 0.5s ease;
text-decoration: none;
color: #85bef4;
border-bottom: none;
font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
font-size: inherit;
font-weight: normal;
}
#drupal-off-canvas a:focus,
#drupal-off-canvas .link:focus,
#drupal-off-canvas a:hover,
#drupal-off-canvas .link:hover {
text-decoration: underline;
}
#drupal-off-canvas hr {
height: 1px;
background: #ccc;
}
#drupal-off-canvas summary,
#drupal-off-canvas .fieldgroup:not(.form-composite) > legend {
font-weight: bold;
}
#drupal-off-canvas h1,
#drupal-off-canvas .heading-a {
display: block;
font-size: 1.625em;
font-weight: bold;
line-height: 1.875em;
}
#drupal-off-canvas h2,
#drupal-off-canvas .heading-b {
display: block;
margin: 10px 0;
font-size: 1.385em;
font-weight: bold;
}
#drupal-off-canvas h3,
#drupal-off-canvas .heading-c {
display: block;
margin: 10px 0;
font-size: 1.231em;
font-weight: bold;
}
#drupal-off-canvas h4,
#drupal-off-canvas .heading-d {
display: block;
margin: 10px 0;
font-size: 1.154em;
font-weight: bold;
}
#drupal-off-canvas h5,
#drupal-off-canvas .heading-e {
display: block;
margin: 10px 0;
font-size: 1.077em;
font-weight: bold;
}
#drupal-off-canvas h6,
#drupal-off-canvas .heading-f {
display: block;
margin: 10px 0;
font-size: 1.077em;
font-weight: bold;
}
#drupal-off-canvas p {
margin: 1em 0;
}
#drupal-off-canvas dl {
margin: 0 0 20px;
}
#drupal-off-canvas dl dd,
#drupal-off-canvas dl dl {
margin-bottom: 10px;
margin-left: 20px; /* LTR */
}
[dir="rtl"] #drupal-off-canvas dl dd,
[dir="rtl"] #drupal-off-canvas dl dl {
margin-right: 20px;
}
#drupal-off-canvas blockquote {
margin: 1em 40px;
}
#drupal-off-canvas address {
font-style: italic;
}
#drupal-off-canvas u,
#drupal-off-canvas ins {
text-decoration: underline;
}
#drupal-off-canvas s,
#drupal-off-canvas strike,
#drupal-off-canvas del {
text-decoration: line-through;
}
#drupal-off-canvas big {
font-size: larger;
}
#drupal-off-canvas small {
font-size: smaller;
}
#drupal-off-canvas sub {
vertical-align: sub;
font-size: smaller;