Updated styles

Author: davenquinn

packages/column-components/stories/base-section.ts

@@ -17,7 +17,7 @@ import {
   TimescaleOrientation,
   IncreaseDirection,
 } from "@macrostrat/timescale";
-import styles from "./measured-section.module.sass";
+import styles from "./measured-section.stories.module.sass";
 
 const h = hyper.styled(styles);
 

packages/column-components/stories/measured-section.module.sass

@@ -0,0 +1,66 @@
+//:global
+//  @require "./imported"
+
+@use "sass:color"
+
+.measured-section
+  display: flex
+  flex-direction: row
+
+  :global
+    .timescale
+      margin-top: 30px
+    .spacer
+      flex-grow: 2
+
+    // Move units a bit to the right to avoid cut-off stroke
+    .lithology-column
+      transform: translate(1px, 0px)
+
+    .labeled-unit div.unit-overlay
+      font-size: 14px
+      text-align: center
+
+    g.unit
+      rect.unit
+        stroke-width: 1.5px
+
+    g.lithology-column use.frame
+      stroke: black
+
+    @media (prefers-color-scheme: dark)
+      .lithology-column .frame
+        stroke: white
+      g.inner
+        pattern: image
+        filter: invert(100%)
+
+    .column.age-axis
+      width: 55px
+
+    .column .tick text
+      font-size: 14px
+
+    .column
+      flex: 0
+      .age-axis-label
+        font-size: 14px
+
+    .map-area
+      height: 220px
+
+    @mixin interval($color)
+      &>.interval-box
+        margin: 0px
+        background-color: color.adjust($color, $lightness: 50%)
+        border: 2px solid color.adjust($color, $lightness: 10%) !important
+        .interval-label
+          color: color.adjust($color, $lightness: -30%)
+
+    .interval
+      &.Blueflower
+        @include interval(dodgerblue)
+      &.Gametrail
+        @include  interval(#c0ddc6)
+      &.Rackla
+        @include interval(#aaa)

packages/column-components/stories/measured-section.stories.module.sass

@@ -1,8 +1,7 @@
 import h from "@macrostrat/hyper";
 import { ColumnDivision, ColumnSurface } from "@macrostrat/column-components";
 import { BaseUnit } from "@macrostrat/api-types";
-import { IUnit } from "@macrostrat/column-views";
-import "./measured-section.module.sass";
+import "./measured-section.stories.module.sass";
 
 import { MeasuredSection } from "./base-section";
 

packages/column-components/stories/measured-section.stories.ts

@@ -0,0 +1,23 @@
+.zebra-nappe-section :global
+  .y.axis
+    font-size: 12px
+    text-align: center
+    position: sticky
+    transform: translateY(-1px)
+
+    .tick text
+      text-anchor: middle
+      font-weight: 400
+      transform: rotate(-90deg) translate(8px, -12px)
+
+  .timescale
+    color: white
+    font-weight: 500
+
+  g.lithology-column
+    transform: translateX(1px)
+    rect.lithology
+      stroke: white
+      stroke-width: 1px
+    use.frame
+      stroke: white

packages/column-components/stories/measured-section.styl

@@ -1,14 +1,15 @@
-import h from "@macrostrat/hyper";
+import hyper from "@macrostrat/hyper";
 import {
   ColumnDivision,
   ColumnSurface,
   ParameterIntervals,
 } from "@macrostrat/column-components";
 import { BaseUnit } from "@macrostrat/api-types";
-import "./measured-section.module.sass";
 import zebraNappeIntervals from "./naukluft-intervals.json";
 import namaIntervals from "./nama-intervals.json";
-import "./zebra-nappe.sass";
+import styles from "./zebra-nappe.stories.module.sass";
+
+const h = hyper.styled(styles);
 
 import { MeasuredSection } from "./base-section";
 import { defaultResolveID } from "@macrostrat/column-components";
@@ -40,6 +41,7 @@ export function ZebraRiverGroup() {
     MeasuredSection,
     {
       data: surfaces,
+      className: "zebra-nappe-section",
       timescaleProps: {
         intervals,
         levels: [0, 2],
@@ -88,6 +90,7 @@ export function NamaGroup() {
     MeasuredSection,
     {
       data: surfaces,
+      className: "zebra-nappe-section",
       timescaleProps: {
         intervals,
         levels: [0, 2],