mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-30 01:46:24 +01:00
2ad71493a9
Adds a new Stimulus controller for Tippy.js tooltips to replace only the Bootstrap tooltip usage & removes the bootstrap JS tooltip code. - Dashboard - moderation listing panel - Reports - Workflow listing status tooltip - Shared Avatar - user name tooltip - Workflow listing - steps item tooltip Closes #8565
205 lines
7.3 KiB
SCSS
205 lines
7.3 KiB
SCSS
/* =============================================================================
|
|
/* 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';
|