Unverified Commit e2e6d507 authored by Alex Pott's avatar Alex Pott
Browse files

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

Issue #2958588 by cainaru, lauriii, DamienMcKenna, clayfreeman, longwave, galactus86, bkosborne, pawandubey, doublealpha, Blackstallion, alexpott, tim.plunkett, kpaxman, justcaldwell, mark_fullmer: Off-canvas style resets are overriding styles (especially SVGs) resulting in display issues
parent f4931ef9

core/.stylelintignore

+4 −0
Original line number Diff line number Diff line 
themes/claro/**/*.css

!themes/claro/**/*.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

core/misc/dialog/off-canvas.base.css

+163 −3
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/2815083

 * @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;

}



/**

 * 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;
@@ -29,14 +136,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,6 +154,7 @@ 
  font-weight: bold;

  line-height: 1.875em;

}



#drupal-off-canvas h2,

#drupal-off-canvas .heading-b {

  display: block;
@@ -51,6 +162,7 @@ 
  font-size: 1.385em;

  font-weight: bold;

}



#drupal-off-canvas h3,

#drupal-off-canvas .heading-c {

  display: block;
@@ -58,6 +170,7 @@ 
  font-size: 1.231em;

  font-weight: bold;

}



#drupal-off-canvas h4,

#drupal-off-canvas .heading-d {

  display: block;
@@ -65,6 +178,7 @@ 
  font-size: 1.154em;

  font-weight: bold;

}



#drupal-off-canvas h5,

#drupal-off-canvas .heading-e {

  display: block;
@@ -72,6 +186,7 @@ 
  font-size: 1.077em;

  font-weight: bold;

}



#drupal-off-canvas h6,

#drupal-off-canvas .heading-f {

  display: block;
@@ -79,52 +194,65 @@ 
  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;

  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 +263,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;

}



#drupal-off-canvas pre {

  margin: 20px 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 +313,7 @@ 
  height: 1px;

  word-wrap: normal;

}



#drupal-off-canvas .visually-hidden.focusable:active,

#drupal-off-canvas .visually-hidden.focusable:focus {

  position: static !important;
@@ -174,48 +322,60 @@ 
  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;

}



#drupal-off-canvas .panel__description {

  margin: 0 0 3px;

  padding: 2px 0 3px 0;

}



#drupal-off-canvas .compact-link {

  margin: 0 0 10px 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;

}



[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);

}



#drupal-off-canvas .messages--warning {

  color: #734c00;

  background-color: #fdf8ed;

core/misc/dialog/off-canvas.base.pcss.css

0 → 100644
+340 −0
Original line number Diff line number Diff line 
/**

 * @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;

  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;

  background: transparent;

}



#drupal-off-canvas ul {

  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;

}

#drupal-off-canvas pre {

  margin: 20px 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;

  clip: rect(1px, 1px, 1px, 1px);

  width: 1px;

  height: 1px;

  word-wrap: normal;

}

#drupal-off-canvas .visually-hidden.focusable:active,

#drupal-off-canvas .visually-hidden.focusable:focus {

  position: static !important;

  overflow: visible;

  clip: auto;

  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;

}

#drupal-off-canvas .panel__description {

  margin: 0 0 3px;

  padding: 2px 0 3px 0;

}

#drupal-off-canvas .compact-link {

  margin: 0 0 10px 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;

}

[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);

}

#drupal-off-canvas .messages--warning {

  color: #734c00;

  background-color: #fdf8ed;

  background-image: url(../icons/e29700/warning.svg);

}



#drupal-off-canvas .messages--error {

  color: #a51b00;

  background-color: #fcf4f2;

  background-image: url(../icons/e32700/error.svg);

}



#drupal-off-canvas .messages--error div[role="alert"] {

  color: inherit;

  background: transparent;

}

core/misc/dialog/off-canvas.reset.css

+148 −11
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/2815083

 * @preserve

 */



/**

 * @file

 * Reset most HTML elements styles for the off-canvas dialog.
@@ -6,21 +13,117 @@ 
 */



/**

 * Do not include div in then initial overrides because including div will

 * cause the need for many more overrides in this file.

 * 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 *:not(div),

#drupal-off-canvas *:not(svg *),

#drupal-off-canvas *:after,

#drupal-off-canvas *:before {



#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 {

    all: initial;

    box-sizing: border-box;

    text-shadow: none;

    -webkit-font-smoothing: antialiased;

    -webkit-tap-highlight-color: initial;



    &:after,

    &:before {

      all: initial;

      box-sizing: border-box;

      text-shadow: none;

      -webkit-font-smoothing: antialiased;

      -webkit-tap-highlight-color: initial;

    }

  }

}



/* Reset size and position on elements. */



#drupal-off-canvas a,

#drupal-off-canvas abbr,

#drupal-off-canvas acronym,
@@ -115,6 +218,7 @@ 
 * Override the default (display: inline) for browsers that do not recognize HTML5 tags.

 * IE8 (and lower) requires a shiv: http://ejohn.org/blog/html5-shiv

 */



#drupal-off-canvas article,

#drupal-off-canvas aside,

#drupal-off-canvas figcaption,
@@ -136,6 +240,7 @@ 
 * IE + Opera = font-weight: bold.

 * Gecko + WebKit = font-weight: bolder.

 */



