@ebay/skin 16.0.0-2 → 16.1.0-0

package/src/less/calendar/calendar.less

@@ -109,22 +109,33 @@
  ************/
 
 .calendar__month
-    td[aria-current="date"]:not([aria-selected="true"])
-    > :not(:disabled, [aria-disabled="true"]) {
+    td:not(.calendar__cell--selected)
+    > [aria-current="date"]:not(:disabled),
+.calendar__month
+    td:not(.calendar__cell--selected)
+    > .calendar__cell--current:not(.calendar__cell--disabled) {
     .border-color-token(calendar-day-today-border-color, color-foreground-primary);
     border-style: solid;
 }
 
 .calendar__month td > :disabled,
-.calendar__month .calendar__cell--disabled {
+.calendar__month td > .calendar__cell--disabled {
     .color-token(calendar-day-disabled-color, color-foreground-disabled);
 }
 
-.calendar__month td:not(.calendar__range, [aria-selected="true"]) > button:not(:disabled):hover {
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not(:disabled):hover {
     .background-color-token(calendar-day-hover-background-color, color-state-primary-hover);
 }
 
-.calendar__month td[aria-selected="true"] > * {
+.calendar__month
+    td:not(.calendar__range, .calendar__cell--selected)
+    > button:not(:disabled):active {
+    font-weight: bold;
+}
+
+.calendar__month td.calendar__cell--selected > * {
     .background-color-token(calendar-day-selected-background-color, color-background-inverse);
     .color-token(calendar-day-selected-color, color-foreground-on-inverse);
     font-weight: bold;
@@ -143,13 +154,10 @@
     // Only visible in WHCM
     border: solid transparent;
     border-width: 1px 0;
-    bottom: 0;
     content: "";
-    left: 0;
+    inset: 0;
     pointer-events: none;
     position: absolute;
-    right: 0;
-    top: 0;
 }
 
 .calendar__range--start::before {
@@ -163,18 +171,28 @@
 }
 
 .calendar__range--start {
-    background: linear-gradient(to right, transparent 50%, var(--color-state-secondary-active) 50%);
+    background: linear-gradient(
+        to right,
+        transparent 50%,
+        var(--color-state-secondary-active) 50%
+    );
 }
 
 .calendar__range--end {
-    background: linear-gradient(to left, transparent 50%, var(--color-state-secondary-active) 50%);
+    background: linear-gradient(
+        to left,
+        transparent 50%,
+        var(--color-state-secondary-active) 50%
+    );
 }
 
 .calendar__range--start.calendar__range--end {
     background: transparent;
 }
 
-.calendar__range--start:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]),
-.calendar__range--end:not([aria-selected="true"]) > :not(:disabled, [aria-disabled="true"]) {
+.calendar__range--start:not(.calendar__cell--selected)
+    > :not(:disabled, [aria-disabled="true"]),
+.calendar__range--end:not(.calendar__cell--selected)
+    > :not(:disabled, [aria-disabled="true"]) {
     .background-color-token(calendar-day-range-end, color-state-secondary-active);
 }