webawesome/source/css/forms.css

/*! Forms */
:root {
  --input-height-xs: 1.25rem;
  --input-height-sm: 1.75rem;
  --input-height: 2.25rem;
  --input-height-lg: 2.75rem;
  --input-height-xl: 3.25rem;
  --input-font-size-xs: .7rem;
  --input-font-size-sm: .8rem;
  --input-font-size: 1rem;
  --input-font-size-lg: 1.25rem;
  --input-font-size-xl: 1.5rem;
  --input-font-family: inherit;
  --input-font-weight: inherit;
  --input-color: var(--body-color);
  --input-border-color: var(--component-border-color);
  --input-border-color-focus: var(--state-primary);
  --input-border-width: 1px;
  --input-border-radius: var(--component-border-radius);
  --input-bg-color: var(--color-white);
  --input-box-shadow: var(--component-box-shadow-inner);
  --input-readonly-bg-color: var(--component-bg-color);
  --input-focus-width: 2px;
  --input-speed: var(--component-speed);

  --input-range-track-height: .5rem;
  --input-range-track-color: var(--component-bg-color);
  --input-range-track-box-shadow: var(--component-box-shadow-inner);
  --input-range-thumb-height: 1.25rem;
  --input-range-thumb-color: var(--state-primary);

  --input-invalid-color: var(--state-danger);
  --input-invalid-border-color: var(--state-danger);
  --input-valid-color: var(--state-success);
  --input-valid-border-color: var(--state-success);

  --fieldset-border-color: var(--component-border-color);
  --fieldset-border-width: var(--component-border-width);
  --fieldset-border-radius: var(--component-border-radius);
  --fieldset-padding-x: 1.5rem;
  --fieldset-padding-y: 1rem;
}

fieldset {
  border: solid var(--fieldset-border-width) var(--fieldset-border-color);
  border-radius: var(--fieldset-border-radius);
  padding: var(--fieldset-padding-y) var(--fieldset-padding-x);
  margin-bottom: 1.5rem;

  & legend {
    font-weight: var(--font-weight-bold);
    padding: 0 .25rem;
  }
}

label {
  display: inline-block;
  margin-bottom: .25rem;

  & + label {
    margin-left: 1rem;
  }
}

input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select,
textarea {
  width: 100%;
  font-family: var(--input-font-family);
  font-size: var(--input-font-size);
  font-weight: var(--input-font-weight);
  color: var(--input-color);
  border: solid var(--input-border-width) var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: var(--input-box-shadow);
  background-color: var(--input-bg-color);
  height: var(--input-height);
  line-height: var(--input-height);
  vertical-align: middle;
  display: block;
  padding-left: .5rem;
  padding-right: .5rem;
  margin: 0;
  transition:
    var(--input-speed) border-color,
    var(--component-speed) background-color,
    var(--component-speed) color;
  white-space: nowrap;
  -moz-appearance: none;
  -webkit-appearance: none;

  &:focus {
    outline: none;
    border-color: var(--input-border-color-focus);
  }

  &[disabled] {
    opacity: .5;
    cursor: not-allowed;
  }

  &[readonly] {
    background-color: var(--input-readonly-bg-color);
  }

  &[type="color"] {
    padding: .5rem;

    &::-webkit-color-swatch-wrapper {
      padding: 0;
    }

    &::-webkit-color-swatch {
      border: none;
      border-radius: var(--input-border-radius);
    }
  }

  &[type="checkbox"],
  &[type="radio"] {
    padding: 0;
  }

  &.input-xs {
    font-size: var(--input-font-size-xs);
    height: var(--input-height-xs);
    line-height: var(--input-height-xs);
  }

  &.input-sm {
    font-size: var(--input-font-size-sm);
    height: var(--input-height-sm);
    line-height: var(--input-height-sm);
  }

  &.input-lg {
    font-size: var(--input-font-size-lg);
    height: var(--input-height-lg);
    line-height: var(--input-height-lg);
  }

  &.input-xl {
    font-size: var(--input-font-size-xl);
    height: var(--input-height-xl);
    line-height: var(--input-height-xl);
  }
}

select {
  position: relative;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='41px' height='26px' viewBox='0 0 41 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path-3' fill='%23000000' points='0 5.38215461 19.9830489 25.3652035 40.1398855 5.20836689 34.9315186 0 19.8691842 15.0623344 4.83971338 0.0328636246'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E%0A");
  background-position: right .4rem center;
  background-repeat: no-repeat;
  background-size: .75rem;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 1.5rem;
}

textarea,
textarea.input-xs,
textarea.input-sm,
textarea.input-lg,
textarea.input-xl {
  height: auto;
  resize: vertical;
  line-height: var(--line-height);
  white-space: normal;
}

