Skip to content

Commit

Permalink
Update style of sidebar bootstrap to Bootstrap 5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoispluchino
francoispluchino committed Feb 17, 2021
1 parent e7a4195 commit d762015
Show file tree
Hide file tree
Showing 17 changed files with 315 additions and 245 deletions.
96 changes: 74 additions & 22 deletions dist/sidebar-bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,40 +23,40 @@
}
@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top, .fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-bottom {
z-index: 1001;
z-index: 0;
}
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top + .fxp-sidebar-swipe, .fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-bottom + .fxp-sidebar-swipe {
z-index: 1000;
z-index: -1;
}
}
@media (min-width: 992px) and (max-width: 991px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top.fxp-sidebar-open ~ .fxp-sidebar-obfuscator, .fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-bottom.fxp-sidebar-open ~ .fxp-sidebar-obfuscator {
z-index: 1000;
z-index: -1;
}
}
@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top > .sticky-header {
padding-top: 51px !important;
padding-top: 57px !important;
}
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top .fxp-sidebar-menu > .fxp-sidebar-group:first-child,
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-top .fxp-sidebar-menu > .fxp-sidebar-item:first-child {
padding-top: 51px;
padding-top: 57px;
}
}
@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-bottom .fxp-sidebar-menu > .fxp-sidebar-group:last-child,
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-static-bottom .fxp-sidebar-menu > .fxp-sidebar-item:last-child {
padding-bottom: 50px;
padding-bottom: 56px;
}
}
@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-fixed-top {
top: 50px;
top: 56px;
}
}
@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked:not(.fxp-sidebar-full-locked).fxp-sidebar-fixed-bottom {
bottom: 50px;
bottom: 56px;
}
}
@media (min-width: 992px) {
Expand All @@ -68,65 +68,103 @@
.container-main.container-force-open-left {
padding-left: 210px;
}
.container-main.container-force-open-left > .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
margin-left: -210px;
}
}
@media (min-width: 992px) {
.container-main.container-force-open-right {
padding-right: 210px;
}
.container-main.container-force-open-right > .navbar:not(.fixed-top):not(.fixed-bottom):not(.sticky-top) {
margin-right: -210px;
}
}
@media (min-width: 992px) {
.container-main.container-force-open-left > .container,
.container-main.container-force-open-left > .navbar > .container, .container-main.container-force-open-right > .container,
.container-main.container-force-open-right > .navbar > .container {
width: 760px;
width: 750px;
}
}
@media (min-width: 1200px) {
.container-main.container-force-open-left > .container,
.container-main.container-force-open-left > .navbar > .container, .container-main.container-force-open-right > .container,
.container-main.container-force-open-right > .navbar > .container {
width: 960px;
width: 750px;
}
}
@media (min-width: 1410px) {
.container-main.container-force-open-left > .container,
.container-main.container-force-open-left > .navbar > .container, .container-main.container-force-open-right > .container,
.container-main.container-force-open-right > .navbar > .container {
width: 1170px;
width: 960px;
}
}
@media (min-width: 1400px) {
.container-main.container-force-open-left > .container,
.container-main.container-force-open-left > .navbar > .container, .container-main.container-force-open-right > .container,
.container-main.container-force-open-right > .navbar > .container {
width: 930px;
}
}
@media (min-width: 1610px) {
.container-main.container-force-open-left > .container,
.container-main.container-force-open-left > .navbar > .container, .container-main.container-force-open-right > .container,
.container-main.container-force-open-right > .navbar > .container {
width: 1140px;
}
}
@media (min-width: 992px) {
.container-main.container-full-locked.container-force-open-left > .navbar > .container-fluid {
padding-left: 210px;
padding-left: calc(210px + 0.75rem);
}
}
@media (min-width: 992px) {
.container-main.container-full-locked.container-force-open-right > .navbar > .container-fluid {
padding-right: 210px;
padding-right: calc(210px + 0.75rem);
}
}
@media (min-width: 992px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 550px;
width: 540px;
}
}
@media (min-width: 1200px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 750px;
width: 540px;
}
}
@media (min-width: 1410px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 960px;
width: 750px;
}
}
@media (min-width: 1620px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 1170px;
width: 960px;
}
}
@media (min-width: 1400px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 720px;
}
}
@media (min-width: 1610px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 930px;
}
}
@media (min-width: 1820px) {
.container-main.container-force-open-left.container-force-open-right > .container,
.container-main.container-force-open-left.container-force-open-right > .navbar > .container {
width: 1140px;
}
}
@media (min-width: 992px) {
Expand All @@ -136,7 +174,7 @@
}
@media (min-width: 992px) {
.container-main.container-mini-left > .navbar > .container-fluid {
padding-left: 70px;
padding-left: calc(70px + 0.75rem);
}
}
@media (min-width: 992px) {
Expand All @@ -146,27 +184,41 @@
}
@media (min-width: 992px) {
.container-main.container-mini-right > .navbar > .container-fluid {
padding-right: 70px;
padding-right: calc(70px + 0.75rem);
}
}
@media (min-width: 992px) {
.container-main.container-mini-left > .container,
.container-main.container-mini-left > .navbar > .container, .container-main.container-mini-right > .container,
.container-main.container-mini-right > .navbar > .container {
width: 900px;
width: 890px;
}
}
@media (min-width: 1200px) {
.container-main.container-mini-left > .container,
.container-main.container-mini-left > .navbar > .container, .container-main.container-mini-right > .container,
.container-main.container-mini-right > .navbar > .container {
width: 1100px;
width: 890px;
}
}
@media (min-width: 1270px) {
.container-main.container-mini-left > .container,
.container-main.container-mini-left > .navbar > .container, .container-main.container-mini-right > .container,
.container-main.container-mini-right > .navbar > .container {
width: 1170px;
width: 960px;
}
}
@media (min-width: 1400px) {
.container-main.container-mini-left > .container,
.container-main.container-mini-left > .navbar > .container, .container-main.container-mini-right > .container,
.container-main.container-mini-right > .navbar > .container {
width: 1070px;
}
}
@media (min-width: 1470px) {
.container-main.container-mini-left > .container,
.container-main.container-mini-left > .navbar > .container, .container-main.container-mini-right > .container,
.container-main.container-mini-right > .navbar > .container {
width: 1140px;
}
}
39 changes: 18 additions & 21 deletions dist/sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
height: 100%;
list-style: none;
text-align: left;
font-size: 14px;
font-size: 1rem;
direction: ltr;
}
.fxp-sidebar .fxp-sidebar-menu ul {
Expand Down Expand Up @@ -73,8 +73,7 @@
padding-bottom: 12px;
}
.fxp-sidebar .fxp-sidebar-group > span {
font-family: inherit;
font-size: 24px;
font-size: 1.75rem;
border-top: 1px solid transparent;
}
.fxp-sidebar .fxp-sidebar-group > span.no-bar {
Expand Down Expand Up @@ -289,46 +288,45 @@
}

