@xaypay/tui 0.0.102 → 0.0.103
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.es.js +49 -35
- package/dist/index.js +49 -35
- package/package.json +1 -1
- package/src/assets/figma-image.png +0 -0
- package/src/components/icon/CloseSlide.js +2 -2
- package/src/components/icon/index.js +0 -1
- package/src/components/input/index.js +3 -1
- package/src/components/modal/index.js +95 -84
- package/src/components/modal/modal.stories.js +17 -3
- package/src/components/select/index.js +3 -1
- package/src/stories/configuration.stories.mdx +5 -3
- package/tui.config.js +5 -3
package/dist/index.es.js
CHANGED
|
@@ -389,7 +389,6 @@ const SvgCloseIcon = ({
|
|
|
389
389
|
const SvgCloseSlide = ({
|
|
390
390
|
title,
|
|
391
391
|
titleId,
|
|
392
|
-
fillColor,
|
|
393
392
|
...props
|
|
394
393
|
}) => /*#__PURE__*/React.createElement("svg", _extends({
|
|
395
394
|
width: "18",
|
|
@@ -402,7 +401,7 @@ const SvgCloseSlide = ({
|
|
|
402
401
|
id: titleId
|
|
403
402
|
}, title) : null, /*#__PURE__*/React.createElement("path", {
|
|
404
403
|
d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
|
|
405
|
-
fill:
|
|
404
|
+
fill: "#fff"
|
|
406
405
|
}));
|
|
407
406
|
|
|
408
407
|
const Modal = ({
|
|
@@ -434,6 +433,7 @@ const Modal = ({
|
|
|
434
433
|
headerHeight,
|
|
435
434
|
justifyContent,
|
|
436
435
|
backgroundColor,
|
|
436
|
+
grayDecorHeight,
|
|
437
437
|
layerBackgroundColor
|
|
438
438
|
}) => {
|
|
439
439
|
const [select, setSelect] = useState(0);
|
|
@@ -522,13 +522,13 @@ const Modal = ({
|
|
|
522
522
|
className: `${classProps} ${styles$b['animation__modal']}`,
|
|
523
523
|
onClick: handleStopClosing,
|
|
524
524
|
style: {
|
|
525
|
-
width: width ? width : configStyles.MODAL.width,
|
|
526
|
-
height: height ? height : configStyles.MODAL.height,
|
|
527
525
|
position: 'relative',
|
|
528
|
-
display: 'grid',
|
|
529
|
-
overflow: 'hidden',
|
|
530
526
|
boxSizing: 'border-box',
|
|
531
|
-
|
|
527
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
528
|
+
width: width ? width : configStyles.MODAL.width,
|
|
529
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
530
|
+
height: height ? height : configStyles.MODAL.height,
|
|
531
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
532
532
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
533
533
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
534
534
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -536,16 +536,16 @@ const Modal = ({
|
|
|
536
536
|
backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
|
|
537
537
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
|
|
538
538
|
}
|
|
539
|
-
}, type === 'content'
|
|
539
|
+
}, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
|
|
540
540
|
style: {
|
|
541
541
|
width: '100%',
|
|
542
542
|
display: 'flex',
|
|
543
543
|
alignItems: 'center',
|
|
544
|
-
backgroundColor: '#FBFBFB',
|
|
545
544
|
boxSizing: 'border-box',
|
|
546
|
-
|
|
545
|
+
backgroundColor: '#FBFBFB',
|
|
546
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
547
547
|
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
548
|
-
|
|
548
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
549
549
|
}
|
|
550
550
|
}, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
|
|
551
551
|
style: {
|
|
@@ -565,39 +565,49 @@ const Modal = ({
|
|
|
565
565
|
height: '14px',
|
|
566
566
|
cursor: 'pointer'
|
|
567
567
|
}
|
|
568
|
-
}, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)))
|
|
569
|
-
onClick: handleCloseModal,
|
|
570
|
-
style: {
|
|
571
|
-
position: 'absolute',
|
|
572
|
-
top: '23px',
|
|
573
|
-
width: '18px',
|
|
574
|
-
right: '23px',
|
|
575
|
-
height: '18px',
|
|
576
|
-
border: 'none',
|
|
577
|
-
outline: 'none',
|
|
578
|
-
cursor: 'pointer',
|
|
579
|
-
zIndex: '1',
|
|
580
|
-
backgroundColor: 'transparent'
|
|
581
|
-
}
|
|
582
|
-
}, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default.createElement("div", {
|
|
568
|
+
}, /*#__PURE__*/React__default.createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
583
569
|
style: {
|
|
584
570
|
display: 'flex',
|
|
585
|
-
position: 'relative',
|
|
586
571
|
width: '100%',
|
|
587
572
|
height: '100%',
|
|
573
|
+
overflow: 'hidden',
|
|
574
|
+
position: 'relative',
|
|
588
575
|
alignItems: 'center',
|
|
589
576
|
boxSizing: 'border-box',
|
|
590
577
|
justifyContent: 'center',
|
|
591
|
-
overflow: 'auto',
|
|
592
578
|
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
593
579
|
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
594
580
|
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
|
|
595
581
|
}
|
|
596
|
-
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
|
|
582
|
+
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
597
583
|
style: {
|
|
584
|
+
position: 'absolute',
|
|
585
|
+
top: '0px',
|
|
586
|
+
left: '0px',
|
|
598
587
|
width: '100%',
|
|
599
|
-
|
|
600
|
-
|
|
588
|
+
borderTopLeftRadius: '6px',
|
|
589
|
+
borderTopRightRadius: '6px',
|
|
590
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
591
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
592
|
+
}
|
|
593
|
+
}, /*#__PURE__*/React__default.createElement("button", {
|
|
594
|
+
onClick: handleCloseModal,
|
|
595
|
+
style: {
|
|
596
|
+
position: 'absolute',
|
|
597
|
+
zIndex: '1',
|
|
598
|
+
top: '20px',
|
|
599
|
+
width: '18px',
|
|
600
|
+
right: '20px',
|
|
601
|
+
height: '18px',
|
|
602
|
+
border: 'none',
|
|
603
|
+
padding: '0px',
|
|
604
|
+
outline: 'none',
|
|
605
|
+
cursor: 'pointer',
|
|
606
|
+
backgroundColor: 'transparent'
|
|
607
|
+
}
|
|
608
|
+
}, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
|
|
609
|
+
style: {
|
|
610
|
+
height: '100%'
|
|
601
611
|
}
|
|
602
612
|
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
603
613
|
if (select === index) {
|
|
@@ -609,7 +619,6 @@ const Modal = ({
|
|
|
609
619
|
objectFit: 'cover',
|
|
610
620
|
objectPosition: 'center',
|
|
611
621
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
612
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
613
622
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
614
623
|
},
|
|
615
624
|
src: item.url,
|
|
@@ -645,7 +654,7 @@ const Modal = ({
|
|
|
645
654
|
top: 'calc(50% - 12px)',
|
|
646
655
|
backgroundColor: 'transparent'
|
|
647
656
|
}
|
|
648
|
-
}, /*#__PURE__*/React__default.createElement(SvgNext, null))))))));
|
|
657
|
+
}, /*#__PURE__*/React__default.createElement(SvgNext, null)))))))));
|
|
649
658
|
};
|
|
650
659
|
Modal.propTypes = {
|
|
651
660
|
data: PropTypes.array,
|
|
@@ -674,6 +683,7 @@ Modal.propTypes = {
|
|
|
674
683
|
headerHeight: PropTypes.string,
|
|
675
684
|
justifyContent: PropTypes.string,
|
|
676
685
|
backgroundColor: PropTypes.string,
|
|
686
|
+
grayDecorHeight: PropTypes.string,
|
|
677
687
|
layerBackgroundColor: PropTypes.string
|
|
678
688
|
};
|
|
679
689
|
Modal.defaultProps = {
|
|
@@ -748,6 +758,7 @@ const Input = ({
|
|
|
748
758
|
regexpErrorMessage,
|
|
749
759
|
phoneJustifyContent,
|
|
750
760
|
borderRightColorHover,
|
|
761
|
+
backgroundDisableColor,
|
|
751
762
|
errorAnimationDuration,
|
|
752
763
|
...props
|
|
753
764
|
}) => {
|
|
@@ -1098,7 +1109,7 @@ const Input = ({
|
|
|
1098
1109
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1099
1110
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1100
1111
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1101
|
-
backgroundColor: disabled ?
|
|
1112
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1102
1113
|
}
|
|
1103
1114
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
|
|
1104
1115
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1184,6 +1195,7 @@ Input.propTypes = {
|
|
|
1184
1195
|
regexp: PropTypes.instanceOf(RegExp),
|
|
1185
1196
|
phoneJustifyContent: PropTypes.string,
|
|
1186
1197
|
borderRightColorHover: PropTypes.string,
|
|
1198
|
+
backgroundDisableColor: PropTypes.string,
|
|
1187
1199
|
errorAnimationDuration: PropTypes.string,
|
|
1188
1200
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
1189
1201
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
@@ -1420,6 +1432,7 @@ const Select = ({
|
|
|
1420
1432
|
selectedHoverColor,
|
|
1421
1433
|
selectedTransition,
|
|
1422
1434
|
selectedBackgroundColor,
|
|
1435
|
+
selectedDisableBackgroundColor,
|
|
1423
1436
|
optionsBoxShadow,
|
|
1424
1437
|
optionsBorderRadius,
|
|
1425
1438
|
optionsBackgroundColor,
|
|
@@ -1578,7 +1591,7 @@ const Select = ({
|
|
|
1578
1591
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1579
1592
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1580
1593
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1581
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1594
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1582
1595
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
1583
1596
|
},
|
|
1584
1597
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1699,6 +1712,7 @@ Select.propTypes = {
|
|
|
1699
1712
|
selectedLineHeight: PropTypes.string,
|
|
1700
1713
|
selectedTransition: PropTypes.string,
|
|
1701
1714
|
selectedBackgroundColor: PropTypes.string,
|
|
1715
|
+
selectedDisableBackgroundColor: PropTypes.string,
|
|
1702
1716
|
optionsBoxShadow: PropTypes.string,
|
|
1703
1717
|
optionsBorderRadius: PropTypes.string,
|
|
1704
1718
|
optionsBackgroundColor: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -419,7 +419,6 @@ const SvgCloseIcon = ({
|
|
|
419
419
|
const SvgCloseSlide = ({
|
|
420
420
|
title,
|
|
421
421
|
titleId,
|
|
422
|
-
fillColor,
|
|
423
422
|
...props
|
|
424
423
|
}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
425
424
|
width: "18",
|
|
@@ -432,7 +431,7 @@ const SvgCloseSlide = ({
|
|
|
432
431
|
id: titleId
|
|
433
432
|
}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
|
|
434
433
|
d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
|
|
435
|
-
fill:
|
|
434
|
+
fill: "#fff"
|
|
436
435
|
}));
|
|
437
436
|
|
|
438
437
|
const Modal = ({
|
|
@@ -464,6 +463,7 @@ const Modal = ({
|
|
|
464
463
|
headerHeight,
|
|
465
464
|
justifyContent,
|
|
466
465
|
backgroundColor,
|
|
466
|
+
grayDecorHeight,
|
|
467
467
|
layerBackgroundColor
|
|
468
468
|
}) => {
|
|
469
469
|
const [select, setSelect] = React.useState(0);
|
|
@@ -552,13 +552,13 @@ const Modal = ({
|
|
|
552
552
|
className: `${classProps} ${styles$b['animation__modal']}`,
|
|
553
553
|
onClick: handleStopClosing,
|
|
554
554
|
style: {
|
|
555
|
-
width: width ? width : configStyles.MODAL.width,
|
|
556
|
-
height: height ? height : configStyles.MODAL.height,
|
|
557
555
|
position: 'relative',
|
|
558
|
-
display: 'grid',
|
|
559
|
-
overflow: 'hidden',
|
|
560
556
|
boxSizing: 'border-box',
|
|
561
|
-
|
|
557
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
558
|
+
width: width ? width : configStyles.MODAL.width,
|
|
559
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
560
|
+
height: height ? height : configStyles.MODAL.height,
|
|
561
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
562
562
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
563
563
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
564
564
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -566,16 +566,16 @@ const Modal = ({
|
|
|
566
566
|
backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor,
|
|
567
567
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : ''
|
|
568
568
|
}
|
|
569
|
-
}, type === 'content'
|
|
569
|
+
}, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
|
|
570
570
|
style: {
|
|
571
571
|
width: '100%',
|
|
572
572
|
display: 'flex',
|
|
573
573
|
alignItems: 'center',
|
|
574
|
-
backgroundColor: '#FBFBFB',
|
|
575
574
|
boxSizing: 'border-box',
|
|
576
|
-
|
|
575
|
+
backgroundColor: '#FBFBFB',
|
|
576
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
577
577
|
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
578
|
-
|
|
578
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
579
579
|
}
|
|
580
580
|
}, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
|
|
581
581
|
style: {
|
|
@@ -595,39 +595,49 @@ const Modal = ({
|
|
|
595
595
|
height: '14px',
|
|
596
596
|
cursor: 'pointer'
|
|
597
597
|
}
|
|
598
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)))
|
|
599
|
-
onClick: handleCloseModal,
|
|
600
|
-
style: {
|
|
601
|
-
position: 'absolute',
|
|
602
|
-
top: '23px',
|
|
603
|
-
width: '18px',
|
|
604
|
-
right: '23px',
|
|
605
|
-
height: '18px',
|
|
606
|
-
border: 'none',
|
|
607
|
-
outline: 'none',
|
|
608
|
-
cursor: 'pointer',
|
|
609
|
-
zIndex: '1',
|
|
610
|
-
backgroundColor: 'transparent'
|
|
611
|
-
}
|
|
612
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
598
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
613
599
|
style: {
|
|
614
600
|
display: 'flex',
|
|
615
|
-
position: 'relative',
|
|
616
601
|
width: '100%',
|
|
617
602
|
height: '100%',
|
|
603
|
+
overflow: 'hidden',
|
|
604
|
+
position: 'relative',
|
|
618
605
|
alignItems: 'center',
|
|
619
606
|
boxSizing: 'border-box',
|
|
620
607
|
justifyContent: 'center',
|
|
621
|
-
overflow: 'auto',
|
|
622
608
|
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
623
609
|
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
624
610
|
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
|
|
625
611
|
}
|
|
626
|
-
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
|
|
612
|
+
}, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
627
613
|
style: {
|
|
614
|
+
position: 'absolute',
|
|
615
|
+
top: '0px',
|
|
616
|
+
left: '0px',
|
|
628
617
|
width: '100%',
|
|
629
|
-
|
|
630
|
-
|
|
618
|
+
borderTopLeftRadius: '6px',
|
|
619
|
+
borderTopRightRadius: '6px',
|
|
620
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
621
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
622
|
+
}
|
|
623
|
+
}, /*#__PURE__*/React__default["default"].createElement("button", {
|
|
624
|
+
onClick: handleCloseModal,
|
|
625
|
+
style: {
|
|
626
|
+
position: 'absolute',
|
|
627
|
+
zIndex: '1',
|
|
628
|
+
top: '20px',
|
|
629
|
+
width: '18px',
|
|
630
|
+
right: '20px',
|
|
631
|
+
height: '18px',
|
|
632
|
+
border: 'none',
|
|
633
|
+
padding: '0px',
|
|
634
|
+
outline: 'none',
|
|
635
|
+
cursor: 'pointer',
|
|
636
|
+
backgroundColor: 'transparent'
|
|
637
|
+
}
|
|
638
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
639
|
+
style: {
|
|
640
|
+
height: '100%'
|
|
631
641
|
}
|
|
632
642
|
}, innerData && innerData.length > 0 && innerData.map((item, index) => {
|
|
633
643
|
if (select === index) {
|
|
@@ -639,7 +649,6 @@ const Modal = ({
|
|
|
639
649
|
objectFit: 'cover',
|
|
640
650
|
objectPosition: 'center',
|
|
641
651
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
642
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
643
652
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
644
653
|
},
|
|
645
654
|
src: item.url,
|
|
@@ -675,7 +684,7 @@ const Modal = ({
|
|
|
675
684
|
top: 'calc(50% - 12px)',
|
|
676
685
|
backgroundColor: 'transparent'
|
|
677
686
|
}
|
|
678
|
-
}, /*#__PURE__*/React__default["default"].createElement(SvgNext, null))))))));
|
|
687
|
+
}, /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
|
|
679
688
|
};
|
|
680
689
|
Modal.propTypes = {
|
|
681
690
|
data: PropTypes__default["default"].array,
|
|
@@ -704,6 +713,7 @@ Modal.propTypes = {
|
|
|
704
713
|
headerHeight: PropTypes__default["default"].string,
|
|
705
714
|
justifyContent: PropTypes__default["default"].string,
|
|
706
715
|
backgroundColor: PropTypes__default["default"].string,
|
|
716
|
+
grayDecorHeight: PropTypes__default["default"].string,
|
|
707
717
|
layerBackgroundColor: PropTypes__default["default"].string
|
|
708
718
|
};
|
|
709
719
|
Modal.defaultProps = {
|
|
@@ -778,6 +788,7 @@ const Input = ({
|
|
|
778
788
|
regexpErrorMessage,
|
|
779
789
|
phoneJustifyContent,
|
|
780
790
|
borderRightColorHover,
|
|
791
|
+
backgroundDisableColor,
|
|
781
792
|
errorAnimationDuration,
|
|
782
793
|
...props
|
|
783
794
|
}) => {
|
|
@@ -1128,7 +1139,7 @@ const Input = ({
|
|
|
1128
1139
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
1129
1140
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
1130
1141
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
1131
|
-
backgroundColor: disabled ?
|
|
1142
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
1132
1143
|
}
|
|
1133
1144
|
})), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
|
|
1134
1145
|
onClick: type === 'password' ? handleShowPass : _ => _,
|
|
@@ -1214,6 +1225,7 @@ Input.propTypes = {
|
|
|
1214
1225
|
regexp: PropTypes__default["default"].instanceOf(RegExp),
|
|
1215
1226
|
phoneJustifyContent: PropTypes__default["default"].string,
|
|
1216
1227
|
borderRightColorHover: PropTypes__default["default"].string,
|
|
1228
|
+
backgroundDisableColor: PropTypes__default["default"].string,
|
|
1217
1229
|
errorAnimationDuration: PropTypes__default["default"].string,
|
|
1218
1230
|
leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
1219
1231
|
rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
|
|
@@ -1450,6 +1462,7 @@ const Select = ({
|
|
|
1450
1462
|
selectedHoverColor,
|
|
1451
1463
|
selectedTransition,
|
|
1452
1464
|
selectedBackgroundColor,
|
|
1465
|
+
selectedDisableBackgroundColor,
|
|
1453
1466
|
optionsBoxShadow,
|
|
1454
1467
|
optionsBorderRadius,
|
|
1455
1468
|
optionsBackgroundColor,
|
|
@@ -1608,7 +1621,7 @@ const Select = ({
|
|
|
1608
1621
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
1609
1622
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
1610
1623
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
1611
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1624
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
1612
1625
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
1613
1626
|
},
|
|
1614
1627
|
onClick: disabled ? _ => _ : _ => handleOpenClose(),
|
|
@@ -1729,6 +1742,7 @@ Select.propTypes = {
|
|
|
1729
1742
|
selectedLineHeight: PropTypes__default["default"].string,
|
|
1730
1743
|
selectedTransition: PropTypes__default["default"].string,
|
|
1731
1744
|
selectedBackgroundColor: PropTypes__default["default"].string,
|
|
1745
|
+
selectedDisableBackgroundColor: PropTypes__default["default"].string,
|
|
1732
1746
|
optionsBoxShadow: PropTypes__default["default"].string,
|
|
1733
1747
|
optionsBorderRadius: PropTypes__default["default"].string,
|
|
1734
1748
|
optionsBackgroundColor: PropTypes__default["default"].string,
|
package/package.json
CHANGED
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
const SvgCloseSlide = ({ title, titleId,
|
|
2
|
+
const SvgCloseSlide = ({ title, titleId, ...props }) => (
|
|
3
3
|
<svg
|
|
4
4
|
width="18"
|
|
5
5
|
height="18"
|
|
@@ -12,7 +12,7 @@ const SvgCloseSlide = ({ title, titleId, fillColor, ...props }) => (
|
|
|
12
12
|
{title ? <title id={titleId}>{title}</title> : null}
|
|
13
13
|
<path
|
|
14
14
|
d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
|
|
15
|
-
fill=
|
|
15
|
+
fill="#fff"
|
|
16
16
|
/>
|
|
17
17
|
</svg>
|
|
18
18
|
);
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -72,6 +72,7 @@ export const Input = ({
|
|
|
72
72
|
regexpErrorMessage,
|
|
73
73
|
phoneJustifyContent,
|
|
74
74
|
borderRightColorHover,
|
|
75
|
+
backgroundDisableColor,
|
|
75
76
|
errorAnimationDuration,
|
|
76
77
|
...props
|
|
77
78
|
}) => {
|
|
@@ -472,7 +473,7 @@ export const Input = ({
|
|
|
472
473
|
borderRadius: radius ? radius : configStyles.INPUT.radius,
|
|
473
474
|
boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
|
|
474
475
|
color: innerErrorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
|
|
475
|
-
backgroundColor: disabled ?
|
|
476
|
+
backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.backgroundDisableColor : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
|
|
476
477
|
}}
|
|
477
478
|
/>
|
|
478
479
|
{
|
|
@@ -578,6 +579,7 @@ Input.propTypes = {
|
|
|
578
579
|
regexp: PropTypes.instanceOf(RegExp),
|
|
579
580
|
phoneJustifyContent: PropTypes.string,
|
|
580
581
|
borderRightColorHover: PropTypes.string,
|
|
582
|
+
backgroundDisableColor: PropTypes.string,
|
|
581
583
|
errorAnimationDuration: PropTypes.string,
|
|
582
584
|
leftIcon: PropTypes.arrayOf(PropTypes.element),
|
|
583
585
|
rightIcon: PropTypes.arrayOf(PropTypes.element),
|
|
@@ -39,6 +39,7 @@ export const Modal = ({
|
|
|
39
39
|
headerHeight,
|
|
40
40
|
justifyContent,
|
|
41
41
|
backgroundColor,
|
|
42
|
+
grayDecorHeight,
|
|
42
43
|
layerBackgroundColor,
|
|
43
44
|
}) => {
|
|
44
45
|
const [select, setSelect] = useState(0);
|
|
@@ -139,13 +140,13 @@ export const Modal = ({
|
|
|
139
140
|
className={`${classProps} ${styles['animation__modal']}`}
|
|
140
141
|
onClick={handleStopClosing}
|
|
141
142
|
style={{
|
|
142
|
-
width: width ? width : configStyles.MODAL.width,
|
|
143
|
-
height: height ? height : configStyles.MODAL.height,
|
|
144
143
|
position: 'relative',
|
|
145
|
-
display: 'grid',
|
|
146
|
-
overflow: 'hidden',
|
|
147
144
|
boxSizing: 'border-box',
|
|
148
|
-
|
|
145
|
+
display: type === 'content' ? 'grid' : 'block',
|
|
146
|
+
width: width ? width : configStyles.MODAL.width,
|
|
147
|
+
overflow: type === 'content' ? 'auto' : 'hidden',
|
|
148
|
+
height: height ? height : configStyles.MODAL.height,
|
|
149
|
+
gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
|
|
149
150
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
150
151
|
maxWidth: mMaxWidth ? mMaxWidth : configStyles.MODAL.mMaxWidth,
|
|
151
152
|
maxHeight: mMaxHeight ? mMaxHeight : configStyles.MODAL.mMaxHeight,
|
|
@@ -154,91 +155,101 @@ export const Modal = ({
|
|
|
154
155
|
minHeight: type === 'content' ? minHeight ? minHeight : configStyles.MODAL.minHeight : '',
|
|
155
156
|
}}
|
|
156
157
|
>
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
?
|
|
160
|
-
<div
|
|
161
|
-
style={{
|
|
162
|
-
width: '100%',
|
|
163
|
-
display: 'flex',
|
|
164
|
-
alignItems: 'center',
|
|
165
|
-
backgroundColor: '#FBFBFB',
|
|
166
|
-
boxSizing: 'border-box',
|
|
167
|
-
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
|
|
168
|
-
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
169
|
-
padding: padding ? padding : configStyles.MODAL.padding
|
|
170
|
-
}}
|
|
171
|
-
>
|
|
172
|
-
{
|
|
173
|
-
headerText && type === 'content' && <p
|
|
174
|
-
style={{
|
|
175
|
-
flex: '1',
|
|
176
|
-
overflow: 'hidden',
|
|
177
|
-
whiteSpace: 'nowrap',
|
|
178
|
-
textOverflow: 'ellipsis',
|
|
179
|
-
margin: '0px 16px 0px 0px',
|
|
180
|
-
fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
|
|
181
|
-
color: headerColor ? headerColor : configStyles.MODAL.headerColor,
|
|
182
|
-
fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
|
|
183
|
-
}}
|
|
184
|
-
>{headerText}</p>
|
|
185
|
-
}
|
|
186
|
-
<div
|
|
187
|
-
onClick={handleCloseModal}
|
|
188
|
-
style={{
|
|
189
|
-
width: '14px',
|
|
190
|
-
height: '14px',
|
|
191
|
-
cursor: 'pointer'
|
|
192
|
-
}}
|
|
193
|
-
>
|
|
194
|
-
<SvgCloseIcon />
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
:
|
|
198
|
-
<button
|
|
199
|
-
onClick={handleCloseModal}
|
|
200
|
-
style={{
|
|
201
|
-
position: 'absolute',
|
|
202
|
-
top: '23px',
|
|
203
|
-
width: '18px',
|
|
204
|
-
right: '23px',
|
|
205
|
-
height: '18px',
|
|
206
|
-
border: 'none',
|
|
207
|
-
outline: 'none',
|
|
208
|
-
cursor: 'pointer',
|
|
209
|
-
zIndex: '1',
|
|
210
|
-
backgroundColor: 'transparent'
|
|
211
|
-
}}
|
|
212
|
-
>
|
|
213
|
-
<SvgCloseSlide />
|
|
214
|
-
</button>
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
<div
|
|
158
|
+
{
|
|
159
|
+
type === 'content' && <div
|
|
218
160
|
style={{
|
|
219
|
-
display: 'flex',
|
|
220
|
-
position: 'relative',
|
|
221
161
|
width: '100%',
|
|
222
|
-
|
|
162
|
+
display: 'flex',
|
|
223
163
|
alignItems: 'center',
|
|
224
164
|
boxSizing: 'border-box',
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
|
|
165
|
+
backgroundColor: '#FBFBFB',
|
|
166
|
+
padding: padding ? padding : configStyles.MODAL.padding,
|
|
167
|
+
height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
|
|
168
|
+
justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
|
|
230
169
|
}}
|
|
231
170
|
>
|
|
232
171
|
{
|
|
233
|
-
type === 'content'
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
172
|
+
headerText && type === 'content' && <p
|
|
173
|
+
style={{
|
|
174
|
+
flex: '1',
|
|
175
|
+
overflow: 'hidden',
|
|
176
|
+
whiteSpace: 'nowrap',
|
|
177
|
+
textOverflow: 'ellipsis',
|
|
178
|
+
margin: '0px 16px 0px 0px',
|
|
179
|
+
fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
|
|
180
|
+
color: headerColor ? headerColor : configStyles.MODAL.headerColor,
|
|
181
|
+
fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
|
|
182
|
+
}}
|
|
183
|
+
>{headerText}</p>
|
|
184
|
+
}
|
|
185
|
+
<div
|
|
186
|
+
onClick={handleCloseModal}
|
|
187
|
+
style={{
|
|
188
|
+
width: '14px',
|
|
189
|
+
height: '14px',
|
|
190
|
+
cursor: 'pointer'
|
|
191
|
+
}}
|
|
192
|
+
>
|
|
193
|
+
<SvgCloseIcon />
|
|
194
|
+
</div>
|
|
195
|
+
</div>
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
<div
|
|
199
|
+
style={{
|
|
200
|
+
display: 'flex',
|
|
201
|
+
width: '100%',
|
|
202
|
+
height: '100%',
|
|
203
|
+
overflow: 'hidden',
|
|
204
|
+
position: 'relative',
|
|
205
|
+
alignItems: 'center',
|
|
206
|
+
boxSizing: 'border-box',
|
|
207
|
+
justifyContent: 'center',
|
|
208
|
+
borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
|
|
209
|
+
borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
|
|
210
|
+
borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
|
|
211
|
+
}}
|
|
212
|
+
>
|
|
213
|
+
{
|
|
214
|
+
type === 'content'
|
|
215
|
+
?
|
|
216
|
+
children ? children : ''
|
|
217
|
+
:
|
|
218
|
+
<>
|
|
237
219
|
<div
|
|
238
220
|
style={{
|
|
221
|
+
position: 'absolute',
|
|
222
|
+
top: '0px',
|
|
223
|
+
left: '0px',
|
|
239
224
|
width: '100%',
|
|
240
|
-
|
|
241
|
-
|
|
225
|
+
borderTopLeftRadius: '6px',
|
|
226
|
+
borderTopRightRadius: '6px',
|
|
227
|
+
height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
|
|
228
|
+
backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
|
|
229
|
+
}}
|
|
230
|
+
>
|
|
231
|
+
<button
|
|
232
|
+
onClick={handleCloseModal}
|
|
233
|
+
style={{
|
|
234
|
+
position: 'absolute',
|
|
235
|
+
zIndex: '1',
|
|
236
|
+
top: '20px',
|
|
237
|
+
width: '18px',
|
|
238
|
+
right: '20px',
|
|
239
|
+
height: '18px',
|
|
240
|
+
border: 'none',
|
|
241
|
+
padding: '0px',
|
|
242
|
+
outline: 'none',
|
|
243
|
+
cursor: 'pointer',
|
|
244
|
+
backgroundColor: 'transparent'
|
|
245
|
+
}}
|
|
246
|
+
>
|
|
247
|
+
<SvgCloseSlide />
|
|
248
|
+
</button>
|
|
249
|
+
</div>
|
|
250
|
+
<div
|
|
251
|
+
style={{
|
|
252
|
+
height: '100%'
|
|
242
253
|
}}
|
|
243
254
|
>
|
|
244
255
|
{
|
|
@@ -253,7 +264,6 @@ export const Modal = ({
|
|
|
253
264
|
objectFit: 'cover',
|
|
254
265
|
objectPosition: 'center',
|
|
255
266
|
borderRadius: radius ? radius : configStyles.MODAL.radius,
|
|
256
|
-
width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
|
|
257
267
|
height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
|
|
258
268
|
}}
|
|
259
269
|
src={item.url}
|
|
@@ -304,9 +314,9 @@ export const Modal = ({
|
|
|
304
314
|
</>
|
|
305
315
|
}
|
|
306
316
|
</div>
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
317
|
+
</>
|
|
318
|
+
}
|
|
319
|
+
</div>
|
|
310
320
|
</div>
|
|
311
321
|
</div>
|
|
312
322
|
</div>
|
|
@@ -340,6 +350,7 @@ Modal.propTypes = {
|
|
|
340
350
|
headerHeight: PropTypes.string,
|
|
341
351
|
justifyContent: PropTypes.string,
|
|
342
352
|
backgroundColor: PropTypes.string,
|
|
353
|
+
grayDecorHeight: PropTypes.string,
|
|
343
354
|
layerBackgroundColor: PropTypes.string,
|
|
344
355
|
};
|
|
345
356
|
|
|
@@ -29,6 +29,14 @@ const Template = ({ headerText, className }) => {
|
|
|
29
29
|
{
|
|
30
30
|
url: 'https://media.istockphoto.com/id/500221043/photo/cascade-yerevan.jpg?s=612x612&w=0&k=20&c=vaULCkIZaIbetZlkFnP20ELnD8cyhlc9cRsvt-X5YAk=',
|
|
31
31
|
id: 5
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
url: 'https://images.unsplash.com/photo-1512850183-6d7990f42385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8dmVydGljYWx8ZW58MHx8MHx8fDA%3D&w=1000&q=80',
|
|
35
|
+
id: 6
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
url: './../../assets/figma-image.png',
|
|
39
|
+
id: 7
|
|
32
40
|
}
|
|
33
41
|
];
|
|
34
42
|
|
|
@@ -56,9 +64,15 @@ const Template = ({ headerText, className }) => {
|
|
|
56
64
|
>Change type to {type === 'content' ? 'images' : 'content'}</button>
|
|
57
65
|
{show && (
|
|
58
66
|
<Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
67
|
+
<div
|
|
68
|
+
style={{
|
|
69
|
+
width: '400px',
|
|
70
|
+
height: '500px',
|
|
71
|
+
backgroundColor: 'red'
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
just test
|
|
75
|
+
</div>
|
|
62
76
|
</Modal>
|
|
63
77
|
)}
|
|
64
78
|
</>
|
|
@@ -51,6 +51,7 @@ export const Select = ({
|
|
|
51
51
|
selectedHoverColor,
|
|
52
52
|
selectedTransition,
|
|
53
53
|
selectedBackgroundColor,
|
|
54
|
+
selectedDisableBackgroundColor,
|
|
54
55
|
|
|
55
56
|
optionsBoxShadow,
|
|
56
57
|
optionsBorderRadius,
|
|
@@ -235,7 +236,7 @@ export const Select = ({
|
|
|
235
236
|
fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
|
|
236
237
|
lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
|
|
237
238
|
transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
|
|
238
|
-
backgroundColor: selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
239
|
+
backgroundColor: disabled ? selectedDisableBackgroundColor ? selectedDisableBackgroundColor : configStyles.SELECT.selectedDisableBackgroundColor : selectedBackgroundColor ? selectedBackgroundColor : configStyles.SELECT.selectedBackgroundColor,
|
|
239
240
|
boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.SELECT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.SELECT.boxShadowHover : boxShadow ? boxShadow : configStyles.SELECT.boxShadow
|
|
240
241
|
}}
|
|
241
242
|
onClick={disabled ? _ => _ : _ => handleOpenClose()}
|
|
@@ -405,6 +406,7 @@ Select.propTypes = {
|
|
|
405
406
|
selectedLineHeight: PropTypes.string,
|
|
406
407
|
selectedTransition: PropTypes.string,
|
|
407
408
|
selectedBackgroundColor: PropTypes.string,
|
|
409
|
+
selectedDisableBackgroundColor: PropTypes.string,
|
|
408
410
|
|
|
409
411
|
optionsBoxShadow: PropTypes.string,
|
|
410
412
|
optionsBorderRadius: PropTypes.string,
|
|
@@ -181,6 +181,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
181
181
|
errorLineHeight: '19px', // for error message line height
|
|
182
182
|
boxSizing: 'border-box', // for box sizing
|
|
183
183
|
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
184
|
+
backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
|
|
184
185
|
color: 'rgb(60, 57, 62)', // for input color
|
|
185
186
|
labelMarginBottom: '6px', // for label margin bottom
|
|
186
187
|
phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
|
|
@@ -353,6 +354,7 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
353
354
|
selectedBoxSizing: 'border-box', // for selected box sizing
|
|
354
355
|
selectedTransition: 'border-color 240ms', // for selected transition
|
|
355
356
|
selectedBackgroundColor: '#FBFBFB', // for selected background color
|
|
357
|
+
selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
|
|
356
358
|
|
|
357
359
|
optionsBorderRadius: '6px', // for options block border radius
|
|
358
360
|
optionsBackgroundColor: '#FBFBFB', // for options block background color
|
|
@@ -591,10 +593,10 @@ import StackAlt from './assets/stackalt.svg';
|
|
|
591
593
|
minWidth: '320px', // for modal min width
|
|
592
594
|
headerSize: '20px', // for modal header font size
|
|
593
595
|
minHeight: '200px', // for modal min height
|
|
594
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
595
596
|
headerWeight: '600', // for modal header font weight
|
|
596
|
-
imageHeight: '
|
|
597
|
-
headerHeight: '
|
|
597
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
598
|
+
headerHeight: '30px', // for modal header height
|
|
599
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
598
600
|
width: 'fit-content', // for modal width
|
|
599
601
|
height: 'fit-content', // for modal width
|
|
600
602
|
headerColor: '#00236a', // for modal header color
|
package/tui.config.js
CHANGED
|
@@ -55,7 +55,8 @@ module.exports = {
|
|
|
55
55
|
errorLineHeight: '19px', // for error message line height
|
|
56
56
|
boxSizing: 'border-box', // for box sizing
|
|
57
57
|
borderRight: '1px solid', // for type tel right border
|
|
58
|
-
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
58
|
+
backgroundColor: 'white', // for input and also (if there exist left or right icons) icons block background color
|
|
59
|
+
backgroundDisableColor: '#FBFBFB', // for input and also (if there exist left or right icons) icons block background color when input is disable
|
|
59
60
|
color: 'rgb(60, 57, 62)', // for input color
|
|
60
61
|
labelMarginBottom: '6px', // for label margin bottom
|
|
61
62
|
phoneAlignItems: 'center', // for phone extention inside item, work when input type is tel
|
|
@@ -207,6 +208,7 @@ module.exports = {
|
|
|
207
208
|
selectedBoxSizing: 'border-box', // for selected box sizing
|
|
208
209
|
selectedTransition: 'border-color 240ms', // for selected transition
|
|
209
210
|
selectedBackgroundColor: '#FBFBFB', // for selected background color
|
|
211
|
+
selectedDisableBackgroundColor: '#FBFBFB', // for selected background color when selet is disable
|
|
210
212
|
|
|
211
213
|
optionsBorderRadius: '6px', // for options block border radius
|
|
212
214
|
optionsBackgroundColor: '#FBFBFB', // for options block background color
|
|
@@ -386,10 +388,10 @@ module.exports = {
|
|
|
386
388
|
minWidth: '320px', // for modal min width
|
|
387
389
|
headerSize: '20px', // for modal header font size
|
|
388
390
|
minHeight: '200px', // for modal min height
|
|
389
|
-
imageWidth: '600px', // for modal image width on images mode
|
|
390
391
|
headerWeight: '600', // for modal header font weight
|
|
391
|
-
imageHeight: '
|
|
392
|
+
imageHeight: '100%', // for modal image height on images mode
|
|
392
393
|
headerHeight: '30px', // for modal header height
|
|
394
|
+
grayDecorHeight: '80px', // for modal top decoration when show slider
|
|
393
395
|
width: 'fit-content', // for modal width
|
|
394
396
|
height: 'fit-content', // for modal width
|
|
395
397
|
headerColor: '#00236a', // for modal header color
|