Skip to content

Commit

Permalink
scroll tabs on smaller screens
Browse files Browse the repository at this point in the history
  • Loading branch information
bishabosha committed May 27, 2022
1 parent c8a0eec commit fdec7e1
Showing 1 changed file with 19 additions and 0 deletions.
19 changes: 19 additions & 0 deletions _sass/components/tab.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
@include display(flex);
@include align-items(center);
@include justify-content(flex-start);
overflow-x: auto; // scrollbar when width is too small.
overflow-y: hidden;

.item-tab {

Expand Down Expand Up @@ -57,6 +59,7 @@
}
}

/* Active Tabs for standard screen size */
.nav-tab>.item-tab>a.active, // used in the blog
.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
Expand All @@ -73,6 +76,22 @@
pointer-events: none;
}

/* Active Tabs for small screen size */
@include bp(small) {
.nav-tab>.item-tab>a.active,
.tabsection>input:nth-child(1):checked~.nav-tab .item-tab:nth-child(1) label,
.tabsection>input:nth-child(2):checked~.nav-tab .item-tab:nth-child(2) label,
.tabsection>input:nth-child(3):checked~.nav-tab .item-tab:nth-child(3) label,
.tabsection>input:nth-child(4):checked~.nav-tab .item-tab:nth-child(4) label,
.tabsection>input:nth-child(5):checked~.nav-tab .item-tab:nth-child(5) label,
.tabsection>input:nth-child(6):checked~.nav-tab .item-tab:nth-child(6) label,
.tabsection>input:nth-child(7):checked~.nav-tab .item-tab:nth-child(7) label,
.tabsection>input:nth-child(8):checked~.nav-tab .item-tab:nth-child(8) label,
.tabsection>input:nth-child(9):checked~.nav-tab .item-tab:nth-child(9) label {
padding: 0 10px 8px; // match narrower padding for inactive tabs
}
}

.tabsection {
border-bottom: $base-border-gray;
border-left: $base-border-gray;
Expand Down

0 comments on commit fdec7e1

Please sign in to comment.