Fixed month and year picker dark mode

ManukMinasyan · Dec 30, 2019 · 5d4a123 · 5d4a123 · vercel · Dec 30, 2019
1 parent c11b171
commit 5d4a123
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   },
   "name": "vue-functional-calendar",
   "description": "Lightweight, high-performance calendar component based on Vue.js",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/assets/scss/calendar.scss b/src/assets/scss/calendar.scss
@@ -333,6 +333,7 @@ input.vfc-single-input {
 
             .vfc-navigation-buttons {
               position: unset;
+
               div {
                 margin: 10px 10px;
 
@@ -676,6 +677,48 @@ input.vfc-single-input {
 
     .vfc-calendars {
       .vfc-calendar {
+
+        .vfc-months-container {
+          .vfc-content {
+            background-color: $white;
+
+            .vfc-navigation-buttons {
+              div {
+                .vfc-arrow-left, .vfc-arrow-right {
+                  border-color: $black;
+                }
+              }
+
+              .vfc-top-date {
+                color: $black;
+
+                .vfc-popover-caret {
+                  background-color: $white;
+                }
+
+                &.vfc-underline {
+                  text-decoration: underline dotted $royalblue;
+                }
+              }
+            }
+
+            .vfc-months {
+              div.vfc-item {
+                color: $black;
+
+                &:hover {
+                  background-color: rgba(113, 113, 113, 0.3);
+                }
+
+                &.vfc-selected {
+                  background-color: $pictionBlue;
+                  color: $white;
+                }
+              }
+            }
+          }
+        }
+
         div {
           &.vfc-content {
             h2 {
@@ -762,45 +805,6 @@ input.vfc-single-input {
     }
 
 
-    .vfc-months-container {
-      .vfc-content {
-        background-color: $white;
-
-        .vfc-navigation-buttons {
-          .vfc-arrow-left, .vfc-arrow-right {
-            border-color: $black;
-          }
-
-          .vfc-top-date {
-            color: $black;
-
-            .vfc-popover-caret {
-              background-color: $white;
-            }
-
-            &.vfc-underline {
-              text-decoration: underline dotted $royalblue;
-            }
-          }
-        }
-
-        .vfc-months {
-          div.vfc-item {
-            color: $black;
-
-            &:hover {
-              background-color: rgba(113, 113, 113, 0.3);
-            }
-
-            &.vfc-selected {
-              background-color: $pictionBlue;
-              color: $white;
-            }
-          }
-        }
-      }
-    }
-
     .vfc-time-picker-container {
       .vfc-time-picker__list {