Skip to content

Commit ea4ae88

Browse files
OhsweddOhswedd
committed
Close #7 
1 parent 6bf439a commit ea4ae88

File tree

3 files changed

+147
-1
lines changed

3 files changed

+147
-1
lines changed

‎css/components/toggle.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/* General Styling */
2+
.toggle {
3+
display: inline-flex;
4+
align-items: center;
5+
cursor: pointer;
6+
gap: var(--space-2);
7+
}
8+
9+
.toggle-label {
10+
font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem);
11+
color: var(--neutral-700);
12+
}
13+
14+
/* Base Checkbox Styling */
15+
.toggle input[type="checkbox"] {
16+
position: relative;
17+
width: clamp(2.5rem, 5vw, 4rem);
18+
height: clamp(1.25rem, 3vw, 2rem);
19+
-webkit-appearance: none;
20+
appearance: none;
21+
background: var(--neutral-300);
22+
outline: none;
23+
border-radius: var(--radius-full);
24+
cursor: pointer;
25+
transition: background-color 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
26+
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
27+
}
28+
29+
/* Toggle Knob */
30+
.toggle input[type="checkbox"]::before {
31+
content: "";
32+
width: clamp(1.25rem, 2vw, 2rem);
33+
height: clamp(1.25rem, 2vw, 2rem);
34+
border-radius: 50%;
35+
background: #fff;
36+
position: absolute;
37+
top: 50%;
38+
left: 0.25rem;
39+
transform: translateY(-50%);
40+
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.35s ease-in-out, box-shadow 0.3s ease-in-out;
41+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
42+
z-index: 1;
43+
}
44+
45+
/* Checked State */
46+
.toggle input[type="checkbox"]:checked {
47+
background-color: var(--primary-light);
48+
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5);
49+
}
50+
51+
.toggle input[type="checkbox"]:checked::before {
52+
transform: translate(calc(100% - 0.25rem), -50%);
53+
background-color: var(--primary);
54+
}
55+
56+
/* Simulated Light Versions */
57+
.toggle-success input[type="checkbox"]:checked {
58+
background-color: rgba(16, 185, 129, 0.2); /* Light green */
59+
}
60+
61+
.toggle-danger input[type="checkbox"]:checked {
62+
background-color: rgba(239, 68, 68, 0.2); /* Light red */
63+
}
64+
65+
.toggle-warning input[type="checkbox"]:checked {
66+
background-color: rgba(245, 158, 11, 0.2); /* Light yellow */
67+
}
68+
69+
.toggle-info input[type="checkbox"]:checked {
70+
background-color: rgba(59, 130, 246, 0.2); /* Light blue */
71+
}
72+
73+
/* Icon Color Adjustments */
74+
.toggle-success input[type="checkbox"]:checked::before {
75+
background-color: var(--success);
76+
}
77+
78+
.toggle-danger input[type="checkbox"]:checked::before {
79+
background-color: var(--danger);
80+
}
81+
82+
.toggle-warning input[type="checkbox"]:checked::before {
83+
background-color: var(--warning);
84+
}
85+
86+
.toggle-info input[type="checkbox"]:checked::before {
87+
background-color: var(--info);
88+
}
89+
90+
/* Primary, Secondary, and Accent Variants */
91+
.toggle-primary input[type="checkbox"]:checked {
92+
background-color: var(--primary-light);
93+
}
94+
95+
.toggle-secondary input[type="checkbox"]:checked {
96+
background-color: var(--secondary-light);
97+
}
98+
99+
.toggle-primary input[type="checkbox"]:checked::before {
100+
background-color: var(--primary);
101+
}
102+
103+
.toggle-secondary input[type="checkbox"]:checked::before {
104+
background-color: var(--secondary);
105+
}
106+
107+
/* Disabled State */
108+
.toggle input[type="checkbox"]:disabled {
109+
background-color: var(--neutral-200);
110+
cursor: not-allowed;
111+
opacity: 0.6;
112+
}
113+
114+
.toggle input[type="checkbox"]:disabled::before {
115+
background-color: var(--neutral-400);
116+
}
117+
118+
.toggle input[type="checkbox"]:disabled:checked {
119+
background-color: var(--neutral-300);
120+
}
121+
122+
.toggle input[type="checkbox"]:disabled:checked::before {
123+
background-color: var(--neutral-400);
124+
}
125+
126+
/* Readonly State */
127+
.toggle-readonly {
128+
pointer-events: none;
129+
}
130+
131+
/* Responsive Adjustments */
132+
@media (max-width: 768px) {
133+
.toggle {
134+
gap: var(--space-1);
135+
}
136+
137+
.toggle input[type="checkbox"] {
138+
width: clamp(2rem, 4vw, 3rem);
139+
height: clamp(1rem, 2vw, 1.5rem);
140+
}
141+
142+
.toggle input[type="checkbox"]::before {
143+
width: clamp(1rem, 1.5vw, 1.25rem);
144+
height: clamp(1rem, 1.5vw, 1.25rem);
145+
}
146+
}

‎css/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,4 @@
2828
@import './components/toast.css';
2929
@import './components/tooltip.css';
3030
@import './components/breadcrumbs.css';
31+
@import './components/toggle.css';

‎js/main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ document.querySelectorAll('.alert-dismissible .alert-close').forEach(button => {
1313
});
1414
});
1515

16-
1716
// Export functions globally if needed
1817
window.toggleAccordion = toggleAccordion;
1918
window.showHologram = showHologram;

0 commit comments

Comments
 (0)