123 lines
2 KiB
SCSS
123 lines
2 KiB
SCSS
.ShadowControl {
|
|
display: grid;
|
|
grid-template-columns: 10em 1fr 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "selector preview tweak";
|
|
grid-gap: 0.5em;
|
|
justify-content: stretch;
|
|
|
|
&.-compact {
|
|
grid-template-columns: 10em 1fr;
|
|
grid-template-rows: auto auto;
|
|
grid-template-areas:
|
|
"selector preview"
|
|
"tweak tweak";
|
|
|
|
&.-no-preview {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: 10em 1fr;
|
|
grid-template-areas:
|
|
"selector"
|
|
"tweak";
|
|
}
|
|
}
|
|
|
|
.shadow-switcher {
|
|
grid-area: selector;
|
|
order: 1;
|
|
flex: 1 0 6em;
|
|
min-width: 6em;
|
|
margin-right: 0.125em;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.shadow-list {
|
|
flex: 1 0 auto;
|
|
}
|
|
}
|
|
|
|
.shadow-tweak {
|
|
grid-area: tweak;
|
|
order: 3;
|
|
flex: 2 0 10em;
|
|
min-width: 10em;
|
|
margin-left: 0.125em;
|
|
margin-right: 0.125em;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-gap: 0.25em;
|
|
|
|
/* hack */
|
|
.input-boolean {
|
|
flex: 1;
|
|
display: flex;
|
|
|
|
.label {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.input-string {
|
|
flex: 1 0 5em;
|
|
}
|
|
|
|
.shadow-expression {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.id-control {
|
|
align-items: stretch;
|
|
|
|
.shadow-switcher,
|
|
.btn {
|
|
min-width: 1px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0 0.4em;
|
|
margin: 0 0.1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.-no-preview {
|
|
grid-template-columns: 10em 1fr;
|
|
grid-template-rows: 1fr;
|
|
grid-template-areas: "selector tweak";
|
|
|
|
.shadow-tweak {
|
|
order: 0;
|
|
flex: 2 0 8em;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.input-range {
|
|
min-width: 5em;
|
|
}
|
|
}
|
|
|
|
.inset-alert {
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
&.disabled {
|
|
.inset-alert {
|
|
opacity: 0.2;
|
|
}
|
|
}
|
|
|
|
.shadow-preview {
|
|
grid-area: preview;
|
|
min-width: 25em;
|
|
margin-left: 0.125em;
|
|
align-self: start;
|
|
justify-self: center;
|
|
}
|
|
}
|
|
|
|
.inset-tooltip {
|
|
max-width: 30em;
|
|
}
|