levannta-ui 1.0.10 → 1.0.11
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/index.css +1 -1
- package/dist/index.esm.js +219 -207
- package/dist/index.esm.js.map +1 -1
- package/dist/index.umd.js +8 -8
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
@@ -1 +1 @@
|
|
1
|
-
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-text);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-text);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){color:var(--button-text);background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}.sidebar-wrapper{position:relative;display:flex;height:100vh}.sidebar{display:flex;flex-direction:column;width:290px;height:100vh;background-color:#024;color:#fff;transition:width .3s;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:0;z-index:2;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-collapsed{width:90px}.sidebar-header{display:flex;align-items:center;padding:16px;justify-content:space-between;margin-bottom:50px}.sidebar-logo{display:flex;align-items:center;gap:42px;color:#fff}.sidebar-toggle{background:none;border:none;color:#8ba1b7;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-menu{flex:1;width:85%;overflow-y:auto;gap:4px;margin:10px}.sidebar-item{border-bottom:1px solid #D4D4D4;border-spacing:10px;padding:10px 0}.active{background-color:#fff3;border-radius:8px}.sidebar-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;width:100%;padding:6px 12px}.active-text{color:#00f7aa!important;fill:#00f7aa!important}.active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item{border-bottom:none;position:relative;background-color:transparent!important}.sidebar-collapsed .sidebar-item .active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:1px;background-color:#d4d4d4}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ba1b7}.sidebar-content{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:16px}.sidebar-label{flex:1}.submenu{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear .2s;padding-top:0;padding-bottom:0}.sidebar-item.open .submenu{max-height:300px;opacity:1;visibility:visible;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear 0s;padding-top:8px;padding-bottom:8px}.submenu-arrow{font-size:10px;color:#8ba1b7;transition:transform .3s ease}.submenu-item{display:flex;align-items:center;padding:6px 20px;text-decoration:none;color:#fff}.submenu-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:12px;color:#8ba1b7}.sidebar-footer{padding:16px}.logout-button{display:flex;align-items:center;gap:12px;background:none;border:none;color:#fff;width:100%;padding-bottom:10px;text-align:left;cursor:pointer;transition:background-color .2s;border-radius:4px;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-toggle-icon{position:relative;left:-14px;top:120px;transform:translateY(-50%) rotate(180deg);background:none;border:none;cursor:pointer;z-index:3;padding:0;margin-left:0;transition:transform .3s}.sidebar-toggle-icon.collapsed{transform:translateY(-50%) rotate(0)}.mobile-menu-button{display:none;background:transparent;border:none;cursor:pointer;padding:8px;z-index:10;color:#fff}.mobile-menu-button svg{width:24px;height:24px}.hamburger-icon{transition:transform .3s ease}.hamburger-line{transition:all .3s ease}.mobile-menu-button .top-line{transform-origin:12px 12px}.mobile-menu-button .middle-line{opacity:1}.mobile-menu-button .bottom-line{transform-origin:12px 12px}.mobile-menu-button.open .top-line{transform:translateY(2px) rotate(45deg);transform-origin:12px 12px}.mobile-menu-button.open .middle-line{opacity:0}.mobile-menu-button.open .bottom-line{transform:translateY(-7px) rotate(-45deg);transform-origin:12px 12px}.mobile-navbar{display:none}.mobile-header{display:flex;width:100%;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}.mobile-logo-menu{color:#fff}@media (max-width: 768px){.mobile-navbar{display:flex;position:fixed;top:0;left:0;width:100%;height:60px;background-color:#024;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;z-index:1001}.sidebar-item{border-bottom:none;padding:0}.mobile-logo{display:flex;align-items:center;height:100%}.mobile-menu-button{display:flex;position:relative;top:auto;left:auto}.sidebar-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;visibility:hidden}.sidebar-wrapper.mobile-open,.sidebar-wrapper.mobile-closing{visibility:visible;display:flex}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sidebar-mobile{width:100%!important;max-width:100%!important;height:100vh;padding-top:0;padding-bottom:20px;overflow-y:auto}.mobile-header{opacity:1;transform:translateY(0);border-bottom:none}.sidebar-menu{width:100%;margin:0;padding-bottom:60px;transform:translateY(100%);opacity:0;will-change:transform,opacity;animation:none}.sidebar-wrapper.mobile-open .sidebar-menu{animation:slideInUp .5s cubic-bezier(.16,1,.3,1) forwards}.sidebar-wrapper.mobile-closing .sidebar-menu{transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}.sidebar-wrapper.mobile-open .sidebar-item{animation:fadeInUp .3s ease forwards;opacity:0}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(1){animation-delay:.1s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(2){animation-delay:.15s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(3){animation-delay:.2s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(4){animation-delay:.25s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(5){animation-delay:.3s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(6){animation-delay:.35s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(n+7){animation-delay:.4s}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease;visibility:hidden}.sidebar-overlay.visible{opacity:1;visibility:visible}.sidebar-wrapper.mobile-closing .sidebar-overlay{opacity:0}.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-item.active{border-radius:0;width:100%;margin:0}.sidebar-item.active .sidebar-link{background-color:#fff3;border-radius:0;width:100%;padding:16px}.sidebar-link{padding:16px;width:100%;border-radius:0;display:flex;align-items:center}.sidebar-item .sidebar-link.active{background-color:#fff3;padding-left:16px;padding-right:16px;margin:0;width:100%}.sidebar-icon{margin-right:16px}.mobile-close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;font-weight:700}.sidebar-item.open{background-color:#ffffff0d}.sidebar-content{width:100%;justify-content:space-between;margin-left:16px}.submenu-arrow{margin-left:auto;transition:transform .3s ease}.sidebar-item.open .submenu-arrow{transform:rotate(180deg)}.sidebar-item{width:100%;border-radius:0}.submenu-label{padding-left:10px;font-size:14px}.sidebar-item.open .submenu{max-height:500px;padding-left:0;width:100%}.submenu{padding-left:0;background-color:transparent;width:100%;padding-bottom:8px;gap:0}.submenu-item{padding:2px 66px;border-bottom:none;width:100%;border-radius:0;display:flex;align-items:center}.submenu-item.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-mobile{padding-top:0;padding-bottom:20px;overflow-y:auto}.sidebar-toggle-icon{display:none}}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;opacity:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeOutOverlay{0%{opacity:1}to{opacity:0}}.drawer-overlay.fade-in{animation:fadeInOverlay .4s ease forwards}.drawer-overlay.fade-out{animation:fadeOutOverlay .4s ease forwards}.drawer-overlay{animation:fadeInOverlay .4s ease forwards}.drawer{position:fixed;background-color:#fff;box-shadow:0 0 10px #0003;z-index:1001;display:flex;flex-direction:column;opacity:0}.drawer-right,.drawer-left{top:0;height:100vh}.drawer-top,.drawer-bottom{left:0;width:100%!important;height:auto;min-height:150px}.drawer-right{right:0;transform:translate(100%);opacity:0}.drawer-left{left:0;transform:translate(-100%);opacity:0}.drawer-top{top:0;transform:translateY(-100%);opacity:0}.drawer-bottom{bottom:0;transform:translateY(100%);opacity:0}.drawer-right.drawer-small,.drawer-left.drawer-small{width:300px}.drawer-right.drawer-medium,.drawer-left.drawer-medium{width:450px}.drawer-right.drawer-large,.drawer-left.drawer-large{width:600px}.drawer-top.drawer-small,.drawer-bottom.drawer-small{max-height:30vh}.drawer-top.drawer-medium,.drawer-bottom.drawer-medium{max-height:50vh}.drawer-top.drawer-large,.drawer-bottom.drawer-large{max-height:80vh}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes fadeOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.drawer-open.drawer-right{animation:fadeInRight .5s ease forwards;opacity:1}.drawer-open.drawer-left{animation:fadeInLeft .5s ease forwards;opacity:1}.drawer-open.drawer-top{animation:fadeInTop .5s ease forwards;opacity:1}.drawer-open.drawer-bottom{animation:fadeInBottom .5s ease forwards;opacity:1}.drawer-closing.drawer-right{animation:fadeOutRight .4s ease forwards}.drawer-closing.drawer-left{animation:fadeOutLeft .4s ease forwards}.drawer-closing.drawer-top{animation:fadeOutTop .4s ease forwards}.drawer-closing.drawer-bottom{animation:fadeOutBottom .4s ease forwards}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 15px;position:relative}.drawer-header:after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-title{margin:0;width:565px;height:24px;font-size:16px;font-weight:700;line-height:24px;color:#00b6ff;text-align:left;padding-right:20px;flex:1;letter-spacing:0%}.drawer-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:#1c1c1c;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;z-index:10;opacity:1;transition:opacity .2s ease}.drawer-close:hover{color:#333}.drawer-content{padding:20px;overflow-y:auto;flex:1}.drawer-content h3,.drawer-content .section-title{margin:0 0 15px;font-size:1rem;font-weight:600;color:#333}.drawer-field-label{display:block;margin-bottom:5px;font-size:.875rem;font-weight:500;color:#333}
|
1
|
+
.button{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:12px;line-height:24px;font-weight:600;transition:all .2s;outline:none;cursor:pointer;border:none;padding:8px 24px}.button:focus-visible{outline:6px solid #D5FFF2;outline-offset:2px}.button:disabled{opacity:.4;pointer-events:none}.button-filled{background-color:var(--button-bg, hsl(221.2 83.2% 53.3%));color:var(--button-text, white);border:none}.button-filled:hover:not(:disabled){background-color:var(--button-hover, hsl(221.2 83.2% 47.3%))}.button-outlined{background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%));border:1px solid var(--button-border, hsl(214.3 31.8% 91.4%))}.button-outlined:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3));color:var(--button-bg-hover, hsl(221.2 83.2% 47.3%))}.button-icon{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;background-color:transparent;color:var(--button-bg, hsl(221.2 83.2% 53.3%))}.button-icon:hover:not(:disabled){background-color:var(--button-bg-light, hsl(210 40% 96.1% / .3))}.button-icon.button-size-sm{width:36px;height:36px}.button-icon.button-size-md{width:48px;height:48px}.button-icon.button-size-lg{width:56px;height:56px}.button-icon.button-size-xl{width:64px;height:64px}.button-icon.button-pill{border-radius:50%}.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, transparent)}.button-filled.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-outlined.button-active{background-color:transparent;color:var(--button-text-active, #F9FAFB);border-color:var(--button-border-active, #076046)}.button-icon.button-active{background-color:var(--button-bg-active, #076046);color:var(--button-text-active, #F9FAFB)}.button-color-primary{--button-bg: #00F7AA;--button-text:#364153;--button-hover: #AEFFE6;--button-border: #00F7AA;--button-bg-light: hsl(221.2 83.2% 96%);--button-bg-hover: #AEFFE6;--button-bg-active: #076046;--button-text-active: #F9FAFB;--button-border-active: #076046}.button-color-secondary{--button-bg: #00B6FF;--button-text: #364153;--button-hover: #A7F0FF;--button-border: #00B6FF;--button-bg-light: hsl(142.1 76.2% 96%);--button-bg-hover: #A7F0FF;--button-bg-active: #0056B3;--button-text-active: #F9FAFB;--button-border-active: #0056B3}.button-color-error{--button-bg: #FB2C36;--button-text: #F2F3F7;--button-hover: #FF6467;--button-border: #FB2C36;--button-bg-light: hsl(0 84.2% 96%);--button-bg-hover: #FF6467;--button-bg-active: #9F0712;--button-text-active: #F2F3F7;--button-border-active: #9F0712}.button-color-clear{--button-bg: transparent;--button-text: #364153;--button-hover: #F9FAFB;--button-border: #D4D4D4;--button-bg-light: hsl(215.4 16.3% 96%);--button-bg-hover: #F9FAFB;--button-bg-active: transparent;--button-text-active: #364153;--button-border-active: transparent}.button-outlined-primary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-secondary{color:var(--button-bg);border-color:var(--button-border)}.button-outlined-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-error{color:var(--button-text);border-color:var(--button-border)}.button-outlined-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-outlined-clear{color:var(--button-text);border-color:var(--button-border)}.button-outlined-clear:hover:not(:disabled){color:var(--button-text);background-color:var(--button-bg-light)}.button-outlined-primary.button-active,.button-filled-primary.button-active,.button-icon-primary.button-active,.button-outlined-secondary.button-active,.button-filled-secondary.button-active,.button-icon-secondary.button-active,.button-outlined-error.button-active,.button-filled-error.button-active,.button-icon-error.button-active,.button-outlined-clear.button-active,.button-filled-clear.button-active,.button-icon-clear.button-active{background-color:var(--button-bg-active);color:var(--button-text-active);border-color:var(--button-border-active)}.button-filled-primary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-primary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-secondary{background-color:var(--button-bg);color:var(--button-text)}.button-filled-secondary:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-error{background-color:var(--button-bg);color:var(--button-text)}.button-filled-error:hover:not(:disabled){background-color:var(--button-hover)}.button-filled-clear{background-color:var(--button-bg);color:var(--button-text)}.button-filled-clear:hover:not(:disabled){background-color:var(--button-hover)}.button-icon-primary{color:var(--button-bg)}.button-icon-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-secondary{color:var(--button-bg)}.button-icon-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-error{color:var(--button-bg)}.button-icon-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-clear{color:var(--button-bg)}.button-icon-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-size-sm{min-width:94px;height:48px;font-size:12px}.button-size-md{min-width:101px;height:56px;font-size:16px}.button-size-lg{min-width:107px;height:72px;font-size:18px}.button-size-xl{min-width:130px;height:80px;font-size:20px}.button-pill{border-radius:9999px}.button-with-icon-left{position:relative;padding-left:3rem}.button-with-icon-right{position:relative;padding-right:3rem}.button-with-icon-left-justified{padding-left:5rem}.button-with-icon-right-justified{padding-right:5rem}.button-icon-left{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-icon-right{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center}.button-with-icon-left-justified .button-icon-left{left:1.75rem}.button-with-icon-right-justified .button-icon-right{right:1.75rem}.button-with-icon-left.button-with-icon-right{padding-left:2.5rem;padding-right:2.5rem}.button-size-sm .button-icon-left,.button-size-sm .button-icon-right{font-size:.875rem}.button-size-md .button-icon-left,.button-size-md .button-icon-right{font-size:1rem}.button-size-lg .button-icon-left,.button-size-lg .button-icon-right{font-size:1.125rem}.button-size-xl .button-icon-left,.button-size-xl .button-icon-right{font-size:1.25rem}.button-icon-only{width:48px;height:48px;padding:0;min-width:unset;justify-content:center;align-items:center;border-radius:8px;display:flex}.button-size-sm.button-icon-only{width:36px;height:36px}.button-size-md.button-icon-only{width:48px;height:48px}.button-size-lg.button-icon-only{width:56px;height:56px}.button-size-xl.button-icon-only{width:64px;height:64px}.button-pill.button-icon-only{border-radius:50%}.button-icon-only.button-color-primary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-primary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-secondary{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-secondary:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-error{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-error:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-color-clear{color:var(--button-bg);background-color:transparent}.button-icon-only.button-color-clear:hover:not(:disabled){background-color:var(--button-bg-light)}.button-icon-only.button-active{color:var(--button-text-active);background-color:var(--button-bg-active)}.sidebar-wrapper{position:relative;display:flex;height:100vh}.sidebar{display:flex;flex-direction:column;width:290px;height:100vh;background-color:#024;color:#fff;transition:width .3s;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:0;z-index:2;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-collapsed{width:90px}.sidebar-header{display:flex;align-items:center;padding:16px;justify-content:space-between;margin-bottom:50px}.sidebar-logo{display:flex;align-items:center;gap:42px;color:#fff}.sidebar-toggle{background:none;border:none;color:#8ba1b7;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:4px}.sidebar-toggle:hover{background-color:#ffffff1a}.sidebar-menu{flex:1;width:85%;overflow-y:auto;gap:4px;margin:10px}.sidebar-item{border-bottom:1px solid #D4D4D4;border-spacing:10px;padding:10px 0}.active{background-color:#fff3;border-radius:8px}.sidebar-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;width:100%;padding:6px 12px}.active-text{color:#00f7aa!important;fill:#00f7aa!important}.active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item{border-bottom:none;position:relative;background-color:transparent!important}.sidebar-collapsed .sidebar-item .active-text svg path{fill:#00f7aa!important}.sidebar-collapsed .sidebar-item:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:32px;height:1px;background-color:#d4d4d4}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:#8ba1b7}.sidebar-content{display:flex;flex:1;justify-content:space-between;align-items:center;margin-left:16px}.sidebar-label{flex:1}.submenu{max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear .2s;padding-top:0;padding-bottom:0}.sidebar-item.open .submenu{max-height:300px;opacity:1;visibility:visible;transition:max-height .3s ease-in-out,opacity .3s ease-in-out,padding .3s ease,visibility 0s linear 0s;padding-top:8px;padding-bottom:8px}.submenu-arrow{font-size:10px;color:#8ba1b7;transition:transform .3s ease}.submenu-item{display:flex;align-items:center;padding:6px 20px;text-decoration:none;color:#fff}.submenu-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:12px;color:#8ba1b7}.sidebar-footer{padding:16px}.logout-button{display:flex;align-items:center;gap:12px;background:none;border:none;color:#fff;width:100%;padding-bottom:10px;text-align:left;cursor:pointer;transition:background-color .2s;border-radius:4px;font-weight:600;font-size:14px;line-height:24px;letter-spacing:0%;vertical-align:middle}.sidebar-toggle-icon{position:relative;left:-14px;top:120px;transform:translateY(-50%) rotate(180deg);background:none;border:none;cursor:pointer;z-index:3;padding:0;margin-left:0;transition:transform .3s}.sidebar-toggle-icon.collapsed{transform:translateY(-50%) rotate(0)}.mobile-menu-button{display:none;background:transparent;border:none;cursor:pointer;padding:8px;z-index:10;color:#fff}.mobile-menu-button svg{width:24px;height:24px}.hamburger-icon{transition:transform .3s ease}.hamburger-line{transition:all .3s ease}.mobile-menu-button .top-line{transform-origin:12px 12px}.mobile-menu-button .middle-line{opacity:1}.mobile-menu-button .bottom-line{transform-origin:12px 12px}.mobile-menu-button.open .top-line{transform:translateY(2px) rotate(45deg);transform-origin:12px 12px}.mobile-menu-button.open .middle-line{opacity:0}.mobile-menu-button.open .bottom-line{transform:translateY(-7px) rotate(-45deg);transform-origin:12px 12px}.mobile-navbar{display:none}.mobile-header{display:flex;width:100%;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:20px}.mobile-logo-menu{color:#fff}@media (max-width: 768px){.mobile-navbar{display:flex;position:fixed;top:0;left:0;width:100%;height:60px;background-color:#024;justify-content:space-between;align-items:center;padding:0 20px;box-shadow:0 2px 4px #0000001a;z-index:1001}.sidebar-item{border-bottom:none;padding:0}.mobile-logo{display:flex;align-items:center;height:100%}.mobile-menu-button{display:flex;position:relative;top:auto;left:auto}.sidebar-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;visibility:hidden}.sidebar-wrapper.mobile-open,.sidebar-wrapper.mobile-closing{visibility:visible;display:flex}@keyframes slideInUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.sidebar-mobile{width:100%!important;max-width:100%!important;height:100vh;padding-top:0;padding-bottom:20px;overflow-y:auto}.mobile-header{opacity:1;transform:translateY(0);border-bottom:none}.sidebar-menu{width:100%;margin:0;padding-bottom:60px;transform:translateY(100%);opacity:0;will-change:transform,opacity;animation:none}.sidebar-wrapper.mobile-open .sidebar-menu{animation:slideInUp .5s cubic-bezier(.16,1,.3,1) forwards}.sidebar-wrapper.mobile-closing .sidebar-menu{transform:translateY(100%);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}.sidebar-wrapper.mobile-open .sidebar-item{animation:fadeInUp .3s ease forwards;opacity:0}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(1){animation-delay:.1s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(2){animation-delay:.15s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(3){animation-delay:.2s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(4){animation-delay:.25s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(5){animation-delay:.3s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(6){animation-delay:.35s}.sidebar-wrapper.mobile-open .sidebar-item:nth-child(n+7){animation-delay:.4s}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999;opacity:0;transition:opacity .3s ease;visibility:hidden}.sidebar-overlay.visible{opacity:1;visibility:visible}.sidebar-wrapper.mobile-closing .sidebar-overlay{opacity:0}.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-item.active{border-radius:0;width:100%;margin:0}.sidebar-item.active .sidebar-link{background-color:#fff3;border-radius:0;width:100%;padding:16px}.sidebar-link{padding:16px;width:100%;border-radius:0;display:flex;align-items:center}.sidebar-item .sidebar-link.active{background-color:#fff3;padding-left:16px;padding-right:16px;margin:0;width:100%}.sidebar-icon{margin-right:16px}.mobile-close-button{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;font-weight:700}.sidebar-item.open{background-color:#ffffff0d}.sidebar-content{width:100%;justify-content:space-between;margin-left:16px}.submenu-arrow{margin-left:auto;transition:transform .3s ease}.sidebar-item.open .submenu-arrow{transform:rotate(180deg)}.sidebar-item{width:100%;border-radius:0}.submenu-label{padding-left:10px;font-size:14px}.sidebar-item.open .submenu{max-height:500px;padding-left:0;width:100%}.submenu{padding-left:0;background-color:transparent;width:100%;padding-bottom:8px;gap:0}.submenu-item{padding:2px 66px;border-bottom:none;width:100%;border-radius:0;display:flex;align-items:center}.submenu-item.active{background-color:#fff3;border-radius:0;width:100%}.sidebar-mobile{padding-top:0;padding-bottom:20px;overflow-y:auto}.sidebar-toggle-icon{display:none}}.drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1000;opacity:0}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}@keyframes fadeOutOverlay{0%{opacity:1}to{opacity:0}}.drawer-overlay.fade-in{animation:fadeInOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer-overlay.fade-out{animation:fadeOutOverlay .5s cubic-bezier(.16,1,.3,1) forwards}.drawer{position:fixed;background-color:#fff;box-shadow:0 0 10px #0003;z-index:999999;display:flex;flex-direction:column;opacity:0}.drawer-right,.drawer-left{top:0;height:100vh}.drawer-top,.drawer-bottom{left:0;width:100%!important;height:auto;min-height:150px}.drawer-right{right:0;transform:translate(100%);opacity:0}.drawer-left{left:0;transform:translate(-100%);opacity:0}.drawer-top{top:0;transform:translateY(-100%);opacity:0}.drawer-bottom{bottom:0;transform:translateY(100%);opacity:0}.drawer-right.drawer-small,.drawer-left.drawer-small{width:300px}.drawer-right.drawer-medium,.drawer-left.drawer-medium{width:450px}.drawer-right.drawer-large,.drawer-left.drawer-large{width:600px}.drawer-top.drawer-small,.drawer-bottom.drawer-small{max-height:30vh}.drawer-top.drawer-medium,.drawer-bottom.drawer-medium{max-height:50vh}.drawer-top.drawer-large,.drawer-bottom.drawer-large{max-height:80vh}@keyframes fadeInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}@keyframes fadeInTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes fadeOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-100%)}}@keyframes fadeOutTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}@keyframes fadeOutBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}.drawer-open.drawer-right{animation:fadeInRight .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-left{animation:fadeInLeft .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-top{animation:fadeInTop .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-open.drawer-bottom{animation:fadeInBottom .5s cubic-bezier(.16,1,.3,1) forwards;opacity:1}.drawer-closing.drawer-right{animation:fadeOutRight .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-left{animation:fadeOutLeft .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-top{animation:fadeOutTop .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-closing.drawer-bottom{animation:fadeOutBottom .5s cubic-bezier(.16,1,.3,1) forwards;will-change:transform,opacity}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 15px;position:relative}.drawer-header:after{content:"";position:absolute;left:24px;right:24px;width:calc(100% - 48px);bottom:0;height:1px;background-color:#e0e0e0}.drawer-title{margin:0;width:565px;height:24px;font-size:16px;font-weight:700;line-height:24px;color:#00b6ff;text-align:left;padding-right:20px;flex:1;letter-spacing:0%}.drawer-close{background:none;border:none;font-size:1.25rem;cursor:pointer;color:#1c1c1c;padding:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;z-index:10;opacity:1;transition:opacity .2s ease}.drawer-close:hover{color:#333}.drawer-content{padding:20px;overflow-y:auto;flex:1}.drawer-content h3,.drawer-content .section-title{margin:0 0 15px;font-size:1rem;font-weight:600;color:#333}.drawer-field-label{display:block;margin-bottom:5px;font-size:.875rem;font-weight:500;color:#333}
|