M
M
Maxim Ivanov2016-07-27 15:10:19
Sass
Maxim Ivanov, 2016-07-27 15:10:19

How to simplify writing styles for forms in sass?

There is css, how can I do it in sass so that the code is more concise

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);
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question