gsy-component-library
Version:
reusable components from grid singularity
41 lines (40 loc) • 1.37 kB
CSS
@media screen and (min-width: 600px) {
@supports (display: grid) {
.configurationsPage {
grid-area: ct;
display: grid;
grid-column-gap: 18px;
grid-row-gap: 20px;
grid-template-columns: repeat(12, minmax(auto, 100px));
grid-template-areas: '. . . hero hero hero hero hero hero . . .' '. . . progress progress progress progress progress progress . . .' 'confs confs confs confs confs confs confs confs confs confs confs confs'; }
.configurationPage--1 {
grid-area: confs;
display: grid;
grid-column-gap: 18px;
grid-row-gap: 20px;
grid-template-columns: repeat(12, minmax(auto, 100px));
grid-template-areas: '. . . . . form form . . . . .'; }
.configurationPage--2 {
grid-area: confs;
display: grid;
grid-column-gap: 18px;
grid-row-gap: 20px;
grid-template-columns: repeat(12, minmax(auto, 100px));
grid-template-areas: 'tree tree tree tree tree tree tree tree tree tree tree tree'; } }
.settingsForm {
grid-area: form; }
.configurationTree {
grid-area: tree;
overflow-x: auto;
overflow-y: hidden; }
.configurationPanel {
grid-area: panel;
position: relative; }
.stepNavigation {
grid-area: nav; }
.progressBar {
grid-area: progress; }
.interactions {
position: fixed; }
.hero {
grid-area: hero; } }