CSS
- 1 ответ
- 0 вопросов
1
Вклад в тег
@mixin flatFormBaseColorizer($a, $b, $c, $d) {
border-color: $a;
color: $c;
&:focus {
border-color: $b;
color: $d;
}
}
@mixin flatFormBase() {
border-width: 1px;
border-style: solid;
border-radius: 5px;
background-color: white;
font-size: 15px;
padding: 5px 7px;
@include flatFormBaseColorizer(join($colorsGray, ($fontColor, $fontColor))...);
&.partial {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
.flatForm {
input {
@include flatFormBase();
&[type="text"], &[type="password"] {
&.blue {
@include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
}
}
&[type="checkbox"] {
margin-right: 8px;
& + label {
font-size: 14px;
font-weight: bold;
text-align: left;
}
}
}
textarea {
@include flatFormBase();
&.blue {
@include flatFormBaseColorizer(join($colorsBlue, ($fontColor, $fontColor))...);
}
&.green {
@include flatFormBaseColorizer(join($colorsGreen, ($fontColor, $fontColor))...);
}
}
select {
@include flatFormBase();
}
input[type="submit"], input[type="reset"], button {
@include flatFormButtonColorizer($colorsGray...);
&.blue {
@include flatFormButtonColorizer($colorsBlue...);
}
&.green {
@include flatFormButtonColorizer($colorsGreen...);
}
&.red {
@include flatFormButtonColorizer($colorsRed...);
}
}
}