fix(datepicker): ease the styling of datepicker (#3248)

Sets background color in ngb-dp-* classes instead of using .bg-light closes #3244
ng-bootstrap · Jul 16, 2019 · dd86266 · dd86266
1 parent 0b3ad65
commit dd86266
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/datepicker/datepicker.scss b/src/datepicker/datepicker.scss
@@ -21,6 +21,7 @@ ngb-datepicker {
     border-bottom: 0;
     border-radius: .25rem .25rem 0 0;
     padding-top: .25rem;
+    background-color: #f8f9fa;
   }
 
   &-months {
@@ -35,6 +36,7 @@ ngb-datepicker {
       height: 2rem;
       line-height: 2rem;
       text-align: center;
+      background-color: #f8f9fa;
     }
 
     & + & {

diff --git a/src/datepicker/datepicker.ts b/src/datepicker/datepicker.ts
@@ -83,7 +83,7 @@ export interface NgbDatepickerNavigateEvent {
       </div>
     </ng-template>
 
-    <div class="ngb-dp-header bg-light">
+    <div class="ngb-dp-header">
       <ngb-datepicker-navigation *ngIf="navigation !== 'none'"
         [date]="model.firstDate"
         [months]="model.months"
@@ -101,7 +101,7 @@ export interface NgbDatepickerNavigateEvent {
       <ng-template ngFor let-month [ngForOf]="model.months" let-i="index">
         <div class="ngb-dp-month">
           <div *ngIf="navigation === 'none' || (displayMonths > 1 && navigation === 'select')"
-                class="ngb-dp-month-name bg-light">
+                class="ngb-dp-month-name">
             {{ i18n.getMonthFullName(month.number, month.year) }} {{ i18n.getYearNumerals(month.year) }}
           </div>
           <ngb-datepicker-month-view