diff --git a/dist/css/components/tabs.css b/dist/css/components/tabs.css index 42484d001738386ae67bc0ffef80490e5fad93dd..7a777ee06021dfe29cccf6551d778c1178442ebe 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/dist/css/theme/variables.css b/dist/css/theme/variables.css index 34d68c2e6ed4b4eec234a9855c54ddf15268defa..3117e672f62b40d42472b8d2c0508299cd06af15 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/components/tabs.scss b/styles/components/tabs.scss index a702040f52b3078f73f4b28a8b336acd884ed039..5cf056e3989cc3d43e44a4a6be422d74b47ace69 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); + } +} diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss index 0ea76c019678c456546471dfbb0322e53074a843..12d5bc6443df6e75a060519b966e279597929529 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;