diff --git a/components/layout/index.md b/components/layout/index.md index 55e37e7406..8cab65e67f 100644 --- a/components/layout/index.md +++ b/components/layout/index.md @@ -10,7 +10,7 @@ english: Layout ## 设计理念 -
+
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; }