Carbon: doc's scroll & primary color (#7299)

* Carbon: sidenav & table & changelog

* Carbon: doc style update

* Carbon: fix header's bg

* Carbon: use el-scrollbar

* Carbon: gogogo

* Carbon: doc fix scroll bug

* Carbon: update in resize

* the same as lastone

* Carbon: fix nav fade

examples/app.vue

@@ -7,15 +7,19 @@
     margin: 0;
     padding: 0;
     height: 100%;
+    overflow-y: hidden;
   }
 
   #app {
     height: 100%;
     
     @when component {
+      overflow-y: hidden;
+
       .main-cnt {
         padding: 0;
         margin-top: 0;
+        height: 100%;
         min-height: auto;
       }
       .headerWrapper {
@@ -36,7 +40,7 @@
   }
 
   a {
-    color: #1989FA;
+    color: #409EFF;
     text-decoration: none;
   }
 

examples/assets/images/element-logo-small.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#666">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
             <path d="M212.135441,45.1578077 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
         </g>
     </g>

examples/assets/images/element-logo.svg

@@ -5,7 +5,7 @@
     <desc>Created with Sketch.</desc>
     <defs></defs>
     <g id="v2.2.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#666">
+        <g id="首页-默认效果-copy-2" transform="translate(-70.000000, -19.000000)" fill="#409EFF">
             <path d="M212.135441,45.1578077 C212.135441,45.1578077 212.420237,45.1505105 212.960937,45.1578077 C213.501637,45.1651049 213.648851,45.5708556 213.648851,45.5708556 C213.648851,45.5708556 214.733828,47.5665657 215.024677,48.0491434 C215.283608,48.4787133 214.973221,48.4708654 214.901816,48.4638436 C214.902504,48.4628798 214.887095,48.4621914 214.887095,48.4621914 C214.887095,48.4621914 214.893011,48.4630175 214.901816,48.4638436 C214.898652,48.4682495 214.594731,48.4783003 211.447528,48.4621914 C207.058641,47.8665762 206.9073,43.9186638 206.9073,43.9186638 L206.9073,36.8968483 L204.430812,36.8968483 L204.430812,34.2808779 C204.430812,33.9242798 204.84356,33.8678299 204.84356,33.8678299 L206.9073,33.8678299 L206.9073,31.2518594 C206.9073,30.8251809 207.320048,30.7011288 207.320048,30.7011288 C207.320048,30.7011288 208.772646,30.2858779 209.617816,30.0441072 C209.964662,29.9449756 210.071701,30.1503982 210.071701,30.1503982 C210.071701,30.1503982 210.209284,30.0774264 210.209284,30.3927196 L210.209284,34.0055125 L213.786433,34.0055125 C214.134655,34.0055125 214.199181,34.4185605 214.199181,34.4185605 L214.199181,37.034531 L210.209284,37.034531 L210.209284,43.0925678 C210.209284,44.8533913 212.135441,45.1578077 212.135441,45.1578077 L212.135441,45.1578077 Z M201.541576,48.1868261 L199.340253,48.1868261 C198.908381,48.1868261 198.927505,47.6360955 198.927505,47.6360955 L198.927505,37.4475789 C198.927505,36.8286954 198.102009,36.621483 198.102009,36.621483 L193.561781,36.621483 C192.884462,36.621483 192.873868,37.4475789 192.873868,37.4475789 L192.873868,47.7737781 C192.873868,48.1787028 192.46112,48.1868261 192.46112,48.1868261 L190.259797,48.1868261 C189.775782,48.1868261 189.847049,47.6360955 189.847049,47.6360955 L189.847049,34.8316085 C189.847049,33.803119 191.085293,33.5924646 191.085293,33.5924646 L200.71608,33.5924646 C201.677783,33.5924646 201.954324,34.8316085 201.954324,34.8316085 L201.954324,47.4984128 C201.954324,48.2186308 201.541576,48.1868261 201.541576,48.1868261 L201.541576,48.1868261 Z M185.857152,42.4041546 L177.327027,42.4041546 L177.327027,44.4693944 C177.327027,45.2135691 178.290106,45.433173 178.290106,45.433173 L185.169239,45.433173 C185.658758,45.433173 185.994735,45.846221 185.994735,45.846221 C185.994735,45.846221 186.595008,47.0951403 186.820231,47.6360955 C187.045454,48.1770506 186.407483,48.1868261 186.407483,48.1868261 L176.088783,48.1868261 C174.846136,48.1868261 174.575374,46.6723169 174.575374,46.6723169 L174.575374,34.9692911 C174.575374,34.2962983 175.538452,34.0055125 175.538452,34.0055125 L185.857152,34.0055125 C186.894113,34.0055125 187.095396,35.2446564 187.095396,35.2446564 L187.095396,41.1650107 C187.095396,42.1638983 185.857152,42.4041546 185.857152,42.4041546 L185.857152,42.4041546 Z M184.343743,37.4475789 C184.343743,37.4475789 184.257066,36.7591657 183.65583,36.7591657 L178.01494,36.7591657 C178.01494,36.7591657 177.327027,36.9437981 177.327027,37.4475789 L177.327027,38.9620882 C177.327027,38.9620882 177.346839,39.6505014 178.01494,39.6505014 L183.65583,39.6505014 C183.65583,39.6505014 184.343743,39.4804634 184.343743,38.8244055 L184.343743,37.4475789 L184.343743,37.4475789 Z M171.410972,48.1868261 L169.20965,48.1868261 C168.919213,48.1868261 168.796902,47.7737781 168.796902,47.7737781 L168.796902,37.4475789 C168.796902,36.8072169 167.971406,36.621483 167.971406,36.621483 L165.907666,36.621483 C165.331882,36.621483 165.219752,37.4475789 165.219752,37.4475789 L165.219752,47.7737781 C165.219752,48.1163326 164.807004,48.1868261 164.807004,48.1868261 L162.605682,48.1868261 C162.29956,48.1868261 162.192934,47.7737781 162.192934,47.7737781 L162.192934,37.4475789 C162.192934,36.7928979 161.367438,36.621483 161.367438,36.621483 L159.303698,36.621483 C158.673982,36.621483 158.615784,37.4475789 158.615784,37.4475789 L158.615784,47.7737781 C158.615784,48.2157395 158.203036,48.1868261 158.203036,48.1868261 L156.001714,48.1868261 C155.589378,48.1868261 155.588966,47.7737781 155.588966,47.7737781 L155.588966,34.6939258 C155.588966,33.9362582 156.689627,33.5924646 156.689627,33.5924646 L170.447894,33.5924646 C171.55227,33.5924646 171.82372,34.9692911 171.82372,34.9692911 L171.82372,47.7737781 C171.82372,48.249334 171.410972,48.1868261 171.410972,48.1868261 L171.410972,48.1868261 Z M151.461486,42.4041546 L142.93136,42.4041546 L142.93136,44.4693944 C142.93136,45.2135691 143.894439,45.433173 143.894439,45.433173 L150.773572,45.433173 C151.263092,45.433173 151.599068,45.846221 151.599068,45.846221 C151.599068,45.846221 152.199204,47.0951403 152.424564,47.6360955 C152.649787,48.1770506 152.011816,48.1868261 152.011816,48.1868261 L141.693117,48.1868261 C140.45047,48.1868261 140.179707,46.6723169 140.179707,46.6723169 L140.179707,34.9692911 C140.179707,34.2962983 141.142786,34.0055125 141.142786,34.0055125 L151.461486,34.0055125 C152.498446,34.0055125 152.69973,35.2446564 152.69973,35.2446564 L152.69973,41.1650107 C152.69973,42.1638983 151.461486,42.4041546 151.461486,42.4041546 L151.461486,42.4041546 Z M149.948076,37.4475789 C149.948076,37.4475789 149.861399,36.7591657 149.260163,36.7591657 L143.619274,36.7591657 C143.619274,36.7591657 142.93136,36.9437981 142.93136,37.4475789 L142.93136,38.9620882 C142.93136,38.9620882 142.951172,39.6505014 143.619274,39.6505014 L149.260163,39.6505014 C149.260163,39.6505014 149.948076,39.4804634 149.948076,38.8244055 L149.948076,37.4475789 L149.948076,37.4475789 Z M138.115967,48.1868261 L132.887826,48.1868261 C132.887826,48.1868261 129.061927,48.0061865 128.760346,44.1940291 C128.748239,40.2790228 128.760346,28.0851583 128.760346,28.0851583 L131.236834,28.0851583 C131.236834,28.0851583 132.06233,28.0701509 132.06233,28.9112543 L132.06233,43.3679331 C132.06233,43.3679331 132.350015,44.5638447 133.988487,45.020125 C135.8398,45.0107626 136.18981,45.020125 136.18981,45.020125 C136.18981,45.020125 136.907303,44.790195 137.428054,45.7085383 C137.948804,46.6268816 138.528715,47.6360955 138.528715,47.6360955 C138.528715,47.6360955 138.61154,48.1868261 138.115967,48.1868261 L138.115967,48.1868261 Z M111.562513,47.3607302 L111.562513,29.1866196 C111.562513,28.380763 112.250426,28.222841 112.250426,28.222841 L125.183197,28.222841 C125.906469,28.222841 125.595945,29.0489369 125.595945,29.0489369 C125.595945,29.0489369 125.192827,30.166094 124.908031,30.7011288 C124.623235,31.2361636 124.082535,31.2518594 124.082535,31.2518594 L115.689993,31.2518594 C114.908523,31.2518594 114.864497,31.9402727 114.864497,31.9402727 L114.864497,36.4838003 L124.357701,36.4838003 C124.914635,36.4838003 124.632866,37.1722136 124.632866,37.1722136 C124.632866,37.1722136 123.921839,38.6889258 123.669787,39.0997708 C123.417736,39.5106159 122.844291,39.5128188 122.844291,39.5128188 L114.864497,39.5128188 L114.864497,44.3317117 C114.864497,44.988458 115.55241,45.1578077 115.55241,45.1578077 L124.357701,45.1578077 C124.996222,45.1578077 125.183197,45.5708556 125.183197,45.5708556 C125.183197,45.5708556 126.055196,46.9323994 126.421441,47.4984128 C126.787823,48.0644262 126.283858,48.1868261 126.283858,48.1868261 L112.388009,48.1868261 C111.814151,48.1868261 111.562513,47.3607302 111.562513,47.3607302 Z M103.416502,46.2175511 C103.407008,47.7945682 102.587841,48.1463474 102.587841,48.1463474 C102.587841,48.1463474 88.4520478,56.3145087 87.5329956,56.8262751 C86.622336,57.2171561 86.0136703,56.8262751 86.0136703,56.8262751 C86.0136703,56.8262751 71.2225706,48.2479572 70.6826962,47.8708444 C70.1426843,47.4937316 70.1301643,46.9063774 70.1301643,46.9063774 C70.1301643,46.9063774 70.1450232,29.9199174 70.1301643,29.1333364 C70.1153053,28.3466177 71.0969576,27.7555461 71.0969576,27.7555461 L85.8755373,19.2134387 C86.7853714,18.7332016 87.6711286,19.2134387 87.6711286,19.2134387 C87.6711286,19.2134387 100.726623,26.8020937 102.173442,27.6177257 C103.591507,28.2919577 103.416502,29.6843424 103.416502,29.6843424 C103.416502,29.6843424 103.425307,44.7519192 103.416502,46.2175511 L103.416502,46.2175511 Z M97.5160105,29.1691339 C94.4900173,27.4274483 87.3615842,23.2971063 87.3615842,23.2971063 C87.3615842,23.2971063 86.6661039,22.9212326 85.9517747,23.2971063 L74.3487406,29.98215 C74.3487406,29.98215 73.5780025,30.4449014 73.589697,31.0604805 C73.6013915,31.6760597 73.589697,44.9698708 73.589697,44.9698708 C73.589697,44.9698708 73.5994654,45.4295932 74.0234951,45.7246472 C74.4473873,46.0197011 86.0601898,52.7332451 86.0601898,52.7332451 C86.0601898,52.7332451 86.538152,53.0391759 87.2530315,52.7332451 C87.9746526,52.3327262 99.0730335,45.9402582 99.0730335,45.9402582 C99.0730335,45.9402582 99.7162325,45.6648929 99.7236619,44.4307056 C99.7257257,44.0747959 99.7265512,42.6932881 99.7266887,40.9575229 L86.6600502,48.8752394 L86.6600502,45.846221 C86.6600502,44.6021205 87.6231289,43.7809811 87.6231289,43.7809811 L99.1807607,36.8165793 C99.6168978,36.3611251 99.7068768,35.6315447 99.7254505,35.3556287 C99.7250378,34.0904627 99.7244874,32.9852841 99.7240747,32.2851678 L86.6600502,40.2012321 L86.6600502,37.034531 C86.6600502,35.7904305 87.4855462,35.2446564 87.4855462,35.2446564 L97.5160105,29.1691339 Z" id="Shape-Copy"></path>
         </g>
     </g>

examples/components/footer-nav.vue

@@ -41,10 +41,10 @@
     transition: .3s;
     
     &:hover {
-      color: #1989fa;
+      color: #409EFF;
      
       & i {
-        color: #1989fa;
+        color: #409EFF;
       }
     }
   }

