ice-frontend-react-mobx/src/views/Main/Main.css

ICE Frontend REACT+MobX

@import 'media.css';

h1 { margin-left: 10px; }

.sectionHead {
  display: block;
  margin: 1rem 1rem 0;
  .sectionCount {
    margin-left: 1rem;
    font-size: 0.8em;
    color: --border-light;
  }
}

.dashboard {
  display: block;
  padding-top: 2rem;
  margin-bottom: 10rem;
  .feedsWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0.75rem;
    .feedCardWrapper {
      margin: 0.75rem;
    }
  }
}

/* sections */

.feedSection {
  width: 100%;
}

.groups,
.racks,
.zones {
  padding: 0.5rem;
}

.racks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.eventCardWrapper {
  width: 100%;
  padding: 1rem;
}

.groupCardWrapper,
.rackCardWrapper {
  margin-bottom: 2rem;
}

.groupSection,
.rackSection {
  width: 100%;
}

@media (--lg-screen) {
  .columns {
    display: flex;
    justify-content: space-between;
  }

  .dashboardColOne {
    width: 60%;
  }

  .dashboardColTwo {
    width: 40%;
    .zoneCardWrapper {
      width: 100%;
    }
    .groupSection,
    .rackSection,
    .zoneSection {
      width: 100%;
    }
  }
}

@media (--sm-screen) {
  .groupCardWrapper {
    width: 100%;
  }
  .rackCardWrapper {
    width: 100%;
  }
  .dashboardColOne {
    width: 100%;
  }
  .dashboardColTwo {
    width: 100%;
  }
}

@media (--tablet) {
  .groupSection {
    width: 100%;
  }
  .clusterSection {
    margin-bottom: 2rem;
  }
}

@media (--phone) {
  .groupSection {
    width: 100%;
  }
}