podemos-info/participa2

View on GitHub
decidim-module-crowdfundings/app/assets/stylesheets/decidim/crowdfundings/_amount_selector.scss

Summary

Maintainability
Test Coverage
.amount-selector{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: baseline;
  align-content: flex-start;
  margin-bottom: 1em;

  label{
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    margin-bottom: .5rem;
    flex-grow: 1;

    input[type="radio"]{
      display: none;
    }

    input[type="radio"]:checked + div{
      background-color: transparent;
      color: $secondary;
      border: 1px solid $secondary;
      font-weight: bold;
    }

    input[type="radio"] + div{
      padding: 4pt 11pt;
      background: $secondary;
      color: white;
      border-radius: $global-radius;
      min-width: 2rem;
      text-align: center;
      border: 1px solid transparent;
    }

    & + label{
      margin-left: .5rem;
    }
  }

  .form-error{
    width: 100%;
  }

  .field{
    width: 100%;

    label{
      width: 100%;
    }
  }
}