fix: Live departures styling fixes (#893)

* departure time alignment * add focus state to live dep tabs
wmcadigital · Nov 30, 2021 · 47ecf9b · 47ecf9b
1 parent f9b0cd7
commit 47ecf9b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/wmnds/patterns/live-departures/live-departures.scss b/src/wmnds/patterns/live-departures/live-departures.scss
@@ -59,7 +59,7 @@
 
   &__times {
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     flex-wrap: nowrap;
 
     @media (max-width: $breakpoint-sm - 1) {
@@ -68,6 +68,10 @@
   }
 
   &__time {
+    max-width: calc(100% / 3);
+    flex-grow: 1;
+    flex-basis: 20%;
+
     @media (max-width: $breakpoint-sm - 1) {
       &:nth-child(3) ~ * {
         display: none;
@@ -241,6 +245,12 @@
     background-color: get-color(primary);
   }
 
+  &__input:focus + #{ $self }__label {
+    z-index: 1;
+    outline: 0;
+    box-shadow: 0 0 0 2px $white, 0 0 0 4px get-color(secondary);
+  }
+
   &__input ~ #{ $self }__arrivals,
   &__input ~ #{ $self }__departures {
     display: none;

diff --git a/src/www/pages/patterns/live-departures/index.njk.md b/src/www/pages/patterns/live-departures/index.njk.md
@@ -39,7 +39,7 @@
             name: "16",
             destination: "Wolverhampton",
             operator: "National Express West Midlands",
-            times: [3, 7, 28]
+            times: [3, 7]
           },
           {
             name: "17",