ujh/fountainpencompanion

View on GitHub
app/javascript/stylesheets/dashboards.scss

Summary

Maintainability
Test Coverage
@use "~bootstrap/scss/bootstrap" as b;

.fpc-dashboard {
  display: grid;
  gap: b.$spacer;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-template-rows: auto;
}

.fpc-dashboard-widget {
  background: var(--fpc-bright-background);
  min-height: 200px;

  &--with-links {
    position: relative;
    padding-bottom: 48px;
  }

  &__links {
    position: absolute;
    bottom: b.$spacer;
    left: b.$spacer;
  }
}

.fpc-inks-visualization {
  display: flex;
  flex-direction: column;
}