.tool-bar { @apply flex items-center justify-between; background: #fff; height: 36px; padding: 0 8px; margin-bottom: 5px; border: 1px solid #e8eaec; .tools { .el-button { height: 24px; line-height: 16px; min-height: auto; border: none; padding: 4px; border-radius: 0; margin-right: 6px; &.is-disabled { color: #8a9194; } & + .el-button { margin-left: 0; } &:hover { background-color: #edeff5; } .iconfont { vertical-align: bottom; } } } .menus { height: 34px; line-height: 34px; .menu-item { @apply relative inline-block align-bottom cursor-pointer select-none; margin-left: 10px; padding: 0 8px; &.active { &::before { display: block; content: " "; position: absolute; left: 0; top: -1px; width: 100%; height: 35px; border: 1px solid #ddd; border-top-color: #409eff; border-bottom: none; background-color: #f5f7f9; } color: #409eff; } &.disabled { color: #ccc; cursor: not-allowed } .text { @apply relative; z-index: 1; } .icon { font-size: 17px; } } } }