.fxp-sidebar.fxp-sidebar-default {
color: #222222;
color: #212529;
background-color: #fff;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-group > span {
color: #dbdbdb;
border-top-color: #eeeeee;
border-top-color: #e9ecef;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-group.sticky-header > span {
background-color: #fff;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-group + .fxp-sidebar-item {
border-top-color: #eeeeee;
border-top-color: #e9ecef;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-divider-item {
border-top-color: #eeeeee;
border-top-color: #e9ecef;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item > a {
color: #222222;
color: #212529;
background-color: transprent;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item > a:hover, .fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item > a:focus {
color: #333;
background-color: #eeeeee;
background-color: #e9ecef;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item > a.active {
color: #337ab7;
color: #0d6efd;
background-color: transprent;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item.fxp-sidebar-item-mini > a {
color: #464646;
color: #414951;
}
.fxp-sidebar.fxp-sidebar-default .fxp-sidebar-item.fxp-sidebar-item-mini > a.active {
color: #337ab7;
color: #0d6efd;
background-color: transprent;
}
.fxp-sidebar.fxp-sidebar-default .hammer-scrollbar {
background-color: #555;
}
.fxp-sidebar.fxp-sidebar-inverse {
color: #9d9d9d;
color: rgba(255, 255, 255, 0.55);
background-color: #2a3542;
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-group > span {
Expand All @@ -345,29 +343,28 @@
border-top-color: #344252;
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item > a {
color: #9d9d9d;
color: rgba(255, 255, 255, 0.55);
background-color: #2a3542;
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item > a:hover, .fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item > a:focus {
color: #fff;
background-color: #344252;
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item > a.active {
color: #dfecf6;
color: #f6f9ff;
background-color: #2a3542;
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item.fxp-sidebar-item-mini > a {
color: #c1c1c1;
color: rgba(255, 255, 255, 0.55);
}
.fxp-sidebar.fxp-sidebar-inverse .fxp-sidebar-item.fxp-sidebar-item-mini > a.active {
color: #dfecf6;
color: #f6f9ff;
background-color: #2a3542;
}
.fxp-sidebar.fxp-sidebar-inverse .hammer-scrollbar {
background-color: #e4e8ee;
}
.fxp-sidebar[data-clickable-swipe=true] + .fxp-sidebar-swipe.mouse-hover {
background-color: fade(#337ab7, 23%);
background-color: fade(#0d6efd, 23%);
}

.fxp-sidebar-obfuscator.show {
Expand All @@ -376,7 +373,7 @@

@media (min-width: 992px) {
.fxp-sidebar.fxp-sidebar-locked.fxp-sidebar-default {
border-color: #eeeeee;
border-color: #e9ecef;
}
.fxp-sidebar.fxp-sidebar-locked.fxp-sidebar-inverse {
border-color: #344252;
Expand Down
20 changes: 10 additions & 10 deletions examples/basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,17 +79,17 @@

<div class="container-main">
<!-- NAVBAR -->
<nav class="navbar navbar-default">
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="btn btn-default navbar-toggle fxp-sidebar-btn-toggle-left" id="sidebar-toggle-left">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="btn btn-default navbar-toggle fxp-sidebar-btn-toggle-right" id="sidebar-toggle-right">
<span class="glyphicon glyphicon-option-vertical"></span>
</button>
</div>
<button type="button" class="navbar-toggler fxp-sidebar-btn-toggle-left fxp-sidebar-locked-toggle" id="sidebar-toggle-left">
<i class="fa fa-bars"></i>
</button>

<a class="navbar-brand ms-4 flex-grow-1" href="#">Brand</a>

<button type="button" class="btn btn-default fxp-sidebar-btn-toggle-right" id="sidebar-toggle-right">
<span class="fa fa-ellipsis-v"></span>
</button>
</div>
</nav>

Expand Down
2 changes: 1 addition & 1 deletion examples/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/scss/font-awesome.scss';
import '@fortawesome/fontawesome-free/css/all.css';
import '@fxp/jquery-scroller/scss/scroller.scss';
import '../scss/sidebar.scss';
import '../scss/sidebar-bootstrap.scss';
Expand Down
Loading

0 comments on commit d762015

Please sign in to comment.