Skip to content

Commit

Permalink
feat(ld-tabs): scrollable tab list
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur @renet
borisdiakur authored and renet committed Sep 20, 2021
1 parent acc5964 commit 787c5ba
Show file tree
Hide file tree
Showing 4 changed files with 291 additions and 81 deletions.
84 changes: 42 additions & 42 deletions src/liquid/components/ld-tabs/ld-tab.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
--ld-tab-min-height: 2.5rem;
--ld-tab-color: var(--ld-col-rblck-default);
--ld-tab-bg-color: var(--ld-col-bg-lg);
--ld-tab-focus-color: var(--ld-col-rblck1);
--ld-tab-focus-bg-color: var(--ld-col-rblck4);
--ld-tab-hover-bg-color: var(--ld-col-rblck1);
--ld-tab-active-bg-color: var(--ld-col-rblck2);
--ld-tab-color-focus: var(--ld-col-rblck1);
--ld-tab-bg-color-focus: var(--ld-col-rblck4);
--ld-tab-bg-color-hover: var(--ld-col-rblck1);
--ld-tab-bg-color-active: var(--ld-col-rblck2);
--ld-tab-gap: 0.625rem;
--ld-tab-icon-size: 1.25rem;
position: relative;
Expand Down Expand Up @@ -35,8 +35,8 @@
background-color: var(--ld-tab-bg-color);

