Тематические элементы формы с Sass

Вводимые данные, без сомнения, охватывают значительную часть Интернета. Так как элементы управления формами могут и будут встречаться пользователями ежедневно, кажется уместным лишь уделить внимание нескольким подозреваемым, предоставив каждому из них силу Sass, чтобы помочь нам быстро осветить вклад нашего проекта.

Заполнители

Заполнитель — это подсказка пользователям о том, какую информацию можно ввести в соответствующий элемент управления. Он применяется, когда значение атрибута typetextsearchtelurlemail в противном случае это игнорируется. К сожалению, для стилизации местозаполнителя требуются соответствующие префиксы поставщиков, связанные с каждым требуемым псевдо, так что авторы могут обеспечить охват основных поставщиков браузеров, таких как IE, Firefox, Safari, Chrome и Opera.

Mixin Helper

Этот заполнитель @mixin Я также взял на себя смелость создать карту Sass, которая содержит все свойства, которые вы можете стилизовать.

index.html

 <label for="username">Name</label>
<input type="text" name="username" id="username" placeholder="first, last">

_placeholder-mixin.scss

Директива @at-root используемая этими миксинами, работает путем переключения контекста, в который помещается вложенный вызов в вашем Sass, и переносит объявление на верхний уровень цепочки селектора.

Примечание . На данный момент post -sass не может скомпилировать этот миксин-заполнитель из-за проблем интерполяции со строкой @at-root #{&}#{$pseudo}

 $pseudo-phprefix: "::-webkit-input-placeholder" "::-moz-placeholder" ":-ms-input-placeholder" "::placeholder";

$ph-styles: (
  font-family: sans-serif,
  font-size: medium,
  font-style: normal,
  font-weight: normal,
  color: inherit,
  letter-spacing : normal,
  line-height: normal,
  text-align: inherit,
  text-decoration: inherit,
  padding: 0
);

@mixin placeholder-theme($styles) {
  @each $pseudo in $pseudo-phprefix {

    @at-root #{&}#{$pseudo} {
      @each $key, $value in $styles {
        #{$key}: #{$value};
      }
    }

  }
}

@mixin placeholder {
  @each $pseudo in $pseudo-phprefix {

    @at-root #{&}#{$pseudo} {
      @content
    }

  }
}

@mixin@include placeholder { color: red; }

input {
@include placeholder-theme($ph-styles);
} Второй метод использует преимущество использования целевого селектора, чтобы избежать глобальных стилей определенных и нежелательных заполнителей в вашей системе.

_placeholder-mixin.scss

 ::-webkit-input-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}
::placeholder {
  color: red;
}
input::-webkit-input-placeholder {
  font-family: sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
  text-decoration: inherit;
  padding: 0;
}
input::-moz-placeholder {
  font-family: sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
  text-decoration: inherit;
  padding: 0;
}
input:-ms-input-placeholder {
  font-family: sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
  text-decoration: inherit;
  padding: 0;
}
input::placeholder {
  font-family: sans-serif;
  font-size: medium;
  font-style: normal;
  font-weight: normal;
  color: inherit;
  letter-spacing: normal;
  line-height: normal;
  text-align: inherit;
  text-decoration: inherit;
  padding: 0;
}

CSS-вывод

 <label for="phone">Cell Phone</label>
<input type="tel" name="phone" class="jpinput" id="phone" placeholder="(555) 555-5555">

Слова предостережения : избегайте использования атрибута заполнителя вместо метки. Оба варианта различаются по назначению, поскольку атрибут label описывает роль элемента формы; то есть указывает на то, какая информация ожидается. Атрибут placeholder является подсказкой о формате, который должен принимать контент. В некоторых случаях атрибут placeholder никогда не отображается пользователю, поэтому форма должна быть понятной без него.

Прыжки Заполнитель Эффект

Это довольно крутой эффект для стиля и темы, но реагирует только в WebKit / Blink. Некоторые также называют это паттерном «Плавающая метка», когда во время его дебюта вызвали увлекательные дискуссии о необходимости такого паттерна.

 ::-webkit-input-placeholder[style*=hidden]

 @mixin

 $slabel-theme: (
  border: 0,
  radius: 0,
  padding: 0,
  font: inherit,
  bg: white,
  label-bg: white,
  label-color: inherit,
  error-color: #E82C0C,
  placeholder-color: #B9E0D6,
  success-color: #5C832F
);

 display: none

 $select-arrow: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjgzIDE2LjQybDkuMTcgOS4xNyA5LjE3LTkuMTcgMi44MyAyLjgzLTEyIDEyLTEyLTEyeiIvPjxwYXRoIGQ9Ik0wLS43NWg0OHY0OGgtNDh6IiBmaWxsPSJub25lIi8+PC9zdmc+';
$select-padding: 0;

select {
  border-radius: 0;
  -webkit-appearance: none; // autoprefixer won't add this and we still need it
  appearance: none;
  cursor: pointer;
  padding: $select-padding;
  width: 100%;

  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    background-image: url(#{$select-arrow});
    background-position: right 0 top 50%;
    background-repeat: no-repeat;
  }
}

 <label for="radioa" class="input-control radio">
  <input type="radio" id="radioa" name="radio" value="radio-value">
  <span class="input-control__indicator"></span> Send Me Stuff!
</label>

<label for="radiob" class="input-control radio">
  <input type="radio" id="radiob" name="radio" value="radio-value">
  <span class="input-control__indicator"></span> Don't send a friggin' thing.
</label>

 $input-radius: 0 !default;
$input-unit: 16px !default; // accepts px, em, rem
$input-spacing: $input-unit * 1.5 !default; // adjust depending on font-family
$input-font: sans-serif !default;

$radio-bg: white !default;
$radio-txt-color: #AACCFF !default;

$radio-checked-custom: (
  background: #0081D0
) !default;
$radio-checked: #222233 !default;
$radio-checked-focus: white !default;

 <input type="checkbox" id="optiona" name="optiona">
<label for="optiona">Click Me
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 10 L 90 90"></path>
    <path d="M 90 10 L 10 90"></path>
  </svg>
</label>

 $font-size: 2em; // adjust accordingly
$ratio: 1; // adjust accordingly
$size: $ratio + em;
$ratio: $ratio;
$gutter: 5px; // adjust accordingly
$stroke-dash: 270;
$stroke: (
  thickness: $gutter/3,
  style: solid,
  color: #fff
);
$mark-ischecked: (
  stroke-dashoffset: 0
); // define css properties
$label-ischecked: (); // define css properties
$svg-ischecked: (); // define css properties

 <div class="slider-checkbox">
  <input type="checkbox" id="option" aria-checked="false" role="checkbox">
  <label for="option">Label Text</label>
</div>

 $checkbox-style: rounded; // accepts 'rounded' or 'null'
$checkbox-sizing-unit: 6rem; // adjust this value for sizing
$checkbox-height: $checkbox-sizing-unit / 1/4;
$checkbox-position-unit: $checkbox-sizing-unit * 3/4;
$checkbox-speed: 150ms;
$checkbox-off-bg: #E8DFE7;
$checkbox-on-bg: #4fbe79;
$checkbox-btn-bg: #FFFFFD;

 @mixin valid {
  &:valid,
  &:empty:valid,
  &:focus:empty:valid {
    @content;
  }
}

@mixin invalid {
  &:invalid,
  &:focus:invalid {
    @content;
  }
}

 :required
:optional
:enabled
:disabled
:not(:checked)
:in-range
:out-of-range
:user-error
:empty
:blank