preact-arco-design
Version:
Arco Design React UI Library.
1 lines • 15.5 kB
CSS
.arco-menu{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:14px;line-height:1.5715;-webkit-transition:width .2s cubic-bezier(.34,.69,.1,1);transition:width .2s cubic-bezier(.34,.69,.1,1)}.arco-menu:focus-visible{outline:3px solid var(--color-primary-light-2)}.arco-menu-indent{display:inline-block;width:20px}.arco-menu .arco-menu-group-title,.arco-menu .arco-menu-inline-header,.arco-menu .arco-menu-item,.arco-menu .arco-menu-pop-header{position:relative;border-radius:var(--border-radius-small);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}.arco-menu .arco-menu-group-title.arco-menu-disabled,.arco-menu .arco-menu-inline-header.arco-menu-disabled,.arco-menu .arco-menu-item.arco-menu-disabled,.arco-menu .arco-menu-pop-header.arco-menu-disabled{cursor:not-allowed}.arco-menu .arco-menu-group-title.arco-menu-selected,.arco-menu .arco-menu-inline-header.arco-menu-selected,.arco-menu .arco-menu-item.arco-menu-selected,.arco-menu .arco-menu-pop-header.arco-menu-selected{-webkit-transition:color .2s cubic-bezier(0,0,1,1);transition:color .2s cubic-bezier(0,0,1,1);font-weight:500}.arco-menu .arco-menu-group-title .arco-icon,.arco-menu .arco-menu-inline-header .arco-icon,.arco-menu .arco-menu-item .arco-icon,.arco-menu .arco-menu-pop-header .arco-icon{margin-right:16px}.arco-menu-light{background-color:var(--color-menu-light-bg)}.arco-menu-light .arco-menu-group-title,.arco-menu-light .arco-menu-inline-header,.arco-menu-light .arco-menu-item,.arco-menu-light .arco-menu-pop-header{background-color:var(--color-menu-light-bg);color:var(--color-text-2)}.arco-menu-light .arco-menu-group-title .arco-icon,.arco-menu-light .arco-menu-inline-header .arco-icon,.arco-menu-light .arco-menu-item .arco-icon,.arco-menu-light .arco-menu-pop-header .arco-icon{color:var(--color-text-3)}.arco-menu-light .arco-menu-group-title:hover,.arco-menu-light .arco-menu-inline-header:hover,.arco-menu-light .arco-menu-item:hover,.arco-menu-light .arco-menu-pop-header:hover{background-color:var(--color-fill-2);color:var(--color-text-2)}.arco-menu-light .arco-menu-group-title:hover .arco-icon,.arco-menu-light .arco-menu-inline-header:hover .arco-icon,.arco-menu-light .arco-menu-item:hover .arco-icon,.arco-menu-light .arco-menu-pop-header:hover .arco-icon{color:var(--color-text-3)}.arco-menu-light .arco-menu-group-title.arco-menu-active,.arco-menu-light .arco-menu-inline-header.arco-menu-active,.arco-menu-light .arco-menu-item.arco-menu-active,.arco-menu-light .arco-menu-pop-header.arco-menu-active{-webkit-box-shadow:0 0 0 1px rgb(var(--primary-6)) inset;box-shadow:0 0 0 1px rgb(var(--primary-6)) inset}.arco-menu-light .arco-menu-group-title.arco-menu-selected,.arco-menu-light .arco-menu-inline-header.arco-menu-selected,.arco-menu-light .arco-menu-item.arco-menu-selected,.arco-menu-light .arco-menu-pop-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-group-title.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-item.arco-menu-selected .arco-icon,.arco-menu-light .arco-menu-pop-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-group-title.arco-menu-disabled,.arco-menu-light .arco-menu-inline-header.arco-menu-disabled,.arco-menu-light .arco-menu-item.arco-menu-disabled,.arco-menu-light .arco-menu-pop-header.arco-menu-disabled{background-color:var(--color-menu-light-bg);color:var(--color-text-4)}.arco-menu-light .arco-menu-group-title.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-inline-header.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-item.arco-menu-disabled .arco-icon,.arco-menu-light .arco-menu-pop-header.arco-menu-disabled .arco-icon{color:var(--color-text-4)}.arco-menu-light .arco-menu-item.arco-menu-selected{background-color:var(--color-fill-2)}.arco-menu-light .arco-menu-inline-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-inline-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover{background-color:var(--color-fill-2)}.arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected,.arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected{background:0 0;-webkit-transition:color .2s cubic-bezier(0,0,1,1);transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu-light.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover,.arco-menu-light.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover{background-color:var(--color-fill-2)}.arco-menu-light .arco-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-menu-light .arco-menu-collapse-button{background-color:var(--color-fill-1);color:var(--color-text-3)}.arco-menu-light .arco-menu-collapse-button:hover{background-color:var(--color-fill-3)}.arco-menu-dark{background-color:var(--color-menu-dark-bg)}.arco-menu-dark .arco-menu-group-title,.arco-menu-dark .arco-menu-inline-header,.arco-menu-dark .arco-menu-item,.arco-menu-dark .arco-menu-pop-header{background-color:var(--color-menu-dark-bg);color:var(--color-text-4)}.arco-menu-dark .arco-menu-group-title .arco-icon,.arco-menu-dark .arco-menu-inline-header .arco-icon,.arco-menu-dark .arco-menu-item .arco-icon,.arco-menu-dark .arco-menu-pop-header .arco-icon{color:var(--color-text-3)}.arco-menu-dark .arco-menu-group-title:hover,.arco-menu-dark .arco-menu-inline-header:hover,.arco-menu-dark .arco-menu-item:hover,.arco-menu-dark .arco-menu-pop-header:hover{background-color:var(--color-menu-dark-hover);color:var(--color-text-4)}.arco-menu-dark .arco-menu-group-title:hover .arco-icon,.arco-menu-dark .arco-menu-inline-header:hover .arco-icon,.arco-menu-dark .arco-menu-item:hover .arco-icon,.arco-menu-dark .arco-menu-pop-header:hover .arco-icon{color:var(--color-text-3)}.arco-menu-dark .arco-menu-group-title.arco-menu-active,.arco-menu-dark .arco-menu-inline-header.arco-menu-active,.arco-menu-dark .arco-menu-item.arco-menu-active,.arco-menu-dark .arco-menu-pop-header.arco-menu-active{-webkit-box-shadow:0 0 0 1px rgb(var(--primary-6)) inset;box-shadow:0 0 0 1px rgb(var(--primary-6)) inset}.arco-menu-dark .arco-menu-group-title.arco-menu-selected,.arco-menu-dark .arco-menu-inline-header.arco-menu-selected,.arco-menu-dark .arco-menu-item.arco-menu-selected,.arco-menu-dark .arco-menu-pop-header.arco-menu-selected{color:var(--color-white)}.arco-menu-dark .arco-menu-group-title.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-item.arco-menu-selected .arco-icon,.arco-menu-dark .arco-menu-pop-header.arco-menu-selected .arco-icon{color:var(--color-white)}.arco-menu-dark .arco-menu-group-title.arco-menu-disabled,.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled,.arco-menu-dark .arco-menu-item.arco-menu-disabled,.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled{background-color:var(--color-menu-dark-bg);color:var(--color-text-2)}.arco-menu-dark .arco-menu-group-title.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-inline-header.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-item.arco-menu-disabled .arco-icon,.arco-menu-dark .arco-menu-pop-header.arco-menu-disabled .arco-icon{color:var(--color-text-2)}.arco-menu-dark .arco-menu-item.arco-menu-selected{background-color:var(--color-menu-dark-hover)}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected{color:rgb(var(--primary-6))}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected .arco-icon{color:rgb(var(--primary-6))}.arco-menu-dark .arco-menu-inline-header.arco-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected,.arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected{background:0 0;-webkit-transition:color .2s cubic-bezier(0,0,1,1);transition:color .2s cubic-bezier(0,0,1,1)}.arco-menu-dark.arco-menu-horizontal .arco-menu-group-title.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-inline-header.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-item.arco-menu-selected:hover,.arco-menu-dark.arco-menu-horizontal .arco-menu-pop-header.arco-menu-selected:hover{background-color:var(--color-menu-dark-hover)}.arco-menu-dark .arco-menu-group-title{color:var(--color-text-3);pointer-events:none}.arco-menu-dark .arco-menu-collapse-button{background-color:rgb(var(--primary-6));color:var(--color-white)}.arco-menu-dark .arco-menu-collapse-button:hover{background-color:rgb(var(--primary-7))}.arco-menu a,.arco-menu a:active,.arco-menu a:focus,.arco-menu a:hover{color:inherit;cursor:inherit;text-decoration:none}.arco-menu-inner{-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;overflow:auto}.arco-menu-icon-suffix.is-open{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.arco-menu-vertical .arco-menu-group-title,.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-item,.arco-menu-vertical .arco-menu-pop-header{padding:0 12px;line-height:40px}.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-right:0}.arco-menu-vertical .arco-menu-group-title,.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-item,.arco-menu-vertical .arco-menu-pop-header{margin-bottom:4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-menu-vertical .arco-menu-group-title .arco-menu-item-inner,.arco-menu-vertical .arco-menu-inline-header .arco-menu-item-inner,.arco-menu-vertical .arco-menu-item .arco-menu-item-inner,.arco-menu-vertical .arco-menu-pop-header .arco-menu-item-inner{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.arco-menu-vertical .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-item .arco-menu-icon-suffix,.arco-menu-vertical .arco-menu-pop-header .arco-menu-icon-suffix{position:absolute;right:12px}.arco-menu-vertical .arco-menu-inner{padding:4px 8px}.arco-menu-vertical .arco-menu-item.arco-menu-item-indented{display:-webkit-box;display:-ms-flexbox;display:flex}.arco-menu-vertical .arco-menu-inline-header,.arco-menu-vertical .arco-menu-pop-header{padding-right:28px}.arco-menu-horizontal{width:auto;height:auto}.arco-menu-horizontal .arco-menu-group-title,.arco-menu-horizontal .arco-menu-inline-header,.arco-menu-horizontal .arco-menu-item,.arco-menu-horizontal .arco-menu-pop-header{padding:0 12px;line-height:30px}.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix .arco-icon,.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix .arco-icon{margin-right:0}.arco-menu-horizontal .arco-menu-group-title .arco-icon,.arco-menu-horizontal .arco-menu-inline-header .arco-icon,.arco-menu-horizontal .arco-menu-item .arco-icon,.arco-menu-horizontal .arco-menu-pop-header .arco-icon{margin-right:16px}.arco-menu-horizontal .arco-menu-group-title .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-inline-header .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-item .arco-menu-icon-suffix,.arco-menu-horizontal .arco-menu-pop-header .arco-menu-icon-suffix{margin-left:6px}.arco-menu-horizontal .arco-menu-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:14px 20px}.arco-menu-horizontal .arco-menu-item,.arco-menu-horizontal .arco-menu-pop{display:inline-block;vertical-align:middle;-ms-flex-negative:0;flex-shrink:0}.arco-menu-horizontal .arco-menu-item:not(:first-child),.arco-menu-horizontal .arco-menu-pop:not(:first-child){margin-left:12px}.arco-menu-horizontal .arco-menu-pop::after{content:' ';width:100%;height:14px;position:absolute;left:0;bottom:-14px}.arco-menu-overflow-wrap{width:100%}.arco-menu-overflow-hidden-menu-item,.arco-menu-overflow-sub-menu-mirror{position:absolute;white-space:nowrap;visibility:hidden;pointer-events:none}.arco-menu-selected-label{position:absolute;left:12px;right:12px;bottom:-14px;height:3px;background-color:rgb(var(--primary-6))}.arco-menu-pop-button{width:auto;background:0 0;-webkit-box-shadow:none;box-shadow:none}.arco-menu-pop-button.arco-menu-collapse{width:auto}.arco-menu-pop-button .arco-menu-group-title,.arco-menu-pop-button .arco-menu-inline-header,.arco-menu-pop-button .arco-menu-item,.arco-menu-pop-button .arco-menu-pop-header{width:40px;height:40px;line-height:40px;border-radius:50%;border:1px solid transparent;-webkit-box-shadow:0 4px 10px rgba(0,0,0,.1);box-shadow:0 4px 10px rgba(0,0,0,.1);margin-bottom:16px}.arco-menu-collapse{width:48px}.arco-menu-collapse .arco-menu-inner{padding:4px 4px}.arco-menu-collapse .arco-menu-icon-suffix{display:none}.arco-menu-collapse .arco-menu-group-title .arco-icon,.arco-menu-collapse .arco-menu-inline-header .arco-icon,.arco-menu-collapse .arco-menu-item .arco-icon,.arco-menu-collapse .arco-menu-pop-header .arco-icon{margin-right:100%}.arco-menu-collapse-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute;right:12px;bottom:12px;width:24px;height:24px;border-radius:var(--border-radius-small);cursor:pointer}.arco-menu-inline-content{overflow:hidden;height:auto;-webkit-transition:height .2s cubic-bezier(.34,.69,.1,1);transition:height .2s cubic-bezier(.34,.69,.1,1)}.arco-menu-inline-content-hide{height:0}.arco-menu-item-tooltip a{color:inherit;cursor:text}.arco-menu-item-tooltip a:active,.arco-menu-item-tooltip a:focus,.arco-menu-item-tooltip a:hover{color:inherit}.arco-menu-pop-trigger.arco-trigger-position-bl{-webkit-transform:translateY(14px);transform:translateY(14px)}.arco-menu-pop-trigger.arco-trigger-position-bl .arco-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-top:1px solid var(--color-neutral-3)}.arco-menu-pop-trigger.arco-trigger-position-rt{-webkit-transform:translateX(8px);transform:translateX(8px)}.arco-menu-pop-trigger.arco-trigger-position-rt .arco-trigger-arrow{z-index:0;border-left:1px solid var(--color-neutral-3);border-bottom:1px solid var(--color-neutral-3)}.arco-menu-pop-trigger .arco-dropdown-menu-dark~.arco-trigger-arrow-container .arco-trigger-arrow{background-color:var(--color-menu-dark-bg);border-color:var(--color-menu-dark-bg)}