&[aria-disabled='true'] {
--ld-tab-focus-bg-color: var(--ld-col-rblck3);
--ld-tab-focus-color: var(--ld-col-wht);
--ld-tab-bg-color-focus: var(--ld-col-rblck3);
--ld-tab-color-focus: var(--ld-col-wht);

.ld-tab__content {
opacity: 0.25;
Expand All @@ -49,7 +49,7 @@
position: absolute;
inset: auto 0 0 0;
height: var(--ld-sp-2);
z-index: 1;
z-index: 3;
}

&[aria-selected='true'] {
Expand All @@ -62,11 +62,11 @@

&:focus:focus-visible {
outline: none;
background-color: var(--ld-tab-focus-bg-color);
background-color: var(--ld-tab-bg-color-focus);

&:not(:active),
&[aria-disabled='true'] {
color: var(--ld-tab-focus-color);
color: var(--ld-tab-color-focus);
}

&[aria-selected='true'] {
Expand All @@ -89,7 +89,7 @@

@media (hover: hover) {
&:hover {
background-color: var(--ld-tab-hover-bg-color);
background-color: var(--ld-tab-bg-color-hover);

&:not([aria-selected='true'])::after {
background-color: inherit;
Expand All @@ -98,7 +98,7 @@
}
&:active:focus,
&:active:focus:focus-visible {
background-color: var(--ld-tab-active-bg-color);
background-color: var(--ld-tab-bg-color-active);

&:not([aria-selected='true'])::after {
background-color: inherit;
Expand Down Expand Up @@ -158,21 +158,21 @@

&:not([aria-disabled='true']) {
--ld-tab-color: var(--ld-col-wht);
--ld-tab-focus-color: var(--ld-col-wht);
--ld-tab-color-focus: var(--ld-col-wht);
}

.ld-theme-ocean &,
[class*='ld-theme'] .ld-theme-ocean & {
--ld-tab-color-selected: var(--ld-thm-ocean-accent);
--ld-tab-bg-color: var(--ld-thm-ocean-bg-primary);
--ld-tab-focus-bg-color: var(--ld-col-rb-focus);
--ld-tab-focus-color: var(--ld-col-rb6);
--ld-tab-hover-bg-color: var(--ld-col-rb-hover);
--ld-tab-active-bg-color: var(--ld-col-rb-active);
--ld-tab-bg-color-focus: var(--ld-col-rb-focus);
--ld-tab-color-focus: var(--ld-col-rb6);
--ld-tab-bg-color-hover: var(--ld-col-rb-hover);
--ld-tab-bg-color-active: var(--ld-col-rb-active);

&[aria-disabled='true'] {
--ld-tab-focus-color: var(--ld-col-rb5);
--ld-tab-focus-bg-color: var(--ld-col-rb6);
--ld-tab-color-focus: var(--ld-col-rb5);
--ld-tab-bg-color-focus: var(--ld-col-rb6);
--ld-tab-color: var(--ld-col-rb3);
}
}
Expand All @@ -181,14 +181,14 @@
[class*='ld-theme'] .ld-theme-tea & {
--ld-tab-color-selected: var(--ld-thm-tea-accent);
--ld-tab-bg-color: var(--ld-thm-tea-bg-primary);
--ld-tab-focus-bg-color: var(--ld-col-rg-focus);
--ld-tab-focus-color: var(--ld-col-rg6);
--ld-tab-hover-bg-color: var(--ld-col-rg-hover);
--ld-tab-active-bg-color: var(--ld-col-rg-active);
--ld-tab-bg-color-focus: var(--ld-col-rg-focus);
--ld-tab-color-focus: var(--ld-col-rg6);
--ld-tab-bg-color-hover: var(--ld-col-rg-hover);
--ld-tab-bg-color-active: var(--ld-col-rg-active);

&[aria-disabled='true'] {
--ld-tab-focus-color: var(--ld-col-rg5);
--ld-tab-focus-bg-color: var(--ld-col-rg6);
--ld-tab-color-focus: var(--ld-col-rg5);
--ld-tab-bg-color-focus: var(--ld-col-rg6);
--ld-tab-color: var(--ld-col-rg3);
}
}
Expand All @@ -197,14 +197,14 @@
[class*='ld-theme'] .ld-theme-bubblegum & {
--ld-tab-color-selected: var(--ld-thm-bubblegum-accent);
--ld-tab-bg-color: var(--ld-thm-bubblegum-bg-primary);
--ld-tab-focus-bg-color: var(--ld-col-rp-focus);
--ld-tab-focus-color: var(--ld-col-rp6);
--ld-tab-hover-bg-color: var(--ld-col-rp-hover);
--ld-tab-active-bg-color: var(--ld-col-rp-active);
--ld-tab-bg-color-focus: var(--ld-col-rp-focus);
--ld-tab-color-focus: var(--ld-col-rp6);
--ld-tab-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-bg-color-active: var(--ld-col-rp-active);

&[aria-disabled='true'] {
--ld-tab-focus-color: var(--ld-col-rp5);
--ld-tab-focus-bg-color: var(--ld-col-rp6);
--ld-tab-color-focus: var(--ld-col-rp5);
--ld-tab-bg-color-focus: var(--ld-col-rp6);
--ld-tab-color: var(--ld-col-rp3);
}
}
Expand All @@ -213,14 +213,14 @@
[class*='ld-theme'] .ld-theme-shake & {
--ld-tab-color-selected: var(--ld-thm-shake-accent);
--ld-tab-bg-color: var(--ld-thm-shake-bg-primary);
--ld-tab-focus-bg-color: var(--ld-col-rp-focus);
--ld-tab-focus-color: var(--ld-col-rp6);
--ld-tab-hover-bg-color: var(--ld-col-rp-hover);
--ld-tab-active-bg-color: var(--ld-col-rp-active);
--ld-tab-bg-color-focus: var(--ld-col-rp-focus);
--ld-tab-color-focus: var(--ld-col-rp6);
--ld-tab-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-bg-color-active: var(--ld-col-rp-active);

&[aria-disabled='true'] {
--ld-tab-focus-color: var(--ld-col-rp5);
--ld-tab-focus-bg-color: var(--ld-col-rp6);
--ld-tab-color-focus: var(--ld-col-rp5);
--ld-tab-bg-color-focus: var(--ld-col-rp6);
--ld-tab-color: var(--ld-col-rp3);
}
}
Expand All @@ -229,14 +229,14 @@
[class*='ld-theme'] .ld-theme-solvent & {
--ld-tab-color-selected: var(--ld-thm-solvent-accent);
--ld-tab-bg-color: var(--ld-thm-solvent-bg-primary);
--ld-tab-focus-bg-color: var(--ld-col-rp-focus);
--ld-tab-focus-color: var(--ld-col-rp6);
--ld-tab-hover-bg-color: var(--ld-col-rp-hover);
--ld-tab-active-bg-color: var(--ld-col-rp-active);
--ld-tab-bg-color-focus: var(--ld-col-rp-focus);
--ld-tab-color-focus: var(--ld-col-rp6);
--ld-tab-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-bg-color-active: var(--ld-col-rp-active);

&[aria-disabled='true'] {
--ld-tab-focus-color: var(--ld-col-rp5);
--ld-tab-focus-bg-color: var(--ld-col-rp6);
--ld-tab-color-focus: var(--ld-col-rp5);
--ld-tab-bg-color-focus: var(--ld-col-rp6);
--ld-tab-color: var(--ld-col-rp3);
}
}
Expand Down
152 changes: 127 additions & 25 deletions src/liquid/components/ld-tabs/ld-tablist.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
.ld-tablist {
--ld-tab-indicator-color: var(--ld-col-bg-g);
--ld-tab-btn-scroll-color: var(--ld-col-rblck-default);
--ld-tab-btn-scroll-color-active: var(--ld-col-rblck-default);
--ld-tab-btn-scroll-bg-color: var(--ld-col-bg-lg);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rblck1);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rblck2);
position: relative;
display: block;
display: flex;
overflow: hidden;

&::after {
Expand All @@ -10,6 +15,7 @@
inset: auto 0 0 0;
height: var(--ld-sp-2);
background-color: var(--ld-tab-indicator-color);
z-index: 2;
}

.ld-tabs--rounded-all & {
Expand All @@ -36,39 +42,135 @@
margin-bottom: -4rem;
}

/* .ld-theme-ocean -> default */
:where(.ld-tabs--brand-color) {
.ld-tablist,
:where(.ld-theme-ocean) .ld-tablist,
:where([class*='ld-theme'] .ld-theme-ocean) .ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-ocean-bg-secondary);
.ld-tablist__btn-scroll {
position: relative;
border: 0;
text-decoration: none;
user-select: none;
touch-action: manipulation;
display: none;
justify-content: center;
align-items: center;
-webkit-touch-callout: none;
color: var(--ld-tab-btn-scroll-color);
background-color: var(--ld-tab-btn-scroll-bg-color);
box-shadow: var(--ld-shadow-active);
width: var(--ld-sp-32);
z-index: 2;

.ld-tablist--scrollable & {
display: inline-flex;
}

:where(.ld-theme-tea),
:where([class*='ld-theme'] .ld-theme-tea) {
.ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-tea-bg-secondary);
}
:where(.ld-tabs--brand-color) & {
--ld-tab-btn-scroll-color-active: var(--ld-col-wht);
--ld-tab-btn-scroll-color: var(--ld-col-wht);
}

:where(.ld-theme-bubblegum),
:where([class*='ld-theme'] .ld-theme-bubblegum) {
.ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-bubblegum-bg-secondary);
}
&:focus:focus-visible {
outline: none;
}

:where(.ld-theme-shake),
:where([class*='ld-theme'] .ld-theme-shake) {
.ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-shake-bg-secondary);
&[aria-disabled='true'] {
svg {
opacity: 0.25;
}
}

:where(.ld-theme-solvent),
:where([class*='ld-theme'] .ld-theme-solvent) {
.ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-solvent-bg-secondary);
&:where(:not([aria-disabled='true'])) {
cursor: pointer;

@media (hover: hover) {
&:hover {
background-color: var(--ld-tab-btn-scroll-bg-color-hover);
}
}
&:active:focus,
&:active:focus:focus-visible {
color: var(--ld-tab-btn-scroll-color-active);
background-color: var(--ld-tab-btn-scroll-bg-color-active);
}
}

&--left {
left: 0;
}
&--right {
right: 0;
}
}

/* .ld-theme-ocean -> default */
.ld-tablist,
.ld-theme-ocean .ld-tablist,
[class*='ld-theme'] .ld-theme-ocean .ld-tablist {
--ld-tab-color-selected: var(--ld-thm-ocean-bg-primary);
--ld-tab-selected-focus-color: var(--ld-col-rb2);

.ld-tabs--brand-color & {
--ld-tab-indicator-color: var(--ld-thm-ocean-bg-secondary);
--ld-tab-btn-scroll-bg-color: var(--ld-thm-ocean-bg-primary);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rb-hover);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rb-active);
}
}

.ld-theme-tea,
[class*='ld-theme'] .ld-theme-tea {
:where(.ld-tablist) {
--ld-tab-color-selected: var(--ld-thm-tea-bg-primary);
--ld-tab-selected-focus-color: var(--ld-col-rg2);
}

.ld-tabs--brand-color .ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-tea-bg-secondary);
--ld-tab-btn-scroll-bg-color: var(--ld-thm-tea-bg-primary);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rg-hover);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rg-active);
}
}

