mail/src/sass/blocks/basics/_form.scss

80 lines
1.5 KiB
SCSS
Raw Normal View History

2014-09-23 09:41:37 -04:00
.input-text {
background-color: white;
border: 1px solid $color-border-light;
color: $color-text;
font-size: $font-size-base;
padding: 0.5em 0.7em;
outline: none;
// ios
border-radius: 0;
-webkit-appearance: none;
&::placeholder {
color: $color-text-light;
}
&:invalid,
&.ng-invalid,
&--error {
border-color: $color-error;
}
}
.input-error-message {
margin: 5px 0;
padding: 0;
color: $color-error;
font-size: $font-size-base;
}
.search {
position: relative;
width: 100%;
.input-text {
width: 100%;
padding-left: 1.8em;
}
& > svg {
position: absolute;
left: 0.7em;
fill: $color-text-light;
top: 0.7em;
height: 1em;
width: 1em;
}
}
.checkbox {
input[type="checkbox"] {
display: none;
&:checked + span svg {
opacity: 1;
transform: scale(1, 1);
}
}
span {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1em;
border: 1px solid $color-text-light;
text-align: center;
svg {
display: inline-block;
fill: $color-main;
height: 90%;
width: 90%;
opacity: 0;
transform: scale(0.5, 0.5);
transform-origin: center center;
transition: opacity 0.2s, transform 0.2s;
}
}
&:hover,
&:focus {
span {
border-color: $color-text;
}
}
}