[#687] DatePicker 컴포넌트 개발

################ - Calendar css 수정 (명확한 클래스명으로 지정)
ex-em · Oct 30, 2020 · 5102320 · 5102320
1 parent 9306bd8
commit 5102320
Showing 1 changed file with 12 additions and 10 deletions.
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
@@ -4,15 +4,16 @@
       <div class="ev-calendar-header">
         <div>
           <i
-            class="ev-icon-s-arrow-left"
+            class="ev-icon-s-arrow-left move-month-arrow"
             @click="clickPrevNextBtn('main', 'prev')"
           />
         </div>
         <span class="ev-calendar-year">{{ mainCalendarPageInfo.year }}</span>
         <span class="ev-calendar-month">{{ mainCalendarMonth }}</span>
-        <div :class="{ disabled: isContinuousMonths }">
+        <div>
           <i
-            class="ev-icon-s-arrow-right"
+            class="ev-icon-s-arrow-right move-month-arrow"
+            :class="{ disabled: isContinuousMonths }"
             @click="clickPrevNextBtn('main', 'next')"
           />
         </div>
@@ -68,17 +69,18 @@
       class="ev-calendar-date-area"
     >
       <div class="ev-calendar-header">
-        <div :class="{ disabled: isContinuousMonths }">
+        <div>
           <i
-            class="ev-icon-s-arrow-left"
+            class="ev-icon-s-arrow-left move-month-arrow"
+            :class="{ disabled: isContinuousMonths }"
             @click="clickPrevNextBtn('expanded', 'prev')"
           />
         </div>
         <span class="ev-calendar-year">{{ expandedCalendarPageInfo.year }}</span>
         <span class="ev-calendar-month">{{ expandedCalendarMonth }}</span>
         <div>
           <i
-            class="ev-icon-s-arrow-right"
+            class="ev-icon-s-arrow-right move-month-arrow"
             @click="clickPrevNextBtn('expanded', 'next')"
           />
         </div>
@@ -343,12 +345,9 @@ export default {
     width: 20px;
     flex: 1;
     text-align: center;
-    &.disabled i {
-      color: #C0C4CC;
-    }
   }
 
-  i {
+  .move-month-arrow {
     width: 20px;
     height: 20px;
     line-height: 20px;
@@ -358,6 +357,9 @@ export default {
     &:hover {
       color: #3C81F6;
     }
+    &.disabled {
+      color: #C0C4CC;
+    }
   }
 
   span {