ptut-vhost/webpack/scss/global.scss

153 lines
2.2 KiB
SCSS
Raw Normal View History

@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 */
2018-02-22 14:17:07 +00:00
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;
2018-03-18 15:31:03 +00:00
}
/* (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);
}
}