feat(CSS): update css to material design style

re #18
ly525 · Feb 7, 2019 · 2ca9e99 · 2ca9e99
1 parent edfc693
commit 2ca9e99
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
@@ -28,12 +28,15 @@
       <tr v-for="(dateRow, rowIndex) in calendar" :key="rowIndex">
         <slot name="date-slot" v-for="(date, dateIndex) in dateRow">
           <td
+            class="calendar-cell"
             :key="dateIndex"
             :class="dayClass(date)"
             @click="$emit('dateClick', date)"
             @mouseover="$emit('hoverDate', date)"
           >
-            {{ date | dateNum }}
+            <div class="calendar-cell__content">
+              {{ date | dateNum }}
+            </div>
           </td>
         </slot>
       </tr>

diff --git a/src/styles/components/activator.scss b/src/styles/components/activator.scss
@@ -1,3 +1,6 @@
+$labelColor:  #4285f4;
+$barColor:  #4285f4;
+
 // .md-date-range-picker <-> mdrp
 .mdrp__activator {
   display: inline-block;
@@ -36,7 +39,7 @@
   .text-field:focus ~ label {
     top: -20px;
     font-size: 14px;
-    color: #1976d2;
+    color: $labelColor;
   }
 
   /* bottom bars */
@@ -52,7 +55,7 @@
       width: 0;
       bottom: 1px;
       position: absolute;
-      background: #1976d2;
+      background: $barColor;
       transition: 0.2s ease all;
     }
 

diff --git a/src/styles/components/calendar.scss b/src/styles/components/calendar.scss
@@ -1,28 +1,44 @@
+$cellActiveBgColor: #4285f4;
+$cellInRangeBgColor: #eef4ff;
+$cellSize: 34px;
+
+
 table.calendar-table {
   width: 100%;
   margin: 0;
   border-spacing: 0;
   // ??? border-collapse
   border-collapse: collapse;
 
+  // 移除其它 css 库的影响，比如 vuepress 的主题样式
+  tr,
+  th,
+  td {
+    border: none;
+  }
+
   // TODO add renderCalendarCell function for API to custom the calendar cell style
   td,
   th {
     white-space: nowrap;
     text-align: center;
     vertical-align: middle;
-    min-width: 32px;
-    width: 32px;
-    height: 24px;
-    line-height: 24px;
+    min-width: $cellSize;
+    width: $cellSize;
+    padding: $cellSize/2 0;
+    height: 0;
+    line-height: 0;
     font-size: 12px;
-    border-radius: 4px;
-    border: 1px solid transparent;
+    // border-radius: 50%;
     white-space: nowrap;
     cursor: pointer;
+
+    // border-radius: 4px;
   }
 
-  td {
+  td.calendar-cell {
+    position: relative;
+
     &:hover {
       background-color: #eee;
       border-color: transparent;
@@ -34,7 +50,7 @@ table.calendar-table {
 
     // items between start and end
     &.in-range {
-      background-color: #ebf4f8;
+      background-color: $cellInRangeBgColor;
       border-color: transparent;
       color: #000;
       border-radius: 0;
@@ -45,16 +61,48 @@ table.calendar-table {
     // TODO give an API for user to custom active class
     &.active,
     &.active:hover {
-      background-color: #357ebd;
       border-color: transparent;
       color: #fff;
 
       &.start-date {
-        border-radius: 4px 0 0 0;
+        border-top-left-radius: $cellSize;
+        border-bottom-left-radius: $cellSize;
+
+        // bootstraps style
+        // border-radius: 4px 0 0 0;
       }
 
       &.end-date {
-        border-radius: 0 0 4px 0;
+        // left-top, left-bottom
+        border-top-right-radius: $cellSize;
+        border-bottom-right-radius: $cellSize;
+
+        // bootstraps style
+        // border-radius: 0 0 4px 0;
+      }
+
+      .calendar-cell__content {
+        position: absolute;
+        top: 5%;
+        left: 5%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: 90%;
+        height: 90%;
+        line-height: 1;
+        border-radius: 999px;
+        background-color: $cellActiveBgColor;
+
+        // bootstraps style
+        // top: 0%;
+        // left: 0%;
+        // width: 100%;
+        // height: 100%;
+        // border-radius: 0;
+        // background-color: $cellActiveBgColor;
+
       }
     }
 
@@ -67,6 +115,10 @@ table.calendar-table {
       background-color: #fff;
       border-color: transparent;
       color: #999;
+
+      .calendar-cell__content {
+        background-color: #fff;
+      }
     }
   }
 }

diff --git a/src/styles/components/range.scss b/src/styles/components/range.scss
@@ -1,3 +1,6 @@
+// TODO: open api for developer to custom the active class
+$activeRangeBgColor: #4285f4;
+
 .action-buttons {
   clear: both;
   padding: 8px;
@@ -30,9 +33,13 @@
     }
 
     &.active {
-      background-color: #08c;
-      border: 1px solid #08c;
-      color: #fff;
+      color: $activeRangeBgColor;
+
+      // bootstrap style
+      // background-color: $activeRangeBgColor;
+      // // TODO did I need set border style ??
+      // border: 1px solid $activeRangeBgColor;
+      // color: #fff;
     }
   }
 }