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

Issue #3196874 by andy-blum, mherchel: BEMifying Olivero's book pager

merge-requests/619/head
Lauri Eskola 2021-04-30 14:33:57 +03:00
parent e3d87874db
commit f429abacdc
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
3 changed files with 44 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
core/themes/olivero/css/components/book.css
View File

@ -11,35 +11,35 @@
*/ */
[dir="ltr"] .book-pager { [dir="ltr"] .book-pager {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .book-pager { [dir="rtl"] .book-pager {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .book-pager { [dir="ltr"] .book-pager {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .book-pager { [dir="rtl"] .book-pager {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .book-pager { [dir="ltr"] .book-pager {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .book-pager { [dir="rtl"] .book-pager {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .book-pager { [dir="ltr"] .book-pager {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .book-pager { [dir="rtl"] .book-pager {
padding-left: 0 padding-left: 0;
} }
.book-pager { .book-pager {
@ -49,17 +49,9 @@
padding-top: 0; padding-top: 0;
padding-bottom: 1.125rem; padding-bottom: 1.125rem;
list-style: none; list-style: none;
border-bottom: solid 1px #0d77b5 border-bottom: solid 1px #0d77b5;
} }
.book-pager a {
text-decoration: none;
color: #0d77b5;
font-family: "Lora", "georgia", serif;
font-size: 1.125rem;
font-weight: 600;
}
.book-pager__item { .book-pager__item {
display: inline-block display: inline-block
} }
@ -81,41 +73,46 @@
@media (min-width: 31.25rem) { @media (min-width: 31.25rem) {
[dir="ltr"] .book-pager__item--next { [dir="ltr"] .book-pager__item--next {
margin-left: auto margin-left: auto;
} }
[dir="rtl"] .book-pager__item--next { [dir="rtl"] .book-pager__item--next {
margin-right: auto margin-right: auto;
} }
[dir="ltr"] .book-pager__item--next { [dir="ltr"] .book-pager__item--next {
text-align: right text-align: right;
} }
[dir="rtl"] .book-pager__item--next { [dir="rtl"] .book-pager__item--next {
text-align: left text-align: left;
} }
} }
.book-pager__link { .book-pager__link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
text-decoration: none;
color: #0d77b5;
font-family: "Lora", "georgia", serif;
font-size: 1.125rem;
font-weight: 600;
} }
[dir="ltr"] .book-pager__link--previous:before { [dir="ltr"] .book-pager__link--previous:before {
margin-right: 0.25em margin-right: 0.25em;
} }
[dir="rtl"] .book-pager__link--previous:before { [dir="rtl"] .book-pager__link--previous:before {
margin-left: 0.25em margin-left: 0.25em;
} }
[dir="ltr"] .book-pager__link--previous:before { [dir="ltr"] .book-pager__link--previous:before {
border-left: solid 3px currentColor border-left: solid 3px currentColor;
} }
[dir="rtl"] .book-pager__link--previous:before { [dir="rtl"] .book-pager__link--previous:before {
border-right: solid 3px currentColor border-right: solid 3px currentColor;
} }
.book-pager__link--previous:before { .book-pager__link--previous:before {
@ -128,19 +125,19 @@
} }
[dir="ltr"] .book-pager__link--next:after { [dir="ltr"] .book-pager__link--next:after {
margin-left: 0.25em margin-left: 0.25em;
} }
[dir="rtl"] .book-pager__link--next:after { [dir="rtl"] .book-pager__link--next:after {
margin-right: 0.25em margin-right: 0.25em;
} }
[dir="ltr"] .book-pager__link--next:after { [dir="ltr"] .book-pager__link--next:after {
border-left: solid 3px currentColor border-left: solid 3px currentColor;
} }
[dir="rtl"] .book-pager__link--next:after { [dir="rtl"] .book-pager__link--next:after {
border-right: solid 3px currentColor border-right: solid 3px currentColor;
} }
.book-pager__link--next:after { .book-pager__link--next:after {
@ -153,35 +150,35 @@
} }
[dir="ltr"] .book-navigation__menu { [dir="ltr"] .book-navigation__menu {
margin-left: 0 margin-left: 0;
} }
[dir="rtl"] .book-navigation__menu { [dir="rtl"] .book-navigation__menu {
margin-right: 0 margin-right: 0;
} }
[dir="ltr"] .book-navigation__menu { [dir="ltr"] .book-navigation__menu {
margin-right: 0 margin-right: 0;
} }
[dir="rtl"] .book-navigation__menu { [dir="rtl"] .book-navigation__menu {
margin-left: 0 margin-left: 0;
} }
[dir="ltr"] .book-navigation__menu { [dir="ltr"] .book-navigation__menu {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .book-navigation__menu { [dir="rtl"] .book-navigation__menu {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .book-navigation__menu { [dir="ltr"] .book-navigation__menu {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .book-navigation__menu { [dir="rtl"] .book-navigation__menu {
padding-left: 0 padding-left: 0;
} }
.book-navigation__menu { .book-navigation__menu {
@ -193,19 +190,19 @@
} }
[dir="ltr"] .book-navigation__item { [dir="ltr"] .book-navigation__item {
padding-left: 0 padding-left: 0;
} }
[dir="rtl"] .book-navigation__item { [dir="rtl"] .book-navigation__item {
padding-right: 0 padding-right: 0;
} }
[dir="ltr"] .book-navigation__item { [dir="ltr"] .book-navigation__item {
padding-right: 0 padding-right: 0;
} }
[dir="rtl"] .book-navigation__item { [dir="rtl"] .book-navigation__item {
padding-left: 0 padding-left: 0;
} }
.book-navigation__item { .book-navigation__item {

13
core/themes/olivero/css/components/book.pcss.css
View File

@ -16,14 +16,6 @@
padding-inline-end: 0; padding-inline-end: 0;
list-style: none; list-style: none;
border-block-end: solid 1px var(--color--blue-20); border-block-end: solid 1px var(--color--blue-20);
& a {
text-decoration: none;
color: var(--color--blue-20);
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
}
} }
.book-pager__item { .book-pager__item {
@ -50,6 +42,11 @@
.book-pager__link { .book-pager__link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
text-decoration: none;
color: var(--color--blue-20);
font-family: var(--font-serif);
font-size: 18px;
font-weight: 600;
} }
.book-pager__link--previous { .book-pager__link--previous {

2
core/themes/olivero/templates/navigation/book-navigation.html.twig
View File

@ -43,7 +43,7 @@
{% endif %} {% endif %}
{% if parent_url %} {% if parent_url %}
<li class="book-pager__item book-pager__item--center"> <li class="book-pager__item book-pager__item--center">
<a href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a> <a class="book-pager__link book-pager__link--center" href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
</li> </li>
{% endif %} {% endif %}
{% if next_url %} {% if next_url %}