refactor
This commit is contained in:
parent
6c5593d456
commit
e78110a5cd
4 changed files with 9 additions and 8 deletions
|
@ -89,7 +89,6 @@
|
|||
X11: 'rgba(0, 0, 0, 0.3)',
|
||||
X12: 'rgba(255, 255, 255, 0.1)',
|
||||
X13: 'rgba(255, 255, 255, 0.15)',
|
||||
X14: ':alpha<0.5<@navBg',
|
||||
X15: ':alpha<0<@panel',
|
||||
X16: ':alpha<0.7<@panel',
|
||||
X17: ':alpha<0.8<@bg',
|
||||
|
|
|
@ -89,7 +89,6 @@
|
|||
X11: 'rgba(0, 0, 0, 0.1)',
|
||||
X12: 'rgba(0, 0, 0, 0.1)',
|
||||
X13: 'rgba(0, 0, 0, 0.15)',
|
||||
X14: ':alpha<0.5<@navBg',
|
||||
X15: ':alpha<0<@panel',
|
||||
X16: ':alpha<0.7<@panel',
|
||||
X17: ':alpha<0.8<@bg',
|
||||
|
|
|
@ -82,6 +82,8 @@ function more() {
|
|||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
@ -91,7 +93,7 @@ function more() {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
@ -125,7 +127,7 @@ function more() {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
|
|
@ -111,6 +111,7 @@ function more(ev: MouseEvent) {
|
|||
.root {
|
||||
--nav-width: 250px;
|
||||
--nav-icon-only-width: 80px;
|
||||
--nav-bg-transparent: color-mix(in srgb, var(--navBg), transparent 50%);
|
||||
|
||||
flex: 0 0 var(--nav-width);
|
||||
width: var(--nav-width);
|
||||
|
@ -144,7 +145,7 @@ function more(ev: MouseEvent) {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
@ -187,7 +188,7 @@ function more(ev: MouseEvent) {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
@ -378,7 +379,7 @@ function more(ev: MouseEvent) {
|
|||
top: 0;
|
||||
z-index: 1;
|
||||
padding: 20px 0;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
@ -408,7 +409,7 @@ function more(ev: MouseEvent) {
|
|||
position: sticky;
|
||||
bottom: 0;
|
||||
padding-top: 20px;
|
||||
background: var(--X14);
|
||||
background: var(--nav-bg-transparent);
|
||||
-webkit-backdrop-filter: var(--blur, blur(8px));
|
||||
backdrop-filter: var(--blur, blur(8px));
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue