ptut-vhost/webpack/scss/global/before-icon.scss

209 lines
4.8 KiB
SCSS

@import '../constants';
/* (1) Warning icon */
.warning,
.user,
.time,
.pin,
.cm,
.back,
.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}'); }
}
/* (8) BACK */
.back{
// add icon before
&:before{
background-image: url('/asset/svg/back.svg@#{$menu-item-inactive}');
}
// icon color variants
&.neutral:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-neutral-color}'); }
&.invalid:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-invalid-color}'); }
&.valid:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-valid-color}'); }
&.search:before{ background-image: url('/asset/svg/back.svg@#{$rd-form-search-color}'); }
// hover
&:hover:before{ background-image: url('/asset/svg/back.svg@ffffff'); }
}