style: update styling in date picker

motss · May 26, 2021 · e51aa08 · e51aa08
1 parent b99105d
commit e51aa08
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -36,6 +36,37 @@
     html,
     body {
       font-family: 'Open Sans', sans-serif;
+      scrollbar-width: thin;
+    }
+
+    /**
+     * NOTE: Webkit-specific scrollbar styling
+     */
+    ::-webkit-scrollbar {
+      width: 8px;
+      background: none;
+    }
+    ::-webkit-scrollbar-thumb {
+      width: inherit;
+      background-color: #cdcdcd;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: rgba(0, 0, 0, .35);
+    }
+    ::-webkit-scrollbar-thumb:active {
+      background-color: rgba(0, 0, 0, .55);
+    }
+    @media (prefers-color-scheme: dark) {
+      ::-webkit-scrollbar-thumb {
+        background-color: #686868;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: #494949;
+      }
+      ::-webkit-scrollbar-thumb:active {
+        background-color: #5a5a5a;
+      }
     }
 
     app-date-picker {

diff --git a/src/date-picker/date-picker.ts b/src/date-picker/date-picker.ts
@@ -24,7 +24,7 @@ import { iconArrowDropdown, iconChevronLeft, iconChevronRight } from '../icons.j
 import { DatePickerMinMaxMixin } from '../mixins/date-picker-min-max-mixin.js';
 import { DatePickerMixin } from '../mixins/date-picker-mixin.js';
 import type { MonthCalendarData } from '../month-calendar/typings.js';
-import { resetShadowRoot } from '../stylings.js';
+import { resetShadowRoot, webkitScrollbarStyling } from '../stylings.js';
 import type { CalendarView, DatePickerProperties, Formatters, ValueUpdatedEvent, YearUpdatedEvent } from '../typings.js';
 import type { YearGridData } from '../year-grid/typings.js';
 import { datePickerStyling } from './stylings.js';
@@ -68,6 +68,7 @@ export class DatePicker extends DatePickerMixin(DatePickerMinMaxMixin(LitElement
   public static styles = [
     resetShadowRoot,
     datePickerStyling,
+    webkitScrollbarStyling,
   ];
 
   constructor() {

diff --git a/src/date-picker/stylings.ts b/src/date-picker/stylings.ts
@@ -53,6 +53,11 @@ export const datePickerStyling = css`
 
 .month-dropdown {
   margin: 0 0 0 -8px;
+  transition: transform 300ms cubic-bezier(0, 0, .4, 1);
+  will-change: transform;
+}
+:host([startview="yearGrid"]) .month-dropdown {
+  transform: rotateZ(180deg);
 }
 
 .month-pagination {
@@ -66,6 +71,7 @@ export const datePickerStyling = css`
   height: 100%;
   padding: 4px 20px 8px 12px;
   overflow: auto;
+  scrollbar-width: thin;
 }
 
 .calendar {

diff --git a/src/month-calendar/month-calendar.ts b/src/month-calendar/month-calendar.ts
@@ -189,7 +189,6 @@ export class MonthCalendar extends LitElement implements MonthCalendarProperties
                   data-day=${value}
                   .fullDate=${fullDate}
                 >
-                  <div class=calendar-day-value>${value}</div>
                 </td>
                 `;
               })

diff --git a/src/month-calendar/stylings.ts b/src/month-calendar/stylings.ts
@@ -39,16 +39,6 @@ td {
   line-height: 1;
 }
 
-.calendar-day::after,
-.calendar-day-value {
-  top: calc((32px - 28px) / 2);
-  right: 0;
-  bottom: 0;
-  left: calc((32px - 28px) / 2);
-  width: 28px;
-  height: 28px;
-}
-
 .calendar-day {
   width: 32px;
   height: 32px;
@@ -60,57 +50,57 @@ td {
     cursor: pointer;
   }
 }
-.calendar-day[aria-selected="true"] {
-  color: var(--date-picker-calendar-day-color, var(--base-selected-color));
-}
 
-.calendar-day::after {
-  content: '';
-  display: block;
+.calendar-day:not([aria-hidden="true"])::before,
+.calendar-day:not([aria-hidden="true"])::after {
+  content: attr(data-day);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: absolute;
+  top: calc((32px - 28px) / 2);
+  left: calc((32px - 28px) / 2);
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  opacity: 0;
   pointer-events: none;
-  will-change: opacity;
 }
-.calendar-day.day--today::after,
+.calendar-day.day--today:not([aria-selected="true"])::before,
 .calendar-day:hover::after,
 .calendar-day:focus::after {
   width: 26px;
   height: 26px;
-  opacity: 1;
   border-style: solid;
   border-width: 1px;
 }
-.calendar-day[aria-selected="true"]::after {
-  background-color: var(--date-picker-selected-background-color, var(--base-selected-background-color));
-  opacity: 1;
+
+.calendar-day::before {
+  z-index: 1;
 }
-.calendar-day.day--today::after {
+.calendar-day[aria-selected="true"]::before {
+  color: var(--date-picker-calendar-day-color, var(--base-selected-color));
+}
+.calendar-day.day--today:not([aria-selected="true"])::before {
   border-color: var(--date-picker-today-color, var(--base-today-color));
 }
+.calendar-day.day--today:not([aria-selected="true"]):focus::before,
+.calendar-day.day--today:not([aria-selected="true"]):hover::before {
+  top: calc((32px - 26px) / 2);
+  left: calc((32px - 26px) / 2);
+  width: 24px;
+  height: 24px;
+}
+
+.calendar-day:not([aria-hidden="true"])::after {
+  content: '';
+}
+.calendar-day[aria-selected="true"]::after {
+  background-color: var(--date-picker-selected-background-color, var(--base-selected-background-color));
+}
 .calendar-day:focus::after {
   border-color: var(--date-picker-focus-color, var(--base-focus-color));
 }
 .calendar-day:hover::after {
   border-color: var(--date-picker-hover-color, var(--base-hover-color));
 }
-.calendar-day[aria-disabled="true"],
-.calendar-day.day--empty {
-  background-color: none;
-  outline: none;
-  opacity: 0;
-}
-
-.calendar-day > .calendar-day-value {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  position: absolute;
-  color: currentColor;
-  z-index: 1;
-}
 `;
diff --git a/src/stylings.ts b/src/stylings.ts
@@ -73,3 +73,35 @@ svg {
   pointer-events: none;
 }
 `;
+
+export const webkitScrollbarStyling = css`
+/**
+ * NOTE: Webkit-specific scrollbar styling
+ */
+::-webkit-scrollbar {
+  width: 8px;
+  background: none;
+}
+::-webkit-scrollbar-thumb {
+  width: inherit;
+  background-color: #cdcdcd;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, .35);
+}
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, .55);
+}
+@media (prefers-color-scheme: dark) {
+  ::-webkit-scrollbar-thumb {
+    background-color: #686868;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #494949;
+  }
+  ::-webkit-scrollbar-thumb:active {
+    background-color: #5a5a5a;
+  }
+}
+`;
diff --git a/src/year-grid/stylings.ts b/src/year-grid/stylings.ts
@@ -27,9 +27,6 @@ export const yearGridStyling = css`
     cursor: pointer;
   }
 }
-.year-grid > .year-grid-button[aria-selected="true"] {
-  color: var(--year-grid-color, var(--base-selected-color));
-}
 
 .year-grid > .year-grid-button:focus::before,
 .year-grid > .year-grid-button:hover::before,
@@ -49,6 +46,9 @@ export const yearGridStyling = css`
   border-radius: 50px;
   z-index: 1;
 }
+.year-grid > .year-grid-button[aria-selected="true"]::before {
+  color: var(--year-grid-color, var(--base-selected-color));
+}
 .year-grid > .year-grid-button:focus::before {
   border-color: var(--year-grid-focus-color, var(--base-focus-color));
 }