maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
2 lines (1 loc) • 3.58 kB
CSS
.m-dropdown{vertical-align:top;flex-direction:column;align-items:flex-start;display:inline-flex;position:relative}.m-dropdown__wrapper{border-radius:var(--maz-radius);outline-offset:2px;outline:2px solid #0000;width:100%;height:100%}.m-dropdown__wrapper:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__wrapper: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{transition-property:transform;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.m-dropdown__icon.--open{--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{flex-direction:column;gap:.125rem;min-width:max-content;min-height:max-content;padding:.5rem;display:flex;overflow:auto}.m-dropdown__menu .menuitem{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:hover,.m-dropdown__menu .menuitem:focus{--maz-tw-bg-opacity:1;background-color:hsl(var(--maz-background-600)/var(--maz-tw-bg-opacity,1))}.m-dropdown__menu .menuitem:hover:is([class~=dark] *),.m-dropdown__menu .menuitem: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:disabled{cursor:not-allowed;opacity:.5}.m-dropdown__menu .menuitem.menuitem__button.--primary{--maz-tw-text-opacity:1;color:hsl(var(--maz-primary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--primary: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{--maz-tw-text-opacity:1;color:hsl(var(--maz-secondary)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--secondary: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{--maz-tw-text-opacity:1;color:hsl(var(--maz-info)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--info: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,.m-dropdown__menu .menuitem.menuitem__button.--warning: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,.m-dropdown__menu .menuitem.menuitem__button.--destructive: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,.m-dropdown__menu .menuitem.menuitem__button.--success: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{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast)/var(--maz-tw-text-opacity,1))}.m-dropdown__menu .menuitem.menuitem__button.--contrast:hover{--maz-tw-text-opacity:1;color:hsl(var(--maz-contrast-600)/var(--maz-tw-text-opacity,1))}