mobile fixes (edit)
This commit is contained in:
parent
f5f1d77b0d
commit
fdceee0277
@ -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;
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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%);
|
||||||
|
Loading…
Reference in New Issue
Block a user