Skip to content

Commit 75448de

Browse files
OhsweddOhswedd
committed
Stable Toggle Component Release
1 parent 5b8ccf2 commit 75448de

File tree

2 files changed

+137
-100
lines changed

2 files changed

+137
-100
lines changed

‎demo.html‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -665,50 +665,52 @@ <h2 class="font-lg text-primary my-4">MultiSelect Component Demo</h2>
665665
</div>
666666
</section>
667667

668-
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">
669-
<h2 class="font-lg text-primary my-4">Toggle Component Demo</h2>
670-
671-
<!-- Primary Toggle -->
672-
<label class="toggle" data-variant="primary">
673-
<input type="checkbox" />
674-
<span class="toggle-label">Primary Toggle</span>
675-
</label>
676-
677-
<!-- Success Toggle -->
678-
<label class="toggle" data-variant="success">
679-
<input type="checkbox" />
680-
<span class="toggle-label">Success Toggle</span>
681-
</label>
682-
683-
<!-- Danger Toggle -->
684-
<label class="toggle" data-variant="danger">
685-
<input type="checkbox" />
686-
<span class="toggle-label">Danger Toggle</span>
687-
</label>
688-
689-
<!-- Warning Toggle -->
690-
<label class="toggle" data-variant="warning">
691-
<input type="checkbox" />
692-
<span class="toggle-label">Warning Toggle</span>
693-
</label>
694-
695-
<!-- Info Toggle -->
696-
<label class="toggle" data-variant="info">
697-
<input type="checkbox" />
698-
<span class="toggle-label">Info Toggle</span>
699-
</label>
700-
701-
<!-- Disabled Toggle -->
702-
<label class="toggle" data-variant="primary">
703-
<input type="checkbox" disabled />
704-
<span class="toggle-label">Disabled Toggle</span>
705-
</label>
706-
707-
<!-- Readonly Toggle -->
708-
<label class="toggle" data-variant="secondary" data-state="readonly" readonly>
709-
<input type="checkbox" />
710-
<span class="toggle-label">Readonly Toggle</span>
711-
</label>
668+
<section class="p-6 bg-neutral-50 shadow-lg rounded-lg my-8">
669+
<h2 class="font-xl text-primary mb-6">Toggle Component Demo</h2>
670+
671+
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
672+
<!-- Primary Toggle -->
673+
<label class="kroma-toggle" data-variant="primary">
674+
<input type="checkbox" />
675+
<span class="kroma-toggle-label">Primary Toggle</span>
676+
</label>
677+
678+
<!-- Success Toggle -->
679+
<label class="kroma-toggle" data-variant="success">
680+
<input type="checkbox" />
681+
<span class="kroma-toggle-label">Success Toggle</span>
682+
</label>
683+
684+
<!-- Danger Toggle -->
685+
<label class="kroma-toggle" data-variant="danger">
686+
<input type="checkbox" />
687+
<span class="kroma-toggle-label">Danger Toggle</span>
688+
</label>
689+
690+
<!-- Warning Toggle -->
691+
<label class="kroma-toggle" data-variant="warning">
692+
<input type="checkbox" />
693+
<span class="kroma-toggle-label">Warning Toggle</span>
694+
</label>
695+
696+
<!-- Info Toggle -->
697+
<label class="kroma-toggle" data-variant="info">
698+
<input type="checkbox" />
699+
<span class="kroma-toggle-label">Info Toggle</span>
700+
</label>
701+
702+
<!-- Disabled Toggle -->
703+
<label class="kroma-toggle" data-variant="primary">
704+
<input type="checkbox" disabled />
705+
<span class="kroma-toggle-label">Disabled Toggle</span>
706+
</label>
707+
708+
<!-- Readonly Toggle -->
709+
<label class="kroma-toggle" data-variant="secondary" data-state="readonly">
710+
<input type="checkbox" />
711+
<span class="kroma-toggle-label">Readonly Toggle</span>
712+
</label>
713+
</div>
712714
</section>
713715

714716
<section class="p-4 bg-neutral-50 shadow-md rounded my-6">

‎src/css/components/toggle.css‎

