:root { /*** base text size */ --base-text-size: 16px; /*** base component size (buttons, inputs) */ --base-element-height: 40px; /*** default minimum grid column width */ --min-column-width: 360px; interpolate-size: allow-keywords; /* Panel default config */ --panel-header-height: 64px; --panel-footer-height: 56px; /* Panel size modifiers */ --panel-sm: 46px; --panel-md: 56px; --panel-lg: 64px; --panel-xl: 72px; /*** L I G H T T H E M E */ /* text colors */ --foreground-1: var(--neutral-900); --foreground-2: var(--neutral-700); --foreground-3: var(--neutral-400); --text-primary: #111827; --text-secondary: #374151; --text-tertiary: #9ca3af; --text-muted: #6b7280; /* page background color */ --background-1: #f9f8fa; --background-2: #f4f4f4; --background-3: #f3f4f6; /* card/container background */ --surface: #fff; /* input background */ --input-background: #f9fafb; --border-color: #d1d5db; --separator-background: #e5e7eb; /*** Semantic Colors */ --primary: var(--indigo-600); --danger: var(--red-500); --success: var(--green-500); --warning: var(--yellow-500); --info: var(--cyan-400); --accent-color: var(--indigo-500); --lightgray: oklch(0.99 0 0 / 1); --darkgray: oklch(0.21 0.03 264.94); --border-color: #f3f5f5; --separator-color: #f1f5f9; /* --muted:lightgray; */ /* input state */ /* --disabled:; */ /* --readonly:; */ /* --active:; */ /* --focused:; */ /* --hovered:; */ /* DARK MODE THEME */ --theme-background-1: var(--gray-12); --theme-background-2: var(--gray-11); --theme-background-3: var(--gray-10); --theme-box-shadow: 0px 0px 1px 2px oklch(0 0 0); /* LIGHT MODE THEME */ --theme-background-1: var(--gray-12); --theme-background-2: var(--gray-11); --theme-background-3: var(--gray-10); --theme-box-shadow: 0px 0px 1px 2px oklch(0 0 0); /* ================================================================================================ SIZING ================================================================================================ */ /* LETTER SPACING */ --font-letterspacing-0: -.05em; --font-letterspacing-1: .025em; --font-letterspacing-2: .050em; --font-letterspacing-3: .075em; --font-letterspacing-4: .150em; --font-letterspacing-5: .500em; --font-letterspacing-6: .750em; --font-letterspacing-7: 1em; /* LINE-HEIGHTS */ --font-lineheight-00: .95; --font-lineheight-0: 1.1; --font-lineheight-1: 1.25; --font-lineheight-2: 1.375; --font-lineheight-3: 1.5; --font-lineheight-4: 1.75; --font-lineheight-5: 2; /* FONT SIZES */ --font-size-00: .5rem; --font-size-0: .75rem; --font-size-1: 1rem; --font-size-2: 1.1rem; --font-size-3: 1.25rem; --font-size-4: 1.5rem; --font-size-5: 2rem; --font-size-6: 2.5rem; --font-size-7: 3rem; --font-size-8: 3.5rem; /* FLUID FONT SIZES */ --font-size-fluid-0: clamp(.75rem, 2vw, 1rem); --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem); --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem); --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem); /* FLUID SIZES */ --size-fluid-1: clamp(.5rem, 1vw, 1rem); --size-fluid-2: clamp(1rem, 2vw, 1.5rem); --size-fluid-3: clamp(1.5rem, 3vw, 2rem); --size-fluid-4: clamp(2rem, 4vw, 3rem); --size-fluid-5: clamp(4rem, 5vw, 5rem); --size-fluid-6: clamp(5rem, 7vw, 7.5rem); --size-fluid-7: clamp(7.5rem, 10vw, 10rem); --size-fluid-8: clamp(10rem, 20vw, 15rem); --size-fluid-9: clamp(15rem, 30vw, 20rem); --size-fluid-10: clamp(20rem, 40vw, 30rem); /* ================================================================================================ THEMES ================================================================================================ */ /* LIGHT THEME */ --brand-light: var(--orange-06); --text-1-light: var(--gray-08); --text-2-light: var(--gray-07); --surface-1-light: var(--gray-00); --surface-2-light: var(--gray-01); --surface-3-light: var(--gray-02); --surface-4-light: var(--gray-03); /* DARK THEME */ --brand-dark: var(--orange-03); --text-1-dark: var(--gray-03); --text-2-dark: var(--gray-05); --surface-1-dark: var(--gray-12); --surface-2-dark: var(--gray-11); --surface-3-dark: var(--gray-10); --surface-4-dark: var(--gray-09); /* ================================================================================================ BOX SHADOWS ================================================================================================ */ --shadow-color:220 3% 15%; --shadow-strength: 1%; --shadow-strength-3: calc(var(--shadow-strength) + 2%); --shadow-strength-4: calc(var(--shadow-strength) + 3%); --shadow-strength-5: calc(var(--shadow-strength) + 4%); --shadow-strength-6: calc(var(--shadow-strength) + 5%); --shadow-strength-7: calc(var(--shadow-strength) + 6%); --shadow-strength-8: calc(var(--shadow-strength) + 7%); --shadow-strength-10: calc(var(--shadow-strength) + 9%); --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .06667); --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / var(--shadow-strength-10)); --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 7px 14px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)); --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), 0 1px 2px -5px hsl(var(--shadow-color) / var(--shadow-strength-3)), 0 2px 5px -5px hsl(var(--shadow-color) / var(--shadow-strength-5)), 0 4px 12px -5px hsl(var(--shadow-color) / var(--shadow-strength-6)), 0 12px 15px -5px hsl(var(--shadow-color) / var(--shadow-strength-8)); --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), 0 1px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 2px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), 0 9px 9px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), 0 16px 16px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)); --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), 0 2px 1px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 5px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 10px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), 0 20px 20px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), 0 40px 40px -2px hsl(var(--shadow-color) / var(--shadow-strength-8)); --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-3)), 0 3px 2px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 7px 5px -2px hsl(var(--shadow-color) / var(--shadow-strength-4)), 0 12px 10px -2px hsl(var(--shadow-color) / var(--shadow-strength-5)), 0 22px 18px -2px hsl(var(--shadow-color) / var(--shadow-strength-6)), 0 41px 33px -2px hsl(var(--shadow-color) / var(--shadow-strength-7)), 0 100px 80px -2px hsl(var(--shadow-color) / var(--shadow-strength-8)); --inner-shadow-1: inset 0 0 0 1px hsl(var(--shadow-color) / var(--shadow-strength-10)); --inner-shadow-2: inset 0 1px 2px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); --inner-shadow-3: inset 0 1px 4px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); --inner-shadow-4: inset 0 2px 8px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); --inner-shadow-5: inset 0 2px 14px 0 hsl(var(--shadow-color) / var(--shadow-strength-10)), var(--inner-shadow-highlight); /* ================================================================================================ EASING ================================================================================================ */ /* Sample Usage */ /* element { animation: 2s ease 0s infinite normal none running ping-pong; animation-timing-function: var(--ease-1); } */ --animation-fade-in: fade-in .5s var(--ease-3); --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3); --animation-fade-out: fade-out .5s var(--ease-3); --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3); --animation-scale-up: scale-up .5s var(--ease-3); --animation-scale-down: scale-down .5s var(--ease-3); --animation-slide-out-up: slide-out-up .5s var(--ease-3); --animation-slide-out-down: slide-out-down .5s var(--ease-3); --animation-slide-out-right: slide-out-right .5s var(--ease-3); --animation-slide-out-left: slide-out-left .5s var(--ease-3); --animation-slide-in-up: slide-in-up .5s var(--ease-3); --animation-slide-in-down: slide-in-down .5s var(--ease-3); --animation-slide-in-right: slide-in-right .5s var(--ease-3); --animation-slide-in-left: slide-in-left .5s var(--ease-3); --animation-shake-x: shake-x .75s var(--ease-out-5); --animation-shake-y: shake-y .75s var(--ease-out-5); --animation-shake-z: shake-z 1s var(--ease-in-out-3); --animation-spin: spin 2s linear infinite; --animation-ping: ping 5s var(--ease-out-3) infinite; --animation-blink: blink 1s var(--ease-out-3) infinite; --animation-float: float 3s var(--ease-in-out-3) infinite; --animation-bounce: bounce 2s var(--ease-squish-2) infinite; --animation-pulse: pulse 2s var(--ease-out-3) infinite; --ease-1: cubic-bezier(.25, 0, .5, 1); --ease-2: cubic-bezier(.25, 0, .4, 1); --ease-3: cubic-bezier(.25, 0, .3, 1); --ease-4: cubic-bezier(.25, 0, .2, 1); --ease-5: cubic-bezier(.25, 0, .1, 1); --ease-in-1: cubic-bezier(.25, 0, 1, 1); --ease-in-2: cubic-bezier(.5, 0, 1, 1); --ease-in-3: cubic-bezier(.7, 0, 1, 1); --ease-in-4: cubic-bezier(.9, 0, 1, 1); --ease-in-5: cubic-bezier(1, 0, 1, 1); --ease-out-1: cubic-bezier(0, 0, .75, 1); --ease-out-2: cubic-bezier(0, 0, .5, 1); --ease-out-3: cubic-bezier(0, 0, .3, 1); --ease-out-4: cubic-bezier(0, 0, .1, 1); --ease-out-5: cubic-bezier(0, 0, 0, 1); --ease-in-out-1: cubic-bezier(.1, 0, .9, 1); --ease-in-out-2: cubic-bezier(.3, 0, .7, 1); --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-in-out-4: cubic-bezier(.7, 0, .3, 1); --ease-in-out-5: cubic-bezier(.9, 0, .1, 1); --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25); --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25); --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25); --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25); --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25); --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1); --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1); --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1); --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1); --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1); --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5); --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5); --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5); --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5); --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5); --ease-step-1: steps(2); --ease-step-2: steps(3); --ease-step-3: steps(4); --ease-step-4: steps(7); --ease-step-5: steps(10); --ease-elastic-1: var(--ease-elastic-out-1); --ease-elastic-2: var(--ease-elastic-out-2); --ease-elastic-3: var(--ease-elastic-out-3); --ease-elastic-4: var(--ease-elastic-out-4); --ease-elastic-5: var(--ease-elastic-out-5); --ease-squish-1: var(--ease-elastic-in-out-1); --ease-squish-2: var(--ease-elastic-in-out-2); --ease-squish-3: var(--ease-elastic-in-out-3); --ease-squish-4: var(--ease-elastic-in-out-4); --ease-squish-5: var(--ease-elastic-in-out-5); --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001); --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1); --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1); --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1); --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1); --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1); --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1); --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1); --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1); --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1); --ease-circ-in: cubic-bezier(.6, .04, .98, .335); --ease-circ-in-out: cubic-bezier(.785, .135, .15, .86); --ease-circ-out: cubic-bezier(.075, .82, .165, 1); --ease-cubic-in: cubic-bezier(.55, .055, .675, .19); --ease-cubic-in-out: cubic-bezier(.645, .045, .355, 1); --ease-cubic-out: cubic-bezier(.215, .61, .355, 1); --ease-expo-in: cubic-bezier(.95, .05, .795, .035); --ease-expo-in-out: cubic-bezier(1, 0, 0, 1); --ease-expo-out: cubic-bezier(.19, 1, .22, 1); --ease-quad-in: cubic-bezier(.55, .085, .68, .53); --ease-quad-in-out: cubic-bezier(.455, .03, .515, .955); --ease-quad-out: cubic-bezier(.25, .46, .45, .94); --ease-quart-in: cubic-bezier(.895, .03, .685, .22); --ease-quart-in-out: cubic-bezier(.77, 0, .175, 1); --ease-quart-out: cubic-bezier(.165, .84, .44, 1); --ease-quint-in: cubic-bezier(.755, .05, .855, .06); --ease-quint-in-out: cubic-bezier(.86, 0, .07, 1); --ease-quint-out: cubic-bezier(.23, 1, .32, 1); --ease-sine-in: cubic-bezier(.47, 0, .745, .715); --ease-sine-in-out: cubic-bezier(.445, .05, .55, .95); --ease-sine-out: cubic-bezier(.39, .575, .565, 1); } @layer components { /*** F O N T S */ @font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/fonts/RobotoFlex.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; } body { font-family: 'Inter'; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 16px; margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; background-color: var(--background-1); color: var(--foreground-1); overflow: clip; } button, input, dialog { border:0; } .font-inter {font-family:'Inter';} .font-roboto {font-family:'Roboto';} .font-jetbrains-mono {font-family:'JetBrains Mono';} /*** C A T A L O G */ /* .catalog-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1.5rem; } .filters { display: flex; gap: 1rem; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; } */ /*** C O N T A I N E R S */ /* FLEX COLUMN PANEL */ .vx-panel { display: flex; flex-direction: column; block-size: 100%; } .panel-header { height: var(--panel-header-height); position: sticky; top: 0; align-content: center; overflow: hidden; padding-inline: 6px; } .panel-content { flex-grow: 1; padding-inline: 6px; } .panel-footer { /*min-height: var(--panel-footer-height);*/ height: 60px; position: sticky; bottom: 0; flex-shrink: 0; overflow: hidden; display: grid; align-content: center; /* background: var(--blue-100); */ border-top: 1px solid oklch(0.9 0 0 / 1); } /* Fixed size (not a % of the sidebar's width) so the logo stays legible instead of shrinking away to nothing once the sidebar collapses to --sidebar-width-collapsed. */ .panel-footer .powered-logo { width: 28px; height: auto; display: block; } /* Collapsed sidebar has no room for both the "Powered By" label and the logo - the label used to wrap onto two lines and squeeze the logo down to a few px. Drop the label and keep just the logo, centered and fully visible. */ .app-root.sidebar-collapsed .panel-footer .powered-label { display: none; } .app-root.sidebar-collapsed .panel-footer .powered-logo { width: 22px; } .surface-1 { background-color: var(--surface-1); color: var(--text-2); } .surface-2 { background-color: var(--surface-2); color: var(--text-2); } .surface-3 { background-color: var(--surface-3); color: var(--text-1); } .surface-4 { background-color: var(--surface-4); color: var(--text-1); } /* ================================================================================================ 12 COLUMN GRID PANEL ================================================================================================ */ .vx-grid-panel { display: grid; grid-template-columns: repeat(12, minmax(auto, 1fr)); } .vx-grid-panel > * {grid-column: span 12;} .col-12 {grid-column: span 12;} .col-11 {grid-column: span 11;} .col-10 {grid-column: span 10;} .col-9 {grid-column: span 9;} .col-8 {grid-column: span 8;} .col-7 {grid-column: span 7;} .col-6 {grid-column: span 6;} .col-5 {grid-column: span 5;} .col-4 {grid-column: span 4;} .col-3 {grid-column: span 3;} .col-2 {grid-column: span 2;} .col-1 {grid-column: span 1;} /*** G R O U P B O X */ .vx-groupbox { position: relative; isolation: isolate; border: 1px solid var(--gray-01); border-radius: 8px; padding: 16px; } .vx-groupbox .group-title { position: absolute; z-index: 2; font-size: var(--body-xxs); top: -9px; left: 4px; background: #fff; padding-inline: 12px; border: 1px solid #fff; color: var(--gray-400); text-transform: uppercase; } /*** L I S T */ .vx-list { margin: 4px; display: flex; flex-direction: column; gap: 2px; } .vx-list > li { border-radius: 8px; overflow: hidden; transition: background 0.025s ease; /*color: var(--foreground-2);*/ } .vx-list > li:not(.active):hover { background-color: var(--indigo-050); color: #fff; } .vx-list > li.active { background: var(--indigo-400); color: var(--indigo-10); } .vx-list > li.active .vx-navlink { color: #fff; } /*** L I N K S */ .vx-navlink { --padding: 12px 14px; display: inline-flex; text-decoration: none; color: inherit; padding: var(--padding); gap: 16px; width: -webkit-fill-available; transition: color 0.025s ease; } .vx-list > li:not(.active):hover .vx-navlink { color: var(--indigo-900); } .vx-navlink > * { margin: 0; line-height: 1; margin-block: auto; stroke: none; } .vx-navlink .link-text { flex-grow: 1; font-family: inherit; font-weight: 600; font-size: var(--body-xs); letter-spacing: 0.025rem; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; color: currentColor; } .vx-list li > * { display: grid; grid-template-columns: 24px 1fr; width: fit-content; padding-inline: 12px; gap: 16px; outline: 1px dashed; min-width: -webkit-fill-available; /* Safari has no unprefixed "stretch" */ min-width: -moz-available; min-width: stretch; text-align: left; } .icon { fill: currentColor; /*stroke: currentColor;*/ width: 20px; height: 20px; /* stroke-width: 0.1; */ stroke-width: 0; flex-shrink: 0; /* stroke: none; */ pointer-events: none; } /* ================================================================================================ Cards ================================================================================================ */ @scope (.vx-card) { --card-xxs: 0.25rem; --card-xs: 0.5rem; --card-sm: 0.75rem; --card-md: 1rem; --card-lg: 1.5rem; --card-xl: 1.75rem; --card-xxl: 2rem; --card-padding: var(--card-md); background: #ffffff; border-radius: 12px; padding: 0.75rem; padding: 1rem; padding: 1.5rem; padding: var(--card-padding); margin-bottom: 2rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f1f5f9; .card-header {height: var(--base-element-height);} .card-title {font-weight: 600;} .card-body {} .card-footer {height: var(--base-element-height);} .vx-card-profile { display: flex; background: var(--indigo-500); padding: 0.875rem; border-radius: 24px; corner-shape: round; color: #fff; gap: 1rem; } &.card-xxs {--card-padding: var(--card-xxs);} &.card-xs {--card-padding: var(--card-xs);} &.card-sm {--card-padding: var(--card-sm);} &.card-md {--card-padding: var(--card-md);} &.card-lg {--card-padding: var(--card-lg);} &.card-xl {--card-padding: var(--card-xl);} &.card-xxl {--card-padding: var(--card-xxl);} } /*.vx-card { --card-xxs: 0.25rem; --card-xs: 0.5rem; --card-sm: 0.75rem; --card-md: 1rem; --card-lg: 1.5rem; --card-xl: 1.75rem; --card-xxl: 2rem; --card-padding: var(--card-md); background: #ffffff; border-radius: 12px; padding: 0.75rem; padding: 1rem; padding: 1.5rem; padding: var(--card-padding); margin-bottom: 2rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); border: 1px solid #f1f5f9; }*/ /*.card-xxs {--card-width: 460px;}*/ /*.card-xs {--card-width: 640px;}*/ /*.card-sm {--card-width: 720px;}*/ /*.card-md {--card-width: 1024px;}*/ /*.card-lg {--card-width: 1440px;}*/ /*.card-xl {--card-width: 1980px;}*/ /* ================================================================================================ COMPONENT: Button ================================================================================================ */ .vx-button { --button-border-radius: 10px; --button-background: transparent; --button-color: #1e293b; border: 0; outline: 0; box-shadow: none; padding: 8px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; min-width: 40px; height: var(--base-element-height); background-color: var(--button-background); color: var(--button-color); border-radius: var(--button-border-radius); min-width: auto; } /*- base default style (solid/filled) */ .vx-button:focus-visible { outline: 1px solid rgb(0 0 0 / 0.16); outline-offset: 0px; } /*- hover state */ .vx-button:hover { /* change background lighter or darker relative to its current background color */ } .vx-button .button-text { white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; padding-inline: 8px; } .vx-button:has(>svg.icon) .button-text { padding-inline: 4px 8px; } .vx-button .btn-flat { border-radius: 0; } .vx-button > span { position: relative; isolation: isolate; } .vx-button > span::after { content: ''; position: absolute; } .vx-button > span.badge-dot::after { content: ''; position: absolute; } svg.icon { width: 24px; height: 24px; fill: currentColor; stroke: currentColor; stroke-width: 0; display: block; pointer-events: none; user-select: none; transition: color 0.2s ease; } /* icon sizing */ .icon-xxs { width: 16px!important; height: 16px!important; } .icon-xs { width: 18px!important; height: 18px!important; } .icon-sm { width: 20px!important; height: 20px!important; } .icon-md { width: 24px!important; height: 24px!important; } .icon-lg { width: 32px!important; height: 32px!important; } .icon-xl { width: 46px!important; height: 46px!important; } .icon-xxl { width: 64px!important; height: 64px!important; } /*- variants */ /* light theme: */ .btn-solid { box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgb(27 31 35 / 8%) 0px 0px 0px 1px; box-shadow: rgb(67 71 85 / 8%) 0 0 0 1px, rgba(90, 125, 188, 0.05) 0px 0 0 2px } /* dark theme: */ /*.btn-solid {box-shadow: 0px 0px 1px 2px oklch(0 0 0);}*/ .btn-outlined { box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgb(27 31 35 / 8%) 0px 0px 0px 1px; } .btn-ghost {} /* color modifiers */ .btn-red {--background-color: var(--red-500);--color: var(--red-050);} .btn-red:hover {--background-color: var(--red-600);--color: var(--red-050);} .btn-rose {--background-color: var(--rose-500);--color: var(--rose-050);} .btn-rose:hover {--background-color: var(--rose-600);--color: var(--rose-050);} .btn-pink {--background-color: var(--pink-500);--color: var(--pink-050);} .btn-pink:hover {--background-color: var(--pink-600);--color: var(--pink-050);} .btn-orange {--background-color: var(--orange-500);--color: var(--orange-050);} .btn-orange:hover {--background-color: var(--orange-600);--color: var(--orange-050);} .btn-amber {--background-color: var(--amber-400);--color: var(--amber-050);} .btn-amber:hover {--background-color: var(--amber-500);--color: var(--amber-050);} .btn-yellow {--background-color: var(--yellow-400);--color: var(--yellow-050);} .btn-yellow:hover {--background-color: var(--yellow-500);--color: var(--yellow-050);} .btn-green {--background-color: var(--green-500);--color: var(--green-050);} .btn-green:hover {--background-color: var(--green-600);--color: var(--green-050);} .btn-jungle {--background-color: var(--jungle-500);--color: var(--jungle-050);} .btn-jungle:hover {--background-color: var(--jungle-600);--color: var(--jungle-050);} .btn-blue {--background-color: var(--blue-500);--color: var(--blue-050);} .btn-blue:hover {--background-color: var(--blue-600);--color: var(--blue-050);} .btn-sky {--background-color: var(--sky-500);--color: var(--sky-050);} .btn-sky:hover {--background-color: var(--sky-600);--color: var(--sky-050);} .btn-cyan {--background-color: var(--cyan-400);--color: var(--cyan-050);} .btn-cyan:hover {--background-color: var(--cyan-500);--color: var(--cyan-050);} .btn-indigo {--background-color: var(--indigo-500);--color: var(--indigo-050);} .btn-indigo:hover {--background-color: var(--indigo-600);--color: var(--indigo-050);} .btn-violet {--background-color: var(--violet-500);--color: var(--violet-050);} .btn-violet:hover {--background-color: var(--violet-600);--color: var(--violet-050);} .btn-purple {--background-color: var(--purple-500);--color: var(--purple-050);} .btn-purple:hover {--background-color: var(--purple-600);--color: var(--purple-050);} .btn-fuchsia {--background-color: var(--fuchsia-500);--color: var(--fuchsia-050);} .btn-fuchsia:hover {--background-color: var(--fuchsia-600);--color: var(--fuchsia-050);} .btn-teal {--background-color: var(--teal-500);--color: var(--teal-050);} .btn-teal:hover {--background-color: var(--teal-600);--color: var(--teal-050);} .btn-lime {--background-color: var(--lime-500);--color: var(--lime-050);} .btn-lime:hover {--background-color: var(--lime-500);--color: var(--lime-050);} .btn-gray {--background-color: var(--gray-500);--color: var(--gray-050);} .btn-gray:hover {--background-color: var(--gray-600);--color: var(--gray-050);} .btn-neutral {--background-color: var(--neutral-500);--color: var(--neutral-050);} .btn-neutral:hover {--background-color: var(--neutral-600);--color: var(--neutral-050);} .btn-zinc {--background-color: var(--zinc-500);--color: var(--zinc-050);} .btn-zinc:hover {--background-color: var(--zinc-600);--color: var(--zinc-050);} .btn-stone {--background-color: var(--stone-500);--color: var(--stone-050);} .btn-stone:hover {--background-color: var(--stone-600);--color: var(--stone-050);} .btn-slate {--background-color: var(--slate-500);--color: var(--slate-050);} .btn-slate:hover {--background-color: var(--slate-600);--color: var(--slate-050);} .btn-black {--background-color: var(--black-500);--color: var(--black-050);} .btn-black:hover {--background-color: var(--black-600);--color: var(--black-050);} .btn-white {--background-color: var(--white-500);--color: var(--white-050);} .btn-white:hover {--background-color: var(--white-600);--color: var(--white-050);} .btn-primary {--button-background: var(--indigo-500);--button-color: var(--indigo-050);} .btn-primary:hover {--button-background: var(--indigo-600);} .btn-secondary {--button-background: #fcfcfc;} .btn-secondary:hover {--button-background: #fff;} .btn-dark {--button-background: var(--gray-700);} .btn-dark:hover {--button-background: var(--gray-900);} .btn-success {--button-background: var(--green-06);} .btn-success:hover {--button-background: var(--green-07);} .btn-danger {--button-background: var(--red-400);} .btn-danger:hover {--button-background: var(--red-500);} .bg-warning {--button-background:var(--amber-400);} .bg-warning:hover {--button-background:var(--amber-500);} .bg-info {--button-background:var(--cyan-300);} .bg-info:hover {--button-background:var(--cyan-400);} /* states */ [disabled] { color: var(--gray-02)!important; pointer-events: none; } [readonly] { color: var(--gray-04)!important; pointer-events: none; } .vx-button:not([disabled]):focus-visible { outline: 2px solid var(--indigo-02); outline-offset: 2px; } @scope(.glossy-pill) { --shadow-color: var(--gray-500); --background-color: var(--gray-900); --color: var(--gray-400); box-shadow: inset 0px 0px 4px 1px var(--shadow-color); background: var(--background-color); color: var(--color); font-size: var(--body-xxs); font-weight: 500; border-radius: 24px; display: flex; flex-direction: row; align-items: center; justify-content: center; padding-block: calc(var(--spacing-base2) * 2); padding-inline: calc(var(--spacing-base2) * 8); /* DARK THEME */ &.pill-red { --shadow-color: var(--red-500); --background-color: var(--red-900); --color: var(--red-400); } /* LIGHT THEME */ /*&.pill-red { --shadow-color: var(--red-200); --background-color: var(--red-050); --color: var(--red-700); }*/ &.pill-rose { --shadow-color: var(--rose-500); --background-color: var(--rose-900); --color: var(--rose-400); } &.pill-pink { --shadow-color: var(--pink-500); --background-color: var(--pink-900); --color: var(--pink-400); } &.pill-orange { --shadow-color: var(--orange-500); --background-color: var(--orange-900); --color: var(--orange-400); } &.pill-amber { --shadow-color: var(--amber-500); --background-color: var(--amber-900); --color: var(--amber-400); } &.pill-yellow { --shadow-color: var(--yellow-500); --background-color: var(--yellow-900); --color: var(--yellow-400); } &.pill-green { --shadow-color: var(--green-500); --background-color: var(--green-900); --color: var(--green-400); } .pill-jungle { --shadow-color: var(--jungle-05); --background-color: var(--jungle-09); --color: var(--jungle-04); } &.pill-blue { --shadow-color: var(--blue-500); --background-color: var(--blue-900); --color: var(--blue-400); } &.pill-sky { --shadow-color: var(--sky-500); --background-color: var(--sky-900); --color: var(--sky-400); } &.pill-cyan { --shadow-color: var(--cyan-500); --background-color: var(--cyan-900); --color: var(--cyan-400); } &.pill-indigo { --shadow-color: var(--indigo-500); --background-color: var(--indigo-900); --color: var(--indigo-400); } .pill-violet { --shadow-color: var(--violet-500); --background-color: var(--violet-900); --color: var(--violet-400); } &.pill-purple { --shadow-color: var(--purple-500); --background-color: var(--purple-900); --color: var(--purple-400); } &.pill-fuchsia { --shadow-color: var(--fuchsia-500); --background-color: var(--fuchsia-900); --color: var(--fuchsia-400); } .pill-teal { --shadow-color: var(--teal-500); --background-color: var(--teal-900); --color: var(--teal-400); } &.pill-lime { --shadow-color: var(--lime-500); --background-color: var(--lime-900); --color: var(--lime-400); } &.pill-gray { --shadow-color: var(--gray-500); --background-color: var(--gray-900); --color: var(--gray-400); } .pill-neutral { --shadow-color: var(--neutral-500); --background-color: var(--neutral-900); --color: var(--neutral-400); } &.pill-zinc { --shadow-color: var(--zinc-500); --background-color: var(--zinc-900); --color: var(--zinc-400); } &.pill-stone { --shadow-color: var(--stone-500); --background-color: var(--stone-900); --color: var(--stone-400); } .pill-slate { --shadow-color: var(--slate-500); --background-color: var(--slate-900); --color: var(--slate-400); } &.pill-black { --shadow-color: oklch(from rgb(0 0 0) 0.5 c h); --background-color: oklch(from rgb(0 0 0) 0.1 c h); --color: oklch(from rgb(0 0 0) 0.8 c h); } &.pill-white { --shadow-color: oklch(0.9 0 0); --background-color: oklch(0.5 0 0 / 1); --color: oklch(0.8 0 0); } } /* ================================================================================================ COMPONENT: avatar ================================================================================================ */ .avatar { --avatar-size: 34px; --avatar-font-size: 1rem; display: grid; grid-template-columns: var(--avatar-size) 1fr; gap: 0.5rem; margin: 0; margin-inline: auto; height: var(--avatar-size); } .avatar img { border-radius: 50%; display: block; background-position: center; overflow: hidden; width: 100%; height: 100%; } .avatar figcaption { font-size: var(--avatar-font-size); font-weight: 500; line-height: 1.2; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; align-content: center; } .avatar figcaption p { margin: 0; flex-grow: 1; } /* ** avatar placement utilities */ /*- Place the name before the image */ .avatar.caption-left { flex-direction: row-reverse; } /*- Places the name after the image (default) */ .avatar.caption-right { flex-direction: row; } /*- Only show the image */ .avatar.caption-none figcaption { display: none; } /* ** avatar sizing utilities */ /*- Small Avatar */ .avatar.avatar-sm { --avatar-size: 2rem; --avatar-font-size: 0.875rem; gap: 0.5rem; } /*- Medium Avatar (default) */ .avatar.avatar-md { --avatar-size: 3rem; --avatar-font-size: 1rem; } /*- Large Avatar */ .avatar.avatar-lg { --avatar-size: 4.5rem; --avatar-font-size: 1.25rem; gap: 1rem; } /* ================================================================================================ COMPONENT: navbar ================================================================================================ */ @layer navbar { .vx-navbar { position: sticky; top: 0; display: flex; justify-content: flex-end; align-items:center; height: var(--panel-header-height); box-shadow: inset 0 -1px 0 #f3f4f6; z-index: 999; flex-shrink: 0; } .vx-navbar .vx-button, .vx-profile .vx-button { background-color: transparent; /* color: var(--foreground-2); */ color: var(--zinc-500); } .vx-navbar .vx-button:hover, .vx-profile .vx-button:hover { color: var(--foreground-1); } } /* ================================================================================================ COMPONENT: sidebar ================================================================================================ */ @layer sidebar { .vx-sidebartoggle { --button-padding: 4px; --corner-radius: 16px; --gap: 8px; display: inline-flex; justify-content: center; gap: var(--gap); padding: var(--button-padding); border-radius: var(--corner-radius); font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border-color); outline: 1px solid var(--border-color); outline-offset: -1px; cursor: pointer; /* height: var(--panel-header-height); */ top: 13px; right: 8px; background-color: var(--background-1); color: var(--foreground-1); align-items: center; height: auto; transition: all 0.15s ease-in-out; z-index: 999; position: absolute; top: 16px; right: -10px; background: #fff; } .vx-sidebartoggle:hover { background-color: var(--neutral-100); /* box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.13 -0.00404584 -0.0277062 / 0.08) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; */ } .vx-sidebar-panel { display: flex; flex-direction: column; block-size: 100%; /* --sidebar-width-collapsed: 60px; */ /* --sidebar-width-expanded: 248px; */ /* size */ /* --sidebar-header-height: var(--panel-header-height); */ /* --min-grid-col-size: var(--sidebar-width-expanded); */ /* background */ /* --sidebar-background: #fff; --sidebar-border-color: var(--border-color); display: flex; flex-direction: column; width: var(--sidebar-width-expanded); min-height: 720px; background-color: var(--sidebar-background); border: 1px solid var(--sidebar-border-color); */ } .sidebar_header { /* display: flex; height: var(--sidebar-header-height); border-top-right-radius: inherit;bod border-top-left-radius: inherit;*/ border-bottom: 1px solid var(--border-color); } .sidebar_content { /* flex-grow: 1; display: flex; flex-direction: column; padding: 8px; */ } .sidebar_footer { /* border-bottom-left-radius: inherit; border-bottom-right-radius: inherit;*/ border-top: 1px solid var(--border-color); } } /* ================================================================================================ FORM ELEMENTS ================================================================================================ */ ::placeholder { color: rgb(0 0 0 / 0.25); } input[type="text"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="email"], input[type="phone"], select, textarea { color: inherit; font-family: inherit; font-size: inherit; font-weight: normal; letter-spacing: normal; width: 100%; max-width: 100%; line-height: 1; background-color: transparent; border: 0; outline: 0; } fieldset { display: flex; flex-direction: column; gap: 1rem; } .field-group { min-height: var(--base-element-height); } .form-group { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .form-summary { display: flex; flex-direction: column; gap: 4px; } label {color: var(--gray-05);} /* ================================================================================================ COMPONENT: searchbox ================================================================================================ */ @scope (.vx-searchbox) { --min-input-width: 200px; display: inline-flex; align-self: center; flex-grow: 1; background-color: rgb(0 0 0 / 0.01); background-color: #fff; overflow: hidden; border-radius: 10px; padding: 8px; font-family: inherit; font-size: 1rem; font-weight: 400; height: var(--base-element-height); width:auto; min-width: var(--min-input-widt); box-shadow: rgb(0 0 0 / 1%) 0px 0px 3px 1px inset, rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; svg.icon { color: rgb(0 0 0 / 0.25); } &:hover { background-color: rgb(0 0 0 / 0.03); } &:focus-within { outline: 2px solid var(--indigo-02); background-color: #fff; } } /* ================================================================================================ COMPONENT: textbox ================================================================================================ */ @scope (.vx-textbox) { display: inline-flex; align-self: center; flex-grow: 1; color: inherit; background-color: #fcfcfc; overflow: hidden; border-radius: 10px; padding: 8px; font-family: inherit; font-size: 1rem; font-weight: 400; height: var(--base-element-height); box-shadow: rgb(0 0 0 / 1%) 0px 0px 3px 1px inset, rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; & svg.icon { /* color: rgb(0 0 0 / 0.25);*/ } &:hover { background-color: #fff; } &:focus-within { /*outline: 1px solid rgb(0 0 0 / 0.16);*/ background-color: #fff; } } /* ================================================================================================ COMPONENT: textarea ================================================================================================ */ .vx-textarea { display: inline-flex; align-self: center; flex-grow: 1; background-color: #fcfcfc; overflow: hidden; border-radius: 10px; padding: 8px; font-family: inherit; font-size: 1rem; font-weight: 400; /*height: var(--base-element-height);*/ box-shadow: rgb(0 0 0 / 1%) 0px 0px 3px 1px inset, rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; resize: block; min-height: 4ch; height: 8ch; max-height: 15ch; } input.vx-textbox, .vx-textarea { /*padding: 6px 8px;*/ /*color: inherit;*/ } input.vx-textbox:hover, .vx-textarea:hover { background-color: var(--indigo-00); } .vx-textarea:focus, .vx-textbox:focus { outline: 2px solid var(--indigo-02); background-color: #fff; } input[type="date"] { position: relative; display: inline-flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding-right: 40px!important; } input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; cursor: pointer; } /* ================================================================================================ COMPONENT: dropdownlist ================================================================================================ */ @scope (.vx-dropdownlist) { --min-height: 216px; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: normal; display: flex; align-items: center; gap: 8px; input { display: none; } .dropdown-wrapper { anchor-name: --dropdown-wrapper; position: relative; border-radius: 10px; overflow: hidden; background-color: #fcfcfc; box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgb(27 31 35 / 8%) 0px 0px 0px 1px; box-shadow: rgb(67 71 85 / 8%) 0 0 0 1px, rgba(90, 125, 188, 0.05) 0px 0 0 2px; /* transition: background-color 0.3s ease; */ } .dropdown-wrapper:hover { background-color: #fff; } .dropdown-wrapper:focus-within { outline: 2px solid var(--indigo-02); background-color: #fff; } .dropdown-title { white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; font-family: inherit; display: flex; align-items: center; gap: 4px; color:var(--gray-04); } .dropdown-button { display: inline-flex; align-items: center; line-height: 1; border: 0; border-radius: inherit; font-family: inherit; height: var(--base-element-height); isolation: isolate; overflow: hidden; cursor: pointer; background-color: transparent; width: 100%; } .dropdown-button .button-text { display: block; align-content: center; font-family: inherit; padding-inline: 12px; border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; font-size: medium; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; width: -webkit-fill-available; text-align: left; } .dropdown-button .button-arrow { background: transparent; height: 100%; display: block; border: 0; outline: 0; position: relative; margin-left: auto; min-width: 36px; overflow: hidden; } .dropdown-button .button-arrow svg { width: 18px; height: 18px; display: block; transform: translate(42%, 64%); } .dropdown-menu { position: --dropdown-wrapper; top: calc(anchor(bottom) + 2px); left: anchor(left); right: anchor(right); border: 0; box-shadow: rgb(60 64 67 / 5%) 0px 1px 2px 0px, rgb(60 64 67 / 16%) 0px 2px 6px 2px; border-radius: 8px; list-style: none; overflow: hidden; height: auto; min-height: var(--min-height); width: auto; overflow-y: auto; scrollbar-width: none; height: fit-content; } .dropdown-menu li { width: -webkit-fill-available; position: relative; isolation: isolate; transition: all 0.02s ease; } .dropdown-menu li:has(option[selected]):after { content: ''; inset: 0; /*background: var(--indigo-02);*/ position: absolute; margin-block: auto; display: block; height: 16px; width: 8px; border-radius: 16px; left: -4px; background: var(--cyan-100); } .dropdown-menu li:hover { background-color: var(--indigo-04); color: #fff; } .dropdown-menu li option { display: flex; padding: 8px 14px; user-select: none; border: 0; width: 100%; background: inherit; color: inherit; } .dropdown-menu .menu-item :is(span,p) { user-select: none; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; } #anchor-rowsPerPage { anchor-name: --rowsPerPage; } #anchor-rowsPerPage .dropdown-button { --menu-width: calc(8ch + 18px); width: var(--menu-width); } #anchor-rowsPerPage > .dropdown-menu { width: var(--menu-width); position-anchor: --rowsPerPage; top: calc(anchor(top) + -113px); right: anchor(right); left: anchor(left); height: auto; min-height: fit-content; } /*.dropdown-wrapper#anchor-BillingYears { position: relative; anchor-name: --billingYears; }*/ /*.dropdown-menu#menu-BillingYears { position: absolute; position-anchor: --billingYears; width: -webkit-fill-available; inset: 0; top: calc(anchor(bottom) + 4px); left: anchor(left); bottom: anchor(bottom); right: anchor(right); width:auto; }*/ /*.dropdown-wrapper#monthDescription { position: relative; anchor-name: --monthDescription; }*/ /*.dropdown-menu#popover-MonthDescription { position: absolute; position-anchor: --monthDescription; width: -webkit-fill-available; inset: 0; top: calc(anchor(bottom) + 4px); left: anchor(left); bottom: anchor(bottom); right: anchor(right); width:auto; }*/ /*.dropdown-wrapper#anchor-dueDateYears { position: relative; anchor-name: --dueDateYears; width: auto; min-width: 16ch; }*/ /*.dropdown-menu#menu-dueDateYears { position-anchor: --dueDateYears; top: calc(anchor(top) + 44px); right: anchor(right); bottom: anchor(bottom); left: anchor(left); width: auto; min-height: 216px; height: fit-content; overflow: auto; scrollbar-width: none; overflow-x: clip; }*/ @scope(#frmFees .modal-body) { figure.vx-card-profile { display: grid; grid-template-columns: 64px 1fr; width: 100%; height: 100%; background-color: var(--indigo-600); align-content: center; align-items: center; } } .dropdown-wrapper#monthDescription { position: relative; anchor-name: --monthDescription; } .dropdown-menu#popover-billDescription { position: absolute; position-anchor: --monthDescription; width: -webkit-fill-available; inset: 0; top: calc(anchor(bottom) + 4px); left: anchor(left); bottom: anchor(bottom); right: anchor(right); } } /* ================================================================================================ COMPONENT: radio ================================================================================================ */ .vx-radio { --radio-size: 28px; --radio-inner-circle-color: var(--accent-color); color: black; height: var(--radio-size); position: relative; display: flex; align-items: center; gap: 0.5rem; width: fit-content; cursor: pointer; } /* hide the default radio input */ .vx-radio input[type="radio"] { display: none; } /* the custom radio outer-circle */ span.vx-radio-circle { --circle-size: calc(var(--radio-size) - 8px); position: relative; width: var(--circle-size); aspect-ratio: 1; height: auto; align-content: center; border-radius: 16px; border: 2px solid var(--border-color); background-color: transparent; display: block; } /* the custom radio inner-circle */ span.vx-radio-circle:before { content: ''; position: absolute; inset: 0; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: inherit; margin: auto; background: transparent; } p.vx-radio-text { font-family: 'Roboto',sans-serif; font-size: var(--body-xxs); font-weight: 600; text-transform: capitalize; color: var(--text-muted); letter-spacing: 0.025rem; user-select: none; } /* the custom radio inner-circle when checked */ .vx-radio:has(input:checked) span.vx-radio-circle:before { background: var(--accent-color); height: 8px; width: 8px; color: var(--accent-color); /* color: transparent; */ font-size: var(--body-xxs); top: 0px; left: 0px; /* font-weight: 600; */ /* border: 1px solid red; */ text-align: center; } /* radio size modifier */ .radio-sm { } .radio-md { } .radio-lg { } /* ================================================================================================ COMPONENT: checkbox ================================================================================================ */ .vx-checkbox { --checkbox-size: 28px; color: black; height: var(--checkbox-size); position: relative; display: flex; align-items: center; gap: 0.5rem; width: fit-content; cursor: pointer; } /* hide the default checkbox input */ .vx-checkbox input[type="checkbox"] { display: none; position: absolute; left: -16px; } /* the square that contains the check symbol */ span.vx-checkbox-square { --checkbox-border-radius: 5px; --square-size: 20px; --checkbox-background: var(--zinc-300); --check-color: transparent; position: relative; width: calc(var(--square-size) + 0px); aspect-ratio: 1; /* height: auto; */ display: block; align-content: center; border-radius: var(--checkbox-border-radius); background: var(--checkbox-background); color: var(--check-color); transition: background-color 0.2s ease; } /* the check symbol */ span.vx-checkbox-square:before { --font-size: 16px; content: '\2713'; position: absolute; inset: 0; border-radius: inherit; top: -2px; font-size: var(--font-size); text-align: center; color: inherit; transition: color 0.2s; } .vx-checkbox:has(input:checked) span.vx-checkbox-square { --checkbox-background: var(--accent-color); --check-color: #fff; } /* set the color of the check symbol when input is checked */ .vx-checkbox:has(input:checked) span.vx-checkbox-square:before { /*--checkbox-background: var(--accent-color);*/ /*--check-color: #fff;*/ } /* the checkbox text */ .vx-checkbox-text { font-family: 'Roboto',sans-serif; font-size: var(--body-xxs); font-weight: 600; text-transform: capitalize; color: var(--text-muted); letter-spacing: 0.025rem; user-select: none; } /* ================================================================================================ COMPONENT: radiobutton ================================================================================================ */ .vx-radiobutton { --button-group-border-radius: 10px; --button-group-padding: 1px; --button-group-border-color: #e5e7eb; --button-background-color: #f3f3f3; display: flex; width: fit-content; width: -webkit-fill-available; height: var(--base-element-height); background-color: var(--button-background-color); border-radius: var(--button-group-border-radius); padding: var(--button-group-padding); color: var(--stone-02); gap:2px; padding: 2px; } .vx-radiobutton > label { display: flex; align-items: center; justify-content: center; line-height: 1; position: relative; isolation: isolate; border: 0; outline: 0; padding: 8px 16px; font-family: inherit; font-size: 1rem; font-weight: 500; transition: all 0.2s; min-width: 40px; background-color: inherit; color: inherit; border-radius: calc(var(--button-group-border-radius) - var(--button-group-padding)); user-select: none; cursor: pointer; } .vx-radiobutton > label input[type="radio"] { display: none; } .vx-radiobutton > label:after { content: attr(data-text); } .vx-radiobutton > label:has(input:checked) { background-color: #fff; color: var(--indigo-03); box-shadow: rgb(60 64 67 / 1%) 0px 1px 2px 0px, rgb(60 64 67 / 5%) 0px 1px 3px 1px; /*color: #fff; background: var(--accent-color); outline: 2px solid lch(60 76.25 292.39 / 1);*/ } /* .vx-radiobutton-group { --rb-border-radius: 12px; display: flex; align-self: baseline; width: fit-content; border-radius: var(--rb-border-radius); padding: 1px; background: var(--input-background-2); } .vx-radiobutton { --radio-background: inherit; --radio-color: var(--text-tertiary); line-height: 1; position: relative; isolation: isolate; height: 100%; display: flex; align-items: center; padding: 8px; border-radius: inherit; text-transform: capitalize; font-weight: 400; letter-spacing: 0.05rem; font-size: var(--body-xxs); font-family: var(--font-roboto-sans); background-color: var(--radio-background); color: var(--radio-color); cursor: pointer; } .vx-radiobutton input[type="radio"] { display: none; } .vx-radiobutton:after { content: attr(data-text); } .vx-radiobutton:has(input:checked) { --radio-background: var(--accent-color); --radio-color: #fff; }*/ /* ================================================================================================ COMPONENT: switch ================================================================================================ */ .vx-switch-wrapper { display: flex; align-items: center; align-self: baseline; padding-block: 4px; justify-content: space-between; } .vx-switch { --toggle-height: 24px; --toggle-border-radius: 16px; color: inherit; height: var(--toggle-height); min-width: calc((var(--toggle-height) * 2) - 4px); position: relative; display: flex; align-items: center; gap: 0; width: fit-content; outline: 1px solid var(--zinc-300); /*align-self: baseline;*/ /*margin-top: -18px;*/ border-radius: 16px; padding: 2px; background-color: var(--zinc-300); transition: background-color 0.3s ease; cursor: pointer; } .vx-switch input[type="checkbox"] { display: none; position: absolute; left: 16px; } .vx-switch .vx-switch-handle { border-radius: inherit; height: 100%; aspect-ratio: 1; width: auto; background: #fff; position: relative; left: 0%; transition: left 0.3s ease; } .vx-switch:has(input:checked) { background-color: var(--accent-color); } .vx-switch:has(input:checked) .vx-switch-handle { left: calc(100% - 20px); } .vx-switch-text { font-family: 'Roboto',sans-serif; font-size: var(--body-xxs); font-weight: 600; text-transform: capitalize; color: var(--text-muted); letter-spacing: 0.025rem; user-select: none; } /* input size modifier */ .input-sm { --input-padding: 4px 8px; } .input-md { --input-padding: 6px 10px; } .input-lg { --input-padding: 8px 12px; } /* ================================================================================================ COMPONENT: list ================================================================================================ */ /*** L I S T I T E M */ .list_item { --list-item-height: 42px; list-style: none; height: var(--list-item-height); display: flex; flex-direction: column; max-width: -webkit-fill-available; } /*** L I N K */ .vx-link { display: inline-flex; align-items: center; text-decoration: none; gap: 16px; padding: 10px 16px; border-radius: 8px; color: var(--gray-500); box-sizing: border-box; /* justify-content: flex-start; */ /* background-color: transparent; */ /* transition: color 0.3s ease; */ } /*** L I N K I C O N */ .link_icon, .button_icon { width: 20px; height: 20px; flex-shrink: 0; color: currentColor; } /*** L I N K T E X T */ .link_text, .button_text { font-family: 'Roboto',sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02rem; margin: 0; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; color: currentColor; } /* ================================================================================================ COMPONENT: datagrid ================================================================================================ */ .vx-datagrid { /* --table-border-color: var(--zinc-200); */ --table-border-color: #f3f4f6; --caption: attr(data-caption); --table-name: attr(data-name); --offset-top: 64px; /* border-radius: 12px; */ /* box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 5%) 0px 2px 6px 2px; */ position: relative; display: flex; flex-direction: column; justify-content: flex-start; overflow-x: clip; overflow-y: auto; height: calc(100vh - var(--offset-top)); scrollbar-width: thin; overscroll-behavior-y: contain; background-color: #fff; content-visibility: auto; contain-intrinsic-size: 100vh; } .vx-datagrid .table-header { padding: 1.5rem 1rem; border-top-left-radius: inherit; border-top-right-radius: inherit; } .vx-datagrid .table-body { /* --padding-top: 64px; */ /* --footer-height: 60px; */ /* height: calc(100vh - calc(var(--padding-top) + var(--footer-height) + 1px)); */ border-right: 1px solid var(--table-border-color); flex-grow: 1; } /*** table row footer */ .vx-datagrid .table-footer { position: sticky; bottom: 0; background: #fff; margin-top: auto; box-shadow: inset 0 1px 0 var(--table-border-color); display: flex; align-items: center; gap: 1rem; background-color: #fff; padding-block: 12px; } /*** table row count */ .vx-row-count { display: inline-flex; gap: 0.5rem; } .vx-row-count span:nth-child(1), .vx-row-count span:nth-child(3) { font-size: var(--body-xs); font-family: var(--font-google-sans); font-weight: 500; color: var(--text-primary); } .vx-row-count span:nth-child(2) { color: var(--text-tertiary); } .vx-datagrid table { border-collapse: collapse; table-layout: fixed; width: 100%; user-select: none; color: var(--text-muted); } .vx-datagrid table thead { position: sticky; top: 0; box-shadow: inset 0 -1px 0 var(--table-border-color); background-color: #fff; z-index: 9999; } .vx-datagrid table thead th { padding: 1rem; text-align: left; font-size: var(--body-2xs); text-transform: uppercase; font-weight: 700; letter-spacing: 0.025rem; /* color: var(--zinc-500); */ color: var(--text-secondary); white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; text-overflow: clip; /* border-block: 1px solid var(--table-border-color); */ } .vx-datagrid table thead th:not(:last-child) { /* border-right: 1px solid var(--table-border-color); */ } .vx-datagrid table tbody td { padding: 1rem; vertical-align: middle; font-family: var(--font-google-sans); font-size: var(--body-xxs); font-weight: 500; letter-spacing: 0.05rem; /* color: var(--neutral-400); */ color: inherit; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; overflow: hidden; text-overflow: clip; /* border-bottom: 1px solid var(--table-border-color); */ } .vx-datagrid table tbody td:not(:last-child) { /* border-right: 1px solid var(--table-border-color); */ } .vx-datagrid table tbody tr { border-bottom: 1px solid var(--table-border-color); transition: background 0.1s; } .vx-datagrid table tbody tr:hover { /* background-color: var(--zinc-100); */ /*background-color: var(--neutral-050);*/ background-color: oklch(from var(--indigo-050) 98% c h); } .vx-datagrid table tbody tr:first-child { border-block: 1px solid var(--table-border-color); } .vx-datagrid .table-caption { position: relative; font-weight: 500; font-family: var(--font-google-sans); letter-spacing: 0.01rem; } .vx-datagrid .table-caption::before { content: var(--caption); } /* Force the row to act as the boundary anchor for the td actions */ .vx-row { position: relative; } /* TD for Actions */ .vx-ghost-cell { --action-cell-width: 76px; position: absolute; right: 0; top: 0; bottom: 0; padding: 0 !important; margin: 0 !important; border: none !important; /* width: 100px!important; */ /* display: grid; */ width: var(--action-cell-width) !important; } /* Render the buttons floating cleanly on the right wall */ .vx-row .vx-cell-actions { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 0; z-index: 10; opacity: 0; visibility: hidden; transition: opacity 0.1s ease-in-out; /*background: linear-gradient(to right, transparent, #fff 15px);*/ background-color: inherit; height: 100%; align-items: center; } /* Show on hover */ .vx-row:hover .vx-cell-actions { opacity: 1; visibility: visible; } .vx-cell-actions button.vx-button { background-color: transparent; border-radius: 16px; padding: 6px; transition: background-color 0.3s; } .vx-cell-actions button.vx-button:hover { background-color: var(--zinc-200); } /* Style for the details-row (master/details) */ /*.vx-datagrid table tbody tr.details-row { position: relative; } .vx-datagrid table tbody tr.details-row:before { position: absolute; content: ''; height: 2px; width: 100%; top: 0; background-color: var(--accent-color); }*/ /* ================================================================================================ COMPONENT: pagination ================================================================================================ */ .vx-pagination { display: flex; border-radius: 8px; overflow: clip; overflow-clip-margin: 1px; margin-inline: 0.5rem; width: fit-content; /* box-shadow: 0 0px 0 1px #e5e7eb; */ /* box-shadow: inset 0 0px 0 1px red; */ position: relative; /* border: 1px solid #e5e7eb; */ } .vx-pagination:after { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 0px 0px 1px #e5e7eb; border-radius: inherit; } .vx-pagination .vx-button { background-color: inherit; border-radius: 0; color: var(--zinc-500); font-size: var(--body-xxs); font-weight: 700; padding: 8px 16px; /* transition: background-color 0.3s; */ border: 0px solid transparent; outline: 0px solid transparent; outline-offset: 0px; border-radius: 0; /* box-shadow: -1px 0px 0px 0px #e5e7eb; */ } .vx-pagination .vx-button:hover { background-color: #f3f4f6; color: var(--foreground-1); } .vx-pagination .vx-button:not(:last-child) { border-right: 1px solid #e5e7eb; } .vx-pagination .vx-button.current-page { background-color: var(--accent-color); color: #fff; } .vx-pagination .vx-button:first-child { border-top-left-radius: inherit; border-bottom-left-radius: inherit; } .vx-pagination .vx-button:last-child { border-top-right-radius: inherit; border-bottom-right-radius: inherit; } /* ================================================================================================ Modal Dialog ================================================================================================ */ dialog { z-index: 9999; margin: auto; transition: opacity 0.5s, transform 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete; opacity: 0; transform: translateY(-100px); &::backdrop { opacity: 0; transition: opacity 0.5s; } &[open] { opacity: 1; transform: translateY(0); &::backdrop { opacity: 1; background-color: oklch(0 0 0 / 0.25); } } @starting-style { &[open] { opacity: 0; transform: translateY(-100px); } &[open]::backdrop { opacity: 0; } } } @scope(.vx-modal) { --modal-width: 1024px; --modal-border-radius: 1rem; width: var(--modal-width); max-width: 100%; border-radius: var(--modal-border-radius); scrollbar-width: none; .modal-header { min-height: var(--header-height); background: inherit; display: flex; align-items: center; padding: 1rem; position: sticky; top: 0; } .modal-title { flex-grow: 1; padding-inline: 0.8rem; } .modal-header button[data-action="close"] { border-radius: 50%; width: 40px; background-color: transparent; cursor: pointer; height: stretch; } .modal-header button[data-action="close"] svg { margin: auto; } .modal-header button[data-action="close"]:hover { background: var(--indigo-00); color: var(--indigo-08); } .modal-body { padding: 2rem; } .modal-footer { display: flex; align-items: center; padding: 8px 16px; position: sticky; bottom: 0; } .modal-close-button { color: inherit; } .modal-close-button.btn-danger:hover { background: var(--rose-050)!important; color: var(--rose-800)!important; } &.modal-xxs {--modal-width: 420px;} &.modal-xs {--modal-width: 640px;} &.modal-sm {--modal-width: 720px;} &.modal-md {--modal-width: 1024px;} &.modal-lg {--modal-width: 1440px;} &.modal-xl {--modal-width: 1980px;} } /*}*/ /* ================================================================================================ COMPONENT: popover ================================================================================================ */ .vx-popover-menu { padding: 4px 0; margin: 4px 0 0 0; border: 1px solid #e5e7eb; border-radius: 8px; background: white; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); inset: unset; top: anchor(bottom); right: anchor(right); } .vx-menu-list { display: flex; flex-direction: column; min-width: 180px; } .vx-menu-item { padding: 8px; font-size: 14px; color: #374151; text-decoration: none; transition: background 0.2s; display: flex; align-items: center; gap: 14px; margin-inline: 4px; border-radius: 8px; color: var(--neutral-700); } .vx-menu-item:hover { background-color: #f3f4f6; color: #111827; } .material-icons-outlined.vx-menu-icon { --font-size: 20px; font-size: 20px; } .vx-menu-divider { height: 1px; background-color: #f3f4f6; margin: 4px 0; } /* ================================================================================================ COMPONENT: button group ================================================================================================ */ @scope (.button-group) { --button-group-border-radius: 10px; --button-group-padding: 1px; --button-group-border-color: #e5e7eb; display: flex; overflow: hidden; width: fit-content; height: var(--base-element-height); border: 1px solid var(--button-group-border-color); border-radius: var(--button-group-border-radius); padding: var(--button-group-padding); width: auto; min-width: fit-content; button { border: 0; outline: 0; padding: 8px 16px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; min-width: 40px; background-color: transparent; border-radius: calc(var(--button-group-border-radius) - var(--button-group-padding)); } button.btn-bordered { border-right: 1px solid var(--button-group-border-color); } button:hover { background: rgb(0 0 0 / 0.02); } button.active { background: var(--indigo-300); color: var(--indigo-050); } } /* ================================================================================================ COMPONENT: radiobutton group ================================================================================================ */ /*@scope (.radiobutton-group) { --button-group-border-radius: 10px; --button-group-padding: 1px; --button-group-border-color: #e5e7eb; --button-background-color:#f3f3f3; display: flex; width: fit-content; width: -webkit-fill-available; height: var(--base-element-height); background-color: var(--button-background-color); border-radius: var(--button-group-border-radius); padding: var(--button-group-padding); .vx-radiobutton { border: 0; outline: 0; padding: 8px 16px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; min-width: 40px; background-color: transparent; color: rgb(0 0 0 / 25%); border-radius: calc(var(--button-group-border-radius) - var(--button-group-padding)); user-select: none; } .vx-radiobutton input { display: none; } .vx-radiobutton.btn-bordered { border-right: 1px solid var(--button-group-border-color); } .vx-radiobutton:hover { background: rgb(0 0 0 / 2%); } .radiobutton-group > .vx-radiobutton { flex-grow: 1; } .vx-radiobutton:has(>input:checked) { background-color: #fff; color: var(--indigo-400); box-shadow: rgb(60 64 67 / 1%) 0px 1px 2px 0px, rgb(60 64 67 / 5%) 0px 1px 3px 1px; } .vx-radiobutton.active:hover { background-color: #fff; } }*/ /* ================================================================================================ COMPONENT: badges ================================================================================================ */ .vx-badge { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.25rem 0.625rem; font-family: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; border-radius: 9999px; border-style: solid; border-width: 1px; transition: all 0.15s ease-in-out; cursor: default; user-select: none; width: fit-content; height: fit-content; } .vx-badge:before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; } /* Success (Green) */ .vx-badge.badge-success { background-color: #ecfdf5; color: #065f46; border-color: #a7f3d0; } .vx-badge.badge-success:hover { background-color: #d1fae5; border-color: #6ee7b7; } /* Warning (Yellow/Orange) */ .vx-badge.badge-warning { background-color: #fffbeb; color: #92400e; border-color: #fde68a; } .vx-badge.badge-warning:hover { background-color: #fef3c7; border-color: #fcd34d; } /* Danger / Error (Red) */ .vx-badge.badge-danger { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; } .vx-badge.badge-danger:hover { background-color: #fee2e2; border-color: #fca5a5; } /* Info (Blue) */ .vx-badge.badge-info { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; } .vx-badge.badge-info:hover { background-color: #dbeafe; border-color: #93c5fd; } /* Neutral / Secondary (Gray) */ .vx-badge.badge-neutral { background-color: #f1f5f9; color: #334155; border-color: #cbd5e1; } .vx-badge.badge-neutral:hover { background-color: #e2e8f0; border-color: #94a3b8; } /* Shape variation: Square */ .vx-badge.badge-square { border-radius: 4px; padding: 0.25rem 0.5rem; } /* Style without the dot */ .vx-badge.badge-no-dot::before { display: none; } /* ================================================================================================ COMPONENT: datagrid ================================================================================================ */ @scope (.inno-datagrid) { --grid-border-color: #e2e8f0; display: grid; grid-template-rows: auto 1fr; min-height: 100%; max-width: 100%; overflow: auto; margin: auto; font-family: inherit; font-size: 1rem; font-weight: 400; padding: 4px; .datagrid-header { display: flex; margin-block: 1rem; gap: 1rem; flex-direction: column; width: 100%; overflow: auto; } .datagrid-body { display: flex; flex-direction: column; border-radius: 10px; max-height: calc(100vh - 127px); width: 100%; overflow: hidden; background-color: #fff; box-shadow: rgb(60 64 67 / 10%) 0px 0px 2px 0px, rgb(60 64 67 / 8%) 0px 2px 6px 2px; } .datagrid-body .table-container { flex-grow: 1; border-bottom: 1px solid var(--grid-border-color); overflow: auto; scrollbar-width: none; } .datagrid-body .table-container table { width: 100%; /*height: 100%;*/ border-collapse: collapse; table-layout: fixed; } &.layout-fixed .table-container table { table-layout: fixed; } &.layout-auto .table-container table { table-layout: auto; } .datagrid-body .table-container table thead { position: sticky; top: 0; background-color: #ffffffb0; backdrop-filter: blur(25px); z-index: 1; } .datagrid-body table thead:before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; border-bottom: 1px solid var(--gray-01); } .datagrid-body table thead tr th { padding: 24px 16px; text-align: left; font-size: 12px; font-weight: 700; color: var(--zinc-600); text-transform: uppercase; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; letter-spacing: 0.02rem; } .datagrid-body table tbody tr td { padding: 10px 16px; white-space: nowrap; /* text-wrap-mode not yet supported everywhere (e.g. older Safari/Firefox) - white-space is the universally-supported equivalent for this value */ text-wrap-mode: nowrap; font-weight: normal; letter-spacing: normal; align-content: center; overflow:hidden; text-overflow:ellipsis; } .datagrid-body table tbody tr td > button { color: inherit; } .datagrid-body table tbody tr { /* border-bottom: 1px solid var(--indigo-00); */ box-shadow: 0 1px 2px -1px hsl(220 3% 15% / calc(1% + 9%)); } .datagrid-body table tbody tr:hover { background-color: oklch(0.59 0.2 277 / 0.04); } .datagrid-body table tbody tr.selected { background-color: var(--indigo-400); color: #fff; } .datagrid-footer { padding: 8px 16px; } .datagrid-toolbar { display: flex; flex-grow: 1; list-style-type: none; gap: 8px; align-items: center; height: calc(var(--base-element-height) + 8px); } .datagrid-pagination { display: flex; align-items: center; } .datagrid-actions { display: flex; align-items: center; justify-content: end; padding: 4px; width: fit-content; justify-self: end; } .datagrid-actions button { color: inherit; width: auto; aspect-ratio: 1; padding: 2px; border-radius: 50%; height: 34px; position: relative; } .datagrid-actions button { border-radius: 6px; padding: 6px; height: auto; width: auto; } .datagrid-actions button.btn-red { color: var(--red-08); background: var(--red-01); outline: 2px solid var(--red-100); } .datagrid-actions button.btn-rose { background: var(--rose-100); color: var(--rose-700); outline: 2px solid var(--rose-100); } .datagrid-actions button.btn-indigo { color: var(--indigo-500); background: var(--indigo-01); outline: 2px solid var(--indigo-100); } .datagrid-actions button.btn-yellow { background: var(--yellow-200); color: var(--yellow-700); outline: 2px solid var(--yellow-200); } .datagrid-actions button.btn-green { background: var(--green-200); color: var(--green-600); outline: 2px solid var(--green-200); } .datagrid-actions button.btn-amber { color: var(--amber-500); background: var(--amber-100); outline: 2px solid var(--amber-100); } .datagrid-actions button.btn-cyan { color: var(--cyan-500); background: var(--cyan-100); outline: 2px solid var(--cyan-100); } .datagrid-actions button.btn-purple { color: var(--purple-05); background: var(--purple-100); outline: 2px solid var(--purple-100); } .datagrid-actions button.btn-blue { color: var(--blue-500); background: var(--blue-100); outline: 2px solid var(--blue-100); } .datagrid-actions button:hover { /*background: var(--indigo-01); color: var(--indigo-08);*/ } /* Row expand button */ tr button[data-action="expand"] { position:relative; isolation:isolate; } tr.is-expanded button[data-action="expand"] { color: var(--teal-050); } tr.is-expanded button[data-action="expand"]::before { content: ""; position: absolute; left: -16px; width: 10px; height: 46%; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background-color: var(--cyan-100); } /* Toggle visible rows on search */ .row-hidden { display: none !important; } /* Styles form details row */ tr.details-row td { position: relative; isolation: isolate; padding: 0; } tr.details-row td:before { position: absolute; content: ''; height: 2px; background: var(--accent-color); width: 100%; left: 0; top: 0; } tr.details-row td:after { position: absolute; content: ''; height: 2px; background: var(--accent-color); width: 100%; left: 0; bottom: 0; } tr.expanded { background-color: oklch(0.59 0.2 277 / 0.04); } td.fit-content { width: 1%; white-space: nowrap; } } /* ================================================================================================ COMPONENT: alert ================================================================================================ */ @scope(.vx-alert) { --alert-color: inherit; --alert-background: inherit; display: flex; padding: 0.75rem; border-radius: 10px; gap: 8px; font-size: var(--body-xs); color: var(--alert-color); background-color: var(--alert-background); &.alert-error { --alert-color: var(--red-700); --alert-background: var(--red-100); } &.alert-success { --alert-color: var(--green-700); --alert-background: var(--green-200); } &.alert-warning { --alert-color: var(--yellow-700); --alert-background: var(--yellow-200); } &.alert-info { --alert-color: var(--cyan-700); --alert-background: var(--cyan-200); } span { } p.alert-text { } } /* ================================================================================================ COMPONENT: tooltip ================================================================================================ */ .vx-tooltip { --tooltip-background: var(--gray-700); --tooltip-color: var(--gray-050); position: relative; padding-inline: calc(var(--spacing-base2) * 8); } .vx-tooltip:before { content: attr(data-tooltip); position: absolute; top: 0; background: var(--tooltip-background); color: var(--tooltip-color); } /* ================================================================================================ COMPONENT: toolbar ================================================================================================ */ .vx-toolbar { display: flex; align-items: center; min-height: var(--base-element-height); } }