MDL-73092 theme_boost: increase right drawer width

This commit is contained in:
Bas Brands 2021-11-17 15:43:16 +01:00
parent eab63d2cfe
commit 79975c9a7f
4 changed files with 51 additions and 44 deletions

View File

@ -2,6 +2,8 @@
$fixed-header-y: $navbar-height;
$drawer-width: 285px !default;
$drawer-left-width: 285px !default;
$drawer-right-width: 315px !default;
$drawer-padding-x: 20px !default;
$drawer-padding-y: 20px !default;
$drawer-offscreen-gutter: 20px !default;
@ -90,20 +92,20 @@ body.drawer-ease {
body:not(.uses-drawers).drawer-open-left {
@include media-breakpoint-up(md) {
margin-left: $drawer-width;
margin-left: $drawer-left-width;
}
}
body.drawer-open-left #page.drawers {
@include media-breakpoint-up(md) {
margin-left: $drawer-width;
margin-left: $drawer-left-width;
padding-left: 1rem;
}
}
body.drawer-open-right {
@include media-breakpoint-up(md) {
margin-right: $drawer-width;
margin-right: $drawer-right-width;
}
}
@ -169,22 +171,21 @@ $right-drawer-width: 320px;
}
@mixin drawertypes() {
&.drawer-left,
&.drawer-right {
width: $drawer-width;
max-width: $drawer-width;
}
&.drawer-right {
width: $drawer-right-width;
max-width: $drawer-right-width;
border-left: $border-width solid $border-color;
right: calc(-#{$drawer-width} + -10px);
right: calc(-#{$drawer-right-width} + -10px);
@include box-shadow($box-shadow-drawer-right);
&.show {
right: 0;
}
}
&.drawer-left {
width: $drawer-left-width;
max-width: $drawer-left-width;
border-right: $border-width solid $border-color;
left: calc(-#{$drawer-width} + -10px);
left: calc(-#{$drawer-left-width} + -10px);
@include box-shadow($box-shadow-drawer-left);
&.show {
left: 0;

View File

@ -144,18 +144,18 @@
left: 0;
right: 0;
&.show-drawer-left {
margin-left: $drawer-width;
margin-left: $drawer-left-width;
margin-right: 0;
padding-left: 1rem;
}
&.show-drawer-right {
margin-left: 0;
margin-right: $drawer-width;
margin-right: $drawer-right-width;
padding-right: 1rem;
}
&.show-drawer-left.show-drawer-right {
margin-left: $drawer-width;
margin-right: $drawer-width;
margin-left: $drawer-left-width;
margin-right: $drawer-right-width;
}
}
}

View File

@ -14667,7 +14667,7 @@ body.drawer-ease {
@media (min-width: 768px) {
body.drawer-open-right {
margin-right: 285px; } }
margin-right: 315px; } }
[data-region=right-hand-drawer] {
display: flex;
@ -14716,15 +14716,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer.drawer-left, .drawer.drawer-right {
width: 285px;
max-width: 285px; }
.drawer.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer.drawer-right.show {
right: 0; }
.drawer.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer.drawer-left.show {
@ -14751,15 +14752,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer-md.drawer-left, .drawer-md.drawer-right {
width: 285px;
max-width: 285px; }
.drawer-md.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer-md.drawer-right.show {
right: 0; }
.drawer-md.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer-md.drawer-left.show {
@ -14778,15 +14780,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer-sm.drawer-left, .drawer-sm.drawer-right {
width: 285px;
max-width: 285px; }
.drawer-sm.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer-sm.drawer-right.show {
right: 0; }
.drawer-sm.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer-sm.drawer-left.show {
@ -20076,11 +20079,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
padding-left: 1rem; }
#page.drawers.show-drawer-right {
margin-left: 0;
margin-right: 285px;
margin-right: 315px;
padding-right: 1rem; }
#page.drawers.show-drawer-left.show-drawer-right {
margin-left: 285px;
margin-right: 285px; } }
margin-right: 315px; } }
.drawercontrolbuttons {
margin-top: 92px; }

View File

@ -14667,7 +14667,7 @@ body.drawer-ease {
@media (min-width: 768px) {
body.drawer-open-right {
margin-right: 285px; } }
margin-right: 315px; } }
[data-region=right-hand-drawer] {
display: flex;
@ -14716,15 +14716,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer.drawer-left, .drawer.drawer-right {
width: 285px;
max-width: 285px; }
.drawer.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer.drawer-right.show {
right: 0; }
.drawer.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer.drawer-left.show {
@ -14751,15 +14752,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer-md.drawer-left, .drawer-md.drawer-right {
width: 285px;
max-width: 285px; }
.drawer-md.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer-md.drawer-right.show {
right: 0; }
.drawer-md.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer-md.drawer-left.show {
@ -14778,15 +14780,16 @@ body.drawer-ease {
position: fixed;
height: 100vh;
top: 0; }
.drawer-sm.drawer-left, .drawer-sm.drawer-right {
width: 285px;
max-width: 285px; }
.drawer-sm.drawer-right {
width: 315px;
max-width: 315px;
border-left: 1px solid #dee2e6;
right: calc(-285px + -10px); }
right: calc(-315px + -10px); }
.drawer-sm.drawer-right.show {
right: 0; }
.drawer-sm.drawer-left {
width: 285px;
max-width: 285px;
border-right: 1px solid #dee2e6;
left: calc(-285px + -10px); }
.drawer-sm.drawer-left.show {
@ -20022,11 +20025,11 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
padding-left: 1rem; }
#page.drawers.show-drawer-right {
margin-left: 0;
margin-right: 285px;
margin-right: 315px;
padding-right: 1rem; }
#page.drawers.show-drawer-left.show-drawer-right {
margin-left: 285px;
margin-right: 285px; } }
margin-right: 315px; } }
.drawercontrolbuttons {
margin-top: 92px; }