consul/ui-v2/app/styles/components/form-elements/skin.scss

74 lines
1.6 KiB
SCSS
Raw Normal View History

%form-element-error > input,
%form-element-error > textarea {
border: $decor-border-100;
}
%radio-group label {
@extend %form-element;
}
[type='radio'],
%toggle span::before,
%toggle span::after {
cursor: pointer;
}
%form-element [type='text'],
%form-element [type='password'] {
border: $decor-border-100;
-moz-appearance: none;
-webkit-appearance: none;
}
%form-element [type='text'],
%form-element [type='password'] {
box-shadow: none;
border-radius: $radius-small;
}
%form-element [type='text']:focus,
%form-element [type='password']:focus,
%form-element textarea:focus {
outline: none;
box-shadow: none;
border-color: $ui-gray-400;
}
%form-element-error > input {
border-color: $ui-color-failure !important;
}
%toggle input:checked + span::before {
background-color: $ui-color-success;
}
%toggle span {
color: $ui-gray-900;
}
%form-element > em {
color: $ui-gray-400;
}
%toggle span::after {
border-radius: 100%;
background-color: $ui-white;
}
%toggle span::before {
background-color: $ui-gray-300;
border-radius: 7px;
}
%form-element > span {
color: $ui-gray-500;
}
%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 {
background-color: $ui-gray-050;
}
%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 {
border-color: $ui-color-action;
}