aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/web-shared/src/styles/components/light-dark-switch.scss
diff options
context:
space:
mode:
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.scss96
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;
- }
- }
-}