diff options
Diffstat (limited to 'old-apps/web-shared/src/styles/components/light-dark-switch.scss')
| -rw-r--r-- | old-apps/web-shared/src/styles/components/light-dark-switch.scss | 96 |
1 files changed, 0 insertions, 96 deletions
diff --git a/old-apps/web-shared/src/styles/components/light-dark-switch.scss b/old-apps/web-shared/src/styles/components/light-dark-switch.scss deleted file mode 100644 index 23dc03a..0000000 --- a/old-apps/web-shared/src/styles/components/light-dark-switch.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use '../base' as *; -@use 'popover.scss' as *; -@use 'adv-custom-select.scss' as *; - -/* -------------------------------- - -File#: _3_light-dark-switch -Title: Light/Dark Switch -Descr: Color theme switcher -Usage: codyhouse.co/license - --------------------------------- */ - -.ld-switch {} - -.ld-switch-btn { - position: relative; - width: 24px; - height: 24px; - overflow: hidden; - display: inline-block; - - - &:hover { - cursor: pointer; - opacity: 0.8; - } - - &:focus { - outline: none; - color: var(--color-primary); - } -} - -.ld-switch-btn.popover-control--active { - /* class added to the control button when the dropdown is visible */ - color: var(--color-primary); -} - -.ld-switch-btn__icon-wrapper { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - display: flex; - justify-content: center; - align-items: center; - opacity: 0; - transform: translateY(100%) rotate(35deg) scale(0.5); -} - -.ld-switch-btn__icon-wrapper--in { - opacity: 1; - transform: translateY(0) rotate(0) scale(1); -} - -.ld-switch-btn__icon-wrapper--out { - opacity: 0; - transform: translateY(-100%) rotate(-35deg) scale(0.5); -} - - -.ld-switch-btn__icon { - margin: auto; - --size: 20px; /* icon size */ -} - -.popover.ld-switch-popover { - --popover-width: 250px; -} - -.ld-switch-popover__option { - user-select: none; - - &:hover { - cursor: pointer; - opacity: 0.85; - } - - &:focus { - outline: none; - - figure { - box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px var(--color-contrast-higher); - } - } - - &[aria-selected=true] { - color: var(--color-primary); - - figure { - box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px currentColor; - } - } -} |
