ptut-vhost/webpack/scss/global.scss

109 lines
1.5 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;
}
[data-strike='1'],
.strike{
text-decoration: line-through;
opacity: .5;
}
[data-tooltip]{
position: relative;
cursor: pointer;
&:after{
content: attr(data-tooltip);
display: block;
position: absolute;
top: calc( 100% + .3em );
left: 50%;
margin-left: -.1em;
padding: .4em .6em;
border-radius: 3px / 3px;
box-shadow: 0 0 .5em 0 #fff;
font-size: .7em;
color: #ddd;
background-color: #444;
transform: translateX(-50%) translateY(-50%) scale(0);
transition: transform .1s ease-in-out;
z-index: 1000;
}
&:hover:not([data-tooltip='']):after{
transform: translateX(-50%) translateY(0) scale(1);
}
}