flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Menu linear background should match alignment (#1584)

Browse Source
This commit is contained in:
Dermot Duffy
2024-09-24 19:26:12 -07:00
committed by GitHub
parent 06345ca01d
commit 1bc164ecd6
1 changed files with 36 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/menu.scss
+36 -6
View File
@@ -131,24 +131,54 @@ div.opposing {
:host([data-style='overlay'][data-position='bottom']),
:host([data-style*='hover'][data-position='top']),
:host([data-style*='hover'][data-position='bottom']),
:host([data-style='hidden'][data-position='top'][expanded]),
:host([data-style='hidden'][data-position='bottom'][expanded]) {
:host([data-style='hidden'][data-position='top']),
:host([data-style='hidden'][data-position='bottom']) {
width: 100%;
height: auto;
}
// Linear fade left to right.
:host([data-style='overlay'][data-position='top'][data-alignment='left']),
:host([data-style='overlay'][data-position='bottom'][data-alignment='left']),
:host([data-style*='hover'][data-position='top'][data-alignment='left']),
:host([data-style*='hover'][data-position='bottom'][data-alignment='left']),
:host([data-style='hidden'][data-position='top'][data-alignment='left'][expanded]),
:host([data-style='hidden'][data-position='bottom'][data-alignment='left'][expanded]) {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
:host([data-style='overlay'][data-position='top'][data-alignment='right']),
:host([data-style='overlay'][data-position='bottom'][data-alignment='right']),
:host([data-style*='hover'][data-position='top'][data-alignment='right']),
:host([data-style*='hover'][data-position='bottom'][data-alignment='right']),
:host([data-style='hidden'][data-position='top'][data-alignment='right'][expanded]),
:host([data-style='hidden'][data-position='bottom'][data-alignment='right'][expanded]) {
background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
:host([data-style='overlay'][data-position='left']),
:host([data-style='overlay'][data-position='right']),
:host([data-style*='hover'][data-position='left']),
:host([data-style*='hover'][data-position='right']),
:host([data-style='hidden'][data-position='left'][expanded]),
:host([data-style='hidden'][data-position='right'][expanded]) {
:host([data-style='hidden'][data-position='left']),
:host([data-style='hidden'][data-position='right']) {
width: auto;
height: 100%;
}
// Linear fade top to bottom.
:host([data-style='overlay'][data-position='left'][data-alignment='top']),
:host([data-style='overlay'][data-position='right'][data-alignment='top']),
:host([data-style*='hover'][data-position='left'][data-alignment='top']),
:host([data-style*='hover'][data-position='right'][data-alignment='top']),
:host([data-style='hidden'][data-position='left'][data-alignment='top'][expanded]),
:host([data-style='hidden'][data-position='right'][data-alignment='top'][expanded]) {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}
:host([data-style='overlay'][data-position='left'][data-alignment='bottom']),
:host([data-style='overlay'][data-position='right'][data-alignment='bottom']),
:host([data-style*='hover'][data-position='left'][data-alignment='bottom']),
:host([data-style*='hover'][data-position='right'][data-alignment='bottom']),
:host([data-style='hidden'][data-position='left'][data-alignment='bottom'][expanded]),
:host([data-style='hidden'][data-position='right'][data-alignment='bottom'][expanded]) {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}