funky-framadate-front/src/assets/scss/atoms/_forms.scss

@charset "UTF-8";

input,
select,
textarea {
  padding: 1rem;
  border-top: none;
  border-right: none;
  border-bottom: 3px solid $primary_color;
  border-left: none;
}

input,
select {
  display: inline-block;
}

textarea {
  width: 100%;
  border-left: 3px solid $primary_color;
}

select,
option {
  // delete default display
  -webkit-appearance : none;
  -moz-appearance : none;

  background: none;
  border-radius: 0;

  background-color: transparent;
  background-image: url("./assets/img/fleche_bas.png");
  background-repeat: no-repeat;
  background-size: 9px 8px;
  background-position: right center;
  background-clip: border-box;

  // TODO -> check what angular can do
}

label {
  &[for] {
    cursor: pointer;
  }

  &:not([for]) {
    color: $dusty-orange;

    &:before {
      content: "ce label n'a pas d'attribut for, c'est mal.";
      color: $violet;
    }
  }
}