book.pcss.css

Same filename in other branches
  1. 9 core/themes/olivero/css/components/book.pcss.css
  2. 10 core/themes/olivero/css/components/book.pcss.css

Book module styling.

File

core/themes/olivero/css/components/book.pcss.css

View source
  1. /**
  2. * @file
  3. * Book module styling.
  4. */
  5. @import "../base/media-queries.pcss.css";
  6. .book-pager {
  7. display: flex;
  8. flex-wrap: wrap;
  9. margin-block-start: 0 var(--sp);
  10. margin-inline-start: 0;
  11. margin-inline-end: 0;
  12. padding-block: 0 var(--sp);
  13. padding-inline-start: 0;
  14. padding-inline-end: 0;
  15. list-style: none;
  16. border-block-end: solid 1px var(--color--primary-40);
  17. }
  18. .book-pager__item {
  19. display: inline-block;
  20. @media (--sm) {
  21. flex: 0 0 33.33%;
  22. }
  23. }
  24. .book-pager__item--center {
  25. @media (--sm) {
  26. text-align: center;
  27. }
  28. }
  29. .book-pager__item--next {
  30. @media (--sm) {
  31. margin-inline-start: auto;
  32. text-align: end;
  33. }
  34. }
  35. .book-pager__link {
  36. display: inline-flex;
  37. align-items: center;
  38. text-decoration: none;
  39. color: var(--color-text-primary-medium);
  40. font-family: var(--font-serif);
  41. font-size: 18px;
  42. font-weight: 600;
  43. }
  44. .book-pager__link--previous {
  45. &::before {
  46. display: block;
  47. width: var(--sp0-5);
  48. height: var(--sp0-5);
  49. margin-inline-end: 0.25em;
  50. content: "";
  51. transform: rotate(-45deg);
  52. border-block-start: solid 3px currentColor;
  53. border-inline-start: solid 3px currentColor;
  54. }
  55. }
  56. .book-pager__link--next {
  57. &::after {
  58. display: block;
  59. width: var(--sp0-5);
  60. height: var(--sp0-5);
  61. margin-inline-start: 0.25em;
  62. content: "";
  63. transform: rotate(135deg);
  64. border-block-start: solid 3px currentColor;
  65. border-inline-start: solid 3px currentColor;
  66. }
  67. }
  68. .book-navigation__menu {
  69. margin-block: var(--sp2);
  70. margin-inline-start: 0;
  71. margin-inline-end: 0;
  72. padding-block: 0;
  73. padding-inline-start: 0;
  74. padding-inline-end: 0;
  75. list-style: none;
  76. }
  77. .book-navigation__item {
  78. margin-block: 0;
  79. padding-block: 0;
  80. padding-inline-start: 0;
  81. padding-inline-end: 0;
  82. list-style: none;
  83. }
  84. [dir="rtl"] {
  85. & .book-pager__link--previous::before {
  86. transform: rotate(45deg);
  87. }
  88. & .book-pager__link--next::after {
  89. transform: rotate(-135deg);
  90. }
  91. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.