@popovandrii/ui-elements 0.0.4 → 0.0.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/dist/SpinBox.d.ts +2 -0
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +67 -61
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/SpinBox.d.ts
CHANGED
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var T=Object.defineProperty;var
|
|
1
|
+
"use strict";var T=Object.defineProperty;var K=n=>{throw TypeError(n)};var _=(n,t,i)=>t in n?T(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i;var w=(n,t,i)=>_(n,typeof t!="symbol"?t+"":t,i),D=(n,t,i)=>t.has(n)||K("Cannot "+i);var b=(n,t,i)=>(D(n,t,"read from private field"),i?i.call(n):t.get(n)),L=(n,t,i)=>t.has(n)?K("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(n):t.set(n,i);var g=(n,t,i)=>(D(n,t,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var c,f,k;class q{constructor(t={}){L(this,f);w(this,"selectors");w(this,"spinBoxes");L(this,c,(t,i,u,d=0,e=0)=>{t==d||t<d?(i.classList.add(this.selectors.disabledBtn),i.disabled=!0):(i.classList.remove(this.selectors.disabledBtn),i.disabled=!1),t==e||t>e?(u.classList.add(this.selectors.disabledBtn),u.disabled=!0):(u.classList.remove(this.selectors.disabledBtn),u.disabled=!1)});const i={main:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...i,...t},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),g(this,f,k).call(this)}}c=new WeakMap,f=new WeakSet,k=function(){this.spinBoxes.forEach(t=>{const i=t.querySelectorAll(`.${this.selectors.btn}`),u=i[0],d=i[1],e=t.querySelector(`.${this.selectors.input}`),o=Number(t.dataset.step),l=Number(t.dataset.min),r=Number(t.dataset.max),h=a=>{e.setAttribute("aria-valuenow",String(a)),e.setAttribute("aria-valuetext",`${a} items`)};Number(e.value)<=l&&(e.value=l.toFixed(o)),Number(e.value)>=r&&(e.value=r.toFixed(o)),l&&e.setAttribute("aria-valuemin",l.toFixed(o)),r&&e.setAttribute("aria-valuemax",r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,l,r),h(l);let v=null;const p=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s+1*a/Math.pow(10,o),s>r&&(s=r),e.value=s.toFixed(o),b(this,c).call(this,Number(e.value),u,d,l,r),h(s)},x=(a=1)=>{e.value=String(Math.abs(Number(e.value)));let s=parseFloat(e.value)||0;s=s-1*a/Math.pow(10,o),s<l&&(s=l),e.value=s.toFixed(o),b(this,c).call(this,Number(e.value),u,d,l,r),h(s)},m=(a,s=150)=>{v===null&&(v=window.setInterval(a,s))},N=()=>{v!==null&&(clearInterval(v),v=null)};d.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;m(()=>p(s))}),d.addEventListener("touchstart",()=>m(p)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{d.addEventListener(a,N)}),d.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&p(s)}),u.addEventListener("click",a=>{const s=a.shiftKey?3:1;v===null&&x(s)}),u.addEventListener("mousedown",a=>{const s=a.shiftKey?3:1;m(()=>x(s),100)}),u.addEventListener("touchstart",()=>m(x,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(a=>{u.addEventListener(a,N)}),e.addEventListener("keydown",a=>{const s=a.key,M=a.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(s)||(a.ctrlKey||a.metaKey)&&["a","c","v","x"].includes(s.toLowerCase()))return;if(["e","+","-"].includes(s)){a.preventDefault();return}if(s==="ArrowUp"||s==="ArrowDown"){a.preventDefault();const S=parseFloat(e.value)||0,B=1*M/Math.pow(10,o);let y=s==="ArrowUp"?S+B:S-B;y<l&&(y=l),e.value=y.toFixed(o),Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,l,r);return}const E=s===","?".":s,F=/^[0-9]$/.test(E),A=E===".",$=e.value.includes(".");(o===0&&!F||o>0&&!(F||A)||A&&$)&&a.preventDefault()}),e.addEventListener("keyup",()=>{Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,l,r)}),e.addEventListener("change",()=>{Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,l,r)})})};exports.SpinBox=q;
|
package/dist/index.es.js
CHANGED
|
@@ -1,71 +1,77 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
throw TypeError(
|
|
1
|
+
var _ = Object.defineProperty;
|
|
2
|
+
var S = (n) => {
|
|
3
|
+
throw TypeError(n);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
class
|
|
5
|
+
var q = (n, t, i) => t in n ? _(n, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : n[t] = i;
|
|
6
|
+
var w = (n, t, i) => q(n, typeof t != "symbol" ? t + "" : t, i), D = (n, t, i) => t.has(n) || S("Cannot " + i);
|
|
7
|
+
var m = (n, t, i) => (D(n, t, "read from private field"), i ? i.call(n) : t.get(n)), L = (n, t, i) => t.has(n) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(n) : t.set(n, i);
|
|
8
|
+
var k = (n, t, i) => (D(n, t, "access private method"), i);
|
|
9
|
+
var c, f, g;
|
|
10
|
+
class U {
|
|
11
11
|
constructor(t = {}) {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
t ==
|
|
12
|
+
L(this, f);
|
|
13
|
+
w(this, "selectors");
|
|
14
|
+
w(this, "spinBoxes");
|
|
15
|
+
L(this, c, (t, i, u, d = 0, e = 0) => {
|
|
16
|
+
t == d || t < d ? (i.classList.add(this.selectors.disabledBtn), i.disabled = !0) : (i.classList.remove(this.selectors.disabledBtn), i.disabled = !1), t == e || t > e ? (u.classList.add(this.selectors.disabledBtn), u.disabled = !0) : (u.classList.remove(this.selectors.disabledBtn), u.disabled = !1);
|
|
17
17
|
});
|
|
18
|
-
const
|
|
18
|
+
const i = {
|
|
19
19
|
main: "spin-box",
|
|
20
|
+
btn: "spin-box__btn",
|
|
21
|
+
input: "spin-box__input",
|
|
20
22
|
disabledBtn: "disabled"
|
|
21
23
|
};
|
|
22
|
-
this.selectors = { ...
|
|
24
|
+
this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
|
|
23
25
|
`.${this.selectors.main}`
|
|
24
|
-
),
|
|
26
|
+
), k(this, f, g).call(this);
|
|
25
27
|
}
|
|
26
28
|
}
|
|
27
|
-
|
|
29
|
+
c = new WeakMap(), f = new WeakSet(), g = function() {
|
|
28
30
|
this.spinBoxes.forEach((t) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
+
const i = t.querySelectorAll(
|
|
32
|
+
`.${this.selectors.btn}`
|
|
33
|
+
), u = i[0], d = i[1], e = t.querySelector(
|
|
34
|
+
`.${this.selectors.input}`
|
|
35
|
+
), o = Number(t.dataset.step), l = Number(t.dataset.min), r = Number(t.dataset.max), h = (a) => {
|
|
36
|
+
e.setAttribute("aria-valuenow", String(a)), e.setAttribute("aria-valuetext", `${a} items`);
|
|
31
37
|
};
|
|
32
|
-
Number(e.value) <=
|
|
33
|
-
let
|
|
34
|
-
const
|
|
38
|
+
Number(e.value) <= l && (e.value = l.toFixed(o)), Number(e.value) >= r && (e.value = r.toFixed(o)), l && e.setAttribute("aria-valuemin", l.toFixed(o)), r && e.setAttribute("aria-valuemax", r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, l, r), h(l);
|
|
39
|
+
let v = null;
|
|
40
|
+
const p = (a = 1) => {
|
|
35
41
|
e.value = String(Math.abs(Number(e.value)));
|
|
36
42
|
let s = parseFloat(e.value) || 0;
|
|
37
|
-
s = s + 1 *
|
|
38
|
-
},
|
|
43
|
+
s = s + 1 * a / Math.pow(10, o), s > r && (s = r), e.value = s.toFixed(o), m(this, c).call(this, Number(e.value), u, d, l, r), h(s);
|
|
44
|
+
}, x = (a = 1) => {
|
|
39
45
|
e.value = String(Math.abs(Number(e.value)));
|
|
40
46
|
let s = parseFloat(e.value) || 0;
|
|
41
|
-
s = s - 1 *
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
-
|
|
47
|
+
s = s - 1 * a / Math.pow(10, o), s < l && (s = l), e.value = s.toFixed(o), m(this, c).call(this, Number(e.value), u, d, l, r), h(s);
|
|
48
|
+
}, b = (a, s = 150) => {
|
|
49
|
+
v === null && (v = window.setInterval(a, s));
|
|
50
|
+
}, N = () => {
|
|
51
|
+
v !== null && (clearInterval(v), v = null);
|
|
46
52
|
};
|
|
47
|
-
|
|
48
|
-
const s =
|
|
49
|
-
|
|
50
|
-
}),
|
|
51
|
-
(
|
|
52
|
-
|
|
53
|
+
d.addEventListener("mousedown", (a) => {
|
|
54
|
+
const s = a.shiftKey ? 3 : 1;
|
|
55
|
+
b(() => p(s));
|
|
56
|
+
}), d.addEventListener("touchstart", () => b(p)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
57
|
+
(a) => {
|
|
58
|
+
d.addEventListener(a, N);
|
|
53
59
|
}
|
|
54
|
-
),
|
|
55
|
-
const s =
|
|
56
|
-
|
|
57
|
-
}),
|
|
58
|
-
const s =
|
|
59
|
-
|
|
60
|
-
}),
|
|
61
|
-
const s =
|
|
62
|
-
|
|
63
|
-
}),
|
|
64
|
-
(
|
|
65
|
-
|
|
60
|
+
), d.addEventListener("click", (a) => {
|
|
61
|
+
const s = a.shiftKey ? 3 : 1;
|
|
62
|
+
v === null && p(s);
|
|
63
|
+
}), u.addEventListener("click", (a) => {
|
|
64
|
+
const s = a.shiftKey ? 3 : 1;
|
|
65
|
+
v === null && x(s);
|
|
66
|
+
}), u.addEventListener("mousedown", (a) => {
|
|
67
|
+
const s = a.shiftKey ? 3 : 1;
|
|
68
|
+
b(() => x(s), 100);
|
|
69
|
+
}), u.addEventListener("touchstart", () => b(x, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
70
|
+
(a) => {
|
|
71
|
+
u.addEventListener(a, N);
|
|
66
72
|
}
|
|
67
|
-
), e.addEventListener("keydown", (
|
|
68
|
-
const s =
|
|
73
|
+
), e.addEventListener("keydown", (a) => {
|
|
74
|
+
const s = a.key, M = a.shiftKey ? 3 : 1;
|
|
69
75
|
if ([
|
|
70
76
|
"Backspace",
|
|
71
77
|
"Delete",
|
|
@@ -75,28 +81,28 @@ d = new WeakMap(), f = new WeakSet(), k = function() {
|
|
|
75
81
|
"Enter",
|
|
76
82
|
"Home",
|
|
77
83
|
"End"
|
|
78
|
-
].includes(s) || (
|
|
84
|
+
].includes(s) || (a.ctrlKey || a.metaKey) && ["a", "c", "v", "x"].includes(s.toLowerCase()))
|
|
79
85
|
return;
|
|
80
86
|
if (["e", "+", "-"].includes(s)) {
|
|
81
|
-
|
|
87
|
+
a.preventDefault();
|
|
82
88
|
return;
|
|
83
89
|
}
|
|
84
90
|
if (s === "ArrowUp" || s === "ArrowDown") {
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
let
|
|
88
|
-
|
|
91
|
+
a.preventDefault();
|
|
92
|
+
const B = parseFloat(e.value) || 0, K = 1 * M / Math.pow(10, o);
|
|
93
|
+
let y = s === "ArrowUp" ? B + K : B - K;
|
|
94
|
+
y < l && (y = l), e.value = y.toFixed(o), Number(e.value) < l && (e.value = l.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, l, r);
|
|
89
95
|
return;
|
|
90
96
|
}
|
|
91
|
-
const
|
|
92
|
-
(
|
|
97
|
+
const E = s === "," ? "." : s, F = /^[0-9]$/.test(E), A = E === ".", $ = e.value.includes(".");
|
|
98
|
+
(o === 0 && !F || o > 0 && !(F || A) || A && $) && a.preventDefault();
|
|
93
99
|
}), e.addEventListener("keyup", () => {
|
|
94
|
-
Number(e.value) <
|
|
100
|
+
Number(e.value) < l && (e.value = l.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, l, r);
|
|
95
101
|
}), e.addEventListener("change", () => {
|
|
96
|
-
Number(e.value) <
|
|
102
|
+
Number(e.value) < l && (e.value = l.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, l, r);
|
|
97
103
|
});
|
|
98
104
|
});
|
|
99
105
|
};
|
|
100
106
|
export {
|
|
101
|
-
|
|
107
|
+
U as SpinBox
|
|
102
108
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.UiElements={}))})(this,function(i){"use strict";var U=Object.defineProperty;var
|
|
1
|
+
(function(i,a){typeof exports=="object"&&typeof module<"u"?a(exports):typeof define=="function"&&define.amd?define(["exports"],a):(i=typeof globalThis<"u"?globalThis:i||self,a(i.UiElements={}))})(this,function(i){"use strict";var U=Object.defineProperty;var D=i=>{throw TypeError(i)};var _=(i,a,n)=>a in i?U(i,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):i[a]=n;var E=(i,a,n)=>_(i,typeof a!="symbol"?a+"":a,n),g=(i,a,n)=>a.has(i)||D("Cannot "+n);var m=(i,a,n)=>(g(i,a,"read from private field"),n?n.call(i):a.get(i)),L=(i,a,n)=>a.has(i)?D("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(i):a.set(i,n);var k=(i,a,n)=>(g(i,a,"access private method"),n);var n,b,M;class a{constructor(c={}){L(this,b);E(this,"selectors");E(this,"spinBoxes");L(this,n,(c,v,r,d=0,e=0)=>{c==d||c<d?(v.classList.add(this.selectors.disabledBtn),v.disabled=!0):(v.classList.remove(this.selectors.disabledBtn),v.disabled=!1),c==e||c>e?(r.classList.add(this.selectors.disabledBtn),r.disabled=!0):(r.classList.remove(this.selectors.disabledBtn),r.disabled=!1)});const v={main:"spin-box",btn:"spin-box__btn",input:"spin-box__input",disabledBtn:"disabled"};this.selectors={...v,...c},this.spinBoxes=document.querySelectorAll(`.${this.selectors.main}`),k(this,b,M).call(this)}}n=new WeakMap,b=new WeakSet,M=function(){this.spinBoxes.forEach(c=>{const v=c.querySelectorAll(`.${this.selectors.btn}`),r=v[0],d=v[1],e=c.querySelector(`.${this.selectors.input}`),o=Number(c.dataset.step),l=Number(c.dataset.min),u=Number(c.dataset.max),p=s=>{e.setAttribute("aria-valuenow",String(s)),e.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=l&&(e.value=l.toFixed(o)),Number(e.value)>=u&&(e.value=u.toFixed(o)),l&&e.setAttribute("aria-valuemin",l.toFixed(o)),u&&e.setAttribute("aria-valuemax",u.toFixed(o)),m(this,n).call(this,Number(e.value),r,d,l,u),p(l);let f=null;const x=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t+1*s/Math.pow(10,o),t>u&&(t=u),e.value=t.toFixed(o),m(this,n).call(this,Number(e.value),r,d,l,u),p(t)},y=(s=1)=>{e.value=String(Math.abs(Number(e.value)));let t=parseFloat(e.value)||0;t=t-1*s/Math.pow(10,o),t<l&&(t=l),e.value=t.toFixed(o),m(this,n).call(this,Number(e.value),r,d,l,u),p(t)},h=(s,t=150)=>{f===null&&(f=window.setInterval(s,t))},N=()=>{f!==null&&(clearInterval(f),f=null)};d.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;h(()=>x(t))}),d.addEventListener("touchstart",()=>h(x)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{d.addEventListener(s,N)}),d.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&x(t)}),r.addEventListener("click",s=>{const t=s.shiftKey?3:1;f===null&&y(t)}),r.addEventListener("mousedown",s=>{const t=s.shiftKey?3:1;h(()=>y(t),100)}),r.addEventListener("touchstart",()=>h(y,100)),["mouseup","mouseleave","mouseout","touchend","touchcancel"].forEach(s=>{r.addEventListener(s,N)}),e.addEventListener("keydown",s=>{const t=s.key,T=s.shiftKey?3:1;if(["Backspace","Delete","ArrowLeft","ArrowRight","Tab","Enter","Home","End"].includes(t)||(s.ctrlKey||s.metaKey)&&["a","c","v","x"].includes(t.toLowerCase()))return;if(["e","+","-"].includes(t)){s.preventDefault();return}if(t==="ArrowUp"||t==="ArrowDown"){s.preventDefault();const B=parseFloat(e.value)||0,K=1*T/Math.pow(10,o);let w=t==="ArrowUp"?B+K:B-K;w<l&&(w=l),e.value=w.toFixed(o),Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,n).call(this,Number(e.value),r,d,l,u);return}const F=t===","?".":t,A=/^[0-9]$/.test(F),S=F===".",$=e.value.includes(".");(o===0&&!A||o>0&&!(A||S)||S&&$)&&s.preventDefault()}),e.addEventListener("keyup",()=>{Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,n).call(this,Number(e.value),r,d,l,u)}),e.addEventListener("change",()=>{Number(e.value)<l&&(e.value=l.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,n).call(this,Number(e.value),r,d,l,u)})})},i.SpinBox=a,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.spin-box{position:relative;display:grid;grid-template-columns:min-content 1fr min-content;align-items:center;width:13rem;height:2.5rem;-webkit-user-select:none;user-select:none;border:1px solid var(--c-g-500);border-radius:.5rem;background-color:var(--c-g-500)}.spin-box
|
|
1
|
+
.spin-box{position:relative;display:grid;grid-template-columns:min-content 1fr min-content;align-items:center;width:13rem;height:2.5rem;-webkit-user-select:none;user-select:none;border:1px solid var(--c-g-500);border-radius:.5rem;background-color:var(--c-g-500)}.spin-box>.spin-box__input{border:none;height:100%;outline:none;font-weight:700;font-size:1.5rem;text-align:center;background-color:var(--c-g-50);color:var(--c-g-700);width:100%;min-width:3rem;padding:0}.spin-box>.spin-box__input:focus{background-color:var(--c-g-50);color:var(--c-g-950)}.spin-box__txt{font-weight:400}.spin-box>.spin-box__btn{color:var(--c-g-900);display:flex;align-items:center;justify-content:center;border:none;height:100%;background-color:var(--c-g-300);padding:0;cursor:pointer;font-size:2rem;width:3rem}.spin-box>.spin-box__btn:hover{background-color:var(--c-g-500);color:var(--c-g-50)}.spin-box>.disabled{background-color:var(--c-g-100);color:var(--c-g-300);pointer-events:none}.spin-box>.spin-box__btn:first-child{border-right:1px solid var(--c-g-500);border-radius:.5rem 0 0 .5rem}.spin-box>.spin-box__btn:last-child{border-left:1px solid var(--c-g-500);border-radius:0 .5rem .5rem 0}.spin-box.radius-none{border-radius:0}.spin-box.radius-none>.spin-box__btn{border-radius:0}.spin-box.sm{height:2rem;width:10rem}.spin-box.sm>.spin-box__input,.spin-box.sm>.spin-box__btn{font-size:1rem}.spin-box.sm>.spin-box__btn{width:2rem}.spin-box.lg{height:3.5rem;width:16rem}.spin-box.lg>.spin-box__input,.spin-box.lg>.spin-box__btn{font-size:2rem}.spin-box.lg>.spin-box__btn{width:3.5rem}.spin-box.danger{background-color:var(--c-d-500);border-color:var(--c-d-500)}.spin-box.danger>.spin-box__input{background-color:var(--c-d-50);color:var(--c-d-700)}.spin-box.danger>.spin-box__input:focus{background-color:var(--c-d-50);color:var(--c-d-950)}.spin-box.danger>.spin-box__btn{color:var(--c-d-500);background-color:var(--c-d-300);border-color:var(--c-d-500)}.spin-box.danger>.spin-box__btn:hover{color:var(--c-d-300);background-color:var(--c-d-500)}.spin-box.danger>.disabled{background-color:var(--c-d-100);color:var(--c-d-300)}.spin-box.info{background-color:var(--c-i-500);border-color:var(--c-i-500)}.spin-box.info>.spin-box__input{background-color:var(--c-i-50);color:var(--c-i-700)}.spin-box.info>.spin-box__input:focus{background-color:var(--c-i-50);color:var(--c-i-950)}.spin-box.info>.spin-box__btn{color:var(--c-i-500);background-color:var(--c-i-300);border-color:var(--c-i-500)}.spin-box.info>.spin-box__btn:hover{color:var(--c-i-300);background-color:var(--c-i-500)}.spin-box.info>.disabled{background-color:var(--c-i-100);color:var(--c-i-300)}.spin-box.primary{background-color:var(--c-p-500);border-color:var(--c-p-500)}.spin-box.primary>.spin-box__input{background-color:var(--c-p-50);color:var(--c-p-700)}.spin-box.primary>.spin-box__input:focus{background-color:var(--c-p-50);color:var(--c-p-950)}.spin-box.primary>.spin-box__btn{color:var(--c-p-500);background-color:var(--c-p-300);border-color:var(--c-p-500)}.spin-box.primary>.spin-box__btn:hover{color:var(--c-p-300);background-color:var(--c-p-500)}.spin-box.primary>.disabled{background-color:var(--c-p-100);color:var(--c-p-300)}.spin-box.success{background-color:var(--c-s-500);border-color:var(--c-s-500)}.spin-box.success>.spin-box__input{background-color:var(--c-s-50);color:var(--c-s-700)}.spin-box.success>.spin-box__input:focus{background-color:var(--c-s-50);color:var(--c-s-950)}.spin-box.success>.spin-box__btn{color:var(--c-s-500);background-color:var(--c-s-300);border-color:var(--c-s-500)}.spin-box.success>.spin-box__btn:hover{color:var(--c-s-300);background-color:var(--c-s-500)}.spin-box.success>.disabled{background-color:var(--c-s-100);color:var(--c-s-300)}.spin-box.warning{background-color:var(--c-w-500);border-color:var(--c-w-500)}.spin-box.warning>.spin-box__input{background-color:var(--c-w-50);color:var(--c-w-700)}.spin-box.warning>.spin-box__input:focus{background-color:var(--c-w-50);color:var(--c-w-950)}.spin-box.warning>.spin-box__btn{color:var(--c-w-500);background-color:var(--c-w-300);border-color:var(--c-w-500)}.spin-box.warning>.spin-box__btn:hover{color:var(--c-w-300);background-color:var(--c-w-500)}.spin-box.warning>.disabled{background-color:var(--c-w-100);color:var(--c-w-300)}:root{--g-50: hsl(0, 0%, 95%);--g-100: hsl(0, 0%, 90%);--g-300: hsl(0, 0%, 70%);--g-500: hsl(0, 0%, 50%);--g-700: hsl(0, 0%, 30%);--g-900: hsl(0, 0%, 10%);--g-950: hsl(0, 0%, 5%);--d-50: hsl(354, 76%, 95%);--d-100: hsl(354, 76%, 90%);--d-300: hsl(354, 76%, 70%);--d-500: hsl(354, 76%, 50%);--d-700: hsl(354, 76%, 30%);--d-900: hsl(354, 76%, 10%);--d-950: hsl(354, 76%, 5%);--i-50: hsl(190, 90%, 95%);--i-100: hsl(190, 90%, 90%);--i-300: hsl(190, 90%, 70%);--i-500: hsl(190, 90%, 50%);--i-700: hsl(190, 90%, 30%);--i-900: hsl(190, 90%, 10%);--i-950: hsl(190, 90%, 5%);--p-50: hsl(216, 98%, 95%);--p-100: hsl(216, 98%, 90%);--p-300: hsl(216, 98%, 70%);--p-500: hsl(216, 98%, 50%);--p-700: hsl(216, 98%, 30%);--p-900: hsl(216, 98%, 10%);--p-950: hsl(216, 98%, 5%);--s-50: hsl(152, 81%, 95%);--s-100: hsl(152, 81%, 90%);--s-300: hsl(152, 81%, 70%);--s-500: hsl(152, 81%, 50%);--s-700: hsl(152, 81%, 30%);--s-900: hsl(152, 81%, 10%);--s-950: hsl(152, 81%, 5%);--w-50: hsl(45, 100%, 95%);--w-100: hsl(45, 100%, 90%);--w-300: hsl(45, 100%, 70%);--w-500: hsl(45, 100%, 50%);--w-700: hsl(45, 100%, 30%);--w-900: hsl(45, 100%, 10%);--w-950: hsl(45, 100%, 5%);--c-d-50: var(--d-50);--c-d-100: var(--d-100);--c-d-300: var(--d-300);--c-d-500: var(--d-500);--c-d-700: var(--d-700);--c-d-900: var(--d-900);--c-d-950: var(--d-950);--c-i-50: var(--i-50);--c-i-100: var(--i-100);--c-i-300: var(--i-300);--c-i-500: var(--i-500);--c-i-700: var(--i-700);--c-i-900: var(--i-900);--c-i-950: var(--i-950);--c-p-50: var(--p-50);--c-p-100: var(--p-100);--c-p-300: var(--p-300);--c-p-500: var(--p-500);--c-p-700: var(--p-700);--c-p-900: var(--p-900);--c-p-950: var(--p-950);--c-s-50: var(--s-50);--c-s-100: var(--s-100);--c-s-300: var(--s-300);--c-s-500: var(--s-500);--c-s-700: var(--s-700);--c-s-900: var(--s-900);--c-s-950: var(--s-950);--c-g-50: var(--g-50);--c-g-100: var(--g-100);--c-g-300: var(--g-300);--c-g-500: var(--g-500);--c-g-700: var(--g-700);--c-g-900: var(--g-900);--c-g-950: var(--g-950);--c-w-50: var(--w-50);--c-w-100: var(--w-100);--c-w-300: var(--w-300);--c-w-500: var(--w-500);--c-w-700: var(--w-700);--c-w-900: var(--w-900);--c-w-950: var(--w-950)}[data-theme=dark]{--c-d-50: var(--d-950);--c-d-100: var(--d-900);--c-d-300: var(--d-700);--c-d-500: var(--d-500);--c-d-700: var(--d-300);--c-d-900: var(--d-100);--c-d-950: var(--d-50);--c-i-50: var(--i-950);--c-i-100: var(--i-900);--c-i-300: var(--i-700);--c-i-500: var(--i-500);--c-i-700: var(--i-300);--c-i-900: var(--i-100);--c-i-950: var(--i-50);--c-p-50: var(--p-950);--c-p-100: var(--p-900);--c-p-300: var(--p-700);--c-p-500: var(--p-500);--c-p-700: var(--p-300);--c-p-900: var(--p-100);--c-p-950: var(--p-50);--c-s-50: var(--s-950);--c-s-100: var(--s-900);--c-s-300: var(--s-700);--c-s-500: var(--s-500);--c-s-700: var(--s-300);--c-s-900: var(--s-100);--c-s-950: var(--s-50);--c-g-50: var(--g-950);--c-g-100: var(--g-900);--c-g-300: var(--g-700);--c-g-500: var(--g-500);--c-g-700: var(--g-300);--c-g-900: var(--g-100);--c-g-950: var(--g-50);--c-w-50: var(--w-950);--c-w-100: var(--w-900);--c-w-300: var(--w-700);--c-w-500: var(--w-500);--c-w-700: var(--w-300);--c-w-900: var(--w-100);--c-w-950: var(--w-50)}
|