#drupal-off-canvas b,

#drupal-off-canvas strong {

  font-weight: bold;
@@ -158,10 +263,12 @@ 
}



/* reset table styling. */



#drupal-off-canvas table {

  border-spacing: 0;

  border-collapse: collapse;

}



#drupal-off-canvas table thead,

#drupal-off-canvas table tbody,

#drupal-off-canvas table tbody tr:nth-child(even),
@@ -170,32 +277,39 @@ 
  border: 0;

  background: transparent none;

}



#drupal-off-canvas th,

#drupal-off-canvas td,

#drupal-off-canvas caption {

  font-weight: normal;

}



#drupal-off-canvas q {

  quotes: none;

}



#drupal-off-canvas q:before,

#drupal-off-canvas q:after {

  content: none;

}



#drupal-off-canvas sub,

#drupal-off-canvas sup,

#drupal-off-canvas small {

  font-size: 75%;

}



#drupal-off-canvas sub,

#drupal-off-canvas sup {

  position: relative;

  vertical-align: baseline;

  line-height: 0;

}



#drupal-off-canvas sub {

  bottom: -0.25em;

}



#drupal-off-canvas sup {

  top: -0.5em;

}
@@ -204,23 +318,28 @@ 
 * For IE9. Without, occasionally draws shapes

 * outside the boundaries of <svg> rectangle.

 */



#drupal-off-canvas svg {

  overflow: hidden;

}



/* Specific resets for inputs. */



#drupal-off-canvas input[type="search"]::-webkit-search-decoration {

  display: none;

}



#drupal-off-canvas input {

  margin: 0;

  padding: 0;

}



#drupal-off-canvas input[type="checkbox"],

#drupal-off-canvas input[type="radio"] {

  position: static;

  margin: 0;

}



#drupal-off-canvas input:invalid,

#drupal-off-canvas button:invalid,

#drupal-off-canvas select:invalid,
@@ -238,9 +357,11 @@ 
  z-index: 1;

  box-shadow: none;

}



#drupal-off-canvas input[role="button"] {

  cursor: pointer;

}



#drupal-off-canvas button,

#drupal-off-canvas input[type="reset"],

#drupal-off-canvas input[type="submit"],
@@ -257,6 +378,7 @@ 
  -webkit-appearance: none;

  -moz-appearance: none;

}



#drupal-off-canvas button:hover,

#drupal-off-canvas input[type="reset"]:hover,

#drupal-off-canvas input[type="submit"]:hover,
@@ -264,6 +386,7 @@ 
  text-decoration: none;

  background-image: none;

}



#drupal-off-canvas button:active,

#drupal-off-canvas input[type="reset"]:active,

#drupal-off-canvas input[type="submit"]:active,
@@ -272,6 +395,7 @@ 
  background-image: none;

  box-shadow: none;

}



#drupal-off-canvas button::-moz-focus-inner,

#drupal-off-canvas input[type="reset"]::-moz-focus-inner,

#drupal-off-canvas input[type="submit"]::-moz-focus-inner,
@@ -279,6 +403,7 @@ 
  padding: 0;

  border: 0;

}



#drupal-off-canvas textarea,

#drupal-off-canvas select,

#drupal-off-canvas input[type="date"],
@@ -298,6 +423,7 @@ 
  vertical-align: middle;

  border-radius: 0;

}



#drupal-off-canvas textarea[disabled],

#drupal-off-canvas select[disabled],

#drupal-off-canvas input[type="date"][disabled],
@@ -315,9 +441,11 @@ 
#drupal-off-canvas input[type="week"][disabled] {

  background-color: grey;

}



#drupal-off-canvas input[type="hidden"] {

  visibility: hidden;

}



#drupal-off-canvas button[disabled],

#drupal-off-canvas input[disabled],

#drupal-off-canvas select[disabled],
@@ -331,34 +459,41 @@ 
  user-select: none;

  box-shadow: none;

}



#drupal-off-canvas input:placeholder,

#drupal-off-canvas textarea:placeholder {

  color: grey;

}



#drupal-off-canvas textarea,

#drupal-off-canvas select[size],

#drupal-off-canvas select[multiple] {

  height: auto;

}



#drupal-off-canvas select[size="0"],

#drupal-off-canvas select[size="1"] {

  height: auto;

}



#drupal-off-canvas textarea {

  overflow: auto;

  width: 100%;

  min-height: 40px;

  resize: vertical;

}



#drupal-off-canvas optgroup {

  color: black;

  font-weight: normal;

  font-style: normal;

}



#drupal-off-canvas optgroup::-moz-focus-inner {

  padding: 0;

  border: 0;

}



#drupal-off-canvas * button {

  overflow: visible;

  width: auto;
@@ -369,6 +504,7 @@ 
  border: 1px solid grey;

  background: none;

}



#drupal-off-canvas * textarea,

#drupal-off-canvas * select,

#drupal-off-canvas *:not(div) textarea,
@@ -381,6 +517,7 @@ 
}



/* To standardize off-canvas selection color. */



#drupal-off-canvas ::-moz-selection,

#drupal-off-canvas ::selection {

  color: inherit;

core/misc/dialog/off-canvas.reset.pcss.css

0 → 100644
+482 −0

File added.

Preview size limit exceeded, changes collapsed.