triafly-ui-kit 1.0.7 → 1.0.9
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/dist/assets/Alert.css +1 -1
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Checkbox.css +1 -1
- package/dist/assets/DemoLogin2.css +1 -1
- package/dist/assets/Radio.css +1 -1
- package/dist/assets/Switch.css +1 -1
- package/dist/assets/fonts/FiraCode-Regular.ttf +0 -0
- package/dist/assets/fonts/Manrope-Bold.ttf +0 -0
- package/dist/assets/fonts/Manrope-Regular.ttf +0 -0
- package/dist/assets/fonts/Manrope-SemiBold.ttf +0 -0
- package/dist/assets/fonts/RobotoSlab-SemiBold.ttf +0 -0
- package/dist/components/Ui/CliTextareaInput/utils/hooks/useFixFormat/useFixFormat.js +17 -17
- package/dist/components/Ui/Icons/utils/CreateIcon.js +1 -6
- package/dist/main.d.ts +2 -2
- package/package.json +4 -3
package/dist/assets/Alert.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
:root{--3afly-fonts-body: "Manrope", sans-serif;--3afly-fonts-heading: "Roboto Slab", sans-serif;--light-brand-50: #c2d0ff;--dark-brand-50: #c2d0ff;--base-dark: #121212;--base-light: #ffffff;--dark-blue-20: #153398;--dark-blue-50: #0e2266;--dark-blue-100: #5076ff;--dark-blue-200: #7c98ff;--dark-blue-300: #a7bbff;--light-blue-20: #eef2ff;--light-blue-50: #c2d0ff;--light-blue-100: #2454ff;--light-blue-200: #1a3ab2;--light-blue-300: #0e2266;--dark-neutral-0: #121212;--dark-neutral-20: #292929;--dark-neutral-50: #333333;--dark-neutral-100: #4d4d4d;--dark-neutral-200: #6e6e6e;--dark-neutral-300: #ffffff;--light-neutral-0: #ffffff;--light-neutral-20: #f6f7f8;--light-neutral-50: #f1f2f4;--light-neutral-100: #d2d5da;--light-neutral-200: #a5a8ac;--light-neutral-300: #121212;--dark-green-50: #044329;--dark-green-100: #12a26c;--dark-green-200: #cef8e0;--dark-orange-50: #662500;--dark-orange-100: #e16d00;--dark-orange-200: #ffeccc;--dark-red-50: #7b0000;--dark-red-100: #f65843;--dark-red-200: #ffebe7;--light-green-50: #cef8e0;--light-green-100: #15a46e;--light-green-200: #06603b;--light-orange-50: #ffeccc;--light-orange-100: #e46f00;--light-orange-200: #9e3900;--light-red-50: #ffebe7;--light-red-100: #f75c46;--light-red-200: #9e0000;--color-fader: #12121220;--default-font-color: var(--base-dark);--color-bg-brand-default: var(--light-blue-100);--color-bg-brand-hover: var(--light-blue-200);--color-bg-brand-selected: var(--light-blue-300);--color-bg-brand-lightest-default: var(--light-blue-20);--color-bg-brand-light-default: var(--light-blue-50);--color-bg-error-default: var(--light-red-100);--color-bg-error-hover: var(--light-red-200);--color-bg-innerisland-default: var(--light-neutral-20);--color-bg-island-default: var(--base-light);--color-bg-island-disabled: var(--light-neutral-50);--color-bg-island-inversed: var(--base-dark);--color-bg-island-selected: var(--light-neutral-50);--color-bg-page-primary-default: var(--light-neutral-50);--color-bg-page-secondary-default: var(--light-neutral-0);--color-bg-neutral-basic-default: var(--light-neutral-0);--color-bg-neutral-basic-inversed: var(--light-neutral-300);--color-bg-neutral-lightest-default: var(--light-neutral-20);--color-bg-neutral-medium-default: var(--light-neutral-100);--color-border-brand-default: var(--light-blue-100);--color-border-error-default: var(--light-red-100);--color-border-primary-default: var(--light-neutral-100);--color-border-primary-hover: var(--base-dark);--color-border-secondary-default: var(--light-neutral-200);--color-border-secondary-hover: var(--base-dark);--color-border-success-default: var(--light-green-100);--color-chart-critical: var(--light-red-100);--color-chart-low: var(--light-green-100);--color-chart-medium: var(--light-orange-100);--effect-shadow-drop: #12121214;--effect-shadow-L: #12121208;--effect-shadow-XL: #12121215;--color-icon-brand-default: var(--light-blue-100);--color-icon-brand-hover: var(--light-blue-200);--color-icon-error-default: var(--light-red-100);--color-icon-error-hover: var(--light-red-200);--color-icon-primary-default: var(--base-dark);--color-icon-primary-inversed: var(--base-light);--color-icon-secondary-default: var(--light-neutral-200);--color-icon-secondary-hover: var(--base-dark);--color-icon-success-default: var(--light-green-100);--color-sidemenu-bg-default: var(--base-light);--color-sidemenu-bg-hover: var(--light-neutral-50);--color-sidemenu-bg-selected: var(--light-blue-100);--color-sidemenu-icon-default: var(--base-dark);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--light-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);--color-sidemenu-text-default: var(--base-dark);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--light-red-50);--color-status-error-foreground: var(--light-red-100);--color-status-success-background: var(--light-green-50);--color-status-success-foreground: var(--light-green-100);--color-status-warning-background: var(--light-orange-50);--color-status-warning-foreground: var(--light-orange-100);--color-text-brand-default: var(--light-blue-100);--color-text-brand-hover: var(--light-blue-200);--color-text-error-default: var(--light-red-100);--color-text-primary-default: var(--base-dark);--color-text-primary-inversed: var(--light-neutral-0);--color-text-secondary-default: var(--light-neutral-200);--color-text-success-default: var(--light-green-100);--color-text-tertiary-default: var(--light-neutral-100);--color-button-brandlight-filled-hover: var(--light-brand-50)}html[data-theme=dark]{--default-font-color: var(--base-light);--color-bg-brand-default: var(--dark-blue-100);--color-bg-brand-hover: var(--dark-blue-200);--color-bg-brand-selected: var(--dark-blue-300);--color-bg-brand-light-default: var(--dark-blue-50);--color-bg-error-default: var(--dark-red-100);--color-bg-error-hover: var(--dark-red-50);--color-bg-innerisland-default: var(--dark-neutral-20);--color-bg-island-default: var(--base-dark);--color-bg-island-disabled: var(--dark-neutral-50);--color-bg-island-inversed: var(--base-light);--color-bg-island-selected: var(--dark-neutral-50);--color-bg-page-default: var(--dark-neutral-50);--color-bg-page-secondary-default: var(--dark-neutral-0);--color-bg-neutral-basic-default: var(--dark-neutral-20);--color-bg-neutral-basic-inversed: var(--dark-neutral-300);--color-bg-neutral-lightest-default: var(--dark-neutral-20);--color-bg-neutral-medium-default: var(--dark-neutral-100);--color-border-brand-default: var(--dark-blue-100);--color-border-error-default: var(--dark-red-100);--color-border-primary-default: var(--dark-neutral-100);--color-border-primary-hover: var(--base-light);--color-border-secondary-default: var(--dark-neutral-200);--color-border-secondary-hover: var(--base-light);--color-border-success-default: var(--dark-green-100);--color-chart-critical: var(--dark-red-100);--color-chart-low: var(--dark-green-100);--color-chart-medium: var(--dark-orange-100);--effect-shadow-drop: #12121299;--color-icon-brand-default: var(--dark-blue-100);--color-icon-brand-hover: var(--dark-blue-200);--color-icon-error-default: var(--dark-red-100);--color-icon-error-hover: var(--dark-red-200);--color-icon-primary-default: var(--base-light);--color-icon-primary-inversed: var(--base-dark);--color-icon-secondary-default: var(--dark-neutral-200);--color-icon-secondary-hover: var(--base-light);--color-icon-success-default: var(--dark-green-100);--color-sidemenu-bg-default: var(--base-dark);--color-sidemenu-bg-hover: var(--dark-neutral-50);--color-sidemenu-bg-selected: var(--dark-blue-100);--color-sidemenu-icon-default: var(--base-light);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--dark-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-light);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);--color-sidemenu-text-default: var(--base-light);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--dark-red-50);--color-status-error-foreground: var(--dark-red-100);--color-status-success-background: var(--dark-green-50);--color-status-success-foreground: var(--dark-green-100);--color-status-warning-background: var(--dark-orange-50);--color-status-warning-foreground: var(--dark-orange-100);--color-text-brand-default: var(--dark-blue-100);--color-text-brand-hover: var(--dark-blue-200);--color-text-error-default: var(--dark-red-100);--color-text-primary-default: var(--base-light);--color-text-primary-inversed: var(--dark-neutral-0);--color-text-secondary-default: var(--dark-neutral-200);--color-text-success-default: var(--dark-green-100);--color-text-tertiary-default: var(--dark-neutral-100);--color-button-brandlight-filled-hover: var(--dark-brand-50)}@font-face{font-family:Roboto Slab;src:url(../assets/fonts/RobotoSlab-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Semibold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:Fira Code;src:url(../assets/fonts/FiraCode-Regular.ttf) format("truetype");font-weight:400}*{font-family:Manrope,sans-serif;font-size:14px;line-height:1.2em;letter-spacing:.02em;font-weight:400;color:var(--color-text-primary-default)}h1,h2,h3,h4,h5,h6{margin:0}a{color:var(--color-text-brand-default);text-decoration:none}a:hover{color:var(--color-text-brand-hover)}a[href=""]{opacity:40%;cursor:default;pointer-events:none}p:not(:last-child){margin:0 0 8px}.alert{border-radius:12px;padding:24px 20px;display:flex;align-items:center;font-size:16px;font-weight:600}.alert.multiline{flex-direction:column;align-items:flex-start;padding:16px}.alert.multiline svg{margin:0 0 12px}.alert.success{background-color:var(--color-status-success-background);color:var(--color-status-success-foreground)}.alert.success svg *{fill:var(--color-status-success-foreground)}.alert.error{background-color:var(--color-status-error-background);color:var(--color-status-error-foreground)}.alert.error svg *{fill:var(--color-status-error-foreground)}.alert.warning{background-color:var(--color-status-warning-background);color:var(--color-status-warning-foreground)}.alert.warning svg *{fill:var(--color-status-warning-foreground)}.alert svg{margin:0 12px 0 0}
|
1
|
+
@font-face{font-family:Roboto Slab;src:url(../assets/fonts/RobotoSlab-SemiBold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Semibold.ttf) format("truetype");font-weight:600}@font-face{font-family:Manrope;src:url(../assets/fonts/Manrope-Bold.ttf) format("truetype");font-weight:700}@font-face{font-family:Fira Code;src:url(../assets/fonts/FiraCode-Regular.ttf) format("truetype");font-weight:400}*{font-family:Manrope,sans-serif;font-size:14px;line-height:1.2em;letter-spacing:.02em;font-weight:400;color:var(--color-text-primary-default)}h1,h2,h3,h4,h5,h6{margin:0}a{color:var(--color-text-brand-default);text-decoration:none}a:hover{color:var(--color-text-brand-hover)}a[href=""]{opacity:40%;cursor:default;pointer-events:none}p:not(:last-child){margin:0 0 8px}.alert{border-radius:12px;padding:24px 20px;display:flex;align-items:center;font-size:16px;font-weight:600}.alert.multiline{flex-direction:column;align-items:flex-start;padding:16px}.alert.multiline svg{margin:0 0 12px}.alert.success{background-color:var(--color-status-success-background);color:var(--color-status-success-foreground)}.alert.success svg *{fill:var(--color-status-success-foreground)}.alert.error{background-color:var(--color-status-error-background);color:var(--color-status-error-foreground)}.alert.error svg *{fill:var(--color-status-error-foreground)}.alert.warning{background-color:var(--color-status-warning-background);color:var(--color-status-warning-foreground)}.alert.warning svg *{fill:var(--color-status-warning-foreground)}.alert svg{margin:0 12px 0 0}
|
package/dist/assets/Button.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
:root{--3afly-fonts-body: "Manrope", sans-serif;--3afly-fonts-heading: "Roboto Slab", sans-serif;--light-brand-50: #c2d0ff;--dark-brand-50: #c2d0ff;--base-dark: #121212;--base-light: #ffffff;--dark-blue-20: #153398;--dark-blue-50: #0e2266;--dark-blue-100: #5076ff;--dark-blue-200: #7c98ff;--dark-blue-300: #a7bbff;--light-blue-20: #eef2ff;--light-blue-50: #c2d0ff;--light-blue-100: #2454ff;--light-blue-200: #1a3ab2;--light-blue-300: #0e2266;--dark-neutral-0: #121212;--dark-neutral-20: #292929;--dark-neutral-50: #333333;--dark-neutral-100: #4d4d4d;--dark-neutral-200: #6e6e6e;--dark-neutral-300: #ffffff;--light-neutral-0: #ffffff;--light-neutral-20: #f6f7f8;--light-neutral-50: #f1f2f4;--light-neutral-100: #d2d5da;--light-neutral-200: #a5a8ac;--light-neutral-300: #121212;--dark-green-50: #044329;--dark-green-100: #12a26c;--dark-green-200: #cef8e0;--dark-orange-50: #662500;--dark-orange-100: #e16d00;--dark-orange-200: #ffeccc;--dark-red-50: #7b0000;--dark-red-100: #f65843;--dark-red-200: #ffebe7;--light-green-50: #cef8e0;--light-green-100: #15a46e;--light-green-200: #06603b;--light-orange-50: #ffeccc;--light-orange-100: #e46f00;--light-orange-200: #9e3900;--light-red-50: #ffebe7;--light-red-100: #f75c46;--light-red-200: #9e0000;--color-fader: #12121220;--default-font-color: var(--base-dark);--color-bg-brand-default: var(--light-blue-100);--color-bg-brand-hover: var(--light-blue-200);--color-bg-brand-selected: var(--light-blue-300);--color-bg-brand-lightest-default: var(--light-blue-20);--color-bg-brand-light-default: var(--light-blue-50);--color-bg-error-default: var(--light-red-100);--color-bg-error-hover: var(--light-red-200);--color-bg-innerisland-default: var(--light-neutral-20);--color-bg-island-default: var(--base-light);--color-bg-island-disabled: var(--light-neutral-50);--color-bg-island-inversed: var(--base-dark);--color-bg-island-selected: var(--light-neutral-50);--color-bg-page-primary-default: var(--light-neutral-50);--color-bg-page-secondary-default: var(--light-neutral-0);--color-bg-neutral-basic-default: var(--light-neutral-0);--color-bg-neutral-basic-inversed: var(--light-neutral-300);--color-bg-neutral-lightest-default: var(--light-neutral-20);--color-bg-neutral-medium-default: var(--light-neutral-100);--color-border-brand-default: var(--light-blue-100);--color-border-error-default: var(--light-red-100);--color-border-primary-default: var(--light-neutral-100);--color-border-primary-hover: var(--base-dark);--color-border-secondary-default: var(--light-neutral-200);--color-border-secondary-hover: var(--base-dark);--color-border-success-default: var(--light-green-100);--color-chart-critical: var(--light-red-100);--color-chart-low: var(--light-green-100);--color-chart-medium: var(--light-orange-100);--effect-shadow-drop: #12121214;--effect-shadow-L: #12121208;--effect-shadow-XL: #12121215;--color-icon-brand-default: var(--light-blue-100);--color-icon-brand-hover: var(--light-blue-200);--color-icon-error-default: var(--light-red-100);--color-icon-error-hover: var(--light-red-200);--color-icon-primary-default: var(--base-dark);--color-icon-primary-inversed: var(--base-light);--color-icon-secondary-default: var(--light-neutral-200);--color-icon-secondary-hover: var(--base-dark);--color-icon-success-default: var(--light-green-100);--color-sidemenu-bg-default: var(--base-light);--color-sidemenu-bg-hover: var(--light-neutral-50);--color-sidemenu-bg-selected: var(--light-blue-100);--color-sidemenu-icon-default: var(--base-dark);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--light-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);--color-sidemenu-text-default: var(--base-dark);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--light-red-50);--color-status-error-foreground: var(--light-red-100);--color-status-success-background: var(--light-green-50);--color-status-success-foreground: var(--light-green-100);--color-status-warning-background: var(--light-orange-50);--color-status-warning-foreground: var(--light-orange-100);--color-text-brand-default: var(--light-blue-100);--color-text-brand-hover: var(--light-blue-200);--color-text-error-default: var(--light-red-100);--color-text-primary-default: var(--base-dark);--color-text-primary-inversed: var(--light-neutral-0);--color-text-secondary-default: var(--light-neutral-200);--color-text-success-default: var(--light-green-100);--color-text-tertiary-default: var(--light-neutral-100);--color-button-brandlight-filled-hover: var(--light-brand-50)}html[data-theme=dark]{--default-font-color: var(--base-light);--color-bg-brand-default: var(--dark-blue-100);--color-bg-brand-hover: var(--dark-blue-200);--color-bg-brand-selected: var(--dark-blue-300);--color-bg-brand-light-default: var(--dark-blue-50);--color-bg-error-default: var(--dark-red-100);--color-bg-error-hover: var(--dark-red-50);--color-bg-innerisland-default: var(--dark-neutral-20);--color-bg-island-default: var(--base-dark);--color-bg-island-disabled: var(--dark-neutral-50);--color-bg-island-inversed: var(--base-light);--color-bg-island-selected: var(--dark-neutral-50);--color-bg-page-default: var(--dark-neutral-50);--color-bg-page-secondary-default: var(--dark-neutral-0);--color-bg-neutral-basic-default: var(--dark-neutral-20);--color-bg-neutral-basic-inversed: var(--dark-neutral-300);--color-bg-neutral-lightest-default: var(--dark-neutral-20);--color-bg-neutral-medium-default: var(--dark-neutral-100);--color-border-brand-default: var(--dark-blue-100);--color-border-error-default: var(--dark-red-100);--color-border-primary-default: var(--dark-neutral-100);--color-border-primary-hover: var(--base-light);--color-border-secondary-default: var(--dark-neutral-200);--color-border-secondary-hover: var(--base-light);--color-border-success-default: var(--dark-green-100);--color-chart-critical: var(--dark-red-100);--color-chart-low: var(--dark-green-100);--color-chart-medium: var(--dark-orange-100);--effect-shadow-drop: #12121299;--color-icon-brand-default: var(--dark-blue-100);--color-icon-brand-hover: var(--dark-blue-200);--color-icon-error-default: var(--dark-red-100);--color-icon-error-hover: var(--dark-red-200);--color-icon-primary-default: var(--base-light);--color-icon-primary-inversed: var(--base-dark);--color-icon-secondary-default: var(--dark-neutral-200);--color-icon-secondary-hover: var(--base-light);--color-icon-success-default: var(--dark-green-100);--color-sidemenu-bg-default: var(--base-dark);--color-sidemenu-bg-hover: var(--dark-neutral-50);--color-sidemenu-bg-selected: var(--dark-blue-100);--color-sidemenu-icon-default: var(--base-light);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--dark-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-light);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);--color-sidemenu-text-default: var(--base-light);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--dark-red-50);--color-status-error-foreground: var(--dark-red-100);--color-status-success-background: var(--dark-green-50);--color-status-success-foreground: var(--dark-green-100);--color-status-warning-background: var(--dark-orange-50);--color-status-warning-foreground: var(--dark-orange-100);--color-text-brand-default: var(--dark-blue-100);--color-text-brand-hover: var(--dark-blue-200);--color-text-error-default: var(--dark-red-100);--color-text-primary-default: var(--base-light);--color-text-primary-inversed: var(--dark-neutral-0);--color-text-secondary-default: var(--dark-neutral-200);--color-text-success-default: var(--dark-green-100);--color-text-tertiary-default: var(--dark-neutral-100);--color-button-brandlight-filled-hover: var(--dark-brand-50)}button.btn{--height-sm: 28px;--height-md: 36px;--height-lg: 44px;--height: var(--height-md);flex-shrink:0;background-color:var(--color-bg-brand-default);color:var(--light-color-static)!important;display:flex;justify-content:center;align-items:center;height:var(--height);border-radius:calc(var(--height) / 2);border:none;padding:10px 16px;cursor:pointer;transition:.15s all}button.btn:hover{background-color:var(--color-bg-brand-hover)}button.btn svg *{fill:var(--light-color-static)}button.btn span{color:var(--light-color-static)}button.btn[disabled]{opacity:50%;cursor:default;pointer-events:none}button.btn.brand-light{background-color:var(--color-bg-brand-lightest-default);color:var(--light-color-static-brand)!important}button.btn.brand-light:hover{background-color:var(--color-button-brandlight-filled-hover)}button.btn.brand-light svg *{fill:var(--light-color-static-brand)}button.btn.brand-light span{color:var(--light-color-static-brand)}button.btn.gray{background-color:var(--color-bg-neutral-lightest-default);color:var(--color-text-primary-default)!important}button.btn.gray:hover{background-color:var(--color-bg-neutral-medium-default)}button.btn.gray svg *{fill:var(--color-text-primary-default)}button.btn.gray span{color:var(--color-text-primary-default)}button.btn.danger{background-color:var(--color-bg-error-default);color:var(--light-color-static)!important}button.btn.danger:hover{background-color:var(--color-bg-error-hover)}button.btn.danger svg *{fill:var(--light-color-static)}button.btn.danger span{color:var(--light-color-static)}button.btn.outlined{background-color:transparent!important;border:1px solid var(--color-border-brand-default);color:var(--color-border-brand-default)}button.btn.outlined[disabled]{pointer-events:none}button.btn.outlined:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-brand-default)}button.btn.outlined span{color:var(--color-border-brand-default)}button.btn.outlined svg *{fill:var(--color-border-brand-default)}button.btn.outlined.gray{background-color:transparent!important;border:1px solid var(--color-border-secondary-default);color:var(--color-text-primary-default)}button.btn.outlined.gray[disabled]{pointer-events:none}button.btn.outlined.gray:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-secondary-default)}button.btn.outlined.gray span{color:var(--color-text-primary-default)}button.btn.outlined.gray svg *{fill:var(--color-text-primary-default)}button.btn.outlined.danger{background-color:transparent!important;border:1px solid var(--color-bg-error-default);color:var(--color-bg-error-default)}button.btn.outlined.danger[disabled]{pointer-events:none}button.btn.outlined.danger:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-bg-error-default)}button.btn.outlined.danger span{color:var(--color-bg-error-default)}button.btn.outlined.danger svg *{fill:var(--color-bg-error-default)}button.btn.sm{--height: var(--height-sm);padding:6px 12px}button.btn.sm span{font-size:12px}button.btn.lg{--height: var(--height-lg);padding:12px 20px}button.btn.icon-button{width:var(--height);height:var(--height);padding:0;border-radius:50%;display:flex;justify-content:center;align-items:center}button.btn.icon-button *{margin:0!important}button.btn.semiround{border-radius:6px}button.btn.semiround.lg{border-radius:8px}button.btn.loading .btn-label{color:transparent}button.btn .arrow{margin:0 10px 0 0}button.btn .arrow:last-child{margin:0 0 0 10px;transform:rotate(180deg)}button.btn .icon{margin:0 8px 0 0;display:flex}button.btn .icon-tail{display:flex;margin:0 0 0 8px}
|
1
|
+
button.btn{--height-sm: 28px;--height-md: 36px;--height-lg: 44px;--height: var(--height-md);flex-shrink:0;background-color:var(--color-bg-brand-default);color:var(--light-color-static)!important;display:flex;justify-content:center;align-items:center;height:var(--height);border-radius:calc(var(--height) / 2);border:none;padding:10px 16px;cursor:pointer;transition:.15s all}button.btn:hover{background-color:var(--color-bg-brand-hover)}button.btn svg *{fill:var(--light-color-static)}button.btn span{color:var(--light-color-static)}button.btn[disabled]{opacity:50%;cursor:default;pointer-events:none}button.btn.brand-light{background-color:var(--color-bg-brand-lightest-default);color:var(--light-color-static-brand)!important}button.btn.brand-light:hover{background-color:var(--color-button-brandlight-filled-hover)}button.btn.brand-light svg *{fill:var(--light-color-static-brand)}button.btn.brand-light span{color:var(--light-color-static-brand)}button.btn.gray{background-color:var(--color-bg-neutral-lightest-default);color:var(--color-text-primary-default)!important}button.btn.gray:hover{background-color:var(--color-bg-neutral-medium-default)}button.btn.gray svg *{fill:var(--color-text-primary-default)}button.btn.gray span{color:var(--color-text-primary-default)}button.btn.danger{background-color:var(--color-bg-error-default);color:var(--light-color-static)!important}button.btn.danger:hover{background-color:var(--color-bg-error-hover)}button.btn.danger svg *{fill:var(--light-color-static)}button.btn.danger span{color:var(--light-color-static)}button.btn.outlined{background-color:transparent!important;border:1px solid var(--color-border-brand-default);color:var(--color-border-brand-default)}button.btn.outlined[disabled]{pointer-events:none}button.btn.outlined:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-brand-default)}button.btn.outlined span{color:var(--color-border-brand-default)}button.btn.outlined svg *{fill:var(--color-border-brand-default)}button.btn.outlined.gray{background-color:transparent!important;border:1px solid var(--color-border-secondary-default);color:var(--color-text-primary-default)}button.btn.outlined.gray[disabled]{pointer-events:none}button.btn.outlined.gray:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-border-secondary-default)}button.btn.outlined.gray span{color:var(--color-text-primary-default)}button.btn.outlined.gray svg *{fill:var(--color-text-primary-default)}button.btn.outlined.danger{background-color:transparent!important;border:1px solid var(--color-bg-error-default);color:var(--color-bg-error-default)}button.btn.outlined.danger[disabled]{pointer-events:none}button.btn.outlined.danger:hover{background-color:transparent;box-shadow:inset 0 0 0 1px var(--color-bg-error-default)}button.btn.outlined.danger span{color:var(--color-bg-error-default)}button.btn.outlined.danger svg *{fill:var(--color-bg-error-default)}button.btn.sm{--height: var(--height-sm);padding:6px 12px}button.btn.sm span{font-size:12px}button.btn.lg{--height: var(--height-lg);padding:12px 20px}button.btn.icon-button{width:var(--height);height:var(--height);padding:0;border-radius:50%;display:flex;justify-content:center;align-items:center}button.btn.icon-button *{margin:0!important}button.btn.semiround{border-radius:6px}button.btn.semiround.lg{border-radius:8px}button.btn.loading .btn-label{color:transparent}button.btn .arrow{margin:0 10px 0 0}button.btn .arrow:last-child{margin:0 0 0 10px;transform:rotate(180deg)}button.btn .icon{margin:0 8px 0 0;display:flex}button.btn .icon-tail{display:flex;margin:0 0 0 8px}
|
package/dist/assets/Checkbox.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
:root{--3afly-fonts-body: "Manrope", sans-serif;--3afly-fonts-heading: "Roboto Slab", sans-serif;--light-brand-50: #c2d0ff;--dark-brand-50: #c2d0ff;--base-dark: #121212;--base-light: #ffffff;--dark-blue-20: #153398;--dark-blue-50: #0e2266;--dark-blue-100: #5076ff;--dark-blue-200: #7c98ff;--dark-blue-300: #a7bbff;--light-blue-20: #eef2ff;--light-blue-50: #c2d0ff;--light-blue-100: #2454ff;--light-blue-200: #1a3ab2;--light-blue-300: #0e2266;--dark-neutral-0: #121212;--dark-neutral-20: #292929;--dark-neutral-50: #333333;--dark-neutral-100: #4d4d4d;--dark-neutral-200: #6e6e6e;--dark-neutral-300: #ffffff;--light-neutral-0: #ffffff;--light-neutral-20: #f6f7f8;--light-neutral-50: #f1f2f4;--light-neutral-100: #d2d5da;--light-neutral-200: #a5a8ac;--light-neutral-300: #121212;--dark-green-50: #044329;--dark-green-100: #12a26c;--dark-green-200: #cef8e0;--dark-orange-50: #662500;--dark-orange-100: #e16d00;--dark-orange-200: #ffeccc;--dark-red-50: #7b0000;--dark-red-100: #f65843;--dark-red-200: #ffebe7;--light-green-50: #cef8e0;--light-green-100: #15a46e;--light-green-200: #06603b;--light-orange-50: #ffeccc;--light-orange-100: #e46f00;--light-orange-200: #9e3900;--light-red-50: #ffebe7;--light-red-100: #f75c46;--light-red-200: #9e0000;--color-fader: #12121220;--default-font-color: var(--base-dark);--color-bg-brand-default: var(--light-blue-100);--color-bg-brand-hover: var(--light-blue-200);--color-bg-brand-selected: var(--light-blue-300);--color-bg-brand-lightest-default: var(--light-blue-20);--color-bg-brand-light-default: var(--light-blue-50);--color-bg-error-default: var(--light-red-100);--color-bg-error-hover: var(--light-red-200);--color-bg-innerisland-default: var(--light-neutral-20);--color-bg-island-default: var(--base-light);--color-bg-island-disabled: var(--light-neutral-50);--color-bg-island-inversed: var(--base-dark);--color-bg-island-selected: var(--light-neutral-50);--color-bg-page-primary-default: var(--light-neutral-50);--color-bg-page-secondary-default: var(--light-neutral-0);--color-bg-neutral-basic-default: var(--light-neutral-0);--color-bg-neutral-basic-inversed: var(--light-neutral-300);--color-bg-neutral-lightest-default: var(--light-neutral-20);--color-bg-neutral-medium-default: var(--light-neutral-100);--color-border-brand-default: var(--light-blue-100);--color-border-error-default: var(--light-red-100);--color-border-primary-default: var(--light-neutral-100);--color-border-primary-hover: var(--base-dark);--color-border-secondary-default: var(--light-neutral-200);--color-border-secondary-hover: var(--base-dark);--color-border-success-default: var(--light-green-100);--color-chart-critical: var(--light-red-100);--color-chart-low: var(--light-green-100);--color-chart-medium: var(--light-orange-100);--effect-shadow-drop: #12121214;--effect-shadow-L: #12121208;--effect-shadow-XL: #12121215;--color-icon-brand-default: var(--light-blue-100);--color-icon-brand-hover: var(--light-blue-200);--color-icon-error-default: var(--light-red-100);--color-icon-error-hover: var(--light-red-200);--color-icon-primary-default: var(--base-dark);--color-icon-primary-inversed: var(--base-light);--color-icon-secondary-default: var(--light-neutral-200);--color-icon-secondary-hover: var(--base-dark);--color-icon-success-default: var(--light-green-100);--color-sidemenu-bg-default: var(--base-light);--color-sidemenu-bg-hover: var(--light-neutral-50);--color-sidemenu-bg-selected: var(--light-blue-100);--color-sidemenu-icon-default: var(--base-dark);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--light-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-dark);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-dark);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-light);--color-sidemenu-text-default: var(--base-dark);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--light-red-50);--color-status-error-foreground: var(--light-red-100);--color-status-success-background: var(--light-green-50);--color-status-success-foreground: var(--light-green-100);--color-status-warning-background: var(--light-orange-50);--color-status-warning-foreground: var(--light-orange-100);--color-text-brand-default: var(--light-blue-100);--color-text-brand-hover: var(--light-blue-200);--color-text-error-default: var(--light-red-100);--color-text-primary-default: var(--base-dark);--color-text-primary-inversed: var(--light-neutral-0);--color-text-secondary-default: var(--light-neutral-200);--color-text-success-default: var(--light-green-100);--color-text-tertiary-default: var(--light-neutral-100);--color-button-brandlight-filled-hover: var(--light-brand-50)}html[data-theme=dark]{--default-font-color: var(--base-light);--color-bg-brand-default: var(--dark-blue-100);--color-bg-brand-hover: var(--dark-blue-200);--color-bg-brand-selected: var(--dark-blue-300);--color-bg-brand-light-default: var(--dark-blue-50);--color-bg-error-default: var(--dark-red-100);--color-bg-error-hover: var(--dark-red-50);--color-bg-innerisland-default: var(--dark-neutral-20);--color-bg-island-default: var(--base-dark);--color-bg-island-disabled: var(--dark-neutral-50);--color-bg-island-inversed: var(--base-light);--color-bg-island-selected: var(--dark-neutral-50);--color-bg-page-default: var(--dark-neutral-50);--color-bg-page-secondary-default: var(--dark-neutral-0);--color-bg-neutral-basic-default: var(--dark-neutral-20);--color-bg-neutral-basic-inversed: var(--dark-neutral-300);--color-bg-neutral-lightest-default: var(--dark-neutral-20);--color-bg-neutral-medium-default: var(--dark-neutral-100);--color-border-brand-default: var(--dark-blue-100);--color-border-error-default: var(--dark-red-100);--color-border-primary-default: var(--dark-neutral-100);--color-border-primary-hover: var(--base-light);--color-border-secondary-default: var(--dark-neutral-200);--color-border-secondary-hover: var(--base-light);--color-border-success-default: var(--dark-green-100);--color-chart-critical: var(--dark-red-100);--color-chart-low: var(--dark-green-100);--color-chart-medium: var(--dark-orange-100);--effect-shadow-drop: #12121299;--color-icon-brand-default: var(--dark-blue-100);--color-icon-brand-hover: var(--dark-blue-200);--color-icon-error-default: var(--dark-red-100);--color-icon-error-hover: var(--dark-red-200);--color-icon-primary-default: var(--base-light);--color-icon-primary-inversed: var(--base-dark);--color-icon-secondary-default: var(--dark-neutral-200);--color-icon-secondary-hover: var(--base-light);--color-icon-success-default: var(--dark-green-100);--color-sidemenu-bg-default: var(--base-dark);--color-sidemenu-bg-hover: var(--dark-neutral-50);--color-sidemenu-bg-selected: var(--dark-blue-100);--color-sidemenu-icon-default: var(--base-light);--color-sidemenu-icon-selected: var(--light-color-static);--color-sidemenu-plus_button_bg-selected-hover: var(--dark-blue-200);--color-sidemenu-plus_button_bg-unselected-hover: var(--base-light);--color-sidemenu-plus_button_icon-selected-default: var(--light-color-static);--color-sidemenu-plus_button_icon-selected-hover: var(--light-color-static);--color-sidemenu-plus_button_icon-unselected-default: var(--base-light);--color-sidemenu-plus_button_icon-unselected-hover: var(--base-dark);--color-sidemenu-text-default: var(--base-light);--color-sidemenu-text-selected: var(--light-color-static);--dark-color-static: var(--base-dark);--dark-color-static-brand: var(--dark-blue-100);--light-color-static: var(--base-light);--light-color-static-brand: var(--light-blue-100);--color-status-error-background: var(--dark-red-50);--color-status-error-foreground: var(--dark-red-100);--color-status-success-background: var(--dark-green-50);--color-status-success-foreground: var(--dark-green-100);--color-status-warning-background: var(--dark-orange-50);--color-status-warning-foreground: var(--dark-orange-100);--color-text-brand-default: var(--dark-blue-100);--color-text-brand-hover: var(--dark-blue-200);--color-text-error-default: var(--dark-red-100);--color-text-primary-default: var(--base-light);--color-text-primary-inversed: var(--dark-neutral-0);--color-text-secondary-default: var(--dark-neutral-200);--color-text-success-default: var(--dark-green-100);--color-text-tertiary-default: var(--dark-neutral-100);--color-button-brandlight-filled-hover: var(--dark-brand-50)}.checkbox-container{display:flex;flex-direction:column;align-items:flex-start}.checkbox-container:not(:last-child){margin:0 0 8px}.checkbox-container .checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.checkbox-container .checkbox{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container .checkbox.disabled{opacity:50%;cursor:default}.checkbox-container .checkbox .checkmark{display:flex;justify-content:center;align-items:center;width:20px;height:20px;border:1px solid var(--color-border-primary-default);border-radius:4px;margin:0 8px 0 0;transition:all .1s ease}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark:after{content:"";display:block;width:100%;height:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.8192 1.05614C12.1853 1.42227 12.1853 2.01586 11.8191 2.38197L5.25665 8.94417C4.89054 9.31026 4.29698 9.31027 3.93087 8.94418L0.649617 5.66323C0.283484 5.29713 0.283458 4.70354 0.649558 4.3374C1.01566 3.97127 1.60925 3.97124 1.97538 4.33734L4.59374 6.95546L10.4934 1.05611C10.8595 0.690002 11.4531 0.690016 11.8192 1.05614Z' fill='white'/></svg>");background-repeat:no-repeat;background-position:center}.checkbox-container .checkbox.indeterminate .checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox.indeterminate .checkmark:after{content:"";display:block;background-color:var(--base-light);width:10px;height:2.5px;border-radius:1px}
|
1
|
+
.checkbox-container{display:flex;flex-direction:column;align-items:flex-start}.checkbox-container:not(:last-child){margin:0 0 8px}.checkbox-container .checkbox input[type=checkbox]{position:absolute;opacity:0;cursor:pointer}.checkbox-container .checkbox{display:inline-flex;align-items:center;line-height:16.8px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-container .checkbox.disabled{opacity:50%;cursor:default}.checkbox-container .checkbox .checkmark{display:flex;justify-content:center;align-items:center;width:20px;height:20px;border:1px solid var(--color-border-primary-default);border-radius:4px;margin:0 8px 0 0;transition:all .1s ease}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox input[type=checkbox]:checked+.checkmark:after{content:"";display:block;width:100%;height:100%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.8192 1.05614C12.1853 1.42227 12.1853 2.01586 11.8191 2.38197L5.25665 8.94417C4.89054 9.31026 4.29698 9.31027 3.93087 8.94418L0.649617 5.66323C0.283484 5.29713 0.283458 4.70354 0.649558 4.3374C1.01566 3.97127 1.60925 3.97124 1.97538 4.33734L4.59374 6.95546L10.4934 1.05611C10.8595 0.690002 11.4531 0.690016 11.8192 1.05614Z' fill='white'/></svg>");background-repeat:no-repeat;background-position:center}.checkbox-container .checkbox.indeterminate .checkmark{background-color:var(--color-bg-brand-default);border-color:var(--color-bg-brand-default)}.checkbox-container .checkbox.indeterminate .checkmark:after{content:"";display:block;background-color:var(--base-light);width:10px;height:2.5px;border-radius:1px}
|