46 lines
1.7 KiB
SCSS
46 lines
1.7 KiB
SCSS
// The content the editor renders inside an expander body.
|
|
//
|
|
// Every editor component that renders such content does so in its own shadow
|
|
// root, which the editor's own stylesheet cannot reach, so each includes these
|
|
// rules itself. The theme variables they use need no such treatment: custom
|
|
// properties inherit across shadow boundaries from the editor element.
|
|
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
// A single-column grid rather than block layout: the `minmax(0, 1fr)` column
|
|
// lets children shrink below their intrinsic minimum width, so a form field
|
|
// with long unbreakable content (an entity ID, a select option) clamps to the
|
|
// panel width instead of overflowing it horizontally.
|
|
@mixin shrinkable-column {
|
|
display: grid;
|
|
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
// No background or border of its own: the body is the panel's own surface, so
|
|
// the margins around the form read as part of it rather than as a frame around
|
|
// it.
|
|
.values {
|
|
@include shrinkable-column;
|
|
}
|
|
|
|
// The blocks stacked in a body all take the same inset, so their outlines line
|
|
// up with each other and none touches the body edge. It is applied to each
|
|
// block rather than as body padding because a form's own fields cannot be
|
|
// reached from outside its shadow DOM, so the form element itself has to carry
|
|
// the spacing.
|
|
.values ha-form,
|
|
.values ha-expansion-panel {
|
|
display: block;
|
|
margin: 10px;
|
|
}
|
|
|
|
// De-emphasized to the same degree Home Assistant de-emphasizes the icons on
|
|
// the panels `ha-form` renders, so the panels the editor builds itself sit
|
|
// alongside them without standing out.
|
|
advanced-camera-card-icon[slot='leading-icon'] {
|
|
color: var(--advanced-camera-card-editor-secondary-text-color);
|
|
}
|