feat: 左侧菜单样式
This commit is contained in:
baiqi
刘瑞斌
parent
099749a341
commit
38f798f27e
|
|
@ -242,15 +242,18 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
/** 下拉菜单 **/
|
||||
/** 下拉菜单,trigger触发器,select选择器 **/
|
||||
.arco-dropdown,
|
||||
.arco-trigger-menu {
|
||||
.arco-trigger-menu,
|
||||
.arco-select-dropdown {
|
||||
border: 0.5px solid var(--color-text-n8);
|
||||
box-shadow: 0 3px 14px 2px rgb(0 0 0 / 5%), 0 8px 10px 1px rgb(0 0 0 / 6%), 0 5px 5px -3px rgb(0 0 0 / 10%);
|
||||
.arco-dropdown-list,
|
||||
.arco-select-dropdown-list,
|
||||
.arco-trigger-menu-inner {
|
||||
@apply relative flex w-full flex-col overflow-hidden;
|
||||
.arco-dropdown-option,
|
||||
.arco-select-option,
|
||||
.arco-trigger-menu-item {
|
||||
@apply flex w-auto items-center;
|
||||
|
||||
|
|
@ -278,6 +281,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-content {
|
||||
@apply flex items-center;
|
||||
|
||||
gap: 8px;
|
||||
}
|
||||
.arco-select-option:not(:disabled) {
|
||||
&:hover {
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
}
|
||||
.arco-select-option-selected {
|
||||
color: rgb(var(--primary-7)) !important;
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
.arco-select-view-value {
|
||||
@apply !block;
|
||||
}
|
||||
.arco-select-view-suffix {
|
||||
@apply !pl-0;
|
||||
}
|
||||
|
||||
/** 全局容器 **/
|
||||
.ms-contentiner {
|
||||
|
|
@ -352,3 +375,23 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 滚动条 **/
|
||||
.arco-scrollbar-track-direction-horizontal {
|
||||
height: 8px;
|
||||
.arco-scrollbar-thumb-bar {
|
||||
@apply m-0;
|
||||
|
||||
height: 8px;
|
||||
background-color: var(--color-text-input-border);
|
||||
}
|
||||
}
|
||||
.arco-scrollbar-track-direction-vertical {
|
||||
width: 8px;
|
||||
.arco-scrollbar-thumb-bar {
|
||||
@apply m-0;
|
||||
|
||||
width: 8px;
|
||||
background-color: var(--color-text-input-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -245,8 +245,79 @@
|
|||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.menu-wrapper {
|
||||
background-color: var(--color-bg-3);
|
||||
.arco-menu-vertical {
|
||||
.menu-wrapper {
|
||||
background-color: var(--color-bg-3);
|
||||
}
|
||||
.arco-menu-inner {
|
||||
@apply flex flex-col;
|
||||
|
||||
padding: 16px 32px 16px 16px !important;
|
||||
.arco-menu-inline {
|
||||
&--bottom {
|
||||
@apply mt-auto;
|
||||
}
|
||||
}
|
||||
.arco-menu-pop-header {
|
||||
@apply leading-none;
|
||||
|
||||
padding: 11px;
|
||||
}
|
||||
.arco-menu-inline-header {
|
||||
@apply flex items-center;
|
||||
}
|
||||
.arco-menu-inline-header,
|
||||
.arco-menu-item {
|
||||
@apply mb-0 !bg-transparent;
|
||||
|
||||
color: var(--color-text-1) !important;
|
||||
&:hover,
|
||||
.arco-menu-indent-list:hover,
|
||||
.arco-icon:hover {
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
.arco-menu-item-inner,
|
||||
.arco-menu-item-inner:hover {
|
||||
@apply !bg-transparent;
|
||||
}
|
||||
.arco-menu-icon {
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
.arco-menu-selected {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
&:not(.arco-menu-inline-header) {
|
||||
background-color: rgb(var(--primary-9)) !important;
|
||||
}
|
||||
.arco-icon {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
&:hover {
|
||||
background-color: var(--color-bg-6) !important;
|
||||
}
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
}
|
||||
}
|
||||
.arco-menu-pop {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-menu-overflow-sub-menu {
|
||||
min-width: 60px;
|
||||
}
|
||||
.arco-menu-collapsed {
|
||||
width: 86px;
|
||||
}
|
||||
.arco-menu {
|
||||
&:hover {
|
||||
|
|
@ -267,70 +338,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.arco-menu-inner {
|
||||
@apply flex flex-col;
|
||||
|
||||
padding: 16px 32px 16px 16px !important;
|
||||
.arco-menu-inline {
|
||||
&--bottom {
|
||||
@apply mt-auto;
|
||||
}
|
||||
}
|
||||
.arco-menu-pop-header {
|
||||
@apply leading-none;
|
||||
|
||||
padding: 11px;
|
||||
}
|
||||
.arco-menu-inline-header {
|
||||
@apply flex items-center;
|
||||
}
|
||||
.arco-menu-inline-header,
|
||||
.arco-menu-item {
|
||||
@apply mb-0 !bg-transparent;
|
||||
|
||||
color: var(--color-text-1) !important;
|
||||
&:hover,
|
||||
.arco-menu-indent-list:hover,
|
||||
.arco-icon:hover {
|
||||
background-color: rgb(var(--primary-1)) !important;
|
||||
}
|
||||
.arco-menu-item-inner,
|
||||
.arco-menu-item-inner:hover {
|
||||
@apply !bg-transparent;
|
||||
}
|
||||
.arco-menu-icon {
|
||||
.arco-icon {
|
||||
&:not(.arco-icon-down) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
}
|
||||
.arco-menu-selected {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
&:not(.arco-menu-inline-header) {
|
||||
background-color: rgb(var(--primary-9)) !important;
|
||||
}
|
||||
.arco-icon {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
&:hover {
|
||||
background-color: var(--color-bg-6) !important;
|
||||
}
|
||||
}
|
||||
.arco-menu-title {
|
||||
color: rgb(var(--primary-5)) !important;
|
||||
}
|
||||
}
|
||||
.arco-menu-pop {
|
||||
@apply bg-transparent;
|
||||
}
|
||||
}
|
||||
.arco-menu-collapsed {
|
||||
width: 86px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue