Skip to content

Commit

Permalink
Merge pull request stisla#167 from Harshal96/make_tabs_beautiful
Browse files Browse the repository at this point in the history 
tab beautified attempt 1
  • Loading branch information
@nauvalazhar
nauvalazhar authored Jul 17, 2020
2 parents 132cc7c + 2ae5117 commit 085c421
Show file tree
Hide file tree
Showing 4 changed files with 197 additions and 2 deletions.
12 changes: 12 additions & 0 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1913,6 +1913,18 @@ a.dropdown-item {
.tab-content > .tab-pane {
line-height: 28px; }

ul.nav-tabs li.nav-item a.nav-link i {
color: #6777ef; }

ul.nav-tabs li.nav-item a.nav-link span {
display: block;
line-height: 60%; }
ul.nav-tabs li.nav-item a.nav-link span i {
font-size: 16px !important; }

ul.nav-tabs li.nav-item a.nav-link.active i {
color: #191d21; }

/* 3.21 Progress Bar */
.progress-bar {
background-color: #6777ef; }
Expand Down
80 changes: 79 additions & 1 deletion pages/components-tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,84 @@ <h4>2 Column</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon Tab</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab5" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab5" data-toggle="tab" href="#home5" role="tab" aria-controls="home" aria-selected="true">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab5" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile" aria-selected="false">
<i class="fas fa-id-card"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab5" data-toggle="tab" href="#contact5" role="tab" aria-controls="contact" aria-selected="false">
<i class="fas fa-mail-bulk"></i> Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent5">
<div class="tab-pane fade show active" id="home5" role="tabpanel" aria-labelledby="home-tab5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab5">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
</div>
<div class="tab-pane fade" id="contact5" role="tabpanel" aria-labelledby="contact-tab5">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon Tab Bordered + Centered <code>.justify-content-center</code></h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs justify-content-center" id="myTab6" role="tablist">
<li class="nav-item">
<a class="nav-link active text-center" id="home-tab6" data-toggle="tab" href="#home6" role="tab" aria-controls="home" aria-selected="true">
<span><i class="fas fa-home"></i></span> Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-center" id="profile-tab6" data-toggle="tab" href="#profile6" role="tab" aria-controls="profile" aria-selected="false">
<span><i class="fas fa-id-card"></i></span> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link text-center" id="contact-tab6" data-toggle="tab" href="#contact6" role="tab" aria-controls="contact" aria-selected="false">
<span><i class="fas fa-mail-bulk"></i></span> Contact</a>
</li>
</ul>
<div class="tab-content tab-bordered" id="myTabContent6">
<div class="tab-pane fade show active" id="home6" role="tabpanel" aria-labelledby="home-tab6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
<div class="tab-pane fade" id="profile6" role="tabpanel" aria-labelledby="profile-tab6">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
</div>
<div class="tab-pane fade" id="contact6" role="tabpanel" aria-labelledby="contact-tab6">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Expand All @@ -581,7 +659,7 @@ <h4>2 Column</h4>
</div>

<!-- General JS Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
Expand Down
78 changes: 78 additions & 0 deletions sources/pages/components-tab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,84 @@ <h4>2 Column</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon Tab</h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs" id="myTab5" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab5" data-toggle="tab" href="#home5" role="tab" aria-controls="home" aria-selected="true">
<i class="fas fa-home"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab5" data-toggle="tab" href="#profile5" role="tab" aria-controls="profile" aria-selected="false">
<i class="fas fa-id-card"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab5" data-toggle="tab" href="#contact5" role="tab" aria-controls="contact" aria-selected="false">
<i class="fas fa-mail-bulk"></i> Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent5">
<div class="tab-pane fade show active" id="home5" role="tabpanel" aria-labelledby="home-tab5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
<div class="tab-pane fade" id="profile5" role="tabpanel" aria-labelledby="profile-tab5">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
</div>
<div class="tab-pane fade" id="contact5" role="tabpanel" aria-labelledby="contact-tab5">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-6">
<div class="card">
<div class="card-header">
<h4>Icon Tab Bordered + Centered <code>.justify-content-center</code></h4>
</div>
<div class="card-body">
<ul class="nav nav-tabs justify-content-center" id="myTab6" role="tablist">
<li class="nav-item">
<a class="nav-link active text-center" id="home-tab6" data-toggle="tab" href="#home6" role="tab" aria-controls="home" aria-selected="true">
<span><i class="fas fa-home"></i></span> Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-center" id="profile-tab6" data-toggle="tab" href="#profile6" role="tab" aria-controls="profile" aria-selected="false">
<span><i class="fas fa-id-card"></i></span> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link text-center" id="contact-tab6" data-toggle="tab" href="#contact6" role="tab" aria-controls="contact" aria-selected="false">
<span><i class="fas fa-mail-bulk"></i></span> Contact</a>
</li>
</ul>
<div class="tab-content tab-bordered" id="myTabContent6">
<div class="tab-pane fade show active" id="home6" role="tabpanel" aria-labelledby="home-tab6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
<div class="tab-pane fade" id="profile6" role="tabpanel" aria-labelledby="profile-tab6">
Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
</div>
<div class="tab-pane fade" id="contact6" role="tabpanel" aria-labelledby="contact-tab6">
Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
29 changes: 28 additions & 1 deletion sources/scss/override/_tab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,31 @@
> .tab-pane {
line-height: 28px;
}
}
}

ul.nav-tabs {
li.nav-item {
a.nav-link {
i {
color: color(primary);
}
span {
display: block;
line-height: 60%;
i {
font-size: 16px!important;
}
}
}
}
}

ul.nav-tabs {
li.nav-item {
a.nav-link.active {
i {
color: color(dark);
}
}
}
}

0 comments on commit 085c421

Please sign in to comment.