scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in chore/sw-3145-move-switch (pull request #2521)

Browse Source 
Move Switch to design-system

* Move Switch to design-system

* Fix Icon import

* Fix Caption import...


Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
2025-07-04 08:33:04 +00:00
parent c3279ec254
commit d7981eae42
5 changed files with 13 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/design-system/lib/components/Switch/switch.module.css Normal file
View File

@@ -0,0 +1,46 @@
.container {
display: flex;
flex-direction: row;
color: var(--text-color);
cursor: pointer;
width: 100%;
justify-content: space-between;
}
.switch {
width: 40px;
height: 24px;
border: 2px solid var(--Surface-Secondary-Default-dark);
background: var(--Surface-Secondary-Default-dark);
border-radius: 24px;
transition: all 200ms;
display: block;
&:before {
content: '';
display: block;
margin: 2px;
width: 16px;
height: 16px;
background: var(--Surface-UI-Fill-Default);
border-radius: 100%;
transition: all 200ms;
}
}
.container[data-selected] {
.switch {
border-color: var(--Surface-UI-Fill-Active);
background: var(--Surface-UI-Fill-Active);
&:before {
background: var(--Surface-UI-Fill-Default);
transform: translateX(100%);
}
}
}
.container[data-focus-visible] .switch {
outline: 2px solid var(--focus-ring-color);
outline-offset: 2px;
}