/* Range */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: var(--input-height);
  line-height: var(--input-height);
  vertical-align: middle;

  &:focus {
    outline: none;
  }

  /* Webkit */
  &::-webkit-slider-runnable-track {
    width: 100%;
    height: var(--input-range-track-height);
    cursor: pointer;
    background: var(--input-range-track-color);
    border-radius: var(--input-border-radius);
    border: none;
    box-shadow: var(--input-range-track-box-shadow);
  }

  &::-webkit-slider-thumb {
    border: none;
    width: var(--input-range-thumb-height);
    height: var(--input-range-thumb-height);
    border-radius: 50%;
    background: var(--input-range-thumb-color);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: calc(var(--input-range-thumb-height) / -2 + var(--input-range-track-height) / 2);
  }

  &:focus {
    &::-webkit-slider-runnable-track {
      background: var(--input-range-track-color);
    }

    &::-webkit-slider-thumb {
      box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
    }
  }

  /* Firefox */
  &::-moz-range-track {
    width: 100%;
    height: var(--input-range-track-height);
    cursor: pointer;
    background: var(--input-range-track-color);
    border-radius: var(--input-border-radius);
    border: none;
    box-shadow: var(--input-range-track-box-shadow);
  }

  &::-moz-range-thumb {
    border: none;
    height: var(--input-range-thumb-height);
    width: var(--input-range-thumb-height);
    border-radius: 50%;
    background: var(--input-range-thumb-color);
    cursor: pointer;
  }

  &:focus::-moz-range-thumb {
    box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
  }

  /* IE / Edge */
  &::-ms-track {
    width: 100%;
    height: var(--input-range-track-height);
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }

  &::-ms-fill-lower {
    background: var(--input-range-track-color);
    border: none;
    border-radius: var(--input-border-radius);
  }

  &::-ms-fill-upper {
    background: var(--input-range-track-color);
    border: none;
    border-radius: var(--input-border-radius);
  }

  &::-ms-thumb {
    border: none;
    height: var(--input-range-thumb-height);
    width: var(--input-range-thumb-height);
    border-radius: 50%;
    background: var(--input-range-thumb-color);
    cursor: pointer;
    margin-top: calc(var(--input-range-track-height) / -2);
  }

  &:focus::-ms-thumb {
    box-shadow: 0 0 0 var(--input-focus-width) color(var(--input-range-thumb-color) alpha(50%));
  }

  &:focus::-ms-fill-lower {
    background: var(--input-range-track-color);
  }

  &:focus::-ms-fill-upper {
    background: var(--input-range-track-color);
  }
}

/* Input singles */
.input-single {
  margin-bottom: 1.5rem;
}

/* Input groups */
.input-group {
  width: 100%;
  display: flex;
  margin-bottom: 1.5rem;

  & > input,
  & > button,
  & > .button,
  & > .dropdown button,
  & > .dropdown .button {
    border-radius: 0;
  }

  & > input:first-child,
  & > button:first-child,
  & > .button:first-child,
  & > .dropdown:first-child button,
  & > .dropdown:first-child .button {
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
  }

  & > input:last-child,
  & > button:last-child,
  & > .button:last-child,
  & > .dropdown:last-child button,
  & > .dropdown:last-child .button {
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
  }

  & > input + input {
    border-left-width: 0;
  }

  & > input + input:focus {
    border-left-width: var(--input-border-width);
    margin-left: calc(var(--input-border-width) * -1);
  }

  & :focus {
    /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
    transform: translateZ(0);
  }
}

/* Input addons */
.input-addon {
  font-size: var(--input-font-size);
  color: var(--state-secondary);
  height: var(--input-height);
  line-height: var(--input-height);
  border-top: solid var(--input-border-width) var(--input-border-color);
  border-bottom: solid var(--input-border-width) var(--input-border-color);
  background: #f8f8f8;
  padding: 0 .5rem;
  white-space: nowrap;

  &:first-child {
    border-left: solid var(--input-border-width) var(--input-border-color);
    border-top-left-radius: var(--input-border-radius);
    border-bottom-left-radius: var(--input-border-radius);
  }

  &:last-child {
    border-right: solid var(--input-border-width) var(--input-border-color);
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
  }

  &.input-addon-xs {
    font-size: var(--input-font-size-xs);
    height: var(--input-height-xs);
    line-height: var(--input-height-xs);
  }

  &.input-addon-sm {
    font-size: var(--input-font-size-sm);
    height: var(--input-height-sm);
    line-height: var(--input-height-sm);
  }

  &.input-addon-lg {
    font-size: var(--input-font-size-lg);
    height: var(--input-height-lg);
    line-height: var(--input-height-lg);
  }

  &.input-addon-xl {
    font-size: var(--input-font-size-xl);
    height: var(--input-height-xl);
    line-height: var(--input-height-xl);
  }
}

/* Validation */
.input-invalid {
  & label {
    color: var(--input-invalid-color) !important;
  }

  & input,
  & select {
    color: var(--input-invalid-color) !important;
    border-color: var(--input-invalid-border-color) !important;
  }
}

.input-valid {
  & label {
    color: var(--input-valid-color) !important;
  }

  & input,
  & select {
    color: var(--input-valid-color) !important;
    border-color: var(--input-valid-border-color) !important;
  }
}