Skip to content

Commit

Permalink
updated layouts: tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@DisclosedCode
DisclosedCode committed Nov 15, 2023
1 parent 9ee8efa commit 80afae9
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 218 deletions.
33 changes: 9 additions & 24 deletions tabs/basic/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ body {

.tab_container {
display: flex;
flex-wrap: wrap;
position: relative;
background-color: white;
column-gap: 0.5rem;
Expand All @@ -88,22 +89,14 @@ body {
margin: 0 auto;
}

.tab_container::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
background-color: #EBECF0;
}

.tab_label {
font-family: 'Poppins Medium', sans-serif;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
order: 1;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
Expand All @@ -120,13 +113,14 @@ body {
}

.tab_content {
position: absolute;
background-color: #FFF;
padding: 1rem;
width: 100%;
left: 0;
order: 2;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 2px solid #EBECF0;
margin-top: -2px;
}

.tab_container [type="radio"]:checked,
Expand All @@ -137,35 +131,26 @@ body {
pointer-events: none;
}


.tab_input:not(:checked) ~ .tab_content {
display: none;
}

.tab_input:checked ~ .tab_content {
.tab_input:checked + .tab_label + .tab_content {
display: block;
}

@media screen and (max-width: 900px) {

.tab_container {
flex-direction: column;
}

.tab_container::before{
display: none;
}

.tab_label {
justify-content: flex-start;
order: unset;
width: 100%;
border-bottom: 2px solid #EEEEEE;
}

.tab_content {
position: relative;
order: unset;
border: none;
border-radius: unset;
border-bottom: 2px solid #EEEEEE;
}

}
64 changes: 28 additions & 36 deletions tabs/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,43 +11,35 @@
<div class="main_container">
<section class="tab_container">

<label>
<input type="radio" class="tab_input" name="tab_group" checked="checked">
<a class="tab_label">
Dashboard
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Dashboard</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<label>
<input type="radio" class="tab_input" name="tab_group">
<a class="tab_label">
Account
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Account</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<label>
<input type="radio" class="tab_input" name="tab_group">
<a class="tab_label">
Settings
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Settings</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<input type="radio" id="dashboard" class="tab_input" name="tab_group" checked="checked">
<label for="dashboard" class="tab_label">Dashboard</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Dashboard</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

<input type="radio" id="account" class="tab_input" name="tab_group">
<label for="account" class="tab_label">Account</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Account</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

<input type="radio" id="settings" class="tab_input" name="tab_group">
<label for="settings" class="tab_label">Settings</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Settings</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

</section>
</div>
Expand Down
44 changes: 12 additions & 32 deletions tabs/full-width/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,25 +78,16 @@ body {

.tab_container {
display: flex;
flex-wrap: wrap;
position: relative;
background-color: white;
column-gap: 0.5rem;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-radius: 5px;

width: 70%;
margin: 0 auto;
}

.tab_container::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
background-color: #EBECF0;
}

.tab {
width: 100%;
}
Expand All @@ -106,8 +97,10 @@ body {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
position: relative;
z-index: 1;
order: 1;
padding: 0.6rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
Expand All @@ -123,21 +116,15 @@ body {
border-bottom: 2px solid #98cd04;
}

.tab_label span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.tab_content {
position: absolute;
background-color: #FFF;
padding: 1rem;
width: 100%;
left: 0;
order: 2;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 2px solid #EBECF0;
margin-top: -2px;
}

.tab_container [type="radio"]:checked,
Expand All @@ -153,29 +140,22 @@ body {
display: none;
}

.tab_input:checked ~ .tab_content {
.tab_input:checked + .tab_label + .tab_content {
display: block;
}

@media screen and (max-width: 900px) {

.tab_container {
flex-direction: column;
}

.tab_container::before {
display: none;
}

.tab_label {
justify-content: flex-start;
order: unset;
width: 100%;
border-bottom: 2px solid #EEEEEE;
}

.tab_content {position: relative;
.tab_content {
order: unset;
border: none;
border-radius: unset;
border-bottom: 2px solid #EEEEEE;
}

}
66 changes: 29 additions & 37 deletions tabs/full-width/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic</title>
<title>Full-width</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="assets/css/main.css" type="text/css" rel="stylesheet"/>
</head>
Expand All @@ -11,43 +11,35 @@
<div class="main_container">
<section class="tab_container">

<label class="tab">
<input type="radio" class="tab_input" name="tab_group" checked="checked">
<a class="tab_label">
Dashboard
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Dashboard</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<label class="tab">
<input type="radio" class="tab_input" name="tab_group">
<a class="tab_label">
Account
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Account</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<label class="tab">
<input type="radio" class="tab_input" name="tab_group">
<a class="tab_label">
Settings
</a>
<div class="tab_content">
This serves as a temporary content block for the <b>Settings</b> tab's associated information. When you select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>
</label>
<input type="radio" id="dashboard" class="tab_input" name="tab_group" checked="checked">
<label for="dashboard" class="tab_label">Dashboard</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Dashboard</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

<input type="radio" id="account" class="tab_input" name="tab_group">
<label for="account" class="tab_label">Account</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Account</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

<input type="radio" id="settings" class="tab_input" name="tab_group">
<label for="settings" class="tab_label">Settings</label>
<div class="tab_content">
This serves as a temporary content block for the <b>Settings</b> tab's associated information. When you
select
a different tab, this content will be hidden, and the new tab's content will appear, all achieved
through CSS styles without any JavaScript. The CSS rules control the visibility and styling of the
content.
</div>

</section>
</div>
Expand Down
Loading

0 comments on commit 80afae9

Please sign in to comment.