Temporal coverage styling

eea · Jul 26, 2022 · 96db76a · 96db76a
1 parent 18b060f
commit 96db76a
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/src/SearchBlock/less/datahub.less b/src/SearchBlock/less/datahub.less
@@ -167,6 +167,56 @@
   }
 }
 
+.temporal-coverage {
+  display: flex;
+  align-items: center;
+  margin: 2em 0;
+
+  .time-range {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.2em 1em;
+    background-color: @darkCerulean;
+    color: white;
+    font-size: 23px;
+    font-weight: 700;
+
+    span {
+      margin: 0 10px;
+      line-height: 19px;
+    }
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: -6px;
+      width: 6px;
+      height: 125%;
+      background-color: @darkCerulean;
+      content: ' ';
+    }
+
+    &:before {
+      left: 0;
+    }
+
+    &:after {
+      right: 0;
+    }
+  }
+
+  .side-temp {
+    display: flex;
+    align-items: center;
+    padding: 0.2em 1.3em;
+    background-color: #d2d9de;
+    color: white;
+    font-size: 19px;
+    font-weight: 500;
+  }
+}
+
 .dataset-header {
   margin-bottom: 3em;