.menu-drawer { .ivu-drawer-left { left: 201px !important; } .ivu-drawer { top: 64px !important; } .ivu-drawer-body { padding: 32px !important; .menuItems { display: flex; flex-wrap: wrap; > .item { margin: 0px 10px; width: calc(33.333% - 20px); padding: 0px 15px; font-size: 13px; transition: all 0.3s; display: flex; justify-content: space-between; height: 32px; align-items: center; .star { display: flex; height: 100%; width: 30px; font-size: 15px; align-items: center; justify-content: center; .ivu-icon-ios-star-outline{ display: none; } } } > .item:hover { background-color: #eaeaea; cursor: pointer; .ivu-icon-ios-star-outline{ display: inline; } } } } } .sider-drawer { .ivu-drawer { background-color: #ffffff !important; } .ivu-drawer-body { padding: 0px !important; } .ivu-drawer { top: 64px !important; } .context-menu-drag { display: flex; .flip-list-move { transition: transform 0.3s; } .menu-list { width: 100%; height: 100%; .menu-header { cursor: pointer; border-bottom: 1px solid rgb(222, 222, 222); height: 48px; line-height: 48px; display: flex; align-items: center; .menuicon { display: inline-block; width: 50px; font-size: 16px; text-align: center; font-size: 22px; } .content { display: inline-block; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0%; overflow: hidden; font-size: 13px; } .forward { margin: 0px 8px 0px 4px; color: rgb(222, 222, 222); font-size: 15px; } } .list-group-item { transition: background 1s; -webkit-transition: background 1s; .menuicon { text-align: center; } .el-row { height: 100%; display: flex; align-items: center; padding: 0px 5px; } height: 40px; cursor: pointer; position: relative; display: block; margin-bottom: -1px; transition: background-color 0.5s; transition-timing-function: ease-in-out; .handle { cursor: move; } .bar { display: flex; .ivu-icon-ios-close { cursor: pointer; font-size: 25px; } } } .list-group-item:hover { background-color: #f5f5f5; .ivu-icon-ios-star-outline{ display: inline; } } } } }