diff --git a/package.json b/package.json
index b7fc699d..d3756086 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-theme-default",
-  "version": "1.0.1",
+  "version": "1.0.9",
   "description": "Element component default theme.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -31,7 +31,5 @@
     "gulp-postcss": "^6.1.1",
     "postcss-salad": "^1.0.5"
   },
-  "dependencies": {
-    "vue-popup": "^0.2.9"
-  }
+  "dependencies": {}
 }
diff --git a/src/alert.css b/src/alert.css
index a5ce5b8e..461c5f10 100644
--- a/src/alert.css
+++ b/src/alert.css
@@ -35,7 +35,7 @@
 
     @e content {
       display: table-cell;
-      padding-left: 8px;
+      padding: 0 8px;
     }
 
     @e icon {
diff --git a/src/button.css b/src/button.css
index 941b0b7f..eab19572 100644
--- a/src/button.css
+++ b/src/button.css
@@ -23,7 +23,8 @@
     
     @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), var(--button-border-radius);
 
-    &:hover {
+    &:hover,
+    &:focus {
       color: var(--color-primary);
       border-color: @color;
     }
@@ -45,7 +46,8 @@
     }
 
     @when plain {
-      &:hover {
+      &:hover,
+      &:focus {
         background: #fff;
         border-color: var(--color-primary);
         color: var(--color-primary);
@@ -66,7 +68,8 @@
 
     @when disabled {
       &,
-      &:hover {
+      &:hover,
+      &:focus {
         color: var(--button-disabled-color);
         cursor: not-allowed;
         background-image: none;
@@ -80,7 +83,8 @@
 
       &.is-plain {
         &,
-        &:hover {
+        &:hover,
+        &:focus {
           background-color: #fff;
           border-color: #d3dce6;
           color: #C0CCDA;
@@ -135,7 +139,8 @@
       padding-left: 0;
       padding-right: 0;
 
-      &:hover {
+      &:hover,
+      &:focus {
         color: tint(var(--color-primary), var(--button-hover-tint-percent));
       }
       &:active {
@@ -147,6 +152,7 @@
   @b button-group {
     @utils-clearfix;
     display: inline-block;
+    vertical-align: middle;
 
     & .el-button {
       float: left;
@@ -171,6 +177,7 @@
       }
 
       &:hover,
+      &:focus,
       &:active {
         z-index: 1;
       }
diff --git a/src/carousel-item.css b/src/carousel-item.css
new file mode 100644
index 00000000..8991757b
--- /dev/null
+++ b/src/carousel-item.css
@@ -0,0 +1,45 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b carousel {
+    @e item {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      transition: .4s ease-in-out;
+      overflow: hidden;
+
+      @modifier card {
+        width: 50%;
+        z-index: calc(var(--index-normal) - 1);
+        &.is-in-stage {
+          cursor: pointer;
+          z-index: var(--index-normal);
+          &:hover .el-carousel__mask,
+          &.is-hover .el-carousel__mask {
+            opacity: 0.12;
+          }
+        }
+        &.is-active {
+          z-index: calc(var(--index-normal) + 1);
+        }
+      }
+    }
+
+    @e mask {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      background-color: var(--color-white);
+      opacity: 0.24;
+      transition: .2s;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/carousel.css b/src/carousel.css
new file mode 100644
index 00000000..467b09e2
--- /dev/null
+++ b/src/carousel.css
@@ -0,0 +1,116 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+
+  @b carousel {
+    overflow-x: hidden;
+    position: relative;
+
+    @e container {
+      position: relative;
+      height: 300px;
+    }
+
+    @e arrow {
+      border: none;
+      outline: none;
+      padding: 0;
+      margin: 0;
+      size: var(--carousel-arrow-size);
+      cursor: pointer;
+      transition: .3s;
+      border-radius: 50%;
+      background-color: var(--carousel-arrow-background);
+      color: var(--color-white);
+      position: absolute;
+      top: 50%;
+      z-index: 10;
+      transform: translateY(-50%);
+      text-align: center;
+      font-size: var(--carousel-arrow-font-size);
+
+      @modifier left {
+        left: 16px;
+      }
+
+      @modifier right {
+        right: 16px;
+      }
+
+      &:hover {
+        background-color: var(--carousel-arrow-hover-background);
+      }
+
+      & i {
+        cursor: pointer;
+      }
+    }
+
+    @e indicators {
+      position: absolute;
+      list-style: none;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      margin: 0;
+      padding: 0;
+
+      @modifier outside {
+        bottom: calc(var(--carousel-indicator-height) + var(--carousel-indicator-padding-vertical) * 2);
+        text-align: center;
+        position: static;
+        transform: none;
+        .el-carousel__indicator:hover button {
+          opacity: 0.64;
+        }
+        button {
+          background-color: var(--carousel-indicator-out-color);
+          opacity: 0.24;
+        }
+      }
+    }
+
+    @e indicator {
+      display: inline-block;
+      background-color: transparent;
+      padding: var(--carousel-indicator-padding-vertical) var(--carousel-indicator-padding-horizontal);
+      cursor: pointer;
+
+      &:hover button {
+        opacity: 0.72;
+      }
+
+      @when active {
+        button {
+          opacity: 1;
+        }
+      }
+    }
+
+    @e button {
+      display: block;
+      opacity: 0.48;
+      size: var(--carousel-indicator-width) var(--carousel-indicator-height);
+      background-color: var(--color-white);
+      border: none;
+      outline: none;
+      padding: 0;
+      margin: 0;
+      cursor: pointer;
+      transition: .3s;
+    }
+  }
+
+  .carousel-arrow-left-enter,
+  .carousel-arrow-left-leave-active {
+    transform: translateY(-50%) translateX(-10px);
+    opacity: 0;
+  }
+
+  .carousel-arrow-right-enter,
+  .carousel-arrow-right-leave-active {
+    transform: translateY(-50%) translateX(10px);
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/checkbox.css b/src/checkbox.css
index ca9fadcb..c75334ba 100644
--- a/src/checkbox.css
+++ b/src/checkbox.css
@@ -19,6 +19,83 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
+
+      @when disabled {
+        .el-checkbox__inner {
+          background-color: var(--checkbox-disabled-input-fill);
+          border-color: var(--checkbox-disabled-input-border-color);
+          cursor: not-allowed;
+
+          &::after {
+            cursor: not-allowed;
+            border-color: var(--checkbox-disabled-icon-color);
+          }
+
+          & + .el-checkbox__label {
+            cursor: not-allowed;
+          }
+        }
+        &.is-checked {
+          .el-checkbox__inner {
+            background-color: var(--checkbox-disabled-checked-input-fill);
+            border-color: var(--checkbox-disabled-checked-input-border-color);
+
+            &::after {
+              border-color: var(--checkbox-disabled-checked-icon-color);
+            }
+          }
+        }
+        &.is-indeterminate {
+          .el-checkbox__inner {
+            background-color: var(--checkbox-disabled-checked-input-fill);
+            border-color: var(--checkbox-disabled-checked-input-border-color);
+
+            &::before {
+              border-color: var(--checkbox-disabled-checked-icon-color);
+            }
+          }
+        }
+        & + .el-checkbox__label {
+          color: var(--disabled-color-base);
+          cursor: not-allowed;
+        }
+      }
+      @when checked {
+        .el-checkbox__inner {
+          background-color: var(--checkbox-checked-input-fill);
+          border-color: var(--checkbox-checked-input-border-color);
+
+          &::after {
+            transform: rotate(45deg) scaleY(1);
+          }
+        }
+      }
+      @when focus {
+        .el-checkbox__inner {
+          border-color: var(--checkbox-input-border-color-hover);
+        }
+      }
+      @when indeterminate {
+        .el-checkbox__inner {
+          background-color: var(--checkbox-checked-input-fill);
+          border-color: var(--checkbox-checked-input-border-color);
+
+          &::before {
+            content: '';
+            position: absolute;
+            display: block;
+            border: 1px solid var(--checkbox-checked-icon-color);
+            margin-top: -1px;
+            left: 3px;
+            right: 3px;
+            top: 50%;
+          }
+
+          &::after {
+            display: none;
+          }
+        }
+      }
     }
     @e inner {
       display: inline-block;
@@ -31,11 +108,12 @@
       transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
                   background-color .25s cubic-bezier(.71,-.46,.29,1.46);
 
-      &:not(.is-disabled):hover {
+      &:hover {
         border-color: var(--checkbox-input-border-color-hover);
       }
 
       &::after {
+        box-sizing: content-box;
         content: "";
         border: 2px solid var(--checkbox-checked-icon-color);
         border-left: 0;
@@ -49,72 +127,6 @@
         transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
         transform-origin: center;
       }
-
-      @when disabled {
-        background-color: var(--checkbox-disabled-input-fill);
-        border-color: var(--checkbox-disabled-input-border-color);
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          border-color: var(--checkbox-disabled-icon-color);
-        }
-
-        & + .el-checkbox__label {
-          cursor: not-allowed;
-        }
-      }
-
-      @when checked {
-        background-color: var(--checkbox-checked-input-fill);
-        border-color: var(--checkbox-checked-input-border-color);
-
-        &::after {
-          transform: rotate(45deg) scaleY(1);
-        }
-      }
-
-      @when focus {
-        border-color: var(--checkbox-input-border-color-hover);
-      }
-
-      &.is-disabled.is-checked {
-        background-color: var(--checkbox-disabled-checked-input-fill);
-        border-color: var(--checkbox-disabled-checked-input-border-color);
-
-        &::after {
-          border-color: var(--checkbox-disabled-checked-icon-color);
-        }
-      }
-
-      @when indeterminate {
-        background-color: var(--checkbox-checked-input-fill);
-        border-color: var(--checkbox-checked-input-border-color);
-
-        &::before {
-          content: '';
-          position: absolute;
-          display: block;
-          border: 1px solid var(--checkbox-checked-icon-color);
-          margin-top: -1px;
-          left: 3px;
-          right: 3px;
-          top: 50%;
-        }
-
-        &::after {
-          display: none;
-        }
-      }
-
-      &.is-disabled.is-indeterminate {
-        background-color: var(--checkbox-disabled-checked-input-fill);
-        border-color: var(--checkbox-disabled-checked-input-border-color);
-
-        &::before {
-          border-color: var(--checkbox-disabled-checked-icon-color);
-        }
-      }
     }
 
     @e original {
diff --git a/src/col.css b/src/col.css
index b7ebff88..e783bf25 100644
--- a/src/col.css
+++ b/src/col.css
@@ -7,42 +7,57 @@
 }
 
 @for $i from 1 to 24 {
-  .el-col-$i,
-  .el-col-xs-$i {
+  .el-col-$i {
     width: calc(1 / 24 * $(i) * 100)%;
   }
-  .el-col-offset-$i,
-  .el-col-xs-offset-$i {
+  .el-col-offset-$i {
     margin-left: calc(1 / 24 * $(i) * 100)%;
   }
-  .el-col-pull-$i,
-  .el-col-xs-pull-$i {
+  .el-col-pull-$i {
     position: relative;
     right: calc(1 / 24 * $(i) * 100)%;
   }
-  .el-col-push-$i,
-  .el-col-xs-push-$i {
+  .el-col-push-$i {
     position: relative;
     left: calc(1 / 24 * $(i) * 100)%;
   }
 }
 
+@media (max-width: 768px) {
+  @for $i from 1 to 24 {
+    .el-col-xs-$i {
+      width: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-xs-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
+  }
+}
+
 @media (min-width: 768px) {
   @for $i from 1 to 24 {
     .el-col-sm-$i {
       width: calc(1 / 24 * $(i) * 100)%;
     }
-  }
-  .el-col-xs-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-sm-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-sm-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-sm-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
   }
 }
 @media (min-width: 992px) {
@@ -50,17 +65,17 @@
     .el-col-md-$i {
       width: calc(1 / 24 * $(i) * 100)%;
     }
-  }
-  .el-col-md-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-md-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-md-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-md-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-md-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-md-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
   }
 }
 @media (min-width: 1200px) {
@@ -68,16 +83,16 @@
     .el-col-lg-$i {
       width: calc(1 / 24 * $(i) * 100)%;
     }
-  }
-  .el-col-xs-offset-$i {
-    margin-left: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-pull-$i {
-    position: relative;
-    right: calc(1 / 24 * $(i) * 100)%;
-  }
-  .el-col-xs-push-$i {
-    position: relative;
-    left: calc(1 / 24 * $(i) * 100)%;
+    .el-col-lg-offset-$i {
+      margin-left: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-lg-pull-$i {
+      position: relative;
+      right: calc(1 / 24 * $(i) * 100)%;
+    }
+    .el-col-lg-push-$i {
+      position: relative;
+      left: calc(1 / 24 * $(i) * 100)%;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/collapse-item.css b/src/collapse-item.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/collapse.css b/src/collapse.css
new file mode 100644
index 00000000..b014302f
--- /dev/null
+++ b/src/collapse.css
@@ -0,0 +1,52 @@
+@charset "UTF-8";
+@import "./common/var.css";
+
+@component-namespace el {
+  @b collapse {
+    border: 1px solid var(--collapse-border-color);
+    border-radius: var(--collapse-border-radius);
+  }
+  @b collapse-item {
+    @e header {
+      height: var(--collapse-header-height);
+      line-height: @height;
+      padding-left: 15px;
+      background-color: var(--collapse-header-fill);
+      color: var(--collapse-header-color);
+      cursor: pointer;
+      border-bottom: 1px solid var(--collapse-border-color);
+      font-size: var(--collapse-header-size);
+
+      @e arrow {
+        margin-right: 8px;
+        transition: transform .3s;
+      }
+    }
+
+    @e wrap {
+      will-change: height;
+      background-color: var(--collapse-content-fill);
+      transition: height .3s cubic-bezier(0.215, 0.61, 0.355, 1);
+      overflow: hidden;
+      box-sizing: border-box;
+      border-bottom: 1px solid var(--collapse-border-color);
+    }
+
+    @e content {
+      padding: 10px 15px;
+      font-size: var(--collapse-content-size);
+      color: var(--collapse-content-color);
+      line-height: 1.769230769230769;
+    }
+
+    @when active {
+      .el-collapse-item__header__arrow {
+        transform: rotate(90deg);
+      }
+    }
+
+    &:last-child {
+      margin-bottom: -1px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/common/popup.css b/src/common/popup.css
new file mode 100644
index 00000000..67a20d78
--- /dev/null
+++ b/src/common/popup.css
@@ -0,0 +1,33 @@
+.v-modal-enter {
+  animation: v-modal-in .2s ease;
+}
+
+.v-modal-leave {
+  animation: v-modal-out .2s ease forwards;
+}
+
+@keyframes v-modal-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+  }
+}
+
+@keyframes v-modal-out {
+  0% {
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.v-modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+  background: #000;
+}
diff --git a/src/common/transition.css b/src/common/transition.css
index bc522d3f..19b04722 100644
--- a/src/common/transition.css
+++ b/src/common/transition.css
@@ -5,109 +5,53 @@
 .fade-in-linear-leave-active {
   transition: var(--fade-linear-transition);
 }
-
 .fade-in-linear-enter,
 .fade-in-linear-leave,
 .fade-in-linear-leave-active {
   opacity: 0;
 }
 
-.fade-in-enter-active,
-.fade-in-leave-active {
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-
-.fade-in-enter,
-.fade-in-leave-active {
+.el-fade-in-enter,
+.el-fade-in-leave-active {
   opacity: 0;
 }
 
-.md-fade-center-enter-active,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.md-fade-center-enter,
-.md-fade-center-leave,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter,
+.el-zoom-in-center-leave-active {
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleX(0);
 }
 
-.md-fade-bottom-enter-active,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center top;
 }
-.md-fade-bottom-enter,
-.md-fade-bottom-leave,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter,
+.el-zoom-in-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-enter-active,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center bottom;
 }
-
-.md-fade-top-enter,
-.md-fade-top-leave,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter,
+.el-zoom-in-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
-
-.md-fade-left-enter-active,
-.md-fade-left-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: right center;
-}
-.md-fade-left-enter,
-.md-fade-left-leave,
-.md-fade-left-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.md-fade-right-enter-active,
-.md-fade-right-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: left center;
-}
-.md-fade-right-enter,
-.md-fade-right-leave,
-.md-fade-right-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .3s cubic-bezier(.645,.045,.355,1);
-}
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-.list-move, .list-enter-active, .list-leave-active {
-  transition: all .5s cubic-bezier(.55,0,.1,1);
-}
-.list-enter, .list-leave-active {
-  opacity: 0;
-  transform: translate(0, -30px);
-}
-/*.list-leave-active {
-  position: absolute;
-  opacity: 0;
-  transform: scaleY(0.01) translate(30px, 0);
-}*/
diff --git a/src/common/var.css b/src/common/var.css
index cb24a615..2bfd047f 100644
--- a/src/common/var.css
+++ b/src/common/var.css
@@ -2,6 +2,7 @@
 
   /* Transition
   -------------------------- */
+  --all-transition: all .3s cubic-bezier(.645,.045,.355,1);
   --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
   --fade-linear-transition: opacity 200ms linear;
   --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
@@ -14,13 +15,13 @@
   --color-success: #13ce66;
   --color-warning: #f7ba2a;
   --color-danger: #ff4949;
-  --color-info: #50BFFF;
+  --color-info: #50bfff;
   --color-blue: #2e90fe;
   --color-blue-light: #5da9ff;
   --color-blue-lighter: rgba(var(--color-blue), 0.12);
   --color-white: #fff;
   --color-black: #000;
-  --color-grey: #C0CCDA;
+  --color-grey: #c0ccda;
 
   /* Link
   -------------------------- */
@@ -139,7 +140,7 @@
 
   --select-input-color: var(--color-grey);
   --select-multiple-input-color: #666;
-  --select-input-focus-background: #2ea0ff;
+  --select-input-focus-background: var(--color-primary);
   --select-input-font-size: 12px;
 
   --select-tag-height: 24px;
@@ -163,7 +164,7 @@
   --select-dropdown-max-height: 274px;
   --select-dropdown-padding: 6px 0;
   --select-dropdown-empty-padding: 10px 0;
-  --select-dropdown-border: solid 1px #d3dce6;
+  --select-dropdown-border: solid 1px var(--disabled-border-base);
 
   /* Alert
   -------------------------- */
@@ -255,7 +256,7 @@
   --input-disabled-fill: var(--disabled-fill-base);
   --input-disabled-border: var(--disabled-border-base);
   --input-disabled-color: var(--disabled-color-base);
-  --input-disabled-placeholder-color: #C0CCDA;
+  --input-disabled-placeholder-color: var(--color-grey);
 
   --input-large-font-size: 16px;
   --input-large-height: 42px;
@@ -338,9 +339,9 @@
   --button-ghost-fill: transparent;
   --button-ghost-border: none;
 
-  --button-disabled-color: #C0CCDA;
+  --button-disabled-color: var(--color-grey);
   --button-disabled-fill: #EFF2F7;
-  --button-disabled-border: #D3DCE6;
+  --button-disabled-border: var(--disabled-border-base);
 
   --button-primary-border: var(--color-primary);
   --button-primary-color: var(--color-white);
@@ -373,7 +374,7 @@
   /* Switch
  -------------------------- */
   --switch-on-color: var(--color-primary);
-  --switch-off-color: #C0CCDA;
+  --switch-off-color: var(--color-grey);
   --switch-disabled-color: #E5E9F3;
   --switch-disabled-text-color: #F9FAFC;
 
@@ -412,7 +413,7 @@
   --pagination-button-size: 28px;
   --pagination-button-disabled-color: #e4e4e4;
   --pagination-button-disabled-fill: var(--color-white);
-  --pagination-border-color: #D3DCE6;
+  --pagination-border-color: var(--disabled-border-base);
   --pagination-hover-fill: var(--color-primary);
   --pagination-hover-color: var(--color-white);
 
@@ -420,7 +421,7 @@
  -------------------------- */
   --popover-fill: var(--color-white);
   --popover-font-size: 12px;
-  --popover-border-color: #d3dce6;
+  --popover-border-color: var(--disabled-border-base);
   --popover-arrow-size: 6px;
   --popover-padding: 10px;
   --popover-title-font-size: 13px;
@@ -439,7 +440,6 @@
   -------------------------- */
   --tag-padding: 0 5px;
   --tag-fill: var(--border-color-hover);
-  --tag-border: var(--border-color-hover);
   --tag-color: var(--color-white);
   --tag-close-color: #666;
   --tag-font-size: 12px;
@@ -510,7 +510,7 @@
   --------------------------*/
   --menu-item-color: var(--link-color);
   --menu-item-fill: #eff2f7;
-  --menu-item-hover-fill: #d3dce6;
+  --menu-item-hover-fill: var(--disabled-border-base);
   --submenu-item-fill: #e5e9f2;
 
   --dark-menu-item-color: var(--link-color);
@@ -532,17 +532,46 @@
   --datepicker-off-color: #ddd;
   --datepicker-header-color: var(--border-color-hover);
   --datepicker-icon-color: #99a9bf;
-  --datepicker-trigger-color: #c0ccda;
-  --datepicker-border-color: #d3dce6;
+  --datepicker-border-color: var(--disabled-border-base);
   --datepicker-inner-border-color: #e4e4e4;
   --datepicker-cell-hover-color: #e5e9f2;
   --datepicker-inrange-color: #D3ECFF;
   --datepicker-inrange-hover-color: #AFDCFF;
   --datepicker-active-color: var(--color-primary);
-  --datepicker-text-hover-color: #20a0ff;
+  --datepicker-text-hover-color: var(--color-primary);
 
   /* Loading
   --------------------------*/
   --loading-spinner-size: 42px;
   --loading-fullscreen-spinner-size: 50px;
+
+  /* Scrollbar
+  --------------------------*/
+  --scrollbar-background-color: rgba(#99a9bf, .3);
+  --scrollbar-hover-background-color: rgba(#99a9bf, .5);
+
+  /* Carousel
+  --------------------------*/
+  --carousel-arrow-font-size: 12px;
+  --carousel-arrow-size: 36px;
+  --carousel-arrow-background: rgba(31, 45, 61, 0.11);
+  --carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+  --carousel-indicator-width: 30px;
+  --carousel-indicator-height: 2px;
+  --carousel-indicator-padding-horizontal: 4px;
+  --carousel-indicator-padding-vertical: 12px;
+  --carousel-indicator-out-color: var(--border-color-hover);
+
+  /* Collapse
+  --------------------------*/
+  --collapse-border-color: #e0e6ed;
+  --collapse-header-height: 43px;
+  --collapse-border-radius: 0;
+  --collapse-header-padding: 20px;
+  --collapse-header-fill: #fff;
+  --collapse-header-color: #475669;
+  --collapse-header-size: 13px;
+  --collapse-content-fill: #f9fafc;
+  --collapse-content-size: 13px;
+  --collapse-content-color: #1f2d3d;
 }
diff --git a/src/date-picker/date-picker.css b/src/date-picker/date-picker.css
index 5d6acc05..9bc4eaa2 100644
--- a/src/date-picker/date-picker.css
+++ b/src/date-picker/date-picker.css
@@ -32,23 +32,6 @@
       padding: 0 5px;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e time-header {
       position: relative;
       border-bottom: 1px solid var(--datepicker-inner-border-color);
diff --git a/src/date-picker/date-range-picker.css b/src/date-picker/date-range-picker.css
index b99d142d..ee98fcd4 100644
--- a/src/date-picker/date-range-picker.css
+++ b/src/date-picker/date-range-picker.css
@@ -29,23 +29,6 @@
       margin: 0;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e header {
       position: relative;
       text-align: center;
@@ -122,7 +105,7 @@
         top: 13px;
         right: 0;
         z-index: 1;
-        background: #fff;
+        background: var(--color-white);
       }
     }
   }
diff --git a/src/date-picker/date-table.css b/src/date-picker/date-table.css
index a1c21a4d..651de045 100644
--- a/src/date-picker/date-table.css
+++ b/src/date-picker/date-table.css
@@ -49,7 +49,7 @@
       &.start-date,
       &.end-date {
         background-color: var(--datepicker-active-color) !important;
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {
diff --git a/src/date-picker/picker-panel.css b/src/date-picker/picker-panel.css
index edb28353..7e63bdca 100644
--- a/src/date-picker/picker-panel.css
+++ b/src/date-picker/picker-panel.css
@@ -45,7 +45,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #e5e9f2;
+        background-color: var(--datepicker-cell-hover-color);
       }
 
       &.active {
@@ -87,7 +87,7 @@
 
     @e link-btn {
       cursor: pointer;
-      color: #55a4ff;
+      color: var(--color-primary);
       text-decoration: none;
       padding: 15px;
       font-size: 12px;
diff --git a/src/date-picker/picker.css b/src/date-picker/picker.css
index 3dc480f1..7fc4832b 100644
--- a/src/date-picker/picker.css
+++ b/src/date-picker/picker.css
@@ -5,115 +5,15 @@
   @b date-editor {
     position: relative;
     display: inline-block;
-    box-sizing: border-box;
-    height: 36px;
-    width: 182px;
-
-    @e editor {
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      line-height: 18px;
-      height: 36px;
-      padding: 3px 10px;
-      width: 100%;
-      box-sizing: border-box;
-      transition: border 0.3s;
-      color: #666;
-      font-size: 14px;
-
-      @when disabled {
-        background-color: var(--disabled-fill-base);
-        border-color: var(--disabled-border-base);
-        color: var(--disabled-color-base);
-        cursor: not-allowed;
-
-        &::placeholder {
-          color: var(--input-disabled-placeholder-color);
-        }
-      }
-
-      &::placeholder {
-        color: #bbb;
-        font-size: 14px;
-      }
-    }
-
-    @e trigger {
-      &.el-icon {
-        cursor: pointer;
-        position: absolute;
-        display: inline-block;
-        width: 16px;
-        right: 10px;
-        top: 0;
-        bottom: 0;
-        color: var(--datepicker-trigger-color);
-        font-size: 16px;
-        line-height: 38px;
-      }
-    }
-
-    @e clear {
-      cursor: pointer;
-      position: absolute;
-      width: 20px;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      line-height: 36px;
-      color: var(--datepicker-icon-color);
-
-      &:hover {
-        color: var(--datepicker-text-hover-color);
-      }
-    }
-
-    @when have-trigger {
-      .el-date-editor__editor {
-        padding-right: 20px;
-      }
-
-      .el-date-editor__clear {
-        right: 22px;
-      }
-    }
-
-    &.lg {
-      .el-date-editor__editor {
-        padding: 6px 4px;
-      }
-    }
-
-    &.sm {
-      .el-date-editor__editor {
-        padding: 1px 1px;
-      }
-    }
 
     .el-picker-panel {
       position: absolute;
       min-width: 180px;
       box-sizing: border-box;
       box-shadow: 0 2px 6px #ccc;
-      background: #fff;
+      background: var(--color-white);
       z-index: 10;
       top: 41px;
     }
   }
-
-  .el-date-editor__editor:focus,
-  .el-date-editor:hover > .el-date-editor__editor,
-  .el-date-editor.is-active > .el-date-editor__editor {
-    outline: none;
-    border-color: var(--datepicker-active-color);
-  }
-
-  .el-date-editor .el-date-editor__clear {
-    display: none;
-  }
-
-  .el-date-editor.is-filled:hover .el-date-editor__clear,
-  .el-date-editor.is-filled.is-active > .el-date-editor__clear {
-    display: inline-block;
-  }
 }
diff --git a/src/date-picker/time-picker.css b/src/date-picker/time-picker.css
index e5e50be2..ee0b288a 100644
--- a/src/date-picker/time-picker.css
+++ b/src/date-picker/time-picker.css
@@ -3,31 +3,30 @@
 @component-namespace el {
   @b time-panel {
     margin: 5px 0;
-    border: solid 1px #d3dce6;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    border: solid 1px var(--datepicker-border-color);
+    background-color: var(--color-white);
+    box-shadow: var(--box-shadow-base);
     border-radius: 2px;
     position: absolute;
     width: 180px;
     left: 0;
-    z-index: 1000;
+    z-index: var(--index-top);
     user-select: none;
 
     @e content {
       font-size: 0;
-      display: flex;
       position: relative;
       overflow: hidden;
 
       &::after, &::before {
         content: ":";
         top: 50%;
-        color: #fff;
+        color: var(--color-white);
         position: absolute;
         font-size: 14px;
         margin-top: -15px;
         line-height: 16px;
-        background-color: #20a0ff;
+        background-color: var(--datepicker-active-color);
         height: 32px;
         z-index: -1;
         left: 0;
@@ -38,14 +37,24 @@
       }
 
       &::after {
-        left: calc(100%/3*2);
+        left: 50%;
         margin-left: -2px;
       }
 
       &::before {
-        padding-left: calc(100%/3);
+        padding-left: 50%;
         margin-right: -2px;
       }
+
+      &.has-seconds {
+        &::after {
+          left: calc(100% / 3 * 2);
+        }
+
+        &::before {
+          padding-left: calc(100% / 3);
+        }
+      }
     }
 
     @e footer {
@@ -70,7 +79,7 @@
 
       &.confirm {
         font-weight: 800;
-        color: #20a0ff;
+        color: var(--datepicker-active-color);
       }
     }
 
diff --git a/src/date-picker/time-range-picker.css b/src/date-picker/time-range-picker.css
index 863544e6..a0795a79 100644
--- a/src/date-picker/time-range-picker.css
+++ b/src/date-picker/time-range-picker.css
@@ -9,14 +9,14 @@
       position: relative;
       text-align: center;
       padding: 10px;
-      display: flex;
     }
 
     @e cell {
       box-sizing: border-box;
       margin: 0;
       padding: 4px 7px 7px;
-      flex: 1;
+      width: 50%;
+      display: inline-block;
     }
 
     @e header {
@@ -26,7 +26,6 @@
     }
 
     @e body {
-      display: flex;
       border-radius:2px;
       border: 1px solid var(--datepicker-border-color);
     }
diff --git a/src/date-picker/time-spinner.css b/src/date-picker/time-spinner.css
index aaf7a5c8..9ba7148e 100644
--- a/src/date-picker/time-spinner.css
+++ b/src/date-picker/time-spinner.css
@@ -2,17 +2,23 @@
 
 @component-namespace el {
   @b time-spinner {
+    &.has-seconds {
+      .el-time-spinner__wrapper {
+        width: 33%;
+      }
+
+      .el-time-spinner__wrapper:nth-child(2) {
+        padding-left: 1%;
+      }
+    }
+
     @e wrapper {
-      height: 190px;
-      overflow: hidden;
-      flex: 1;
+      max-height: 190px;
+      overflow: auto;
+      display: inline-block;
+      width: 50%;
       vertical-align: top;
       position: relative;
-      -ms-overflow-style: none;
-
-      &:hover {
-        overflow-y: auto;
-      }
     }
 
     @e list {
@@ -36,12 +42,12 @@
       font-size: 12px;
 
       &:hover:not(.disabled):not(.active) {
-        background: #E5E9F2;
+        background: var(--datepicker-cell-hover-color);
         cursor: pointer;
       }
 
       &.active:not(.disabled) {
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {
diff --git a/src/dialog.css b/src/dialog.css
index d98418e6..af7bb353 100755
--- a/src/dialog.css
+++ b/src/dialog.css
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 @import "./common/var.css";
-@import "vue-popup/lib/popup.css";
+@import "./common/popup.css";
 
 @component-namespace el {
 
diff --git a/src/form.css b/src/form.css
index 1bb37fb1..9e19cbd0 100644
--- a/src/form.css
+++ b/src/form.css
@@ -60,11 +60,6 @@
       top: 100%;
       left: 0;
     }
-    & .el-button + .el-button,
-    & .el-checkbox + .el-checkbox,
-    & .el-radio + .el-radio {
-      margin-left: 10px;
-    }
 
     @when required {
       .el-form-item__label:before {
diff --git a/src/icon.css b/src/icon.css
index bd2428cc..97b44f0d 100644
--- a/src/icon.css
+++ b/src/icon.css
@@ -1,7 +1,7 @@
 @font-face {
     font-family: 'element-icons';
-    src:url('fonts/element-icons.eot?t=1472440741'), /* IE9*/
-      url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
+    src: url('fonts/element-icons.eot?t=1472440741'); /* IE9*/
+    src: url('fonts/element-icons.woff?t=1472440741') format('woff'), /* chrome, firefox */
       url('fonts/element-icons.ttf?t=1472440741') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
       url('fonts/element-icons.svg?t=1472440741#el-icon') format('svg'); /* iOS 4.1- */
     font-weight: normal;
diff --git a/src/index.css b/src/index.css
index df2aac22..544ee48d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -40,3 +40,7 @@
 @import "./rate.css";
 @import "./steps.css";
 @import "./step.css";
+@import "./scrollbar.css";
+@import "./carousel.css";
+@import "./carousel-item.css";
+@import "./collapse.css";
diff --git a/src/input-number.css b/src/input-number.css
index 45054a72..a3df2904 100644
--- a/src/input-number.css
+++ b/src/input-number.css
@@ -23,9 +23,14 @@
       color: #99A9BF;
       cursor: pointer;
       position: absolute;
+      z-index: 1;
 
       &:hover {
         color: var(--color-primary);
+
+        &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+          border-color: var(--input-focus-border);
+        }
       }
 
       @when disabled {
@@ -82,5 +87,10 @@
         padding-right: calc(var(--input-small-height) * 2 + 10);
       }
     }
+    @when without-controls {
+      & .el-input__inner {
+        padding-right: 10px;
+      }
+    }
   }
 }
diff --git a/src/input.css b/src/input.css
index 43816afe..14b83c63 100644
--- a/src/input.css
+++ b/src/input.css
@@ -5,22 +5,23 @@
   @b input {
     position: relative;
     font-size: var(--font-size-base);
-    
+
     @e inner {
-      display: block;
-      padding: 3px 10px;
-      box-sizing: border-box;
-      width: 100%;
-      height: var(--input-height);
-      color: var(--input-color);
-      background-color: #fff;
+      appearance: none;
+      background-color: var(--color-white);
       background-image: none;
-      border: var(--input-border);
       border-radius: 4px;
-      transition: var(--border-transition-base);
-      outline: none;
+      border: var(--input-border);
+      box-sizing: border-box;
+      color: var(--input-color);
+      display: block;
       font-size: inherit;
-      line-height: normal;
+      height: var(--input-height);
+      line-height: 1;
+      outline: none;
+      padding: 3px 10px;
+      transition: var(--border-transition-base);
+      width: 100%;
 
       &::placeholder {
         color: var(--input-placeholder-color);
@@ -29,6 +30,7 @@
       &:hover {
         border-color: var(--input-hover-border);
       }
+
       &:focus {
         outline: none;
         border-color: var(--input-focus-border);
@@ -40,6 +42,7 @@
       width: 35px;
       height: 100%;
       right: 0;
+      top: 0;
       text-align: center;
       color: var(--input-icon-color);
 
@@ -99,6 +102,7 @@
   }
 
   @b input-group {
+    line-height: normal;
     display: table;
     border-collapse: separate;
 
@@ -148,16 +152,18 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
     }
-    & .el-input__inner:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    & .el-input__inner:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
+
+    @m prepend {
+      .el-input__inner {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
-    & .el-input__inner:not(:first-child):not(:last-child) {
-      border-radius: 0;
+    @m append {
+      .el-input__inner {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
     }
   }
 
diff --git a/src/loading.css b/src/loading.css
index 5f8ae663..92a13ed3 100644
--- a/src/loading.css
+++ b/src/loading.css
@@ -19,7 +19,7 @@
         margin-top: calc(- var(--loading-fullscreen-spinner-size) / 2);
 
         .circular {
-          width: var(--loading-fullscreen-spinner-size);
+          size: var(--loading-fullscreen-spinner-size);
         }
       }
     }
@@ -39,13 +39,13 @@
     }
 
     .circular {
-      width: var(--loading-spinner-size);
-      animation: rotate 2s linear infinite;
+      size: var(--loading-spinner-size);
+      animation: loading-rotate 2s linear infinite;
     }
 
     .path {
-      animation: dash 1.5s ease-in-out infinite;
-      stroke-dasharray: 1, 100;
+      animation: loading-dash 1.5s ease-in-out infinite;
+      stroke-dasharray: 90, 150;
       stroke-dashoffset: 0;
       stroke-width: 2;
       stroke: var(--color-primary);
@@ -54,23 +54,23 @@
   }
 }
 
-@keyframes rotate {
+@keyframes loading-rotate {
   100% {
     transform: rotate(360deg);
   }
 }
 
-@keyframes dash {
+@keyframes loading-dash {
   0% {
-    stroke-dasharray: 1, 100;
+    stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
   }
   50% {
-    stroke-dasharray: 45, 100;
-    stroke-dashoffset: -35px;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40px;
   }
   100% {
-    stroke-dasharray: 45, 100;
-    stroke-dashoffset: -124px;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120px;
   }
 }
diff --git a/src/menu.css b/src/menu.css
index 3bc891f1..2c69bda4 100644
--- a/src/menu.css
+++ b/src/menu.css
@@ -189,7 +189,7 @@
       }
     }
     @when opened {
-      .el-submenu__icon-arrow {
+      > .el-submenu__title .el-submenu__icon-arrow {
         transform: rotateZ(180deg);
       }
     }
diff --git a/src/message-box.css b/src/message-box.css
index 722fe0b3..161a9b3e 100644
--- a/src/message-box.css
+++ b/src/message-box.css
@@ -1,8 +1,8 @@
 @charset "UTF-8";
 @import "./common/var.css";
+@import "./common/popup.css";
 @import "./button.css";
 @import "./input.css";
-@import "vue-popup/lib/popup.css";
 
 @component-namespace el {
 
diff --git a/src/message.css b/src/message.css
index 7930137b..82bcbd26 100644
--- a/src/message.css
+++ b/src/message.css
@@ -20,6 +20,11 @@
     @e group {
       margin-left: 38px;
       position: relative;
+      height: 20px;
+
+      @when with-icon {
+        margin-left: 0;
+      }
 
       & p {
         font-size: var(--font-size-base);
@@ -28,16 +33,23 @@
         white-space: nowrap;
         color: var(--message-content-color);
         text-align: justify;
+        display: inline-block;
+        vertical-align: middle;
       }
     }
 
-    @e icon {
+    @e img {
       size: 40px;
       position: absolute;
       left: 0;
       top: 0;
     }
 
+    @e icon {
+      vertical-align: middle;
+      margin-right: 8px;
+    }
+
     @e closeBtn {
       position: absolute 3px 0 * *;
       cursor: pointer;
diff --git a/src/mixins/_button.css b/src/mixins/_button.css
index 55288e9e..dbc440c8 100644
--- a/src/mixins/_button.css
+++ b/src/mixins/_button.css
@@ -3,7 +3,8 @@
   background-color: $background-color;
   border-color: $border-color;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: tint($background-color, var(--button-hover-tint-percent));
     border-color: tint($border-color, var(--button-hover-tint-percent));
     color: $color;
@@ -27,7 +28,8 @@
     border: var(--border-base);
     color: var(--button-default-color);
 
-    &:hover {
+    &:hover,
+    &:focus {
       background: #fff;
       border-color: $border-color;
       color: $background-color;
diff --git a/src/notification.css b/src/notification.css
index a9840e15..1d77a707 100644
--- a/src/notification.css
+++ b/src/notification.css
@@ -16,6 +16,10 @@
     overflow: hidden;
 
     @e group {
+      margin-left: 0;
+      @when with-icon {
+        margin-left: 55px;
+      }
       & span {
         font-size: var(--notification-title-font-size);
         color: var(--notification-title-color);
diff --git a/src/pagination.css b/src/pagination.css
index e2ca22d5..cfd1f567 100644
--- a/src/pagination.css
+++ b/src/pagination.css
@@ -6,8 +6,8 @@
   @b pagination {
     white-space: nowrap;
     padding: 2px 5px;
-    background: var(--pagination-fill);
     color: var(--pagination-color);
+    @utils-clearfix;
 
     span,
     button {
@@ -24,6 +24,8 @@
       width: 110px;
       input {
         padding-right: 25px;
+        border-radius: var(--border-radius-small);
+        height: 28px;
       }
     }
 
@@ -51,6 +53,7 @@
     .btn-next {
       background: center center no-repeat;
       background-size: 16px;
+      background-color: var(--pagination-fill);
       border: 1px solid var(--pagination-border-color);
       cursor: pointer;
       margin: 0;
diff --git a/src/radio.css b/src/radio.css
index 5f3e50b9..d68b4820 100644
--- a/src/radio.css
+++ b/src/radio.css
@@ -24,6 +24,54 @@
       line-height: 1;
       position: relative;
       vertical-align: middle;
+
+      @when disabled {
+        .el-radio__inner {
+          background-color: var(--radio-disabled-input-fill);
+          border-color: var(--radio-disabled-input-border-color);
+          cursor: not-allowed;
+
+          &::after {
+            cursor: not-allowed;
+            background-color: var(--radio-disabled-icon-color);
+          }
+
+          & + .el-radio__label {
+            cursor: not-allowed;
+          }
+        }
+        &.is-checked {
+          .el-radio__inner {
+            background-color: var(--radio-disabled-checked-input-fill);
+            border-color: var(--radio-disabled-checked-input-border-color);
+
+            &::after {
+              background-color: var(--radio-disabled-checked-icon-color);
+            }
+          }
+        }
+        & + .el-radio__label {
+          color: var(--disabled-color-base);
+          cursor: not-allowed;
+        }
+      }
+
+      @when checked {
+        .el-radio__inner {
+          border-color: var(--radio-checked-input-border-color);
+          background: var(--radio-checked-icon-color);
+
+          &::after {
+            transform: translate(-50%, -50%) scale(1);
+          }
+        }
+      }
+
+      @when focus {
+        .el-radio__inner {
+          border-color: var(--radio-input-border-color-hover);
+        }
+      }
     }
     @e inner {
       border: var(--radio-input-border);
@@ -34,7 +82,7 @@
       display: inline-block;
       box-sizing: border-box;
 
-      &:not(.is-disabled):hover {
+      &:hover {
         border-color: var(--radio-input-border-color-hover);
       }
 
@@ -47,43 +95,6 @@
         transform: translate(-50%, -50%) scale(0);
         transition: transform .15s cubic-bezier(.71,-.46,.88,.6);
       }
-
-      @when disabled {
-        background-color: var(--radio-disabled-input-fill);
-        border-color: var(--radio-disabled-input-border-color);
-        cursor: not-allowed;
-
-        &::after {
-          cursor: not-allowed;
-          background-color: var(--radio-disabled-icon-color);
-        }
-
-        & + .el-radio__label {
-          cursor: not-allowed;
-        }
-      }
-
-      @when checked {
-        border-color: var(--radio-checked-input-border-color);
-        background: var(--radio-checked-icon-color);
-
-        &::after {
-          transform: translate(-50%, -50%) scale(1);
-        }
-      }
-
-      @when focus {
-        border-color: var(--radio-input-border-color-hover);
-      }
-      
-      &.is-disabled.is-checked {
-        background-color: var(--radio-disabled-checked-input-fill);
-        border-color: var(--radio-disabled-checked-input-border-color);
-
-        &::after {
-          background-color: var(--radio-disabled-checked-icon-color);
-        }
-      }
     }
 
     @e original {
@@ -135,7 +146,7 @@
       margin: 0;
       position: relative;
       cursor: pointer;
-      transition: var(--border-transition-base), var(--color-transition-base);
+      transition: var(--all-transition);
       @utils-user-select none;
 
       @mixin button-size var(--button-padding-vertical), var(--button-padding-horizontal), var(--button-font-size), 0;
@@ -160,14 +171,6 @@
       z-index: -1;
       left: -999px;
 
-      &:checked {
-        & + .el-radio-button__inner {
-          z-index: 1;
-          color: var(--color-primary);
-          border-color: @color;
-        }
-      }
-
       &:disabled {
         & + .el-radio-button__inner {
           color: var(--button-disabled-color);
diff --git a/src/scrollbar.css b/src/scrollbar.css
new file mode 100644
index 00000000..dfde668c
--- /dev/null
+++ b/src/scrollbar.css
@@ -0,0 +1,68 @@
+@component-namespace el {
+  @b scrollbar {
+    overflow: hidden;
+    position: relative;
+
+    &:hover,
+    &:active,
+    &:focus {
+      .el-scrollbar__bar {
+        opacity: 1;
+        transition: opacity 340ms ease-out;
+      }
+    }
+
+    @e wrap {
+      overflow: scroll;
+
+      @m hidden-default {
+        &::-webkit-scrollbar {
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+
+    @e thumb {
+      position: relative;
+      display: block;
+      size: 0;
+      cursor: pointer;
+      border-radius: inherit;
+      background-color: var(--scrollbar-background-color);
+      transition: .3s background-color;
+
+      &:hover {
+        background-color: var(--scrollbar-hover-background-color);
+      }
+    }
+
+    @e bar {
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      z-index: 1;
+      border-radius: 4px;
+      opacity: 0;
+      transition: opacity 120ms ease-out;
+
+      @when vertical {
+        width: 6px;
+        top: 2px;
+
+        > div {
+          width: 100%;
+        }
+      }
+
+      @when horizontal {
+        height: 6px;
+        left: 2px;
+
+        > div {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/select-dropdown.css b/src/select-dropdown.css
index 2c0ce7c3..2f62f216 100644
--- a/src/select-dropdown.css
+++ b/src/select-dropdown.css
@@ -43,13 +43,19 @@
     font-size: var(--select-font-size);
   }
 
+  @b select-dropdown__wrap {
+    max-height: var(--select-dropdown-max-height);
+    width: 100%;
+  }
+
   @b select-dropdown__list {
     list-style: none;
     padding: var(--select-dropdown-padding);
     margin: 0;
-    width: 100%;
-    max-height: var(--select-dropdown-max-height);
     box-sizing: border-box;
-    overflow-y: auto;
+
+    @when empty {
+      padding: 0;
+    }
   }
 }
diff --git a/src/select.css b/src/select.css
index 0641678f..d5a57342 100644
--- a/src/select.css
+++ b/src/select.css
@@ -12,13 +12,6 @@
     display: block;
     position: relative;
 
-    @when small {
-      & input {
-        border-radius: var(--border-radius-small);
-        height: 28px;
-      }
-    }
-
     &:hover {
       .el-input__inner {
         border-color: var(--select-border-color-hover);
@@ -78,13 +71,16 @@
       border: none;
       outline: none;
       padding: 0;
-      margin: 4px 0 -3px 10px;
+      margin-left: 10px;
       color: var(--select-multiple-input-color);
       font-size: var(--select-font-size);
       vertical-align: baseline;
       appearance: none;
       height: 28px;
       background-color: transparent;
+      @when mini {
+        height: 14px;
+      }
     }
 
     @e close {
@@ -107,6 +103,8 @@
       line-height: normal;
       white-space: normal;
       z-index: var(--index-top);
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     & .el-tag__close {
@@ -117,7 +115,7 @@
       height: var(--select-tag-height);
       line-height: var(--select-tag-height);
       box-sizing: border-box;
-      margin: 6px 0 0 6px;
+      margin: 3px 0 3px 6px;
     }
 
     @e tag {
diff --git a/src/slider.css b/src/slider.css
index 5c1e9f94..9a3d0273 100644
--- a/src/slider.css
+++ b/src/slider.css
@@ -20,7 +20,7 @@
         margin-right: 160px;
         width: auto;
       }
-      
+
       &.disabled {
         cursor: default;
 
@@ -79,6 +79,7 @@
       transform: translateX(-50%);
       background-color: transparent;
       text-align: center;
+      user-select: none;
 
       .el-tooltip {
         line-height: 1;
@@ -113,6 +114,7 @@
       background-color: var(--slider-main-background-color);
       border-radius: 50%;
       transition: .2s;
+      user-select: none;
 
       &:hover,
       &.hover,
diff --git a/src/spinner.css b/src/spinner.css
index 40ed622b..c8985efe 100644
--- a/src/spinner.css
+++ b/src/spinner.css
@@ -3,8 +3,8 @@
 
 @component-namespace el {
   @b time-spinner {
-    display: flex;
     width: 100%;
+    white-space: nowrap;
   }
 
   @b spinner {
diff --git a/src/step.css b/src/step.css
index 2e47b3ef..5b9fc394 100644
--- a/src/step.css
+++ b/src/step.css
@@ -36,20 +36,21 @@
       @when horizontal {
         top: 15px;
         height: 2px;
-        left: 30px;
+        left: 32px;
         right: 0;
       }
 
       @when vertical {
         width: 2px;
         box-sizing: border-box;
-        top: 30px;
+        top: 32px;
         bottom: 0;
+        left: 15px;
       }
     }
 
     @e line-inner {
-      display: inherit;
+      display: block;
       border-width: 1px;
       border-style: solid;
       border-color: inherit;
diff --git a/src/switch.css b/src/switch.css
index a1af7d88..d3927316 100644
--- a/src/switch.css
+++ b/src/switch.css
@@ -8,6 +8,8 @@
     position: relative;
     font-size: var(--switch-font-size);
     line-height: var(--switch-height);
+    height: var(--switch-height);
+    vertical-align: middle;
     @when disabled {
       & .el-switch__core,
       & .el-switch__label {
@@ -57,7 +59,6 @@
     @e core {
       margin: 0;
       display: inline-block;
-      vertical-align: middle;
       position: relative;
       size: var(--switch-width) var(--switch-height);
       border: 1px solid var(--switch-off-color);
@@ -80,15 +81,15 @@
 
     @when disabled {
       .el-switch__core {
-        border-color: var(--switch-disabled-color);
-        background: var(--switch-disabled-color);
+        border-color: var(--switch-disabled-color) !important;
+        background: var(--switch-disabled-color) !important;
 
         & span {
-          background-color: var(--switch-disabled-text-color);
+          background-color: var(--switch-disabled-text-color) !important;
         }
 
         & ~ .el-switch__label * {
-          color: var(--switch-disabled-text-color);
+          color: var(--switch-disabled-text-color) !important;
         }
       }
 
diff --git a/src/table-column.css b/src/table-column.css
index f367c8f3..1dfe3707 100644
--- a/src/table-column.css
+++ b/src/table-column.css
@@ -4,6 +4,13 @@
 @import "./common/var.css";
 
 @component-namespace el {
+  @b table-column {
+    @m selection .cell {
+      padding-left: 14px;
+      padding-right: 14px;
+    }
+  }
+
   @b table-filter {
     border: solid 1px #d3dce6;
     border-radius: 2px;
diff --git a/src/table.css b/src/table.css
index 41b21aa4..8bb9a6c3 100644
--- a/src/table.css
+++ b/src/table.css
@@ -12,7 +12,6 @@
     width: 100%;
     max-width: 100%;
     background-color: #fff;
-    border-collapse: collapse;
     border: 1px solid var(--table-border-color);
     font-size: 14px;
     color: var(--table-text-color);
@@ -52,7 +51,7 @@
     }
 
     @e empty-block {
-      display: table;
+      position: relative;
       min-height: 60px;
       text-align: center;
       width: 100%;
@@ -60,11 +59,51 @@
     }
 
     @e empty-text {
-      display: table-cell;
-      vertical-align: middle;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       color: #5e6d82;
     }
 
+    @e expand-column {
+      .cell {
+        padding: 0;
+        text-align: center;
+      }
+    }
+
+    @e expand-icon {
+      position: relative;
+      cursor: pointer;
+      color: #666;
+      font-size: 12px;
+      transition: transform 0.2s ease-in-out;
+      height: 40px;
+
+      @m expanded {
+        transform: rotate(90deg);
+      }
+
+      > .el-icon {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        margin-left: -5px;
+        margin-top: -5px;
+      }
+    }
+
+    @e expanded-cell {
+      padding: 20px 50px;
+      background-color: #f9fafc;
+      box-shadow: inset 0 2px 0 #f4f4f4;
+
+      &:hover {
+        background-color: #f9fafc !important;
+      }
+    }
+
     @modifier fit {
       border-right: 0;
       border-bottom: 0;
@@ -86,7 +125,6 @@
       text-overflow: ellipsis;
       vertical-align: middle;
       position: relative;
-      border-bottom: 1px solid var(--table-border-color);
 
       @when center {
         text-align: center;
@@ -101,10 +139,18 @@
       }
     }
 
+    & th.is-leaf, td {
+      border-bottom: 1px solid var(--table-border-color);
+    }
+
     @modifier border {
       & th, td {
         border-right: 1px solid var(--table-border-color);
       }
+
+      & th {
+        border-bottom: 1px solid var(--table-border-color);
+      }
     }
 
     & th {
@@ -146,6 +192,14 @@
       }
     }
 
+    @e fixed-right-patch {
+      position: absolute;
+      top: -1px;
+      right: 0;
+      background-color: var(--table-header-background);
+      border-bottom: 1px solid var(--table-border-color);
+    }
+
     @e fixed-right {
       top: 0;
       left: auto;
@@ -296,6 +350,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: normal;
+      word-break: break-all;
       line-height: 24px;
       padding-left: 18px;
       padding-right: 18px;
@@ -324,15 +379,11 @@
     }
 
     @e body {
-      td {
-        transition: background-color .25s ease;
-      }
-
-      tr.hover-row td {
+      tr.hover-row > td {
         background-color: #eff2f7;
       }
 
-      tr.current-row td {
+      tr.current-row > td {
         background: #eff7ff;
       }
     }
@@ -363,5 +414,25 @@
         color: #99a9bf;
       }
     }
+
+    @modifier enable-row-transition {
+      .el-table__body td {
+        transition: background-color .25s ease;
+      }
+    }
+
+    @modifier enable-row-hover {
+      tr:hover > td {
+        background-color: #eff2f7;
+      }
+    }
+
+    @modifier fluid-height {
+      .el-table__fixed,
+      .el-table__fixed-right {
+        bottom: 0;
+        overflow: hidden;
+      }
+    }
   }
 }
diff --git a/src/tabs.css b/src/tabs.css
index f4bb950e..d4c766c2 100644
--- a/src/tabs.css
+++ b/src/tabs.css
@@ -35,6 +35,22 @@
       margin-bottom: -1px;
       position: relative;
 
+      & .el-icon-close {
+        border-radius: 50%;
+        text-align: center;
+        transition: all .3s cubic-bezier(.645,.045,.355,1);
+        margin-left: 5px;
+        &:before {
+          transform: scale(.7, .7);
+          display: inline-block;
+        }
+
+        &:hover {
+          background-color: #99a9bf;
+          color: #fff;
+        }
+      }
+
       @when active {
         color: var(--color-primary);
       }
@@ -43,6 +59,11 @@
         color: #1f2d3d;
         cursor: pointer;
       }
+
+      @when disabled {
+        color: var(--disabled-color-base);
+        cursor: default;
+      }
     }
     @e content {
       overflow: hidden;
@@ -53,29 +74,16 @@
         display: none;
       }
       & .el-tabs__item .el-icon-close {
+        position: relative;
         font-size: 12px;
+        width: 0;
+        height: 14px;
         vertical-align: middle;
         line-height: 15px;
         overflow: hidden;
-        width: 0;
-        height: 14px;
-        border-radius: 50%;
-        text-align: center;
-        transform-origin: 100% 50%;
-        transition: all .3s cubic-bezier(.645,.045,.355,1);
-        position: relative;
         top: -1px;
         right: -2px;
-
-        &:before {
-          transform: scale(.7, .7);
-          display: inline-block;
-        }
-
-        &:hover {
-          background-color: #99a9bf;
-          color: #fff;
-        }
+        transform-origin: 100% 50%;
       }
       .el-tabs__item {
         border: 1px solid transparent;
@@ -139,10 +147,6 @@
       }
     }
   }
-  @b tab-pane {
-    width: 100%;
-    display: inline-block;
-  }
 }
 
 .slideInRight-transition,
diff --git a/src/tag.css b/src/tag.css
index 2e76d178..3898e3f5 100644
--- a/src/tag.css
+++ b/src/tag.css
@@ -7,12 +7,14 @@
     background-color: var(--tag-fill);
     display: inline-block;
     padding: var(--tag-padding);
-    height: 22px;
-    line-height: @height;
+    height: 24px;
+    line-height: calc(@height - 2);
     font-size: var(--tag-font-size);
     color: var(--tag-color);
     border-radius: var(--tag-border-radius);
-    border: 1px solid var(--tag-border);
+    box-sizing: border-box;
+    border: 1px solid transparent;
+    white-space: nowrap;
 
     & .el-icon-close {
       border-radius: 50%;
diff --git a/src/time-select.css b/src/time-select.css
index 407a2081..f9bbdee8 100644
--- a/src/time-select.css
+++ b/src/time-select.css
@@ -9,12 +9,7 @@
 
 .time-select .el-picker-panel__content {
   max-height: 200px;
-  overflow: hidden;
   margin: 0;
-
-  &:hover {
-    overflow-y: auto;
-  }
 }
 
 .time-select-item {
@@ -27,7 +22,7 @@
   color: #fff;
 
   &:hover {
-    background-color: #1d8ce0;
+    background-color: var(--color-primary);
   }
 }
 
diff --git a/src/tree.css b/src/tree.css
index 7961960b..c83566b4 100644
--- a/src/tree.css
+++ b/src/tree.css
@@ -8,7 +8,7 @@
     border: 1px solid #d3dce6;
 
     @e empty-block {
-      display: table;
+      position: relative;
       min-height: 60px;
       text-align: center;
       width: 100%;
@@ -16,8 +16,10 @@
     }
 
     @e empty-text {
-      display: table-cell;
-      vertical-align: middle;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
       color: #5e6d82;
     }
   }
diff --git a/src/upload.css b/src/upload.css
index 026a35a8..1c1b3ddc 100644
--- a/src/upload.css
+++ b/src/upload.css
@@ -37,15 +37,17 @@
       box-sizing: border-box;
       border-radius: 4px;
       width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
       position: relative;
 
       a {
         color: #475669;
-        transition: color .3s;
+        display: block;
+        margin-right: 40px;
+        overflow: hidden;
         padding-left: 4px;
+        text-overflow: ellipsis;
+        transition: color .3s;
+        white-space: nowrap;
 
         [class^="el-icon"] {
           color: #99a9bf;
@@ -81,7 +83,7 @@
           .el-upload__btn-delete {
             display: block;
             cursor: pointer;
-          }   
+          }
         }
       }
     }
@@ -145,7 +147,7 @@
       & img {
         display: block;
         width: 100%;
-        height: auto;
+        height: 100%;
       }
 
       @e progress {