feat: update to Angular 8, Nebular 4 (#2114)

src/app/pages/extra-components/calendar/calendar.component.html

@@ -1,20 +1,20 @@
-<div class="row">
-  <div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
-    <h2>
+<div class="calendars">
+  <div class="calendar-container">
+    <span class="subtitle">
       Selected date: {{ date | date }}
-    </h2>
+    </span>
     <nb-calendar [(date)]="date" [boundingMonth]="true"></nb-calendar>
   </div>
-  <div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
-    <h2>
+  <div class="calendar-container">
+    <span class="subtitle">
       Selected range: {{ range.start | date }} - {{ range.end | date }}
-    </h2>
+    </span>
     <nb-calendar-range [(range)]="range"></nb-calendar-range>
   </div>
-  <div class="nebular-calendar col-md-12 col-lg-6 col-xxxl-4">
-    <h2>
+  <div class="calendar-container">
+    <span class="subtitle">
       Selected date: {{ date2 | date }}
-    </h2>
+    </span>
     <nb-calendar
       [(date)]="date2"
       [dayCellComponent]="dayCellComponent"

src/app/pages/extra-components/calendar/calendar.component.scss

@@ -1,19 +1,46 @@
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  .calendars-container {
-    margin-top: 2rem;
-  }
-
-  h2 {
-    font-size: nb-theme(font-size-xlg);
-    text-align: center;
-  }
-
-  .nebular-calendar {
+  .calendars {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 3rem;
+    flex-wrap: wrap;
+    margin: -1rem -0.5rem;
+    justify-content: center;
+  }
+
+  .calendar-container {
+    margin: 1rem 0.5rem;
+  }
+
+  .subtitle {
+    display: block;
+    font-family: nb-theme(text-subtitle-font-family);
+    font-size: nb-theme(text-subtitle-font-size);
+    font-weight: nb-theme(text-subtitle-font-weight);
+    line-height: nb-theme(text-subtitle-line-height);
+    margin-bottom: 0.5rem;
+  }
+
+  @include media-breakpoint-up(md) {
+    .calendars {
+      justify-content: flex-start;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .calendars {
+      margin: -1.1rem;
+    }
+    .calendar-container {
+      margin: 1rem;
+    }
+  }
+
+  @include media-breakpoint-up(xxxl) {
+    .calendars {
+      margin: -1rem;
+    }
   }
 }

src/app/pages/extra-components/calendar/day-cell/day-cell.component.html

@@ -1,4 +1,2 @@
-<div>
-  <div>{{ day }}</div>
-  <span>{{ (day + 100) * day }}$</span>
-</div>
+<div>{{ day }}</div>
+<span class="caption">{{ (day + 100) * day }}$</span>

src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss

@@ -2,9 +2,18 @@
 
 @include nb-install-component() {
   text-align: center;
+  flex-direction: column;
 
-  span {
-    font-size: 75%;
-    opacity: 0.75;
+  .caption {
+    display: block;
+  }
+
+  &.selected .caption,
+  &:hover .caption {
+    color: nb-theme(text-control-color);
+  }
+
+  &.bounding-month .caption {
+    color: inherit;
   }
 }