/* ============================================================================= /* Wagtail CMS main stylesheet /* ============================================================================= REFERENCE * We organise our styles based on a combination of ITCSS and the Sass 7-1 pattern. * Classes should be written using BEM, which we modify to include a prefix. * Every BEM block should have its own file. ┌────────────┬────────────────────────┬──────────────┬────────┐ │ Folder │ Contents │ ITCSS level │ Prefix │ ├────────────┼────────────────────────┼──────────────┼────────┤ │ settings │ variables, maps, fonts │ 1 Settings │ │ │ tools │ mixins, functions │ 2 Tools │ │ │ generic │ resets │ 3 Generic │ │ │ elements │ elements, no classes │ 4 Elements │ │ │ objects │ classes │ 5 Objects │ o- │ │ │ layout │ │ │ │ components │ classes │ 6 Components │ c- │ │ │ BEM blocks │ │ │ │ overrides │ classes │ 7 Trumps │ u- │ │ │ overrides, utilities │ │ │ └────────────┴────────────────────────┴──────────────┴────────┘ SCSS: https://sass-lang.com/guide ITCSS: https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528 Sass 7-1 pattern: https://gist.github.com/rveitch/84cea9650092119527bc BEM: https://getbem.com/ OTHER PREFIXES ┌────────┬─────────┐ │ Prefix │ Purpose │ ├────────┼─────────┤ │ t- │ theme │ │ is- │ state │ └────────┴─────────┘ ==============================================================================*/ /* Legacy vendor styles. Do not add new styles here. */ @use 'generic/normalize'; @use 'vendor/jquery-ui-1.10.3.verdant'; @use 'vendor/jquery.tagit' as tagit; @use 'vendor/jquery.Jcrop.min' as jcrop; /* SETTINGS These are variables, maps, and fonts. * No CSS should be produced by these files */ @import 'settings'; /* TOOLS These are functions and mixins. * No CSS should be produced by these files. */ @import 'tools'; /* GENERIC This is for resets and other rules that affect large collections of bare elements. * Changes to them should be very rare. */ // @import 'generic/generic'; /* ELEMENTS These are base styles for bare HTML elements. * Changes to them should be very rare. */ // These inject Tailwind's base, component and utility styles and any styles registered by plugins of each layer. // Unused styles created within tailwinds layers won't be compiled into the compiled stylesheet // https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer @tailwind base; @tailwind components; @import 'elements/elements'; @import 'elements/typography'; @import 'elements/forms'; /* OBJECTS These are classes related to layout, known as 'objects' in ITCSS or OOCSS. * This is for grids, wrappers, and other non-consmetic layout utilities. * These classes are prefixed with `.o-`. */ @import 'objects/objects'; @import 'objects/avatar'; /* COMPONENTS These are classes for components. * These classes (unless legacy) are prefixed with `.c-`. * React component styles live in the same folders as their React components, which is the preferred pattern over housing them in the scss folder. */ @import '../src/components/Transition/Transition'; @import '../src/components/LoadingSpinner/LoadingSpinner'; @import '../src/components/PublicationStatus/PublicationStatus'; @import '../src/components/ComboBox/ComboBox'; @import '../src/components/PageExplorer/PageExplorer'; @import '../src/components/CommentApp/main'; // Legacy @import 'components/icons'; @import 'components/forms/input-base'; @import 'components/forms/input-text'; @import 'components/forms/radio-checkbox'; @import 'components/forms/select'; @import 'components/forms/tagit'; @import 'components/forms/radio-checkbox-multiple'; @import 'components/forms/error-message'; @import 'components/forms/required-mark'; @import 'components/forms/help'; @import 'components/forms/drop-zone'; @import 'components/forms/daterange'; @import 'components/forms/file'; @import 'components/forms/publishing'; @import 'components/forms/switch'; @import 'components/forms/title'; @import 'components/forms/field'; @import 'components/forms/field-row'; @import 'components/forms/field-comment-control'; @import 'components/forms/field-textoutput'; @import 'components/forms/form-width'; @import 'components/forms/nested-panel'; @import 'components/tabs'; @import 'components/panel'; @import 'components/dialog'; @import 'components/dismissible'; @import 'components/dropdown'; @import 'components/dropdown.legacy'; @import 'components/help-block'; @import 'components/button'; @import 'components/modals'; @import 'components/chooser'; @import 'components/tag'; @import 'components/listing'; @import 'components/filters'; @import 'components/messages'; @import 'components/messages.capability'; @import 'components/messages.status'; @import 'components/header'; @import 'components/progressbar'; @import 'components/summary'; @import 'components/whats-new'; @import 'components/grid.legacy'; @import 'components/footer'; @import 'components/loading-mask'; @import 'components/human-readable-date'; @import 'components/link.legacy'; @import 'components/indicator'; @import 'components/status-tag'; @import 'components/skiplink'; @import 'components/workflow-tasks'; @import 'components/workflow-timeline'; @import 'components/bulk_actions'; @import 'components/preview-panel'; @import 'components/preview-error'; @import 'components/form-side'; @import 'components/userbar'; @import '../src/components/Sidebar/Sidebar'; @import '../src/components/Minimap/Minimap'; /* OVERRIDES These are classes that provide overrides. * Higher specificity is allowed here because these are overrides and imported last. */ // VENDOR: overrides of vendor styles. @import 'overrides/vendor.datetimepicker'; @import 'overrides/vendor.handsontable'; @import 'overrides/vendor.tagit'; @import 'overrides/vendor.tippy'; // UTILITIES: classes that do one simple thing. @import 'overrides/utilities.focus'; @import 'overrides/utilities.visuallyhidden'; // Legacy utilities @import 'overrides/utilities.legacy'; // TAILWIND: This is at the bottom so it can take precedence over other css classes @tailwind utilities; /* Legacy layout-specific styles. Do not add new styles here. */ @import 'layouts/404'; @import 'layouts/compare-revisions'; @import 'layouts/home'; @import 'layouts/login'; @import 'layouts/account'; @import 'layouts/workflow-progress'; @import 'layouts/report'; @import 'layouts/add-multiple'; @import 'layouts/chooser-duplicate-upload'; @import 'layouts/focal-point-chooser'; @import 'layouts/modeladmin'; @import 'layouts/redirects';