153 lines
2.2 KiB
SCSS
153 lines
2.2 KiB
SCSS
@import 'constants';
|
|
|
|
/* (1) Input */
|
|
@import 'global/input';
|
|
|
|
/* (2) Button */
|
|
@import 'global/button';
|
|
|
|
/* (3) classes that add icons before text */
|
|
@import 'global/before-icon';
|
|
|
|
/* (4) tags */
|
|
@import 'global/tag';
|
|
|
|
|
|
.error, [data-error='1']{ font-weight: bold; color: $form-invalid-color; }
|
|
.success, [data-success='1']{ color: $form-valid-color; }
|
|
|
|
|
|
|
|
|
|
/* (4) Links */
|
|
a{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
|
|
&:after{
|
|
content: '';
|
|
display: block;
|
|
|
|
width: 0%;
|
|
height: .1em;
|
|
|
|
background-color: #ddd;
|
|
|
|
transition: width .1s ease-in-out;
|
|
|
|
}
|
|
|
|
&:hover:after{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* (5) Greyed text */
|
|
.grey{
|
|
color: $secondary-color;
|
|
}
|
|
|
|
/* (6) pointer cursor (2 times the class to increase priority) */
|
|
.pointer.pointer{
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* (7) Mono font */
|
|
.mono{
|
|
font-family: 'Mono';
|
|
font-size: .9em;
|
|
}
|
|
|
|
|
|
/* (8) Striked text */
|
|
[data-strike='1'],
|
|
.strike{
|
|
text-decoration: line-through;
|
|
opacity: .5;
|
|
}
|
|
|
|
/* (9) Icons (1em wide) */
|
|
.user-icon, .time-icon{
|
|
|
|
display: block;
|
|
position: relative;
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
background: url('/asset/svg/teacher.svg@#{$rd-form-neutral-color}') center center no-repeat;
|
|
background-size: contain;
|
|
|
|
&.time-icon{
|
|
background-image: url('/asset/svg/time.svg@#{$rd-form-neutral-color}');
|
|
}
|
|
}
|
|
|
|
|
|
/* (10) Toggling tooltip on hover */
|
|
[data-tooltip]{
|
|
|
|
position: relative;
|
|
|
|
cursor: pointer;
|
|
|
|
&:before{
|
|
content: attr(data-tooltip);
|
|
|
|
display: block;
|
|
position: absolute;
|
|
top: calc( 100% + 1em );
|
|
left: 50%;
|
|
|
|
margin-left: -.1em;
|
|
|
|
padding: .4em .6em;
|
|
|
|
border-radius: 3px / 3px;
|
|
|
|
box-shadow: 0 0 .5em 0 #fff;
|
|
|
|
font-size: .7em;
|
|
color: #ddd;
|
|
letter-spacing: 0;
|
|
|
|
background-color: #444;
|
|
|
|
transform: translateX(-50%) translateY(-50%) scale(0);
|
|
|
|
transition: transform .1s ease-in-out;
|
|
|
|
z-index: 999;
|
|
}
|
|
|
|
&:hover:not([data-tooltip='']):before{
|
|
transform: translateX(-50%) translateY(0) scale(1);
|
|
}
|
|
|
|
|
|
&:after{
|
|
content: '';
|
|
|
|
display: block;
|
|
position: absolute;
|
|
top: calc( 100% + .6em );
|
|
left: 50%;
|
|
width: .4em;
|
|
height: .4em;
|
|
|
|
background-color: #444;
|
|
|
|
transform: translateX(-50%) rotate(45deg) scale(0);
|
|
|
|
transition: transform .1s ease-in-out;
|
|
|
|
z-index: 1000;
|
|
|
|
}
|
|
|
|
&:hover:not([data-tooltip='']):after{
|
|
transform: translateX(-50%) rotate(45deg) scale(1);
|
|
}
|
|
|
|
|
|
|
|
} |