From 864c1161e8b7d5fe8577b9697648ded081ffdd90 Mon Sep 17 00:00:00 2001 From: CianciarusoCataldo Date: Fri, 19 Jul 2024 05:09:06 +0200 Subject: [PATCH] atoms redesigned --- src/components/atoms/Button/index.ts | 12 ++- src/components/atoms/Button/styles.css | 26 ++---- src/components/atoms/CheckBox/index.ts | 4 +- src/components/atoms/CheckBox/styles.css | 7 +- src/components/atoms/CodeBox/index.ts | 1 - src/components/atoms/CodeBox/styles.css | 3 + src/components/atoms/Counter/index.ts | 8 +- src/components/atoms/Counter/styles.css | 7 +- src/components/atoms/Divider/index.ts | 8 +- src/components/atoms/Divider/styles.css | 1 + src/components/atoms/EmbeddedVideo/index.ts | 1 - src/components/atoms/EmbeddedVideo/styles.css | 3 +- src/components/atoms/IconButton/index.ts | 4 +- src/components/atoms/IconButton/styles.css | 1 + src/components/atoms/Input/index.ts | 9 +- src/components/atoms/Input/styles.css | 7 +- src/components/atoms/Label/index.ts | 8 +- src/components/atoms/Label/styles.css | 1 + src/components/atoms/Link/index.ts | 7 +- src/components/atoms/Link/styles.css | 7 +- src/components/atoms/RadioButton/index.ts | 6 +- src/components/atoms/RadioButton/styles.css | 8 +- src/components/atoms/Rater/index.ts | 10 +-- src/components/atoms/Rater/styles.css | 5 ++ src/components/atoms/Selector/index.ts | 6 ++ src/components/atoms/Selector/styles.css | 6 +- src/components/atoms/Slider/index.ts | 24 +++-- src/components/atoms/Slider/styles.css | 43 ++++----- src/components/atoms/Spinner/icons.tsx | 20 +---- src/components/atoms/Spinner/index.ts | 5 ++ src/components/atoms/Spinner/styles.css | 13 +-- src/components/atoms/Toggle/icons.tsx | 1 - src/components/atoms/Toggle/index.ts | 16 ++-- src/components/atoms/Toggle/styles.css | 6 ++ .../molecules/Carousel/component.tsx | 6 +- src/components/molecules/Carousel/styles.css | 3 +- .../molecules/Dropdown/component.tsx | 56 ++++-------- src/components/molecules/Dropdown/styles.css | 88 ++++--------------- .../ExpandableContainer/component.tsx | 2 +- .../molecules/ExpandableContainer/styles.css | 8 +- .../organisms/Calendar/component.tsx | 2 +- .../organisms/Drawer/close-button.css | 34 +++---- src/components/organisms/Drawer/component.tsx | 7 +- src/components/organisms/Drawer/index.ts | 2 +- src/components/organisms/Drawer/styles.css | 11 ++- src/icons/generic.tsx | 23 +++-- src/tools/styles/core/behavior.css | 2 +- src/tools/styles/core/global-styles.css | 14 ++- .../styles/themes/base/atoms/behavior.css | 4 + .../styles/themes/base/molecules/behavior.css | 2 +- .../styles/themes/full/atoms/behavior.css | 6 +- .../styles/themes/full/atoms/on-hover.css | 61 +++++++------ .../styles/themes/full/molecules/on-hover.css | 8 +- src/tools/utils/constants.ts | 1 - src/tools/utils/index.tsx | 13 ++- src/types/global/global.ts | 20 +++-- test-app/src/app.tsx | 2 +- test-app/src/pages/molecules/index.tsx | 4 +- tests/test-suites/molecules/Dropdown.tsx | 4 +- 59 files changed, 336 insertions(+), 341 deletions(-) diff --git a/src/components/atoms/Button/index.ts b/src/components/atoms/Button/index.ts index 1c213a86..a791f09d 100755 --- a/src/components/atoms/Button/index.ts +++ b/src/components/atoms/Button/index.ts @@ -57,7 +57,17 @@ const Button: ButtonComponent = ({ opAct: true, }, cssBg: ["c-btn-bg"], - scl: "wfit;act", + styles: { + ...(sProps.hover && { + "--mbx-btn-bg-h": "var(--mbx-c-btn-bg-h)", + "--mbx-btn-txt-h": "var(--mbx-c-btn-txt-h)", + ...(sProps.animated && { + "--mbx-btn-scale": "scaleX(1.15) scaleY(1.1)", + transitionDuration: "0.1s", + transitionProperty: "transform", + }), + }), + }, Component: children, commonProps: { ...sProps, diff --git a/src/components/atoms/Button/styles.css b/src/components/atoms/Button/styles.css index 0d4e3dc7..5634b948 100644 --- a/src/components/atoms/Button/styles.css +++ b/src/components/atoms/Button/styles.css @@ -1,27 +1,17 @@ [data-mbx-id="btn"] { + width: fit-content; + align-items: center; + text-align: center; border: 0; - background: var(--mbx-c-btn-bg); - color: var(--mbx-c-btn-txt); font-weight: 800; padding: 0.5rem 1rem; border-radius: 0.25rem; display: inline-flex; font-size: 0.875rem; line-height: 1.25rem; -} - -[data-mbx-id="btn"][data-mbx-atts*="anm"] { - transition-duration: 0.1s; - transition-property: transform; -} - -[data-mbx-id*="button"][data-mbx-atts*="dsb"] { - cursor: unset; -} - -@media (hover) { - [data-mbx-id="btn"][data-mbx-atts*="hv;anm"]:hover { - position: relative; - transform: scaleX(1.15) scaleY(1.1); - } + --mbx-btn-scale: none; + --mbx-btn-bg: var(--mbx-c-btn-bg); + --mbx-btn-txt: var(--mbx-c-btn-txt); + background: var(--mbx-btn-bg); + color: var(--mbx-btn-txt); } diff --git a/src/components/atoms/CheckBox/index.ts b/src/components/atoms/CheckBox/index.ts index c1c32bc4..7991e50c 100644 --- a/src/components/atoms/CheckBox/index.ts +++ b/src/components/atoms/CheckBox/index.ts @@ -57,8 +57,10 @@ const Checkbox: CheckBoxComponent = ({ features: { opHov: true, }, - scl: "flxc;act", cssBg: ["c-chk-bg"], + styles: { + ...(sProps.hover && { "--mbx-chk-bg-h": "var(--mbx-c-chk-bg-h)" }), + }, props: (actualValue, setValue) => { const callback = () => { onChange(!actualValue); diff --git a/src/components/atoms/CheckBox/styles.css b/src/components/atoms/CheckBox/styles.css index a161f276..50e3a329 100644 --- a/src/components/atoms/CheckBox/styles.css +++ b/src/components/atoms/CheckBox/styles.css @@ -1,6 +1,11 @@ [data-mbx-id="check"] { height: 30px; width: 30px; - background: var(--mbx-c-chk-bg); padding: 0.2rem; + align-items: center; + text-align: center; + display: flex; + flex-direction: column; + --mbx-chk-bg: var(--mbx-c-chk-bg); + background: var(--mbx-chk-bg); } diff --git a/src/components/atoms/CodeBox/index.ts b/src/components/atoms/CodeBox/index.ts index 7d8b455d..bc2ce1cc 100644 --- a/src/components/atoms/CodeBox/index.ts +++ b/src/components/atoms/CodeBox/index.ts @@ -47,7 +47,6 @@ const CodeBox: CodeBoxComponent = (props) => buildMbxStandard(props, (sProps) => ({ name: "code", commonProps: sProps, - scl: "flxc;ovhid", cssBg: ["c-cdb-bg"], Component: component({ ...props, diff --git a/src/components/atoms/CodeBox/styles.css b/src/components/atoms/CodeBox/styles.css index eb9e2065..0053c42d 100644 --- a/src/components/atoms/CodeBox/styles.css +++ b/src/components/atoms/CodeBox/styles.css @@ -3,6 +3,9 @@ justify-content: center; background: var(--mbx-c-cdb-bg); color: var(--mbx-c-cdb-txt); + display: flex; + flex-direction: column; + overflow: hidden; } [data-mbx-id="code"] > [data-mbx-id="icb"] { diff --git a/src/components/atoms/Counter/index.ts b/src/components/atoms/Counter/index.ts index 29263030..8fc1bd13 100644 --- a/src/components/atoms/Counter/index.ts +++ b/src/components/atoms/Counter/index.ts @@ -57,10 +57,16 @@ const Counter: CounterComponent = ({ buildMbxReactive(commonProps, (sProps) => ({ wrapper: "input", name: "count", - scl: "bdtran", features: { opHov: true, }, + styles: { + ...(sProps.hover && + !readOnly && { + "--mbx-cnt-bg-h": "var(--mbx-c-cnt-bg-h)", + "--mbx-cnt-txt-h": "var(--mbx-c-cnt-txt-h)", + }), + }, cssBg: ["c-cnt-bg"], inputValue, defaultValue: 0, diff --git a/src/components/atoms/Counter/styles.css b/src/components/atoms/Counter/styles.css index c40d95d2..1b21b945 100644 --- a/src/components/atoms/Counter/styles.css +++ b/src/components/atoms/Counter/styles.css @@ -1,4 +1,7 @@ [data-mbx-id="count"] { - background-color: var(--mbx-c-cnt-bg); - color: var(--mbx-c-cnt-txt); + --mbx-cnt-bg: var(--mbx-c-cnt-bg); + --mbx-cnt-txt: var(--mbx-c-cnt-txt); + background-color: var(--mbx-cnt-bg); + color: var(--mbx-cnt-txt); + border-color: transparent; } diff --git a/src/components/atoms/Divider/index.ts b/src/components/atoms/Divider/index.ts index 972e6bea..43e23163 100755 --- a/src/components/atoms/Divider/index.ts +++ b/src/components/atoms/Divider/index.ts @@ -42,15 +42,13 @@ import { buildMbxStandard } from "../../../tools"; const Divider: DividerComponent = ({ size = "2px", ...props }) => buildMbxStandard(props, (sProps) => ({ name: "dvd", + styles: { + height: size, + }, commonProps: { ...sProps, a11y: false, - style: { - ...sProps.style, - height: size, - }, }, - scl: "wfu", })); export default Divider; diff --git a/src/components/atoms/Divider/styles.css b/src/components/atoms/Divider/styles.css index 84d6dbdd..a404fc34 100644 --- a/src/components/atoms/Divider/styles.css +++ b/src/components/atoms/Divider/styles.css @@ -1,3 +1,4 @@ [data-mbx-id="dvd"] { background-color: var(--mbx-c-dv-bgc); + width: 100%; } diff --git a/src/components/atoms/EmbeddedVideo/index.ts b/src/components/atoms/EmbeddedVideo/index.ts index 41f95143..48759e53 100644 --- a/src/components/atoms/EmbeddedVideo/index.ts +++ b/src/components/atoms/EmbeddedVideo/index.ts @@ -48,7 +48,6 @@ const EmbeddedVideo: EmbeddedVideoComponent = ({ url, ...shared }) => features: { opHov: true, }, - scl: !sProps.className && "wfit", Component: component({ url, ...sProps, diff --git a/src/components/atoms/EmbeddedVideo/styles.css b/src/components/atoms/EmbeddedVideo/styles.css index 1d45374b..8d20b532 100644 --- a/src/components/atoms/EmbeddedVideo/styles.css +++ b/src/components/atoms/EmbeddedVideo/styles.css @@ -1,5 +1,6 @@ -[data-mbx-id="em-vd"]:not([class]) { +[data-mbx-id="em-vd"] { height: fit-content; + width: fit-content; } [data-mbx-id="em-vd"] iframe { diff --git a/src/components/atoms/IconButton/index.ts b/src/components/atoms/IconButton/index.ts index c4972943..d85e7e3f 100755 --- a/src/components/atoms/IconButton/index.ts +++ b/src/components/atoms/IconButton/index.ts @@ -54,12 +54,12 @@ const IconButton: IconButtonComponent = ({ wrapper: "button", ...(!sharedProps.unstyled && { features: { - opHov: true, + opHov: hover, opAct: onClick !== undefined, + noShFc: true, }, }), Component: children, - scl: "wfit;nout", commonProps: { ...sharedProps, props: { diff --git a/src/components/atoms/IconButton/styles.css b/src/components/atoms/IconButton/styles.css index 536b2476..78b96c52 100644 --- a/src/components/atoms/IconButton/styles.css +++ b/src/components/atoms/IconButton/styles.css @@ -3,4 +3,5 @@ border: 0; background: transparent; -webkit-tap-highlight-color: transparent; + width: fit-content; } diff --git a/src/components/atoms/Input/index.ts b/src/components/atoms/Input/index.ts index 38f2f26d..71ba3c3c 100644 --- a/src/components/atoms/Input/index.ts +++ b/src/components/atoms/Input/index.ts @@ -58,7 +58,14 @@ const Input: InputComponent = ({ opHov: true, }, cssBg: ["c-in-bgc"], - scl: `bdtran;${autoresizable && "wfit"}`, + styles: { + ...(autoresizable && { width: "fit-content" }), + ...(sharedProps.hover && + !readOnly && { + "--mbx-inp-bg-h": "var(--mbx-c-in-bg-h)", + "--mbx-inp-txt-h": "var(--mbx-c-in-txt-h)", + }), + }, props: (value, setValue) => ({ commonProps: { ...sharedProps, diff --git a/src/components/atoms/Input/styles.css b/src/components/atoms/Input/styles.css index b0443304..721643ff 100644 --- a/src/components/atoms/Input/styles.css +++ b/src/components/atoms/Input/styles.css @@ -1,4 +1,7 @@ [data-mbx-id="inp"] { - background-color: var(--mbx-c-in-bgc); - color: var(--mbx-c-in-txt); + --mbx-inp-bg: var(--mbx-c-in-bgc); + --mbx-inp-txt: var(--mbx-c-in-txt); + background-color: var(--mbx-inp-bg); + color: var(--mbx-inp-txt); + border-color: transparent; } diff --git a/src/components/atoms/Label/index.ts b/src/components/atoms/Label/index.ts index 5af86cb4..31744dc0 100644 --- a/src/components/atoms/Label/index.ts +++ b/src/components/atoms/Label/index.ts @@ -40,7 +40,7 @@ import { buildMbxStandard } from "../../../tools"; * @copyright 2024 Cataldo Cianciaruso */ const Label: LabelComponent = ({ children, shadow = false, ...commonProps }) => - buildMbxStandard(commonProps, (sharedProps) => ({ + buildMbxStandard({ shadow, ...commonProps }, (sharedProps) => ({ name: "label", Component: children, wrapper: "p", @@ -48,11 +48,7 @@ const Label: LabelComponent = ({ children, shadow = false, ...commonProps }) => colFc: true, noShFc: true, }, - scl: "wfit", - commonProps: { - ...sharedProps, - shadow, - }, + commonProps: sharedProps, })); export default Label; diff --git a/src/components/atoms/Label/styles.css b/src/components/atoms/Label/styles.css index 63d97f47..c85f808c 100644 --- a/src/components/atoms/Label/styles.css +++ b/src/components/atoms/Label/styles.css @@ -1,4 +1,5 @@ [data-mbx-id*="label"] { color: var(--mbx-c-lab-txt); background: transparent; + width: fit-content; } diff --git a/src/components/atoms/Link/index.ts b/src/components/atoms/Link/index.ts index 0f85ef0b..83efe4ba 100755 --- a/src/components/atoms/Link/index.ts +++ b/src/components/atoms/Link/index.ts @@ -57,9 +57,14 @@ const Link: LinkComponent = ({ noShFc: true, }, Component: children, + styles: { + ...(underline && { textDecoration: "underline" }), + ...(sharedProps.hover && { + "--mbx-lnk-txt-h": "var(--mbx-c-link-txt-h)", + }), + }, commonProps: { ...sharedProps, - style: { ...sharedProps.style, textDecoration: "underline" }, props: { ...sharedProps.props, ...(!sharedProps.disabled && { diff --git a/src/components/atoms/Link/styles.css b/src/components/atoms/Link/styles.css index 8fa5b041..21222efc 100644 --- a/src/components/atoms/Link/styles.css +++ b/src/components/atoms/Link/styles.css @@ -1,9 +1,6 @@ [data-mbx-id="link"] { font-size: 1rem; line-height: 1.5rem; - color: var(--mbx-c-link-txt); -} - -a[data-mbx-id="link"]:active { - font-weight: 700; + --mbx-lnk-txt: var(--mbx-c-link-txt); + color: var(--mbx-lnk-txt); } diff --git a/src/components/atoms/RadioButton/index.ts b/src/components/atoms/RadioButton/index.ts index ba97bc10..e9788c42 100644 --- a/src/components/atoms/RadioButton/index.ts +++ b/src/components/atoms/RadioButton/index.ts @@ -60,7 +60,11 @@ const RadioButton: RadioButtonComponent = ({ opAct: true, }, cssBg: ["c-rad-bg"], - scl: "flxc;act;bdtran", + styles: { + ...(sharedProps.hover && { + "--mbx-rd-bg-h": "var(--mbx-c-rad-bg-h)", + }), + }, props: (value, setValue) => { const callBack = () => { if (!value || deselectable) { diff --git a/src/components/atoms/RadioButton/styles.css b/src/components/atoms/RadioButton/styles.css index 2cdb8d5e..da9d09c2 100644 --- a/src/components/atoms/RadioButton/styles.css +++ b/src/components/atoms/RadioButton/styles.css @@ -1,4 +1,9 @@ [data-mbx-id="radio"] { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-color: transparent; width: 30px; height: 30px; min-width: 30px; @@ -8,7 +13,8 @@ border-radius: 50%; padding: 0.1rem; border-style: hidden; - background: var(--mbx-c-rad-bg); + --mbx-rd-bg: var(--mbx-c-rad-bg); + background: var(--mbx-rd-bg); } [data-mbx-id="radio"] > div { diff --git a/src/components/atoms/Rater/index.ts b/src/components/atoms/Rater/index.ts index 40c3e9ac..290a82ad 100644 --- a/src/components/atoms/Rater/index.ts +++ b/src/components/atoms/Rater/index.ts @@ -64,15 +64,11 @@ const Rater: RaterComponent = ({ ...props, ...sharedProps, }), - scl: `wfit;mxauto;act`, cssBg: ["c-rat-bg"], - commonProps: { - ...sharedProps, - style: { - ...sharedProps.style, - flexDirection: vertical ? "column" : "row", - }, + styles: { + flexDirection: vertical ? "column" : "row", }, + commonProps: sharedProps, })); export default Rater; diff --git a/src/components/atoms/Rater/styles.css b/src/components/atoms/Rater/styles.css index 6ab3bc5b..60ad7759 100644 --- a/src/components/atoms/Rater/styles.css +++ b/src/components/atoms/Rater/styles.css @@ -3,6 +3,11 @@ border-radius: 8px; padding: 0.4rem; display: flex; + margin-right: auto; + margin-left: auto; + width: fit-content; + align-items: center; + text-align: center; } [data-mbx-id="rat"] svg { diff --git a/src/components/atoms/Selector/index.ts b/src/components/atoms/Selector/index.ts index 5d25b667..62922d1a 100644 --- a/src/components/atoms/Selector/index.ts +++ b/src/components/atoms/Selector/index.ts @@ -71,6 +71,12 @@ const Selector: SelectorComponent = ({ }, }, }), + styles: { + ...(sharedProps.hover && { + "--mbx-sel-bg-h": "var(--mbx-c-sel-bg-h)", + "--mbx-sel-txt-h": "var(--mbx-c-sel-txt-h)", + }), + }, Component: ({ value, setValue }) => selectorComponent({ elements, value, setValue, optionClassName }), features: { diff --git a/src/components/atoms/Selector/styles.css b/src/components/atoms/Selector/styles.css index 5db6a200..d46f0a08 100644 --- a/src/components/atoms/Selector/styles.css +++ b/src/components/atoms/Selector/styles.css @@ -1,7 +1,9 @@ [data-mbx-id="selt"] { padding: 0.2rem; - background: var(--mbx-c-sel-bg); - color: var(--mbx-c-sel-txt); + --mbx-sel-bg: var(--mbx-c-sel-bg); + --mbx-sel-txt: var(--mbx-c-sel-txt); + background: var(--mbx-sel-bg); + color: var(--mbx-sel-txt); border: 0; border-radius: 6px; } diff --git a/src/components/atoms/Slider/index.ts b/src/components/atoms/Slider/index.ts index 5b64e803..dc265349 100644 --- a/src/components/atoms/Slider/index.ts +++ b/src/components/atoms/Slider/index.ts @@ -57,8 +57,18 @@ const Slider: SliderComponent = ({ inputValue, defaultValue: 0, wrapper: "input", - scl: "wfit", cssBg: ["c-sld-bg"], + styles: { + ...(sharedProps.hover && + !readOnly && { + "--mbx-sld-op-hov": "0.6", + "--mbx-sld-bg-h": "var(--mbx-c-sld-tb-h)", + }), + ...(!sharedProps.disabled && + !readOnly && { + "--mbx-sld-op-act": "0.4", + }), + }, props: (value, setValue) => { const callback = !sharedProps.disabled && !readOnly @@ -73,18 +83,6 @@ const Slider: SliderComponent = ({ return { commonProps: { ...sharedProps, - style: { - ...sharedProps.style, - ...(sharedProps.hover && - !readOnly && { - "--mbx-sld-op-hov": "0.6", - "--mbx-sld-bg-h": "var(--mbx-c-sld-tb-h)", - }), - ...(!sharedProps.disabled && - !readOnly && { - "--mbx-sld-op-act": "0.4", - }), - }, hover: sharedProps.hover && !readOnly, props: { ...sharedProps.props, diff --git a/src/components/atoms/Slider/styles.css b/src/components/atoms/Slider/styles.css index 1214c6d4..2d860d11 100644 --- a/src/components/atoms/Slider/styles.css +++ b/src/components/atoms/Slider/styles.css @@ -1,8 +1,11 @@ [data-mbx-id="sld"] { appearance: none; border-radius: 12px; - background: var(--mbx-c-sld-bg); -webkit-appearance: none; + width: fit-content; + --mbx-sld-tb: var(--mbx-c-sld-tb); + --mbx-sld-bg: var(--mbx-c-sld-bg); + background: var(--mbx-sld-bg); } [data-mbx-id="sld"]::-webkit-slider-thumb { @@ -10,26 +13,21 @@ appearance: none; width: 30px; height: 30px; - background: var(--mbx-c-sld-tb); + box-shadow: var(--mbx-sh); + background: var(--mbx-sld-tb); -webkit-appearance: none; opacity: var(--mbx-op); } -[data-mbx-id="sld"]::-ms-track { - width: 100%; - background: var(--mbx-c-sld-tb); - border-color: transparent; - color: transparent; -} - [data-mbx-id="sld"]::-moz-range-thumb { border-color: transparent; color: transparent; border-radius: 50%; + box-shadow: var(--mbx-sh); appearance: none; width: 30px; height: 30px; - background: var(--mbx-c-sld-tb); + background: var(--mbx-sld-tb); opacity: var(--mbx-op); } @@ -38,21 +36,12 @@ opacity: var(--mbx-op); } -@media (hover) { - [data-mbx-id="sld"]::-ms-track:hover { - background: var(--mbx-sld-bg-h, var(--mbx-c-sld-tb)); - opacity: var(--mbx-sld-op, var(--mbx-op)); - } - - [data-mbx-id="sld"]::-moz-range-thumb:hover { - opacity: var(--mbx-sld-op-hov, var(--mbx-op)); - background: var(--mbx-sld-bg-h, var(--mbx-c-sld-tb)); - } - - [data-mbx-id="sld"]::-webkit-slider-thumb:hover { - background: var(--mbx-sld-bg-h, var(--mbx-c-sld-tb)); - opacity: var(--mbx-sld-op-hov, var(--mbx-op)); - } +[data-mbx-id="sld"]::-ms-thumb { + border: none; + height: 30px; + width: 30px; + border-radius: 50%; + background: var(--mbx-sld-tb); } [data-mbx-id="sld"]::-moz-range-thumb:active { @@ -62,3 +51,7 @@ [data-mbx-id="sld"]::-webkit-slider-thumb:active { opacity: var(--mbx-sld-op-act, var(--mbx-op)); } + +[data-mbx-id="sld"]::-ms-thumb:active { + opacity: var(--mbx-sld-op-act, var(--mbx-op)); +} diff --git a/src/components/atoms/Spinner/icons.tsx b/src/components/atoms/Spinner/icons.tsx index 6f74e2dd..5b5896e2 100644 --- a/src/components/atoms/Spinner/icons.tsx +++ b/src/components/atoms/Spinner/icons.tsx @@ -3,8 +3,6 @@ import React from "react"; const DEFAULT_ICONS: Record = { loading: ( = { data-mbx-cls="rotating" fill="var(--mbx-c-spn-load)" > - + ), success: ( - + = { ), error: ( - + ({ name: "spn", commonProps: { ...sharedProps, shadow }, + styles: { + ...(sharedProps.animated && { + "--mbx-spn-rot": "rotating 2s linear infinite", + }), + }, Component: value && statuses[value] ? statuses[value] diff --git a/src/components/atoms/Spinner/styles.css b/src/components/atoms/Spinner/styles.css index c4bb7b83..6ac56c59 100644 --- a/src/components/atoms/Spinner/styles.css +++ b/src/components/atoms/Spinner/styles.css @@ -4,10 +4,11 @@ min-width: 4rem; } -[data-mbx-id="spn"]:not([data-mbx-atts*="dsb"]) [data-mbx-cls="rotating"] { - -webkit-animation: rotating 2s linear infinite; - -moz-animation: rotating 2s linear infinite; - -ms-animation: rotating 2s linear infinite; - -o-animation: rotating 2s linear infinite; - animation: rotating 2s linear infinite; +[data-mbx-id="spn"] > [data-mbx-cls="rotating"] { + --mbx-spn-an: var(--mbx-spn-rot, none); + -webkit-animation: var(--mbx-spn-an); + -moz-animation: var(--mbx-spn-an); + -ms-animation: var(--mbx-spn-an); + -o-animation: var(--mbx-spn-an); + animation: var(--mbx-spn-an); } diff --git a/src/components/atoms/Toggle/icons.tsx b/src/components/atoms/Toggle/icons.tsx index 23d6933c..bd1e5570 100644 --- a/src/components/atoms/Toggle/icons.tsx +++ b/src/components/atoms/Toggle/icons.tsx @@ -10,7 +10,6 @@ export const defaultIcon = ( xmlSpace="preserve" width="30px" height="30px" - data-mbx-scl="nosel" > diff --git a/src/components/atoms/Toggle/index.ts b/src/components/atoms/Toggle/index.ts index a83ae794..b0d80cab 100644 --- a/src/components/atoms/Toggle/index.ts +++ b/src/components/atoms/Toggle/index.ts @@ -57,17 +57,15 @@ const Toggle: ToggleComponent = ({ name: "tgl", cssBg: ["c-tog-bg"], props: (status, setStatus) => ({ + styles: { + ...(status && { + "--svginternalcolor": "var(--mbx-c-tog-ic-on-int)", + "--svgexternalcolor": "var(--mbx-c-tog-ic-on-ext)", + "--mbx-tgl-tr": " 0%", + }), + }, commonProps: { ...sProps, - style: { - ...sProps.style, - ...(status && - ({ - "--svginternalcolor": "var(--mbx-c-tog-ic-on-int)", - "--svgexternalcolor": "var(--mbx-c-tog-ic-on-ext)", - "--mbx-tgl-tr": " 0%", - } as React.CSSProperties)), - }, props: { ...sProps.props, ...(!sProps.disabled && { diff --git a/src/components/atoms/Toggle/styles.css b/src/components/atoms/Toggle/styles.css index 33cb1bd1..e8954b38 100644 --- a/src/components/atoms/Toggle/styles.css +++ b/src/components/atoms/Toggle/styles.css @@ -16,4 +16,10 @@ -o-transition: all 0.2s; -ms-transition: all 0.2s; transform: translate(var(--mbx-tgl-tr)); + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } diff --git a/src/components/molecules/Carousel/component.tsx b/src/components/molecules/Carousel/component.tsx index a428c21a..81860c92 100644 --- a/src/components/molecules/Carousel/component.tsx +++ b/src/components/molecules/Carousel/component.tsx @@ -98,8 +98,9 @@ const CarouselComponent: MbxUiReactiveComponent = ({ {...arrowProps} > {elementsArray} @@ -115,8 +116,9 @@ const CarouselComponent: MbxUiReactiveComponent = ({ {...arrowProps} > , diff --git a/src/components/molecules/Carousel/styles.css b/src/components/molecules/Carousel/styles.css index f5f6bf65..19217fc3 100644 --- a/src/components/molecules/Carousel/styles.css +++ b/src/components/molecules/Carousel/styles.css @@ -1,7 +1,8 @@ [data-mbx-id="crsel"] { background: var(--mbx-c-car-bg); padding: 0.4rem; - --mbx-arr: var(--mbx-c-car-arr); + --mbx-ic-arr: var(--mbx-c-car-arr); + --mbx-ic-arr-h: var(--mbx-c-car-arr-h); } [data-mbx-id="crsel"] [data-mbx-cls="el"] { diff --git a/src/components/molecules/Dropdown/component.tsx b/src/components/molecules/Dropdown/component.tsx index d585e070..c77b4be3 100644 --- a/src/components/molecules/Dropdown/component.tsx +++ b/src/components/molecules/Dropdown/component.tsx @@ -2,9 +2,10 @@ import React from "react"; import { DropdownProps, MbxUiReactiveComponentBuilder } from "../../../types"; -import { Button } from "../../atoms"; +import { Button, IconButton } from "../../atoms"; import Popup from "../Popup"; import Container from "../Container"; +import { ArrowIcon } from "../../../icons"; const DropdownInternalComponent: MbxUiReactiveComponentBuilder< number, @@ -18,6 +19,8 @@ const DropdownInternalComponent: MbxUiReactiveComponentBuilder< disabled, setValue, shadow, + hover, + background, /* istanbul ignore next */ onFocusLost = () => {}, ...commonProps @@ -103,7 +106,8 @@ const DropdownInternalComponent: MbxUiReactiveComponentBuilder<
{selectedItem}
- -

- -

- + , { selectItem(index); @@ -171,24 +155,14 @@ const DropdownInternalComponent: MbxUiReactiveComponentBuilder< setValue(index); keyDown(false); }} + dark={dark} features={{ noShFc: true, colFc: true }} key={`item_${index}`} scl="flxc;wfu" data-mbx-cls="reg" data-mbx-dpos={`${index === 0}-${index === elements.length - 1}`} > - - {item} - + {item} ))} , diff --git a/src/components/molecules/Dropdown/styles.css b/src/components/molecules/Dropdown/styles.css index f667a458..b5647ac5 100644 --- a/src/components/molecules/Dropdown/styles.css +++ b/src/components/molecules/Dropdown/styles.css @@ -5,7 +5,7 @@ background-image: var(--mbx-c-drop-bg); } -[data-mbx-id="dd"] [data-mbx-id="popup"] { +[data-mbx-id="dd"] > [data-mbx-id="popup"] { font-size: 1rem; line-height: 1.5rem; max-height: 12rem; @@ -15,21 +15,21 @@ --mbx-popup-background: var(--mbx-c-drop-bg); } -[data-mbx-id="dd"] [data-mbx-id="popup"]::-webkit-scrollbar { +[data-mbx-id="dd"] > [data-mbx-id="popup"]::-webkit-scrollbar { width: 12px; } -[data-mbx-id="dd"] [data-mbx-id="popup"]::-webkit-scrollbar-track { +[data-mbx-id="dd"] > [data-mbx-id="popup"]::-webkit-scrollbar-track { background: var(--mbx-c-drop-bg); } -[data-mbx-id="dd"] [data-mbx-id="popup"]::-webkit-scrollbar-thumb { +[data-mbx-id="dd"] > [data-mbx-id="popup"]::-webkit-scrollbar-thumb { background-color: var(--mbx-c-drop-txt); border-radius: 20px; border: 3px solid transparent; } -[data-mbx-id="dd"] [data-mbx-cls="drop-bt"] { +[data-mbx-id="dd"] > [data-mbx-id="btn"] { font-size: 1.125rem; line-height: 1.75rem; display: inline-flex; @@ -39,88 +39,32 @@ font-weight: 500; border-radius: 0.375rem; padding: 0 0.4rem; + --mbx-button-background-hover: var(--mbx-c-drop-bg-h); + --mbx-button-text-color-hover: var(--mbx-c-drop-txt-h); + --mbx-ic-arr: var(--mbx-c-drop-arr); + --mbx-ic-arr-h: var(--mbx-c-drop-arr-h); } -[data-mbx-id="dd"] [data-mbx-cls="opts"] [data-mbx-id="btn"] { - --mbx-button-text-color: var(--mbx-c-drop-txt); -} - -[data-mbx-id="dd"] [data-mbx-cls="drop-sel-el"] { +[data-mbx-id="dd"] > [data-mbx-id="btn"] > div { padding-right: 0.25rem; color: var(--mbx-c-drop-txt); } -[data-mbx-id="dd"] [data-mbx-cls="ic"] { - margin: auto 0.25rem; -} - -[data-mbx-id="dd"] [data-mbx-cls="ic"] i { - border: solid; - border-width: 0 3px 3px 0; - display: block; - padding: 3px; - transition-duration: 0.2s; - transition-property: transform; - border-color: var(--mbx-c-drop-arr); +[data-mbx-id="dd"] > [data-mbx-id="btn"] > [data-mbx-img="arr"] { + margin: auto 0.15rem; transition: transform 0.3s ease-in-out; -webkit-transition: -webkit-transform 0.3s ease-in-out; -ms-transition: -ms-transform 0.3s ease-in-out; - --mbx-dd-rot: 45deg; -webkit-transform: rotate(var(--mbx-dd-rot)); transform: rotate(var(--mbx-dd-rot)); -ms-transform: rotate(var(--mbx-dd-rot)); } -[data-mbx-id="dd"] [data-mbx-cls="reg"] { +[data-mbx-id="dd"] > [data-mbx-id="popup"] > [data-mbx-id="btn"] { padding: 0.25rem; background-color: transparent; --mbx-button-text-color: var(--mbx-c-drop-txt); -} - -[data-mbx-id="dd"] [data-mbx-cls="reg"] [data-mbx-cls="drop-el"] { - color: var(--mbx-c-drop-txt); -} - -[data-mbx-id="dd"] [data-mbx-dpos="false-true"] { - border-bottom-right-radius: 0.375rem; - border-bottom-left-radius: 0.375rem; -} - -[data-mbx-id="dd"] [data-mbx-dpos="true-false"] { - border-top-right-radius: 0.375rem; - border-top-left-radius: 0.375rem; -} - -@media (hover) { - [data-mbx-id="dd"]:not([data-mbx-atts*="dsb"])[data-mbx-atts*="hv"] - [data-mbx-cls="drop-bt"]:not([data-mbx-atts*="dsb"]):hover, - [data-mbx-id="dd"][data-mbx-atts*="hv"]:not([data-mbx-atts*="dsb"]) - [data-mbx-cls="reg"]:hover - [data-mbx-cls="drop-el"] { - color: var(--mbx-c-drop-txt-h); - } - - [data-mbx-id="dd"]:not( - [data-mbx-atts*="dsb"] - )[data-mbx-atts*="bg"][data-mbx-atts*="hv"] - [data-mbx-cls="drop-bt"]:not([data-mbx-atts*="dsb"]):hover, - [data-mbx-id="dd"][data-mbx-atts*="hv"]:not( - [data-mbx-atts*="dsb"] - )[data-mbx-atts*="bg"] - [data-mbx-cls="reg"]:hover { - background: var(--mbx-c-drop-bg-h); - } - - [data-mbx-id="dd"]:not([data-mbx-atts*="dsb"])[data-mbx-atts*="hv"] - [data-mbx-cls="arr-ic"]:not([data-mbx-atts*="dsb"]):hover { - border-color: var(--mbx-c-drop-arr-h); - opacity: 0.5; - } -} - -[data-mbx-id="dd"][data-mbx-atts*="hv"]:not( - [data-mbx-atts*="dsb"] - )[data-mbx-atts*="bg"] - [data-mbx-cls="reg"]:focus-visible { - background: var(--mbx-c-drop-bg-h); + --mbx-button-background-hover: var(--mbx-c-drop-bg-h); + --mbx-button-text-color-hover: var(--mbx-c-drop-txt-h); + --mbx-button-background: transparent; } diff --git a/src/components/molecules/ExpandableContainer/component.tsx b/src/components/molecules/ExpandableContainer/component.tsx index a3663349..57a91271 100644 --- a/src/components/molecules/ExpandableContainer/component.tsx +++ b/src/components/molecules/ExpandableContainer/component.tsx @@ -51,8 +51,8 @@ const expandableContainerComponent: MbxUiReactiveComponent< > ); diff --git a/src/components/molecules/ExpandableContainer/styles.css b/src/components/molecules/ExpandableContainer/styles.css index 7ca5095c..99d127f4 100644 --- a/src/components/molecules/ExpandableContainer/styles.css +++ b/src/components/molecules/ExpandableContainer/styles.css @@ -1,11 +1,15 @@ [data-mbx-id="econt"] { - --mbx-arr: var(--mbx-c-exp-arr, var(--mbx-c-con-txt)); background: var(--mbx-c-exp-bg, var(--mbx-c-con-bg)); color: var(--mbx-c-exp-txt, var(--mbx-c-con-txt)); } -[data-mbx-id="econt"] [data-mbx-img="arr"] { +[data-mbx-id="econt"] > [data-mbx-id="icb"] > [data-mbx-img="arr"] { margin-bottom: 0.3rem; padding-top: 0.2rem; transition: all 0.2s; + --mbx-ic-arr: var( + --mbx-c-exp-arr, + var(--mbx-c-exp-txt, var(--mbx-c-con-txt)) + ); + --mbx-ic-arr-h: var(--mbx-c-exp-arr-h, var(--mbx-ic-arr)); } diff --git a/src/components/organisms/Calendar/component.tsx b/src/components/organisms/Calendar/component.tsx index 5e0e9729..d0dd62d6 100644 --- a/src/components/organisms/Calendar/component.tsx +++ b/src/components/organisms/Calendar/component.tsx @@ -103,7 +103,7 @@ const CalendarComponent: MbxUiReactiveComponent< features={{ fillFc: true, noShFc: true }} {...customProps} > - + ); diff --git a/src/components/organisms/Drawer/close-button.css b/src/components/organisms/Drawer/close-button.css index d7514946..b29d1640 100644 --- a/src/components/organisms/Drawer/close-button.css +++ b/src/components/organisms/Drawer/close-button.css @@ -1,62 +1,52 @@ -[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-cls="drw-close"], -[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-id="icb"], +[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] > [data-mbx-id="icb"] { padding-right: 0.5rem; padding-left: 0.5rem; } -[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] > [data-mbx-id="icb"] { border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; padding-top: 0.1rem; } -[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-id="icb"] { border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; padding-bottom: 0.1rem; } -[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-cls="drw-close"], -[data-mbx-id="drw"][data-mbx-drw-lc="left"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-id="icb"], +[data-mbx-id="drw"][data-mbx-drw-lc="left"] > [data-mbx-id="icb"] { padding-top: 0.5rem; padding-bottom: 0.5rem; height: fit-content; } -[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-id="icb"] { border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem; padding-left: 0.1rem; } -[data-mbx-id="drw"][data-mbx-drw-lc="left"] > [data-mbx-cls="drw-close"] { +[data-mbx-id="drw"][data-mbx-drw-lc="left"] > [data-mbx-id="icb"] { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; padding-right: 0.1rem; } -[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-cls="drw-close"] svg { +[data-mbx-id="drw"][data-mbx-drw-lc^="top"] > [data-mbx-id="icb"] svg { transform: rotate(90deg); } -[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] - > [data-mbx-cls="drw-close"] - svg { +[data-mbx-id="drw"][data-mbx-drw-lc^="bottom"] > [data-mbx-id="icb"] svg { transform: rotate(-90deg); } -[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-cls="drw-close"] svg { +[data-mbx-id="drw"][data-mbx-drw-lc="right"] > [data-mbx-id="icb"] svg { transform: rotate(180deg); } -[data-mbx-id="drw"] > [data-mbx-cls="drw-close"]:focus-visible svg { +[data-mbx-id="drw"] > [data-mbx-id="icb"]:focus-visible svg { fill: var(--mbx-c-draw-arr-h); } - -@media (hover) { - [data-mbx-id="drw"]:not([data-mbx-atts*="dsb"]) - [data-mbx-cls="drw-close"] - svg:hover { - fill: var(--mbx-c-draw-arr-h); - } -} diff --git a/src/components/organisms/Drawer/component.tsx b/src/components/organisms/Drawer/component.tsx index fb49cf5a..ecfdd722 100644 --- a/src/components/organisms/Drawer/component.tsx +++ b/src/components/organisms/Drawer/component.tsx @@ -32,16 +32,13 @@ const DrawerInternalComponent: MbxUiComponent< onClick={() => { onClose!(); }} - data-mbx-cls="drw-close" scl={locationCss[position].btn} features={{ noShFc: true }} a11yLabel="drawer-close-button" > - + , -
- {children} -
, +
{children}
, ]; }; diff --git a/src/components/organisms/Drawer/index.ts b/src/components/organisms/Drawer/index.ts index 23406b60..525cf54a 100755 --- a/src/components/organisms/Drawer/index.ts +++ b/src/components/organisms/Drawer/index.ts @@ -104,7 +104,7 @@ const Drawer: DrawerComponent = ({ props: { ...commonProps.props, "data-mbx-drw-lc": location, - "data-mbx-drw-an": customProps.animation, + "data-mbx-drw-an": sharedProps.animated && customProps.animation, }, hide: value.length === 0 && hide, onFocusLost: customProps.onFocusLost, diff --git a/src/components/organisms/Drawer/styles.css b/src/components/organisms/Drawer/styles.css index 4168cd08..9e038f65 100644 --- a/src/components/organisms/Drawer/styles.css +++ b/src/components/organisms/Drawer/styles.css @@ -9,18 +9,18 @@ color: var(--mbx-c-draw-txt); } -[data-mbx-id="drw"]:not([data-mbx-atts*="dsb"]) { +[data-mbx-id="drw"][data-mbx-drw-an] { animation: var(--mbx-drawer-animation); -moz-animation: var(--mbx-drawer-animation); -ms-animation: var(--mbx-drawer-animation); -o-animation: var(--mbx-drawer-animation); } -[data-mbx-id="drw"] > [data-mbx-cls="drw-cont"]::-webkit-scrollbar { +[data-mbx-id="drw"] > div::-webkit-scrollbar { display: none !important; } -[data-mbx-id="drw"] > [data-mbx-cls="drw-cont"] { +[data-mbx-id="drw"] > div { overflow-y: auto; -ms-overflow-style: none !important; scrollbar-width: none !important; @@ -33,3 +33,8 @@ [data-mbx-id="drw"][data-mbx-drw-an="ease-out"] { --mbx-drawer-animation: var(--mbx-drawer-animation-out); } + +[data-mbx-id="drw"] > [data-mbx-id="icb"] { + --mbx-ic-arr: var(--mbx-c-draw-arr); + --mbx-ic-arr-h: var(--mbx-c-draw-arr-h); +} diff --git a/src/icons/generic.tsx b/src/icons/generic.tsx index 5e6e8a91..fb6698c6 100644 --- a/src/icons/generic.tsx +++ b/src/icons/generic.tsx @@ -35,20 +35,33 @@ export const Xicon: MbxIcon = ({ fill, disabled }) => ( export const ArrowIcon: MbxIcon = ({ fill = "var(--mbx-arr)", - scl = "", disabled, + hide, transform, hover, + width = "30", + height = "37", + hoverVar = "--mbx-ic-arr", }) => ( diff --git a/src/tools/styles/core/behavior.css b/src/tools/styles/core/behavior.css index 59e40884..c6051256 100644 --- a/src/tools/styles/core/behavior.css +++ b/src/tools/styles/core/behavior.css @@ -38,7 +38,7 @@ --mbx-c-bg: var(--mbx-c-bg-d); --mbx-c-bg-h: var( --mbx-background-hover-dark, - var(--mbx-background-hover, linear-gradient(to right, #364257, #252d3b)) + var(--mbx-background-hover, linear-gradient(to right, #414f68, #313b4d)) ); --mbx-c-txt: var(--mbx-c-txt-d); --mbx-c-txt-h: var( diff --git a/src/tools/styles/core/global-styles.css b/src/tools/styles/core/global-styles.css index a63b4341..fb8ce6b0 100644 --- a/src/tools/styles/core/global-styles.css +++ b/src/tools/styles/core/global-styles.css @@ -10,6 +10,11 @@ -o-box-shadow: var(--mbx-sh); } +[data-mbx-img="arr"] { + --mbx-arr-c: var(--mbx-ic-arr, --mbx-c-txt); + fill: var(--mbx-arr-c); +} + [data-mbx-id], [data-mbx-id]:hover, [data-mbx-id]:active { @@ -18,12 +23,17 @@ -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; } - -[data-mbx-id]:focus { +[data-mbx-id], +[data-mbx-id]:focus, +[data-mbx-id]:focus-visible { outline: none; } @media (hover: hover) { + [data-mbx-img="arr"]:hover { + fill: var(--mbx-ic-arr-h, --mbx-arr-c); + } + [data-mbx-id]:hover { opacity: var(--mbx-op-hov, var(--mbx-op)); } diff --git a/src/tools/styles/themes/base/atoms/behavior.css b/src/tools/styles/themes/base/atoms/behavior.css index 72f348d5..748cd747 100644 --- a/src/tools/styles/themes/base/atoms/behavior.css +++ b/src/tools/styles/themes/base/atoms/behavior.css @@ -110,6 +110,10 @@ --mbx-slider-thumb-color-light, var(--mbx-slider-thumb-color, radial-gradient(#2d3748, #1d232e)) ); + --mbx-c-sld-bg-h: var( + --mbx-slider-background-hover-light, + var(--mbx-slider-background-hover, var(--mbx-c-sld-bg)) + ); --mbx-c-sld-tb-h: var( --mbx-slider-thumb-color-hover-light, var(--mbx-slider-thumb-color-hover, var(--mbx-c-sld-tb)) diff --git a/src/tools/styles/themes/base/molecules/behavior.css b/src/tools/styles/themes/base/molecules/behavior.css index 3633b671..8443cee0 100644 --- a/src/tools/styles/themes/base/molecules/behavior.css +++ b/src/tools/styles/themes/base/molecules/behavior.css @@ -324,7 +324,7 @@ ); --mbx-c-drop-txt-h: var( --mbx-dropdown-text-color-hover-dark, - var(--mbx-dropdown-text-color-hover, #252d3b) + var(--mbx-dropdown-text-color-hover, var(--mbx-c-bg-h)) ); --mbx-c-drop-arr: var( --mbx-dropdown-arrow-color-dark, diff --git a/src/tools/styles/themes/full/atoms/behavior.css b/src/tools/styles/themes/full/atoms/behavior.css index e30d9428..90a4e3d1 100644 --- a/src/tools/styles/themes/full/atoms/behavior.css +++ b/src/tools/styles/themes/full/atoms/behavior.css @@ -2,7 +2,7 @@ /** Button */ --mbx-c-btn-bg-h: var( --mbx-button-background-hover-light, - var(--mbx-checkbox-background-hover, var(--mbx-c-bg-h)) + var(--mbx-button-background-hover, var(--mbx-c-bg-h)) ); --mbx-c-btn-txt-h: var( --mbx-button-text-color-hover-light, @@ -38,7 +38,7 @@ /** Link */ --mbx-c-link-txt-h: var( --mbx-link-color-hover-light, - var(--mbx-link-color-hover, var(--mbx-c-link-txt-l)) + var(--mbx-link-color-hover, var(--mbx-c-link-txt)) ); /* Radio Button */ @@ -99,7 +99,7 @@ /** Link */ --mbx-c-link-txt-h: var( --mbx-link-color-hover-dark, - var(--mbx-link-color-hover, var(--mbx-c-link-txt-d)) + var(--mbx-link-color-hover, var(--mbx-c-link-txt)) ); /* Radio Button */ diff --git a/src/tools/styles/themes/full/atoms/on-hover.css b/src/tools/styles/themes/full/atoms/on-hover.css index 537a18ca..9b55e130 100644 --- a/src/tools/styles/themes/full/atoms/on-hover.css +++ b/src/tools/styles/themes/full/atoms/on-hover.css @@ -1,41 +1,50 @@ @media (hover) { - [data-mbx-id][data-mbx-atts*="hv"][data-mbx-atts*="bg"]:not( - [data-mbx-atts*="dsb"] - ):hover { - /** Button **/ - --mbx-c-btn-bg: var(--mbx-c-btn-bg-h); + [data-mbx-id="btn"]:hover { + --mbx-btn-bg: var(--mbx-btn-bg-h, var(--mbx-c-btn-bg)); + --mbx-btn-txt: var(--mbx-btn-txt-h, var(--mbx-c-btn-txt)); + transform: var(--mbx-btn-scale); + } + + [data-mbx-id="check"]:hover { + --mbx-chk-bg: var(--mbx-chk-bg-h, var(--mbx-c-chk-bg)); + } - /** Checkbox **/ - --mbx-c-chk-bg: var(--mbx-c-chk-bg-h); + [data-mbx-id="count"]:hover { + --mbx-cnt-bg: var(--mbx-cnt-bg-h, var(--mbx-c-cnt-bg)); + --mbx-cnt-txt: var(--mbx-cnt-txt-h, var(--mbx-c-cnt-txt)); } - [data-mbx-id][data-mbx-atts*="hv"]:not([data-mbx-atts*="dsb"]):hover { - /** Button **/ - --mbx-c-btn-txt: var(--mbx-c-btn-txt-h); + [data-mbx-id="link"]:hover { + --mbx-lnk-txt: var(--mbx-lnk-txt-h, var(--mbx-c-link-txt)); + } - /** Link **/ - --mbx-c-link-txt: var(--mbx-c-link-txt-h); + [data-mbx-id="inp"]:hover { + --mbx-inp-bg: var(--mbx-inp-bg-h, var(--mbx-c-in-bg)); + --mbx-inp-txt: var(--mbx-inp-txt-h, var(--mbx-c-in-txt)); } - [data-mbx-id][data-mbx-atts*="hv"][data-mbx-atts*="bg"]:not( - [data-mbx-atts*="dsb"] - ):hover:not(:focus-visible) { - /** Counter **/ - --mbx-c-cnt-bg: var(--mbx-c-cnt-bg-h); - --mbx-c-cnt-txt: var(--mbx-c-cnt-txt-h); + [data-mbx-id="radio"]:hover { + --mbx-rd-bg: var(--mbx-rd-bg-h, var(--mbx-c-rad-bg)); + } - /** Inputbox **/ - --mbx-c-in-bgc: var(--mbx-c-in-bgc-h); + [data-mbx-id="selt"]:hover, + [data-mbx-id="selt"] > option:hover { + --mbx-sel-bg: var(--mbx-sel-bg-h, var(--mbx-c-sel-bg)); + --mbx-sel-txt: var(--mbx-sel-txt-h, var(--mbx-c-sel-txt)); + } - --mbx-c-in-txt: var(--mbx-c-in-txt-h); + [data-mbx-id="sld"]::-moz-range-thumb:hover { + opacity: var(--mbx-sld-op-hov, var(--mbx-op)); + --mbx-sld-tb: var(--mbx-sld-tb-h, var(--mbx-c-sld-tb)); } - [data-mbx-id="selt"][data-mbx-atts*="hv"]:hover { - --mbx-selector-background: var(--mbx-c-sel-bg-h); - --mbx-selector-text-color: var(--mbx-c-sel-txt-h); + [data-mbx-id="sld"]::-webkit-slider-thumb:hover { + --mbx-sld-tb: var(--mbx-sld-bg-h, var(--mbx-c-sld-tb)); + opacity: var(--mbx-sld-op-hov, var(--mbx-op)); } - [data-mbx-id="radio"][data-mbx-atts*="hv"]:hover { - --mbx-radio-background: var(--mbx-c-rad-bg-h); + [data-mbx-id="sld"]::-ms-thumb:hover { + --mbx-sld-tb: var(--mbx-sld-bg-h, var(--mbx-c-sld-tb)); + opacity: var(--mbx-sld-op-hov, var(--mbx-op)); } } diff --git a/src/tools/styles/themes/full/molecules/on-hover.css b/src/tools/styles/themes/full/molecules/on-hover.css index eb15a3cf..503ad9f7 100644 --- a/src/tools/styles/themes/full/molecules/on-hover.css +++ b/src/tools/styles/themes/full/molecules/on-hover.css @@ -1,8 +1,4 @@ @media (hover) { - [data-mbx-id="crsel"] [data-mbx-img="arr"]:hover { - --mbx-arr: var(--mbx-c-car-arr-h); - } - [data-mbx-id="econt"] [data-mbx-id="icb"]:hover > [data-mbx-img="arr"] { --mbx-econt-arr: var( --mbx-c-exp-arr-h, @@ -14,4 +10,8 @@ > [data-mbx-id="cont"][data-mbx-cls="clk"]:hover { color: var(--mbx-c-lst-txt-h); } + + [data-mbx-id="list"][data-mbx-atts*="hv"]:not([data-mbx-atts*="dsb"]):hover { + --mbx-c-link-txt: var(--mbx-c-link-txt-h); + } } diff --git a/src/tools/utils/constants.ts b/src/tools/utils/constants.ts index 382deef2..103810c3 100644 --- a/src/tools/utils/constants.ts +++ b/src/tools/utils/constants.ts @@ -35,7 +35,6 @@ export const parseAtts: ( props: CommonProps ) => Partial> = (props) => ({ dark: props.dark && "dk", - background: props.background && "bg", disabled: props.disabled && "dsb", a11y: props.a11y && "a11y", hover: props.hover && !props.disabled && "hv", diff --git a/src/tools/utils/index.tsx b/src/tools/utils/index.tsx index 8db0bb1a..32a2591b 100644 --- a/src/tools/utils/index.tsx +++ b/src/tools/utils/index.tsx @@ -41,6 +41,7 @@ export const parseProps = (props: CommonProps): CommonProps => { ...(props.disabled && { animated: false, hover: false, + a11y: false, }), }; @@ -123,6 +124,7 @@ const getMbxUiStandard = ({ wrapper: Wrapper = "div", features = {}, cssBg = [], + styles = {}, }: BuilderProps) => { const parsedFts = getMbxFts(features, cprops); let mbxFts = `${parsedFts.fts}`; @@ -152,10 +154,10 @@ const getMbxUiStandard = ({ ...cprops.props, ...cprops["datas"], }; + let cstyles = styles; - let cstyles = cprops.style; - if (!cstyles) { - cstyles = {}; + if (cprops.style) { + cstyles = { ...cprops.style, ...cstyles }; } if (cprops.hide) { @@ -185,6 +187,7 @@ const getMbxUiStandard = ({ } else { cstyles["cursor"] = "unset"; cstyles["--mbx-op"] = 0.6; + cstyles["--mbx-op-hov"] = 0.6; } const wRef = useRef(null); @@ -234,7 +237,8 @@ const getMbxUiReactive = ({ Component, features, scl, - cssBg + cssBg, + styles }: BuilderProps< (props: { value: T; @@ -271,6 +275,7 @@ const getMbxUiReactive = ({ features, scl, cssBg, + styles, ...processed, }); }; diff --git a/src/types/global/global.ts b/src/types/global/global.ts index 37e2de36..6ab8a888 100644 --- a/src/types/global/global.ts +++ b/src/types/global/global.ts @@ -277,6 +277,8 @@ export type BuilderProps = { group?: "atom" | "molecule" | "organism"; cssBg?: string[]; + + styles?: Record; }; /** @@ -371,10 +373,14 @@ export type BuilderPropsReactive = ) => Omit; }; -export type MbxIcon = (props: { - scl?: string; - fill?: string; - disabled?: boolean; - transform?: string; - hover?: boolean; -}) => React.JSX.Element; +export type MbxIcon = ( + props: CommonProps & { + scl?: string; + fill?: string; + transform?: string; + width?: string; + height?: string; + colorVar?: string; + hoverVar?: string; + } +) => React.JSX.Element; diff --git a/test-app/src/app.tsx b/test-app/src/app.tsx index 19e9d1c6..79705ff4 100644 --- a/test-app/src/app.tsx +++ b/test-app/src/app.tsx @@ -15,7 +15,7 @@ const tabs = ( tabSelectedClassName="demo-tab-selected" tabUnselectedClassName="demo-tab-unselected" //dark - selected={0} + selected={2} tabs={[ { label: "Atoms", diff --git a/test-app/src/pages/molecules/index.tsx b/test-app/src/pages/molecules/index.tsx index 349694b7..7eeaa0c8 100644 --- a/test-app/src/pages/molecules/index.tsx +++ b/test-app/src/pages/molecules/index.tsx @@ -324,7 +324,7 @@ const MoleculesPage = () => { , ]} /> - +

No hover

{ , ]} /> - +

No Background

{ value={2} /> ); - wrapper.find('[data-mbx-cls="drop-bt"]').simulate("click"); + wrapper.find('[data-mbx-id="btn"]').simulate("click"); wrapper .find('[data-mbx-id="popup"] [data-mbx-id="btn"]') .at(1) @@ -34,7 +34,7 @@ const dropdownTest = () => { elements={["Dropdown element 1", "Dropdown element 2"]} /> ); - wrapper.find('[data-mbx-cls="drop-bt"]').simulate("click"); + wrapper.find('[data-mbx-id="btn"]').simulate("click"); wrapper .find('[data-mbx-id="popup"] [data-mbx-id="btn"]') .at(1)