site: improve style of component demo toc

yry787 · Jan 19, 2017 · e90189d · e90189d
1 parent df0426b
commit e90189d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 24 deletions.
diff --git a/site/theme/static/common.less b/site/theme/static/common.less
@@ -25,16 +25,15 @@ a {
 
 .main-wrapper {
   background: #fff;
-  width: 92%;
-  margin: 0 auto;
+  margin: 0 48px;
   border-radius: @border-radius-base;
   padding: 24px 0 0;
   margin-bottom: 24px;
   position: relative;
 }
 
 div.main-container {
-  padding: 0 6% 120px 4%;
+  padding: 0 130px 120px 40px;
   margin-left: -1px;
   background: #fff;
   min-height: 500px;

diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
@@ -32,17 +32,9 @@
   transition: all 0.2s ease;
 }
 
-.code-box:hover {
-  box-shadow: 0 2px 7px rgba(0, 0, 0, .2);
-  border-color: transparent;
-  position: relative;
-  z-index: 10;
-  background: #fff;
-}
-
 .code-box:target {
   border: 1px solid fade(@primary-color, 70%);
-  box-shadow: 0 0 4px fade(@primary-color, 50%);
+  z-index: 10;
 }
 
 .code-box {

diff --git a/site/theme/static/responsive.less b/site/theme/static/responsive.less
@@ -166,6 +166,8 @@
   }
 
   .main-container {
+    padding-left: 30px;
+    padding-right: 30px;
     margin-left: 0;
     > .markdown > * {
       width: 100%!important;
@@ -177,11 +179,6 @@
     border-radius: 0;
   }
 
-  .main-container {
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-
   footer {
     text-align: center;
   }

diff --git a/site/theme/static/toc.less b/site/theme/static/toc.less
@@ -1,8 +1,7 @@
 .toc {
   font-size: 14px;
   margin: 24px 0;
-  background: #fbfbfb;
-  border-left: 2px solid #eee;
+  border-left: 1px solid #e9e9e9;
   list-style: none;
 }
 
@@ -23,8 +22,6 @@
 
 .toc a {
   padding-left: 16px;
-  border-left: 2px solid #eee;
-  margin-left: -2px;
   display: block;
   transition: all 0.3s ease;
   white-space: nowrap;
@@ -49,15 +46,14 @@
 
 .demos-anchor {
   color: #aaa;
-  background: #fff;
   font-size: 12px;
-  margin-top: 0;
+  margin-top: -4px;
   a {
     padding-left: 8px;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 90px;
+    max-width: 110px;
   }
 }