jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

accordion fix / vertical tabs fix

Browse Source
pull/776/head
razvanaldea89 6 years ago
parent ef52d29cf6
commit 6b445df90c
4 changed files with 226 additions and 216 deletions
Show Stats Download Patch File Download Diff File

10
build/css/custom.css
Unescape View File

@ -1130,20 +1130,20 @@ article.media {
font-size: 20px;
}
.accordion .panel {
.accordion .card {
margin-bottom: 5px;
border-radius: 0;
border-bottom: 1px solid #efefef;
}
.accordion .panel-heading {
/* TODO to be deleted */
/*.accordion .card-title {
background: #F2F5F7;
padding: 13px;
width: 100%;
display: block;
}
}*/
.accordion .panel:hover {
.accordion .card:hover {
background: #F2F5F7;
}

12
production/form_advanced.html
Unescape View File

@ -567,19 +567,19 @@
</div>
<div class="x_content">
<div class="row">
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>Display value</p>
<input class="knob" data-width="100" data-height="120"
data-min="-100"
data-displayPrevious=true data-fgColor="#26B99A" value="44">
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>&#215; 'cursor' mode</p>
<input class="knob" data-width="100" data-height="120"
data-cursor=true
data-fgColor="#34495E" value="29">
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>Step 0.1</p>
<input class="knob" data-width="100" data-height="120"
data-min="-10000"
@ -587,21 +587,21 @@
data-max="10000"
data-step=".1" value="0">
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>Angle arc</p>
<input class="knob" data-width="100" data-height="120"
data-angleOffset=-125
data-angleArc=250 data-fgColor="#34495E"
data-rotation="anticlockwise" value="35">
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>Alternate design</p>
<input class="knob" data-width="110" data-height="120"
data-displayPrevious=true data-fgColor="#26B99A"
data-skin="tron"
data-thickness=".2" value="75">
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-4 col-4">
<p>Angle offset</p>
<input class="knob" data-width="100" data-height="120"
data-angleOffset=90

408
production/general_elements.html
Unescape View File

@ -403,7 +403,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -500,7 +499,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -598,7 +596,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -626,22 +623,25 @@
</div>
<div class="x_content">
<div class="row">
<div class="col-md-2">
<div class="col-md-2 col-sm-2 col-3">
<!-- required for floating -->
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-left flex-column" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a>
<li class="nav-item"><a class="nav-link active" href="#home"
data-toggle="tab">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
<li class="nav-item"><a class="nav-link" href="#profile"
data-toggle="tab">Profile</a>
</li>
<li class="nav-item"><a class="nav-link" href="#messages" data-toggle="tab">Messages</a>
<li class="nav-item"><a class="nav-link" href="#messages"
data-toggle="tab">Messages</a>
</li>
<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a>
<li class="nav-item"><a class="nav-link" href="#settings"
data-toggle="tab">Settings</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="col-md-10 col-sm-10 col-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
@ -665,7 +665,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -693,7 +692,7 @@
</div>
<div class="x_content">
<div class="row">
<div class="col-md-10">
<div class="col-md-10 col-sm-10 col-9">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home-r">
@ -713,17 +712,21 @@
<div class="tab-pane" id="settings-r">Settings Tab.</div>
</div>
</div>
<div class="col-md-2">
<div class="col-md-2 col-sm-2 col-3">
<!-- required for floating -->
<!-- Nav tabs -->
<ul class="nav nav-tabs flex-column tabs-right">
<li class="nav-item"><a class="active nav-link" href="#home-r" data-toggle="tab">Home</a>
<li class="nav-item"><a class="active nav-link" href="#home-r"
data-toggle="tab">Home</a>
</li>
<li class="nav-item"><a class="nav-link" href="#profile-r" data-toggle="tab">Profile</a>
<li class="nav-item"><a class="nav-link" href="#profile-r"
data-toggle="tab">Profile</a>
</li>
<li class="nav-item"><a class="nav-link" href="#messages-r" data-toggle="tab">Messages</a>
<li class="nav-item"><a class="nav-link" href="#messages-r"
data-toggle="tab">Messages</a>
</li>
<li class="nav-item"><a class="nav-link" href="#settings-r" data-toggle="tab">Settings</a>
<li class="nav-item"><a class="nav-link" href="#settings-r"
data-toggle="tab">Settings</a>
</li>
</ul>
</div>
@ -732,7 +735,6 @@
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -763,104 +765,114 @@
<!-- start accordion -->
<div class="accordion" id="accordion" role="tablist"
aria-multiselectable="true">
<div class="panel">
<a class="panel-heading" role="tab" id="headingOne"
data-toggle="collapse"
data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<h4 class="panel-title">Collapsible Group Items #1</h4>
</a>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="card">
<div class="card-body">
<a class="panel-heading" role="tab" id="headingOne"
data-toggle="collapse"
data-parent="#accordion" href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
<h4 class="card-title">Collapsible Group Items #1</h4>
</a>
<div id="collapseOne" class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="panel">
<a class="panel-heading collapsed" role="tab" id="headingTwo"
data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title">Collapsible Group Items #2</h4>
</a>
<div id="collapseTwo" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p><strong>Collapsible Item 2 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod.
Brunch 3 wolf moon tempor,
<div class="card">
<div class="card-body">
<a class="panel-heading collapsed" role="tab" id="headingTwo"
data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
<h4 class="card-title">Collapsible Group Items #2</h4>
</a>
<div id="collapseTwo" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p><strong>Collapsible Item 2 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high
life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod.
Brunch 3 wolf moon tempor,
</div>
</div>
</div>
</div>
<div class="panel">
<a class="panel-heading collapsed" role="tab" id="headingThree"
data-toggle="collapse" data-parent="#accordion"
href="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title">Collapsible Group Items #3</h4>
</a>
<div id="collapseThree" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p><strong>Collapsible Item 3 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod.
Brunch 3 wolf moon tempor
<div class="card">
<div class="card-body">
<a class="panel-heading collapsed" role="tab" id="headingThree"
data-toggle="collapse" data-parent="#accordion"
href="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<h4 class="card-title">Collapsible Group Items #3</h4>
</a>
<div id="collapseThree" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p><strong>Collapsible Item 3 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high
life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod.
Brunch 3 wolf moon tempor
</div>
</div>
</div>
</div>
</div>
<!-- end of accordion -->
</div>
<!-- end of accordion -->
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -891,94 +903,104 @@
<!-- start accordion -->
<div class="accordion" id="accordion1" role="tablist"
aria-multiselectable="true">
<div class="panel">
<a class="panel-heading" role="tab" id="headingOne1"
data-toggle="collapse"
data-parent="#accordion1" href="#collapseOne1"
aria-expanded="true"
aria-controls="collapseOne">
<h4 class="panel-title">Collapsible Group Item #1</h4>
</a>
<div id="collapseOne1" class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<div class="card">
<div class="card-body">
<a class="card-title" role="tab" id="headingOne1"
data-toggle="collapse"
data-parent="#accordion1" href="#collapseOne1"
aria-expanded="true"
aria-controls="collapseOne">
<h4 class="card-title">Collapsible Group Item #1</h4>
</a>
<div id="collapseOne1" class="panel-collapse collapse in"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="panel">
<a class="panel-heading collapsed" role="tab" id="headingTwo1"
data-toggle="collapse" data-parent="#accordion1"
href="#collapseTwo1"
aria-expanded="false" aria-controls="collapseTwo">
<h4 class="panel-title">Collapsible Group Item #2</h4>
</a>
<div id="collapseTwo1" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p><strong>Collapsible Item 2 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod.
Brunch 3 wolf moon tempor,
<div class="card">
<div class="card-body">
<a class="card-title collapsed" role="tab" id="headingTwo1"
data-toggle="collapse" data-parent="#accordion1"
href="#collapseTwo1"
aria-expanded="false" aria-controls="collapseTwo">
<h4 class="card-title">Collapsible Group Item #2</h4>
</a>
<div id="collapseTwo1" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p><strong>Collapsible Item 2 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high
life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod.
Brunch 3 wolf moon tempor,
</div>
</div>
</div>
</div>
<div class="panel">
<a class="panel-heading collapsed" role="tab" id="headingThree1"
data-toggle="collapse" data-parent="#accordion1"
href="#collapseThree1"
aria-expanded="false" aria-controls="collapseThree">
<h4 class="panel-title">Collapsible Group Item #3</h4>
</a>
<div id="collapseThree1" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p><strong>Collapsible Item 3 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt laborum
eiusmod.
Brunch 3 wolf moon tempor
<div class="card">
<div class="card-body">
<a class="card-title collapsed" role="tab" id="headingThree1"
data-toggle="collapse" data-parent="#accordion1"
href="#collapseThree1"
aria-expanded="false" aria-controls="collapseThree">
<h4 class="card-title">Collapsible Group Item #3</h4>
</a>
<div id="collapseThree1" class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p><strong>Collapsible Item 3 data</strong>
</p>
Anim pariatur cliche reprehenderit, enim eiusmod high
life
accusamus
terry richardson ad squid. 3 wolf moon officia aute, non
cupidatat
skateboard dolor brunch. Food truck quinoa nesciunt
laborum
eiusmod.
Brunch 3 wolf moon tempor
</div>
</div>
</div>
</div>
@ -989,7 +1011,6 @@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
@ -1050,7 +1071,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1104,8 +1124,6 @@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1219,7 +1237,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1260,7 +1277,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1382,7 +1398,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1501,7 +1516,6 @@
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
@ -1691,8 +1705,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
<h2>Pop Overs
@ -1759,8 +1772,7 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
<h2><i class="fa fa-align-left"></i> Progress bar
@ -1965,7 +1977,6 @@
</div>
</div>
</div>
<!-- Start to do list -->
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
@ -2041,8 +2052,7 @@
</div>
</div>
<!-- End to do list -->
<div class="col-md-6">
<div class="col-md-6 col-sm-6 col-12">
<div class="x_panel">
<div class="x_title">
<h2>Daily active users

12
production/index2.html
Unescape View File

@ -348,7 +348,7 @@
</div>
<div class="tiles">
<div class="row">
<div class="col-md-4 tile">
<div class="col-md-4 tile col-sm-4 col-6">
<span>Total Sessions</span>
<h2>231,809</h2>
<span class="sparkline11 graph" style="height: 160px;">
@ -356,7 +356,7 @@
style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
</span>
</div>
<div class="col-md-4 tile">
<div class="col-md-4 tile col-sm-4 col-6">
<span>Total Revenue</span>
<h2>$231,809</h2>
<span class="sparkline22 graph" style="height: 160px;">
@ -364,7 +364,7 @@
style="display: inline-block; vertical-align: top; width: 94px; height: 30px;"></canvas>
</span>
</div>
<div class="col-md-4 tile">
<div class="col-md-4 tile col-sm-4 col-6">
<span>Total Sessions</span>
<h2>231,809</h2>
<span class="sparkline11 graph" style="height: 160px;">
@ -514,17 +514,17 @@
<div class="col-md-5">
<div class="row" style="text-align: center;">
<div class="col-md-4">
<div class="col-md-4 col-sm-4 col-4">
<canvas class="canvasDoughnut" height="110" width="110"
style="margin: 5px 10px 10px 0"></canvas>
<h5 style="margin:0">Bounce Rates</h5>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-4 col-4">
<canvas class="canvasDoughnut" height="110" width="110"
style="margin: 5px 10px 10px 0"></canvas>
<h5 style="margin:0">New Traffic</h5>
</div>
<div class="col-md-4">
<div class="col-md-4 col-sm-4 col-4">
<canvas class="canvasDoughnut" height="110" width="110"
style="margin: 5px 10px 10px 0"></canvas>
<h5 style="margin:0">Device Share</h5>

Write Preview
Loading…
Cancel
Save