Skip to content
Snippets Groups Projects
Commit 962f69af authored by Sascha Eggenberger's avatar Sascha Eggenberger
Browse files

Fix sticky positoned elements on mobile

parent 4cadcb5d
No related branches found
Tags 7.x-3.2
No related merge requests found
......@@ -160,6 +160,9 @@ button.link:active,
z-index: 101;
padding: 0;
width: 100%;
display: flex;
align-items: center;
min-height: var(--gin-height-sticky);
background: var(--gin-bg-app);
box-sizing: border-box;
transition: var(--gin-transition);
......@@ -177,60 +180,57 @@ button.link:active,
}
}
@media (min-width: 64em) {
.region-sticky {
top: -1px;
width: 100%;
height: var(--gin-height-sticky);
padding: var(--gin-spacing-s) 0;
}
.region-sticky-watcher {
position: sticky;
top: -1px;
height: 0;
}
.region-sticky-watcher {
position: sticky;
top: -1px;
height: 0;
}
.region-sticky--is-sticky {
opacity: .95;
background: var(--gin-bg-app);
}
@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
.region-sticky--is-sticky {
opacity: .95;
background: var(--gin-bg-app);
opacity: .999;
background: rgba(var(--gin-bg-app-rgb), .8);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
@supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
.region-sticky--is-sticky {
opacity: .999;
background: rgba(var(--gin-bg-app-rgb), .8);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
.gin--high-contrast-mode .region-sticky--is-sticky {
background: var(--gin-bg-app);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.gin--high-contrast-mode .region-sticky--is-sticky {
background: var(--gin-bg-app);
-webkit-backdrop-filter: none;
backdrop-filter: none;
.gin--classic-toolbar:not(.gin--edit-form) .region-sticky {
position: static;
}
@media (min-width: 64em) {
.region-sticky {
top: -1px;
padding: var(--gin-spacing-s) 0;
height: var(--gin-height-sticky);
margin-bottom: 0;
}
.gin--vertical-toolbar .region-sticky, .gin--horizontal-toolbar .region-sticky, .gin--classic-toolbar .region-sticky {
top: var(--gin-toolbar-y-offset);
}
.gin--classic-toolbar:not(.gin--edit-form) .region-sticky {
position: static;
}
}
.region-sticky__items {
display: flex;
align-items: center;
margin-bottom: var(--gin-spacing-m);
width: 100%;
height: 100%;
}
@media (min-width: 48em) {
.region-sticky__items {
height: 100%;
}
.region-sticky__items .settings-tray-editable {
flex-shrink: 0;
}
......@@ -516,12 +516,6 @@ body:not(.toolbar-tray-open) .layout-container {
margin-top: 0;
}
@media (max-width: 60.99em) {
.gin--edit-form .region-sticky--is-sticky .block-page-title-block {
visibility: hidden;
}
}
.block-page-title-block:last-child {
margin-bottom: 0;
}
......
......@@ -29,10 +29,20 @@
}
.toolbar .toolbar-bar {
position: fixed;
width: 100%;
background: #100f10;
box-shadow: none;
}
[dir="ltr"] .toolbar .toolbar-bar {
left: 0;
}
[dir="rtl"] .toolbar .toolbar-bar {
right: 0;
}
.toolbar .toolbar-menu,
.toolbar-horizontal .menu-item > .toolbar-menu,
.toolbar-horizontal .toolbar-tray .menu-item--expanded.menu-item--expanded,
......
......@@ -22,10 +22,20 @@
}
.toolbar .toolbar-bar {
position: fixed;
width: 100%;
background: #100f10;
box-shadow: none;
}
[dir="ltr"] .toolbar .toolbar-bar {
left: 0;
}
[dir="rtl"] .toolbar .toolbar-bar {
right: 0;
}
@media (min-width: 61em) {
.toolbar .toolbar-bar {
display: flex;
......
......@@ -4,6 +4,9 @@
z-index: 101;
padding: 0;
width: 100%;
display: flex;
align-items: center;
min-height: var(--gin-height-sticky);
background: var(--gin-bg-app);
box-sizing: border-box;
transition: var(--gin-transition);
......@@ -18,53 +21,52 @@
}
}
@include mq(large) {
&-watcher {
position: sticky;
top: -1px;
width: 100%;
height: var(--gin-height-sticky);
padding: var(--gin-spacing-s) 0;
height: 0;
}
&--is-sticky {
opacity: .95;
background: var(--gin-bg-app);
&-watcher {
position: sticky;
top: -1px;
height: 0;
@supports (backdrop-filter: blur()) {
opacity: .999;
background: rgba(var(--gin-bg-app-rgb), .8);
backdrop-filter: blur(12px);
}
&--is-sticky {
opacity: .95;
.gin--high-contrast-mode & {
background: var(--gin-bg-app);
backdrop-filter: none;
}
}
@supports (backdrop-filter: blur()) {
opacity: .999;
background: rgba(var(--gin-bg-app-rgb), .8);
backdrop-filter: blur(12px);
}
.gin--classic-toolbar:not(.gin--edit-form) & {
position: static;
}
.gin--high-contrast-mode & {
background: var(--gin-bg-app);
backdrop-filter: none;
}
}
@include mq(large) {
top: -1px;
padding: var(--gin-spacing-s) 0;
height: var(--gin-height-sticky);
margin-bottom: 0;
.gin--vertical-toolbar &,
.gin--horizontal-toolbar &,
.gin--classic-toolbar & {
top: var(--gin-toolbar-y-offset);
}
.gin--classic-toolbar:not(.gin--edit-form) & {
position: static;
}
}
&__items {
display: flex;
align-items: center;
margin-bottom: var(--gin-spacing-m);
width: 100%;
height: 100%;
@include mq(small) {
height: 100%;
.settings-tray-editable {
flex-shrink: 0;
}
......
.block-page-title-block {
@include mq($to: medium) {
.gin--edit-form .region-sticky--is-sticky & {
visibility: hidden;
}
}
&:last-child {
margin-bottom: 0;
}
......
......@@ -28,11 +28,12 @@
}
// Toolbar
.toolbar {
.toolbar-bar {
background: #100f10;
box-shadow: none;
}
.toolbar .toolbar-bar {
position: fixed;
left: 0;
width: 100%;
background: #100f10;
box-shadow: none;
}
.toolbar .toolbar-menu,
......
......@@ -23,6 +23,9 @@
// Toolbar
.toolbar {
.toolbar-bar {
position: fixed;
left: 0;
width: 100%;
background: #100f10;
box-shadow: none;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment