Fix site style

components/layout/index.md

@@ -10,7 +10,7 @@ english: Layout
 
 ## 设计理念
 
-<div style="width:80%">
+<div style="width:80%" class="layout-demo">
 <div class="row demo-row">
   <div class="col-24 demo-col demo-col-1">
     100%

site/common/styles/demo.less

@@ -76,7 +76,7 @@
 
 .code-box-meta {
   position: relative;
-  padding: 12px 16px;
+  padding: 16px;
   border-radius: 0 0 6px 6px;
   transition: background-color 0.4s ease;
   width: 100%;
@@ -133,7 +133,8 @@
 .code-box .collapse {
   position: absolute;
   right: 16px;
-  bottom: 18px;
+  top: 50%;
+  margin-top: -9px;
   cursor: pointer;
   width: 18px;
   height: 18px;
@@ -497,4 +498,4 @@
 .code-box-demo .demo-footer:after {
   display: block;
   content: "";
-}
+}

site/common/styles/markdown.less

@@ -180,19 +180,20 @@
   font-size: 13px;
 }
 
+.layout-demo,
 [id^="components-layout-demo-"] {
-  .markdown .demo-row,
+  .demo-row,
   .code-box-demo .demo-row {
       background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%,  transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%,  transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
       overflow: hidden;
   }
-  .markdown .row-flex,
+  .row-flex,
   .code-box-demo .row-flex {
     background: #F5F5F5;
   }
-  .markdown .row > div,
+  .row > div,
   .code-box-demo .row > div,
-  .markdown .row-flex > div,
+  .row-flex > div,
   .code-box-demo .row-flex > div {
     padding: 5px 0;
     text-align: center;
@@ -206,7 +207,7 @@
     background: #6AC2F5;
     border: 1px solid rgba(0, 0, 0, 0.1);
   }
-  .markdown .row .demo-col,
+  .row .demo-col,
   .code-box-demo .row .demo-col {
     text-align: center;
     padding: 40px 0;
@@ -216,41 +217,37 @@
     margin-top: 0;
     margin-bottom: 0;
   }
-  .markdown .row .demo-col-1,
-  .code-box-demo .row .demo-col-1 {
+  .row .demo-col-1,
+  .row .demo-col-1 {
     background: rgba(29, 128, 211, 0.7);
   }
-  .markdown .row .demo-col-2,
+  .row .demo-col-2,
   .code-box-demo .row .demo-col-2 {
     background: rgba(29, 128, 211, 0.5);
   }
-  .markdown .row .demo-col-3,
+  .row .demo-col-3,
   .code-box-demo .row .demo-col-3{
     background: rgba(255, 255, 255, 0.2);
     color: #999;
   }
-  .markdown .row .demo-col-4,
+  .row .demo-col-4,
   .code-box-demo .row .demo-col-4 {
     background: rgba(29, 128, 211, 0.6);
   }
-  .markdown .row .demo-col-5,
+  .row .demo-col-5,
   .code-box-demo .row .demo-col-5 {
     background: rgba(255, 255, 255, 0.5);
     color: #999;
   }
-  .markdown .height-100,
   .code-box-demo .height-100 {
     height: 100px;
   }
-  .markdown .height-50,
   .code-box-demo .height-50 {
     height: 50px;
   }
-  .markdown .height-120,
   .code-box-demo .height-120 {
     height: 120px;
   }
-  .markdown .height-80,
   .code-box-demo .height-80 {
     height: 80px;
   }