/*
 * Les champs de formulaire, et le pont qui remplace les `@extend` de Bootstrap.
 *
 * Ce fichier est le début de app/assets/stylesheets/application.scss jusqu'à l'étape 6c de
 * docs/hotwire.md. Il vient en tête parce qu'il occupe la place de Bootstrap dans la cascade : ces
 * déclarations y étaient posées par `@extend`, c'est-à-dire à l'endroit des règles de Bootstrap, et
 * les écrire plus loin leur ferait gagner des arbitrages qu'elles perdaient. Le tiret bas le fait
 * trier en premier par `stylesheet_link_tag :app`, qui range les feuilles par chemin logique.
 */

/* ---- Les champs de formulaire, sans les classes de Bootstrap dans les gabarits ------------------- */
/* Cette application n'écrit ni `form-control`, ni `form-group`, ni `has-error` dans ses vues : cinq */
/* `@extend` les faisaient entrer, jusqu'à l'étape 6c de docs/hotwire.md, dans toutes les règles de */
/* Bootstrap qui mentionnent ces classes. Le compilateur en tirait **378 sélecteurs**, dont une */
/* vingtaine que rien ne peut satisfaire (`select[type="date"]`, `input[type='checkbox'] */
/* input[type="checkbox"]`, `.input-group-lg > select[type="month"]`) et une poignée seulement qui */
/* atteignaient quelque chose : les règles ci-dessous, recopiées de Bootstrap 3.4.1 (_forms.scss). */
/* */
/* Elles sont dans la première feuille chargée, et pas plus bas : c'est la place qu'occupait ce que */
/* l'`@extend` engendrait, avant les cinquante feuilles qui l'arbitrent. Posées après elles, elles */
/* gagneraient des arbitrages qu'elles perdaient. */
/* Ce que le banc en dit est vérifié par bin/goldmaster-styles, qui compare le style calculé de */
/* chaque élément des deux côtés. */

/* Liste développée à la main : ces sélecteurs n'ont pas la même spécificité, et `&` prend celle du plus */
/* spécifique d'entre eux (il vaut :is(…)), là où Sass écrivait la liste. Imbriquée, la règle changerait */
/* de rang dans la cascade sans changer de texte (docs/hotwire.md, étape 6d). */
.field input,
input[type='text'],
input[type='email'],
input[type='password'],
select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.field input:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
select:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.field input::-moz-placeholder,
input[type='text']::-moz-placeholder,
input[type='email']::-moz-placeholder,
input[type='password']::-moz-placeholder,
select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.field input:-ms-input-placeholder,
input[type='text']:-ms-input-placeholder,
input[type='email']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
select:-ms-input-placeholder {
  color: #999;
}
.field input::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder,
input[type='email']::-webkit-input-placeholder,
input[type='password']::-webkit-input-placeholder,
select::-webkit-input-placeholder {
  color: #999;
}
.field input::-ms-expand,
input[type='text']::-ms-expand,
input[type='email']::-ms-expand,
input[type='password']::-ms-expand,
select::-ms-expand {
  background-color: transparent;
  border: 0;
}
.field input[disabled],
.field input[readonly],
input[type='text'][disabled],
input[type='text'][readonly],
input[type='email'][disabled],
input[type='email'][readonly],
input[type='password'][disabled],
input[type='password'][readonly],
select[disabled],
select[readonly] {
  background-color: #eeeeee;
  opacity: 1;
}
.field input[disabled],
input[type='text'][disabled],
input[type='email'][disabled],
input[type='password'][disabled],
select[disabled] {
  cursor: not-allowed;
}

/* Les cases à cocher de l'application portaient `@extend .checkbox` et `@extend .center-block` */
/* (home.scss). Les deux règles descendantes de `.checkbox` visent un libellé et une case à */
/* l'intérieur de la case elle-même : elles ne peuvent rien atteindre. */
input[type='checkbox'] {
  position: relative;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}

/* `.field` et `.actions` sont les enveloppes des formulaires d'échafaudage de Rails ; elles */
/* portaient `@extend .form-group`, dont toute la substance est une marge basse. */
.field,
.actions {
  margin-bottom: 15px;
}

/* `.field_with_errors` est posé par le constructeur de formulaires de Rails, autour du libellé et */
/* autour du champ ; il portait `@extend .has-error`. De la cinquantaine de sélecteurs que cela */
/* engendrait, ceux-ci sont les seuls que ce balisage peut atteindre. */
.field_with_errors {
  .control-label {
    color: #a94442;
  }

  /* Liste développée à la main : ces sélecteurs n'ont pas la même spécificité, et `&` prend celle du plus */
  /* spécifique d'entre eux (il vaut :is(…)), là où Sass écrivait la liste. Imbriquée, la règle changerait */
  /* de rang dans la cascade sans changer de texte (docs/hotwire.md, étape 6d). */
  input,
  select,
  .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  input:focus,
  select:focus,
  .form-control:focus {
    border-color: #843534;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  }
}