Left menu is responsive

This commit is contained in:
gaelle morin 2020-01-19 10:48:22 +01:00
parent 90a92cc832
commit 56953601e1
No known key found for this signature in database
GPG Key ID: BC97AADCB48B7F27
4 changed files with 87 additions and 1 deletions

View File

@ -24,6 +24,9 @@ details#user-controls
#user-controls__panel #user-controls__panel
include page-user-panel.pug include page-user-panel.pug
.mobile-menu-icon
button.icon-menu
button(role='log in' onclick="document.querySelector('sib-auth').login();") Login button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
sib-auth sib-auth

View File

@ -1,4 +1,58 @@
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) { @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow; box-shadow: 0 0 8px 0 $shadow;
background-color: $background; background-color: $background;
} }
@mixin breakpoint($min: 0, $max: 0) {
$type: type-of($min);
@if $type==string {
@if $min==xs {
@media (max-width: 768px) {
@content;
}
}
@else if $min==sm {
@media (max-width: 1024px) {
@content;
}
}
@else if $min==md {
@media (max-width: 1200px) {
@content;
}
}
@else if $min==lg {
@media (min-width: 1201px) {
@content;
}
}
@else {
@warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
}
}
@else if $type==number {
$query: "all" !default;
@if $min !=0 and $max !=0 {
$query: "(min-width: #{$min}) and (max-width: #{$max})";
}
@else if $min !=0 and $max==0 {
$query: "(min-width: #{$min})";
}
@else if $min==0 and $max !=0 {
$query: "(max-width: #{$max});"
}
@media #{$query} {
@content;
}
}
}

View File

@ -168,6 +168,10 @@
&::before { &::before {
margin-left: 1.5rem; margin-left: 1.5rem;
} }
@include breakpoint(sm) {
display: none;
}
} }
} }
} }
@ -236,5 +240,13 @@
} }
} }
} }
.mobile-menu-icon {
display: none;
@include breakpoint(sm) {
display: block;
}
}
} }

View File

@ -188,4 +188,21 @@
background-color: $color-213-13-86; background-color: $color-213-13-86;
} }
} }
&.mobile-opened {
@include breakpoint(sm) {
bottom: 0;
min-width: 80%;
position: fixed;
right: 0;
top: 0;
z-index: 1;
}
}
&.mobile-closed {
@include breakpoint(sm) {
display: none;
}
}
} }