MaxMilton/ekscss

/**
* FORMS
*/

:root {
  accent-color: ${x.color.primary};
}

// Hide the up/down buttons in <input type=number> as they're confusing, but
// still allow use of the type=number; makes number input more usable on phones
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

::placeholder {
  color: ${x.input.placeholderTextColor};

  [disabled]& {
    color: ${x.input.disabledPlaceholderTextColor};
  }
}

.label {
  display: block; // make label appear above inputs
  margin-bottom: ${x.input.paddingY};
  font-weight: ${x.textWeightHeavy};
}

// Note: Also update 'packages/framework/addon/native.xcss' if making any
// changes to the nested selectors
.input,
.select,
.textarea {
  max-width: 100%;
  padding: ${x.input.paddingY} ${x.input.paddingX};
  color: ${x.input.textColor};
  vertical-align: middle;
  background-color: ${x.input.backgroundColor};
  border: ${x.input.border};
  border-radius: ${x.input.radius};

  &:hover {
    border-color: ${x.input.hoverBorderColor};
    outline: none;
    box-shadow: 0 0 0 ${x.input.outlineSize} ${x.input.hoverBorderColor};
  }

  &:focus,
  &:active {
    border-color: ${x.input.activeBorderColor};
    outline: none;
    box-shadow: 0 0 0 ${x.input.outlineSize} ${x.input.activeBorderColor};
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled {
    color: ${x.input.disabledTextColor};
    background-color: ${x.input.disabledBackgroundColor};
    border-color: ${x.input.disabledBorder};
    outline: none;
    box-shadow: none;
  }
}

.select {
  position: relative;
  appearance: none;
  padding-right: 26px;
  color: ${x.input.textColor};
  background-image: ${x.form.selectCaret} !important;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 12px;
}

// TODO: Is this useful? Remove?
.select[multiple] {
  height: auto;
}

.checkbox {
  flex-shrink: 0;
  width: ${x.form.checkboxSize};
  height: ${x.form.checkboxSize};
  margin: 0 0.8rem 0 0;
  appearance: none;
  border: ${x.form.checkboxBorder};
  border-radius: ${x.form.checkboxRadius};
  // vertical-align: text-bottom;
  cursor: pointer;

  &:checked {
    background-color: ${x.form.checkboxCheckedBackgroundColor};
    border-color: ${x.form.checkboxCheckedBorderColor};
    background-image: ${x.form.checkboxTick};
  }

  &:hover {
    border-color: ${x.input.hoverBorderColor};
    outline: none;
    box-shadow: 0 0 0 ${x.input.outlineSize} ${x.input.hoverBorderColor};
  }

  &:focus,
  &:active {
    border-color: ${x.input.activeBorderColor};
    outline: none;
    box-shadow: 0 0 0 ${x.input.outlineSize} ${x.input.activeBorderColor};
  }

  &[disabled],
  &[disabled]:hover,
  &[disabled]:focus,
  &:disabled {
    color: ${x.input.disabledTextColor};
    background-color: ${x.input.disabledBackgroundColor};
    border-color: ${x.input.disabledBorder};
    outline: none;
    box-shadow: none;
  }

  & + .label {
    // display: inline;
    margin-bottom: 0;
    font-weight: ${x.textWeightMedium};
  }
}

// TODO: Custom radio input styles
.radio {}

// TODO: Custom file input styles
.file {}

// TODO: Custom range input styles
.range {}

/* Grouped form elements */

/* TODO: Make groups more flexible */
.input-group {
  display: inline-flex;

  & > .button {
    border: ${x.input.border};
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & > .input {
    margin-right: -${x.radius};
  }
}

/* Form assistance & validation */

.note {
  display: block;
  margin-top: ${x.form.helpMargin};
  color: ${x.form.helpTextColor};
}