From d1fd4ed568b3aac4ea23d44ec9727d28ca214537 Mon Sep 17 00:00:00 2001
From: timotheegoguely <timothee@goguely.com>
Date: Fri, 20 Dec 2024 18:12:12 +0100
Subject: [PATCH] fix: StaticView dialog content tabs style

Move component style to 2.blocks.dialog.css

close #80
---
 src/assets/css/src/2.blocks.dialog.css        | 58 ++++++++++++++++++-
 .../project/virtual-sample/StaticView.vue     | 55 ------------------
 2 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/src/assets/css/src/2.blocks.dialog.css b/src/assets/css/src/2.blocks.dialog.css
index a9d6834..f6c69d1 100644
--- a/src/assets/css/src/2.blocks.dialog.css
+++ b/src/assets/css/src/2.blocks.dialog.css
@@ -65,7 +65,7 @@
   --btn-border-color: var(--color-white);
 }
 
-/* Inner */
+/* Content */
 .dialog__inner {
   background: var(--dialog-inner-background, #F7F7F7);
   height: 100%;
@@ -80,6 +80,53 @@
   display: flex;
   gap: var(--space-8);
 }
+.dialog [data-pc-section="content"] [role="tablist"] {
+  height: 3.5rem;
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0 auto;
+  border-bottom: 1px solid var(--color-grey-700);
+  padding-top: 7px;
+}
+.dialog [data-pc-section="content"] [role="tab"] {
+  --tab-h: 3rem;
+  --tab-min-w: none;
+  --tab-py: var(--space-8);
+  --tab-px: var(--space-12);
+  --tab-border-w: 1px;
+  --tab-color: var(--color-grey-400);
+  --tab-background: transparent;
+  --tab-border-color: transparent;
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-md);
+  text-align: center;
+  background-color: transparent;
+  color: var(--tab-color);
+  padding: var(--tab-py) var(--tab-px);
+  margin: 0;
+  cursor: pointer;
+  gap: var(--space-4);
+  min-width: var(--tab-min-w);
+  height: var(--tab-h);
+  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
+}
+.dialog [data-pc-section="content"] [role="tab"][aria-selected="true"] {
+  --tab-border-color: var(--color-white);
+  --tab-color: var(--color-white);
+}
+.dialog [data-pc-section="content"] [role="tab"]:focus-visible {
+  z-index: 20;
+}
+.dialog [data-pc-section="content"] [role="tab"] .label {
+  flex-grow: 1;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  margin-top: -0.1em;
+}
 
 /* Footer */
 .dialog [data-pc-section="footer"] {
@@ -97,13 +144,18 @@
   left: 22.5rem;
   right: 22.5rem;
 }
-.dialog.static#virtual-sample #comments-container {
+.dialog#virtual-sample #comments-container {
   top: 8rem;
 }
-.dialog.static#virtual-sample [data-pc-section="footer"] {
+.dialog#virtual-sample [data-pc-section="footer"] {
   display: none;
 }
 
+.dialog#virtual-sample .dialog__inner {
+  background-color: inherit;
+  height: calc(100% - 3.5rem) !important;
+}
+
 /* Physical Sample */
 .dialog#physical-sample {
   --dialog-header-h: 15rem;
diff --git a/src/components/project/virtual-sample/StaticView.vue b/src/components/project/virtual-sample/StaticView.vue
index 5470ea6..0a28a9f 100644
--- a/src/components/project/virtual-sample/StaticView.vue
+++ b/src/components/project/virtual-sample/StaticView.vue
@@ -50,58 +50,3 @@ watch(
   { immediate: true }
 );
 </script>
-
-<style scoped>
-.dialog__inner {
-  background-color: inherit;
-  height: calc(100% - 3.5rem) !important;
-}
-
-[role="tablist"] {
-  height: 3.5rem;
-  width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  margin: 0 auto;
-  border-bottom: 1px solid var(--color-grey-700);
-  padding-top: 7px;
-}
-[role="tab"] {
-  --tab-h: 3rem;
-  --tab-min-w: none;
-  --tab-py: var(--space-8);
-  --tab-px: var(--space-12);
-  --tab-border-w: 1px;
-  --tab-color: var(--color-grey-400);
-  --tab-background: transparent;
-  --tab-border-color: transparent;
-  position: relative;
-  display: flex;
-  align-items: center;
-  font-size: var(--text-md);
-  text-align: center;
-  background-color: transparent;
-  color: var(--tab-color);
-  padding: var(--tab-py) var(--tab-px);
-  margin: 0;
-  cursor: pointer;
-  gap: var(--space-4);
-  min-width: var(--tab-min-w);
-  height: var(--tab-h);
-  border-bottom: var(--tab-border-w) solid var(--tab-border-color);
-}
-[role="tab"][aria-selected="true"] {
-  --tab-border-color: var(--color-white);
-  --tab-color: var(--color-white);
-}
-[role="tab"]:focus-visible {
-  z-index: 20;
-}
-[role="tab"] .label {
-  flex-grow: 1;
-  font-weight: 500;
-  letter-spacing: 0.01em;
-  margin-top: -0.1em;
-}
-</style>