From 78546a7c765668af25a7539873103a87c63d400a Mon Sep 17 00:00:00 2001
From: Brandon Clayton <bclayton@usgs.gov>
Date: Wed, 5 Feb 2025 13:28:51 -0700
Subject: [PATCH] absolute buttons
---
.../content-container.component.scss | 43 ++-----------------
.../nshmp-template/styles/_variables.scss | 3 +-
2 files changed, 5 insertions(+), 41 deletions(-)
diff --git a/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss b/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
index 289fdc0..72794d2 100644
--- a/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
+++ b/projects/nshmp-template/src/lib/components/content-container/content-container.component.scss
@@ -26,7 +26,6 @@
.panel-control {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
- height: variables.$side-panel-control-height;
}
.panel-content {
@@ -49,16 +48,17 @@
.side-panel:not(.selected) {
position: absolute;
- width: 44px;
- height: variables.$side-panel-control-height;
- background-color: var(--mat-sys-surface);
+ width: variables.$side-panel-control-height;
+ background-color: unset;
&.settings {
right: 0;
+ z-index: 100;
}
&.control-panel {
left: 0;
+ z-index: 100;
}
.panel-control {
@@ -83,42 +83,7 @@
}
body.small-screen :host {
- .side-panel {
- padding-top: 5px;
-
- .panel-control {
- height: variables.$side-panel-control-height-small;
- }
-
- .panel-content {
- height: calc(100% - variables.$side-panel-control-height-small);
- }
-
- .control {
- padding: 2.5px 0 0 0;
-
- @include mat.icon-button-overrides(
- (
- icon-size: 18px,
- state-layer-size: variables.$side-panel-control-height-small,
- touch-target-display: 0,
- )
- );
-
- mat-icon {
- height: 18px;
- width: 18px;
- font-size: 18px;
- }
- }
- }
-
.side-panel.selected {
width: 100%;
}
-
- .side-panel:not(.selected) {
- width: 26px;
- overflow: hidden;
- }
}
diff --git a/projects/nshmp-template/styles/_variables.scss b/projects/nshmp-template/styles/_variables.scss
index 2fda668..a8c7f3e 100644
--- a/projects/nshmp-template/styles/_variables.scss
+++ b/projects/nshmp-template/styles/_variables.scss
@@ -22,8 +22,7 @@ $footer-height: 58px !default;
/* App control and settings panels */
$side-panel-width: 350px !default;
-$side-panel-control-height: 44px;
-$side-panel-control-height-small: 24px;
+$side-panel-control-height: 48px;
/* Form fields */
$form-field-height: 40px !default;
--
GitLab