diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-09-20 09:24:27 +0200 |
| commit | a9072370ca1eb9a5cce928b1d487db0f307edea6 (patch) | |
| tree | 59c3c23df930a8b5f888dc7813923abf4ceefed4 /apps/web-shared/src/styles/components/modal.scss | |
| parent | 56fa963a1d63cbe0bf28e29e717cceaa417c45c1 (diff) | |
| download | greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.tar.xz greatoffice-a9072370ca1eb9a5cce928b1d487db0f307edea6.zip | |
feat: Move old apps into it's own directory
Diffstat (limited to 'apps/web-shared/src/styles/components/modal.scss')
| -rw-r--r-- | apps/web-shared/src/styles/components/modal.scss | 105 |
1 files changed, 0 insertions, 105 deletions
diff --git a/apps/web-shared/src/styles/components/modal.scss b/apps/web-shared/src/styles/components/modal.scss deleted file mode 100644 index 1beec76..0000000 --- a/apps/web-shared/src/styles/components/modal.scss +++ /dev/null @@ -1,105 +0,0 @@ -@use '../base' as *; - -/* -------------------------------- - -File#: _1_modal-window -Title: Modal Window -Descr: A modal dialog used to display critical information -Usage: codyhouse.co/license - --------------------------------- */ - -.modal { - position: fixed; - z-index: var(--z-index-overlay, 15); - width: 100%; - height: 100%; - left: 0; - top: 0; - opacity: 0; - visibility: hidden; - - &:not(.modal--is-visible) { - pointer-events: none; - background-color: transparent; - } -} - -.modal--is-visible { - opacity: 1; - visibility: visible; -} - -// close button -.modal__close-btn { - display: flex; - flex-shrink: 0; - border-radius: 50%; - cursor: pointer; - - .icon { - display: block; - margin: auto; - } -} - -.modal__close-btn--outer { // close button - outside the modal__content - width: 48px; - height: 48px; - position: fixed; - top: var(--space-sm); - right: var(--space-sm); - z-index: var(--z-index-fixed-element, 10); - background-color: alpha(var(--color-black), 0.9); - - .icon { - color: var(--color-white); // icon color - } - - &:hover { - background-color: alpha(var(--color-black), 1); - - .icon { - transform: scale(1.1); - } - } -} - -.modal__close-btn--inner { // close button - inside the modal__content - width: 2em; - height: 2em; - background-color: var(--color-bg-light); - box-shadow: var(--inner-glow), var(--shadow-sm); - - .icon { - color: inherit; // icon color - } - - &:hover { - background-color: var(--color-bg-lighter); - box-shadow: var(--inner-glow), var(--shadow-md); - } -} - -// load content - optional -.modal--is-loading { - .modal__content { - visibility: hidden; - } - - .modal__loader { - display: flex; - } -} - -.modal__loader { // loader icon - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - justify-content: center; - align-items: center; - display: none; - pointer-events: none; -} |
