fix: Scoping css variables seperately for config date pickers

Author: technikhil314

src/app/app.component.html

@@ -35,27 +35,27 @@ <h3>Configuration Options Generator</h3>
         <input type="text" class="form-control" name="displayFormat" (blur)="formatChanged('displayFormat', $event)"
           [ngModel]=daterangepickerOptions.displayFormat id="displayFormat">
       </div>
-      <div class="form-group col-12 col-md-6">
+      <div class="form-group col-12 col-md-6 configDatePicker">
         <label class="label control-label" for="background">Start Date</label>
         <daterangepicker class="form-control" [options]="startDateConfigDatePickerOptions"
           (rangeSelected)="optionChanged('startDate', $event)">
         </daterangepicker>
       </div>
-      <div class="form-group col-12 col-md-6">
+      <div class="form-group col-12 col-md-6 configDatePicker">
         <label class="label control-label" for="background">
           End Date
         </label>
         <daterangepicker class="form-control" [options]="endDateConfigDatePickerOptions"
           (rangeSelected)="optionChanged('endDate', $event)">
         </daterangepicker>
       </div>
-      <div class="form-group col-12 col-md-6">
+      <div class="form-group col-12 col-md-6 configDatePicker">
         <label class="label control-label" for="background">Min Date</label>
         <daterangepicker class="form-control" [options]="minDateConfigDatePickerOptions"
           (rangeSelected)="optionChanged('minDate', $event)">
         </daterangepicker>
       </div>
-      <div class="form-group col-12 col-md-6">
+      <div class="form-group col-12 col-md-6 configDatePicker">
         <label class="label control-label" for="background">Max Date</label>
         <daterangepicker class="form-control" [options]="maxDateConfigDatePickerOptions"
           (rangeSelected)="optionChanged('maxDate', $event)">

src/styles.css

@@ -10,3 +10,15 @@
   max-height: calc(100vh - 80px);
   overflow-y: auto;
 }
+
+.configDatePicker {
+  --drp-input-height: 33px;
+  --drp-input-border-radius: 4px;
+  --drp-bg: hsla(0, 0%, 98%);
+  --drp-fg: hsla(0, 0%, 20%);
+  --drp-shadow-color: rgba(0, 0, 0, 0.2);
+  --drp-hover-bg: hsla(0, 0%, 80%);
+  --drp-outline-color: hsl(240deg, 50%, 30%);
+  --drp-input-border-color: #666;
+  --drp-input-disabled-color: #dedede;
+}