nk_jtb 0.9.3 → 0.9.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/index.html +46 -17
- package/package.json +1 -1
- package/src/components/_misc.scss +0 -2
- package/src/forms/_toggle.scss +61 -38
package/index.html
CHANGED
|
@@ -6,11 +6,54 @@
|
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
|
|
7
7
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
8
|
<title>NayKel JTB</title>
|
|
9
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
+
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
|
10
10
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
11
11
|
</head>
|
|
12
12
|
|
|
13
|
-
<body>
|
|
13
|
+
<body">
|
|
14
|
+
|
|
15
|
+
<div class="quick-hide-div zebra">
|
|
16
|
+
<section id="radio-checkbox-slider" class="py-3">
|
|
17
|
+
<div class="container">
|
|
18
|
+
<h5>Radio</h5>
|
|
19
|
+
<div class="space-x">
|
|
20
|
+
<label><input type="radio" name="abc">Option</label>
|
|
21
|
+
<label><input type="radio" name="abc" checked>Checked</label>
|
|
22
|
+
<label><input type="radio" name="abc" disabled>Disabled</label>
|
|
23
|
+
</div>
|
|
24
|
+
<h5>Checkbox</h5>
|
|
25
|
+
<div class="space-x">
|
|
26
|
+
<label><input type="checkbox">Option</label>
|
|
27
|
+
<label><input type="checkbox" checked>Checked</label>
|
|
28
|
+
<label><input type="checkbox" disabled>Disabled</label>
|
|
29
|
+
</div>
|
|
30
|
+
<h5>Slider</h5>
|
|
31
|
+
<div class="space-x">
|
|
32
|
+
<label class="toggle">
|
|
33
|
+
<input type="checkbox">
|
|
34
|
+
<div class="slider"></div>
|
|
35
|
+
<span>Option</span>
|
|
36
|
+
</label>
|
|
37
|
+
<label class="toggle">
|
|
38
|
+
<input type="checkbox" checked>
|
|
39
|
+
<div class="slider"></div>
|
|
40
|
+
<span>Checked</span>
|
|
41
|
+
</label>
|
|
42
|
+
<label class="toggle">
|
|
43
|
+
<input type="checkbox" disabled>
|
|
44
|
+
<div class="slider"></div>
|
|
45
|
+
<span>Disabled</span>
|
|
46
|
+
</label>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</section>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- -->
|
|
53
|
+
<!-- -->
|
|
54
|
+
<!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
|
|
55
|
+
<!-- -->
|
|
56
|
+
<!-- -->
|
|
14
57
|
<div class="container py-5">
|
|
15
58
|
<div class="overflow-x-auto rounded-lg bdr">
|
|
16
59
|
<table>
|
|
@@ -528,21 +571,7 @@
|
|
|
528
571
|
<section id="button-and-form-controls">
|
|
529
572
|
<div class="container">
|
|
530
573
|
|
|
531
|
-
<label><input type="radio" name="abc">Default Radio</label>
|
|
532
|
-
<label><input type="radio" name="abc">Checked State</label>
|
|
533
|
-
|
|
534
|
-
<div class="frm-row">
|
|
535
|
-
<label><input type="radio" name="abc">Default Radio</label>
|
|
536
|
-
<label><input type="radio" name="abc">Checked State</label>
|
|
537
|
-
</div>
|
|
538
|
-
|
|
539
574
|
|
|
540
|
-
<hr>
|
|
541
|
-
<label><input class="wh-3" type="radio" name="abc">Default Radio</label>
|
|
542
|
-
<label><input class="wh-3" type="radio" name="abc">Checked State</label>
|
|
543
|
-
<hr>
|
|
544
|
-
<label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Default Radio</label>
|
|
545
|
-
<label class="inline-flex va-c"><input class="wh-3" type="radio" name="abc">Checked State</label>
|
|
546
575
|
|
|
547
576
|
|
|
548
577
|
|
|
@@ -1390,6 +1419,6 @@
|
|
|
1390
1419
|
|
|
1391
1420
|
<div id="app"></div>
|
|
1392
1421
|
<script type="module" src="/main.js"></script>
|
|
1393
|
-
</body>
|
|
1422
|
+
</body>
|
|
1394
1423
|
|
|
1395
1424
|
</html>
|
package/package.json
CHANGED
package/src/forms/_toggle.scss
CHANGED
|
@@ -1,56 +1,79 @@
|
|
|
1
|
-
@use "../
|
|
1
|
+
@use "../variables/base" as *;
|
|
2
|
+
@use "sass:math";
|
|
3
|
+
|
|
4
|
+
// ==========================================================================
|
|
5
|
+
// -- TOGGLE SWITCH --
|
|
6
|
+
// ==========================================================================
|
|
7
|
+
// Variables:
|
|
8
|
+
// - $toggle-height: The height of the toggle switch.
|
|
9
|
+
//
|
|
10
|
+
// - $toggle-width: The width of the toggle switch, which is twice the height.
|
|
11
|
+
//
|
|
12
|
+
// - $toggle-ball-size: The size of the ball within the toggle switch. It's
|
|
13
|
+
// calculated by subtracting a value from the toggle height to create a gap
|
|
14
|
+
// at the top and bottom of the ball.
|
|
15
|
+
//
|
|
16
|
+
// - $toggle-padding: The padding around the slider. It's calculated based on
|
|
17
|
+
// the toggle height and ball size to create a gap at the left and right of
|
|
18
|
+
// the ball when it's in its default (unchecked) position.
|
|
19
|
+
//
|
|
20
|
+
|
|
21
|
+
$toggle-height: 1.5rem;
|
|
22
|
+
$toggle-width: $toggle-height * 2;
|
|
23
|
+
$toggle-ball-size: $toggle-height - 0.5rem;
|
|
24
|
+
$toggle-padding: math.div($toggle-height - $toggle-ball-size, 2);
|
|
25
|
+
|
|
26
|
+
$toggle-off-bg: rgb(229, 231, 235) !default;
|
|
27
|
+
$toggle-on-bg: $primary !default;
|
|
28
|
+
$toggle-ball-bg: rgb(253, 253, 253) !default;
|
|
2
29
|
|
|
3
|
-
$toggle-body-height: 1.5rem;
|
|
4
|
-
$toggle-body-width: 3rem;
|
|
5
|
-
$toggle-gap: 0.25rem;
|
|
6
30
|
|
|
7
31
|
.toggle {
|
|
8
32
|
position: relative;
|
|
9
33
|
display: inline-flex;
|
|
10
34
|
align-items: center;
|
|
11
|
-
|
|
35
|
+
justify-content: flex-start;
|
|
36
|
+
width: auto;
|
|
12
37
|
|
|
13
|
-
input
|
|
14
|
-
|
|
38
|
+
input {
|
|
39
|
+
opacity: 0;
|
|
15
40
|
width: 0;
|
|
16
|
-
|
|
41
|
+
height: 0;
|
|
42
|
+
margin-inline-end: 0; // Override margin in form.scss
|
|
17
43
|
}
|
|
18
44
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
width: $toggle-
|
|
23
|
-
height: $toggle-
|
|
24
|
-
background-color:
|
|
45
|
+
.slider {
|
|
46
|
+
position: relative;
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
width: $toggle-width;
|
|
49
|
+
height: $toggle-height;
|
|
50
|
+
background-color: $toggle-off-bg;
|
|
51
|
+
transition: 0.4s;
|
|
52
|
+
border-radius: $toggle-height;
|
|
53
|
+
padding: $toggle-padding;
|
|
54
|
+
margin-right: 0.5rem;
|
|
25
55
|
|
|
26
|
-
|
|
27
|
-
&::after {
|
|
56
|
+
&:before {
|
|
28
57
|
position: absolute;
|
|
29
58
|
content: "";
|
|
30
|
-
height:
|
|
31
|
-
width:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
background-color: hsl(0, 0%, 100%);
|
|
36
|
-
border-color: rgba(0, 0, 0, 0.15);
|
|
37
|
-
border-radius: 9999px;
|
|
38
|
-
border-width: 1px;
|
|
39
|
-
@extend .transition;
|
|
59
|
+
height: $toggle-ball-size;
|
|
60
|
+
width: $toggle-ball-size;
|
|
61
|
+
background-color: $toggle-ball-bg;
|
|
62
|
+
transition: 0.4s;
|
|
63
|
+
border-radius: 50%;
|
|
40
64
|
}
|
|
41
65
|
}
|
|
42
66
|
|
|
43
|
-
input
|
|
44
|
-
|
|
45
|
-
~ div {
|
|
46
|
-
background-color: hsl(100, 70%, 40%);
|
|
47
|
-
@extend .transition;
|
|
48
|
-
// toggle when checked
|
|
49
|
-
&::after {
|
|
50
|
-
// background-color: hsl(50, 10%, 10%);
|
|
51
|
-
transform: translateX(calc($toggle-body-width - $toggle-body-height));
|
|
52
|
-
@extend .transition;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
67
|
+
input:checked + .slider {
|
|
68
|
+
background-color: $toggle-on-bg;
|
|
55
69
|
}
|
|
70
|
+
|
|
71
|
+
input:focus + .slider {
|
|
72
|
+
box-shadow: 0 0 1px #2196f3;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
input:checked + .slider:before {
|
|
76
|
+
transform: translateX($toggle-width - $toggle-ball-size - 2 * $toggle-padding);
|
|
77
|
+
}
|
|
78
|
+
|
|
56
79
|
}
|