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
Loading
Loading
Loading
Loading
+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
+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;
+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;
}
+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;
+482 −0

File added.

Preview size limit exceeded, changes collapsed.

Loading