@import '~antd/es/style/themes/variable.less'; @dark-menu-catatories-color: rgba(255, 255, 255, 0.65); .mainPane { position: absolute; &.hidden { // display: none; flex: 1 1 0%; // position: relative; z-index: 5; background-color: rgb(247, 247, 247); // min-width: 490px; // max-width: 980px; width: 0; overflow: hidden; transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s; transform: translateX(-1240px); } &.visible { display: block; flex: 1 1 0%; position: absolute; z-index: 30; background-color: #001529; min-width: 500px; max-width: 640px; overflow: hidden; height: 100%; transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s; } .header { width: 100%; height: 40px; line-height: 20px; text-align: center; padding: 0 0 0 18px; display: inline-flex; align-items: center; &-title { color: #fff; padding-left: 12px; } .subheader { color: #fff; display: flex; align-items: center; margin-left: 20px; :global(.@{ant-prefix}icon-menu) { color: #737f97; padding-right: 12px; } } .marks { position: absolute; right: 12px; top: 8px; } } .main { // padding: 32px 0px 0px 32px; padding: 0px 0px 0px 4px; height: 100%; overflow: hidden; box-sizing: border-box; display: flex; &-left { // padding-top: 32px; width: 125px; height: 100%; overflow: hidden auto; box-sizing: border-box; .menu-categories { &.min-cateorites { position: relative; top: 46px; } .categorie-name { border-width: 0px 0px 0px 1px; border-top-style: initial; border-right-style: initial; border-bottom-style: initial; border-top-color: initial; border-right-color: initial; border-bottom-color: initial; border-image: initial; border-left-style: solid; border-left-color: rgb(222, 222, 222); display: flex; align-items: center; &.btn { box-sizing: border-box; outline: medium; background: none; cursor: pointer; font-family: inherit; font-size: inherit; text-decoration: none; transition: all 0.3s ease-out 0s; border: 1px solid transparent; vertical-align: middle; text-align: left; color: rgb(85, 85, 85); // display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0px 12px; height: 40px; line-height: 40px; &:hover { border-left: 2px solid @primary-color; span { color: #fff; } } &:hover, &:link:hover, &:visited:hover { color: #273150; } } img { width: 17px; height: 17px; } span { margin-left: 12px; color: @dark-menu-catatories-color; } &.active { background-color: @primary-color; // border-left: 2px solid @primary-2; transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s; } } } } &-menus { flex: 1 1 0%; height: 100%; overflow: hidden; display: flex; flex-direction: row; margin-left: 12px; &::-webkit-scrollbar { width: 0px; height: 0px; } &-recentAll { flex: 1 1 0%; padding: 0px 32px 32px 0px; overflow: auto; &-menu-group { margin-bottom: 12px; columns: 120px 3; column-gap: 12px; &-items { display: inline-block; margin-bottom: 20px; width: 100%; break-inside: avoid; .title { margin: 0px 0px 8px 0px; padding: 0px; height: 30px; line-height: 30px; font-size: 12px; font-weight: 600; color: #fff; transition: all 250ms linear 0s; } &-menu-item { position: relative; transition: all 300ms ease 0s; display: flex; align-items: center; img { width: 14px; height: 14px; } &-name { box-sizing: border-box; outline: medium; background: none; cursor: pointer; font-family: inherit; font-size: inherit; text-decoration: none; transition: all 0.3s ease-out 0s; border: 1px solid transparent; vertical-align: middle; text-align: left; color: rgba(255, 255, 255, 0.65); display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0px 12px; height: 32px; line-height: 30px; &.pad { padding: 0px 4px; } &:link, &:visited, &:hover { // color: rgb(85, 85, 85); color: #fff; } } } } } } } } }