@desynova-digital/components 8.9.3 → 8.10.0
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");
|
|
@@ -111,7 +111,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
111
111
|
* @const
|
|
112
112
|
*/
|
|
113
113
|
var index = _tokens.CARD_ASSET_STATUS.findIndex(function (label) {
|
|
114
|
-
return label.code.includes(
|
|
114
|
+
return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
|
|
115
115
|
});
|
|
116
116
|
setStatusIndex(index);
|
|
117
117
|
}, [upload_status, card_status]);
|
|
@@ -169,7 +169,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
169
169
|
position: "relative",
|
|
170
170
|
zIndex: "2"
|
|
171
171
|
},
|
|
172
|
-
(
|
|
172
|
+
(card_status || upload_status) && statusIndex && _react2.default.createElement(
|
|
173
173
|
StatusBoxStyles,
|
|
174
174
|
{
|
|
175
175
|
hex: _tokens.CARD_ASSET_STATUS[statusIndex] ? _tokens.CARD_ASSET_STATUS[statusIndex].hex : { background: "#AFB2BA" }
|
|
@@ -183,7 +183,7 @@ var Thumbnail = function Thumbnail(props) {
|
|
|
183
183
|
fontSize: "10px",
|
|
184
184
|
color: "#FFF"
|
|
185
185
|
},
|
|
186
|
-
|
|
186
|
+
card_status || upload_status
|
|
187
187
|
)
|
|
188
188
|
),
|
|
189
189
|
actions && actions.length > 0 && actions.map(function (item, i) {
|
|
@@ -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/atoms/icon/icon.story.js
CHANGED
|
@@ -43,6 +43,9 @@ console.log(iconsArr);
|
|
|
43
43
|
_react2.default.createElement(
|
|
44
44
|
_storyHelpers.Stack,
|
|
45
45
|
null,
|
|
46
|
+
_react2.default.createElement(_components.Icon, { name: "stitching", width: 24, height: 24 }),
|
|
47
|
+
_react2.default.createElement(_components.Icon, { name: "publishing", width: 24, height: 24 }),
|
|
48
|
+
_react2.default.createElement(_components.Icon, { name: "hes", width: 24, height: 24 }),
|
|
46
49
|
_react2.default.createElement(_components.Icon, { name: "add", width: 14, height: 14 }),
|
|
47
50
|
_react2.default.createElement(_components.Icon, { name: "add-circle", width: 18, height: 18 }),
|
|
48
51
|
_react2.default.createElement(_components.Icon, { name: "arrow-left", width: 14, height: 14 }),
|
package/atoms/icon/icons.json
CHANGED
|
@@ -1250,6 +1250,21 @@
|
|
|
1250
1250
|
"paths": ["M6.22222 0L4.59556 1.77778H1.77778C0.8 1.77778 0 2.57778 0 3.55556V14.2222C0 15.2 0.8 16 1.77778 16H16C16.9778 16 17.7778 15.2 17.7778 14.2222V3.55556C17.7778 2.57778 16.9778 1.77778 16 1.77778H13.1822L11.5556 0H6.22222ZM8.88889 13.3333C6.43556 13.3333 4.44444 11.3422 4.44444 8.88889C4.44444 6.43556 6.43556 4.44444 8.88889 4.44444C11.3422 4.44444 13.3333 6.43556 13.3333 8.88889C13.3333 11.3422 11.3422 13.3333 8.88889 13.3333ZM8.88889 11.7333C10.4598 11.7333 11.7333 10.4598 11.7333 8.88889C11.7333 7.31795 10.4598 6.04444 8.88889 6.04444C7.31795 6.04444 6.04444 7.31795 6.04444 8.88889C6.04444 10.4598 7.31795 11.7333 8.88889 11.7333Z"],
|
|
1251
1251
|
"width": 18,
|
|
1252
1252
|
"height": 16
|
|
1253
|
+
},
|
|
1254
|
+
"stitching": {
|
|
1255
|
+
"paths" :["M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"],
|
|
1256
|
+
"width": 24,
|
|
1257
|
+
"height": 24
|
|
1258
|
+
},
|
|
1259
|
+
"publishing": {
|
|
1260
|
+
"paths" :["M15.5 5H11l5 7-5 7h4.5l5-7z", "M8.5 5H4l5 7-5 7h4.5l5-7z"],
|
|
1261
|
+
"width": 24,
|
|
1262
|
+
"height": 24
|
|
1263
|
+
},
|
|
1264
|
+
"hes": {
|
|
1265
|
+
"paths" :["M21 3.01H3c-1.1 0-2 .9-2 2V9h2V4.99h18v14.03H3V15H1v4.01c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98v-14c0-1.11-.9-2-2-2zM11 16l4-4-4-4v3H1v2h10v3z"],
|
|
1266
|
+
"width": 24,
|
|
1267
|
+
"height": 24
|
|
1253
1268
|
}
|
|
1254
1269
|
}
|
|
1255
1270
|
}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.10.0",
|
|
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.0",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|