examples/components/header.vue

@@ -158,7 +158,7 @@
       &.acive {
         font-weight: normal;
         opacity: 1;
-        color: #1989fa;
+        color: #409EFF;
       }
     }
 
@@ -215,7 +215,7 @@
 
     @when active {
       span, i {
-        color: #1989FA;
+        color: #409EFF;
       }
       i {
         transform: rotateZ(180deg) translateY(2px) scale(.6);
@@ -224,7 +224,7 @@
 
     &:hover {
       span, i {
-        color: #1989FA;
+        color: #409EFF;
       }
     }
   }
@@ -267,7 +267,7 @@
 <template>
   <div
     class="headerWrapper"
-    :class="{ 'is-hidden': !visible }">
+    :class="{ 'is-hidden': !visible && !isComponentPage }">
     <header class="header"
       ref="header"
       :style="headerStyle"

examples/components/side-nav.vue

@@ -33,7 +33,7 @@
         font-weight: bold;
 
         &.active {
-          color: #1989FA;
+          color: #409EFF;
         }
       }
 
@@ -51,7 +51,7 @@
 
           &:hover,
           &.active {
-            color: #1989FA;
+            color: #409EFF;
           }
         }
       }

examples/docs/en-US/checkbox.md

@@ -309,7 +309,7 @@ Checkbox with button styles.
 | min     | minimum number of checkbox checked   | number    |       —        |     —    |
 | max     | maximum number of checkbox checked   | number    |       —        |     —    |
 |text-color | font color when button is active | string   | — | #ffffff   |
