Move styling for DatePicker Vue component to separate SASS file and make it compatible with dark theme
MODIFY
resources/assets/js/components/DatePicker.vue
resources/assets/js/components/DatePicker.vue
<template>
<div>
<input type="text" :name="name" v-model="form" />
- <div class="date-picker">
+ <div class="date-picker mt-1">
<div class="date-picker__top">
<button @click="previous">
<i class="fa fa-arrow-left"></i>

MODIFY
resources/assets/sass/app.scss
resources/assets/sass/app.scss
@import 'components/card';
@import 'components/box';
@import 'components/input';
+@import 'components/date-picker';
@import 'components/helpers';
body {
@@ -25,56 +26,6 @@ canvas {
width: 100%;
}
-// Date Picker
-.date-picker {
- width: 352px;
- border: 1px solid $colors-border;
- border-radius: 5px;
-
- .date-picker__top {
- padding: 20px;
- display: flex;
- justify-content: space-between;
- border-bottom: 1px solid $colors-border;
-
- button {
- border: none;
- }
- }
-
- .date-picker__bottom {
- display: flex;
- flex-wrap: wrap;
-
- button {
- display: block;
- width: 50px;
- height: 50px;
- border-top: 1px solid $colors-border;
- border-left: none;
- border-right: 1px solid $colors-border;
- border-bottom: none;
- border-radius: 0;
-
- &:nth-child(-n + 7) {
- border-top: none;
- }
-
- &:nth-child(7n) {
- border-right: none;
- }
-
- &:hover {
- cursor: pointer;
- }
-
- &.active {
- color: $colors-primary;
- }
- }
- }
-}
-
.dropdown {
position: relative;
}

ADD
resources/assets/sass/components/date-picker.scss
+.date-picker {
+ width: 372px;
+ border-radius: 5px;
+ border: 1px solid red;
+
+ button {
+ font: inherit;
+ background: none;
+ border: none;
+ }
+
+ .date-picker__top {
+ padding: 20px;
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid red;
+ }
+
+ .date-picker__bottom {
+ padding: 10px;
+ display: flex;
+ flex-wrap: wrap;
+
+ button {
+ display: block;
+ width: 50px;
+ height: 50px;
+ border-radius: 2px;
+
+ &:nth-child(-n + 7) {
+ border-top: none;
+ }
+
+ &:nth-child(7n) {
+ border-right: none;
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.active {
+ background: $colors-primary;
+ color: #FFF;
+ }
+ }
+ }
+}
+
+.theme-light .date-picker {
+ background: $colors-light-body;
+ border-color: $colors-light-border;
+
+ .date-picker__top {
+ border-color: $colors-light-border;
+ }
+
+ button {
+ color: #000;
+ }
+
+ .date-picker__bottom button {
+ &:hover {
+ background: $colors-light-border;
+ }
+ }
+}
+
+.theme-dark .date-picker {
+ background: $colors-dark-body;
+ border-color: $colors-dark-border;
+
+ .date-picker__top {
+ border-color: $colors-dark-border;
+ }
+
+ button {
+ color: #FFF;
+ }
+
+ .date-picker__bottom button {
+ &:hover {
+ background: $colors-dark-border;
+ }
+ }
+}

Move styling for DatePicker Vue component to separate SASS file and make it compatible with dark theme