Skip to content

Commit

Permalink
fix: increase tab size (#550)
Browse files Browse the repository at this point in the history 
* fix: increase tab size

* fix: change tab size to container
  • Loading branch information
@twhite313
twhite313 authored Feb 10, 2025
1 parent 715351c commit 7cfafe9
Showing 1 changed file with 148 additions and 152 deletions.
300 changes: 148 additions & 152 deletions eds/blocks/tabs/tabs.css
View file
Original file line number Diff line number Diff line change
@@ -1,184 +1,181 @@
.tabs {
.columns {
inline-size: 96vw;
margin: auto;
max-inline-size: 1440px;
padding: 0 var(--space-6);
text-align: center;
}
.tabs .columns {
inline-size: 96vw;
margin: auto;
max-inline-size: 1440px;
padding: 0 var(--space-6);
text-align: center;
}

.columns > div {
gap: 25px;
}
.tabs .columns > div {
gap: 25px;
}

.columns > div > div {
order: 0;
}
.tabs .columns > div > div {
order: 0;
}

.columns > div > div:first-child {
margin-block-end: var(--space-6);
}
.tabs .columns > div > div:first-child {
margin-block-end: var(--space-6);
}

.columns > div > div:nth-child(2) {
margin-block-start: var(--space-5);
}
.tabs .columns > div > div:nth-child(2) {
margin-block-start: var(--space-5);
}

p:last-child {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-block-end: 0;
}
.tabs p:last-child {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-block-end: 0;
}

.text-wrapper {
padding: 0 5vw;
padding-block-start: 4rem;
.tabs .text-wrapper {
padding: 0 5vw;
padding-block-start: 4rem;
}

p, h2 {
inline-size: 90%;
}
.tabs .text-wrapper :is(p, h2) {
inline-size: 90%;
}

p:first-child {
color: var(--calcite-ui-text-2);
font-size: var(--font-0);
font-weight: 600;
margin: 0;
margin-block-end: 0.5rem;
text-transform: uppercase;
}
.tabs .text-wrapper p:first-child {
color: var(--calcite-ui-text-2);
font-size: var(--font-0);
font-weight: 600;
margin: 0;
margin-block-end: 0.5rem;
text-transform: uppercase;
}

p:last-child {
color: var(--calcite-ui-text-1);
margin: 0;
margin-block-end: 1.5rem;
}
.tabs .text-wrapper p:last-child {
color: var(--calcite-ui-text-1);
margin: 0;
margin-block-end: 1.5rem;
}

h2 {
font-size: var(--font-8);
margin: 0;
margin-block-end: 0.6rem;
}
}
.tabs .text-wrapper h2 {
font-size: var(--font-8);
margin: 0;
margin-block-end: 0.6rem;
}

.tab-component {
display: flex;
flex-direction: column;
inline-size: 100vw;
justify-content: flex-end;
}
.tabs .tab-component {
display: flex;
flex-direction: column;
inline-size: 100vw;
justify-content: flex-end;
}

.tab-nav {
align-items: center;
border-block-end: 1px solid var(--calcite-ui-border-1);
display: flex;
inline-size: 96vw;
justify-content: center;
margin: 0 auto;
padding: 0;
position: relative;

.tab-titles {
align-items: flex-end;
display: flex;
justify-content: center;
list-style-type: none;
margin-block-end: 0;
padding: 0;
}
.tabs .tab-nav {
align-items: center;
border-block-end: 1px solid var(--calcite-ui-border-1);
display: flex;
inline-size: 96vw;
justify-content: center;
margin: 0 auto;
padding: 0;
position: relative;
}

calcite-icon {
color: var(--calcite-ui-inverse);
}
.tabs .tab-nav .tab-titles {
display: flex;
inline-size: 100%;
justify-content: center;
list-style-type: none;
margin-block-end: 0;
padding: 0;
}

.arrow-button {
border: none;
margin: auto 0;
opacity: .96;
padding: 0;
position: absolute;
}
.tabs .tab-nav calcite-icon {
color: var(--calcite-ui-inverse);
}

.arrow-button.left {
inset-inline-start: 0;
}
.tabs .tab-nav .arrow-button {
border: none;
margin: auto 0;
opacity: .96;
padding: 0;
position: absolute;
}

.arrow-button.right {
inset-inline-end: 0;
}
.tabs .tab-nav .arrow-button.left {
inset-inline-start: 0;
}

.arrow-button[aria-hidden="true"] {
display: none;
}
.tabs .tab-nav .arrow-button.right {
inset-inline-end: 0;
}

.tab-title {
display: block;
transition: 0.3s ease;
}
.tabs .tab-nav .arrow-button[aria-hidden="true"] {
display: none;
}

.tab-title button {
background: none;
color: var(--calcite-ui-text-1);
font-size: var(--font-0);
font-weight: 400;
margin: auto;
max-inline-size: 286px;
padding: 1rem;
}
.tabs .tab-nav .tab-title {
display: block;
transition: 0.3s ease;
}

.tab-title .icon {
margin-block-end: 10px;
}
.tabs .tab-nav .tab-title button {
background: none;
color: var(--calcite-ui-text-1);
font-size: var(--font-0);
font-weight: 400;
margin: auto;
max-inline-size: 286px;
padding: 1rem;
}

.tab-title[aria-hidden="true"] {
display: none;
}
.tabs .tab-nav .tab-title .icon {
margin-block-end: 10px;
}

.tab-title[aria-hidden="false"] {
border-block-end: 3px solid var(--calcite-ui-brand);
padding-block-end: 0;
}
.tabs .tab-nav .tab-title[aria-hidden="true"] {
display: none;
}

.tab-title[aria-selected="true"] .icon {
--image-icon-filter: var(--image-icon-filter-brand);
}
.tabs .tab-nav .tab-title[aria-hidden="false"] {
border-block-end: 3px solid var(--calcite-ui-brand);
padding-block-end: 0;
}

}
.tabs .tab-nav .tab-title[aria-selected="true"] .icon {
--image-icon-filter: var(--image-icon-filter-brand);
}

.tab-content > .grid-container {
display: block;
inline-size: 100vw;
padding: 0;
position: relative;
}
.tabs .tab-content > .grid-container {
display: block;
inline-size: 100vw;
padding: 0;
position: relative;
}

.tab-content[aria-hidden="true"] {
display: none;
}
.tabs .tab-content[aria-hidden="true"] {
display: none;
}

.grid-container > p:first-child img {
block-size: 100%;
inline-size: 100%;
inset-block-start: 0;
object-fit: cover;
position: absolute;
}
.tabs .grid-container > p:first-child img {
block-size: 100%;
inline-size: 100%;
inset-block-start: 0;
object-fit: cover;
position: absolute;
}

.buttons-wrapper {
inline-size: 90%;
margin: auto;
margin-block-start: 2rem;
.tabs .buttons-wrapper {
inline-size: 90%;
margin: auto;
margin-block-start: 2rem;
}

calcite-button {
margin-block-end: 0.5rem;
margin-inline-end: 0.7rem;
padding-block-end: 0.75rem;
.tabs .buttons-wrapper calcite-button {
margin-block-end: 0.5rem;
margin-inline-end: 0.7rem;
padding-block-end: 0.75rem;
}

span {
color: var(--calcite-ui-text-1);
}
}
}
.tabs .buttons-wrapper calcite-button span {
color: var(--calcite-ui-text-1);
}

@media (width >= 900px) {
Expand All @@ -199,7 +196,6 @@
}

.tab-nav {
box-sizing: content-box;
inline-size: 1420px;
inset-inline: 0;
margin: 0 auto;
Expand Down

0 comments on commit 7cfafe9

Please sign in to comment.