From 5b6622bb7348e511892d3a8d83a82bb6932ce4a2 Mon Sep 17 00:00:00 2001
From: utkarshInnoraft73 <utkarsh.singh@innoraft.com>
Date: Sun, 16 Mar 2025 10:01:02 +0530
Subject: [PATCH 1/2] Issue #3506330: Improve the styling for vertical tabs
---
dist/css/components/tabs.css | 22 +++++++++++++++++++++-
styles/components/tabs.scss | 30 ++++++++++++++++++++----------
2 files changed, 41 insertions(+), 11 deletions(-)
diff --git a/dist/css/components/tabs.css b/dist/css/components/tabs.css
index 42484d001..7a777ee06 100644
--- a/dist/css/components/tabs.css
+++ b/dist/css/components/tabs.css
@@ -440,10 +440,18 @@
}
.gin--dark-mode .vertical-tabs__items {
- background: none;
+ background: var(--gin-bg-app);
border: 0 none;
}
+[dir="ltr"] .gin--dark-mode .vertical-tabs__items {
+ border-end-start-radius: 0;
+}
+
+[dir="rtl"] .gin--dark-mode .vertical-tabs__items {
+ border-end-end-radius: 0;
+}
+
.gin--dark-mode .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-link {
background: var(--gin-bg-app);
border-color: transparent;
@@ -531,3 +539,15 @@
}
}
+.vertical-tabs__panes {
+ padding-bottom: var(--gin-spacing-xs);
+}
+
+[dir="ltr"] .vertical-tabs__panes {
+ border-end-start-radius: 0;
+}
+
+[dir="rtl"] .vertical-tabs__panes {
+ border-end-end-radius: 0;
+}
+
diff --git a/styles/components/tabs.scss b/styles/components/tabs.scss
index a702040f5..5cf056e39 100644
--- a/styles/components/tabs.scss
+++ b/styles/components/tabs.scss
@@ -17,13 +17,13 @@
.tabs-wrapper:not(.is-horizontal) {
.tabs {
.gin--dark-mode & {
- border-color: #8E929C;
+ border-color: #8e929c;
}
&__tab {
.gin--dark-mode & {
background-color: var(--gin-bg-item-hover);
- border-color: #8E929C;
+ border-color: #8e929c;
}
}
}
@@ -61,7 +61,7 @@
}
.tabs__link.is-active,
-.claro-details__summary[aria-expanded=true],
+.claro-details__summary[aria-expanded="true"],
.horizontal-tabs ul.horizontal-tabs-list li.horizontal-tab-button.selected a {
font-weight: var(--gin-font-weight-semibold);
}
@@ -100,13 +100,13 @@
@include mq(small) {
width: 100%;
- padding-block: .3125rem var(--gin-spacing-l);
+ padding-block: 0.3125rem var(--gin-spacing-l);
padding-inline: var(--gin-spacing-xs);
margin-block-end: calc(var(--gin-spacing-xl) * -1);
overflow-x: auto;
.gin--edit-form & {
- padding-block-start: .4rem;
+ padding-block-start: 0.4rem;
}
}
@@ -294,7 +294,7 @@
border-radius: var(--gin-border-m) var(--gin-border-m) 0 0;
&::before {
- content: '';
+ content: "";
display: block;
position: absolute;
}
@@ -355,7 +355,7 @@
.claro-details[open] > .claro-details__summary::before {
inset-inline-start: 1.125rem;
background: var(--gin-color-text);
- mask-image: icon('handle');
+ mask-image: icon("handle");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% 100%;
@@ -419,8 +419,9 @@
.vertical-tabs {
&__items {
- background: none;
+ background: var(--gin-bg-app);
border: 0 none;
+ border-bottom-left-radius: 0;
}
&__menu-item.is-selected .vertical-tabs__menu-link {
@@ -503,8 +504,10 @@
}
}
-[open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
-[open] > .claro-details__summary--accordion-item:not(:focus):not(:active)::after {
+[open]
+ > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
+[open]
+ > .claro-details__summary--accordion-item:not(:focus):not(:active)::after {
border-inline-start-width: 5px;
}
@@ -515,3 +518,10 @@
width: 100%;
}
}
+
+.vertical-tabs {
+ &__panes {
+ border-bottom-left-radius: 0;
+ padding-bottom: var(--gin-spacing-xs);
+ }
+}
--
GitLab
From a982d07aeeba20344b4a0a8c78b9d247b61ce700 Mon Sep 17 00:00:00 2001
From: utkarshInnoraft73 <utkarsh.singh@innoraft.com>
Date: Tue, 13 May 2025 15:05:05 +0530
Subject: [PATCH 2/2] Issue #3506330: Improve the styling for vertical tabs
---
dist/css/theme/variables.css | 2 +-
styles/theme/variables.scss | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/dist/css/theme/variables.css b/dist/css/theme/variables.css
index 34d68c2e6..3117e672f 100644
--- a/dist/css/theme/variables.css
+++ b/dist/css/theme/variables.css
@@ -82,7 +82,7 @@
--gin-border-m: .5rem;
--gin-border-l: .75rem;
--gin-border-xl: 1rem;
- --gin-border-color: #d4d4d8;
+ --gin-border-color: #838585;
--gin-border-color-secondary: rgba(0, 0, 0, .08);
--gin-border-color-layer: rgba(0, 0, 0, .08);
--gin-border-color-layer2: #d4d4d8;
diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss
index 0ea76c019..12d5bc644 100644
--- a/styles/theme/variables.scss
+++ b/styles/theme/variables.scss
@@ -121,7 +121,7 @@
--gin-border-l: #{rem(12px)};
--gin-border-xl: #{rem(16px)};
- --gin-border-color: #d4d4d8;
+ --gin-border-color: #838585;
--gin-border-color-secondary: rgba(0, 0, 0, .08);
--gin-border-color-layer: rgba(0, 0, 0, .08);
--gin-border-color-layer2: #d4d4d8;
--
GitLab