2018-03-14 16:40:41 +00:00
|
|
|
@import '../constants';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* (1) Warning icon */
|
|
|
|
|
.warning,
|
|
|
|
|
.pin{
|
|
|
|
|
|
|
|
|
|
// add icon before
|
|
|
|
|
&:before{
|
|
|
|
|
content: '';
|
|
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 1.2em;
|
|
|
|
|
height: 1em;
|
|
|
|
|
|
|
|
|
|
margin-right: .3em;
|
|
|
|
|
|
|
|
|
|
background: url('/asset/svg/warning.svg@#{$rd-form-invalid-color}') center center no-repeat;
|
|
|
|
|
background-size: auto 90%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// icon color variants
|
|
|
|
|
&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
|
|
|
|
|
&.valid:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}'); }
|
|
|
|
|
&.search:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
|
|
|
|
// force red text
|
|
|
|
|
&.invalid{ color: $form-invalid-color; }
|
2018-03-18 16:17:31 +00:00
|
|
|
|
|
|
|
|
&[data-valid='1']{ color: $form-valid-color; }
|
|
|
|
|
&[data-neutral='1']{ color: $form-neutral-color; }
|
|
|
|
|
&[data-search='1']{ color: $form-search-color; }
|
2018-03-14 16:40:41 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* (2) Pin icon */
|
|
|
|
|
.pin{
|
|
|
|
|
|
|
|
|
|
// add icon before
|
|
|
|
|
&:before{
|
|
|
|
|
background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// icon color variants
|
|
|
|
|
&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
|
|
|
|
|
&.valid:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}'); }
|
|
|
|
|
&.search:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
|
|
|
|
}
|
