Volodymyr Tkach 2 years ago
parent
commit
2a911cf38a
2 changed files with 69 additions and 65 deletions
  1. 14 14
      css/layouts/cp/base.css
  2. 55 51
      css/layouts/cp/example.html

+ 14 - 14
css/layouts/cp/base.css

@@ -43,31 +43,31 @@ body.cp.loading header:before {
 	animation: loading-movement 2s linear infinite;
 }
 
-body.cp header .sidebar,
-body.cp header .content {
+body.cp header .wrap .sidebar,
+body.cp header .wrap .content {
 	height: 100%;
 	position: relative;
 	vertical-align: top;
 }
 
-body.cp header .sidebar {
+body.cp header .wrap .sidebar {
 	float: left;
 	width: 250px;
 }
 
-body.cp header .sidebar.right {
+body.cp header .wrap .sidebar.right {
 	float: right;
 }
 
-body.cp .wrap {
+body.cp .body .wrap {
 	align-items: stretch;
 	display: block;
 	height: 100%;
 	width: 100%;
 }
 
-body.cp .wrap .sidebar,
-body.cp .wrap .content {
+body.cp .body .wrap .sidebar,
+body.cp .body .wrap .content {
 	box-shadow: 0 3px 5px rgb(0 0 0 / 30%);
 	height: 100%;
 	padding-top: 56px;
@@ -76,28 +76,28 @@ body.cp .wrap .content {
 	z-index: 2;
 }
 
-body.cp .wrap .content {
+body.cp .body .wrap .content {
 	z-index: 1;
 }
 
-body.cp .wrap .sidebar {
+body.cp .body .wrap .sidebar {
 	background: #eee;
 	float: left;
 	width: 250px;
 }
 
-body.cp .wrap .sidebar.right {
+body.cp .body .wrap .sidebar.right {
 	float: right;
 }
 
-body.cp .wrap .sidebar .scroll,
-body.cp .wrap .content .scroll {
+body.cp .body .wrap .sidebar .scroll,
+body.cp .body .wrap .content .scroll {
 	height: 100%;
 	overflow: hidden;
 	overflow-y: auto;
 }
 
-body.cp .wrap .sidebar .scroll .padding,
-body.cp .wrap .content .scroll .padding {
+body.cp .body .wrap .sidebar .scroll .padding,
+body.cp .body .wrap .content .scroll .padding {
 	padding: 16px;
 }

+ 55 - 51
css/layouts/cp/example.html

@@ -8,64 +8,68 @@
 		<link rel="stylesheet" href="./../../reset.css">
 		<link rel="stylesheet" href="./base.css">
 	</head>
-	<body class="cp loading">
+	<body class="cp loading1">
 		<header>
-			<div class="sidebar left">
-				Sidebar 1
-			</div>
-			<div class="sidebar right">
-				Sidebar 2
-			</div>
-			<div class="content">
-				Content
+			<div class="wrap">
+				<div class="sidebar left">
+					Sidebar 1
+				</div>
+				<div class="sidebar right">
+					Sidebar 2
+				</div>
+				<div class="content">
+					Content
+				</div>
 			</div>
 		</header>
-		<div class="wrap">
-			<div class="sidebar left">
-				<div class="scroll">
-					<div class="padding">
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
-						Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+		<div class="body">
+			<div class="wrap">
+				<div class="sidebar left">
+					<div class="scroll">
+						<div class="padding">
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+							Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>Sidebar 1<br>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="sidebar right">
-				<div class="scroll">
-					<div class="padding">
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
-						Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+				<div class="sidebar right">
+					<div class="scroll">
+						<div class="padding">
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+							Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>Sidebar 2<br>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="content">
-				<div class="scroll">
-					<div class="padding">
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
-						Content<br>Content<br>Content<br>Content<br>Content<br>
+				<div class="content">
+					<div class="scroll">
+						<div class="padding">
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+							Content<br>Content<br>Content<br>Content<br>Content<br>
+						</div>
 					</div>
 				</div>
 			</div>