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

*columns compatibility with bs4

pull/776/head
AndreiCN 2018-09-17 17:36:32 +03:00
parent c53fa701e4
commit 783fd9bcc1
5 changed files with 189 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
build/css/custom.css
View File

@ -1,26 +1,117 @@
.daterangepicker .ranges li {
color: #73879C; }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
background: #536A7F;
border: 1px solid #536A7F;
color: #fff; }
.daterangepicker .input-mini {
background-color: #eee;
border: 1px solid #ccc;
box-shadow: none !important; }
.daterangepicker .input-mini.active {
border: 1px solid #ccc; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
height: 30px;
border: 1px solid #ADB2B5;
line-height: 30px;
border-radius: 0px !important; }
.daterangepicker select.monthselect {
margin-right: 2%; }
.daterangepicker td.in-range {
background: #E4E7EA;
color: #73879C; }
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #536A7F;
color: #fff; }
.daterangepicker th.available:hover {
background: #eee;
color: #34495E; }
.daterangepicker:before, .daterangepicker:after {
content: none; }
.daterangepicker .calendar.single {
margin: 0 0 4px 0; }
.daterangepicker .calendar.single .calendar-table {
width: 224px;
padding: 0 0 4px 0 !important; }
.daterangepicker .calendar.single .calendar-table thead tr:first-child th {
padding: 8px 5px; }
.daterangepicker .calendar.single .calendar-table thead th {
border-radius: 0; }
.daterangepicker.picker_1 {
color: #fff;
background: #34495E; }
.daterangepicker.picker_1 .calendar-table {
background: #34495E; }
.daterangepicker.picker_1 .calendar-table thead tr {
background: #213345; }
.daterangepicker.picker_1 .calendar-table thead tr:first-child {
background: #1ABB9C; }
.daterangepicker.picker_1 .calendar-table td.off {
background: #34495E;
color: #999; }
.daterangepicker.picker_1 .calendar-table td.available:hover {
color: #34495E; }
.daterangepicker.picker_2 .calendar-table thead tr {
color: #1ABB9C; }
.daterangepicker.picker_2 .calendar-table thead tr:first-child {
color: #73879C; }
.daterangepicker.picker_3 .calendar-table thead tr:first-child {
color: #fff;
background: #1ABB9C; }
.daterangepicker.picker_4 .calendar-table thead tr:first-child {
color: #fff;
background: #34495E; }
.daterangepicker.picker_4 .calendar-table td, .daterangepicker.picker_4 .calendar-table td.off {
background: #ECF0F1;
border: 1px solid #fff;
border-radius: 0; }
.daterangepicker.picker_4 .calendar-table td.active {
background: #34495E; }
.calendar-exibit .show-calendar {
float: none;
display: block;
position: relative;
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0.15);
overflow: hidden; }
.calendar-exibit .show-calendar .calendar {
margin: 0 0 4px 0; }
.calendar-exibit .show-calendar.picker_1 {
background: #34495E; }
.calendar-exibit .calendar-table {
padding: 0 0 4px 0; }
@charset "UTF-8"; @charset "UTF-8";
.left_col { .left_col {
background: #2A3F54; } background: #2A3F54; }
.nav-sm .container.body .col-md-3.left_col { .nav-sm .container-fluid.body .col-md-3.left_col {
min-height: 100%; min-height: 100%;
width: 70px; width: 70px;
padding: 0; padding: 0;
z-index: 9999; z-index: 9999;
position: absolute; } position: absolute; }
.nav-sm .container.body .col-md-3.left_col.menu_fixed { .nav-sm .container-fluid.body .col-md-3.left_col.menu_fixed {
position: fixed; position: fixed;
height: 100%; } height: 100%; }
.nav-sm .container.body .col-md-3.left_col .mCSB_container, .nav-sm .container-fluid.body .col-md-3.left_col .mCSB_container,
.nav-sm .container.body .col-md-3.left_col .mCustomScrollBox { .nav-sm .container-fluid.body .col-md-3.left_col .mCustomScrollBox {
overflow: visible; } overflow: visible; }
.nav-sm .hidden-small { .nav-sm .hidden-small {
visibility: hidden; } visibility: hidden; }
.nav-sm .container.body .right_col { .nav-sm .container-fluid.body .right_col {
padding: 10px 20px; padding: 10px 20px;
margin-left: 70px; margin-left: 70px;
z-index: 2; } z-index: 2; }
@ -192,18 +283,16 @@
width: 230px; width: 230px;
padding: 0; padding: 0;
position: absolute; position: absolute;
display: -ms-flexbox;
display: flex;
z-index: 1; } z-index: 1; }
.nav-md .container.body .col-md-3.left_col.menu_fixed { .nav-md .container-fluid.body .col-md-3.left_col.menu_fixed {
height: 100%; height: 100%;
position: fixed; } position: fixed; }
body .container.body .right_col { body .container-fluid.body .right_col {
background: #F7F7F7; } background: #F7F7F7; }
.nav-md .container.body .right_col { .nav-md .container-fluid.body .right_col {
padding: 10px 20px 0; padding: 10px 20px 0;
margin-left: 230px; } margin-left: 230px; }
@ -215,14 +304,14 @@ body .container.body .right_col {
height: 57px; } height: 57px; }
@media (max-width: 991px) { @media (max-width: 991px) {
.nav-md .container.body .right_col, .nav-md .container.body .top_nav { .nav-md .container-fluid.body .right_col, .nav-md .container-fluid.body .top_nav {
width: 100%; width: 100%;
margin: 0; } margin: 0; }
.nav-md .container.body .col-md-3.left_col { .nav-md .container-fluid.body .col-md-3.left_col {
display: none; } display: none; }
.nav-md .container.body .right_col { .nav-md .container-fluid.body .right_col {
width: 100%; width: 100%;
padding-right: 0; } padding-right: 0; }
@ -317,7 +406,7 @@ body .container.body .right_col {
border: 1px solid #50C1CF !important; border: 1px solid #50C1CF !important;
color: #fff; } color: #fff; }
.container { .container-fluid {
width: 100%; width: 100%;
padding: 0; } padding: 0; }
@ -522,7 +611,7 @@ a:hover, a:focus {
border-left: 1px solid #425668; border-left: 1px solid #425668;
bottom: 0; bottom: 0;
content: ""; content: "";
left: 27px; left: 26px;
position: absolute; position: absolute;
top: 0; } top: 0; }
@ -3895,94 +3984,3 @@ ul.notifications {
.x_panel .dropdown-menu { .x_panel .dropdown-menu {
left: initial; left: initial;
right: 0; } } right: 0; } }
.daterangepicker .ranges li {
color: #73879C; }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
background: #536A7F;
border: 1px solid #536A7F;
color: #fff; }
.daterangepicker .input-mini {
background-color: #eee;
border: 1px solid #ccc;
box-shadow: none !important; }
.daterangepicker .input-mini.active {
border: 1px solid #ccc; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
font-size: 12px;
padding: 1px;
height: auto;
margin: 0;
cursor: default;
height: 30px;
border: 1px solid #ADB2B5;
line-height: 30px;
border-radius: 0px !important; }
.daterangepicker select.monthselect {
margin-right: 2%; }
.daterangepicker td.in-range {
background: #E4E7EA;
color: #73879C; }
.daterangepicker td.active, .daterangepicker td.active:hover {
background-color: #536A7F;
color: #fff; }
.daterangepicker th.available:hover {
background: #eee;
color: #34495E; }
.daterangepicker:before, .daterangepicker:after {
content: none; }
.daterangepicker .calendar.single {
margin: 0 0 4px 0; }
.daterangepicker .calendar.single .calendar-table {
width: 224px;
padding: 0 0 4px 0 !important; }
.daterangepicker .calendar.single .calendar-table thead tr:first-child th {
padding: 8px 5px; }
.daterangepicker .calendar.single .calendar-table thead th {
border-radius: 0; }
.daterangepicker.picker_1 {
color: #fff;
background: #34495E; }
.daterangepicker.picker_1 .calendar-table {
background: #34495E; }
.daterangepicker.picker_1 .calendar-table thead tr {
background: #213345; }
.daterangepicker.picker_1 .calendar-table thead tr:first-child {
background: #1ABB9C; }
.daterangepicker.picker_1 .calendar-table td.off {
background: #34495E;
color: #999; }
.daterangepicker.picker_1 .calendar-table td.available:hover {
color: #34495E; }
.daterangepicker.picker_2 .calendar-table thead tr {
color: #1ABB9C; }
.daterangepicker.picker_2 .calendar-table thead tr:first-child {
color: #73879C; }
.daterangepicker.picker_3 .calendar-table thead tr:first-child {
color: #fff;
background: #1ABB9C; }
.daterangepicker.picker_4 .calendar-table thead tr:first-child {
color: #fff;
background: #34495E; }
.daterangepicker.picker_4 .calendar-table td, .daterangepicker.picker_4 .calendar-table td.off {
background: #ECF0F1;
border: 1px solid #fff;
border-radius: 0; }
.daterangepicker.picker_4 .calendar-table td.active {
background: #34495E; }
.calendar-exibit .show-calendar {
float: none;
display: block;
position: relative;
background-color: #fff;
border: 1px solid #ccc;
margin-bottom: 20px;
border: 1px solid rgba(0, 0, 0, 0.15);
overflow: hidden; }
.calendar-exibit .show-calendar .calendar {
margin: 0 0 4px 0; }
.calendar-exibit .show-calendar.picker_1 {
background: #34495E; }
.calendar-exibit .calendar-table {
padding: 0 0 4px 0; }

2
build/css/custom.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
build/css/style-extra-bs4.css
View File

@ -1,7 +1,17 @@
.container.test .col.one { background:gold; } .container-fluid.test .col.one { background:gold; }
.container.test .col.two { background:red; } .container-fluid.test .col.two { background:red; }
.container.body .col-md-3 { background:orange; } .container.body .col-md-3 { }
.nav.side-menu>li { width:100%; }
.nav.side-menu>li.active>a { z-index:1; }
.input-group { text-align:right; }
.title_left { background:red; }
.title_right { background:grey; }

57
production/tester.html
View File

@ -177,6 +177,63 @@
<!-- SIDEBAR - ends --> <!-- SIDEBAR - ends -->
<!-- right col -->
<div class="right_col" role="main">
<div>
<div class="page-title">
<div class="title_left">
<h3>Plain Page</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Plain Page</h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
Add content to the page ...
</div>
</div>
</div>
</div>
</div>
</div>
<!-- right col - ends -->
<div class="row"> <div class="row">
<div class="col one">A</div> <div class="col one">A</div>

29
src/scss/custom.scss
View File

@ -2,25 +2,25 @@
.left_col { .left_col {
background: #2A3F54; background: #2A3F54;
} }
.nav-sm container-fluid.body .col-md-3.left_col { .nav-sm .container-fluid.body .col-md-3.left_col {
min-height: 100%; min-height: 100%;
width: 70px; width: 70px;
padding: 0; padding: 0;
z-index: 9999; z-index: 9999;
position: absolute; position: absolute;
} }
.nav-sm container-fluid.body .col-md-3.left_col.menu_fixed { .nav-sm .container-fluid.body .col-md-3.left_col.menu_fixed {
position: fixed; position: fixed;
height: 100%; height: 100%;
} }
.nav-sm container-fluid.body .col-md-3.left_col .mCSB_container, .nav-sm .container-fluid.body .col-md-3.left_col .mCSB_container,
.nav-sm container-fluid.body .col-md-3.left_col .mCustomScrollBox { .nav-sm .container-fluid.body .col-md-3.left_col .mCustomScrollBox {
overflow: visible; overflow: visible;
} }
.nav-sm .hidden-small { .nav-sm .hidden-small {
visibility: hidden; visibility: hidden;
} }
.nav-sm container-fluid.body .right_col { .nav-sm .container-fluid.body .right_col {
padding: 10px 20px; padding: 10px 20px;
margin-left: 70px; margin-left: 70px;
z-index: 2; z-index: 2;
@ -190,22 +190,21 @@
position: static; position: static;
} }
} }
.nav-md container-fluid-fluid.body .left_col { .nav-md .container-fluid.body .left_col {
min-height: 100%; min-height: 100%;
width: 230px; width: 230px;
padding: 0; padding: 0;
position: absolute; position: absolute;
display: flex;
z-index: 1; z-index: 1;
} }
.nav-md container-fluid.body .col-md-3.left_col.menu_fixed { .nav-md .container-fluid.body .col-md-3.left_col.menu_fixed {
height: 100%; height: 100%;
position: fixed; position: fixed;
} }
body container-fluid.body .right_col { body .container-fluid.body .right_col {
background: #F7F7F7; background: #F7F7F7;
} }
.nav-md container-fluid.body .right_col { .nav-md .container-fluid.body .right_col {
padding: 10px 20px 0; padding: 10px 20px 0;
margin-left: 230px; margin-left: 230px;
} }
@ -217,14 +216,14 @@ body container-fluid.body .right_col {
height: 57px; height: 57px;
} }
@media (max-width: 991px) { @media (max-width: 991px) {
.nav-md container-fluid.body .right_col, .nav-md container-fluid.body .top_nav { .nav-md .container-fluid.body .right_col, .nav-md .container-fluid.body .top_nav {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
.nav-md container-fluid.body .col-md-3.left_col { .nav-md .container-fluid.body .col-md-3.left_col {
display: none; display: none;
} }
.nav-md container-fluid.body .right_col { .nav-md .container-fluid.body .right_col {
width: 100%; width: 100%;
padding-right: 0 padding-right: 0
} }
@ -326,7 +325,7 @@ body container-fluid.body .right_col {
border: 1px solid #50C1CF !important; border: 1px solid #50C1CF !important;
color: #fff; color: #fff;
} }
container-fluid { .container-fluid {
width: 100%; width: 100%;
padding: 0 padding: 0
} }
@ -551,7 +550,7 @@ a:hover, a:focus {
border-left: 1px solid #425668; border-left: 1px solid #425668;
bottom: 0; bottom: 0;
content: ""; content: "";
left: 27px; left: 26px;
position: absolute; position: absolute;
top: 0; top: 0;
} }