Lines changed: 91 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
/* General Toggle Styling */
2-
.toggle {
2+
.kroma-toggle {
33
display: inline-flex;
44
align-items: center;
55
gap: var(--space-2);
6-
}
7-
8-
/* Label */
9-
.toggle-label {
6+
}
7+
8+
/* Label */
9+
.kroma-toggle-label {
1010
font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem);
1111
color: var(--neutral-700);
12-
}
13-
14-
/* Base Checkbox Styling */
15-
.toggle input[type="checkbox"] {
12+
cursor: pointer;
13+
}
14+
15+
/* Base Checkbox Styling */
16+
.kroma-toggle input[type="checkbox"] {
1617
position: relative;
1718
width: clamp(var(--space-10), 5vw, var(--space-16));
1819
height: clamp(var(--space-5), 3vw, var(--space-8));
@@ -24,10 +25,34 @@
2425
cursor: pointer;
2526
transition: background-color var(--transition-colors), box-shadow var(--transition-all);
2627
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
27-
}
28-
29-
/* Toggle Knob */
30-
.toggle input[type="checkbox"]::before {
28+
overflow: hidden;
29+
display: inline-flex;
30+
}
31+
32+
/* Ripple Effect for Toggle */
33+
.kroma-toggle input[type="checkbox"]::after {
34+
content: "";
35+
position: absolute;
36+
top: 50%;
37+
left: 50%;
38+
width: 0;
39+
height: 0;
40+
border-radius: 50%;
41+
background-color: rgba(255, 255, 255, 0.6);
42+
transform: translate(-50%, -50%) scale(1);
43+
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
44+
opacity: 0;
45+
}
46+
47+
/* Ripple Animation on Interaction */
48+
.kroma-toggle input[type="checkbox"]:checked::after {
49+
transform: translate(-50%, -50%) scale(3);
50+
opacity: 0;
51+
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
52+
}
53+
54+
/* Toggle Knob */
55+
.kroma-toggle input[type="checkbox"]::before {
3156
content: "";
3257
width: clamp(var(--space-5), 2vw, var(--space-8));
3358
height: clamp(var(--space-5), 2vw, var(--space-8));
@@ -37,67 +62,77 @@
3762
top: 50%;
3863
left: var(--space-1);
3964
transform: translateY(-50%);
40-
transition: transform var(--transition-transform), background-color var(--transition-colors), box-shadow var(--transition-all);
65+
transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
4166
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
4267
z-index: 1;
43-
}
44-
45-
/* Checked State */
46-
.toggle input[type="checkbox"]:checked {
68+
}
69+
70+
/* Checked State */
71+
.kroma-toggle input[type="checkbox"]:checked {
4772
background-color: var(--variant-light-bg);
4873
box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5);
49-
}
50-
51-
.toggle input[type="checkbox"]:checked::before {
74+
}
75+
76+
.kroma-toggle input[type="checkbox"]:checked::before {
5277
transform: translate(calc(100% - var(--space-1)), -50%);
5378
background-color: var(--variant-bg);
54-
}
55-
56-
/* Disabled State */
57-
.toggle input[type="checkbox"]:disabled {
79+
}
80+
81+
/* Disabled State */
82+
.kroma-toggle input[type="checkbox"]:disabled {
5883
background-color: var(--neutral-200);
5984
cursor: not-allowed;
6085
opacity: 0.6;
61-
}
62-
.toggle input[type="checkbox"]:disabled::before {
86+
}
87+
.kroma-toggle input[type="checkbox"]:disabled::before {
6388
background-color: var(--neutral-400);
64-
}
65-
.toggle input[type="checkbox"]:disabled:checked {
89+
}
90+
.kroma-toggle input[type="checkbox"]:disabled:checked {
6691
background-color: var(--neutral-300);
67-
}
68-
.toggle input[type="checkbox"]:disabled:checked::before {
92+
}
93+
.kroma-toggle input[type="checkbox"]:disabled:checked::before {
6994
background-color: var(--neutral-400);
70-
}
71-
72-
/* Readonly State */
73-
[data-state="readonly"] input[type="checkbox"] {
95+
}
96+
97+
/* Readonly State */
98+
[data-state="readonly"] input[type="checkbox"] {
7499
pointer-events: none;
75100
cursor: not-allowed;
76101
background-color: var(--neutral-200);
77-
}
78-
[data-state="readonly"] input[type="checkbox"]::before {
102+
}
103+
[data-state="readonly"] input[type="checkbox"]::before {
79104
background-color: var(--neutral-400);
80-
}
81-
[data-state="readonly"] input[type="checkbox"]:checked {
105+
}
106+
[data-state="readonly"] input[type="checkbox"]:checked {
82107
background-color: var(--neutral-300);
83-
}
84-
[data-state="readonly"] input[type="checkbox"]:checked::before {
108+
}
109+
[data-state="readonly"] input[type="checkbox"]:checked::before {
85110
background-color: var(--neutral-400);
86-
}
87-
88-
/* Responsive Adjustments */
89-
@media (max-width: 768px) {
90-
.toggle {
91-
gap: var(--space-1);
111+
}
112+
113+
/* Hover and Active States */
114+
.kroma-toggle input[type="checkbox"]:hover {
115+
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
116+
}
117+
.kroma-toggle input[type="checkbox"]:active::before {
118+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
119+
transform: scale(0.95) translate(calc(100% - var(--space-1)), -50%);
120+
}
121+
122+
/* Responsive Adjustments */
123+
@media (max-width: 768px) {
124+
.kroma-toggle {
125+
gap: var(--space-1);
92126
}
93-
94-
.toggle input[type="checkbox"] {
95-
width: clamp(var(--space-8), 4vw, var(--space-12));
96-
height: clamp(var(--space-4), 2vw, var(--space-6));
127+
128+
.kroma-toggle input[type="checkbox"] {
129+
width: clamp(var(--space-8), 4vw, var(--space-12));
130+
height: clamp(var(--space-4), 2vw, var(--space-6));
97131
}
98-
99-
.toggle input[type="checkbox"]::before {
100-
width: clamp(var(--space-4), 1.5vw, var(--space-5));
101-
height: clamp(var(--space-4), 1.5vw, var(--space-5));
132+
133+
.kroma-toggle input[type="checkbox"]::before {
134+
width: clamp(var(--space-4), 1.5vw, var(--space-5));
135+
height: clamp(var(--space-4), 1.5vw, var(--space-5));
102136
}
103-
}
137+
}
138+

0 commit comments

Comments
 (0)