73 lines
2.0 KiB
SCSS
73 lines
2.0 KiB
SCSS
@use './themes/base.scss';
|
|
@use './button.scss';
|
|
|
|
// A hidden form rendered only to pre-load `ha-form`/`ha-selector`'s lazily
|
|
// imported element types.
|
|
.selector-sideload {
|
|
display: none;
|
|
}
|
|
|
|
// Card-state notice banners sit above the section stack.
|
|
.card-config > ha-alert {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
// The alert sizes the slot its button sits in to `min-content`, which would
|
|
// otherwise break the label across lines.
|
|
.card-config > ha-alert ha-button {
|
|
width: max-content;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
// The switch between the editors, set apart from what it switches: it is a
|
|
// control over the editor rather than one of the card settings below it. Its
|
|
// icon sits beside the form so the row reads as one of the editor's rows, each
|
|
// of which carries an icon.
|
|
.mode {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin-bottom: 8px;
|
|
padding: 0 10px 8px;
|
|
|
|
border-bottom: 1px solid var(--advanced-camera-card-divider-color);
|
|
}
|
|
|
|
// Spaced and de-emphasized to match the icons on the sections below. The form
|
|
// insets its own label, so the gap here is the remainder of that spacing.
|
|
.mode advanced-camera-card-icon {
|
|
margin-right: 8px;
|
|
|
|
color: var(--advanced-camera-card-editor-secondary-text-color);
|
|
}
|
|
|
|
.mode ha-form {
|
|
flex: 1;
|
|
}
|
|
|
|
// The simple editor's settings that are not in a section. They are inset to
|
|
// line up with the sections above, whose outlines the panels draw themselves.
|
|
.settings ha-form {
|
|
display: block;
|
|
|
|
margin: 8px 10px;
|
|
}
|
|
|
|
// Each top-level section is an HA expansion panel. An open section draws its
|
|
// own outline, which would otherwise sit directly against the neighboring
|
|
// sections, so every section is spaced whether it is open or not: a gap that
|
|
// appeared only on opening would move the sections below as the panel grew. The
|
|
// margins of two adjacent sections collapse together, so the gap is the same
|
|
// wherever it falls.
|
|
.section {
|
|
display: block;
|
|
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card-config > ha-button {
|
|
margin: 10px;
|
|
}
|