From 9619ea06de2fa9c563aa8791cce11502e947dfe5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Mon, 25 Jan 2021 10:56:03 +0100
Subject: [PATCH] code climate checks

 - use variables for colors instead of values
 - trailinf line at the end of file
 - new line after each declaration
 - 2 spaces of indentation
 - avoid qualifying elements in selectors
 - prefer lowercase in hexa color
---
 app/assets/stylesheets/admin/datepicker.scss  |   6 +-
 .../plugins/flatpickr-customization.scss      | 106 ++++++++++--------
 2 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/app/assets/stylesheets/admin/datepicker.scss b/app/assets/stylesheets/admin/datepicker.scss
index 176415d930..d75093d941 100644
--- a/app/assets/stylesheets/admin/datepicker.scss
+++ b/app/assets/stylesheets/admin/datepicker.scss
@@ -2,8 +2,8 @@ input.datetimepicker {
   min-width: 12.9em;
 }
 
-.container input[readonly].flatpickr-input {
-  background-color: #ffffff;
+.container .flatpickr-input {
+  background-color: $white;
   cursor: pointer;
 }
 
@@ -11,4 +11,4 @@ img.ui-datepicker-trigger {
   margin-left: -1.75em;
   position: absolute;
   margin-top: 0.5em;
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
index a667d912a5..39880e4683 100644
--- a/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
+++ b/app/assets/stylesheets/admin/plugins/flatpickr-customization.scss
@@ -1,50 +1,58 @@
-.flatpickr-calendar {
-    /* Disable animation */
-    &.animate.open {
-        animation: none;
-    }
-    border-radius: 0;
-    &.arrowBottom:after {
-        border-top-color: #eceef1;
-    }
-    &.arrowTop:after {
-        border-bottom-color: #5498DA;
-    }
-    .flatpickr-months .flatpickr-month {
-        border-radius: 0;
-    }
-    .flatpickr-months .flatpickr-month,
-    .flatpickr-current-month .flatpickr-monthDropdown-months {
-        background: #5498DA;
-    }
-        
-    .flatpickr-weekdays {
-        background: #5498DA;
-        span.flatpickr-weekday {
-            background: #5498DA;
-        }
-    }
-  
-    .flatpickr-day.selected,
-    .flatpickr-day.startRange,
-    .flatpickr-day.endRange,
-    .flatpickr-day.selected.inRange,
-    .flatpickr-day.startRange.inRange,
-    .flatpickr-day.endRange.inRange,
-    .flatpickr-day.selected:focus,
-    .flatpickr-day.startRange:focus,
-    .flatpickr-day.endRange:focus,
-    .flatpickr-day.selected:hover,
-    .flatpickr-day.startRange:hover,
-    .flatpickr-day.endRange:hover,
-    .flatpickr-day.selected.prevMonthDay,
-    .flatpickr-day.startRange.prevMonthDay,
-    .flatpickr-day.endRange.prevMonthDay,
-    .flatpickr-day.selected.nextMonthDay,
-    .flatpickr-day.startRange.nextMonthDay,
-    .flatpickr-day.endRange.nextMonthDay {
-        background: #5498DA;
-        border-color: #5498DA;
-    }
+$background-grey: #eceef1;
+$background-blue: #5498da;
 
-}
\ No newline at end of file
+.flatpickr-calendar {
+  border-radius: 0;
+
+  // Disable animation
+  &.animate.open {
+    animation: none;
+  }
+
+  &.arrowBottom::after {
+    border-top-color: $background-grey;
+  }
+
+  &.arrowTop::after {
+    border-bottom-color: $background-blue;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    border-radius: 0;
+  }
+
+  .flatpickr-months .flatpickr-month,
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+    background: $background-blue;
+  }
+
+  .flatpickr-weekdays {
+    background: $background-blue;
+
+    .flatpickr-weekday {
+      background: $background-blue;
+    }
+  }
+
+  .flatpickr-day.selected,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange,
+  .flatpickr-day.selected.inRange,
+  .flatpickr-day.startRange.inRange,
+  .flatpickr-day.endRange.inRange,
+  .flatpickr-day.selected:focus,
+  .flatpickr-day.startRange:focus,
+  .flatpickr-day.endRange:focus,
+  .flatpickr-day.selected:hover,
+  .flatpickr-day.startRange:hover,
+  .flatpickr-day.endRange:hover,
+  .flatpickr-day.selected.prevMonthDay,
+  .flatpickr-day.startRange.prevMonthDay,
+  .flatpickr-day.endRange.prevMonthDay,
+  .flatpickr-day.selected.nextMonthDay,
+  .flatpickr-day.startRange.nextMonthDay,
+  .flatpickr-day.endRange.nextMonthDay {
+    background: $background-blue;
+    border-color: $background-blue;
+  }
+}