@macrostrat/map-interface 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/index.cjs +116 -106
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +55 -34
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.js +119 -109
  6. package/dist/index.js.map +1 -1
  7. package/dist/types.d.ts +12 -1
  8. package/dist/types.d.ts.map +1 -1
  9. package/package.json +4 -3
  10. package/src/container.ts +17 -14
  11. package/src/dev/vector-tile-features.ts +22 -18
  12. package/src/expansion-panel/index.ts +1 -0
  13. package/src/expansion-panel/main.module.sass +3 -3
  14. package/src/helpers.ts +2 -1
  15. package/src/location-panel/main.module.sass +3 -0
  16. package/src/main.module.sass +87 -82
  17. package/src/map-view/index.ts +49 -27
  18. package/src/map-view/main.module.sass +10 -0
package/dist/index.css CHANGED
@@ -104,6 +104,10 @@
104
104
  overflow-y: hidden;
105
105
  }
106
106
 
107
+ .VPa3-W_infodrawer-contents {
108
+ padding: 0 1em 1em;
109
+ }
110
+
107
111
  .VPa3-W_infodrawer-body {
108
112
  min-height: 0;
109
113
  flex-shrink: 1;
@@ -124,6 +128,7 @@
124
128
  flex-direction: column;
125
129
  display: flex;
126
130
  position: relative;
131
+ overflow: hidden;
127
132
  }
128
133
 
129
134
  .map-page_4c0a66.fit-viewport_4c0a66 {
@@ -173,6 +178,7 @@
173
178
  .panel-card_4c0a66 {
174
179
  background-color: var(--panel-background-color);
175
180
  padding: 10px;
181
+ overflow: hidden;
176
182
  }
177
183
 
178
184
  .panel-card_4c0a66 > :last-child {
@@ -302,12 +308,7 @@
302
308
  width: 100%;
303
309
  }
304
310
 
305
- #map {
306
- position: absolute;
307
- inset: 0;
308
- }
309
-
310
- #map .mapbox-compass, #map .mapbox-3d {
311
+ .mapbox-map .mapbox-compass, .mapbox-map .mapbox-3d {
311
312
  display: none;
312
313
  }
313
314
 
@@ -459,7 +460,7 @@
459
460
  max-height: 70%;
460
461
  }
461
462
 
462
- .exit-active {
463
+ .infodrawer-stack_4c0a66.exit-active {
463
464
  max-height: 0;
464
465
  }
465
466
 
@@ -493,30 +494,32 @@
493
494
  margin-right: 0;
494
495
  }
495
496
 
496
- .main-ui_4c0a66.searching_4c0a66 .context-stack_4c0a66 {
497
- width: 24em;
498
- }
499
-
500
497
  .context-stack_4c0a66 {
501
498
  max-width: 34em;
502
499
  min-width: 14em;
503
- width: 16em;
500
+ width: var(--map-context-stack-width, 16em);
501
+ flex-direction: column;
502
+ margin-right: .5em;
504
503
  padding-bottom: .5em;
505
504
  transition: width .3s;
505
+ display: flex;
506
506
  }
507
507
 
