@itwin/itwinui-css/css/menu.css

CSS library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.

/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
:is(.iui-list,.iui-menu){vertical-align:baseline;isolation:isolate;border:none;margin:0;padding:0;list-style-type:none}:is(.iui-list,.iui-menu) .iui-header-menu-icon{margin-inline:var(--iui-size-2xs)}:is(.iui-list,.iui-menu) .iui-header-menu-icon:is(div){inline-size:calc(1.5*var(--iui-size-m));block-size:calc(1.5*var(--iui-size-m));border-radius:var(--iui-border-radius-1);box-shadow:inset 0 0 0 2px hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-6));flex-shrink:0;margin:0;display:flex}.iui-menu{--iui-menu-max-height:calc((var(--iui-component-height) - 1px)*8.5);--iui-surface-border:1px solid var(--iui-color-border);--iui-surface-elevation:var(--iui-shadow-2);background-color:var(--iui-color-background);border:var(--iui-surface-border);border-radius:var(--iui-border-radius-1);box-shadow:var(--iui-surface-elevation);color:var(--iui-color-text);max-block-size:var(--iui-menu-max-height);border-radius:var(--iui-border-radius-1);overflow-y:auto}:is(.iui-list-item,.iui-menu-item-skeleton){align-items:center;gap:var(--iui-size-xs);font-size:var(--iui-font-size-1);padding-block:var(--iui-size-2xs);padding-inline:var(--iui-size-s);min-block-size:var(--iui-component-height);color:var(--iui-color-text);border-radius:var(--iui-border-radius-1);list-style-type:none;display:flex;position:relative}:is(.iui-list-item,.iui-menu-item-skeleton)+:is(.iui-list-item,.iui-menu-item-skeleton){margin-block-start:-1px}:is(.iui-list-item,.iui-menu-item-skeleton):where([data-iui-actionable=true],.iui-menu-item):where(:hover),:is(.iui-list-item,.iui-menu-item-skeleton):where(:has(.iui-link-action):hover){cursor:pointer;background-color:var(--iui-color-background-hover)}:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-large,[data-iui-size=large]){min-block-size:var(--iui-component-height-large)}:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-active,[data-iui-active=true]){background-color:var(--iui-color-background-accent-muted);color:var(--iui-color-text-accent);outline:1px solid var(--iui-color-border-accent);outline-offset:-1px;z-index:1;--_iui-list-item-icon-fill:currentColor;--_iui-list-item-description-color:var(--iui-color-text-accent)}@supports selector(:has(+ *)){:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-active,[data-iui-active=true]):where(:has(+:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-active,[data-iui-active=true]))){border-end-end-radius:0;border-end-start-radius:0}:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-active,[data-iui-active=true])+:where(:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-active,[data-iui-active=true])){border-start-start-radius:0;border-start-end-radius:0}}:is(.iui-list-item,.iui-menu-item-skeleton):where(.iui-disabled,[data-iui-disabled=true]){z-index:-1;cursor:not-allowed;color:var(--iui-color-text-disabled);--_iui-list-item-icon-fill:var(--iui-color-icon-disabled);--_iui-list-item-description-color:var(--iui-color-text-disabled);background-color:#0000;outline:none}:is(.iui-list-item,.iui-menu-item-skeleton):where(:focus-visible,.iui-focused,[data-iui-focused=true]),:is(.iui-list-item,.iui-menu-item-skeleton):where(:has(.iui-link-action:focus-visible)){outline:1px solid var(--iui-color-border-accent);outline-offset:-1px;z-index:2}:is(.iui-list-item,.iui-menu-item-skeleton):where(:focus-visible,.iui-focused,[data-iui-focused=true]):where(.iui-active,[data-iui-active=true]),:is(.iui-list-item,.iui-menu-item-skeleton):where(:has(.iui-link-action:focus-visible)):where(.iui-active,[data-iui-active=true]){outline-width:var(--iui-size-3xs);outline-offset:-2px}@supports not selector(:has(+ *)){:is(.iui-list-item,.iui-menu-item-skeleton):where(:focus-within){outline:1px solid var(--iui-color-border-accent);outline-offset:-1px;z-index:2}:is(.iui-list-item,.iui-menu-item-skeleton):where(:focus-within):where(.iui-active,[data-iui-active=true]){outline-width:var(--iui-size-3xs);outline-offset:-2px}}:is(.iui-menu-item-skeleton>.iui-icon,.iui-list-item-icon){flex:none}:is(.iui-menu-item-skeleton>.iui-icon,.iui-list-item-icon),:is(.iui-menu-item-skeleton>.iui-icon,.iui-list-item-icon) svg{inline-size:var(--iui-size-m);block-size:var(--iui-size-m);fill:var(--_iui-list-item-icon-fill,var(--iui-color-icon));flex-shrink:0;display:flex}.iui-menu-item-skeleton{--iui-menu-item-content-skeleton-max-width:30%;cursor:auto}.iui-menu-item-skeleton .iui-content{max-inline-size:var(--iui-menu-item-content-skeleton-max-width)}.iui-menu-item-skeleton .iui-menu-label{block-size:var(--iui-font-size-1);inline-size:100%;display:block}.iui-menu-item-skeleton .iui-menu-description{block-size:var(--iui-font-size-0);inline-size:70%;margin-block-start:var(--iui-size-2xs);display:block}.iui-menu-item-skeleton:hover{background-color:unset}.iui-menu-content{padding-block:var(--iui-size-xs);padding-inline:var(--iui-size-m);min-block-size:var(--iui-component-height);align-items:center;display:grid}:is(.iui-menu-item-skeleton>.iui-content,.iui-list-item-content){flex:auto}:is(.iui-menu-item-skeleton>.iui-content,.iui-list-item-content),:is(.iui-menu-item-skeleton>.iui-content,.iui-list-item-content)>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:is(.iui-menu-item-skeleton>.iui-menu-description,.iui-list-item-description){white-space:nowrap;text-overflow:ellipsis;font-size:var(--iui-font-size-0);color:var(--_iui-list-item-description-color,var(--iui-color-text-muted));overflow:hidden}.iui-menu-divider{inline-size:calc(100% - var(--iui-size-l));background-color:var(--iui-color-border);block-size:1px;margin-block:1px;margin-inline:auto}