100%
diff --git a/site/common/styles/demo.less b/site/common/styles/demo.less
index ac6a190424..4d728029af 100644
--- a/site/common/styles/demo.less
+++ b/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: "";
-}
\ No newline at end of file
+}
diff --git a/site/common/styles/markdown.less b/site/common/styles/markdown.less
index 5d189ede53..b4d56d2677 100644
--- a/site/common/styles/markdown.less
+++ b/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;
}