.ld-theme-bubblegum,
[class*='ld-theme'] .ld-theme-bubblegum {
:where(.ld-tablist) {
--ld-tab-color-selected: var(--ld-thm-bubblegum-bg-primary);
--ld-tab-selected-focus-color: var(--ld-col-rp2);
}

.ld-tabs--brand-color .ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-bubblegum-bg-secondary);
--ld-tab-btn-scroll-bg-color: var(--ld-thm-bubblegum-bg-primary);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rp-active);
}
}

.ld-theme-shake,
[class*='ld-theme'] .ld-theme-shake {
:where(.ld-tablist) {
--ld-tab-color-selected: var(--ld-thm-shake-bg-primary);
--ld-tab-selected-focus-color: var(--ld-col-rp2);
}

.ld-tabs--brand-color .ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-shake-bg-secondary);
--ld-tab-btn-scroll-bg-color: var(--ld-thm-shake-bg-primary);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rp-active);
}
}

.ld-theme-solvent,
[class*='ld-theme'] .ld-theme-solvent {
:where(.ld-tablist) {
--ld-tab-color-selected: var(--ld-thm-solvent-bg-primary);
--ld-tab-selected-focus-color: var(--ld-col-rp2);
}

.ld-tabs--brand-color .ld-tablist {
--ld-tab-indicator-color: var(--ld-thm-solvent-bg-secondary);
--ld-tab-btn-scroll-bg-color: var(--ld-thm-solvent-bg-primary);
--ld-tab-btn-scroll-bg-color-hover: var(--ld-col-rp-hover);
--ld-tab-btn-scroll-bg-color-active: var(--ld-col-rp-active);
}
}
Loading

0 comments on commit 787c5ba

Please sign in to comment.