forked from ddrilling/asb_cloud_front
Вынесены стили для нового каркаса и меню пользователя
This commit is contained in:
parent
ddc6f7840d
commit
411b79ee60
@ -1,8 +1,5 @@
|
|||||||
@import './loader.css';
|
@import './loader.css';
|
||||||
|
|
||||||
@header-height: 64px;
|
|
||||||
@layout-min-height: calc(100vh - @header-height);
|
|
||||||
|
|
||||||
#root, .app{
|
#root, .app{
|
||||||
min-height:100%;
|
min-height:100%;
|
||||||
}
|
}
|
||||||
@ -43,32 +40,6 @@ html {
|
|||||||
box-shadow: 1px 1px 4px #00000033;
|
box-shadow: 1px 1px 4px #00000033;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 50px;
|
|
||||||
height: @header-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .logo {
|
|
||||||
padding: 8px 24px;
|
|
||||||
margin: 0 10px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header .title{
|
|
||||||
flex-grow: 1;
|
|
||||||
color: #fff;
|
|
||||||
padding-left: calc(100vw / 2 - 400px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header button{
|
|
||||||
color: rgb(255, 255, 255);
|
|
||||||
background-color: rgba(0, 0, 0, 0.1);
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-font {
|
.small-font {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
@ -104,16 +75,6 @@ html {
|
|||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sheet{
|
|
||||||
padding: 5px 24px;
|
|
||||||
min-height: calc(@layout-min-height - 15px); // 280px;
|
|
||||||
margin: 0 15px 15px 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site-layout-background {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.border_small{
|
.border_small{
|
||||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
@ -133,10 +94,18 @@ html {
|
|||||||
.well_menu {
|
.well_menu {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
height: 100%;
|
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.table_row_size {
|
tr.table_row_size {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hide-slider {
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
147
src/styles/layout.less
Normal file
147
src/styles/layout.less
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
@header-height: 64px;
|
||||||
|
@layout-min-height: calc(100vh - @header-height);
|
||||||
|
|
||||||
|
.no-select {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 50px;
|
||||||
|
height: @header-height;
|
||||||
|
|
||||||
|
& .logo {
|
||||||
|
padding: 8px 24px;
|
||||||
|
margin: 0 10px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .title {
|
||||||
|
flex-grow: 1;
|
||||||
|
color: #fff;
|
||||||
|
padding-left: calc(100vw / 2 - 400px);
|
||||||
|
.no-select;
|
||||||
|
}
|
||||||
|
|
||||||
|
& button {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@link-color: #FFFC;
|
||||||
|
@active-bg: #c32828;
|
||||||
|
@admin-bg: #900;
|
||||||
|
@admin-active-bg: #413f3d;
|
||||||
|
|
||||||
|
.ant-menu-submenu-popup .ant-menu-sub {
|
||||||
|
color: @link-color;
|
||||||
|
|
||||||
|
& .ant-menu-item > span > a, & a {
|
||||||
|
color: @link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-layout {
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
& .menu-sider {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& .ant-menu-submenu-selected {
|
||||||
|
&.ant-menu-submenu-vertical {
|
||||||
|
background-color: @active-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.ant-menu-submenu-inline {
|
||||||
|
background-color: inherit;
|
||||||
|
& .ant-menu-submenu-title {
|
||||||
|
color: @active-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .ant-menu-submenu-title > .ant-menu-title-content > a,
|
||||||
|
& .ant-menu .ant-menu-item,
|
||||||
|
& .ant-menu .ant-menu-item > span > a {
|
||||||
|
color: @link-color;
|
||||||
|
.no-select;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .sider-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
justify-content: start;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
& .sider-toogle {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: @header-height !important;
|
||||||
|
color: @link-color;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .scrollable {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .ant-menu-dark .ant-menu-inline.ant-menu-sub, & .ant-menu {
|
||||||
|
background: transparent;
|
||||||
|
color: @link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .page-content {
|
||||||
|
overflow-y: auto;
|
||||||
|
// background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .sheet{
|
||||||
|
padding: 15px;
|
||||||
|
// min-height: calc(@layout-min-height - 30px); // 280px;
|
||||||
|
overflow: visible;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-admin {
|
||||||
|
.header {
|
||||||
|
background-color: @admin-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-sider {
|
||||||
|
background-color: @admin-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .menu-sider .ant-menu-submenu-selected.ant-menu-submenu-inline .ant-menu-submenu-title {
|
||||||
|
color: white;
|
||||||
|
& .ant-menu-title-content > a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-layout-background {
|
||||||
|
background: #fff;
|
||||||
|
}
|
10
src/styles/user_menu.less
Normal file
10
src/styles/user_menu.less
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.user-menu {
|
||||||
|
|
||||||
|
& .profile-links {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user