@lanaco/lnc-react-ui 3.11.10 → 3.11.12
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 +16 -14
- package/lib/index.js +16 -14
- package/package.json +1 -1
package/lib/index.esm.js
CHANGED
|
@@ -14324,7 +14324,7 @@ Icon.propTypes = {
|
|
|
14324
14324
|
};
|
|
14325
14325
|
|
|
14326
14326
|
var _templateObject$1n;
|
|
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--
|
|
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) {
|
|
14328
14328
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14329
14329
|
}, function (props) {
|
|
14330
14330
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
@@ -47520,17 +47520,17 @@ var FilledButton$1 = newStyled.button(_templateObject3$e || (_templateObject3$e
|
|
|
47520
47520
|
}, function (props) {
|
|
47521
47521
|
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "background");
|
|
47522
47522
|
}, function (props) {
|
|
47523
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "text");
|
|
47523
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "text");
|
|
47524
47524
|
}, function (props) {
|
|
47525
47525
|
return !props.disabled && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "background");
|
|
47526
47526
|
}, function (props) {
|
|
47527
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "text");
|
|
47527
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "text");
|
|
47528
47528
|
}, function (props) {
|
|
47529
47529
|
return !props.disabled && getOutlineCss(props.theme);
|
|
47530
47530
|
}, function (props) {
|
|
47531
47531
|
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "background");
|
|
47532
47532
|
}, function (props) {
|
|
47533
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "text");
|
|
47533
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "text");
|
|
47534
47534
|
});
|
|
47535
47535
|
var TintedButton$1 = newStyled.button(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n ", "\n\n min-height: ", ";\n max-height: ", ";\n ", ";\n\n backdrop-filter: blur(48px);\n background-color: ", ";\n\n color: ", ";\n\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n\n color: ", ";\n }\n\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47536
47536
|
return commonCss$1(props);
|
|
@@ -47822,36 +47822,38 @@ var FilledButton = newStyled.button(_templateObject2$p || (_templateObject2$p =
|
|
|
47822
47822
|
}, function (props) {
|
|
47823
47823
|
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "disabled", "text");
|
|
47824
47824
|
});
|
|
47825
|
-
var TintedButton = newStyled.button(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n ", "\n\n ", ";\n\n backdrop-filter: blur(48px);\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47825
|
+
var TintedButton = newStyled.button(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n ", "\n\n ", ";\n\n backdrop-filter: blur(48px);\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
47826
47826
|
return commonCss(props);
|
|
47827
47827
|
}, function (props) {
|
|
47828
47828
|
return getComponentTypographyCss(props.theme, "ButtonTinted", props.size, "enabled");
|
|
47829
47829
|
}, function (props) {
|
|
47830
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "text");
|
|
47830
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "text");
|
|
47831
47831
|
}, function (props) {
|
|
47832
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "background", "backgroundOpacity");
|
|
47832
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "background", "backgroundOpacity");
|
|
47833
47833
|
}, function (props) {
|
|
47834
47834
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
47835
47835
|
}, function (props) {
|
|
47836
47836
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
47837
47837
|
}, function (props) {
|
|
47838
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "background", "backgroundOpacity");
|
|
47838
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "background", "backgroundOpacity");
|
|
47839
47839
|
}, function (props) {
|
|
47840
|
-
return
|
|
47840
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "text");
|
|
47841
47841
|
}, function (props) {
|
|
47842
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "background", "backgroundOpacity");
|
|
47842
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "background", "backgroundOpacity");
|
|
47843
47843
|
}, function (props) {
|
|
47844
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "text");
|
|
47844
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "text");
|
|
47845
47845
|
}, function (props) {
|
|
47846
47846
|
return props.disabled === false && getOutlineCss(props.theme);
|
|
47847
47847
|
}, function (props) {
|
|
47848
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "background", "backgroundOpacity");
|
|
47848
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "background", "backgroundOpacity");
|
|
47849
47849
|
}, function (props) {
|
|
47850
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "text");
|
|
47850
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "text");
|
|
47851
47851
|
}, function (props) {
|
|
47852
47852
|
return props.disabled === true && getDisabledStateCss(props.theme);
|
|
47853
47853
|
}, function (props) {
|
|
47854
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "background");
|
|
47854
|
+
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "background", "backgroundOpacity");
|
|
47855
|
+
}, function (props) {
|
|
47856
|
+
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "text");
|
|
47855
47857
|
});
|
|
47856
47858
|
var BasicButton = newStyled.button(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n ", "\n\n ", ";\n\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47857
47859
|
return commonCss(props);
|
package/lib/index.js
CHANGED
|
@@ -14373,7 +14373,7 @@ Icon.propTypes = {
|
|
|
14373
14373
|
};
|
|
14374
14374
|
|
|
14375
14375
|
var _templateObject$1n;
|
|
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--
|
|
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) {
|
|
14377
14377
|
return getComponentTypographyCss(props.theme, "DateInput", props.size, "enabled");
|
|
14378
14378
|
}, function (props) {
|
|
14379
14379
|
return props.monthsShown > 1 ? "200%" : "100%";
|
|
@@ -47569,17 +47569,17 @@ var FilledButton$1 = newStyled.button(_templateObject3$e || (_templateObject3$e
|
|
|
47569
47569
|
}, function (props) {
|
|
47570
47570
|
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "background");
|
|
47571
47571
|
}, function (props) {
|
|
47572
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "text");
|
|
47572
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "hover", "text");
|
|
47573
47573
|
}, function (props) {
|
|
47574
47574
|
return !props.disabled && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "background");
|
|
47575
47575
|
}, function (props) {
|
|
47576
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "text");
|
|
47576
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "focus", "text");
|
|
47577
47577
|
}, function (props) {
|
|
47578
47578
|
return !props.disabled && getOutlineCss(props.theme);
|
|
47579
47579
|
}, function (props) {
|
|
47580
47580
|
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "background");
|
|
47581
47581
|
}, function (props) {
|
|
47582
|
-
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "text");
|
|
47582
|
+
return props.disabled === false && getColorRgbaValue(props.theme, "ButtonFilled", props.color, "active", "text");
|
|
47583
47583
|
});
|
|
47584
47584
|
var TintedButton$1 = newStyled.button(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral__default["default"](["\n ", "\n\n min-height: ", ";\n max-height: ", ";\n ", ";\n\n backdrop-filter: blur(48px);\n background-color: ", ";\n\n color: ", ";\n\n &:hover {\n background-color: ", ";\n\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n\n color: ", ";\n }\n\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47585
47585
|
return commonCss$1(props);
|
|
@@ -47871,36 +47871,38 @@ var FilledButton = newStyled.button(_templateObject2$p || (_templateObject2$p =
|
|
|
47871
47871
|
}, function (props) {
|
|
47872
47872
|
return getColorRgbaValue(props.theme, "ButtonFilled", props.color, "disabled", "text");
|
|
47873
47873
|
});
|
|
47874
|
-
var TintedButton = newStyled.button(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral__default["default"](["\n ", "\n\n ", ";\n\n backdrop-filter: blur(48px);\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47874
|
+
var TintedButton = newStyled.button(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral__default["default"](["\n ", "\n\n ", ";\n\n backdrop-filter: blur(48px);\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n color: ", ";\n }\n"])), function (props) {
|
|
47875
47875
|
return commonCss(props);
|
|
47876
47876
|
}, function (props) {
|
|
47877
47877
|
return getComponentTypographyCss(props.theme, "ButtonTinted", props.size, "enabled");
|
|
47878
47878
|
}, function (props) {
|
|
47879
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "text");
|
|
47879
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "text");
|
|
47880
47880
|
}, function (props) {
|
|
47881
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "background", "backgroundOpacity");
|
|
47881
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "enabled", "background", "backgroundOpacity");
|
|
47882
47882
|
}, function (props) {
|
|
47883
47883
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
47884
47884
|
}, function (props) {
|
|
47885
47885
|
return getSizeValueWithUnits(props.theme, props.size);
|
|
47886
47886
|
}, function (props) {
|
|
47887
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "background", "backgroundOpacity");
|
|
47887
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "background", "backgroundOpacity");
|
|
47888
47888
|
}, function (props) {
|
|
47889
|
-
return
|
|
47889
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "hover", "text");
|
|
47890
47890
|
}, function (props) {
|
|
47891
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "background", "backgroundOpacity");
|
|
47891
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "background", "backgroundOpacity");
|
|
47892
47892
|
}, function (props) {
|
|
47893
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "text");
|
|
47893
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "focus", "text");
|
|
47894
47894
|
}, function (props) {
|
|
47895
47895
|
return props.disabled === false && getOutlineCss(props.theme);
|
|
47896
47896
|
}, function (props) {
|
|
47897
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "background", "backgroundOpacity");
|
|
47897
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "background", "backgroundOpacity");
|
|
47898
47898
|
}, function (props) {
|
|
47899
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "text");
|
|
47899
|
+
return props.disabled !== true && getColorRgbaValue(props.theme, "ButtonTinted", props.color, "active", "text");
|
|
47900
47900
|
}, function (props) {
|
|
47901
47901
|
return props.disabled === true && getDisabledStateCss(props.theme);
|
|
47902
47902
|
}, function (props) {
|
|
47903
|
-
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "background");
|
|
47903
|
+
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "background", "backgroundOpacity");
|
|
47904
|
+
}, function (props) {
|
|
47905
|
+
return getColorRgbaValue(props.theme, "ButtonTinted", "gray", "disabled", "text");
|
|
47904
47906
|
});
|
|
47905
47907
|
var BasicButton = newStyled.button(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral__default["default"](["\n ", "\n\n ", ";\n\n color: ", ";\n\n background-color: ", ";\n\n min-height: ", ";\n max-height: ", ";\n\n &:hover {\n background-color: ", ";\n color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n color: ", ";\n ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n }\n\n &:disabled {\n ", ";\n cursor: default;\n background-color: ", ";\n }\n"])), function (props) {
|
|
47906
47908
|
return commonCss(props);
|