mirror of
https://github.com/wagtail/wagtail.git
synced 2024-11-29 17:36:49 +01:00
db5f4106db
Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com> - Animations – The close animation for sub-menus doesn't seem to play when the menu is expanded - Made it so sub menu's stay open when the menu is expanded and collapsed - Animations – The account menu seems to have a different tween animation to the rest of the menu. Causing it to do a weird thing when you collapse the menu while the account menu is open - Animations – The avatar suddenly jumps to the right when you collapse the menu - Animations – The Bird seems to have two hover states (try slowly moving your mouse cursor from top to bottom and you'll see it's wing appears before the hover animation is triggered). Not sure if this is intended behaviour. - Accessibility – Focus order is incorrect on the mobile version (it should be possible to move to the sidebar after having toggled it) - Try and fit more letters in to the sidebar menu items by reduce the padding / margin on the right side of the arrow, and reduce the gap between the icon and the text a tiny bit - Make it so when you have a menu open (e.g. Bakery misc) and you click the slim sidebar icon, the menu stays open as the menu gets slim. - Add a label to the sidebar’s `<aside>`
107 lines
1.6 KiB
SCSS
107 lines
1.6 KiB
SCSS
.wrapper {
|
|
@include clearfix();
|
|
@apply w-transition-sidebar;
|
|
height: 100vh;
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
transform: none;
|
|
padding-inline-start: $menu-width;
|
|
|
|
.sidebar-collapsed & {
|
|
padding-inline-start: $menu-width-slim;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-wrapper {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
|
|
float: left;
|
|
position: relative;
|
|
background-color: $color-grey-4;
|
|
border-bottom: 1px solid $color-grey-3;
|
|
}
|
|
|
|
.content {
|
|
@include row();
|
|
background: $color-white;
|
|
border-top: 0 solid $color-grey-5; // this top border provides space for the floating logo to toggle the menu
|
|
min-height: 100%;
|
|
position: relative; // yuk. necessary for positions for jquery ui widgets
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
padding-bottom: 4em;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.content {
|
|
border-top: 0;
|
|
background-color: none;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.row {
|
|
@include clearfix();
|
|
}
|
|
|
|
@include media-breakpoint-up(sm) {
|
|
.col1 {
|
|
@include column(1);
|
|
}
|
|
|
|
.col2 {
|
|
@include column(2);
|
|
}
|
|
|
|
.col3 {
|
|
@include column(3);
|
|
}
|
|
|
|
.col4 {
|
|
@include column(4);
|
|
}
|
|
|
|
.col5 {
|
|
@include column(5);
|
|
}
|
|
|
|
.col6 {
|
|
@include column(6);
|
|
}
|
|
|
|
.col7 {
|
|
@include column(7);
|
|
}
|
|
|
|
.col8 {
|
|
@include column(8);
|
|
}
|
|
|
|
.col9 {
|
|
@include column(9);
|
|
}
|
|
|
|
.col10 {
|
|
@include column(10);
|
|
}
|
|
|
|
.col11 {
|
|
@include column(11);
|
|
}
|
|
|
|
.col12 {
|
|
@include column(12);
|
|
}
|
|
|
|
.row {
|
|
@include row();
|
|
}
|
|
|
|
.row-flush {
|
|
@include row-flush();
|
|
}
|
|
}
|