<commit_before>/* FIXME: Better approach at custom input and label sizing */
/* TODO: Create variables for relevant properties */

form {
  margin-top: 1rem;
}

.form-row {
  /* display: flex; */
  /* flex-direction: column; */
  margin-bottom: 1rem;
}

.form-help {
  display: block;
  margin-top: 0.25rem;
  color: var(--form-help-font-colour);
}

label {
  display: block;
}

.form-label {
  /* min-width: 6.5rem; */
}

.input,
.select,
.textarea,
input,
select,
textarea {
  /* min-width: 17rem; */
  /* max-width: 100%; */
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  color: var(--input-font-colour);
  background-color: var(--input-bg-colour);
  border: var(--input-border);
  border-radius: var(--input-radius);

  &:hover {
    border-color: var(--input-hover-border-colour);
  }

  &:focus,
  &:active {
    outline: var(--input-focus-outline);
  }

  /* FIXME: Remove; failed experiment */
  /* &:valid {
    box-shadow: 0 0 0.5rem 0.15rem var(--input-valid-colour);
  }

  &:invalid {
    box-shadow: 0 0 0.5rem 0.15rem var(--input-invalid-colour);
  } */

  &::placeholder {
    color: var(--input-placeholder-font-colour);
  }

  &.input-small { /* stylelint-disable-line selector-no-qualifying-type */
    min-width: 5rem;
    max-width: 7rem;
  }

  &[disabled] {
    color: var(--input-disabled-font-colour);
    background-color: var(--input-bg-colour);
    border: 1px solid var(--input-disabled-border-colour);

    &:focus,
    &:active {
      outline: none;
    }

    &::placeholder {
      color: var(--input-disabled-placeholder-font-colour);
    }
  }
}

/* TODO: Style better; this sucks */
input[type="checkbox"] {
  width: 1.6rem;
  min-width: unset;
  height: 1.6rem;
  margin-right: 0.5rem;
}

/* visually join an input and button together */
/* FIXME: .btn needs an active state (globally they still need both hover and active) */
.input-group {
  display: inline-flex;

  & > .btn {
    border: var(--input-border);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    @if var(--use-drop-shadow) {
      filter: none;
    } @else { /* stylelint-disable-line */
      box-shadow: none;
    }
  }

  & > input {
    /* so outline doesn't look strange when active + hide rounded corners */
    @mixin min margin-right, -2px, var(--radius-negative);

    &:focus + .btn,
    &:active + .btn {
      outline: var(--input-focus-outline);
    }
  }

  &:hover {
    & > input,
    & > .btn { /* stylelint-disable-line no-descending-specificity */
      border-color: var(--input-hover-border-colour);
    }
  }
}
<commit_msg>Disable form validation colours in master<commit_after>/* FIXME: Better approach at custom input and label sizing */
/* TODO: Create variables for relevant properties */

form {
  margin-top: 1rem;
}

.form-row {
  /* display: flex; */
  /* flex-direction: column; */
  margin-bottom: 1rem;
}

.form-help {
  display: block;
  margin-top: 0.25rem;
  color: var(--form-help-font-colour);
}

label {
  display: block;
}

.form-label {
  /* min-width: 6.5rem; */
}

.input,
.select,
.textarea,
input,
select,
textarea {
  /*
    FIXME: Need some way to make inputs sized consistently but without effecting
    the document flow.
  */
  /* min-width: 17rem; */
  /* max-width: 100%; */
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  color: var(--input-font-colour);
  background-color: var(--input-bg-colour);
  border: var(--input-border);
  border-radius: var(--input-radius);

  &:hover {
    border-color: var(--input-hover-border-colour);
  }

  &:focus,
  &:active {
    outline: var(--input-focus-outline);
  }

  /*
    FIXME: These outlines don't look so good, experiment with icons and maybe
    minimal outlines instead.
  */
  /*
  &:valid {
    box-shadow: 0 0 0.5rem 0.15rem var(--input-valid-colour);
  }

  &:invalid {
    box-shadow: 0 0 0.5rem 0.15rem var(--input-invalid-colour);
  }
  */

  &::placeholder {
    color: var(--input-placeholder-font-colour);
  }

  &.input-small { /* stylelint-disable-line selector-no-qualifying-type */
    min-width: 5rem;
    max-width: 7rem;
  }

  &[disabled] {
    color: var(--input-disabled-font-colour);
    background-color: var(--input-bg-colour);
    border: 1px solid var(--input-disabled-border-colour);

    &:focus,
    &:active {
      outline: none;
    }

    &::placeholder {
      color: var(--input-disabled-placeholder-font-colour);
    }
  }
}

/* TODO: Style better; this sucks */
input[type="checkbox"] {
  width: 1.6rem;
  min-width: unset;
  height: 1.6rem;
  margin-right: 0.5rem;
}

/* visually join an input and button together */
/* FIXME: .btn needs an active state (globally they still need both hover and active) */
.input-group {
  display: inline-flex;

  & > .btn {
    border: var(--input-border);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    @if var(--use-drop-shadow) {
      filter: none;
    } @else { /* stylelint-disable-line */
      box-shadow: none;
    }
  }

  & > input {
    /* so outline doesn't look strange when active + hide rounded corners */
    @mixin min margin-right, -2px, var(--radius-negative);

    &:focus + .btn,
    &:active + .btn {
      outline: var(--input-focus-outline);
    }
  }

  &:hover {
    & > input,
    & > .btn { /* stylelint-disable-line no-descending-specificity */
      border-color: var(--input-hover-border-colour);
    }
  }
}

{'fraction_non_alphanumeric': 0.17426322533406552, 'fraction_numerical': 0.013911770089694308, 'mean_word_length': 2.548051948051948, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1045123', 'n_tokens_mistral': 2050, 'n_tokens_neox': 1943, 'n_words': 421}