michaelchadwick/ember-remember-stuff

View on GitHub
packages/frontend/app/styles/components/counter.scss

Summary

Maintainability
Test Coverage
.counter {
  & > * {
    padding: 0 5px;
  }

  .frame {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 5px;
    grid-row-gap: 0px;

    & > div {
      padding: 0.1em;
    }

    label {
      &:not(.blank) {
        background-color: #ddd;
        bottom: 5px;
        display: inline-block;
        font-size: 0.85em;
        font-weight: 700;
        margin: 0;
        padding: 0.5em;
        position: relative;
        width: 100%;
      }
    }

    .count,
    .total {
      text-align: right;
    }

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

  button {
    margin-top: 1em;
  }
}