@lanaco/lnc-react-ui 3.11.9 → 3.11.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.esm.js +41 -6
- package/lib/index.js +41 -6
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -13440,7 +13440,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13440
13440
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13441
13441
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13442
13442
|
};
|
|
13443
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13443
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral(["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13444
13444
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13445
13445
|
}, function (props) {
|
|
13446
13446
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13454,6 +13454,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13454
13454
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13455
13455
|
}, function (props) {
|
|
13456
13456
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13457
|
+
}, function (props) {
|
|
13458
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13457
13459
|
}, function (props) {
|
|
13458
13460
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13459
13461
|
}, function (props) {
|
|
@@ -13478,14 +13480,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13478
13480
|
return getCheckSize(props.theme, props.size);
|
|
13479
13481
|
}, function (props) {
|
|
13480
13482
|
return getCheckSize(props.theme, props.size);
|
|
13483
|
+
}, function (props) {
|
|
13484
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13481
13485
|
}, function (props) {
|
|
13482
13486
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13483
13487
|
}, function (props) {
|
|
13484
13488
|
return getCheckSize(props.theme, props.size);
|
|
13485
13489
|
}, function (props) {
|
|
13486
13490
|
return getCheckSize(props.theme, props.size);
|
|
13491
|
+
}, function (props) {
|
|
13492
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13487
13493
|
}, function (props) {
|
|
13488
13494
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13495
|
+
}, function (props) {
|
|
13496
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13489
13497
|
}, function (props) {
|
|
13490
13498
|
return getOutlineCss(props.theme);
|
|
13491
13499
|
}, function (props) {
|
|
@@ -14316,10 +14324,8 @@ Icon.propTypes = {
|
|
|
14316
14324
|
};
|
|
14317
14325
|
|
|
14318
14326
|
var _templateObject$1n;
|
|
14319
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14327
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral(["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n\n & .react-datepicker__week {\n display: flex;\n }\n"])), function (props) {
|
|
14320
14328
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14321
|
-
}, function (props) {
|
|
14322
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14323
14329
|
}, function (props) {
|
|
14324
14330
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14325
14331
|
}, function (props) {
|
|
@@ -45818,7 +45824,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45818
45824
|
if (direction == "left") return "row-reverse";
|
|
45819
45825
|
return "row";
|
|
45820
45826
|
};
|
|
45821
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45827
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral(["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45822
45828
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45823
45829
|
}, function (props) {
|
|
45824
45830
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45844,15 +45850,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45844
45850
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45845
45851
|
}, function (props) {
|
|
45846
45852
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45853
|
+
}, function (props) {
|
|
45854
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45855
|
+
}, function (props) {
|
|
45856
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45847
45857
|
}, function (props) {
|
|
45848
45858
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45849
45859
|
}, function (props) {
|
|
45850
45860
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45851
45861
|
}, function (props) {
|
|
45852
45862
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45863
|
+
}, function (props) {
|
|
45864
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45865
|
+
}, function (props) {
|
|
45866
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45867
|
+
}, function (props) {
|
|
45868
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45869
|
+
}, function (props) {
|
|
45870
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45871
|
+
}, function (props) {
|
|
45872
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45873
|
+
}, function (props) {
|
|
45874
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45875
|
+
}, function (props) {
|
|
45876
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45877
|
+
}, function (props) {
|
|
45878
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45879
|
+
}, function (props) {
|
|
45880
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45881
|
+
}, function (props) {
|
|
45882
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45883
|
+
}, function (props) {
|
|
45884
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45853
45885
|
});
|
|
45854
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45886
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45855
45887
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45888
|
+
}, function (props) {
|
|
45889
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45856
45890
|
});
|
|
45857
45891
|
var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
45858
45892
|
var id = props.id,
|
|
@@ -45956,6 +45990,7 @@ var RadioInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
|
|
|
45956
45990
|
className: "inner-circle",
|
|
45957
45991
|
strokeWidth: "0"
|
|
45958
45992
|
}))), /*#__PURE__*/React__default.createElement(Label$3, _extends$4({}, themeProps, {
|
|
45993
|
+
className: "lnc-radio-input-label",
|
|
45959
45994
|
disalbed: disabled,
|
|
45960
45995
|
readOnly: readOnly,
|
|
45961
45996
|
title: label,
|
package/lib/index.js
CHANGED
|
@@ -13489,7 +13489,7 @@ var getLabelDirection$2 = function getLabelDirection(direction) {
|
|
|
13489
13489
|
var getCheckSize = function getCheckSize(theme, size) {
|
|
13490
13490
|
return "calc(".concat(theme.components.Checkbox["default"].enabled.sizes[size], " / 2)");
|
|
13491
13491
|
};
|
|
13492
|
-
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13492
|
+
var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _taggedTemplateLiteral__default["default"](["\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n cursor: pointer;\n min-height: ", ";\n max-height: ", ";\n display: inline-flex;\n align-items: center;\n justify-content: start;\n flex-direction: ", ";\n ", "\n width: 100%;\n ", "\n ", ";\n gap: 0.75rem;\n position: relative;\n & .checkbox-label {\n ", "\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n }\n & input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 100%;\n width: 100%;\n z-index: 3;\n }\n & input:focus {\n outline: none;\n background: transparent;\n }\n & input:active {\n outline: none;\n background: transparent;\n }\n & .checkmark {\n min-height: ", ";\n min-width: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n background-color: transparent;\n color: ", ";\n border: 1px solid\n ", ";\n border-radius: ", ";\n ", ";\n & svg {\n height: 0;\n width: 0;\n stroke: transparent;\n }\n & img {\n max-height: 0;\n max-width: 0;\n filter: brightness(0) invert(1);\n }\n }\n & input:checked ~ .checkmark {\n background-color: ", ";\n border: 1px solid\n ", ";\n & .checked {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n & .indeterminate {\n height: 0;\n width: 0;\n }\n & img {\n max-height: ", ";\n max-width: ", ";\n }\n }\n & input:checked ~ .checkbox-label {\n color: ", ";\n }\n & input:indeterminate ~ .checkmark {\n & .checked {\n height: 0;\n width: 0;\n }\n background-color: ", ";\n & .indeterminate {\n height: ", ";\n width: ", ";\n stroke: white;\n }\n }\n & input:indeterminate ~ .checkbox-label {\n color: ", ";\n }\n & input:disabled ~ .checkmark {\n ", ";\n }\n & input:disabled ~ .checkbox-label {\n color: ", ";\n }\n & input:focus ~ .checkmark {\n ", ";\n }\n & input:active ~ .checkmark {\n ", ";\n }\n"])), function (props) {
|
|
13493
13493
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
13494
13494
|
}, function (props) {
|
|
13495
13495
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -13503,6 +13503,8 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13503
13503
|
return getComponentTypographyCss(props.theme, "Checkbox", props.size, "enabled");
|
|
13504
13504
|
}, function (props) {
|
|
13505
13505
|
return !props.disabled && props.readOnly == false && "cursor: pointer;";
|
|
13506
|
+
}, function (props) {
|
|
13507
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13506
13508
|
}, function (props) {
|
|
13507
13509
|
return props.theme.components.Checkbox["default"].enabled.sizes[props.size];
|
|
13508
13510
|
}, function (props) {
|
|
@@ -13527,14 +13529,20 @@ var Container$d = newStyled.label(_templateObject$1q || (_templateObject$1q = _t
|
|
|
13527
13529
|
return getCheckSize(props.theme, props.size);
|
|
13528
13530
|
}, function (props) {
|
|
13529
13531
|
return getCheckSize(props.theme, props.size);
|
|
13532
|
+
}, function (props) {
|
|
13533
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "text");
|
|
13530
13534
|
}, function (props) {
|
|
13531
13535
|
return getColorRgbaValue(props.theme, "Checkbox", props.color, "active", "background", "backgroundOpacity");
|
|
13532
13536
|
}, function (props) {
|
|
13533
13537
|
return getCheckSize(props.theme, props.size);
|
|
13534
13538
|
}, function (props) {
|
|
13535
13539
|
return getCheckSize(props.theme, props.size);
|
|
13540
|
+
}, function (props) {
|
|
13541
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "enabled", "text");
|
|
13536
13542
|
}, function (props) {
|
|
13537
13543
|
return props.readOnly == false && "background-color: ".concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n border-color: ").concat(getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "border"), ";\n ");
|
|
13544
|
+
}, function (props) {
|
|
13545
|
+
return getColorRgbaValue(props.theme, "Checkbox", props.color, "disabled", "text");
|
|
13538
13546
|
}, function (props) {
|
|
13539
13547
|
return getOutlineCss(props.theme);
|
|
13540
13548
|
}, function (props) {
|
|
@@ -14365,10 +14373,8 @@ Icon.propTypes = {
|
|
|
14365
14373
|
};
|
|
14366
14374
|
|
|
14367
14375
|
var _templateObject$1n;
|
|
14368
|
-
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n
|
|
14376
|
+
var Styled_DatePickerWrapper = newStyled.div(_templateObject$1n || (_templateObject$1n = _taggedTemplateLiteral__default["default"](["\n ", "\n & .react-datepicker__header__dropdown {\n position: absolute !important;\n z-index: 30;\n top: 1.3rem;\n font-size: 1rem;\n width: 100%;\n @media (max-width: 725px) {\n width: ", ";\n }\n @media (max-width: 550px) {\n width: 100%;\n }\n }\n & input {\n border: none;\n outline: none;\n ", "\n }\n & .react-datepicker {\n position: relative;\n background-color: ", ";\n color: ", ";\n border: none;\n box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1),\n 0px 2px 4px -1px rgba(0, 0, 0, 0.06);\n border-radius: 16px;\n }\n & .react-datepicker__day {\n min-width: 2rem;\n width: ", ";\n height: ", ";\n }\n & .react-datepicker__month-read-view--down-arrow,\n .react-datepicker__year-read-view--down-arrow {\n display: none;\n }\n & .react-datepicker__day--today {\n border: 1px solid\n ", ";\n color: ", " !important;\n border-radius: 8px;\n }\n & .react-datepicker__current-month,\n & .react-datepicker-time__header,\n & .react-datepicker-year-header {\n padding: 0.875rem 0 0 0;\n font-size: 1rem;\n font-weight: 400;\n }\n & .react-datepicker__day--outside-month {\n color: ", " !important;\n background-color: transparent !important;\n }\n & .react-datepicker__header {\n border-radius: 8px 8px 0 0;\n background-color: transparent;\n border-bottom: 1px solid transparent;\n font-size: 1rem;\n }\n & .react-datepicker__day-names {\n margin-top: 3.5rem;\n color: ", " !important;\n }\n & .react-datepicker__day-name,\n & .react-datepicker__day,\n & .react-datepicker__time-name {\n color: var(--primary);\n font-size: 1rem;\n min-width: 2rem;\n padding: ", ";\n }\n & .react-datepicker__day-name {\n line-height: 0;\n }\n & .react-datepicker__day--keyboard-selected:hover,\n & .react-datepicker__month-text--keyboard-selected:hover,\n & .react-datepicker__quarter-text--keyboard-selected:hover,\n & .react-datepicker__year-text--keyboard-selected:hover,\n & .react-datepicker__day:hover {\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n font-size: 1rem;\n background-color: ", ";\n }\n\n & .react-datepicker__year-dropdown,\n & .react-datepicker__month-dropdown,\n & .react-datepicker__month-year-dropdown {\n width: 100%;\n left: 0%;\n display: flex;\n flex-wrap: wrap;\n border: 1px solid transparent;\n box-shadow: 0px 0px 20px rgba(65, 43, 118, 0.1);\n border-radius: 8px;\n padding: 4px;\n }\n\n & .react-datepicker__year-option,\n & .react-datepicker__month-year-option {\n width: 33.33%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__month-option {\n width: 50%;\n margin-left: 0;\n padding: 0.45rem;\n margin-right: 0;\n }\n & .react-datepicker__year-option:hover,\n & .react-datepicker__month-option:hover,\n & .react-datepicker__month-year-option:hover {\n border-radius: 8px;\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option:nth-of-type(1),\n & .react-datepicker__month-year-option:nth-of-type(1),\n & .react-datepicker__year-option:last-of-type,\n & .react-datepicker__month-year-option:last-of-type {\n width: 100%;\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected,\n & .react-datepicker__month-year-option--selected {\n position: unset;\n }\n\n & .react-datepicker__year-option--selected_year {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n\n & .react-datepicker__year-option--selected,\n & .react-datepicker__month-option--selected {\n display: none;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n top: -4px;\n border-bottom-color: #ccc;\n }\n & .react-datepicker__year-read-view,\n & .react-datepicker__month-read-view,\n & .react-datepicker__month-year-read-view {\n color: transparent;\n }\n\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n top: 4px;\n border-top-color: #ccc;\n }\n\n & .react-datepicker__navigation--years {\n background: none;\n line-height: 1.7rem;\n text-align: center;\n cursor: pointer;\n padding: 0;\n border: 0.45rem solid transparent;\n z-index: 1;\n height: 10px;\n width: 10px;\n text-indent: -999em;\n overflow: hidden;\n position: relative;\n display: block;\n margin-left: auto;\n margin-right: auto;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-width: 1px 1px 0 0;\n }\n & .react-datepicker__navigation {\n top: 1rem;\n z-index: 40;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow {\n top: 4px;\n border-color: transparent;\n padding: 4px;\n }\n & .react-datepicker__year-read-view--down-arrow,\n & .react-datepicker__month-read-view--down-arrow,\n & .react-datepicker__month-year-read-view--down-arrow,\n & .react-datepicker__navigation-icon::before {\n border-color: ", ";\n }\n & .react-datepicker__header--time {\n border-bottom: none;\n }\n & .react-datepicker__time {\n ", "\n background-color: var(--primary-100) !important;\n font-size: 0.9rem;\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item:hover {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__time-container\n .react-datepicker__time\n .react-datepicker__time-box\n ul.react-datepicker__time-list\n li.react-datepicker__time-list-item--selected {\n color: ", ";\n border-radius: 8px;\n background-color: ", ";\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-upcoming {\n border-bottom-color: var(--primary);\n }\n &\n .react-datepicker__navigation--years.react-datepicker__navigation--years-previous {\n border-top-color: var(--primary);\n }\n & .react-datepicker-popper[data-placement^=\"bottom\"] {\n padding-top: 0;\n }\n & .react-datepicker__day--selected,\n & .react-datepicker__day--in-selecting-range,\n & .react-datepicker__day--in-range,\n & .react-datepicker__month-text--selected,\n & .react-datepicker__month-text--in-selecting-range,\n & .react-datepicker__month-text--in-range,\n & .react-datepicker__quarter-text--selected,\n & .react-datepicker__quarter-text--in-selecting-range,\n & .react-datepicker__quarter-text--in-range,\n & .react-datepicker__year-text--selected,\n & .react-datepicker__year-text--in-selecting-range,\n & .react-datepicker__year-text--in-range {\n background-color: ", ";\n color: ", ";\n border: none;\n }\n &\n .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__day--selecting-range-start, .react-datepicker__day--selecting-range-end, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),\n &\n .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range) {\n border-radius: 8px;\n background-color: ", ";\n color: ", ";\n }\n & .react-datepicker__day--selecting-range-start,\n & .react-datepicker__day--selecting-range-end {\n background-color: ", ";\n color: ", ";\n }\n\n & .react-datepicker__day--disabled {\n background-color: ", ";\n color: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n }\n\n & .react-datepicker__week {\n display: flex;\n }\n"])), function (props) {
|
|
14369
14377
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14370
|
-
}, function (props) {
|
|
14371
|
-
return props.monthsShown > 2 ? 3 * 100 + "%" : props.monthsShown * 100 + "%";
|
|
14372
14378
|
}, function (props) {
|
|
14373
14379
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
14374
14380
|
}, function (props) {
|
|
@@ -45867,7 +45873,7 @@ var getLabelDirection$1 = function getLabelDirection(direction) {
|
|
|
45867
45873
|
if (direction == "left") return "row-reverse";
|
|
45868
45874
|
return "row";
|
|
45869
45875
|
};
|
|
45870
|
-
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n"])), function (props) {
|
|
45876
|
+
var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _taggedTemplateLiteral__default["default"](["\n min-height: ", ";\n max-height: ", ";\n width: 100%;\n display: inline-flex;\n justify-content: start;\n align-items: center;\n flex-direction: ", ";\n ", "\n gap: 0.5rem;\n ", "\n ", ";\n gap: 0.75rem;\n cursor: pointer;\n position: relative;\n & input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n & .checkmark {\n box-sizing: border-box;\n cursor: pointer;\n min-height: ", ";\n min-width: ", ";\n height: ", ";\n width: ", ";\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.2s ease;\n ", ";\n & svg {\n fill: transparent;\n & .outer-circle {\n stroke: ", ";\n }\n & .inner-circle {\n stroke: ", ";\n }\n }\n }\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n\n \n & input:checked ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n }\n\n & input:disabled ~ .lnc-radio-input-label {\n color: ", ";\n }\n \n & input[disabled]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n\n & input[disabled] ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "\n };\n }\n }\n\n & input:hover ~ .lnc-radio-input-label {\n color: ", ";\n }\n & input[hover]:checked ~ .checkmark {\n & svg {\n fill: ", ";\n & .outer-circle {\n fill: ", ";\n }\n & .inner-circle {\n fill: ", "};\n }\n }\n"])), function (props) {
|
|
45871
45877
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
45872
45878
|
}, function (props) {
|
|
45873
45879
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
@@ -45893,15 +45899,43 @@ var Container$b = newStyled.label(_templateObject$1h || (_templateObject$1h = _t
|
|
|
45893
45899
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45894
45900
|
}, function (props) {
|
|
45895
45901
|
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "border");
|
|
45902
|
+
}, function (props) {
|
|
45903
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45904
|
+
}, function (props) {
|
|
45905
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "text");
|
|
45896
45906
|
}, function (props) {
|
|
45897
45907
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "background", "backgroundOpacity");
|
|
45898
45908
|
}, function (props) {
|
|
45899
45909
|
return getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45900
45910
|
}, function (props) {
|
|
45901
45911
|
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "active", "border");
|
|
45912
|
+
}, function (props) {
|
|
45913
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "text");
|
|
45914
|
+
}, function (props) {
|
|
45915
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45916
|
+
}, function (props) {
|
|
45917
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45918
|
+
}, function (props) {
|
|
45919
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45920
|
+
}, function (props) {
|
|
45921
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "background", "backgroundOpacity");
|
|
45922
|
+
}, function (props) {
|
|
45923
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45924
|
+
}, function (props) {
|
|
45925
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45926
|
+
}, function (props) {
|
|
45927
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "text");
|
|
45928
|
+
}, function (props) {
|
|
45929
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "hover", "background", "backgroundOpacity");
|
|
45930
|
+
}, function (props) {
|
|
45931
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45932
|
+
}, function (props) {
|
|
45933
|
+
return props.innerColor === "white" || props.innerColor === "transparent" ? props.innerColor : getColorRgbaValue(props.theme, "Radio", props.color, "disabled", "border");
|
|
45902
45934
|
});
|
|
45903
|
-
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), function (props) {
|
|
45935
|
+
var Label$3 = newStyled.label(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral__default["default"](["\n ", ";\n min-width: 0;\n flex-shrink: 1;\n min-height: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n color: ", ";\n"])), function (props) {
|
|
45904
45936
|
return !props.disabled && props.readOnly == false && "cursor: pointer";
|
|
45937
|
+
}, function (props) {
|
|
45938
|
+
return getColorRgbaValue(props.theme, "Radio", props.color, "enabled", "text");
|
|
45905
45939
|
});
|
|
45906
45940
|
var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
45907
45941
|
var id = props.id,
|
|
@@ -46005,6 +46039,7 @@ var RadioInput = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
46005
46039
|
className: "inner-circle",
|
|
46006
46040
|
strokeWidth: "0"
|
|
46007
46041
|
}))), /*#__PURE__*/React__default["default"].createElement(Label$3, _extends__default$1["default"]({}, themeProps, {
|
|
46042
|
+
className: "lnc-radio-input-label",
|
|
46008
46043
|
disalbed: disabled,
|
|
46009
46044
|
readOnly: readOnly,
|
|
46010
46045
|
title: label,
|