forked from ddrilling/asb_cloud_front
Вынесены стили для нового каркаса и меню пользователя
This commit is contained in:
goodmice
parent
ddc6f7840d
commit
411b79ee60
@ -1,142 +1,111 @@
|
||||
@import './loader.css';
|
||||
|
||||
@header-height: 64px;
|
||||
@layout-min-height: calc(100vh - @header-height);
|
||||
|
||||
#root, .app{
|
||||
min-height:100%;
|
||||
min-height:100%;
|
||||
}
|
||||
|
||||
.ant-layout{
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
|
||||
> .ant-menu {
|
||||
flex: 0;
|
||||
}
|
||||
> .ant-menu {
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mt-30px {
|
||||
margin-top: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.ml-30px {
|
||||
margin-left: 30px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.login_page {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background-color: #9d9d9d;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
background-color: #9d9d9d;
|
||||
}
|
||||
|
||||
.shadow{
|
||||
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);
|
||||
box-shadow: 1px 1px 4px #00000033;
|
||||
}
|
||||
|
||||
.small-font {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.yellow-background {
|
||||
background-color: #FFFF99 !important;
|
||||
background-color: #FFFF99 !important;
|
||||
}
|
||||
|
||||
.lightgray-background {
|
||||
background-color: #AFABAB !important;
|
||||
background-color: #AFABAB !important;
|
||||
}
|
||||
|
||||
.lightpurple-background {
|
||||
background-color: #CCCCFF !important;
|
||||
background-color: #CCCCFF !important;
|
||||
}
|
||||
|
||||
.lightorange-background {
|
||||
background-color: #FFCC99 !important;
|
||||
background-color: #FFCC99 !important;
|
||||
}
|
||||
|
||||
.ph-2 {
|
||||
padding: 2px 10px;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
.mh-2 {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.ant-layout-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.border_small{
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.menu-title,
|
||||
.chart-footer {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0 5px 5px 0;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0 5px 5px 0;
|
||||
}
|
||||
|
||||
.well_menu {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
height: 100%;
|
||||
border-right: 0;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
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