Unverified Commit 983562f4 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch: Refactor Drupal... 

Issue #3291797 by mherchel, andy-blum, lauriii, xjm, catch:  Refactor Drupal 10 settings tray / off-canvas to use modern CSS

(cherry picked from commit c2af5754)
parent d12571cb

core/.stylelintignore

+6 −2
Original line number Diff line number Diff line
@@ -2,8 +2,12 @@ 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

misc/dialog/off-canvas/css/**/*.css

!misc/dialog/off-canvas/css/**/*.pcss.css

modules/layout_builder/css/**/*.css

!modules/layout_builder/css/**/*.pcss.css

modules/workspaces/css/**/*.css

!modules/workspaces/css/**/*.pcss.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

core/core.libraries.yml

+15 −15
Original line number Diff line number Diff line
@@ -913,24 +913,24 @@ internal.underscore: 
drupal.dialog.off_canvas:

  version: VERSION

  js:

    misc/dialog/off-canvas.js: {}

    misc/dialog/off-canvas/js/off-canvas.js: {}

  css:

    base:

      misc/dialog/off-canvas.reset.css: {}

      misc/dialog/off-canvas.base.css: {}

      misc/dialog/off-canvas.css: {}

      # Add group setting to make sure this CSS load before any jQuery UI Dialog

      # CSS.

      misc/dialog/off-canvas.theme.css: { group: 200 }

      misc/dialog/off-canvas/css/reset.css: {}

      misc/dialog/off-canvas/css/base.css: {}

      misc/dialog/off-canvas/css/utility.css: {}

    component:

      misc/dialog/off-canvas.motion.css: {}

      misc/dialog/off-canvas.button.css: {}

      misc/dialog/off-canvas.form.css: {}

      misc/dialog/off-canvas.table.css: {}

      misc/dialog/off-canvas.details.css: {}

      misc/dialog/off-canvas.tabledrag.css: {}

      misc/dialog/off-canvas.dropbutton.css: {}

      misc/dialog/off-canvas.layout.css: {}

      misc/dialog/off-canvas/css/button.css: {}

      misc/dialog/off-canvas/css/drupal.css: {}

      misc/dialog/off-canvas/css/form.css: {}

      misc/dialog/off-canvas/css/table.css: {}

      misc/dialog/off-canvas/css/details.css: {}

      misc/dialog/off-canvas/css/messages.css: {}

      misc/dialog/off-canvas/css/tabledrag.css: {}

      misc/dialog/off-canvas/css/throbber.css: {}

      misc/dialog/off-canvas/css/dropbutton.css: {}

      misc/dialog/off-canvas/css/titlebar.css: {}

      misc/dialog/off-canvas/css/wrapper.css: {}

  dependencies:

    - core/jquery

    - core/once

core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php

+4 −0
Original line number Diff line number Diff line
@@ -51,6 +51,10 @@ public function __construct($title, $content, array $dialog_options = [], $setti 
    if (empty($dialog_options['dialogClass'])) {

      $this->dialogOptions['dialogClass'] = "ui-dialog-off-canvas ui-dialog-position-$position";

    }

    // Add CSS class to #drupal-off-canvas element. This enables developers to

    // select previous versions of off-canvas styles by using custom selector:

    // #drupal-off-canvas:not(.drupal-off-canvas-reset).

    $this->dialogOptions['classes']['ui-dialog-content'] = 'drupal-off-canvas-reset';

    // If no width option is provided then use the default width to avoid the

    // dialog staying at the width of the previous instance when opened

    // more than once, with different widths, on a single page.

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

deleted100644 → 0
+0 −399
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/3084859

 * @preserve

 */



/**

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

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

  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: 0.625rem 0;

  font-size: 1.385em;

  font-weight: bold;

}



#drupal-off-canvas h3,

#drupal-off-canvas .heading-c {

  display: block;

  margin: 0.625rem 0;

  font-size: 1.231em;

  font-weight: bold;

}



#drupal-off-canvas h4,

#drupal-off-canvas .heading-d {

  display: block;

  margin: 0.625rem 0;

  font-size: 1.154em;

  font-weight: bold;

}



#drupal-off-canvas h5,

#drupal-off-canvas .heading-e {

  display: block;

  margin: 0.625rem 0;

  font-size: 1.077em;

  font-weight: bold;

}



#drupal-off-canvas h6,

#drupal-off-canvas .heading-f {

  display: block;

  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 1.25rem;

}



#drupal-off-canvas dl dd,

#drupal-off-canvas dl dl {

  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: 1.25rem;

}



#drupal-off-canvas blockquote {

  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;

  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;

  padding: 0.3125rem 0;

  border-bottom: 1px solid #333

}



#drupal-off-canvas ul li:last-child, #drupal-off-canvas ol li:last-child {

    padding-bottom: 0;

    border-bottom: none;

  }



#drupal-off-canvas blockquote,

#drupal-off-canvas code {

  margin: 1.25rem 0;

}



#drupal-off-canvas pre {

  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;

  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: 0.3125rem 0.3125rem 0.9375rem;

}



#drupal-off-canvas .panel__description {

  margin: 0 0 0.1875rem;

  padding: 2px 0 0.1875rem 0;

}



#drupal-off-canvas .compact-link {

  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 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("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("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("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"] {

  color: inherit;

  background: transparent;

}

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

deleted100644 → 0
+0 −346
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;

  padding: 5px 0;

  border-bottom: 1px solid #333;

  &:last-child {

    padding-bottom: 0;

    border-bottom: none;

  }

}

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

}