diff --git a/src/components/hy-tabs/hy-tabs.scss b/src/components/hy-tabs/hy-tabs.scss
index b0753195e0bdfbbecab87ad5aa7d5b9021e26492..23ecb9dc73fb7901b4bbf1e609379c47272abdd7 100644
--- a/src/components/hy-tabs/hy-tabs.scss
+++ b/src/components/hy-tabs/hy-tabs.scss
@@ -9,10 +9,10 @@
}
.hy-tab-scroll {
- background-color: var(--brand-main-light);
- border-radius: 50%;
+ background-color: rgba(255, 255, 255, 0.8);
border: 0;
- box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
+ height: 100%;
+ margin: 0;
padding: 0;
position: absolute;
top: 50%;
@@ -23,6 +23,7 @@
display: none;
visibility: hidden;
}
+
&.is-disabled {
background-color: var(--grayscale-medium);
@@ -37,39 +38,37 @@
cursor: pointer;
}
- svg {
- fill: var(--grayscale-white);
- height: 16px;
- margin: 8px;
- position: relative;
- width: 16px;
-
- @include breakpoint($narrow) {
- height: 18px;
- margin: 9px; //36x36
- width: 18px;
- }
+ span {
+ align-items: center;
+ background-color: var(--grayscale-black);
+ border-radius: 100%;
+ display: inline-flex;
+ height: 32px;
+ justify-content: center;
+ width: 32px;
- @include breakpoint($wide) {
- height: 24px;
- margin: 10px; //44x44
- width: 24px;
+ svg {
+ fill: var(--grayscale-white);
+ height: 16px;
+ width: 16px;
}
}
&__left {
- left: 2px;
+ left: 0;
+ padding-right: 8px;
svg {
- left: -1.5px;
+ transform: translateX(-1px);
}
}
&__right {
- right: 2px;
+ padding-left: 8px;
+ right: 0;
svg {
- left: 1.5px;
+ transform: translateX(1px);
}
}
}
@@ -88,62 +87,73 @@
}
[role='tab'] {
- @include font-size(14px, 16px);
-
- align-items: center;
- background-color: var(--grayscale-background-box);
+ align-items: stretch;
+ background-color: transparent;
border: 0;
- color: var(--grayscale-black);
display: flex;
flex-direction: row;
flex-shrink: 0;
- font-family: var(--main-font-family);
- font-weight: 600;
- hyphens: auto;
justify-content: center;
- letter-spacing: -0.44px;
- margin: 0 4px 0 0;
- max-width: calc(100% / 12 * 3);
- min-height: 44px;
- min-width: 100px;
- padding: 8px;
- position: relative;
- white-space: normal;
- word-break: break-word;
+ margin-bottom: 6px;
+ max-width: 47.56%;
+ padding: 0;
- @supports (overflow-wrap: anywhere) {
- overflow-wrap: anywhere;
+ &:not(:first-of-type) {
+ margin-left: 6px;
}
- overflow-wrap: break-word;
-
- @supports (overflow-wrap: anywhere) {
- overflow-wrap: anywhere;
+ @include breakpoint($narrow) {
+ max-width: 35.37%;
}
- overflow-wrap: break-word;
+ @include breakpoint($wide) {
+ max-width: 23.13%;
+ }
- span.tab-title {
- padding: 8px;
+ @include breakpoint($extrawide) {
+ max-width: 23.03%;
}
- @include breakpoint($narrow) {
- @include font-size(18px, 24px);
- letter-spacing: -0.56px;
- margin: 0 8px 0 0;
- padding: 8px 12px;
+ > span {
+ @include font-size(14px, 14px);
+ @include font-weight($bold);
+ align-items: center;
+ background-color: var(--grayscale-background-box);
+ border: 0;
+ color: var(--link-blue);
+ display: flex;
+ font-family: var(--main-font-family);
+ hyphens: auto;
+ letter-spacing: -0.5px;
+ padding: 8px 8px 7px;
+ pointer-events: none;
+ position: relative;
+ text-align: left;
+ white-space: normal;
+ word-break: break-word;
- span.tab-title {
- padding: 8px 12px;
+ @include breakpoint($narrow) {
+ @include font-size(16px, 18px);
+ padding: 16px 12px 10px;
}
- }
- @include breakpoint($wide) {
- padding: 8px 16px;
+ @include breakpoint($extrawide) {
+ @include font-size(18px, 20px);
+ letter-spacing: -0.6px;
+ padding: 16px 16px 14px;
+ }
- span.tab-title {
- padding: 8px 16px;
+ @supports (overflow-wrap: anywhere) {
+ overflow-wrap: anywhere;
}
+
+ overflow-wrap: break-word;
+
+ @supports (overflow-wrap: anywhere) {
+ overflow-wrap: anywhere;
+ }
+
+ overflow-wrap: break-word;
}
}
@@ -155,15 +165,45 @@
}
[role='tab'][aria-selected='true'] {
- background: var(--grayscale-white);
- border: 1px solid var(--grayscale-tabs-border);
border-bottom-width: 0;
- box-shadow: inset 0 1px 0 0 #d2d2d2, inset -1px 1px 0 0 #d2d2d2, inset 1px 1px 0 0 #d2d2d2,
- 0 -4px 8px -4px rgba(0, 0, 0, 0.1);
- font-weight: bold;
- margin-bottom: -1px;
- padding-bottom: 9px;
+ border: 1px solid var(--grayscale-dark);
+ margin-bottom: 0;
z-index: 3;
+
+ > span {
+ background-color: var(--grayscale-white);
+ color: var(--grayscale-black);
+ padding-bottom: 13px;
+
+ @include breakpoint($narrow) {
+ padding-bottom: 16px;
+ }
+
+ @include breakpoint($extrawide) {
+ padding-bottom: 20px;
+ }
+
+ &:before {
+ background-color: var(--grayscale-white);
+ bottom: 0;
+ content: '';
+ height: 4px;
+ left: 0;
+ position: absolute;
+ right: 0;
+ transform: translateY(50%);
+ }
+
+ &:after {
+ background-color: var(--grayscale-black);
+ bottom: 0;
+ content: '';
+ height: 4px;
+ left: 8px;
+ position: absolute;
+ right: 8px;
+ }
+ }
}
[role='tab']:hover,
@@ -173,17 +213,26 @@
color: inherit;
cursor: pointer;
text-decoration: none;
- }
- [role='tab']:hover::before,
- [role='tab']:focus::before {
+ span {
+ background-color: var(--hover-gray);
+ color: var(--brand-main-active);
+ }
}
[role='tabpanel'] {
- border-top: 1px solid var(--grayscale-medium);
- padding: 1.5em 0.5em 0.7em;
+ border: 1px solid var(--grayscale-dark);
+ padding: 28px 12px;
position: relative;
z-index: 2;
+
+ @include breakpoint($narrow) {
+ padding: 38px 15px;
+ }
+
+ @include breakpoint($wide) {
+ padding: 40px 20px;
+ }
}
[role='tabpanel']:focus {
diff --git a/src/components/hy-tabs/hy-tabs.tsx b/src/components/hy-tabs/hy-tabs.tsx
index b20f472854137a610d5d168422f5dde437067405..d4cb934d03ad5ff3d295a29cd218396157f6da97 100644
--- a/src/components/hy-tabs/hy-tabs.tsx
+++ b/src/components/hy-tabs/hy-tabs.tsx
@@ -321,7 +321,9 @@ export class HyTabs implements ComponentInterface {
<div id={id} class={classComponentAttributes}>
<div class="hy-tablist-container">
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true">
- <hy-icon icon={'hy-icon-caret-left'} size={16} />
+ <span>
+ <hy-icon icon={'hy-icon-caret-left'} size={16} />
+ </span>
</button>
<div role="tablist" aria-label={this.tabListLabel}>
{this.tabButtonTitles &&
@@ -329,19 +331,16 @@ export class HyTabs implements ComponentInterface {
const title = Object.values(item)[0];
const id = title.toLowerCase().replace(/\W/g, '-');
return (
- <button
- aria-selected="false"
- aria-controls={`${id}-tab`}
- class={this.headerstyle}
- role="tab"
- id={id}
- innerHTML={title}
- ></button>
+ <button aria-selected="false" aria-controls={`${id}-tab`} class={this.headerstyle} role="tab" id={id}>
+ <span>{title}</span>
+ </button>
);
})}
</div>
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true">
- <hy-icon icon={'hy-icon-caret-right'} size={16} />
+ <span>
+ <hy-icon icon={'hy-icon-caret-right'} size={16} />
+ </span>
</button>
</div>
<slot></slot>