Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

merge-requests/3445/merge
nod_ 2023-04-07 11:59:15 +02:00
parent 29763eaaf5
commit bf26629932
No known key found for this signature in database
GPG Key ID: 76624892606FA197
2 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
core/themes/claro/css/components/menus-and-lists.css
View File

@ -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,
.menu-item {
--item-list-spacing-l: var(--space-l);
--item-list-spacing-m: var(--space-m);
}
.item-list ul {
margin: 0.25em 0 0.25em 1.5em; /* LTR */
list-style-type: disc;
list-style-image: none;
}
[dir="rtl"] .item-list ul {
margin: 0.25em 1.5em 0.25em 0;
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;
}

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

@ -1,41 +1,47 @@
/**
* Menus and lists.
*
* These classes are used in claro-toolbar-menu and any list items.
*/
.item-list,
.menu-item {
--item-list-spacing-l: var(--space-l);
--item-list-spacing-m: var(--space-m);
}
.item-list ul {
margin: 0.25em 0 0.25em 1.5em; /* LTR */
list-style-type: disc;
list-style-image: none;
}
[dir="rtl"] .item-list ul {
margin: 0.25em 1.5em 0.25em 0;
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 */
}
[dir="rtl"] ul.links li,
[dir="rtl"] ul.inline li {
padding-right: 0;
padding-left: 1em;
}
ul.inline li {
display: inline;
ul {
&.links li,
&.inline li {
padding-inline-end: var(--item-list-spacing-m);
}
&.inline li {
display: inline;
}
}