Skip to content
Snippets Groups Projects
Commit 0dd920c7 authored by shamalainen's avatar shamalainen
Browse files

Update tabs styles

parent aed594e0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-tabs/hy-tabs.scss
+ 122
− 73
View file @ 0dd920c7
...@@ -9,10 +9,10 @@ ...@@ -9,10 +9,10 @@
} }
.hy-tab-scroll { .hy-tab-scroll {
background-color: var(--brand-main-light); background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
border: 0; border: 0;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); height: 100%;
margin: 0;
padding: 0; padding: 0;
position: absolute; position: absolute;
top: 50%; top: 50%;
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
display: none; display: none;
visibility: hidden; visibility: hidden;
} }
&.is-disabled { &.is-disabled {
background-color: var(--grayscale-medium); background-color: var(--grayscale-medium);
...@@ -37,39 +38,37 @@ ...@@ -37,39 +38,37 @@
cursor: pointer; cursor: pointer;
} }
svg { span {
fill: var(--grayscale-white); align-items: center;
height: 16px; background-color: var(--grayscale-black);
margin: 8px; border-radius: 100%;
position: relative; display: inline-flex;
width: 16px; height: 32px;
justify-content: center;
@include breakpoint($narrow) { width: 32px;
height: 18px;
margin: 9px; //36x36
width: 18px;
}
@include breakpoint($wide) { svg {
height: 24px; fill: var(--grayscale-white);
margin: 10px; //44x44 height: 16px;
width: 24px; width: 16px;
} }
} }
&__left { &__left {
left: 2px; left: 0;
padding-right: 8px;
svg { svg {
left: -1.5px; transform: translateX(-1px);
} }
} }
&__right { &__right {
right: 2px; padding-left: 8px;
right: 0;
svg { svg {
left: 1.5px; transform: translateX(1px);
} }
} }
} }
...@@ -88,62 +87,73 @@ ...@@ -88,62 +87,73 @@
} }
[role='tab'] { [role='tab'] {
@include font-size(14px, 16px); align-items: stretch;
background-color: transparent;
align-items: center;
background-color: var(--grayscale-background-box);
border: 0; border: 0;
color: var(--grayscale-black);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-shrink: 0; flex-shrink: 0;
font-family: var(--main-font-family);
font-weight: 600;
hyphens: auto;
justify-content: center; justify-content: center;
letter-spacing: -0.44px; margin-bottom: 6px;
margin: 0 4px 0 0; max-width: 47.56%;
max-width: calc(100% / 12 * 3); padding: 0;
min-height: 44px;
min-width: 100px;
padding: 8px;
position: relative;
white-space: normal;
word-break: break-word;
@supports (overflow-wrap: anywhere) { &:not(:first-of-type) {
overflow-wrap: anywhere; margin-left: 6px;
} }
overflow-wrap: break-word; @include breakpoint($narrow) {
max-width: 35.37%;
@supports (overflow-wrap: anywhere) {
overflow-wrap: anywhere;
} }
overflow-wrap: break-word; @include breakpoint($wide) {
max-width: 23.13%;
}
span.tab-title { @include breakpoint($extrawide) {
padding: 8px; max-width: 23.03%;
} }
@include breakpoint($narrow) { > span {
@include font-size(18px, 24px); @include font-size(14px, 14px);
letter-spacing: -0.56px; @include font-weight($bold);
margin: 0 8px 0 0; align-items: center;
padding: 8px 12px; 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 { @include breakpoint($narrow) {
padding: 8px 12px; @include font-size(16px, 18px);
padding: 16px 12px 10px;
} }
}
@include breakpoint($wide) { @include breakpoint($extrawide) {
padding: 8px 16px; @include font-size(18px, 20px);
letter-spacing: -0.6px;
padding: 16px 16px 14px;
}
span.tab-title { @supports (overflow-wrap: anywhere) {
padding: 8px 16px; overflow-wrap: anywhere;
} }
overflow-wrap: break-word;
@supports (overflow-wrap: anywhere) {
overflow-wrap: anywhere;
}
overflow-wrap: break-word;
} }
} }
...@@ -155,15 +165,45 @@ ...@@ -155,15 +165,45 @@
} }
[role='tab'][aria-selected='true'] { [role='tab'][aria-selected='true'] {
background: var(--grayscale-white);
border: 1px solid var(--grayscale-tabs-border);
border-bottom-width: 0; border-bottom-width: 0;
box-shadow: inset 0 1px 0 0 #d2d2d2, inset -1px 1px 0 0 #d2d2d2, inset 1px 1px 0 0 #d2d2d2, border: 1px solid var(--grayscale-dark);
0 -4px 8px -4px rgba(0, 0, 0, 0.1); margin-bottom: 0;
font-weight: bold;
margin-bottom: -1px;
padding-bottom: 9px;
z-index: 3; 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, [role='tab']:hover,
...@@ -173,17 +213,26 @@ ...@@ -173,17 +213,26 @@
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
}
[role='tab']:hover::before, span {
[role='tab']:focus::before { background-color: var(--hover-gray);
color: var(--brand-main-active);
}
} }
[role='tabpanel'] { [role='tabpanel'] {
border-top: 1px solid var(--grayscale-medium); border: 1px solid var(--grayscale-dark);
padding: 1.5em 0.5em 0.7em; padding: 28px 12px;
position: relative; position: relative;
z-index: 2; z-index: 2;
@include breakpoint($narrow) {
padding: 38px 15px;
}
@include breakpoint($wide) {
padding: 40px 20px;
}
} }
[role='tabpanel']:focus { [role='tabpanel']:focus {
......
src/components/hy-tabs/hy-tabs.tsx
+ 9
− 10
View file @ 0dd920c7
...@@ -321,7 +321,9 @@ export class HyTabs implements ComponentInterface { ...@@ -321,7 +321,9 @@ export class HyTabs implements ComponentInterface {
<div id={id} class={classComponentAttributes}> <div id={id} class={classComponentAttributes}>
<div class="hy-tablist-container"> <div class="hy-tablist-container">
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__left is-hidden" aria-hidden="true"> <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> </button>
<div role="tablist" aria-label={this.tabListLabel}> <div role="tablist" aria-label={this.tabListLabel}>
{this.tabButtonTitles && {this.tabButtonTitles &&
...@@ -329,19 +331,16 @@ export class HyTabs implements ComponentInterface { ...@@ -329,19 +331,16 @@ export class HyTabs implements ComponentInterface {
const title = Object.values(item)[0]; const title = Object.values(item)[0];
const id = title.toLowerCase().replace(/\W/g, '-'); const id = title.toLowerCase().replace(/\W/g, '-');
return ( return (
<button <button aria-selected="false" aria-controls={`${id}-tab`} class={this.headerstyle} role="tab" id={id}>
aria-selected="false" <span>{title}</span>
aria-controls={`${id}-tab`} </button>
class={this.headerstyle}
role="tab"
id={id}
innerHTML={title}
></button>
); );
})} })}
</div> </div>
<button tabindex="-1" class="hy-tab-scroll hy-tab-scroll__right" aria-hidden="true"> <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> </button>
</div> </div>
<slot></slot> <slot></slot>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment