splincodewd
@splincodewd
Developer

Как на sass упростить написание стилей для форм?

Есть css, как можно сделать это на sass, чтобы код был лаконичней
input.myinp {
  display: block;
  width: 93%;
  padding: 9px;
  height: 20px;
  margin: 10px auto;
  color: #000;
  border: 1px solid #d7d8db;
}

input[type=text].valid,
input[type=email].valid,
input[type=number].valid,
input[type=date].valid,
input[type=datetime].valid,
input[type=time].valid

input[type=text]:focus.valid,
input[type=email]:focus.valid,
input[type=number]:focus.valid,
input[type=date]:focus.valid,
input[type=datetime]:focus.valid,
input[type=time]:focus.valid,

input[type=text]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=datetime]:focus:not([readonly]),
input[type=time]:focus:not([readonly])
{

  border-bottom: 1px solid #88ae00;
  box-shadow: 0 1px 0 0 #88ae00;
}

input:not([type]):focus:not([readonly])+label, input[type=text]:focus:not([readonly])+label, input[type=password]:focus:not([readonly])+label, input[type=email]:focus:not([readonly])+label, input[type=url]:focus:not([readonly])+label, input[type=time]:focus:not([readonly])+label, input[type=date]:focus:not([readonly])+label, input[type=datetime]:focus:not([readonly])+label, input[type=datetime-local]:focus:not([readonly])+label, input[type=tel]:focus:not([readonly])+label, input[type=number]:focus:not([readonly])+label, input[type=search]:focus:not([readonly])+label, textarea.materialize-textarea:focus:not([readonly])+label {
  color: #000
}

input[type=text]:focus:not([readonly]) {
    border-bottom: 1px solid #88ae00;
    box-shadow: 0 1px 0 0 #88ae00;
}

input[type=text]:focus:not([readonly])+label {
  color: #000;
  margin-top: 5px;
}

input[type=text]:disabled + label,
input[type=number]:disabled + label,
input[type=date]:disabled + label,
input[type=datetime]:disabled + label,
input[type=time]:disabled + label,

{
  color: rgba(0, 0, 0, 0.8);
}
  • Вопрос задан
  • 287 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы