2018-08-29 11:11:58 +00:00
|
|
|
%radio-group label {
|
|
|
|
@extend %form-element;
|
|
|
|
}
|
2018-09-21 09:18:32 +00:00
|
|
|
%form-element-error > input,
|
|
|
|
%form-element-error > textarea {
|
|
|
|
border: $decor-border-100;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|
|
|
|
%form-element [type='text'],
|
2018-09-21 09:18:32 +00:00
|
|
|
%form-element [type='password'],
|
|
|
|
%form-element textarea {
|
2018-08-29 11:11:58 +00:00
|
|
|
-moz-appearance: none;
|
|
|
|
-webkit-appearance: none;
|
2018-09-21 09:18:32 +00:00
|
|
|
box-shadow: inset 0 4px 1px rgba(0, 0, 0, .06);
|
|
|
|
border-radius: $decor-radius-100;
|
|
|
|
border: $decor-border-100;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|
|
|
|
%form-element [type='text']:focus,
|
|
|
|
%form-element [type='password']:focus,
|
|
|
|
%form-element textarea:focus {
|
|
|
|
outline: none;
|
2018-09-21 09:18:32 +00:00
|
|
|
}
|
|
|
|
%form-element > em > code {
|
|
|
|
border-radius: $decor-radius-100;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|
|
|
|
%form-element-error > input {
|
|
|
|
border-color: $ui-color-failure !important;
|
|
|
|
}
|
|
|
|
%form-element > em {
|
|
|
|
color: $ui-gray-400;
|
|
|
|
}
|
2018-09-21 09:18:32 +00:00
|
|
|
%form-element > em > code {
|
|
|
|
background-color: $ui-gray-200;
|
|
|
|
color: $brand-magenta-600;
|
|
|
|
border-radius: $decor-radius-100;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|
|
|
|
%form-element > span {
|
2018-09-21 09:18:32 +00:00
|
|
|
color: $ui-black;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|
|
|
|
%form-element [type='text'],
|
|
|
|
%form-element [type='password'],
|
|
|
|
%form-element textarea {
|
|
|
|
color: $ui-gray-500;
|
|
|
|
}
|
|
|
|
%form-element [type='text'],
|
|
|
|
%form-element [type='password'],
|
|
|
|
%form-element textarea {
|
|
|
|
border-color: $ui-gray-300;
|
|
|
|
}
|
|
|
|
%form-element [type='text']:hover,
|
|
|
|
%form-element [type='password']:hover,
|
|
|
|
%form-element textarea:hover {
|
2018-09-21 09:18:32 +00:00
|
|
|
border-color: $ui-gray-500;
|
|
|
|
}
|
|
|
|
%form-element [type='text']:focus,
|
|
|
|
%form-element [type='password']:focus,
|
|
|
|
%form-element textarea:focus {
|
|
|
|
border-color: $ui-blue-500;
|
2018-08-29 11:11:58 +00:00
|
|
|
}
|