You are here

book.css in Drupal 10

Book module styling.

File

core/themes/olivero/css/components/book.css
View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Book module styling.
  10. */
  11. /*
  12. * Media query breakpoints.
  13. * Processed by postcss/postcss-custom-media.
  14. */
  15. /* Navigation related breakpoints */
  16. /* Grid related breakpoints */
  17. /* Grid shifts from 6 to 14 columns. */
  18. /* Width of the entire grid maxes out. */
  19. [dir="ltr"] .book-pager {
  20. margin-left: 0;
  21. }
  22. [dir="rtl"] .book-pager {
  23. margin-right: 0;
  24. }
  25. [dir="ltr"] .book-pager {
  26. margin-right: 0;
  27. }
  28. [dir="rtl"] .book-pager {
  29. margin-left: 0;
  30. }
  31. [dir="ltr"] .book-pager {
  32. padding-left: 0;
  33. }
  34. [dir="rtl"] .book-pager {
  35. padding-right: 0;
  36. }
  37. [dir="ltr"] .book-pager {
  38. padding-right: 0;
  39. }
  40. [dir="rtl"] .book-pager {
  41. padding-left: 0;
  42. }
  43. .book-pager {
  44. display: flex;
  45. flex-wrap: wrap;
  46. margin-top: 0 var(--sp);
  47. padding-top: 0;
  48. padding-bottom: var(--sp);
  49. list-style: none;
  50. border-bottom: solid 1px var(--color--primary-40);
  51. }
  52. .book-pager__item {
  53. display: inline-block
  54. }
  55. @media (min-width: 31.25rem) {
  56. .book-pager__item {
  57. flex: 0 0 33.33%
  58. }
  59. }
  60. @media (min-width: 31.25rem) {
  61. .book-pager__item--center {
  62. text-align: center
  63. }
  64. }
  65. @media (min-width: 31.25rem) {
  66. [dir="ltr"] .book-pager__item--next {
  67. margin-left: auto;
  68. }
  69. [dir="rtl"] .book-pager__item--next {
  70. margin-right: auto;
  71. }
  72. [dir="ltr"] .book-pager__item--next {
  73. text-align: right;
  74. }
  75. [dir="rtl"] .book-pager__item--next {
  76. text-align: left;
  77. }
  78. }
  79. .book-pager__link {
  80. display: inline-flex;
  81. align-items: center;
  82. text-decoration: none;
  83. color: var(--color-text-primary-medium);
  84. font-family: var(--font-serif);
  85. font-size: 1.125rem;
  86. font-weight: 600;
  87. }
  88. [dir="ltr"] .book-pager__link--previous:before {
  89. margin-right: 0.25em;
  90. }
  91. [dir="rtl"] .book-pager__link--previous:before {
  92. margin-left: 0.25em;
  93. }
  94. [dir="ltr"] .book-pager__link--previous:before {
  95. border-left: solid 3px currentColor;
  96. }
  97. [dir="rtl"] .book-pager__link--previous:before {
  98. border-right: solid 3px currentColor;
  99. }
  100. .book-pager__link--previous:before {
  101. display: block;
  102. width: var(--sp0-5);
  103. height: var(--sp0-5);
  104. content: "";
  105. transform: rotate(-45deg);
  106. border-top: solid 3px currentColor;
  107. }
  108. [dir="ltr"] .book-pager__link--next:after {
  109. margin-left: 0.25em;
  110. }
  111. [dir="rtl"] .book-pager__link--next:after {
  112. margin-right: 0.25em;
  113. }
  114. [dir="ltr"] .book-pager__link--next:after {
  115. border-left: solid 3px currentColor;
  116. }
  117. [dir="rtl"] .book-pager__link--next:after {
  118. border-right: solid 3px currentColor;
  119. }
  120. .book-pager__link--next:after {
  121. display: block;
  122. width: var(--sp0-5);
  123. height: var(--sp0-5);
  124. content: "";
  125. transform: rotate(135deg);
  126. border-top: solid 3px currentColor;
  127. }
  128. [dir="ltr"] .book-navigation__menu {
  129. margin-left: 0;
  130. }
  131. [dir="rtl"] .book-navigation__menu {
  132. margin-right: 0;
  133. }
  134. [dir="ltr"] .book-navigation__menu {
  135. margin-right: 0;
  136. }
  137. [dir="rtl"] .book-navigation__menu {
  138. margin-left: 0;
  139. }
  140. [dir="ltr"] .book-navigation__menu {
  141. padding-left: 0;
  142. }
  143. [dir="rtl"] .book-navigation__menu {
  144. padding-right: 0;
  145. }
  146. [dir="ltr"] .book-navigation__menu {
  147. padding-right: 0;
  148. }
  149. [dir="rtl"] .book-navigation__menu {
  150. padding-left: 0;
  151. }
  152. .book-navigation__menu {
  153. margin-top: var(--sp2);
  154. margin-bottom: var(--sp2);
  155. padding-top: 0;
  156. padding-bottom: 0;
  157. list-style: none;
  158. }
  159. [dir="ltr"] .book-navigation__item {
  160. padding-left: 0;
  161. }
  162. [dir="rtl"] .book-navigation__item {
  163. padding-right: 0;
  164. }
  165. [dir="ltr"] .book-navigation__item {
  166. padding-right: 0;
  167. }
  168. [dir="rtl"] .book-navigation__item {
  169. padding-left: 0;
  170. }
  171. .book-navigation__item {
  172. margin-top: 0;
  173. margin-bottom: 0;
  174. padding-top: 0;
  175. padding-bottom: 0;
  176. list-style: none;
  177. }
  178. [dir="rtl"] .book-pager__link--previous:before {
  179. transform: rotate(45deg);
  180. }
  181. [dir="rtl"] .book-pager__link--next:after {
  182. transform: rotate(-135deg);
  183. }