@licklist/design 0.53.0-dev.0 → 0.53.0-dev.2
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/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.d.ts.map +1 -1
- package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js +1 -1
- package/dist/styles/sales/BookingFilter.scss +6 -2
- package/dist/styles/snippet-templates/SnippetTemplate.scss +17 -11
- package/dist/styles/themes/bookedit/_variables.scss +2 -0
- package/package.json +1 -1
- package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx +9 -2
- package/src/styles/sales/BookingFilter.scss +6 -2
- package/src/styles/snippet-templates/SnippetTemplate.scss +17 -11
- package/src/styles/themes/bookedit/_variables.scss +2 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,2FA4EvB,CAAC"}
|
package/dist/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),a=require("react-bootstrap"),r=e(require("clsx")),u=t.forwardRef((function(e,t){var u=e.className,o=void 0===u?"":u,i=e.value,l=e.onChange,d=e.onArrowDown,c=e.onArrowUp,m=e.min,b=e.max,p=e.placeholder,s=e.defaultValue,f=e.disabled,v=!i,y=void 0!==b&&i===b,N=r("payment-number-input",o);return n.createElement("div",{className:N},n.createElement("button",{type:"button",onClick:function(){void 0!==m&&i>m&&d(i-1),void 0===m&&c(i-1)},className:"payment-number-input__btn-down ".concat(v&&"disabled-number-input-button"),disabled:f},"−"),n.createElement(a.FormControl,{type:"number",onChange:function(e){return l(Number(e.target.value))},value:i,min:m,max:b,defaultValue:s,placeholder:p,height:"5rem",disabled:f,ref:t}),n.createElement("button",{type:"button",onClick:function(){void 0!==b&&(i||0)<b&&c(i+1),void 0===b&&c(i+1)},className:"payment-number-input__btn-up ".concat(y&&"disabled-number-input-button"),disabled:f},"+"))}));u.displayName="NumberInput",exports.NumberInput=u;
|
|
@@ -188,8 +188,12 @@
|
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
@include media-breakpoint-
|
|
192
|
-
flex-wrap:
|
|
191
|
+
@include media-breakpoint-down(xl) {
|
|
192
|
+
flex-wrap: wrap;
|
|
193
|
+
|
|
194
|
+
.apply-container {
|
|
195
|
+
margin-left: 4rem;
|
|
196
|
+
}
|
|
193
197
|
|
|
194
198
|
.date-container {
|
|
195
199
|
width: auto;
|
|
@@ -59,7 +59,8 @@
|
|
|
59
59
|
color: $snippet-elements-button-color;
|
|
60
60
|
border: none;
|
|
61
61
|
background-color: $snippet-elements-button-background-color;
|
|
62
|
-
box-shadow: 0 0 0 $input-btn-focus-width
|
|
62
|
+
box-shadow: 0 0 0 $input-btn-focus-width
|
|
63
|
+
$snippet-elements-button-background-color;
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
&:disabled {
|
|
@@ -72,14 +73,14 @@
|
|
|
72
73
|
&:focus,
|
|
73
74
|
&.focus {
|
|
74
75
|
&:not(:disabled) {
|
|
75
|
-
opacity: .7;
|
|
76
|
+
opacity: 0.7;
|
|
76
77
|
}
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
&:active,
|
|
80
81
|
&.active {
|
|
81
82
|
&:not(:disabled) {
|
|
82
|
-
opacity: .8;
|
|
83
|
+
opacity: 0.8;
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
}
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
}
|
|
91
92
|
|
|
92
93
|
&__label {
|
|
93
|
-
font-size: .8rem;
|
|
94
|
+
font-size: 0.8rem;
|
|
94
95
|
margin-top: 1rem;
|
|
95
96
|
margin-bottom: 0.2rem;
|
|
96
97
|
}
|
|
@@ -103,8 +104,8 @@
|
|
|
103
104
|
position: absolute;
|
|
104
105
|
top: 0;
|
|
105
106
|
right: 0;
|
|
106
|
-
margin-right: .5rem;
|
|
107
|
-
margin-top: .5rem;
|
|
107
|
+
margin-right: 0.5rem;
|
|
108
|
+
margin-top: 0.5rem;
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
.form-label {
|
|
@@ -181,7 +182,8 @@
|
|
|
181
182
|
color: $snippet-elements-button-color;
|
|
182
183
|
border: none;
|
|
183
184
|
background-color: $snippet-elements-button-background-color;
|
|
184
|
-
box-shadow: 0 0 0 $input-btn-focus-width
|
|
185
|
+
box-shadow: 0 0 0 $input-btn-focus-width
|
|
186
|
+
$snippet-elements-button-background-color;
|
|
185
187
|
}
|
|
186
188
|
|
|
187
189
|
&:disabled {
|
|
@@ -194,14 +196,14 @@
|
|
|
194
196
|
&:focus,
|
|
195
197
|
&.focus {
|
|
196
198
|
&:not(:disabled) {
|
|
197
|
-
opacity:
|
|
199
|
+
opacity: 0.7;
|
|
198
200
|
}
|
|
199
201
|
}
|
|
200
202
|
|
|
201
203
|
&:active,
|
|
202
204
|
&.active {
|
|
203
205
|
&:not(:disabled) {
|
|
204
|
-
opacity: .8;
|
|
206
|
+
opacity: 0.8;
|
|
205
207
|
}
|
|
206
208
|
}
|
|
207
209
|
}
|
|
@@ -336,7 +338,8 @@
|
|
|
336
338
|
}
|
|
337
339
|
}
|
|
338
340
|
|
|
339
|
-
.bottom-wrapper,
|
|
341
|
+
.bottom-wrapper,
|
|
342
|
+
.snippet-template__form {
|
|
340
343
|
.btn {
|
|
341
344
|
border-radius: 0.25rem;
|
|
342
345
|
width: 100%;
|
|
@@ -381,6 +384,10 @@
|
|
|
381
384
|
}
|
|
382
385
|
}
|
|
383
386
|
|
|
387
|
+
.disabled-number-input-button {
|
|
388
|
+
background-color: $snippet-calendar-disabled-button-font-color !important;
|
|
389
|
+
border-color: $snippet-calendar-disabled-button-font-color !important;
|
|
390
|
+
}
|
|
384
391
|
.color-picker {
|
|
385
392
|
&__color {
|
|
386
393
|
position: absolute;
|
|
@@ -442,7 +449,6 @@
|
|
|
442
449
|
}
|
|
443
450
|
}
|
|
444
451
|
}
|
|
445
|
-
|
|
446
452
|
}
|
|
447
453
|
|
|
448
454
|
@include media-breakpoint-down(xs) {
|
|
@@ -197,6 +197,7 @@ $grid-breakpoints: (
|
|
|
197
197
|
md: 768px,
|
|
198
198
|
lg: 992px,
|
|
199
199
|
xl: 1200px,
|
|
200
|
+
xxl: 1500px,
|
|
200
201
|
) !default;
|
|
201
202
|
|
|
202
203
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
|
@@ -211,6 +212,7 @@ $container-max-widths: (
|
|
|
211
212
|
md: 720px,
|
|
212
213
|
lg: 960px,
|
|
213
214
|
xl: 1140px,
|
|
215
|
+
xxl: 1500px,
|
|
214
216
|
) !default;
|
|
215
217
|
|
|
216
218
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
package/package.json
CHANGED
package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx
CHANGED
|
@@ -31,6 +31,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|
|
31
31
|
},
|
|
32
32
|
ref
|
|
33
33
|
) => {
|
|
34
|
+
const minusButtonGreyedOut = !value;
|
|
35
|
+
const plusButtonGreyedOut = max !== undefined && value === max;
|
|
36
|
+
|
|
34
37
|
const handleArrowUpClick = () => {
|
|
35
38
|
if (max !== undefined && (value || 0) < max) {
|
|
36
39
|
onArrowUp(value + 1);
|
|
@@ -56,7 +59,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|
|
56
59
|
<button
|
|
57
60
|
type="button"
|
|
58
61
|
onClick={handleArrowDownClick}
|
|
59
|
-
className=
|
|
62
|
+
className={`payment-number-input__btn-down ${
|
|
63
|
+
minusButtonGreyedOut && "disabled-number-input-button"
|
|
64
|
+
}`}
|
|
60
65
|
disabled={disabled}
|
|
61
66
|
>
|
|
62
67
|
−
|
|
@@ -76,7 +81,9 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
|
|
|
76
81
|
<button
|
|
77
82
|
type="button"
|
|
78
83
|
onClick={handleArrowUpClick}
|
|
79
|
-
className=
|
|
84
|
+
className={`payment-number-input__btn-up ${
|
|
85
|
+
plusButtonGreyedOut && "disabled-number-input-button"
|
|
86
|
+
}`}
|
|
80
87
|
disabled={disabled}
|
|
81
88
|
>
|
|
82
89
|
+
|
|
@@ -188,8 +188,12 @@
|
|
|
188
188
|
}
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
-
@include media-breakpoint-
|
|
192
|
-
flex-wrap:
|
|
191
|
+
@include media-breakpoint-down(xl) {
|
|
192
|
+
flex-wrap: wrap;
|
|
193
|
+
|
|
194
|
+
.apply-container {
|
|
195
|
+
margin-left: 4rem;
|
|
196
|
+
}
|
|
193
197
|
|
|
194
198
|
.date-container {
|
|
195
199
|
width: auto;
|
|
@@ -59,7 +59,8 @@
|
|
|
59
59
|
color: $snippet-elements-button-color;
|
|
60
60
|
border: none;
|
|
61
61
|
background-color: $snippet-elements-button-background-color;
|
|
62
|
-
box-shadow: 0 0 0 $input-btn-focus-width
|
|
62
|
+
box-shadow: 0 0 0 $input-btn-focus-width
|
|
63
|
+
$snippet-elements-button-background-color;
|
|
63
64
|
}
|
|
64
65
|
|
|
65
66
|
&:disabled {
|
|
@@ -72,14 +73,14 @@
|
|
|
72
73
|
&:focus,
|
|
73
74
|
&.focus {
|
|
74
75
|
&:not(:disabled) {
|
|
75
|
-
opacity: .7;
|
|
76
|
+
opacity: 0.7;
|
|
76
77
|
}
|
|
77
78
|
}
|
|
78
79
|
|
|
79
80
|
&:active,
|
|
80
81
|
&.active {
|
|
81
82
|
&:not(:disabled) {
|
|
82
|
-
opacity: .8;
|
|
83
|
+
opacity: 0.8;
|
|
83
84
|
}
|
|
84
85
|
}
|
|
85
86
|
}
|
|
@@ -90,7 +91,7 @@
|
|
|
90
91
|
}
|
|
91
92
|
|
|
92
93
|
&__label {
|
|
93
|
-
font-size: .8rem;
|
|
94
|
+
font-size: 0.8rem;
|
|
94
95
|
margin-top: 1rem;
|
|
95
96
|
margin-bottom: 0.2rem;
|
|
96
97
|
}
|
|
@@ -103,8 +104,8 @@
|
|
|
103
104
|
position: absolute;
|
|
104
105
|
top: 0;
|
|
105
106
|
right: 0;
|
|
106
|
-
margin-right: .5rem;
|
|
107
|
-
margin-top: .5rem;
|
|
107
|
+
margin-right: 0.5rem;
|
|
108
|
+
margin-top: 0.5rem;
|
|
108
109
|
}
|
|
109
110
|
|
|
110
111
|
.form-label {
|
|
@@ -181,7 +182,8 @@
|
|
|
181
182
|
color: $snippet-elements-button-color;
|
|
182
183
|
border: none;
|
|
183
184
|
background-color: $snippet-elements-button-background-color;
|
|
184
|
-
box-shadow: 0 0 0 $input-btn-focus-width
|
|
185
|
+
box-shadow: 0 0 0 $input-btn-focus-width
|
|
186
|
+
$snippet-elements-button-background-color;
|
|
185
187
|
}
|
|
186
188
|
|
|
187
189
|
&:disabled {
|
|
@@ -194,14 +196,14 @@
|
|
|
194
196
|
&:focus,
|
|
195
197
|
&.focus {
|
|
196
198
|
&:not(:disabled) {
|
|
197
|
-
opacity:
|
|
199
|
+
opacity: 0.7;
|
|
198
200
|
}
|
|
199
201
|
}
|
|
200
202
|
|
|
201
203
|
&:active,
|
|
202
204
|
&.active {
|
|
203
205
|
&:not(:disabled) {
|
|
204
|
-
opacity: .8;
|
|
206
|
+
opacity: 0.8;
|
|
205
207
|
}
|
|
206
208
|
}
|
|
207
209
|
}
|
|
@@ -336,7 +338,8 @@
|
|
|
336
338
|
}
|
|
337
339
|
}
|
|
338
340
|
|
|
339
|
-
.bottom-wrapper,
|
|
341
|
+
.bottom-wrapper,
|
|
342
|
+
.snippet-template__form {
|
|
340
343
|
.btn {
|
|
341
344
|
border-radius: 0.25rem;
|
|
342
345
|
width: 100%;
|
|
@@ -381,6 +384,10 @@
|
|
|
381
384
|
}
|
|
382
385
|
}
|
|
383
386
|
|
|
387
|
+
.disabled-number-input-button {
|
|
388
|
+
background-color: $snippet-calendar-disabled-button-font-color !important;
|
|
389
|
+
border-color: $snippet-calendar-disabled-button-font-color !important;
|
|
390
|
+
}
|
|
384
391
|
.color-picker {
|
|
385
392
|
&__color {
|
|
386
393
|
position: absolute;
|
|
@@ -442,7 +449,6 @@
|
|
|
442
449
|
}
|
|
443
450
|
}
|
|
444
451
|
}
|
|
445
|
-
|
|
446
452
|
}
|
|
447
453
|
|
|
448
454
|
@include media-breakpoint-down(xs) {
|
|
@@ -197,6 +197,7 @@ $grid-breakpoints: (
|
|
|
197
197
|
md: 768px,
|
|
198
198
|
lg: 992px,
|
|
199
199
|
xl: 1200px,
|
|
200
|
+
xxl: 1500px,
|
|
200
201
|
) !default;
|
|
201
202
|
|
|
202
203
|
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
|
@@ -211,6 +212,7 @@ $container-max-widths: (
|
|
|
211
212
|
md: 720px,
|
|
212
213
|
lg: 960px,
|
|
213
214
|
xl: 1140px,
|
|
215
|
+
xxl: 1500px,
|
|
214
216
|
) !default;
|
|
215
217
|
|
|
216
218
|
@include _assert-ascending($container-max-widths, "$container-max-widths");
|