nk_jtb 0.9.3 → 0.9.4
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 +44 -17
- package/package.json +1 -1
- package/src/components/_misc.scss +0 -2
- package/src/forms/_toggle.scss +60 -38
package/index.html
CHANGED
|
@@ -6,11 +6,52 @@
|
|
|
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
|
+
<label class="toggle">
|
|
32
|
+
<input type="checkbox">
|
|
33
|
+
<div class="slider"></div>
|
|
34
|
+
<span class="toggle-label">Option</span>
|
|
35
|
+
</label>
|
|
36
|
+
<label class="toggle">
|
|
37
|
+
<input type="checkbox" checked>
|
|
38
|
+
<div class="slider"></div>
|
|
39
|
+
<span class="toggle-label">Checked</span>
|
|
40
|
+
</label>
|
|
41
|
+
<label class="toggle">
|
|
42
|
+
<input type="checkbox" disabled>
|
|
43
|
+
<div class="slider"></div>
|
|
44
|
+
<span class="toggle-label">Disabled</span>
|
|
45
|
+
</label>
|
|
46
|
+
</div>
|
|
47
|
+
</section>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- -->
|
|
51
|
+
<!-- -->
|
|
52
|
+
<!-- THIS IS ALL OVER THE PLACE AND NEEDS TO BE TIDIED UP! -->
|
|
53
|
+
<!-- -->
|
|
54
|
+
<!-- -->
|
|
14
55
|
<div class="container py-5">
|
|
15
56
|
<div class="overflow-x-auto rounded-lg bdr">
|
|
16
57
|
<table>
|
|
@@ -528,21 +569,7 @@
|
|
|
528
569
|
<section id="button-and-form-controls">
|
|
529
570
|
<div class="container">
|
|
530
571
|
|
|
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
572
|
|
|
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
573
|
|
|
547
574
|
|
|
548
575
|
|
|
@@ -1390,6 +1417,6 @@
|
|
|
1390
1417
|
|
|
1391
1418
|
<div id="app"></div>
|
|
1392
1419
|
<script type="module" src="/main.js"></script>
|
|
1393
|
-
</body>
|
|
1420
|
+
</body>
|
|
1394
1421
|
|
|
1395
1422
|
</html>
|
package/package.json
CHANGED
package/src/forms/_toggle.scss
CHANGED
|
@@ -1,56 +1,78 @@
|
|
|
1
|
-
@use "../
|
|
1
|
+
@use "../variables/base" as *;
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
@use "sass:math";
|
|
4
|
+
|
|
5
|
+
// ==========================================================================
|
|
6
|
+
// -- TOGGLE SWITCH --
|
|
7
|
+
// ==========================================================================
|
|
8
|
+
// Variables:
|
|
9
|
+
// - $toggle-height: The height of the toggle switch.
|
|
10
|
+
//
|
|
11
|
+
// - $toggle-width: The width of the toggle switch, which is twice the height.
|
|
12
|
+
//
|
|
13
|
+
// - $toggle-ball-size: The size of the ball within the toggle switch. It's
|
|
14
|
+
// calculated by subtracting a value from the toggle height to create a gap
|
|
15
|
+
// at the top and bottom of the ball.
|
|
16
|
+
//
|
|
17
|
+
// - $toggle-padding: The padding around the slider. It's calculated based on
|
|
18
|
+
// the toggle height and ball size to create a gap at the left and right of
|
|
19
|
+
// the ball when it's in its default (unchecked) position.
|
|
20
|
+
//
|
|
21
|
+
|
|
22
|
+
$toggle-height: 1.75rem;
|
|
23
|
+
$toggle-width: $toggle-height * 2;
|
|
24
|
+
$toggle-ball-size: $toggle-height - 0.5rem;
|
|
25
|
+
$toggle-padding: math.div($toggle-height - $toggle-ball-size, 2);
|
|
26
|
+
|
|
27
|
+
$toggle-off-bg: rgb(229, 231, 235) !default;
|
|
28
|
+
$toggle-on-bg: $primary !default;
|
|
29
|
+
$toggle-ball-bg: rgb(253, 253, 253) !default;
|
|
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;
|
|
17
42
|
}
|
|
18
43
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
width: $toggle-
|
|
23
|
-
height: $toggle-
|
|
24
|
-
background-color:
|
|
44
|
+
.slider {
|
|
45
|
+
position: relative;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
width: $toggle-width;
|
|
48
|
+
height: $toggle-height;
|
|
49
|
+
background-color: $toggle-off-bg;
|
|
50
|
+
transition: 0.4s;
|
|
51
|
+
border-radius: $toggle-height;
|
|
52
|
+
padding: $toggle-padding;
|
|
53
|
+
margin-right: 0.5rem;
|
|
25
54
|
|
|
26
|
-
|
|
27
|
-
&::after {
|
|
55
|
+
&:before {
|
|
28
56
|
position: absolute;
|
|
29
57
|
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;
|
|
58
|
+
height: $toggle-ball-size;
|
|
59
|
+
width: $toggle-ball-size;
|
|
60
|
+
background-color: $toggle-ball-bg;
|
|
61
|
+
transition: 0.4s;
|
|
62
|
+
border-radius: 50%;
|
|
40
63
|
}
|
|
41
64
|
}
|
|
42
65
|
|
|
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
|
-
}
|
|
66
|
+
input:checked + .slider {
|
|
67
|
+
background-color: $toggle-on-bg;
|
|
55
68
|
}
|
|
69
|
+
|
|
70
|
+
input:focus + .slider {
|
|
71
|
+
box-shadow: 0 0 1px #2196f3;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
input:checked + .slider:before {
|
|
75
|
+
transform: translateX($toggle-width - $toggle-ball-size - 2 * $toggle-padding);
|
|
76
|
+
}
|
|
77
|
+
|
|
56
78
|
}
|