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.esm.js
CHANGED
|
@@ -11850,7 +11850,7 @@ var useScrollInToView = function (_a) {
|
|
|
11850
11850
|
return { isMobile: isMobile, targetFilterBarRef: targetFilterBarRef };
|
|
11851
11851
|
};
|
|
11852
11852
|
|
|
11853
|
-
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";
|
|
11853
|
+
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";
|
|
11854
11854
|
styleInject(css_248z$7);
|
|
11855
11855
|
|
|
11856
11856
|
var SelectButton = function (_a) {
|
|
@@ -11858,8 +11858,8 @@ var SelectButton = function (_a) {
|
|
|
11858
11858
|
return (React__default__default.createElement("button", { className: "will-filter-bar-select-button", onClick: onClick },
|
|
11859
11859
|
React__default__default.createElement("span", { className: "select-button-wrapper" },
|
|
11860
11860
|
React__default__default.createElement("div", null,
|
|
11861
|
-
React__default__default.createElement("
|
|
11862
|
-
React__default__default.createElement("
|
|
11861
|
+
React__default__default.createElement("p", { className: "select-button-label" }, label),
|
|
11862
|
+
React__default__default.createElement("p", { className: "select-button-description ".concat(active ? 'active' : ''), dangerouslySetInnerHTML: { __html: description } })))));
|
|
11863
11863
|
};
|
|
11864
11864
|
|
|
11865
11865
|
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";
|