47 lines
1.1 KiB
SCSS
47 lines
1.1 KiB
SCSS
|
@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; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* (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}'); }
|
||
|
|
|
||
|
|
}
|