@desynova-digital/components 8.9.5 → 8.10.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.
|
@@ -8,7 +8,7 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
|
|
|
8
8
|
|
|
9
9
|
var _templateObject = _taggedTemplateLiteral(["\n background: rgba(0, 0, 0, 0.5);\n"], ["\n background: rgba(0, 0, 0, 0.5);\n"]),
|
|
10
10
|
_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"], ["\n position: relative;\n background: ", ";\n background-size: cover;\n width: ", ";\n height: ", ";\n\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: ", ";\n overflow: hidden;\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n"]),
|
|
11
|
-
_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n padding: 5px 8px;\n width:
|
|
11
|
+
_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"], ["\n position: relative;\n padding: 5px 8px;\n width: fit-content;\n border-radius: 15px;\n margin-right: 5px;\n display: flex;\n align-items: center;\n ", ";\n\n .status-color {\n height: 6px;\n width: 6px;\n border-radius: 100%;\n background-color: ", ";\n margin-right: 5px;\n }\n\n .status-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n height: 10px;\n }\n"]),
|
|
12
12
|
_templateObject4 = _taggedTemplateLiteral(["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"], ["\n ", ";\n &:hover {\n background-color: #00cec6;\n }\n &:active,\n &:focus {\n outline: none;\n }\n"]);
|
|
13
13
|
|
|
14
14
|
var _react = require("react");
|
|
@@ -169,7 +169,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
169
169
|
position: "relative",
|
|
170
170
|
zIndex: "2"
|
|
171
171
|
},
|
|
172
|
-
(card_status || upload_status) && statusIndex && _react2.default.createElement(
|
|
172
|
+
(card_status || upload_status) && statusIndex > -1 && _react2.default.createElement(
|
|
173
173
|
StatusBoxStyles,
|
|
174
174
|
{
|
|
175
175
|
hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
|
|
@@ -185,8 +185,8 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
185
185
|
},
|
|
186
186
|
card_status || upload_status
|
|
187
187
|
)
|
|
188
|
-
),
|
|
189
|
-
actions && actions.length
|
|
188
|
+
) || null,
|
|
189
|
+
actions && actions.length && actions.map(function (item, i) {
|
|
190
190
|
return item.icon && _react2.default.createElement(
|
|
191
191
|
IconButtonStyles,
|
|
192
192
|
{
|
|
@@ -208,7 +208,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
208
208
|
},
|
|
209
209
|
_react2.default.createElement(_icon2.default, { name: item.icon, width: 14, height: 14 })
|
|
210
210
|
);
|
|
211
|
-
})
|
|
211
|
+
}) || null
|
|
212
212
|
),
|
|
213
213
|
iframeurl && _react2.default.createElement(
|
|
214
214
|
"div",
|
|
@@ -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.
|
|
3
|
+
"version": "8.10.2",
|
|
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.
|
|
10
|
+
"@desynova-digital/tokens": "8.10.2",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|