Verified Commit c5604c9d authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3361315 by mherchel, smustgrave, bnjmnm, ckrina: Dropbutton quickly... 

Issue #3361315 by mherchel, smustgrave, bnjmnm, ckrina: Dropbutton quickly shows/hides its menu on pageload causing layout shift
parent d08fdb07

core/themes/claro/claro.theme

+22 −0
Original line number Diff line number Diff line
@@ -39,6 +39,28 @@ function claro_theme_suggestions_details_alter(&$suggestions, $variables) { 
  }

}



/**

 * Implements hook_page_attachments_alter().

 */

function claro_page_attachments_alter(array &$attachments) {

  $theme_path = \Drupal::request()->getBasePath() . '/' . \Drupal::service('extension.list.theme')->getPath('claro');

  $query_string = \Drupal::state()->get('system.css_js_query_string') ?: '0';



  // Attach non-JavaScript specific CSS via a noscript tag to prevent unwanted

  // layout shifts.

  $attachments['#attached']['html_head'][] = [

    [

      '#tag' => 'link',

      '#noscript' => TRUE,

      '#attributes' => [

        'rel' => 'stylesheet',

        'href' => $theme_path . '/css/components/dropbutton-noscript.css?' . $query_string,

      ],

    ],

    'dropbutton_noscript',

  ];

}



/**

 * Implements hook_preprocess_HOOK() for menu-local-tasks templates.

 *

core/themes/claro/css/components/dropbutton-noscript.css

0 → 100644
+18 −0
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

 * Dropbutton styles for when JavaScript is not loaded.

 */

html .dropbutton--small,

html .dropbutton--extrasmall,

html .dropbutton {

  height: auto;

}

html .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

  visibility: visible;

}

core/themes/claro/css/components/dropbutton-noscript.pcss.css

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

 * @file

 * Dropbutton styles for when JavaScript is not loaded.

 */

html {

  .dropbutton--small,

  .dropbutton--extrasmall,

  .dropbutton {

    height: auto;

  }



  .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type~.dropbutton__item {

    visibility: visible;

  }

}

core/themes/claro/css/components/dropbutton.css

+14 −14
Original line number Diff line number Diff line
@@ -77,27 +77,27 @@ 
  margin: 0;

}



.js .dropbutton {

.dropbutton {

  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */

  height: var(--dropbutton-toggle-size);

}



.js .dropbutton-widget {

.dropbutton-widget {

  border-radius: var(--button-border-radius-size);

  background-color: var(--button-bg-color);

}



.js .dropbutton-action {

.dropbutton-action {

  border-inline-end: var(--dropbutton-border-size) solid white;

}



/* Variants. */



.js.no-touchevents .dropbutton--small {

.dropbutton--small {

  height: var(--dropbutton-small-toggle-size);

}



.js.no-touchevents .dropbutton--extrasmall {

.dropbutton--extrasmall {

  height: var(--dropbutton-extrasmall-toggle-size);

}
@@ -105,31 +105,31 @@ 
 * First dropbutton list item.

 */



.js .dropbutton--multiple .dropbutton__item:first-of-type {

.dropbutton--multiple .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}



[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));

}



/* First dropbutton list item variants */



.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}



[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));

}



.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}



[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));

}
@@ -336,11 +336,11 @@ 
  z-index: 2;

}



.js .dropbutton--multiple .dropbutton__item:first-of-type > * {

.dropbutton--multiple .dropbutton__item:first-of-type > * {

  border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */

}



[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {

  border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;

}
@@ -358,7 +358,7 @@ 
  text-align: right;

}



.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

  visibility: hidden;

}

core/themes/claro/css/components/dropbutton.pcss.css

+14 −14
Original line number Diff line number Diff line
@@ -67,53 +67,53 @@ 
  margin: 0;

}



.js .dropbutton {

.dropbutton {

  min-width: 6rem; /* Help mitigate long dropbutton text from obscuring other dropbuttons. */

  height: var(--dropbutton-toggle-size);

}



.js .dropbutton-widget {

.dropbutton-widget {

  border-radius: var(--button-border-radius-size);

  background-color: var(--button-bg-color);

}



.js .dropbutton-action {

.dropbutton-action {

  border-inline-end: var(--dropbutton-border-size) solid white;

}



/* Variants. */

.js.no-touchevents .dropbutton--small {

.dropbutton--small {

  height: var(--dropbutton-small-toggle-size);

}



.js.no-touchevents .dropbutton--extrasmall {

.dropbutton--extrasmall {

  height: var(--dropbutton-extrasmall-toggle-size);

}



/**

 * First dropbutton list item.

 */

.js .dropbutton--multiple .dropbutton__item:first-of-type {

.dropbutton--multiple .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}

[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));

}



/* First dropbutton list item variants */

.js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}

[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--small .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-small-toggle-size) + var(--dropbutton-toggle-size-spacing));

}



.js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  margin-right: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */

}

[dir="rtl"].js.no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

[dir="rtl"].no-touchevents .dropbutton--multiple.dropbutton--extrasmall .dropbutton__item:first-of-type {

  margin-right: 0;

  margin-left: calc(var(--dropbutton-extrasmall-toggle-size) + var(--dropbutton-toggle-size-spacing));

}
@@ -300,10 +300,10 @@ 
  z-index: 2;

}



.js .dropbutton--multiple .dropbutton__item:first-of-type > * {

.dropbutton--multiple .dropbutton__item:first-of-type > * {

  border-radius: var(--button-border-radius-size) 0 0 var(--button-border-radius-size); /* LTR */

}

[dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type > * {

[dir="rtl"] .dropbutton--multiple .dropbutton__item:first-of-type > * {

  border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;

}
@@ -320,7 +320,7 @@ 
  text-align: right;

}



.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {

  visibility: hidden;

}