neater looks for shadow-related things
This commit is contained in:
parent
cfe52185f7
commit
97c058ebda
4 changed files with 42 additions and 11 deletions
|
|
@ -1,12 +1,32 @@
|
|||
.settings-modal .settings-modal-panel .shadow-control {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.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;
|
||||
grid-gap: 0.25em;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
&.-compact {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 10em auto auto;
|
||||
grid-template-areas:
|
||||
"selector"
|
||||
"preview"
|
||||
"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;
|
||||
|
|
@ -20,6 +40,7 @@
|
|||
}
|
||||
|
||||
.shadow-tweak {
|
||||
grid-area: tweak;
|
||||
order: 3;
|
||||
flex: 2 0 10em;
|
||||
min-width: 10em;
|
||||
|
|
@ -65,6 +86,10 @@
|
|||
}
|
||||
|
||||
&.-no-preview {
|
||||
grid-template-columns: 10em 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-areas: "selector tweak";
|
||||
|
||||
.shadow-tweak {
|
||||
order: 0;
|
||||
flex: 2 0 8em;
|
||||
|
|
@ -87,8 +112,7 @@
|
|||
}
|
||||
|
||||
.shadow-preview {
|
||||
order: 2;
|
||||
flex: 3 3 15em;
|
||||
grid-area: preview;
|
||||
min-width: 10em;
|
||||
margin-left: 0.125em;
|
||||
align-self: start;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue