DEV: Use border-box sizing for admin controls

Fixes floating issues in admin site settings on screen widths between
768 and 880 pixels. This also cleans up spacing on mobile.
This commit is contained in:
Penar Musaraj 2020-09-17 11:45:32 -04:00
parent 931d8725de
commit dbdb5b9a47
No known key found for this signature in database
GPG Key ID: E390435D881FF0F7
1 changed files with 7 additions and 14 deletions

View File

@ -80,7 +80,7 @@ $mobile-breakpoint: 700px;
.nav-stacked {
@media screen and (max-width: 700px) {
margin: 0 10px 0 -10px;
margin: 0 15px 0 -10px;
}
}
@ -658,7 +658,8 @@ $mobile-breakpoint: 700px;
}
.admin-nav {
width: 18.018%;
width: 18%;
box-sizing: border-box;
position: relative; // The admin-nav becomes a slide-out menu at the mobile-nav breakpoint
@media (max-width: $mobile-breakpoint) {
position: absolute;
@ -671,21 +672,14 @@ $mobile-breakpoint: 700px;
}
.admin-detail {
width: 76.5765%;
@media (max-width: $mobile-breakpoint) {
z-index: z("base");
width: 100%;
}
background-color: var(
--secondary
); // Todo: set this properly - it needs to be >= the menu height
min-height: 875px;
background-color: var(--secondary);
margin-left: 0;
border-left: solid 1px var(--primary-low);
padding: 30px 0 30px 30px;
width: 82%;
box-sizing: border-box;
@media (max-width: $mobile-breakpoint) {
padding: 30px 0;
width: 95%;
border: none;
}
}
@ -706,7 +700,6 @@ $mobile-breakpoint: 700px;
transition: transform 0.3s ease;
@include transform(translateX(0));
margin-left: -10px;
padding-left: 10px;
}
}