change style of dialog, tree, tab.

wwmin · Nov 24, 2015 · 553901e · 553901e
1 parent 00fe048
commit 553901e
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 25 deletions.
diff --git a/examples/data/tree.vue b/examples/data/tree.vue
@@ -1,7 +1,7 @@
 <template>
-  <d-tree :nodes1="data"></d-tree>
-
-  <d-tree :nodes="regions" :level-config="levelConfig"></d-tree>
+  <d-panel style="height: 400px;">
+    <d-tree :nodes="regions" :level-config="levelConfig"></d-tree>
+  </d-panel>
 </template>
 
 <script type="text/ecmascript-6" lang="babel">

diff --git a/src/basic/dialog.vue b/src/basic/dialog.vue
@@ -52,18 +52,23 @@
   .d-dialog {
     position: fixed;
     background: #fff;
-    border-radius: 3px;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   }
 
   .d-dialog-header {
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid #e5e5e5;
     padding: 10px 8px;
   }
 
   .d-dialog-close {
     cursor: pointer;
   }
 
+  .d-dialog-close:hover {
+    color: #18a689;
+  }
+
   .d-dialog-title {
     font-weight: bold;
   }
@@ -77,7 +82,7 @@
   }
 
   .d-dialog-footer {
-    border-top: 1px solid #e9e9e9;
+    border-top: 1px solid #e5e5e5;
     padding: 10px;
     text-align: right;
   }

diff --git a/src/basic/panel.vue b/src/basic/panel.vue
@@ -9,17 +9,16 @@
 
 <style>
   .d-panel {
+    background-color: #ffffff;
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   }
 
   .d-panel-header {
     padding: 14px 15px 7px;
     font-size: 14px;
-    background-color: #ffffff;
   }
 
   .d-panel-content {
-    background-color: #ffffff;
     color: inherit;
     padding: 15px 20px 20px 20px;
   }

diff --git a/src/data/tree.vue b/src/data/tree.vue
@@ -6,7 +6,6 @@
 
 <style scoped>
   .tree {
-    background-color: white;
     overflow: auto;
     cursor: default;
   }

diff --git a/src/form/date-picker.vue b/src/form/date-picker.vue
@@ -26,7 +26,7 @@
   }
 
   .datepicker-header > label:hover {
-    background: #33bcff;
+    background: #428bca;
     color: #fff;
   }
 
@@ -68,12 +68,12 @@
   }
 
   .datepicker td:hover {
-    background-color: #33bcff;
+    background-color: #428bca;
     color: #fff;
   }
 
   .datepicker td.current {
-    background: #0089dc;
+    background: #428bca;
     color: #fff;
   }
 

diff --git a/src/form/fields/field.vue b/src/form/fields/field.vue
@@ -20,7 +20,7 @@
 
   .d-field.required > label::before {
     content: '*';
-    color: #ff0000;
+    color: #ed5565;
     margin-right: 2px;
   }
 
@@ -52,11 +52,11 @@
   }
 
   .d-field.validate-error input {
-    border-color: #ff464c;
+    border-color: #ed5565;
   }
 
   .d-field.validate-error .d-field-hint {
-    color: #ff464c;
+    color: #ed5565;
   }
 
   .d-field-hint {
@@ -68,7 +68,7 @@
   .d-field-hint .icon-formfield-error {
     font-size: 14px;
     line-height: 14px;
-    color: #ff464c;
+    color: #ed5565;
   }
 
   .d-field-hint .icon-formfield-error:before {

diff --git a/src/form/select-option.vue b/src/form/select-option.vue
@@ -14,7 +14,7 @@
 
   .d-select-option:hover,
   .d-select-option.selected {
-    background-color: #639af5;
+    background-color: #428bca;
     color: #fff;
   }
 </style>

diff --git a/src/nav/tab.vue b/src/nav/tab.vue
@@ -46,17 +46,25 @@
 
 <style scoped>
   .tabpane-fade-transition {
-    transition: all 0.3s ease;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    transform: none;
   }
 
   .tabpane-fade-enter, .tabpane-fade-leave {
-    height: 0;
-    padding: 0 10px;
     opacity: 0;
   }
 
+  .tabpane-fade-enter {
+    transform: translateX(20px);
+  }
+
+  .tabpane-fade-leave {
+    display: none !important;
+  }
+
   .d-tabpane {
     display: block;
+    background: #fff;
   }
 
   .d-tabpane.hidden {

diff --git a/src/service/msgbox.vue b/src/service/msgbox.vue
@@ -26,7 +26,7 @@
 
   .msgbox-header{
     padding: 15px 20px 5px 10px;
-    border-bottom: 1px dashed #ddd;
+    border-bottom: 1px dashed #e5e5e5;
   }
 
   .msgbox-content {
@@ -58,7 +58,7 @@
     float: left;
     width: 36px;
     height: 36px;
-    font-size: 36px;
+    font-size: 36px !important;
   }
 
   .msgbox-status.icon-msgbox-success {

diff --git a/src/service/notification.vue b/src/service/notification.vue
@@ -15,11 +15,11 @@
     width: 320px;
     padding: 15px;
     box-sizing: border-box;
-    border: solid 1px #eee;
-    border-radius: 10px;
+    border-radius: 4px;
     position: fixed;
     right: 25px;
-    background-color: #f8f8f8;
+    background-color: #fff;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
     transition: opacity 0.2s, top 0.2s;
     overflow: hidden;
   }