KayFaraday
/
Zaimki
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[design] make firefox fake-glass a bit transparent, add glass to hamburger menu

This commit is contained in:
Andrea 2022-03-31 17:56:57 +02:00
parent 8255439198
commit 204a67f2ce
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/glass.scss
View File

@ -1,4 +1,9 @@
@supports (backdrop-filter: blur($glassBlur)) { @supports (backdrop-filter: blur($glassBlur)) {
.hamburger-menu .bg {
backdrop-filter: blur($glassBlur);
background-color: transparent !important;
}
@include media-breakpoint-up('lg', $grid-breakpoints) { @include media-breakpoint-up('lg', $grid-breakpoints) {
header { header {
backdrop-filter: blur($glassBlur); backdrop-filter: blur($glassBlur);

7
components/Header.vue
View File

@ -39,7 +39,7 @@
> >
<Icon v="bars"/> <Icon v="bars"/>
</button> </button>
<div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']"> <div :class="['bg border p-3 shadow', hamburgerActive ? '' : 'd-none']">
<div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2"> <div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`"> <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon"/> <Icon :v="link.icon"/>
@ -377,6 +377,9 @@
left: $spacer; left: $spacer;
z-index: 1030; z-index: 1030;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
.bg {
background-color: rgba($white, .9)
}
.btn-hamburger { .btn-hamburger {
&:not(:active):not(:hover):not(:focus):not(.active) { &:not(:active):not(:hover):not(:focus):not(.active) {
background-color: $white; background-color: $white;
@ -409,7 +412,7 @@
z-index: 99; z-index: 99;
top: 0; top: 0;
left: 0; left: 0;
background-color: $white; background-color: rgba($white, .9);
box-shadow: $box-shadow; box-shadow: $box-shadow;
} }