From b7e39b59fd0fc7b5610ebff29035bf622079e0d8 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Wed, 5 Oct 2022 20:45:21 +0800 Subject: refactor: Change file structure --- .../web-shared/src/styles/components/modal.scss | 105 --------------------- 1 file changed, 105 deletions(-) delete mode 100644 old-apps/web-shared/src/styles/components/modal.scss (limited to 'old-apps/web-shared/src/styles/components/modal.scss') diff --git a/old-apps/web-shared/src/styles/components/modal.scss b/old-apps/web-shared/src/styles/components/modal.scss deleted file mode 100644 index 1beec76..0000000 --- a/old-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; -} -- cgit v1.3