diff --git a/_sass/minimal-mistakes/_masthead.scss b/_sass/minimal-mistakes/_masthead.scss index 4c5eb1530cf6..2dfefccef656 100644 --- a/_sass/minimal-mistakes/_masthead.scss +++ b/_sass/minimal-mistakes/_masthead.scss @@ -50,7 +50,7 @@ -ms-flex-item-align: center; align-self: center; font-weight: bold; - z-index: 20; + // z-index: 20; } .site-subtitle { diff --git a/_sass/minimal-mistakes/_sidebar.scss b/_sass/minimal-mistakes/_sidebar.scss index f7fc72dc4963..43fd98e83dbc 100644 --- a/_sass/minimal-mistakes/_sidebar.scss +++ b/_sass/minimal-mistakes/_sidebar.scss @@ -8,13 +8,13 @@ .sidebar { @include clearfix(); - @include breakpoint(max-width $large) { - /* fix z-index order of follow links */ - position: relative; - z-index: 10; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } + // @include breakpoint(max-width $large) { + // /* fix z-index order of follow links */ + // position: relative; + // z-index: 10; + // -webkit-transform: translate3d(0, 0, 0); + // transform: translate3d(0, 0, 0); + // } @include breakpoint($large) { float: left; @@ -63,7 +63,7 @@ img { width: 100%; - + &.emoji { width: 20px; height: 20px; @@ -199,8 +199,27 @@ } button { + position: relative; margin-bottom: 0; + &:before { + @supports (pointer-events: none) { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + } + } + + &.open { + &:before { + pointer-events: auto; + } + } + @include breakpoint($large) { display: none; } @@ -269,6 +288,11 @@ } } + ul { + padding: 10px; + list-style-type: none; + } + li { white-space: nowrap; } diff --git a/_sass/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/_utilities.scss index ec602a91c42f..1c127d3664f5 100644 --- a/_sass/minimal-mistakes/_utilities.scss +++ b/_sass/minimal-mistakes/_utilities.scss @@ -385,6 +385,33 @@ body:hover .visually-hidden button { } } +.greedy-nav__toggle { + &:before { + @supports (pointer-events: none) { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + background-color: $background-color; + -webkit-transition: $global-transition; + transition: $global-transition; + pointer-events: none; + } + } + + &.close { + &:before { + opacity: 0.9; + -webkit-transition: $global-transition; + transition: $global-transition; + pointer-events: auto; + } + } +} + .greedy-nav__toggle:hover { .navicon, .navicon:before,