You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
87 lines
2.0 KiB
$sidebar-width: rems(19);
|
|
|
|
// $colour-1: #00ADEF;
|
|
// $colour-2: #FF015B;
|
|
// $colour-3: #E6C229;
|
|
// $colour-4: #F17105;
|
|
// $colour-5: #8EA604;
|
|
|
|
$colour-1: #00ADEF; // blue
|
|
$colour-2: #DD57EF; // pink
|
|
$colour-3: #E6C74B; // yellow
|
|
$colour-4: #D89E59; // orange
|
|
$colour-5: #02CA9E; // green
|
|
|
|
$white: #FFFEFE;
|
|
|
|
@mixin default-box-shadow($direction: top, $distance: 1, $inset: false, $additional-shadow: false) {
|
|
@if capable_of(box-shadow) {
|
|
$offset: 0.2em;
|
|
@if $direction == right or $direction == bottom {
|
|
$offset: -$offset;
|
|
}
|
|
@if $direction == left or $direction == right {
|
|
$offset: '#{$offset} 0';
|
|
} @else {
|
|
$offset: '0 #{$offset}';
|
|
}
|
|
@if $inset {
|
|
$offset: 'inset #{$offset}';
|
|
}
|
|
@if $additional-shadow {
|
|
$additional-shadow: ', #{$additional-shadow}';
|
|
} @else {
|
|
$additional-shadow: '';
|
|
}
|
|
@include _(box-shadow, #{$offset} 0.8em #{-0.2em * $distance} #000#{$additional-shadow});
|
|
}
|
|
}
|
|
|
|
@mixin monospace-font {
|
|
@include font(monospace);
|
|
@include font(monospace-bold);
|
|
}
|
|
|
|
@mixin translation-pointer {
|
|
@include keyframes(bouncy) {
|
|
from { transform: translateY(-0.25em); }
|
|
to { transform: translateY(0.25em); }
|
|
}
|
|
|
|
#lingua-franca-pointer {
|
|
$colour: $colour-5;
|
|
width: 0.6667em;
|
|
height: 1.25em;
|
|
background-color: $colour;
|
|
z-index: 1000;
|
|
margin-left: -0.5em;
|
|
margin-top: -2em;
|
|
@include _(mix-blend-mode, exclusion);
|
|
@include default-box-shadow(top, 2);
|
|
@include _(animation, bouncy 1s infinite alternate);
|
|
|
|
$twidth: 0.8em;
|
|
@include after {
|
|
content: '';
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-color: $colour transparent transparent;
|
|
border-width: $twidth $twidth 0;
|
|
top: 100%;
|
|
left: -.4em;
|
|
}
|
|
|
|
&.up {
|
|
margin-top: 2em;
|
|
|
|
@include after {
|
|
top: auto;
|
|
bottom: 100%;
|
|
border-color: transparent transparent $colour;
|
|
border-width: 0 $twidth $twidth;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|