From 71accf3342128fce34c56e92076d2e9a532542b9 Mon Sep 17 00:00:00 2001
From: Corson-Dosch <hcorson-dosch@usgs.gov>
Date: Wed, 19 Feb 2025 15:14:34 -0600
Subject: [PATCH] move tab component css to main.css
---
src/assets/css/main.css | 173 +++++++++++++++++++++++
src/components/BeaufortSeaSpeciesViz.vue | 169 ----------------------
2 files changed, 173 insertions(+), 169 deletions(-)
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 0bb765e..606e1e7 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -43,6 +43,9 @@
background-color: #d2e9ff;
border-radius: 2px;
}
+button {
+ cursor: pointer;
+}
/* set color of links throughout */
a {
color: var(--color-link);
@@ -115,6 +118,176 @@ a:hover {
top: 105px;
}
}
+
+/* css for tab components */
+ul {
+ padding-inline-start: 0px;
+}
+li {
+ padding: 0;
+}
+.tabs-component {
+ margin: auto;
+ width: 90vw;
+ max-width: 1000px;
+}
+@media (min-width: 1000px) {
+ .tabs-component {
+ width: 70vw;
+ }
+}
+.tab-image {
+ max-width: 2.5rem;
+ max-height: 2.5rem;
+ margin-right: 1rem;
+ height: auto;
+ width: auto;
+}
+@media (min-width: 1000px) {
+ .tab-image {
+ max-width: fit-content;
+ max-height: 5rem;
+ margin-bottom: 1rem;
+ height: 5rem;
+ width: auto;
+ }
+}
+.tabs-component-tab.is-inactive img {
+ opacity: 0.5;
+}
+/* css modified from vue-tabs-component demo: https://tabs-component.jakubpotocky.sk/ */
+.tabs-component-tabs {
+ border: solid 1px #ddd;
+ border-radius: 6px;
+ margin-bottom: 5px;
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tabs {
+ border: 0;
+ align-items: stretch;
+ display: flex;
+ justify-content: flex-start;
+ margin-bottom: -1px;
+ }
+}
+
+.tabs-component-tab, .tabs-component-tab--custom {
+ color: #999;
+ font-size: 1.6rem;
+ font-weight: 600;
+ margin-right: 0;
+ list-style: none;
+}
+
+.tabs-component-tab:not(:last-child) {
+ border-bottom: dotted 1px #ddd;
+}
+
+.tabs-component-tab:hover {
+ color: #666;
+}
+
+.tabs-component-tab.is-active {
+ color: #000;
+}
+.tabs-component-tab.is-disabled *, .tabs-component-tab--custom.is-disabled * {
+ color: #cdcdcd;
+ cursor: not-allowed !important;
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tab, .tabs-component-tab--custom {
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 3px 3px 0 0;
+ margin-right: .5em;
+ /* transform: translateY(4px); */
+ transition: transform .3s ease;
+ font-size: 1.6rem;
+ text-align: center;
+ }
+
+ .tabs-component-tab.is-active, .tabs-component-tab--custom.is-active {
+ border-bottom: solid 1px #fff;
+ z-index: 2;
+ transform: translateY(0);
+ }
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-tab-a, .tabs-component-tab-a--custom {
+ align-items: center;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ padding: .75em 1em;
+ text-decoration: none;
+ }
+}
+
+.tabs-component-tab-a, .tabs-component-tab-a--custom {
+ align-items: center;
+ color: inherit;
+ display: flex;
+ padding: .75em 1em;
+ text-decoration: none;
+}
+
+.tabs-component-panels {
+ padding: 2em 1em;
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 0 6px 6px 6px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+}
+
+@media (min-width: 1000px) {
+ .tabs-component-panels {
+ background-color: #fff;
+ border: solid 1px #ddd;
+ border-radius: 0 6px 6px 6px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .05);
+ padding: 2em 2em;
+ }
+}
+
+.tabs-component-btn {
+cursor: pointer;
+background: #e1ecf4;
+border-radius: 3px;
+border: 1px solid #7aa7c7;
+padding: 4px 8px;
+color: #39739d;
+}
+
+.tabs-component-btn:hover {
+background-color: #b3d3ea;
+color: #2c5777;
+}
+
+.tabs-component-btn:active {
+background-color: #a0c7e4;
+box-shadow: none;
+color: #2c5777;
+}
+
+.tabs-component-tab--custom {
+ border-color: #e1ecf4;
+ color: #68838d;
+}
+
+.tabs-component-tab--custom:hover {
+ border-color: #e1ecf4;
+ color: #39739d;
+}
+
+.tabs-component-tab--custom.is-active {
+ color: #39739d;
+ border-color: #7aa7c7;
+ border-bottom: solid 1px #fff;
+}
+
/* css for Fire in ice viz */
.chart-text {
font-family: var(--chart-font) !important;
diff --git a/src/components/BeaufortSeaSpeciesViz.vue b/src/components/BeaufortSeaSpeciesViz.vue
index 72a91e2..f62a66d 100644
--- a/src/components/BeaufortSeaSpeciesViz.vue
+++ b/src/components/BeaufortSeaSpeciesViz.vue
@@ -130,45 +130,11 @@
#species-tabs {
margin-top: 3rem;
}
-ul {
- padding-inline-start: 0px;
-}
-li {
- padding: 0;
-}
-.tabs-component {
- margin: auto;
- width: 90vw;
- max-width: 1000px;
-}
-@media (min-width: 1000px) {
- .tabs-component {
- width: 70vw;
- }
-}
-.tab-image {
- max-width: 2.5rem;
- max-height: 2.5rem;
- margin-right: 1rem;
- height: auto;
- width: auto;
-}
-
-@media (min-width: 1000px) {
- .tab-image {
- max-width: fit-content;
- max-height: 5rem;
- margin-bottom: 1rem;
- height: 5rem;
- width: auto;
- }
-}
.subheading-container {
margin: 1rem 0 1rem 0;
height: 5rem;
}
.subheading-image {
- /* max-width: 5rem; */
height: 5rem;
margin: 0 1rem 0 1rem;
}
@@ -177,9 +143,6 @@ li {
display: inline-block;
transform: translate(0%, -50%);
}
-.tabs-component-tab.is-inactive img {
- opacity: 0.5;
-}
.tab-content-image {
width: 100%;
}
@@ -187,136 +150,4 @@ li {
padding: 0rem 0 1rem 0;
line-height: 2.6rem;
}
-/* css modified from vue-tabs-component demo: https://tabs-component.jakubpotocky.sk/ */
-.tabs-component-tabs {
- border: solid 1px #ddd;
- border-radius: 6px;
- margin-bottom: 5px;
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tabs {
- border: 0;
- align-items: stretch;
- display: flex;
- justify-content: flex-start;
- margin-bottom: -1px;
- }
-}
-
-.tabs-component-tab, .tabs-component-tab--custom {
- color: #999;
- font-size: 1.6rem;
- font-weight: 600;
- margin-right: 0;
- list-style: none;
-}
-
-.tabs-component-tab:not(:last-child) {
- border-bottom: dotted 1px #ddd;
-}
-
-.tabs-component-tab:hover {
- color: #666;
-}
-
-.tabs-component-tab.is-active {
- color: #000;
-}
-.tabs-component-tab.is-disabled *, .tabs-component-tab--custom.is-disabled * {
- color: #cdcdcd;
- cursor: not-allowed !important;
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tab, .tabs-component-tab--custom {
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 3px 3px 0 0;
- margin-right: .5em;
- /* transform: translateY(4px); */
- transition: transform .3s ease;
- font-size: 1.6rem;
- text-align: center;
- }
-
- .tabs-component-tab.is-active, .tabs-component-tab--custom.is-active {
- border-bottom: solid 1px #fff;
- z-index: 2;
- transform: translateY(0);
- }
-}
-
-@media (min-width: 1000px) {
- .tabs-component-tab-a, .tabs-component-tab-a--custom {
- align-items: center;
- color: inherit;
- display: flex;
- flex-direction: column;
- padding: .75em 1em;
- text-decoration: none;
- }
-}
-
-.tabs-component-tab-a, .tabs-component-tab-a--custom {
- align-items: center;
- color: inherit;
- display: flex;
- padding: .75em 1em;
- text-decoration: none;
-}
-
-.tabs-component-panels {
- padding: 2em 1em;
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 0 6px 6px 6px;
- box-shadow: 0 0 10px rgba(0, 0, 0, .05);
-}
-
-@media (min-width: 1000px) {
- .tabs-component-panels {
- background-color: #fff;
- border: solid 1px #ddd;
- border-radius: 0 6px 6px 6px;
- box-shadow: 0 0 10px rgba(0, 0, 0, .05);
- padding: 2em 2em;
- }
-}
-
-.tabs-component-btn {
- cursor: pointer;
- background: #e1ecf4;
- border-radius: 3px;
- border: 1px solid #7aa7c7;
- padding: 4px 8px;
- color: #39739d;
-}
-
-.tabs-component-btn:hover {
- background-color: #b3d3ea;
- color: #2c5777;
-}
-
-.tabs-component-btn:active {
- background-color: #a0c7e4;
- box-shadow: none;
- color: #2c5777;
-}
-
-.tabs-component-tab--custom {
- border-color: #e1ecf4;
- color: #68838d;
-}
-
-.tabs-component-tab--custom:hover {
- border-color: #e1ecf4;
- color: #39739d;
-}
-
-.tabs-component-tab--custom.is-active {
- color: #39739d;
- border-color: #7aa7c7;
- border-bottom: solid 1px #fff;
-}
</style>
\ No newline at end of file
--
GitLab