mobile fixes (edit)

This commit is contained in:
Elisabeth Dickinson 2021-03-31 15:32:10 +02:00
parent f5f1d77b0d
commit fdceee0277
3 changed files with 12 additions and 19 deletions

View File

@ -232,6 +232,7 @@ $doc_cyan: $color-alpha;
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Header // Header
$o-header-mobile-height: 50px;
$o-header-height: 90px; $o-header-height: 90px;
$o-header-white: #ffffff; $o-header-white: #ffffff;

View File

@ -560,7 +560,7 @@ $input-btn-line-height: $line-height-base !default;
$input-btn-focus-width: .25rem !default; $input-btn-focus-width: .25rem !default;
$input-btn-focus-color-opacity: .25 !default; $input-btn-focus-color-opacity: .25 !default;
$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; $input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
$input-btn-focus-box-shadow: 0 0 20px $input-btn-focus-width $input-btn-focus-color !default; $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
$input-btn-padding-y-sm: .25rem !default; $input-btn-padding-y-sm: .25rem !default;
$input-btn-padding-x-sm: .5rem !default; $input-btn-padding-x-sm: .5rem !default;

View File

@ -6,13 +6,6 @@
@import "scss/_typography"; @import "scss/_typography";
@import "scss/_iconfont"; @import "scss/_iconfont";
:root {
--o-header-height: 50px;
@include media-breakpoint-up(lg) {
--o-header-height: 90px;
}
}
div[aria-label="related navigation"] { div[aria-label="related navigation"] {
display: none; display: none;
} }
@ -42,7 +35,7 @@ body {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
header.o_main_header{ header.o_main_header{
height: var(--o-header-height); height: $o-header-mobile-height;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -50,6 +43,7 @@ header.o_main_header{
background-color: $o-header-white; background-color: $o-header-white;
z-index: 10; z-index: 10;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
height: $o-header-height;
padding-right: 3rem; padding-right: 3rem;
} }
.o_logo_wrapper { .o_logo_wrapper {
@ -118,16 +112,18 @@ header.o_main_header{
.o_side_nav { .o_side_nav {
width: $o-side-nav-width; width: $o-side-nav-width;
height: calc(100vh - var(--o-header-height)); height: calc(100vh - #{$o-header-mobile-height});
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: var(--o-header-height); top: $o-header-mobile-height;
left: -100%; left: -100%;
&.show { &.show {
left:0; left:0;
width: 100%; width: 100%;
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
height: calc(100vh - #{$o-header-height});
top: $o-header-height;
left:0; left:0;
} }
@include o-transition($duration:.3s); @include o-transition($duration:.3s);
@ -264,11 +260,11 @@ header.o_main_header{
display: block; display: block;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
top: var(--o-header-height); top: $o-header-height;
right: 0; right: 0;
width: $o-on-page-width; width: $o-on-page-width;
height: 100%; height: 100%;
max-height: calc(100vh - var(--o-header-height)); max-height: calc(100vh - #{$o-header-height});
padding: 3rem 3rem 3rem 0; padding: 3rem 3rem 3rem 0;
overflow-y: auto; overflow-y: auto;
} }
@ -299,11 +295,12 @@ header.o_main_header{
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
#wrap { #wrap {
margin-top: var(--o-header-height); margin-top: $o-header-mobile-height;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: $o-header-height;
} }
code { code {
@ -532,11 +529,6 @@ header.o_main_header{
} }
} }
/* dt {
&:before {
@include scroll-padding()
}
} */
// Search items highlighted // Search items highlighted
dt:target, span.highlighted { dt:target, span.highlighted {
background-color: lighten($warning, 15%); background-color: lighten($warning, 15%);