mirror of
https://github.com/locomotivemtl/locomotive-boilerplate.git
synced 2026-01-15 00:55:08 +08:00
f400ca9622
Add accessible modal dialog component. Features: - Dialog supports being shown on page load via `data-modal-autoshow` attribute. - Dialog supports being shown at most once via the `data-modal-show-once` attribute. - Dialog persists dismissal via `localStorage`, by default. This can be switched to `sessionStoage` via `data-modal-show-once="session"` attribute value. - When Load handles "loading" event, executes `Modal.hide` on all shown modals. Required: - NPM dependency a11y-dialog v7.3.0 Added: - JS class `Modal` that uses and enhances a11y-dialog. - CSS component `.c-dialog` via partial '_modal.scss' with basic styles. - Basic HTML example of `data-module-modal`. Note: - Dialog styles adapted from https://codesandbox.io/s/a11y-dialog-pnwqu?file=/src/styles.css
68 lines
2.0 KiB
SCSS
68 lines
2.0 KiB
SCSS
// ==========================================================================
|
|
// Main
|
|
// ==========================================================================
|
|
|
|
// Settings
|
|
// ==========================================================================
|
|
@import "settings/config.eases";
|
|
@import "settings/config.colors";
|
|
@import "settings/config";
|
|
|
|
// ==========================================================================
|
|
// Tools
|
|
// ==========================================================================
|
|
@import "tools/functions";
|
|
@import "tools/mixins";
|
|
@import "tools/fonts";
|
|
@import "tools/layout";
|
|
@import "tools/widths";
|
|
// @import "tools/family";
|
|
|
|
// Generic
|
|
// ==========================================================================
|
|
@import "node_modules/normalize.css/normalize";
|
|
@import "generic/generic";
|
|
@import "generic/media";
|
|
@import "generic/form";
|
|
@import "generic/button";
|
|
|
|
// Elements
|
|
// ==========================================================================
|
|
@import "elements/fonts";
|
|
@import "elements/page";
|
|
|
|
// Objects
|
|
// ==========================================================================
|
|
@import "objects/scroll";
|
|
@import "objects/container";
|
|
@import "objects/ratio";
|
|
@import "objects/layout";
|
|
// @import "objects/crop";
|
|
// @import "objects/table";
|
|
|
|
// Vendors
|
|
// ==========================================================================
|
|
// @import "vendors/vendor";
|
|
|
|
// Components
|
|
// ==========================================================================
|
|
@import "components/scrollbar";
|
|
@import "components/heading";
|
|
@import "components/button";
|
|
@import "components/form";
|
|
@import "components/modal";
|
|
|
|
// Templates
|
|
// ==========================================================================
|
|
// @import "templates/template";
|
|
|
|
// Utilities
|
|
// ==========================================================================
|
|
@import "utilities/ratio";
|
|
@import "utilities/widths";
|
|
// @import "utilities/align";
|
|
// @import "utilities/helpers";
|
|
// @import "utilities/states";
|
|
// @import "utilities/spacing";
|
|
// @import "utilities/print";
|