-|fill  | border and background color when button is active | string   | — | #1989fa   |
+|fill  | border and background color when button is active | string   | — | #409EFF   |
 
 ### Checkbox-group Events
 | Event Name | Description | Parameters |

examples/docs/en-US/color-picker.md

@@ -2,7 +2,7 @@
   export default {
     data() {
       return {
-        color1: '#1989fa',
+        color1: '#409EFF',
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
         color4: '#20a0ff'
@@ -61,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color1: '#1989fa',
+        color1: '#409EFF',
         color2: null
       }
     }

examples/docs/en-US/color.md

@@ -25,7 +25,7 @@
     }
   }
   .bg-blue {
-    background-color: #1989fa;
+    background-color: #409EFF;
   }
 
   .bg-success {
@@ -81,7 +81,7 @@ The main color of Element is bright and friendly blue.
 
 <el-row :gutter="12">
   <el-col :span="6">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
+    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
 

examples/docs/en-US/menu.md

@@ -276,7 +276,7 @@ Vertical NavMenu could be collapsed.
 | collapse  | whether the menu is collapsed (available only in vertical mode) | boolean  |   —   | false |
 | background-color  | background color of Menu (hex format) | string |   —   | #ffffff |
 | text-color  | text color of Menu (hex format) | string |   —   | #2d2f33 |
-| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #1989fa |
+| active-text-color  | text color of currently active menu item (hex format) | string |   —   | #409EFF |
 | theme     | theme color   | string    | light/dark | light |
 | default-active | index of currently active menu | string    | — | — |
 | default-openeds | array that contains keys of currently active sub-menus  | Array    | — | — |

examples/docs/en-US/radio.md

@@ -214,7 +214,7 @@ name | native 'name' attribute | string    |      —         |     —
 size | the size of radio buttons or bordered radios | string | medium / small / mini | —
 disabled  | whether the nesting radios are disabled | boolean   | — | false
 text-color | font color when button is active | string   | — | #ffffff   |
-fill  | border and background color when button is active | string   | — | #1989fa   |
+fill  | border and background color when button is active | string   | — | #409EFF   |
 
 ### Radio-group Events
 

examples/docs/zh-CN/checkbox.md

@@ -307,7 +307,7 @@
 | min     | 可被勾选的 checkbox 的最小数量   | number    |       —        |     —    |
 | max     | 可被勾选的 checkbox 的最大数量   | number    |       —        |     —    |
 | text-color  | 按钮形式的 Checkbox 激活时的文本颜色    | string   | — | #ffffff   |
-| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #1989fa   |
+| fill  | 按钮形式的 Checkbox 激活时的填充色和边框色    | string   | — | #409EFF   |
 
 ### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |

examples/docs/zh-CN/color-picker.md

@@ -2,7 +2,7 @@
   export default {
     data() {
       return {
-        color1: '#1989fa',
+        color1: '#409EFF',
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
         color4: '#20a0ff'
@@ -61,7 +61,7 @@
   export default {
     data() {
       return {
-        color1: '#1989fa',
+        color1: '#409EFF',
         color2: null
       }
     }

examples/docs/zh-CN/color.md

@@ -25,7 +25,7 @@
     }
   }
   .bg-blue {
-    background-color: #1989fa;
+    background-color: #409EFF;
   }
 
   .bg-success {
@@ -82,7 +82,7 @@ Element 主要品牌颜色是鲜艳、友好的蓝色。
 
 <el-row :gutter="12">
   <el-col :span="6">
-    <div class="demo-color-box bg-blue">Blue<div class="value">#1989FA</div></div>
+    <div class="demo-color-box bg-blue">Blue<div class="value">#409EFF</div></div>
   </el-col>
 </el-row>
 

examples/docs/zh-CN/menu.md

@@ -277,7 +277,7 @@
 | collapse  | 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）| boolean  |   —   | false |
 | background-color  | 菜单的背景色（仅支持 hex 格式） | string |   —   | #ffffff |
 | text-color  | 菜单的文字颜色（仅支持 hex 格式） | string |   —   | #2d2f33 |
-| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #1989fa |
+| active-text-color  | 当前激活菜单的文字颜色（仅支持 hex 格式） | string |   —   | #409EFF |
 | default-active | 当前激活菜单的 index | string    | — | — |
 | default-openeds | 当前打开的submenu的 key 数组 | Array    | — | — |
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |

examples/docs/zh-CN/radio.md

@@ -214,7 +214,7 @@
 | size     | 单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效   | string  | medium / small / mini |    —     |
 | disabled  | 是否禁用    | boolean   | — | false   |
 | text-color  | 按钮形式的 Radio 激活时的文本颜色    | string   | — | #ffffff   |
-| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #1989fa   |
+| fill  | 按钮形式的 Radio 激活时的填充色和边框色    | string   | — | #409EFF   |
 
 ### Radio-group Events
 | 事件名称 | 说明 | 回调参数 |

examples/pages/template/component.tpl

 <style>
+  .page-component__scroll {
+    height: calc(100% - 80px);
+    margin-top: 80px;
+
+    .el-scrollbar__wrap {
+      overflow-x: auto;
+    }
+  }
+
   .page-component {
     box-sizing: border-box;
     height: 100%;
@@ -6,27 +15,30 @@
     &.page-container {
       padding: 0;
     }
-  
+
     .page-component__nav {
       width: 240px;
       position: fixed;
       top: 0;
       bottom: 0;
-      overflow: auto;
-      padding-top: 80px;
+      margin-top: 80px;
       transition: padding-top .3s;
-      
+
+      .el-scrollbar__wrap {
+        height: 100%;
+      }
+
       &.is-extended {
         padding-top: 0;
       }
     }
-    
+
     .side-nav {
       height: 100%;
       padding-top: 50px;
       padding-bottom: 50px;
       padding-right: 0;
-      
+
       & > ul {
         padding-bottom: 50px;
       }
@@ -35,10 +47,12 @@
     .page-component__content {
       padding-left: 270px;
       padding-bottom: 100px;
+      box-sizing: border-box;
     }
-    
+
     .content {
-      padding-top: 130px;
+      padding-top: 50px;
+
       > {
         h3 {
           margin: 55px 0 20px;
@@ -87,6 +101,7 @@
         }
       }
     }
+
     .page-component-up {
       background-color: #fff;
       position: fixed;
@@ -99,7 +114,7 @@
       box-shadow: 0 0 6px rgba(0,0,0, .12);
 
       i {
-        color: #1989fa;
+        color: #409EFF;
         display: block;
         line-height: 40px;
         text-align: center;
@@ -118,12 +133,11 @@
   }
 </style>
 <template>
+  <el-scrollbar class="page-component__scroll" ref="componentScrollBar">
   <div class="page-container page-component">
-    <div
-      class="page-component__nav"
-      :class="{ 'is-extended': !showHeader }">
+    <el-scrollbar class="page-component__nav">
       <side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
-    </div>
+    </el-scrollbar>
     <div class="page-component__content">
       <router-view class="content"></router-view>
       <footer-nav></footer-nav>
@@ -140,6 +154,7 @@
       </div>
     </transition>
   </div>
+  </el-scrollbar>
 </template>
 <script>
   import bus from '../../bus';
@@ -154,9 +169,20 @@
         hover: false,
         showBackToTop: false,
         scrollTop: 0,
-        showHeader: true
+        showHeader: true,
+        componentScrollBar: null,
+        componentScrollBoxElement: null
       };
     },
+    watch: {
+      '$route.path'() {
+        // 触发伪滚动条更新
+        this.componentScrollBox.scrollTop = 0;
+        this.$nextTick(() => {
+          this.componentScrollBar.update();
+        });
+      }
+    },
     methods: {
       toTop() {
         this.hover = false;
@@ -187,11 +213,13 @@
       });
     },
     mounted() {
+      this.componentScrollBar = this.$refs.componentScrollBar;
+      this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
       this.throttledScrollHandler = throttle(300, this.handleScroll);
-      document.addEventListener('scroll', this.throttledScrollHandler);
+      this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
     },
     beforeDestroy() {
-      document.removeEventListener('scroll', this.throttledScrollHandler);
+      this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
     }
   };
 </script>

packages/theme-chalk/src/common/var.scss

@@ -12,31 +12,31 @@ $--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1);
 $--color-white: #fff;
 $--color-black: #000;
 
-$--color-primary: #1989fa;
-$--color-primary-light-1: mix($--color-white, $--color-primary, 10%); // #3095fb#
-$--color-primary-light-2: mix($--color-white, $--color-primary, 20%); // #47a1fb#
-$--color-primary-light-3: mix($--color-white, $--color-primary, 30%); // #5eadfc#
-$--color-primary-light-4: mix($--color-white, $--color-primary, 40%); // #75b8fc#
-$--color-primary-light-5: mix($--color-white, $--color-primary, 50%); // #8cc4fd#
-$--color-primary-light-6: mix($--color-white, $--color-primary, 60%); // #a3d0fd#
-$--color-primary-light-7: mix($--color-white, $--color-primary, 70%); // #badcfe#
-$--color-primary-light-8: mix($--color-white, $--color-primary, 80%); // #d1e7fe#
-$--color-primary-light-9: mix($--color-white, $--color-primary, 90%); // #e8f3ff#
+$--color-primary: #69B3FF;
+$--color-primary-light-1: mix($--color-white, $--color-primary, 10%);
+$--color-primary-light-2: mix($--color-white, $--color-primary, 20%);
+$--color-primary-light-3: mix($--color-white, $--color-primary, 30%);
+$--color-primary-light-4: mix($--color-white, $--color-primary, 40%);
+$--color-primary-light-5: mix($--color-white, $--color-primary, 50%);
+$--color-primary-light-6: mix($--color-white, $--color-primary, 60%);
+$--color-primary-light-7: mix($--color-white, $--color-primary, 70%);
+$--color-primary-light-8: mix($--color-white, $--color-primary, 80%);
+$--color-primary-light-9: mix($--color-white, $--color-primary, 90%);
 
 $--color-success: #67c23a;
 $--color-warning: #eb9e05;
 $--color-danger: #fa5555;
 $--color-info: #878d99;
 
-$--color-success-light: mix($--color-white, $--color-success, 80%); // #e1f3d8#
-$--color-warning-light: mix($--color-white, $--color-warning, 80%); // #fbeccd#
-$--color-danger-light: mix($--color-white, $--color-danger, 80%); // #fedddd#
-$--color-info-light: mix($--color-white, $--color-info, 80%); // #e7e8eb#
+$--color-success-light: mix($--color-white, $--color-success, 80%);
+$--color-warning-light: mix($--color-white, $--color-warning, 80%);
+$--color-danger-light: mix($--color-white, $--color-danger, 80%);
+$--color-info-light: mix($--color-white, $--color-info, 80%);
 
-$--color-success-lighter: mix($--color-white, $--color-success, 90%); // #f0f9ec#
-$--color-warning-lighter: mix($--color-white, $--color-warning, 90%); // #fdf5e6#
-$--color-danger-lighter: mix($--color-white, $--color-danger, 90%); // #ffeeee#
-$--color-info-lighter: mix($--color-white, $--color-info, 90%); // #f3f4f5#
+$--color-success-lighter: mix($--color-white, $--color-success, 90%);
+$--color-warning-lighter: mix($--color-white, $--color-warning, 90%);
+$--color-danger-lighter: mix($--color-white, $--color-danger, 90%);
+$--color-info-lighter: mix($--color-white, $--color-info, 90%);
 
 $--color-text-primary: #2d2f33;
 $--color-text-regular: #5a5e66;

packages/theme-chalk/src/input.scss

@@ -6,6 +6,7 @@
   font-size: $--font-size-base;
   display: inline-block;
   width: 100%;
+  @include scroll-bar;
 
   @include e(inner) {
     -webkit-appearance: none;

packages/theme-chalk/src/mixins/mixins.scss

@@ -22,7 +22,6 @@
   &::-webkit-scrollbar {
     z-index: 11;
     width: 6px;
-    background: black;
 
     &:horizontal {
       height: 6px;

packages/theme-chalk/src/scrollbar.scss

@@ -8,7 +8,7 @@
   &:hover,
   &:active,
   &:focus {
-    .el-scrollbar__bar {
+    > .el-scrollbar__bar {
       opacity: 1;
       transition: opacity 340ms ease-out;
     }
@@ -16,6 +16,7 @@
 
   @include e(wrap) {
     overflow: scroll;
+    height: 100%;
 
     @include m(hidden-default) {
       &::-webkit-scrollbar {