From 968f4db68e570b8ae137c4b03a96f25b6022ac4d Mon Sep 17 00:00:00 2001 From: Tara Epp <102187683+taraepp@users.noreply.github.com> Date: Thu, 18 Jul 2024 16:54:45 +0000 Subject: [PATCH 1/3] fix modal button stylign --- .../components/ScrollSideMenuWrapper.scss | 78 +++++++++++++++++++ services/minespace-web/src/styles/index.scss | 1 + .../src/styles/overrides/antd-overrides.scss | 18 +++++ 3 files changed, 97 insertions(+) create mode 100644 services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss diff --git a/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss b/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss new file mode 100644 index 0000000000..8f552645b9 --- /dev/null +++ b/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss @@ -0,0 +1,78 @@ +// overriding styles that weren't quite working, confining changes to where wrapper is used +.scroll-side-menu-wrapper { + .view--header.fixed-scroll { + top: 62px; + } + + .side-menu--fixed, + .side-menu { + margin-top: 15px; + + .ant-anchor-wrapper { + margin-bottom: 20px; + border: 1px solid #ded9d9; + border-radius: 5px; + padding: 8px 0; + + .ant-anchor-ink { + display: block !important; // this is display:none'd elsewhere + } + + .now-menu-link.ant-anchor-link { + line-height: 2.2; + border-bottom: none; + padding: 4px; + } + + .ant-anchor-link-title { + margin-left: 10px; + text-decoration: none; + + &:only-child { + margin-bottom: 0; + } + } + + .ant-anchor-link-active { + border-left: 4px solid $gov-blue; + background-color: rgba(189, 179, 216, 0.1490196078); + + &>.ant-anchor-link-title { + font-weight: 700; + text-decoration: none; + color: $gov-blue; + } + } + } + } + + .side-menu--fixed { + position: fixed; + width: 240px; + } + + .side-menu--content { + padding-top: 15px; // equal to the margin-top on side-menu to align them + padding: 20px; + position: relative; + padding-right: 20px; + left: 250px; + width: calc(100vw - 270px); + margin-bottom: 900px; + } + + .side-menu--content.with-fixed-top { + margin-top: 0; + } +} + +// there is an issue where content (fade-in class?) renders in front of the menu, making it unclickable +.side-menu--fixed, +.side-menu { + z-index: 1000; +} + +.ellipsis-text { + text-overflow: ellipsis; + overflow: hidden; +} \ No newline at end of file diff --git a/services/minespace-web/src/styles/index.scss b/services/minespace-web/src/styles/index.scss index 72a163bafe..9cb8108ee0 100755 --- a/services/minespace-web/src/styles/index.scss +++ b/services/minespace-web/src/styles/index.scss @@ -42,6 +42,7 @@ @import "./components/FontAwesomeIcon.scss"; @import "./components/Forms.scss"; @import "./components/SideNavigation.scss"; +@import "./components/ScrollSideMenuWrapper.scss"; // UTILITIES - utilities and helper classes. This layer has the highest specificity. @import "./generic/helpers.scss"; \ No newline at end of file diff --git a/services/minespace-web/src/styles/overrides/antd-overrides.scss b/services/minespace-web/src/styles/overrides/antd-overrides.scss index 6f52da9cd1..3b47dac00b 100644 --- a/services/minespace-web/src/styles/overrides/antd-overrides.scss +++ b/services/minespace-web/src/styles/overrides/antd-overrides.scss @@ -381,6 +381,24 @@ th.ant-descriptions-item.vertical-description { // Modals .ant-modal { + + .ant-btn.modal__close { + position: absolute; + top: 7px; + color: $gov-blue; + font-size: 24px; + right: 14px; + z-index: 999; + border: none; + padding: 0; + width: 40px; + height: 40px; + + svg { + margin: 10px; + } + } + &-content { border-radius: 0; background-clip: border-box; From 825962374ba5fde24e451c39b0a52cb1d73299c6 Mon Sep 17 00:00:00 2001 From: Tara Epp <102187683+taraepp@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:02:43 -0600 Subject: [PATCH 2/3] Delete services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss accidental commit, unrelated to branch --- .../components/ScrollSideMenuWrapper.scss | 78 ------------------- 1 file changed, 78 deletions(-) delete mode 100644 services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss diff --git a/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss b/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss deleted file mode 100644 index 8f552645b9..0000000000 --- a/services/minespace-web/src/styles/components/ScrollSideMenuWrapper.scss +++ /dev/null @@ -1,78 +0,0 @@ -// overriding styles that weren't quite working, confining changes to where wrapper is used -.scroll-side-menu-wrapper { - .view--header.fixed-scroll { - top: 62px; - } - - .side-menu--fixed, - .side-menu { - margin-top: 15px; - - .ant-anchor-wrapper { - margin-bottom: 20px; - border: 1px solid #ded9d9; - border-radius: 5px; - padding: 8px 0; - - .ant-anchor-ink { - display: block !important; // this is display:none'd elsewhere - } - - .now-menu-link.ant-anchor-link { - line-height: 2.2; - border-bottom: none; - padding: 4px; - } - - .ant-anchor-link-title { - margin-left: 10px; - text-decoration: none; - - &:only-child { - margin-bottom: 0; - } - } - - .ant-anchor-link-active { - border-left: 4px solid $gov-blue; - background-color: rgba(189, 179, 216, 0.1490196078); - - &>.ant-anchor-link-title { - font-weight: 700; - text-decoration: none; - color: $gov-blue; - } - } - } - } - - .side-menu--fixed { - position: fixed; - width: 240px; - } - - .side-menu--content { - padding-top: 15px; // equal to the margin-top on side-menu to align them - padding: 20px; - position: relative; - padding-right: 20px; - left: 250px; - width: calc(100vw - 270px); - margin-bottom: 900px; - } - - .side-menu--content.with-fixed-top { - margin-top: 0; - } -} - -// there is an issue where content (fade-in class?) renders in front of the menu, making it unclickable -.side-menu--fixed, -.side-menu { - z-index: 1000; -} - -.ellipsis-text { - text-overflow: ellipsis; - overflow: hidden; -} \ No newline at end of file From 237e2b33e79aeb00b81ad4a1c91ac86be08745b7 Mon Sep 17 00:00:00 2001 From: Tara Epp <102187683+taraepp@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:03:07 -0600 Subject: [PATCH 3/3] Update index.scss accidental commit --- services/minespace-web/src/styles/index.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/services/minespace-web/src/styles/index.scss b/services/minespace-web/src/styles/index.scss index 9cb8108ee0..54a240af26 100755 --- a/services/minespace-web/src/styles/index.scss +++ b/services/minespace-web/src/styles/index.scss @@ -42,7 +42,6 @@ @import "./components/FontAwesomeIcon.scss"; @import "./components/Forms.scss"; @import "./components/SideNavigation.scss"; -@import "./components/ScrollSideMenuWrapper.scss"; // UTILITIES - utilities and helper classes. This layer has the highest specificity. -@import "./generic/helpers.scss"; \ No newline at end of file +@import "./generic/helpers.scss";