186 lines
4.2 KiB
SCSS
186 lines
4.2 KiB
SCSS
@import '../constants';
|
|
|
|
|
|
|
|
/* (1) Warning icon */
|
|
.warning,
|
|
.user,
|
|
.time,
|
|
.pin,
|
|
.cm,
|
|
.td,
|
|
.tp{
|
|
|
|
// 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%;
|
|
}
|
|
|
|
&.nospace:before{
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.reflow{
|
|
|
|
white-space: nowrap;
|
|
|
|
&:before{
|
|
font-size: 1.2em;
|
|
background-position: center bottom;
|
|
background-size: auto 70%;
|
|
}
|
|
|
|
}
|
|
|
|
&.big{
|
|
|
|
&:before{
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
}
|
|
|
|
// 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; }
|
|
|
|
&[data-valid='1']{ color: $form-valid-color; }
|
|
&[data-neutral='1']{ color: $form-neutral-color; }
|
|
&[data-search='1']{ color: $form-search-color; }
|
|
}
|
|
|
|
|
|
/* (2) Pin icon */
|
|
.pin{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/pin.svg@f4bd18');
|
|
}
|
|
|
|
// icon color variants
|
|
&.disabled:before{ background-image: url('/asset/svg/pin-disabled.svg@#{$rd-form-neutral-color}'); }
|
|
&.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}'); }
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (3) CM */
|
|
.cm{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/course.svg@#{$menu-item-inactive}');
|
|
}
|
|
|
|
&.active:before{ background-image: url('/asset/svg/course.svg@5bb8f0'); }
|
|
|
|
// icon color variants
|
|
&.neutral:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-neutral-color}'); }
|
|
&.valid:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-valid-color}'); }
|
|
&.search:before{ background-image: url('/asset/svg/course.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (4) TD */
|
|
.td{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/td.svg@#{$menu-item-inactive}');
|
|
}
|
|
|
|
&.active:before{ background-image: url('/asset/svg/td.svg@20b565'); }
|
|
|
|
// icon color variants
|
|
&.neutral:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-neutral-color}'); }
|
|
&.valid:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-valid-color}'); }
|
|
&.search:before{ background-image: url('/asset/svg/td.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (5) TP */
|
|
.tp{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/tp.svg@#{$menu-item-inactive}');
|
|
}
|
|
|
|
&.active:before{ background-image: url('/asset/svg/tp.svg@e85456'); }
|
|
|
|
// icon color variants
|
|
&.neutral:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-neutral-color}'); }
|
|
&.valid:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-valid-color}'); }
|
|
&.search:before{ background-image: url('/asset/svg/tp.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (6) USER */
|
|
.user{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/teacher.svg@#{$menu-item-inactive}');
|
|
}
|
|
|
|
|
|
// icon color variants
|
|
&.neutral:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}'); }
|
|
&.invalid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-invalid-color}'); }
|
|
&.valid:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-valid-color}'); }
|
|
&.search:before{ background-image: url('/asset/svg/teacher.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* (7) TIME */
|
|
.time{
|
|
|
|
// add icon before
|
|
&:before{
|
|
background-image: url('/asset/svg/time.svg@#{$menu-item-inactive}');
|
|
}
|
|
|
|
|
|
// icon color variants
|
|
&.neutral:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}'); }
|
|
&.invalid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-invalid-color}'); }
|
|
&.valid:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-valid-color}'); }
|
|
&.search:before{ background-image: url('/asset/svg/time.svg@#{$rd-form-search-color}'); }
|
|
|
|
|
|
} |