maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 4.4 kB
CSS
.m-dropdown[data-v-6e000b9e]{vertical-align:top;flex-direction:column;align-items:flex-start;display:inline-flex;position:relative}.m-dropdown__wrapper[data-v-6e000b9e]{border-radius:var(--maz-radius);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%}.m-dropdown__wrapper[data-v-6e000b9e]:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600) / var(--maz-tw-bg-opacity,1))}.m-dropdown__wrapper[data-v-6e000b9e]:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400) / var(--maz-tw-bg-opacity,1))}.m-dropdown__icon[data-v-6e000b9e]{transition-property:transform;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__icon.--open[data-v-6e000b9e]{--maz-tw-rotate:180deg;transform:translate(var(--maz-tw-translate-x), var(--maz-tw-translate-y)) rotate(var(--maz-tw-rotate)) skewX(var(--maz-tw-skew-x)) skewY(var(--maz-tw-skew-y)) scaleX(var(--maz-tw-scale-x)) scaleY(var(--maz-tw-scale-y))}.m-dropdown__menu[data-v-6e000b9e]{flex-direction:column;gap:.125rem;min-width:max-content;min-height:max-content;padding:.5rem;display:flex;overflow:auto}.m-dropdown__menu .menuitem[data-v-6e000b9e]{cursor:pointer;white-space:nowrap;border-radius:var(--maz-radius);text-align:start;outline-offset:2px;outline:2px solid #0000;padding:.5rem 1rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__menu .menuitem[data-v-6e000b9e]:hover,.m-dropdown__menu .menuitem[data-v-6e000b9e]:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600) / var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem[data-v-6e000b9e]:hover:is([class~=dark] *),.m-dropdown__menu .menuitem[data-v-6e000b9e]:focus:is([class~=dark] *){--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-400) / var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button[data-v-6e000b9e]:disabled{cursor:not-allowed;opacity:.5}.m-dropdown__menu .menuitem.menuitem__button.--primary[data-v-6e000b9e]{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--primary[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary[data-v-6e000b9e]{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info[data-v-6e000b9e]{--maz-tw-text-opacity:1;color:hsl(var(--maz-info) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-info-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--warning[data-v-6e000b9e],.m-dropdown__menu .menuitem.menuitem__button.--warning[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-warning-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--destructive[data-v-6e000b9e],.m-dropdown__menu .menuitem.menuitem__button.--destructive[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-destructive-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--success[data-v-6e000b9e],.m-dropdown__menu .menuitem.menuitem__button.--success[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-success-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast[data-v-6e000b9e]{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-600) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--accent[data-v-6e000b9e]{--maz-tw-text-opacity:1;color:hsl(var(--maz-accent) / var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--accent[data-v-6e000b9e]:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-accent-600) / var(--maz-tw-text-opacity,1))}