mixtape/zero.Web.UI/Sass/Core/_forms.scss

// placeholder
// --------------------------------

::placeholder
{
  color: var(--color-input-placeholder);
}


// inputs
// --------------------------------

input[type="text"], input[type="color"], input[type="date"], input[type="datetime"], input[type="email"], input[type="file"], input[type="month"], input[type="number"],
input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"],
textarea, .ui-native-select
{
  @extend %font;
  background: var(--color-input);
  border: 1px solid transparent;
  font-size: var(--font-size);
  display: inline-block;
  height: 42px;
  padding: 6px 12px;
  line-height: 1.5;
  color: var(--color-text);
  border-radius: var(--radius);
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;

  &:focus
  {
    background-color: var(--color-input-focus-bg);
    border: var(--color-input-focus-border);
    box-shadow: var(--color-input-focus-shadow);
    outline: none;
  }

  &[disabled], &[readonly]
  {
    border-color: transparent !important;
    padding: 0;
    height: auto;
  }
}

select:focus
{
  /*background-color: #fff;
  border: 1px solid var(--color-line-onbg);
  box-shadow: 0 0 0 4px var(--color-input);*/
  outline: none;
}


// textarea
// --------------------------------

textarea
{
  resize: vertical;
  min-height: 80px;
}


// select
// --------------------------------

.ui-native-select
{
  position: relative;
  font-size: var(--font-size);

  select
  {
    @extend %font;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    padding-left: 9px;
    -webkit-appearance: none;
    border: none;
    font-size: var(--font-size);
    background: none;
    border: 1px solid transparent;
    color: var(--color-text);
    border-radius: var(--radius);
  }

  select:focus
  {
    background-color: var(--color-input-focus-bg);
    border: var(--color-input-focus-border);
    box-shadow: var(--color-input-focus-shadow);
    outline: none;
  }

  &:after
  {
    @extend %font-icon;
    content: "\e842";
    position: absolute;
    right: 12px;
    top: 0;
    height: 42px;
    line-height: 40px;
  }
}


// checkbox
// --------------------------------

.ui-native-check
{
  position: relative;
  top: 1px;
  font-size: var(--font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 1;

  input
  {
    width: 0;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-appearance: none;
    border: none;
  }
}

.ui-native-check-toggle
{
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid transparent;
  background: var(--color-check);
  margin-right: 10px;
  position: relative;
  top: -1px;

  &:before
  {
    content: "\e83f";
    @extend %font-icon;
    color: transparent;
    font-size: var(--font-size-xs);
  }

  input:focus ~ &
  {
    background: var(--color-input-focus-bg) !important;
    border: var(--color-input-focus-border);
    box-shadow: var(--color-input-focus-shadow);
    outline: none;
  }

  input:checked ~ &
  {
    background: var(--color-checked);

    &:before
    {
      color: var(--color-checked-fg);
    }
  }
}