antui-admin/src/components/layout/style/index.less

admin ui for antd

.antui-layout {
	background-color: #d9d9d9;
  &.full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
	.antui-layout-header.ant-layout-header, .antui-layout-footer.ant-layout-footer, .antui-layout-sider.ant-layout-sider, .antui-layout-content.ant-layout-content {
	    background: white;
	}
	.antui-layout-header.ant-layout-header {
	    padding: 0 16px;
	    height: 48px;
	    line-height: 48px;
      position: relative;
	}
	.antui-layout-header-transparent {
		background-color: transparent !important;
		height: 32px !important;
    line-height: 32px !important;
	}
	.antui-layout-header-top {
		border-top: 1px solid #e9e9e9;
	}
	.antui-layout-header-bottom {
		border-bottom: 1px solid #e9e9e9;
	}
	.antui-layout-header-small {
		height: 40px !important;
    line-height: 40px !important;
	}
	.antui-layout-footer {
		min-height: 45px;
    .ant-pagination{
      text-align: center;
    }
	}
	.antui-layout-footer-bottom {
		border-bottom: 1px solid #e9e9e9;
	}
	.antui-layout-footer.ant-layout-footer {
    position: relative;
	  padding: 16px 24px;
	}
	.antui-layout-footer-top {
		border-top: 1px solid #e9e9e9;
	}
	.antui-layout-footer-small {
		padding: 8px 12px !important;;
	}
	.antui-layout-content.ant-layout-content {
    position: relative;
    overflow: auto;
    height: 100%;
	}
	.antui-layout-gutter {
		border-radius: 4px;
		border: 1px solid #e9e9e9;
		&:hover {
			box-shadow: 0 1px 6px rgba(0,0,0,.2);
      border-color: transparent;
		}
	}
	.antui-layout-sider {
		.antui-layout-sider-trigger {
			position: absolute;
		    top: 8px;
		    right: -16px;
		    text-align: center;
		    width: 16px;
		    height: 32px;
		    line-height: 32px;
		    background: #404040;
		    color: #fff;
		    font-size: 12px;
		    border-radius: 0 4px 4px 0;
		    cursor: pointer;
		    transition: background .3s ease;
		    z-index: 1;
		}
	}
}

.antui-layout-drawer {
	height: 100%;
	.rc-drawer {
		position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
		.rc-drawer-content {
			height: 100%;
			position: relative;
		}
		.rc-drawer-sidebar{
			background-color: #fff;
			.antui-layout-drawer-sidebar {
				height: 100%;
			}
		}
	}
  &.fixed {
    .rc-drawer {
      > .rc-drawer-sidebar,
      > .rc-drawer-overlay{
        position: fixed;
        top: 0;
        bottom: 0;
      }
    }
  }
}