508
- .context-stack_4c0a66.panel-open_4c0a66 {
509
- width: 34em;
510
- margin-right: .5em;
508
+ .context-stack_4c0a66 > .spacer_4c0a66 {
509
+ flex-grow: 0;
511
510
  }
512
511
 
513
- .context-stack_4c0a66.layers_4c0a66, .context-stack_4c0a66.settings_4c0a66 {
514
- width: 18em;
515
- margin-right: .5em;
512
+ .context-panel-holder_4c0a66 {
513
+ min-height: 0;
514
+ position: relative;
515
+ }
516
+
517
+ .context-panel-holder_4c0a66 > div {
518
+ max-height: 100%;
516
519
  }
517
520
 
518
521
  .main-ui_4c0a66.detail-panel-open_4c0a66 .detail-stack_4c0a66 {
519
- width: 30em;
522
+ width: var(--map-detail-stack-width, 30em);
520
523
  }
521
524
 
522
525
  .detail-stack_4c0a66 {
@@ -544,6 +547,10 @@
544
547
  pointer-events: none;
545
548
  }
546
549
 
550
+ .context-stack_4c0a66 .context-stack_4c0a66 .spacer_4c0a66, .detail-stack_4c0a66 .context-stack_4c0a66 .spacer_4c0a66 {
551
+ min-height: 1em;
552
+ }
553
+
547
554
  .map-view-container_4c0a66 {
548
555
  position: unset;
549
556
  }
@@ -565,19 +572,25 @@
565
572
  opacity: 0;
566
573
  }
567
574
 
568
- .main-ui_4c0a66 .context-panel_4c0a66 {
569
- transition: opacity .8s, height .8s, max-height .8s;
575
+ .main-ui_4c0a66 .context-panel-holder_4c0a66 {
576
+ pointer-events: none;
577
+ flex: 1;
578
+ }
579
+
580
+ .main-ui_4c0a66 .context-panel-holder_4c0a66 > div {
581
+ pointer-events: all;
582
+ transition: opacity .8s;
570
583
  }
571
584
 
572
- .main-ui_4c0a66.context-panel-from_4c0a66 .context-panel_4c0a66 {
585
+ .main-ui_4c0a66.context-panel-from_4c0a66 .context-panel-holder_4c0a66 > div {
573
586
  opacity: 0;
574
587
  }
575
588
 
576
- .main-ui_4c0a66.context-panel-enter_4c0a66 .context-panel_4c0a66 {
589
+ .main-ui_4c0a66.context-panel-enter_4c0a66 .context-panel-holder_4c0a66 > div {
577
590
  opacity: 1;
578
591
  }
579
592
 
580
- .main-ui_4c0a66.context-panel-leave_4c0a66 .context-panel_4c0a66 {
593
+ .main-ui_4c0a66.context-panel-leave_4c0a66 .context-panel-holder_4c0a66 > div {
581
594
  opacity: 0;
582
595
  }
583
596
 
@@ -596,18 +609,17 @@
596
609
  max-height: 0;
597
610
  }
598
611
 
599
- .main-ui_4c0a66 .context-panel_4c0a66 {
600
- transition: opacity .8s, height .8s, max-height .8s;
601
- }
602
-
603
612
  .main-ui_4c0a66.context-panel-from_4c0a66 .context-panel_4c0a66 {
604
613
  max-height: 0;
605
614
  height: 0;
606
615
  }
607
616
 
608
- .main-ui_4c0a66.context-panel-leave_4c0a66 .context-panel_4c0a66 {
609
- max-height: 0;
610
- max-height: 0;
617
+ .main-ui_4c0a66.context-panel-leave_4c0a66 .context-stack_4c0a66 .context-panel-holder_4c0a66 {
618
+ flex: 0;
619
+ }
620
+
621
+ .main-ui_4c0a66.context-panel-leave_4c0a66 .context-stack_4c0a66 .spacer_4c0a66 {
622
+ flex: 1;
611
623
  }
612
624
  }
613
625
 
@@ -631,6 +643,15 @@
631
643
  overflow: hidden;
632
644
  }
633
645
 
646
+ .-mD4Aa_mapbox-map {
647
+ position: absolute;
648
+ inset: 0;
649
+ }
650
+
651
+ .-mD4Aa_mapbox-map.mapboxgl-map {
652
+ position: absolute;
653
+ }
654
+
634
655
  @media screen and (min-width: 768px) {
635
656
  .-mD4Aa_map-view-container {
636
657
  position: unset;
@@ -725,8 +746,8 @@
725
746
 
726
747
  .panel-subhead_1340c8 {
727
748
  padding: .2em var(--box-horizontal-padding);
728
- border-top: 1px solid var(--accent-border-color);
729
- border-bottom: 1px solid var(--accent-border-color);
749
+ border-top: 1px solid var(--panel-rule-color);
750
+ border-bottom: 1px solid var(--panel-rule-color);
730
751
  background-color: var(--accent-color);
731
752
  z-index: 1;
732
753
  align-items: center;
@@ -734,7 +755,7 @@
734
755
  flex-direction: row;
735
756
  display: flex;
736
757
  position: sticky;
737
- top: 0;
758
+ top: -1px;
738
759
  }
739
760
 
740
761
  .panel-subhead_1340c8 h1, .panel-subhead_1340c8 h2, .panel-subhead_1340c8 h3, .panel-subhead_1340c8 h4 {
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"AAAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;AAQE;;;;;AAGA;;;;AAEE;;;;AAGN;;;;;;AAOA;EACE;;;;;;;AChCF;;;;AAEE;;;;AAGF;;;;;;;;;AAOE;;;;AAEA;;;;AAGA;;;;AAGF;;;;AAEE;;;;;AAIF;;;;;;;;;;AAQE;;;;AAIE;;;;;AAIJ;;;;;;;;AAQA;EACE;;;;;ACnDF;;;;;;;;AAME;;;;;;AAOA;;;;AAGE;;;;AAGF;;;;AAEA;;;;AAEA;;;;AAKE;;;;AAEF;;;;A;;;;;;;;;;A;;;;;AAcA;;;;AAGE;;;;AAEJ;;;;;;AAIE;;;;A;;;;A;;;;A;;;;;A;;;;AAeA;;;;AAGA;;;;;AAGF;;;;;;AAIE;;;;A;;;;AAKA;;;;;;;A;;;;;;;AASF;;;;AAIE;;;;;;AAIA;;;;;AAIA;;;;A;;;;;;;AASA;;;;;;AAIF;;;;;AAGA;;;;AAIE;;;;;;AAIA;;;;A;;;;AAKA;;;;;A;;;;AAQA;;;;AAGA;;;;;AAIE;;;;;AAGF;;;;AAGA;;;;A;;;;AAKA;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;AAKE;;;;AAEF;;;;A;;;;A;;;;AAOE;;;;AAEF;;;;;AAGA;;;;;;;;A;;;;A;;;;;;;AAYA;;;;A;;;;;;;;AASA;;;;;;;;;AAQE;;;;AAIA;;;;;;A;;;;;;AAUA;EACA;;;;;;E;;;;;;EASA;;;;EAGA;;;;E;;;;EAGF;;;;;;EAOE;;;;;AAGF;EAGE;;;;;;EAIA;;;;EAGA;;;;EAGE;;;;EAEJ;;;;;;;;E;;;;;EAWI;;;;;EAKF;;;;EAGA;;;;;;;EAME;;;;;E;;;;;EASA;;;;EAGA;;;;EAGI;;;;;A;;;;AAOJ;;;;AAGA;;;;AAGE;;;;AAGJ;;;;AAGE;;;;AAGA;;;;AAGA;;;;AAGA;E;;;;EAIA;;;;;EAGF;;;;;EAKA;;;;E;;;;;E;;;;;;AAWF;EACE;;;;EAEF;;;;E;;;;;AC7WA;;;;;;AAOA;EAIE;;;;;ACXF;;;;;A;;;;;A;;;;;A;;;;A;;;;A;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;;;;AAMA;;;;A;;;;;;;AAOA;;;;AAGA;;;;AAEE;;;;;AAGF;;;;;;A;;;;;AASE;;;;ACrDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;A;;;;;;A;;;;;AAgBA;;;;AAGI;;;;;AAGF;;;;;AAIA;;;;AAEE;;;;;;;;;AAOA;;;;AAIJ;;;;A;;;;A;;;;A;;;;A;;;;;A;;;;AAcE;;;;;A;;;;AAKF;;;;;AAIA;;;;AAGA;;;;;;;;A;;;;;;;AAaA;;;;AAEF;;;;AAGE;;;;A;;;;A;;;;AAQE;;;;;;;;;;;AASE;;;;;;;;AAOJ;;;;AAGA","sources":["packages/map-interface/src/context-panel/main.module.sass","packages/map-interface/src/location-panel/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/map-view/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":[".searchbar-holder\n transition: margin 300ms\n display: flex\n flex-direction: column\n margin: 0\n .navbar-holder\n display: flex\n flex-direction: row\n .searchbar\n width: 100%\n background-color: var(--panel-background-color)\n border-radius: 3px\n padding: 0 5px\n display: flex\n flex-direction: row\n align-items: center\n :global(.bp4-input-group)\n flex-grow: 1\n cursor: text\n &>*\n margin-right: 5px\n &:last-child\n margin-right: 0\n\n.status-tongue\n background-color: var(--panel-background-color)\n margin: 5px\n margin-top: -12px\n padding: 0\n padding-top: 12px\n\n@media screen and (max-width: 768px)\n .status-tongue\n max-width: 100vw\n margin: 0\n border-radius: 0\n margin-top: -3px\n",".copy-link-button:global(.bp4-minimal.bp4-button)\n color: var(--text-subtle-color)\n svg\n fill: var(--text-subtle-color)\n\n.location-panel-header\n padding: 5px\n display: flex\n flex-direction: row\n align-items: center\n gap: 1em\n border-bottom: 1px solid var(--panel-rule-color)\n .spacer\n flex-grow: 1\n .left-icon\n padding: 7px\n\n .position-controls :global(.bp4-button)\n font-size: 12px !important\n\n.infodrawer-header-item\n font-size: 12px\n :global(.secondary)\n font-size: 0.9em\n color: var(--text-subtle-color)\n\n.infodrawer\n pointer-events: all\n max-height: 100%\n max-width: 100%\n height: fit-content\n display: flex\n flex-direction: column\n overflow: hidden\n &:global(.bp4-card)\n padding: 0\n\n &.loading\n .infodrawer-body\n overflow-y: hidden\n min-height: 70px\n\n.infodrawer-body\n flex-shrink: 1\n min-height: 0\n transition: min-height 0.5s ease\n overflow-y: scroll\n position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n .infodrawer\n border-radius: var(--panel-border-radius, 0px)\n",".map-page\n display: flex\n flex-direction: column\n position: relative\n width: 100%\n height: 100%\n &.fit-viewport\n height: 100vh\n width: 100vw\n /* mobile viewport bug fix */\n max-height: -webkit-fill-available\n\n // Compass display\n .compass-control\n display: none\n &.map-is-rotated\n .compass-control\n display: block\n\n .map-3d-control\n display: none\n &.map-3d-available .map-3d-control\n display: block\n &.map-is-rotated.map-3d-available .map-3d-control\n display: none\n\n .globe-control\n display: none\n svg\n color: var(--secondary-color)\n &.map-is-global .globe-control\n display: block\n\n.main-ui\n flex: 1\n position: relative\n display: flex\n flex-direction: column\n max-height: 100%\n height: 100%\n box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.panel-card\n padding: 10px\n background-color: var(--panel-background-color)\n\n & >:last-child\n margin-bottom: 0\n\n:global(.bp4-dark) .panel-card\n background-color: var(--panel-background-color)\n\n.context-stack\n display: flex\n flex-direction: column\n max-height: 100%\n\n &>div\n flex-shrink: 1\n\n &>.searchbar\n flex: 0\n\n.context-stack,\n.detail-stack\n z-index: 100\n\n.panel-container\n display: flex\n flex-direction: column\n\n &>div\n pointer-events: all\n\n.panel-title\n font-size: 16px\n\n.spacer\n flex-grow: 1\n pointer-events: none\n\n.map-view-container\n flex-grow: 1\n position: relative\n overflow: hidden\n\n.searchbar-holder\n margin-bottom: 0.5em\n\n.right-panel\n width: 24em\n\n.buttons\n display: flex\n flex-direction: row\n flex: 1\n min-width: 0\n\n.tab-button\n flex-shrink: 1\n min-width: 40px\n overflow: hidden\n text-align: right\n\n & :global(.bp4-button-text)\n transition: all 0.2s\n transition-delay: 0.1s\n\n .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp4-active) ~ & :global(.bp4-button-text)\n width: 0\n opacity: 0\n margin-left: -7px\n\n .context-panel-leave .menu-card .panel-header & :global(.bp4-button-text)\n opacity: 0\n width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp4-active))\n padding-left: 0\n padding-right: 0\n min-width: 30px\n width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)\n width: 0\n opacity: 0\n margin-left: -7px\n\n.menu-group\n margin-bottom: 0.5em\n margin-top: 0.2em\n\n.menu-card :global .bp4-text ul,\n.menu-card :global .text-panel ul\n padding-left: 1em\n\n.menu-content\n display: flex\n flex-direction: column\n margin-bottom: -8px\n\n & .bp4-button-group\n margin-bottom: 4px\n\n & hr\n width: 100%\n\n:global #map\n position: absolute\n top: 0\n bottom: 0\n left: 0\n right: 0\n\n:global #map .mapbox-compass,\n:global #map .mapbox-3d\n display: none\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control\n width: unset\n\n:global .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n width: unset\n padding-inline: 4px\n\n:global .mapboxgl-canvas-container\n width: 100%\n height: 100%\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n background-color: var(--translucent-panel-background-color) !important\n\n:global .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n color: var(--text-color)\n\n:global .mapboxgl-marker svg path\n fill: var(--panel-background-color) !important\n\n:global .mapboxgl-marker svg circle\n fill: var(--secondary-color) !important\n\n:global .mapbox-control.mapbox-zoom\n background: var(--translucent-panel-background-inner)\n\n:global .mapbox-control.mapbox-zoom svg\n fill: var(--text-color) !important\n\n:global .mapboxgl-ctrl-logo\n transform: scale(0.9) translate(-8px, 2px)\n\n:global .bp4-dark .mapboxgl-ctrl-logo\n filter: invert(100%)\n\n:global .mapboxgl-ctrl-group button + button\n border-top: 1px solid var(--panel-rule-color) !important\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n filter: invert(40%)\n\n:global .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n filter: invert(50%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n filter: invert(40%)\n\n:global .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n filter: invert(50%)\n\n.detail-stack\n position: relative\n\n.main-ui.detail-panel-open .zoom-control\n opacity: 0\n display: none\n\n.zoom-control\n transition: opacity 1s ease-in-out\n width: 30px\n position: absolute\n top: 0\n right: 0\n\n.main-ui.searching .map-view-container\n pointer-events: none\n\n.map-controls\n display: flex\n flex-direction: row\n justify-content: right\n margin-bottom: 0\n\n &>*\n margin-left: 0.5em\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls .map-control\n min-width: 22px\n min-height: 22px\n border-radius: 4px\n background-color: var(--panel-background-color)\n box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls .map-control button\n width: 22px\n height: 22px\n background-position: center center\n padding: 0\n background-color: var(--panel-background-color)\n color: var(--text-color)\n\n.map-controls :global(.mapbox-control) button:hover,\n.map-controls :global(.map-control-wrapper) button:hover,\n.map-controls .map-control button:hover\n background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n background: none\n box-shadow: none\n padding-top: 8px\n\n :global(.mapboxgl-ctrl-scale)\n background-color: var(--translucent-panel-background-color)\n border-color: var(--secondary-text-color)\n color: var(--secondary-text-color)\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n .main-ui.detail-panel-enter .context-stack\n height: 0\n visibility: hidden\n transition: height 0.5s ease-in-out\n\n .detail-stack\n height: fit-content\n position: inherit\n max-height: 70%\n\n .infodrawer-stack\n max-height: 70%\n\n :global(.exit-active)\n max-height: 0\n\n :global(.mapbox-control.mapbox-zoom)\n display: none\n\n .map-controls\n position: absolute\n top: -60px\n right: 10px\n\n .detail-panel\n border-radius: 0px\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n .main-ui\n flex-direction: row\n padding: 1em 1em 2em\n min-height: 80px\n &>*\n margin-right: 0.5em\n &>*:last-child\n margin-right: 0\n\n &.searching .context-stack\n width: 24em\n\n .context-stack\n max-width: 34em\n min-width: 14em\n width: 16em\n transition: width 300ms ease\n padding-bottom: 0.5em\n\n &.panel-open\n width: 34em\n margin-right: 0.5em\n\n .context-stack.layers,\n .context-stack.settings\n width: 18em\n margin-right: 0.5em\n\n .main-ui.detail-panel-open .detail-stack\n width: 30em\n\n .detail-stack\n width: 30em\n pointer-events: none\n display: flex\n flex-direction: column\n\n .context-stack,\n .detail-stack\n pointer-events: none\n z-index: 100\n\n .context-stack>div,\n .detail-stack>div\n pointer-events: all\n margin-bottom: 0.5em\n\n .context-stack>div:last-child,\n .detail-stack>div:last-child\n margin-bottom: 0\n\n .context-stack>div.spacer,\n .detail-stack>div.spacer\n pointer-events: none\n\n .map-view-container\n position: unset\n\n.main-ui .detail-panel\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.detail-panel-from .detail-panel\n opacity: 0\n\n.main-ui.detail-panel-enter .detail-panel\n opacity: 1\n\n.main-ui.detail-panel-leave .detail-panel\n opacity: 0\n\n.main-ui .context-panel\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.context-panel-from .context-panel\n opacity: 0\n\n.main-ui.context-panel-enter .context-panel\n opacity: 1\n\n.main-ui.context-panel-leave .context-panel\n opacity: 0\n\n@media only screen and (max-width: 768px)\n .main-ui .detail-stack\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n .main-ui.detail-panel-from .detail-stack\n max-height: 0\n height: 0\n\n .main-ui.detail-panel-leave .detail-stack\n max-height: 0\n max-height: 0\n\n .main-ui .context-panel\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n .main-ui.context-panel-from .context-panel\n max-height: 0\n height: 0\n\n .main-ui.context-panel-leave .context-panel\n max-height: 0\n max-height: 0\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n .map-page .main-ui.detail-panel-leave .map-view-container\n margin-right: -14em\n\n .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container\n margin-right: -30em\n\n .map-page.map-is-global .main-ui.context-panel-leave .map-view-container\n margin-left: -16em\n",".map-view-container\n flex-grow: 1\n position: relative\n overflow: hidden\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n /* Make map fill page rather than containing div,\n by unsetting map position */\n // We should move this to another file.\n .map-view-container\n position: unset\n",".feature-panel\n position: relative\n overflow-x: hidden\n\n.key-value\n display: inline-block\n margin-right: 1em\n .key\n font-weight: bold\n font-size: 0.9em\n &:after\n content: ': '\n .value\n font-size: 0.9em\n\n.feature-properties\n position: relative\n &:before\n content: \"–\"\n position: absolute\n top: 4px\n left: 0\n\n.feature-header h3\n margin-bottom: 0\n margin-top: 0.5em\n\n.feature-group\n border-bottom: 1px solid var(--panel-rule-inner)\n padding: 0 1em\n margin-left: -1em\n margin-right: -1em\n margin-bottom: 0.5em\n &:last-child\n border-bottom: none\n\n.tile-info\n display: flex\n flex-direction: row\n align-items: baseline\n padding: 0 1em\n h3\n margin-right: 0.5em\n\n.opacity-slider\n margin: 0 1em 0.5em\n :global\n .bp4-slider-handle .bp4-slider-label\n background-color: var(--secondary-color)\n color: var(--text-color)\n\n.unit-number\n .unit\n font-size: 0.9em\n margin-left: 0.2em\n font-weight: bold\n\n.page\n margin: 2em auto\n max-width: 50em\n\n.dev-index-page\n overflow-y: scroll\n","\n.panel-subhead\n padding: 0.2em var(--box-horizontal-padding)\n border-top: 1px solid var(--accent-border-color)\n border-bottom: 1px solid var(--accent-border-color)\n background-color: var(--accent-color)\n display: flex\n flex-direction: row\n align-items: center\n z-index: 1\n gap: var(--box-horizontal-padding)\n top: 0px\n position: sticky\n h1, h2, h3, h4\n font-family: Montserrat,sans-serif\n font-weight: 700\n margin: 0.2em 0\n h4\n font-weight: 600\n .title\n flex-grow: 1\n\n// :global(.bp4-dark) .panel-subhead\n// margin 0 1px\n\n.expansion-panel\n padding: 0\n flex-wrap: wrap\n margin-top: -1px\n // &.collapsed\n // .expansion-panel-header\n // border-bottom-width: 0;\n\n.sub-expansion-panel\n margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n overflow: hidden\n &:first-child\n .expansion-panel-header\n border-top-width: 0\n .panel-subhead\n border-top: none\n border-bottom: none\n\n .expansion-panel-header\n background-color: var(--accent-secondary-color)\n cursor: pointer\n &:hover\n background-color: var(--accent-secondary-hover-color)\n h2, h3, h4\n font-weight: 500\n border-bottom: 1px solid var(--tertiary-border-color)\n border-top: 1px solid var(--tertiary-border-color)\n margin-top: -1px\n padding: 5px 1em 5px\n align-items: center\n\n.expansion-summary-title-help\n margin-left: 5px\n :global(.bp4-icon)\n margin-left: 5px\n\n.expansion-panel-header\n cursor: pointer\n &:hover\n background-color: var(--accent-hover-color)\n :global(.bp4-icon)\n transform: translate(0,3px)\n\n.expansion-children\n padding: 5px 1em 10px\n .expansion-panel\n margin-left: -1em\n margin-right: -1em\n &:first-child\n margin-top: -5px\n\n.expansion-panel-subtext\n font-size: 85%\n font-weight: 400\n\n:global\n .expansion-panel-root\n padding-left: 15px !important\n\n .expansion-panel-detail\n display: block !important\n padding: 0 !important\n\n .expansion-panel-detail-sub\n display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n display: flex\n flex-direction: row\n align-items: center\n justify-content: space-between\n margin: 3px 0\n\n.expandable-details-header\n display: inline-flex\n flex-direction: row\n align-items: baseline\n flex-grow: 1\n\n.expandable-details-children\n position: relative\n\n.expandable-details-toggle\n :global(.bp4-button)\n font-size: 10px\n\n.expandable-details\n &.macrostrat-unit\n .title:after\n content: none\n .title\n margin-right: 1em\n &:after\n content: \":\"\n\n.expansion-body\n display: inline-block\n //flex-direction row\n align-items: baseline\n background-color: var(--tertiary-background)\n padding: 2px 6px\n border-radius: 4px\n width: 100%\n box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n margin-bottom: 6px\n\n.expansion-panel-detail-header\n font-size: 90%\n font-style: italic\n margin-right: 1em\n display: inline\n color: var(--secondary-color)\n &:after\n content: \":\"\n\n.expansion-panel-detail-body\n display: inline\n"],"names":[],"version":3,"file":"index.css.map"}
1
+ {"mappings":"AAAA;;;;;;;AAKE;;;;;AAGA;;;;;;;;;;AAQE;;;;;AAGA;;;;AAEE;;;;AAGN;;;;;;AAOA;EACE;;;;;;;AChCF;;;;AAEE;;;;AAGF;;;;;;;;;AAOE;;;;AAEA;;;;AAGA;;;;AAGF;;;;AAEE;;;;;AAIF;;;;;;;;;;AAQE;;;;AAIE;;;;;AAIJ;;;;AAGA;;;;;;;;AAQA;EACE;;;;;ACtDF;;;;;;;;;AAOE;;;;;;AAOA;;;;AAGE;;;;AAGF;;;;AAEA;;;;AAEA;;;;AAKE;;;;AAEF;;;;A;;;;;;;;;;A;;;;;;AAeA;;;;AAGE;;;;AAEJ;;;;;;AAIE;;;;A;;;;A;;;;A;;;;;A;;;;AAeA;;;;AAGA;;;;;AAGF;;;;;;AAIE;;;;A;;;;AAKA;;;;;;;A;;;;;;;AASF;;;;AAIE;;;;;;AAIA;;;;;AAIA;;;;A;;;;;;;AASA;;;;;;AAIF;;;;;AAGA;;;;AAIE;;;;;;AAIA;;;;A;;;;AAKA;;;;AAEF;;;;A;;;;;AAME;;;;;AAIE;;;;AAGA;;;;AAIA;;;;AAGF;;;;AAGA;;;;A;;;;AAME;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;AAGA;;;;;A;;;;;;;;AAWF;;;;AAGA;;;;;;;A;;;;AAOA;;;;;;;;AAQA;;;;;;;;;AAQA;;;;A;;;;;;AASA;;;;;;AAMF;EAAA;;;;;;EAME;;;;;;EAIF;;;;EAGE;;;;EAEF;;;;EAGE;;;;;;EAKE;;;;;AAKF;EACE;;;;;;EAKA;;;;E;;;;E;;;;;;;;;;;EAeA;;;;EAGA;;;;;EAEJ;;;;EAII;;;;E;;;;;;;E;;;;;EAWA;;;;;EAIA;;;;EAGA;;;;EAGF;;;;EAII;;;;;A;;;;AAOF;;;;A;;;;AAMA;;;;AAGE;;;;;AAIE;;;;;A;;;;A;;;;AAUN;;;;A;EAGF;;;;E;;;;;E;;;;;E;;;;;E;;;;EAcE;;;;;AAGE;E;;;;EAGF;;;;EAEF;;;;;AC5XA;;;;;;AAKA;;;;;AAME;;;;AAMF;EAIE;;;;;ACrBF;;;;;A;;;;;A;;;;;A;;;;A;;;;A;;;;AAgBE;;;;;;;AAKE;;;;;AAGF;;;;;;;;AAMA;;;;A;;;;;;;AAOA;;;;AAGA;;;;AAEE;;;;;AAGF;;;;;;A;;;;;AASE;;;;ACrDJ;;;;;;;;;;;;;;AAYE;;;;;;AAIA;;;;AAEA;;;;A;;;;;;A;;;;;AAgBA;;;;AAGI;;;;;AAGF;;;;;AAIA;;;;AAEE;;;;;;;;;AAOA;;;;AAIJ;;;;A;;;;A;;;;A;;;;A;;;;;A;;;;AAcE;;;;;A;;;;AAKF;;;;;AAIA;;;;AAGA;;;;;;;;A;;;;;;;AAaA;;;;AAEF;;;;AAGE;;;;A;;;;A;;;;AAQE;;;;;;;;;;;AASE;;;;;;;;AAOJ;;;;AAGA","sources":["packages/map-interface/src/context-panel/main.module.sass","packages/map-interface/src/location-panel/main.module.sass","packages/map-interface/src/main.module.sass","packages/map-interface/src/map-view/main.module.sass","packages/map-interface/src/dev/main.module.sass","packages/map-interface/src/expansion-panel/main.module.sass"],"sourcesContent":[".searchbar-holder\n transition: margin 300ms\n display: flex\n flex-direction: column\n margin: 0\n .navbar-holder\n display: flex\n flex-direction: row\n .searchbar\n width: 100%\n background-color: var(--panel-background-color)\n border-radius: 3px\n padding: 0 5px\n display: flex\n flex-direction: row\n align-items: center\n :global(.bp4-input-group)\n flex-grow: 1\n cursor: text\n &>*\n margin-right: 5px\n &:last-child\n margin-right: 0\n\n.status-tongue\n background-color: var(--panel-background-color)\n margin: 5px\n margin-top: -12px\n padding: 0\n padding-top: 12px\n\n@media screen and (max-width: 768px)\n .status-tongue\n max-width: 100vw\n margin: 0\n border-radius: 0\n margin-top: -3px\n",".copy-link-button:global(.bp4-minimal.bp4-button)\n color: var(--text-subtle-color)\n svg\n fill: var(--text-subtle-color)\n\n.location-panel-header\n padding: 5px\n display: flex\n flex-direction: row\n align-items: center\n gap: 1em\n border-bottom: 1px solid var(--panel-rule-color)\n .spacer\n flex-grow: 1\n .left-icon\n padding: 7px\n\n .position-controls :global(.bp4-button)\n font-size: 12px !important\n\n.infodrawer-header-item\n font-size: 12px\n :global(.secondary)\n font-size: 0.9em\n color: var(--text-subtle-color)\n\n.infodrawer\n pointer-events: all\n max-height: 100%\n max-width: 100%\n height: fit-content\n display: flex\n flex-direction: column\n overflow: hidden\n &:global(.bp4-card)\n padding: 0\n\n &.loading\n .infodrawer-body\n overflow-y: hidden\n min-height: 70px\n\n.infodrawer-contents\n padding: 0 1em 1em\n\n.infodrawer-body\n flex-shrink: 1\n min-height: 0\n transition: min-height 0.5s ease\n overflow-y: scroll\n position: relative\n\n// TODO: remove this when we have a better way to handle card media queries\n@media screen and (max-width: 768px)\n .infodrawer\n border-radius: var(--panel-border-radius, 0px)\n",".map-page\n display: flex\n flex-direction: column\n position: relative\n width: 100%\n height: 100%\n overflow: hidden\n &.fit-viewport\n height: 100vh\n width: 100vw\n /* mobile viewport bug fix */\n max-height: -webkit-fill-available\n\n // Compass display\n .compass-control\n display: none\n &.map-is-rotated\n .compass-control\n display: block\n\n .map-3d-control\n display: none\n &.map-3d-available .map-3d-control\n display: block\n &.map-is-rotated.map-3d-available .map-3d-control\n display: none\n\n .globe-control\n display: none\n svg\n color: var(--secondary-color)\n &.map-is-global .globe-control\n display: block\n\n.main-ui\n flex: 1\n position: relative\n display: flex\n flex-direction: column\n max-height: 100%\n height: 100%\n box-shadow: 0 0 10px 4px var(--card-shadow-color)\n\n.panel-card\n padding: 10px\n background-color: var(--panel-background-color)\n overflow: hidden\n\n & >:last-child\n margin-bottom: 0\n\n:global(.bp4-dark) .panel-card\n background-color: var(--panel-background-color)\n\n.context-stack\n display: flex\n flex-direction: column\n max-height: 100%\n\n &>div\n flex-shrink: 1\n\n &>.searchbar\n flex: 0\n\n.context-stack,\n.detail-stack\n z-index: 100\n\n.panel-container\n display: flex\n flex-direction: column\n\n &>div\n pointer-events: all\n\n.panel-title\n font-size: 16px\n\n.spacer\n flex-grow: 1\n pointer-events: none\n\n.map-view-container\n flex-grow: 1\n position: relative\n overflow: hidden\n\n.searchbar-holder\n margin-bottom: 0.5em\n\n.right-panel\n width: 24em\n\n.buttons\n display: flex\n flex-direction: row\n flex: 1\n min-width: 0\n\n.tab-button\n flex-shrink: 1\n min-width: 40px\n overflow: hidden\n text-align: right\n\n & :global(.bp4-button-text)\n transition: all 0.2s\n transition-delay: 0.1s\n\n .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp4-active) ~ & :global(.bp4-button-text)\n width: 0\n opacity: 0\n margin-left: -7px\n\n .context-panel-leave .menu-card .panel-header & :global(.bp4-button-text)\n opacity: 0\n width: 0\n\n.narrow-card.narrow-enter .panel-header .buttons\n margin-right: -500px\n\n.panel-header.minimal .tab-button:not(:hover):not(:global(.bp4-active))\n padding-left: 0\n padding-right: 0\n min-width: 30px\n width: 30px\n\n.panel-header.minimal .tab-button:not(:hover) :global(.bp4-button-text)\n width: 0\n opacity: 0\n margin-left: -7px\n\n.menu-group\n margin-bottom: 0.5em\n margin-top: 0.2em\n\n.menu-card :global .bp4-text ul,\n.menu-card :global .text-panel ul\n padding-left: 1em\n\n.menu-content\n display: flex\n flex-direction: column\n margin-bottom: -8px\n\n & .bp4-button-group\n margin-bottom: 4px\n\n & hr\n width: 100%\n\n:global\n .mapbox-map\n .mapbox-compass, .mapbox-3d\n display: none\n\n .mapboxgl-ctrl.mapbox-3d.mapbox-control\n width: unset\n\n .mapboxgl-ctrl.mapbox-3d.mapbox-control button\n width: unset\n padding-inline: 4px\n\n .mapboxgl-canvas-container\n width: 100%\n height: 100%\n\n .mapboxgl-ctrl.mapboxgl-ctrl-attrib\n background-color: var(--translucent-panel-background-color) !important\n\n .mapboxgl-ctrl.mapboxgl-ctrl-attrib a\n color: var(--text-color)\n\n .mapboxgl-marker svg path\n fill: var(--panel-background-color) !important\n\n .mapboxgl-marker svg circle\n fill: var(--secondary-color) !important\n\n .mapbox-control.mapbox-zoom\n background: var(--translucent-panel-background-inner)\n\n .mapbox-control.mapbox-zoom svg\n fill: var(--text-color) !important\n\n .mapboxgl-ctrl-logo\n transform: scale(0.9) translate(-8px, 2px)\n\n .bp4-dark .mapboxgl-ctrl-logo\n filter: invert(100%)\n\n .mapboxgl-ctrl-group button + button\n border-top: 1px solid var(--panel-rule-color) !important\n\n .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon\n filter: invert(40%)\n\n .bp4-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover\n filter: invert(50%)\n\n .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon\n filter: invert(40%)\n\n .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon:hover\n filter: invert(50%)\n\n.detail-stack\n position: relative\n\n.main-ui.detail-panel-open .zoom-control\n opacity: 0\n display: none\n\n.zoom-control\n transition: opacity 1s ease-in-out\n width: 30px\n position: absolute\n top: 0\n right: 0\n\n.main-ui.searching .map-view-container\n pointer-events: none\n\n.map-controls\n display: flex\n flex-direction: row\n justify-content: right\n margin-bottom: 0\n\n &>*\n margin-left: 0.5em\n\n.map-controls :global(.mapbox-control),\n.map-controls :global(.map-control-wrapper),\n.map-controls .map-control\n min-width: 22px\n min-height: 22px\n border-radius: 4px\n background-color: var(--panel-background-color)\n box-shadow: 0 0 0 1px var(--card-shadow-color)\n\n.map-controls :global(.mapbox-control) button,\n.map-controls :global(.map-control-wrapper) button,\n.map-controls .map-control button\n width: 22px\n height: 22px\n background-position: center center\n padding: 0\n background-color: var(--panel-background-color)\n color: var(--text-color)\n\n.map-controls :global(.mapbox-control) button:hover,\n.map-controls :global(.map-control-wrapper) button:hover,\n.map-controls .map-control button:hover\n background-color: var(--panel-background-color) !important\n\n.map-controls .map-scale-control\n background: none\n box-shadow: none\n padding-top: 8px\n\n :global(.mapboxgl-ctrl-scale)\n background-color: var(--translucent-panel-background-color)\n border-color: var(--secondary-text-color)\n color: var(--secondary-text-color)\n\n/* For mobile phones, we want to make the most of screen space,\n which in some cases means adding complications to the basic page. */\n@media only screen and (max-width: 768px)\n .main-ui.detail-panel-enter .context-stack\n height: 0\n visibility: hidden\n transition: height 0.5s ease-in-out\n\n .detail-stack\n height: fit-content\n position: inherit\n max-height: 70%\n\n .infodrawer-stack\n max-height: 70%\n &:global(.exit-active)\n max-height: 0\n\n :global(.mapbox-control.mapbox-zoom)\n display: none\n\n .map-controls\n position: absolute\n top: -60px\n right: 10px\n\n .detail-panel\n border-radius: 0px\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n .main-ui\n flex-direction: row\n padding: 1em 1em 2em\n min-height: 80px\n &>*\n margin-right: 0.5em\n &>*:last-child\n margin-right: 0\n\n .context-stack\n max-width: 34em\n min-width: 14em\n transition: width 300ms ease\n padding-bottom: 0.5em\n width: var(--map-context-stack-width, 16em)\n margin-right: 0.5em\n display: flex\n flex-direction: column\n\n &>.spacer\n flex-grow: 0\n\n .context-panel-holder\n min-height: 0\n position: relative\n &>div\n max-height: 100%\n\n .main-ui.detail-panel-open .detail-stack\n width: var(--map-detail-stack-width, 30em)\n\n .detail-stack\n width: 30em\n pointer-events: none\n display: flex\n flex-direction: column\n\n .context-stack, .detail-stack\n pointer-events: none\n z-index: 100\n\n &>div\n pointer-events: all\n margin-bottom: 0.5em\n\n &:last-child\n margin-bottom: 0\n\n &.spacer\n pointer-events: none\n\n .context-stack .spacer\n min-height: 1em\n\n /* Make map fill page rather than containing div,\n by unsetting map position */\n .map-view-container\n position: unset\n\n.main-ui .detail-panel\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n.main-ui.detail-panel-from .detail-panel\n opacity: 0\n\n.main-ui.detail-panel-enter .detail-panel\n opacity: 1\n\n.main-ui.detail-panel-leave .detail-panel\n opacity: 0\n\n.main-ui .context-panel-holder\n pointer-events: none\n flex: 1\n &>div\n pointer-events: all\n transition: opacity 0.8s ease //, height 0.8s ease, max-height 0.8s ease, padding 0.8s ease\n\n.main-ui.context-panel-from .context-panel-holder>div\n opacity: 0\n\n.main-ui.context-panel-enter .context-panel-holder>div\n opacity: 1\n\n.main-ui.context-panel-leave .context-panel-holder>div\n opacity: 0\n // The max-height transition is a bit jerky because of panel padding.\n // We could probably fix this by pulling the panel container itself into\n // the class.\n //max-height: 0\n //padding: 0\n\n@media only screen and (max-width: 768px)\n .main-ui .detail-stack\n transition: opacity 0.8s ease, height 0.8s ease, max-height 0.8s ease\n\n .main-ui.detail-panel-from .detail-stack\n max-height: 0\n height: 0\n\n .main-ui.detail-panel-leave .detail-stack\n max-height: 0\n max-height: 0\n\n .main-ui.context-panel-from .context-panel\n max-height: 0\n height: 0\n\n .main-ui.context-panel-leave\n .context-stack\n .context-panel-holder\n flex: 0\n .spacer\n flex: 1\n\n// Shift UI around to center elements if we're in the global view \n@media only screen and (min-width: 768px)\n .map-page .main-ui.detail-panel-leave .map-view-container\n margin-right: -14em\n\n .map-page.map-is-global .main-ui.detail-panel-leave .map-view-container\n margin-right: -30em\n\n .map-page.map-is-global .main-ui.context-panel-leave .map-view-container\n margin-left: -16em\n",".map-view-container\n flex-grow: 1\n position: relative\n overflow: hidden\n\n.mapbox-map\n position: absolute\n top: 0\n bottom: 0\n left: 0\n right: 0\n &:global(.mapboxgl-map)\n // override the default mapbox position: relative in all cases\n position: absolute\n\n/* Desktop styling is necessarily much more complicated than mobile\n to handle a two-column layout. */\n@media screen and (min-width: 768px)\n /* Make map fill page rather than containing div,\n by unsetting map position */\n // We should move this to another file.\n .map-view-container\n position: unset\n",".feature-panel\n position: relative\n overflow-x: hidden\n\n.key-value\n display: inline-block\n margin-right: 1em\n .key\n font-weight: bold\n font-size: 0.9em\n &:after\n content: ': '\n .value\n font-size: 0.9em\n\n.feature-properties\n position: relative\n &:before\n content: \"–\"\n position: absolute\n top: 4px\n left: 0\n\n.feature-header h3\n margin-bottom: 0\n margin-top: 0.5em\n\n.feature-group\n border-bottom: 1px solid var(--panel-rule-inner)\n padding: 0 1em\n margin-left: -1em\n margin-right: -1em\n margin-bottom: 0.5em\n &:last-child\n border-bottom: none\n\n.tile-info\n display: flex\n flex-direction: row\n align-items: baseline\n padding: 0 1em\n h3\n margin-right: 0.5em\n\n.opacity-slider\n margin: 0 1em 0.5em\n :global\n .bp4-slider-handle .bp4-slider-label\n background-color: var(--secondary-color)\n color: var(--text-color)\n\n.unit-number\n .unit\n font-size: 0.9em\n margin-left: 0.2em\n font-weight: bold\n\n.page\n margin: 2em auto\n max-width: 50em\n\n.dev-index-page\n overflow-y: scroll\n","\n.panel-subhead\n padding: 0.2em var(--box-horizontal-padding)\n border-top: 1px solid var(--panel-rule-color)\n border-bottom: 1px solid var(--panel-rule-color)\n background-color: var(--accent-color)\n display: flex\n flex-direction: row\n align-items: center\n z-index: 1\n gap: var(--box-horizontal-padding)\n top: -1px\n position: sticky\n h1, h2, h3, h4\n font-family: Montserrat,sans-serif\n font-weight: 700\n margin: 0.2em 0\n h4\n font-weight: 600\n .title\n flex-grow: 1\n\n// :global(.bp4-dark) .panel-subhead\n// margin 0 1px\n\n.expansion-panel\n padding: 0\n flex-wrap: wrap\n margin-top: -1px\n // &.collapsed\n // .expansion-panel-header\n // border-bottom-width: 0;\n\n.sub-expansion-panel\n margin: -1px calc(var(--panel-padding-h) * -0.5) 0\n overflow: hidden\n &:first-child\n .expansion-panel-header\n border-top-width: 0\n .panel-subhead\n border-top: none\n border-bottom: none\n\n .expansion-panel-header\n background-color: var(--accent-secondary-color)\n cursor: pointer\n &:hover\n background-color: var(--accent-secondary-hover-color)\n h2, h3, h4\n font-weight: 500\n border-bottom: 1px solid var(--tertiary-border-color)\n border-top: 1px solid var(--tertiary-border-color)\n margin-top: -1px\n padding: 5px 1em 5px\n align-items: center\n\n.expansion-summary-title-help\n margin-left: 5px\n :global(.bp4-icon)\n margin-left: 5px\n\n.expansion-panel-header\n cursor: pointer\n &:hover\n background-color: var(--accent-hover-color)\n :global(.bp4-icon)\n transform: translate(0,3px)\n\n.expansion-children\n padding: 5px 1em 10px\n .expansion-panel\n margin-left: -1em\n margin-right: -1em\n &:first-child\n margin-top: -5px\n\n.expansion-panel-subtext\n font-size: 85%\n font-weight: 400\n\n:global\n .expansion-panel-root\n padding-left: 15px !important\n\n .expansion-panel-detail\n display: block !important\n padding: 0 !important\n\n .expansion-panel-detail-sub\n display: block !important\n\n// New expandable panel for details\n.expandable-details-main\n display: flex\n flex-direction: row\n align-items: center\n justify-content: space-between\n margin: 3px 0\n\n.expandable-details-header\n display: inline-flex\n flex-direction: row\n align-items: baseline\n flex-grow: 1\n\n.expandable-details-children\n position: relative\n\n.expandable-details-toggle\n :global(.bp4-button)\n font-size: 10px\n\n.expandable-details\n &.macrostrat-unit\n .title:after\n content: none\n .title\n margin-right: 1em\n &:after\n content: \":\"\n\n.expansion-body\n display: inline-block\n //flex-direction row\n align-items: baseline\n background-color: var(--tertiary-background)\n padding: 2px 6px\n border-radius: 4px\n width: 100%\n box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2)\n margin-bottom: 6px\n\n.expansion-panel-detail-header\n font-size: 90%\n font-style: italic\n margin-right: 1em\n display: inline\n color: var(--secondary-color)\n &:after\n content: \":\"\n\n.expansion-panel-detail-body\n display: inline\n"],"names":[],"version":3,"file":"index.css.map"}