mirror of
https://github.com/stisla/stisla.git
synced 2025-08-30 03:20:23 +02:00
Merge pull request #167 from Harshal96/make_tabs_beautiful
tab beautified attempt 1
This commit is contained in:
Nauval
GitHub
@@ -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; }
|
||||
|
||||
@@ -566,6 +566,84 @@
|
||||
</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>
|
||||
@@ -581,7 +659,7 @@
|
||||
</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>
|
||||
|
||||
@@ -170,6 +170,84 @@
|
||||
</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 %}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user