125 lines
1.3 KiB
CSS
125 lines
1.3 KiB
CSS
.inputContainer {
|
|
padding: var(--size-large-1);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-column-gap: var(--size-large-1);
|
|
grid-row-gap: var(--size-large-1);
|
|
}
|
|
|
|
.shade0 {
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.shade1 {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.shade2 {
|
|
grid-column: 1;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.shade3 {
|
|
grid-column: 1;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.shade4 {
|
|
grid-column: 1;
|
|
grid-row: 5;
|
|
}
|
|
|
|
.shade5 {
|
|
grid-column: 1;
|
|
grid-row: 6;
|
|
}
|
|
|
|
.shade6 {
|
|
grid-column: 1;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.shade7 {
|
|
grid-column: 1;
|
|
grid-row: 8;
|
|
}
|
|
|
|
.shade7.collapsed {
|
|
grid-column: 1;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.checkbox {
|
|
grid-column: 1 / span 2;
|
|
grid-row: 9
|
|
}
|
|
|
|
.accent0 {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.accent1 {
|
|
grid-column: 2;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.accent2 {
|
|
grid-column: 2;
|
|
grid-row: 3;
|
|
}
|
|
|
|
.accent3 {
|
|
grid-column: 2;
|
|
grid-row: 4;
|
|
}
|
|
|
|
.accent4 {
|
|
grid-column: 2;
|
|
grid-row: 5;
|
|
}
|
|
|
|
.accent5 {
|
|
grid-column: 2;
|
|
grid-row: 6;
|
|
}
|
|
|
|
.accent6 {
|
|
grid-column: 2;
|
|
grid-row: 7;
|
|
}
|
|
|
|
.accent7 {
|
|
grid-column: 2;
|
|
grid-row: 8;
|
|
}
|
|
|
|
@media (max-width: 36rem) {
|
|
.inputContainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.shade0,
|
|
.shade1,
|
|
.shade2,
|
|
.shade3,
|
|
.shade4,
|
|
.shade5,
|
|
.shade6,
|
|
.shade7,
|
|
.checkbox,
|
|
.accent0,
|
|
.accent1,
|
|
.accent2,
|
|
.accent3,
|
|
.accent4,
|
|
.accent5,
|
|
.accent6,
|
|
.accent7 {
|
|
grid-column: 1;
|
|
grid-row: unset;
|
|
}
|
|
}
|