Verified Commit bf266299 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332363 by Gauravvvv, mherchel, smustgrave: Refactor Claro's menus-and-lists stylesheet

parent 29763eaa

core/themes/claro/css/components/menus-and-lists.css

+23 −18
Original line number Diff line number Diff line
@@ -4,44 +4,49 @@ 
 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * Menus and lists.

 *

 * These classes are used in claro-toolbar-menu and any list items.

 */

.item-list ul {

  margin: 0.25em 0 0.25em 1.5em; /* LTR */

  list-style-type: disc;

  list-style-image: none;



.item-list,

.menu-item {

  --item-list-spacing-l: var(--space-l);

  --item-list-spacing-m: var(--space-m);

}

[dir="rtl"] .item-list ul {

  margin: 0.25em 1.5em 0.25em 0;



.item-list ul {

  margin-block: 0.25rem;

  margin-inline: var(--item-list-spacing-l) 0;

  list-style: disc;

}



.item-list ul li,

.menu-item {

  list-style-type: disc;

  list-style-image: none;

  list-style: disc;

}



.menu-item {

  margin: 0;

}



.item-list ul li.collapsed,

.menu-item--collapsed {

  list-style-type: disc;

  list-style-image: url(../../images/menu-collapsed.png);

  list-style: disc;

}



.item-list ul li.expanded,

.menu-item--expanded {

  list-style-type: circle;

  list-style-image: url(../../images/menu-expanded.png);

  list-style: circle;

}



ul.links li,

ul.inline li {

  padding-right: 1em; /* LTR */

}

[dir="rtl"] ul.links li,

[dir="rtl"] ul.inline li {

  padding-right: 0;

  padding-left: 1em;

  padding-inline-end: var(--item-list-spacing-m);

}



ul.inline li {

  display: inline;

}

core/themes/claro/css/components/menus-and-lists.pcss.css

+30 −24
Original line number Diff line number Diff line 
/**

 * Menus and lists.

 *

 * These classes are used in claro-toolbar-menu and any list items.

 */

.item-list ul {

  margin: 0.25em 0 0.25em 1.5em; /* LTR */

  list-style-type: disc;

  list-style-image: none;



.item-list,

.menu-item {

  --item-list-spacing-l: var(--space-l);

  --item-list-spacing-m: var(--space-m);

}

[dir="rtl"] .item-list ul {

  margin: 0.25em 1.5em 0.25em 0;



.item-list ul {

  margin-block: 4px;

  margin-inline: var(--item-list-spacing-l) 0;

  list-style: disc;

}



.item-list ul li,

.menu-item {

  list-style-type: disc;

  list-style-image: none;

  list-style: disc;

}



.menu-item {

  margin: 0;

}



.item-list ul li.collapsed,

.menu-item--collapsed {

  list-style-type: disc;

  list-style-image: url(../../images/menu-collapsed.png);

  list-style: disc;

}



.item-list ul li.expanded,

.menu-item--expanded {

  list-style-type: circle;

  list-style-image: url(../../images/menu-expanded.png);

  list-style: circle;

}

ul.links li,

ul.inline li {

  padding-right: 1em; /* LTR */



ul {

  &.links li,

  &.inline li {

    padding-inline-end: var(--item-list-spacing-m);

  }

[dir="rtl"] ul.links li,

[dir="rtl"] ul.inline li {

  padding-right: 0;

  padding-left: 1em;

}

ul.inline li {



  &.inline li {

    display: inline;

  }

}