@desynova-digital/components 8.9.5 → 8.9.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.
|
@@ -9,7 +9,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
9
9
|
|
|
10
10
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
11
11
|
|
|
12
|
-
var _templateObject = _taggedTemplateLiteral(["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n cursor: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n \n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n \n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items:center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule:evenodd;\n clip-rule:evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: \"SFUIText-Regular\";\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: \"SFUIText-Regular\";\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: \" \";\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n ;\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker\n div.calendar\n div.month-header\n > span.month-header-text\n > .month-text {\n font-family: \"SFUIText-Medium\";\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today\n > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month\n > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.disabled\n > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month.disabled\n > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today.disabled\n > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.today\n > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"], ["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n cursor: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n \n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n \n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items:center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule:evenodd;\n clip-rule:evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: \"SFUIText-Regular\";\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: \"SFUIText-Regular\";\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: \" \";\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n ;\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker\n div.calendar\n div.month-header\n > span.month-header-text\n > .month-text {\n font-family: \"SFUIText-Medium\";\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today\n > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month\n > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.disabled\n > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month.disabled\n > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today.disabled\n > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.today\n > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"]);
|
|
12
|
+
var _templateObject = _taggedTemplateLiteral(["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n \n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n \n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items:center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule:evenodd;\n clip-rule:evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: \"SFUIText-Regular\";\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: \"SFUIText-Regular\";\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: \" \";\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n ;\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker\n div.calendar\n div.month-header\n > span.month-header-text\n > .month-text {\n font-family: \"SFUIText-Medium\";\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today\n > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month\n > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.disabled\n > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month.disabled\n > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today.disabled\n > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.today\n > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"], ["\n & div.form-input > input {\n display: ", ";\n }\n\n .form-input input {\n width: 100%;\n box-sizing: border-box;\n\n background: ", ";\n\n border: none;\n border-radius: 0px;\n -webkit-appearance: none;\n\n font-family: \"SFUIText-Medium\";\n color: ", ";\n cursor: ", ";\n pointer-events: ", ";\n font-size: 14px;\n padding: 10px 20px 4px 0px;\n display: block;\n \n &:disabled:hover {\n border-color: ", ";\n }\n &:disabled {\n border-color: ", ";\n color: ", ";\n }\n &:focus {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n opacity: ", ";\n transition: 0.2s ease all;\n }\n &:focus::placeholder {\n color: ", ";\n\n opacity: ", ";\n }\n }\n\n .form-input {\n border-bottom: 1px solid\n ", ";\n \n &:hover {\n border-color: ", ";\n }\n position: relative;\n margin-top: 20px;\n display: flex;\n align-items:center;\n .calender-icon {\n cursor: pointer;\n path {\n fill-rule:evenodd;\n clip-rule:evenodd;\n }\n }\n\n .clear-icon {\n position: absolute;\n right: 0px;\n bottom: 6px;\n cursor: pointer;\n path {\n fill: #ef5350;\n }\n }\n }\n .form-input label {\n color: ", ";\n font-size: 14px;\n font-family: \"SFUIText-Regular\";\n position: ", ";\n pointer-events: none;\n text-transform: none;\n left: 0px;\n top: ", ";\n transition: 0.2s ease all;\n -moz-transition: 0.2s ease all;\n -webkit-transition: 0.2s ease all;\n }\n\n .form-input label.floaton {\n top: ", ";\n left: 0px;\n font-size: 10px;\n color: ", ";\n text-transform: capitalize;\n }\n\n /* ======Date picker====== */\n\n &.ardp-date-picker {\n font-size: 16px;\n font-family: \"SFUIText-Regular\";\n box-sizing: border-box;\n position: relative;\n }\n &.ardp-date-picker * {\n box-sizing: border-box;\n }\n &.ardp-date-picker div.calendar {\n position: ", ";\n z-index: ", ";\n background: ", ";\n width: 300px;\n border-radius: 0px;\n height: auto;\n overflow: hidden;\n border: 1px solid\n ", ";\n }\n\n &.ardp-date-picker div.calendar:after,\n &.ardp-date-picker div.calendar:before {\n display: table;\n content: \" \";\n box-sizing: border-box;\n }\n\n &.ardp-date-picker div.calendar.calendar-show {\n visibility: visible;\n opacity: 1;\n transition: opacity 100ms linear;\n }\n &.ardp-date-picker div.calendar.calendar-hide {\n visibility: ", ";\n opacity: ", ";\n transition: visibility 0s 100ms, opacity 100ms linear;\n }\n\n &.ardp-date-picker div.calendar div.month-header {\n float: left;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n padding: 10px;\n border-bottom: 1px solid\n ", ";\n }\n &.ardp-date-picker div.calendar div.month-header > span > i {\n cursor: pointer;\n padding: 6px;\n border-radius: 50%;\n width: 25px;\n text-align: center;\n height: 25px;\n border-radius: 18px;\n background-color: ", ";\n ;\n }\n &.ardp-date-picker div.calendar div.month-header > span > i:hover {\n path {\n stroke: ", ";\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span > i > svg {\n path {\n fill: transparent;\n }\n }\n &.ardp-date-picker div.calendar div.month-header > span.month-header-text {\n color: ", ";\n width: 150px;\n text-align: center;\n }\n &.ardp-date-picker\n div.calendar\n div.month-header\n > span.month-header-text\n > .month-text {\n font-family: \"SFUIText-Medium\";\n color: ", ";\n text-transform: uppercase;\n }\n\n &.ardp-date-picker div.calendar div.week-header {\n float: left;\n width: 100%;\n display: block;\n padding: 10px 3px;\n }\n &.ardp-date-picker div.calendar div.week-header > span {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-transform: uppercase;\n color: ", ";\n text-align: center;\n }\n &.ardp-date-picker div.calendar div.weeks {\n float: left;\n width: 100%;\n overflow: hidden;\n position: relative;\n padding: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks > div {\n width: 300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.current {\n left: 0;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other {\n left: 300px;\n position: absolute;\n }\n &.ardp-date-picker div.calendar div.weeks > div.other.right {\n left: -300px;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding {\n transition: transform 250ms ease;\n -webkit-transition: -webkit-transform 250ms ease;\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.left {\n transform: translate3d(-300px, 0, 0);\n -webkit-transform: translate3d(-300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks > div.sliding.right {\n transform: translate3d(300px, 0, 0);\n -webkit-transform: translate3d(300px, 0, 0);\n }\n &.ardp-date-picker div.calendar div.weeks div.week {\n float: left;\n width: 100%;\n margin: 5px 0px;\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day {\n float: left;\n width: 14.285714285714286%;\n font-size: 14px;\n text-align: center;\n /* padding: 2px 0px; */\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span {\n //padding: 11px 0px 5px;\n display: inline-block;\n border-radius: 50%;\n height: 30px;\n width: 30px;\n text-align: center;\n border: 1px solid transparent;\n background: ", ";\n color: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day > span:hover,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today\n > span:hover {\n background: ", ";\n cursor: pointer;\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month\n > span {\n color: ", ";\n }\n &.ardp-date-picker div.calendar div.weeks div.week div.day.disabled > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.disabled\n > span:hover {\n color: ", ";\n cursor: not-allowed;\n background: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.other-month.disabled\n > span {\n color: ", ";\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.today > span {\n border: 1px none\n ", ";\n color: ", ";\n }\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.today.disabled\n > span {\n background: ", ";\n border: 1px solid transparent;\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.selected > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.today\n > span:hover {\n background: ", ";\n color: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span,\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.disabled\n > span:hover {\n background: ", ";\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-start {\n background: ", ";\n\n border-top-left-radius: 30px;\n border-bottom-left-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n }\n\n &.ardp-date-picker\n div.calendar\n div.weeks\n div.week\n div.day.selected.range-end {\n background: ", ";\n\n border-top-right-radius: 30px;\n border-bottom-right-radius: 30px;\n\n & > span {\n background: transparent;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n }\n }\n\n &.ardp-date-picker div.calendar div.weeks div.week div.day.in-selected-range {\n background: ", ";\n & > span {\n background: transparent;\n color: #fff;\n }\n }\n"]);
|
|
13
13
|
|
|
14
14
|
var _react = require("react");
|
|
15
15
|
|
|
@@ -47,6 +47,8 @@ var DatePickerInput = _styledComponents2.default.div(_templateObject, function (
|
|
|
47
47
|
return _tokens.colors[props.theme].datepicker.selectedColor;
|
|
48
48
|
}, function (props) {
|
|
49
49
|
return props.readOnly ? "not-allowed" : "pointer";
|
|
50
|
+
}, function (props) {
|
|
51
|
+
return props.readOnly ? "none" : "all";
|
|
50
52
|
}, function (props) {
|
|
51
53
|
return _tokens.colors[props.theme].inputCommon.borderDisabled;
|
|
52
54
|
}, function (props) {
|
|
@@ -527,7 +529,7 @@ var DatePicker = function (_Component) {
|
|
|
527
529
|
return _this4.show(0);
|
|
528
530
|
}
|
|
529
531
|
})),
|
|
530
|
-
!this.props.rangePicker && !this.props.inline && _react2.default.createElement(
|
|
532
|
+
!this.props.rangePicker && !this.props.inline && !this.props.readOnly && _react2.default.createElement(
|
|
531
533
|
"span",
|
|
532
534
|
{
|
|
533
535
|
className: "calender-icon",
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.9.
|
|
3
|
+
"version": "8.9.6",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "8.9.
|
|
10
|
+
"@desynova-digital/tokens": "8.9.6",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|