willba-component-library 0.2.88 → 0.2.89
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 +3 -3
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +3 -3
- package/lib/index.js.map +1 -1
- package/lib/index.umd.js +3 -3
- package/lib/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.css +4 -0
- package/src/components/FilterBar/components/buttons/select-button/SelectButton.tsx +2 -2
package/lib/index.umd.js
CHANGED
|
@@ -11872,7 +11872,7 @@
|
|
|
11872
11872
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11873
11873
|
};
|
|
11874
11874
|
|
|
11875
|
-
var css_248z$7 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
|
|
11875
|
+
var css_248z$7 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n -webkit-appearance: none;\n appearance: none;\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n -webkit-appearance: none;\n appearance: none;\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n min-height: 19px;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
|
|
11876
11876
|
styleInject(css_248z$7);
|
|
11877
11877
|
|
|
11878
11878
|
var SelectButton = function (_a) {
|
|
@@ -11880,8 +11880,8 @@
|
|
|
11880
11880
|
return (React__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick },
|
|
11881
11881
|
React__default.createElement("span", { className: "select-button-wrapper" },
|
|
11882
11882
|
React__default.createElement("div", null,
|
|
11883
|
-
React__default.createElement("
|
|
11884
|
-
React__default.createElement("
|
|
11883
|
+
React__default.createElement("p", { className: "select-button-label" }, label),
|
|
11884
|
+
React__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11885
11885
|
};
|
|
11886
11886
|
|
|
11887
11887
|
var css_248z$6 = ".will-filter-bar-tab-button {\n width: auto;\n height: auto;\n padding: 10px 20px;\n cursor: pointer;\n border: none;\n white-space: nowrap;\n font-size: 16px;\n display: flex;\n align-items: center;\n background-color: transparent;\n user-select: none;\n font-weight: 600;\n border-radius: 50px;\n }\n\n .will-filter-bar-tab-button.light {\n color: var(--will-white)\n }\n\n .will-filter-bar-tab-button.dark {\n color: var(--will-black)\n }\n\n .will-filter-bar-tab-button.light.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-white);\n }\n\n .will-filter-bar-tab-button.dark.active,\n .will-filter-bar-tab-button:hover {\n background-color: var(--will-transparent-lavender);\n }\n\n \n\n";
|