ngx-pk-ui 1.1.4 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/styles/pk-toggle.css +190 -0
- package/styles/pk-ui.css +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,190 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* pk-toggle — Toggle switch CSS for ngx-pk-ui
|
|
3
|
+
*
|
|
4
|
+
* Replaces <input type="checkbox"> with a styled toggle switch.
|
|
5
|
+
* Uses a visually-hidden checkbox + sibling label — fully accessible,
|
|
6
|
+
* keyboard-operable, and works without any JavaScript.
|
|
7
|
+
*
|
|
8
|
+
* Structure:
|
|
9
|
+
* <label class="pk-toggle">
|
|
10
|
+
* <input type="checkbox" />
|
|
11
|
+
* <span class="pk-toggle__track"></span>
|
|
12
|
+
* <span class="pk-toggle__label">Label text</span> ← optional
|
|
13
|
+
* </label>
|
|
14
|
+
*
|
|
15
|
+
* Variants: pk-toggle-primary (default) | pk-toggle-success | pk-toggle-warn | pk-toggle-error
|
|
16
|
+
* Modifiers: pk-toggle-sm | pk-toggle-lg | pk-toggle-label-left
|
|
17
|
+
*
|
|
18
|
+
* Usage:
|
|
19
|
+
* <label class="pk-toggle">
|
|
20
|
+
* <input type="checkbox" />
|
|
21
|
+
* <span class="pk-toggle__track"></span>
|
|
22
|
+
* </label>
|
|
23
|
+
*
|
|
24
|
+
* <label class="pk-toggle pk-toggle-success">
|
|
25
|
+
* <input type="checkbox" checked />
|
|
26
|
+
* <span class="pk-toggle__track"></span>
|
|
27
|
+
* <span class="pk-toggle__label">Enable notifications</span>
|
|
28
|
+
* </label>
|
|
29
|
+
*
|
|
30
|
+
* <!-- Disabled -->
|
|
31
|
+
* <label class="pk-toggle">
|
|
32
|
+
* <input type="checkbox" disabled />
|
|
33
|
+
* <span class="pk-toggle__track"></span>
|
|
34
|
+
* <span class="pk-toggle__label">Disabled</span>
|
|
35
|
+
* </label>
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/* ─── CSS Custom Properties ───────────────────────────────────────── */
|
|
39
|
+
|
|
40
|
+
:root {
|
|
41
|
+
--pk-toggle-off-bg: #bdbdbd;
|
|
42
|
+
--pk-toggle-thumb: #fff;
|
|
43
|
+
--pk-toggle-shadow: 0 1px 4px rgba(0,0,0,0.25);
|
|
44
|
+
--pk-toggle-duration: 0.22s;
|
|
45
|
+
|
|
46
|
+
/* Track dimensions (md) */
|
|
47
|
+
--pk-toggle-width: 44px;
|
|
48
|
+
--pk-toggle-height: 24px;
|
|
49
|
+
--pk-toggle-thumb-size: 18px;
|
|
50
|
+
--pk-toggle-thumb-inset: 3px;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* ─── Wrapper label ───────────────────────────────────────────────── */
|
|
54
|
+
|
|
55
|
+
.pk-toggle {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
gap: 10px;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
user-select: none;
|
|
61
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
62
|
+
font-size: 0.9rem;
|
|
63
|
+
color: #333;
|
|
64
|
+
vertical-align: middle;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ─── Visually-hidden native checkbox ────────────────────────────── */
|
|
68
|
+
|
|
69
|
+
.pk-toggle input[type="checkbox"] {
|
|
70
|
+
position: absolute;
|
|
71
|
+
width: 1px;
|
|
72
|
+
height: 1px;
|
|
73
|
+
margin: -1px;
|
|
74
|
+
padding: 0;
|
|
75
|
+
overflow: hidden;
|
|
76
|
+
clip: rect(0, 0, 0, 0);
|
|
77
|
+
white-space: nowrap;
|
|
78
|
+
border: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* ─── Track ───────────────────────────────────────────────────────── */
|
|
82
|
+
|
|
83
|
+
.pk-toggle__track {
|
|
84
|
+
position: relative;
|
|
85
|
+
display: inline-block;
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
width: var(--pk-toggle-width);
|
|
88
|
+
height: var(--pk-toggle-height);
|
|
89
|
+
background-color: var(--pk-toggle-off-bg);
|
|
90
|
+
border-radius: 9999px;
|
|
91
|
+
transition: background-color var(--pk-toggle-duration) ease;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Thumb (pseudo-element) */
|
|
95
|
+
.pk-toggle__track::after {
|
|
96
|
+
content: '';
|
|
97
|
+
position: absolute;
|
|
98
|
+
top: var(--pk-toggle-thumb-inset);
|
|
99
|
+
left: var(--pk-toggle-thumb-inset);
|
|
100
|
+
width: var(--pk-toggle-thumb-size);
|
|
101
|
+
height: var(--pk-toggle-thumb-size);
|
|
102
|
+
background-color: var(--pk-toggle-thumb);
|
|
103
|
+
border-radius: 50%;
|
|
104
|
+
box-shadow: var(--pk-toggle-shadow);
|
|
105
|
+
transition: transform var(--pk-toggle-duration) ease,
|
|
106
|
+
box-shadow var(--pk-toggle-duration) ease;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ─── Checked state — default (primary) ──────────────────────────── */
|
|
110
|
+
|
|
111
|
+
.pk-toggle input[type="checkbox"]:checked + .pk-toggle__track {
|
|
112
|
+
background-color: var(--pk-btn-primary, #1976d2);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.pk-toggle input[type="checkbox"]:checked + .pk-toggle__track::after {
|
|
116
|
+
transform: translateX(calc(var(--pk-toggle-width) - var(--pk-toggle-thumb-size) - var(--pk-toggle-thumb-inset) * 2));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ─── Focus ring (keyboard accessibility) ────────────────────────── */
|
|
120
|
+
|
|
121
|
+
.pk-toggle input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
122
|
+
outline: 2px solid var(--pk-btn-primary, #1976d2);
|
|
123
|
+
outline-offset: 2px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
/* ─── Disabled ────────────────────────────────────────────────────── */
|
|
127
|
+
|
|
128
|
+
.pk-toggle input[type="checkbox"]:disabled + .pk-toggle__track {
|
|
129
|
+
opacity: 0.45;
|
|
130
|
+
cursor: not-allowed;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.pk-toggle:has(input[type="checkbox"]:disabled) {
|
|
134
|
+
cursor: not-allowed;
|
|
135
|
+
color: #9e9e9e;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* ─── Color Variants ──────────────────────────────────────────────── */
|
|
139
|
+
|
|
140
|
+
.pk-toggle-success input[type="checkbox"]:checked + .pk-toggle__track {
|
|
141
|
+
background-color: var(--pk-btn-success, #43a047);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.pk-toggle-success input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
145
|
+
outline-color: var(--pk-btn-success, #43a047);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.pk-toggle-warn input[type="checkbox"]:checked + .pk-toggle__track {
|
|
149
|
+
background-color: var(--pk-btn-warn, #fb8c00);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.pk-toggle-warn input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
153
|
+
outline-color: var(--pk-btn-warn, #fb8c00);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.pk-toggle-error input[type="checkbox"]:checked + .pk-toggle__track {
|
|
157
|
+
background-color: var(--pk-btn-error, #e53935);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.pk-toggle-error input[type="checkbox"]:focus-visible + .pk-toggle__track {
|
|
161
|
+
outline-color: var(--pk-btn-error, #e53935);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* ─── Size: sm ────────────────────────────────────────────────────── */
|
|
165
|
+
|
|
166
|
+
.pk-toggle-sm {
|
|
167
|
+
--pk-toggle-width: 34px;
|
|
168
|
+
--pk-toggle-height: 18px;
|
|
169
|
+
--pk-toggle-thumb-size: 12px;
|
|
170
|
+
--pk-toggle-thumb-inset: 3px;
|
|
171
|
+
font-size: 0.8rem;
|
|
172
|
+
gap: 7px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* ─── Size: lg ────────────────────────────────────────────────────── */
|
|
176
|
+
|
|
177
|
+
.pk-toggle-lg {
|
|
178
|
+
--pk-toggle-width: 56px;
|
|
179
|
+
--pk-toggle-height: 30px;
|
|
180
|
+
--pk-toggle-thumb-size: 22px;
|
|
181
|
+
--pk-toggle-thumb-inset: 4px;
|
|
182
|
+
font-size: 1rem;
|
|
183
|
+
gap: 12px;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* ─── Label on the left ───────────────────────────────────────────── */
|
|
187
|
+
|
|
188
|
+
.pk-toggle-label-left {
|
|
189
|
+
flex-direction: row-reverse;
|
|
190
|
+
}
|