142 lines
4.8 KiB
SCSS
142 lines
4.8 KiB
SCSS
@use './button.scss';
|
|
|
|
:host {
|
|
--frigate-card-menu-button-size: 40px;
|
|
--mdc-icon-button-size: var(--frigate-card-menu-button-size);
|
|
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
|
|
|
|
pointer-events: auto;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/***********************************
|
|
* Aligned divs: matching & opposing
|
|
***********************************/
|
|
|
|
div.matching,
|
|
div.opposing {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
|
|
// Allow the divs to be resized.
|
|
min-width: 0px;
|
|
min-height: 0px;
|
|
}
|
|
div.matching {
|
|
justify-content: flex-start;
|
|
}
|
|
div.opposing {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/********************
|
|
* Outside menu style
|
|
********************/
|
|
|
|
:host([data-style='outside']) {
|
|
width: 100%;
|
|
background: var(--secondary-background-color);
|
|
}
|
|
|
|
/********************************************************
|
|
* Hack: Ensure host & div expand for column flex layouts
|
|
********************************************************/
|
|
|
|
:host(:not([data-style='outside'])[data-position='left']) {
|
|
// Awful hack: Flexbox column wrapping doesn't work properly in most major
|
|
// browsers -- the element boundary does not expand to cover the full wrapped
|
|
// content as it should. This results in the wrapped 'content' appearing
|
|
// outside the element background (the linear gradient in this case). The
|
|
// workaround is to use flex row direction for both rows & columns, and use
|
|
// vertical-lr/vertical-rl as the writing mode for columns -- resetting
|
|
// writing-mode for descendant elements.
|
|
//
|
|
// For more information see the Chromium bug as an example:
|
|
// - https://bugs.chromium.org/p/chromium/issues/detail?id=507397
|
|
writing-mode: vertical-lr;
|
|
}
|
|
:host(:not([data-style='outside'])[data-position='right']) {
|
|
// See "Awful hack" above.
|
|
writing-mode: vertical-rl;
|
|
}
|
|
:host(:not([data-style='outside'])[data-style='overlay'][data-position='left']) div > *,
|
|
:host(:not([data-style='outside'])[data-style='overlay'][data-position='right']) div > *,
|
|
:host(:not([data-style='outside'])[data-style*='hover'][data-position='left']) div > *,
|
|
:host(:not([data-style='outside'])[data-style*='hover'][data-position='right']) div > *,
|
|
:host(:not([data-style='outside'])[data-style='hidden'][data-position='left']) div > *,
|
|
:host(:not([data-style='outside'])[data-style='hidden'][data-position='right']) div > * {
|
|
// See "Awful hack" above. Note that this "cancelation" of writing mode only
|
|
// affects from beyond the divs, i.e. the writing mode hack applies to host
|
|
// and divs both.
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
/**********************
|
|
* "Reverse" alignments
|
|
**********************/
|
|
|
|
:host(:not([data-style='outside'])[data-position='left'][data-alignment='bottom']),
|
|
:host(:not([data-style='outside'])[data-position='right'][data-alignment='bottom']),
|
|
:host([data-position='top'][data-alignment='right']),
|
|
:host([data-position='bottom'][data-alignment='right']),
|
|
:host(:not([data-style='outside'])[data-position='left'][data-alignment='bottom']) div,
|
|
:host(:not([data-style='outside'])[data-position='right'][data-alignment='bottom']) div,
|
|
:host([data-position='top'][data-alignment='right']) div,
|
|
:host([data-position='bottom'][data-alignment='right']) div {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/****************************
|
|
* Wrap upwards on the bottom
|
|
****************************/
|
|
|
|
:host(:not([data-style='outside'])[data-position='bottom']) div {
|
|
// If the menu has more content that allows, "wrap upwards" to keep the
|
|
// Frigate button in the same place.
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
/********************************************
|
|
* Positioning for absolute based menu styles
|
|
********************************************/
|
|
|
|
:host([data-style='overlay']),
|
|
:host([data-style*='hover']),
|
|
:host([data-style='hidden']) {
|
|
overflow: hidden;
|
|
width: calc(var(--frigate-card-menu-button-size) + 6px);
|
|
height: calc(var(--frigate-card-menu-button-size) + 6px);
|
|
}
|
|
|
|
:host([data-style='overlay']),
|
|
:host([data-style*='hover']),
|
|
:host([data-style='hidden'][expanded]) {
|
|
overflow: visible;
|
|
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
|
|
}
|
|
|
|
:host([data-style='overlay'][data-position='top']),
|
|
: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]) {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
: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]) {
|
|
width: auto;
|
|
height: 100%;
|
|
}
|