@fmdevui/fm-dev
Version:
Page level components developed based on Element Plus.
1 lines • 2.05 kB
CSS
.layout-columns-aside{background:var(--next-bg-columnsMenuBar);height:100%;width:var(--el-columnsMenuWidth)}.layout-columns-aside ul{position:relative}.layout-columns-aside ul .layout-columns-active,.layout-columns-aside ul .layout-columns-active a{color:var(--next-bg-columnsMenuBarColor);transition:.3s ease-in-out}.layout-columns-aside ul .layout-columns-hover,.layout-columns-aside ul .layout-columns-hover a{color:var(--el-color-primary)}.layout-columns-aside ul li{color:var(--next-bg-columnsMenuBarColor);cursor:pointer;display:flex;height:var(--el-columnsMenuHeight);position:relative;text-align:center;width:100%;z-index:1}.layout-columns-aside ul li:hover{background-color:var(--el-color-primary-light-3)}.layout-columns-aside ul li .columns-vertical{margin:auto}.layout-columns-aside ul li .columns-vertical .columns-vertical-title{padding-top:1px}.layout-columns-aside ul li .columns-horizontal{align-items:center;display:flex;height:var(--el-columnsMenuHeight);padding:0 5px;width:100%}.layout-columns-aside ul li .columns-horizontal i{margin-right:3px}.layout-columns-aside ul li .columns-horizontal a{display:flex}.layout-columns-aside ul li .columns-horizontal a .columns-horizontal-title{padding-top:1px}.layout-columns-aside ul li a{color:var(--next-bg-columnsMenuBarColor);text-decoration:none}.layout-columns-aside ul .columns-card,.layout-columns-aside ul .columns-round{background:var(--el-color-primary);border-radius:5px;color:var(--el-color-white);height:var(--el-columnsMenuRoundHeight);left:50%;position:absolute;top:2px;transform:translateX(-50%);transition:.5s ease-in-out;width:var(--el-columnsMenuRoundWidth);z-index:0}.layout-columns-aside ul .columns-card{border-radius:0;height:var(--el-columnsMenuHeight);top:0;width:100%}.layout-logo{align-items:center;animation:logoAnimation .3s ease-in-out;display:flex;height:var(--el-columnsLogoHeight);justify-content:center;margin-bottom:8px;margin-top:5px}.layout-logo-medium-img{height:80%;width:auto}.layout-logo:hover img{animation:logoAnimation .3s ease-in-out}