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='overlay'][data-position='bottom']),
:host([data-style*='hover'][data-position='top']), :host([data-style*='hover'][data-position='top']),
:host([data-style*='hover'][data-position='bottom']), :host([data-style*='hover'][data-position='bottom']),
:host([data-style='hidden'][data-position='top'][expanded]), :host([data-style='hidden'][data-position='top']),
:host([data-style='hidden'][data-position='bottom'][expanded]) { :host([data-style='hidden'][data-position='bottom']) {
width: 100%; width: 100%;
height: auto; 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)); 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='left']),
:host([data-style='overlay'][data-position='right']), :host([data-style='overlay'][data-position='right']),
:host([data-style*='hover'][data-position='left']), :host([data-style*='hover'][data-position='left']),
:host([data-style*='hover'][data-position='right']), :host([data-style*='hover'][data-position='right']),
:host([data-style='hidden'][data-position='left'][expanded]), :host([data-style='hidden'][data-position='left']),
:host([data-style='hidden'][data-position='right'][expanded]) { :host([data-style='hidden'][data-position='right']) {
width: auto; width: auto;
height: 100%; 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)); 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));
}