Cédric Krier
639f6e4aae
- Use bootstrap-rtl-ondemand css rules to modify bootstrap behavior. - Add flip class on navbar. - Switch offcanavas direction. - Replace right/left icon depending. - Flip icon image issue7388 review74291002
77 lines
1.2 KiB
Plaintext
77 lines
1.2 KiB
Plaintext
/*
|
|
* Off Canvas
|
|
* --------------------------------------------------
|
|
*/
|
|
@import "variables";
|
|
|
|
@offcanvas-md: @screen-md-max;
|
|
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.row-offcanvas {
|
|
position: relative;
|
|
-webkit-transition: all .25s ease-out;
|
|
-o-transition: all .25s ease-out;
|
|
transition: all .25s ease-out;
|
|
}
|
|
|
|
.row-offcanvas-right {
|
|
right: 0;
|
|
}
|
|
|
|
.row-offcanvas-left {
|
|
left: 0;
|
|
}
|
|
|
|
.row-offcanvas:not(.active) .main-offcanvas {
|
|
width: 100%;
|
|
}
|
|
|
|
.sidebar-offcanvas {
|
|
position: absolute !important;
|
|
top: 0;
|
|
}
|
|
|
|
.make-offcanvas(@size) {
|
|
.row-offcanvas-right
|
|
.sidebar-offcanvas {
|
|
right: -@size;
|
|
}
|
|
|
|
.row-offcanvas-left
|
|
.sidebar-offcanvas {
|
|
left: -@size;
|
|
}
|
|
|
|
.row-offcanvas-right.active {
|
|
right: @size;
|
|
}
|
|
|
|
.row-offcanvas-left.active {
|
|
left: @size;
|
|
}
|
|
|
|
.sidebar-offcanvas {
|
|
width: @size;
|
|
}
|
|
}
|
|
|
|
|
|
@media (min-width: @screen-lg-min) {
|
|
.make-offcanvas(16.6666%);
|
|
}
|
|
|
|
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
|
.make-offcanvas(25%);
|
|
}
|
|
|
|
@media (min-width: @screen-xs-min) and (max-width: @screen-sm-max) {
|
|
.make-offcanvas(50%);
|
|
}
|
|
|
|
@media (max-width: (calc(@screen-xs-min - 1))) {
|
|
.make-offcanvas(100%);
|
|
}
|