@popovandrii/ui-elements 0.0.5 → 0.0.6
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/index.cjs.js +1 -1
- package/dist/index.es.js +22 -22
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var T=Object.defineProperty;var K=
|
|
1
|
+
"use strict";var T=Object.defineProperty;var K=l=>{throw TypeError(l)};var _=(l,t,i)=>t in l?T(l,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):l[t]=i;var w=(l,t,i)=>_(l,typeof t!="symbol"?t+"":t,i),D=(l,t,i)=>t.has(l)||K("Cannot "+i);var b=(l,t,i)=>(D(l,t,"read from private field"),i?i.call(l):t.get(l)),L=(l,t,i)=>t.has(l)?K("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(l):t.set(l,i);var g=(l,t,i)=>(D(l,t,"access private method"),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var c,h,k;class q{constructor(t={}){L(this,h);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,h,k).call(this)}}c=new WeakMap,h=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),n=Number(t.dataset.min),r=Number(t.dataset.max),m=a=>{e.setAttribute("aria-valuenow",String(a)),e.setAttribute("aria-valuetext",`${a} items`)};Number(e.value)<=n&&(e.value=n.toFixed(o)),Number(e.value)>=r&&(e.value=r.toFixed(o)),n&&e.setAttribute("aria-valuemin",n.toFixed(o)),r&&e.setAttribute("aria-valuemax",r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,n,r),m(e.value);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,n,r),m(e.value)},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<n&&(s=n),e.value=s.toFixed(o),b(this,c).call(this,Number(e.value),u,d,n,r),m(e.value)},f=(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;f(()=>p(s))}),d.addEventListener("touchstart",()=>f(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;f(()=>x(s),100)}),u.addEventListener("touchstart",()=>f(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<n&&(y=n),e.value=y.toFixed(o),Number(e.value)<n&&(e.value=n.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,n,r),m(e.value);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)<n&&(e.value=n.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,n,r)}),e.addEventListener("change",()=>{Number(e.value)<n&&(e.value=n.toFixed(o)),Number(e.value)>r&&(e.value=r.toFixed(o)),b(this,c).call(this,Number(e.value),u,d,n,r)})})};exports.SpinBox=q;
|
package/dist/index.es.js
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
var _ = Object.defineProperty;
|
|
2
|
-
var S = (
|
|
3
|
-
throw TypeError(
|
|
2
|
+
var S = (l) => {
|
|
3
|
+
throw TypeError(l);
|
|
4
4
|
};
|
|
5
|
-
var q = (
|
|
6
|
-
var w = (
|
|
7
|
-
var m = (
|
|
8
|
-
var k = (
|
|
9
|
-
var c,
|
|
5
|
+
var q = (l, t, i) => t in l ? _(l, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : l[t] = i;
|
|
6
|
+
var w = (l, t, i) => q(l, typeof t != "symbol" ? t + "" : t, i), D = (l, t, i) => t.has(l) || S("Cannot " + i);
|
|
7
|
+
var m = (l, t, i) => (D(l, t, "read from private field"), i ? i.call(l) : t.get(l)), L = (l, t, i) => t.has(l) ? S("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(l) : t.set(l, i);
|
|
8
|
+
var k = (l, t, i) => (D(l, t, "access private method"), i);
|
|
9
|
+
var c, h, g;
|
|
10
10
|
class U {
|
|
11
11
|
constructor(t = {}) {
|
|
12
|
-
L(this,
|
|
12
|
+
L(this, h);
|
|
13
13
|
w(this, "selectors");
|
|
14
14
|
w(this, "spinBoxes");
|
|
15
15
|
L(this, c, (t, i, u, d = 0, e = 0) => {
|
|
@@ -23,37 +23,37 @@ class U {
|
|
|
23
23
|
};
|
|
24
24
|
this.selectors = { ...i, ...t }, this.spinBoxes = document.querySelectorAll(
|
|
25
25
|
`.${this.selectors.main}`
|
|
26
|
-
), k(this,
|
|
26
|
+
), k(this, h, g).call(this);
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
|
-
c = new WeakMap(),
|
|
29
|
+
c = new WeakMap(), h = new WeakSet(), g = function() {
|
|
30
30
|
this.spinBoxes.forEach((t) => {
|
|
31
31
|
const i = t.querySelectorAll(
|
|
32
32
|
`.${this.selectors.btn}`
|
|
33
33
|
), u = i[0], d = i[1], e = t.querySelector(
|
|
34
34
|
`.${this.selectors.input}`
|
|
35
|
-
), o = Number(t.dataset.step),
|
|
35
|
+
), o = Number(t.dataset.step), n = Number(t.dataset.min), r = Number(t.dataset.max), b = (a) => {
|
|
36
36
|
e.setAttribute("aria-valuenow", String(a)), e.setAttribute("aria-valuetext", `${a} items`);
|
|
37
37
|
};
|
|
38
|
-
Number(e.value) <=
|
|
38
|
+
Number(e.value) <= n && (e.value = n.toFixed(o)), Number(e.value) >= r && (e.value = r.toFixed(o)), n && e.setAttribute("aria-valuemin", n.toFixed(o)), r && e.setAttribute("aria-valuemax", r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, n, r), b(e.value);
|
|
39
39
|
let v = null;
|
|
40
40
|
const p = (a = 1) => {
|
|
41
41
|
e.value = String(Math.abs(Number(e.value)));
|
|
42
42
|
let s = parseFloat(e.value) || 0;
|
|
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,
|
|
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, n, r), b(e.value);
|
|
44
44
|
}, x = (a = 1) => {
|
|
45
45
|
e.value = String(Math.abs(Number(e.value)));
|
|
46
46
|
let s = parseFloat(e.value) || 0;
|
|
47
|
-
s = s - 1 * a / Math.pow(10, o), s <
|
|
48
|
-
},
|
|
47
|
+
s = s - 1 * a / Math.pow(10, o), s < n && (s = n), e.value = s.toFixed(o), m(this, c).call(this, Number(e.value), u, d, n, r), b(e.value);
|
|
48
|
+
}, f = (a, s = 150) => {
|
|
49
49
|
v === null && (v = window.setInterval(a, s));
|
|
50
50
|
}, N = () => {
|
|
51
51
|
v !== null && (clearInterval(v), v = null);
|
|
52
52
|
};
|
|
53
53
|
d.addEventListener("mousedown", (a) => {
|
|
54
54
|
const s = a.shiftKey ? 3 : 1;
|
|
55
|
-
|
|
56
|
-
}), d.addEventListener("touchstart", () =>
|
|
55
|
+
f(() => p(s));
|
|
56
|
+
}), d.addEventListener("touchstart", () => f(p)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
57
57
|
(a) => {
|
|
58
58
|
d.addEventListener(a, N);
|
|
59
59
|
}
|
|
@@ -65,8 +65,8 @@ c = new WeakMap(), f = new WeakSet(), g = function() {
|
|
|
65
65
|
v === null && x(s);
|
|
66
66
|
}), u.addEventListener("mousedown", (a) => {
|
|
67
67
|
const s = a.shiftKey ? 3 : 1;
|
|
68
|
-
|
|
69
|
-
}), u.addEventListener("touchstart", () =>
|
|
68
|
+
f(() => x(s), 100);
|
|
69
|
+
}), u.addEventListener("touchstart", () => f(x, 100)), ["mouseup", "mouseleave", "mouseout", "touchend", "touchcancel"].forEach(
|
|
70
70
|
(a) => {
|
|
71
71
|
u.addEventListener(a, N);
|
|
72
72
|
}
|
|
@@ -91,15 +91,15 @@ c = new WeakMap(), f = new WeakSet(), g = function() {
|
|
|
91
91
|
a.preventDefault();
|
|
92
92
|
const B = parseFloat(e.value) || 0, K = 1 * M / Math.pow(10, o);
|
|
93
93
|
let y = s === "ArrowUp" ? B + K : B - K;
|
|
94
|
-
y <
|
|
94
|
+
y < n && (y = n), e.value = y.toFixed(o), Number(e.value) < n && (e.value = n.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, n, r), b(e.value);
|
|
95
95
|
return;
|
|
96
96
|
}
|
|
97
97
|
const E = s === "," ? "." : s, F = /^[0-9]$/.test(E), A = E === ".", $ = e.value.includes(".");
|
|
98
98
|
(o === 0 && !F || o > 0 && !(F || A) || A && $) && a.preventDefault();
|
|
99
99
|
}), e.addEventListener("keyup", () => {
|
|
100
|
-
Number(e.value) <
|
|
100
|
+
Number(e.value) < n && (e.value = n.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, n, r);
|
|
101
101
|
}), e.addEventListener("change", () => {
|
|
102
|
-
Number(e.value) <
|
|
102
|
+
Number(e.value) < n && (e.value = n.toFixed(o)), Number(e.value) > r && (e.value = r.toFixed(o)), m(this, c).call(this, Number(e.value), u, d, n, r);
|
|
103
103
|
});
|
|
104
104
|
});
|
|
105
105
|
};
|
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 D=i=>{throw TypeError(i)};var _=(i,a,
|
|
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,l)=>a in i?U(i,a,{enumerable:!0,configurable:!0,writable:!0,value:l}):i[a]=l;var E=(i,a,l)=>_(i,typeof a!="symbol"?a+"":a,l),g=(i,a,l)=>a.has(i)||D("Cannot "+l);var m=(i,a,l)=>(g(i,a,"read from private field"),l?l.call(i):a.get(i)),L=(i,a,l)=>a.has(i)?D("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(i):a.set(i,l);var k=(i,a,l)=>(g(i,a,"access private method"),l);var l,b,M;class a{constructor(c={}){L(this,b);E(this,"selectors");E(this,"spinBoxes");L(this,l,(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)}}l=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),n=Number(c.dataset.min),u=Number(c.dataset.max),h=s=>{e.setAttribute("aria-valuenow",String(s)),e.setAttribute("aria-valuetext",`${s} items`)};Number(e.value)<=n&&(e.value=n.toFixed(o)),Number(e.value)>=u&&(e.value=u.toFixed(o)),n&&e.setAttribute("aria-valuemin",n.toFixed(o)),u&&e.setAttribute("aria-valuemax",u.toFixed(o)),m(this,l).call(this,Number(e.value),r,d,n,u),h(e.value);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,l).call(this,Number(e.value),r,d,n,u),h(e.value)},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<n&&(t=n),e.value=t.toFixed(o),m(this,l).call(this,Number(e.value),r,d,n,u),h(e.value)},p=(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;p(()=>x(t))}),d.addEventListener("touchstart",()=>p(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;p(()=>y(t),100)}),r.addEventListener("touchstart",()=>p(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<n&&(w=n),e.value=w.toFixed(o),Number(e.value)<n&&(e.value=n.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,l).call(this,Number(e.value),r,d,n,u),h(e.value);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)<n&&(e.value=n.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,l).call(this,Number(e.value),r,d,n,u)}),e.addEventListener("change",()=>{Number(e.value)<n&&(e.value=n.toFixed(o)),Number(e.value)>u&&(e.value=u.toFixed(o)),m(this,l).call(this,Number(e.value),r,d,n,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>.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)}
|
|
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)}body{padding:0;background-color:var(--c-g-50);color:var(--c-g-950);transition:background .4s ease}
|