mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
78 lines
1.4 KiB
CSS
78 lines
1.4 KiB
CSS
.a11y-panel-enter-active {
|
|
animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
.a11y-panel-leave-active {
|
|
animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
|
|
}
|
|
|
|
.ios-toggle {
|
|
position: relative;
|
|
width: 42px;
|
|
height: 24px;
|
|
background: #e5e5e5;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.ios-toggle input {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
z-index: 1;
|
|
}
|
|
|
|
.ios-toggle::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
transition:
|
|
transform 0.3s ease,
|
|
background-color 0.3s ease;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
z-index: 0;
|
|
}
|
|
|
|
.ios-toggle input:checked + .toggle-track::after {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
.ios-toggle input:checked + .toggle-track {
|
|
background: rgba(var(--color-primary-500), 1);
|
|
}
|
|
|
|
.ios-toggle input:checked ~ .ios-toggle-ball {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
.ios-toggle.is-checked {
|
|
background: rgba(var(--color-primary-500), 1);
|
|
}
|
|
|
|
.ios-toggle:has(input:checked) {
|
|
background: rgba(var(--color-primary-500), 1);
|
|
}
|
|
|
|
.ios-toggle:has(input:checked)::after {
|
|
transform: translateX(18px);
|
|
}
|
|
|
|
.dark .ios-toggle {
|
|
background: #404040;
|
|
}
|
|
|
|
.dark .ios-toggle::after {
|
|
background: #f5f5f5;
|
|
}
|