2
0

core.scss 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  1. /* =============================================================================
  2. /* Wagtail CMS main stylesheet
  3. /* =============================================================================
  4. REFERENCE
  5. * We organise our styles based on a combination of ITCSS and
  6. the Sass 7-1 pattern.
  7. * Classes should be written using BEM, which we modify to include a prefix.
  8. * Every BEM block should have its own file.
  9. ┌────────────┬────────────────────────┬──────────────┬────────┐
  10. │ Folder │ Contents │ ITCSS level │ Prefix │
  11. ├────────────┼────────────────────────┼──────────────┼────────┤
  12. │ settings │ variables, maps, fonts │ 1 Settings │ │
  13. │ tools │ mixins, functions │ 2 Tools │ │
  14. │ generic │ resets │ 3 Generic │ │
  15. │ elements │ elements, no classes │ 4 Elements │ │
  16. │ objects │ classes │ 5 Objects │ o- │
  17. │ │ layout │ │ │
  18. │ components │ classes │ 6 Components │ c- │
  19. │ │ BEM blocks │ │ │
  20. │ overrides │ classes │ 7 Trumps │ u- │
  21. │ │ overrides, utilities │ │ │
  22. └────────────┴────────────────────────┴──────────────┴────────┘
  23. SCSS: https://sass-lang.com/guide
  24. ITCSS: https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
  25. Sass 7-1 pattern: https://gist.github.com/rveitch/84cea9650092119527bc
  26. BEM: https://getbem.com/
  27. OTHER PREFIXES
  28. ┌────────┬─────────┐
  29. │ Prefix │ Purpose │
  30. ├────────┼─────────┤
  31. │ t- │ theme │
  32. │ is- │ state │
  33. └────────┴─────────┘
  34. ==============================================================================*/
  35. /* Legacy vendor styles. Do not add new styles here. */
  36. @use 'generic/normalize';
  37. @use 'vendor/jquery-ui-1.10.3.verdant';
  38. @use 'vendor/jquery.tagit' as tagit;
  39. @use 'vendor/jquery.Jcrop.min' as jcrop;
  40. /* SETTINGS
  41. These are variables, maps, and fonts.
  42. * No CSS should be produced by these files
  43. */
  44. @import 'settings';
  45. /* TOOLS
  46. These are functions and mixins.
  47. * No CSS should be produced by these files.
  48. */
  49. @import 'tools';
  50. /* GENERIC
  51. This is for resets and other rules that affect large collections of bare elements.
  52. * Changes to them should be very rare.
  53. */
  54. // @import 'generic/generic';
  55. /* ELEMENTS
  56. These are base styles for bare HTML elements.
  57. * Changes to them should be very rare.
  58. */
  59. // These inject Tailwind's base, component and utility styles and any styles registered by plugins of each layer.
  60. // Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet
  61. // https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
  62. @tailwind base;
  63. @tailwind components;
  64. @import 'elements/elements';
  65. @import 'elements/typography';
  66. @import 'elements/forms';
  67. /* OBJECTS
  68. These are classes related to layout, known as 'objects' in ITCSS or OOCSS.
  69. * This is for grids, wrappers, and other non-consmetic layout utilities.
  70. * These classes are prefixed with `.o-`.
  71. */
  72. @import 'objects/objects';
  73. @import 'objects/avatar';
  74. /* COMPONENTS
  75. These are classes for components.
  76. * These classes (unless legacy) are prefixed with `.c-`.
  77. * React component styles live in the same folders as their React components,
  78. which is the preferred pattern over housing them in the scss folder.
  79. */
  80. @import '../src/components/Transition/Transition';
  81. @import '../src/components/LoadingSpinner/LoadingSpinner';
  82. @import '../src/components/PublicationStatus/PublicationStatus';
  83. @import '../src/components/ComboBox/ComboBox';
  84. @import '../src/components/PageExplorer/PageExplorer';
  85. @import '../src/components/CommentApp/main';
  86. // Legacy
  87. @import 'components/icons';
  88. @import 'components/forms/input-base';
  89. @import 'components/forms/input-text';
  90. @import 'components/forms/radio-checkbox';
  91. @import 'components/forms/select';
  92. @import 'components/forms/tagit';
  93. @import 'components/forms/radio-checkbox-multiple';
  94. @import 'components/forms/error-message';
  95. @import 'components/forms/required-mark';
  96. @import 'components/forms/help';
  97. @import 'components/forms/drop-zone';
  98. @import 'components/forms/daterange';
  99. @import 'components/forms/file';
  100. @import 'components/forms/publishing';
  101. @import 'components/forms/switch';
  102. @import 'components/forms/title';
  103. @import 'components/forms/field';
  104. @import 'components/forms/field-row';
  105. @import 'components/forms/field-comment-control';
  106. @import 'components/forms/field-textoutput';
  107. @import 'components/forms/form-width';
  108. @import 'components/forms/nested-panel';
  109. @import 'components/tabs';
  110. @import 'components/panel';
  111. @import 'components/dialog';
  112. @import 'components/dismissible';
  113. @import 'components/dropdown';
  114. @import 'components/dropdown.legacy';
  115. @import 'components/help-block';
  116. @import 'components/button';
  117. @import 'components/modals';
  118. @import 'components/chooser';
  119. @import 'components/tag';
  120. @import 'components/listing';
  121. @import 'components/filters';
  122. @import 'components/messages';
  123. @import 'components/messages.capability';
  124. @import 'components/messages.status';
  125. @import 'components/header';
  126. @import 'components/progressbar';
  127. @import 'components/summary';
  128. @import 'components/whats-new';
  129. @import 'components/grid.legacy';
  130. @import 'components/footer';
  131. @import 'components/loading-mask';
  132. @import 'components/human-readable-date';
  133. @import 'components/link.legacy';
  134. @import 'components/indicator';
  135. @import 'components/status-tag';
  136. @import 'components/skiplink';
  137. @import 'components/workflow-tasks';
  138. @import 'components/workflow-timeline';
  139. @import 'components/bulk_actions';
  140. @import 'components/preview-panel';
  141. @import 'components/preview-error';
  142. @import 'components/form-side';
  143. @import 'components/userbar';
  144. @import '../src/components/Sidebar/Sidebar';
  145. @import '../src/components/Minimap/Minimap';
  146. /* OVERRIDES
  147. These are classes that provide overrides.
  148. * Higher specificity is allowed here because these are overrides and imported last.
  149. */
  150. // VENDOR: overrides of vendor styles.
  151. @import 'overrides/vendor.datetimepicker';
  152. @import 'overrides/vendor.handsontable';
  153. @import 'overrides/vendor.tagit';
  154. @import 'overrides/vendor.tippy';
  155. // UTILITIES: classes that do one simple thing.
  156. @import 'overrides/utilities.focus';
  157. @import 'overrides/utilities.visuallyhidden';
  158. // Legacy utilities
  159. @import 'overrides/utilities.legacy';
  160. // TAILWIND: This is at the bottom so it can take precedence over other css classes
  161. @tailwind utilities;
  162. /* Legacy layout-specific styles. Do not add new styles here. */
  163. @import 'layouts/404';
  164. @import 'layouts/compare-revisions';
  165. @import 'layouts/home';
  166. @import 'layouts/login';
  167. @import 'layouts/account';
  168. @import 'layouts/workflow-progress';
  169. @import 'layouts/report';
  170. @import 'layouts/add-multiple';
  171. @import 'layouts/chooser-duplicate-upload';
  172. @import 'layouts/focal-point-chooser';
  173. @import 'layouts/redirects';