163 lines
3.2 KiB
Vue
163 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<static-query>
|
|
query {
|
|
metadata {
|
|
siteName
|
|
}
|
|
}
|
|
</static-query>
|
|
|
|
<style lang="scss">
|
|
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
|
|
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@600&display=swap');
|
|
:root {
|
|
--black: hsl(0, 0%, 10%);
|
|
--white: hsl(0, 0%, 90%);
|
|
--gray: hsl(0, 0%, 20%);
|
|
--graytext: hsl(0, 0%, 55%);
|
|
--red: #fb636b;
|
|
--light-red: rgba(251, 99, 107, 0.25);
|
|
--blue: #61f2ea;
|
|
--radius: 6px;
|
|
--trandur: 0.1s;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
html {
|
|
background-color: var(--black);
|
|
color: var(--white);
|
|
font-family: 'Quicksand', sans-serif;
|
|
font-size: 16px;
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-family: 'Lexend', sans-serif;
|
|
}
|
|
a {
|
|
color: var(--red);
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
transition-duration: var(--trandur);
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--light-red);
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// TOAST STYLING
|
|
.toastcss {
|
|
background-color: var(--gray) !important;
|
|
border-left: 4px solid var(--red);
|
|
border-bottom: 3px solid;
|
|
border-image-slice: 1;
|
|
border-image-source: linear-gradient(
|
|
90deg,
|
|
rgba(251, 99, 107, 1) 0%,
|
|
rgba(97, 242, 234, 1) 100%
|
|
);
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
// TOOLTIP STYLING
|
|
.tooltip {
|
|
display: block !important;
|
|
z-index: 10000;
|
|
.tooltip-inner {
|
|
background: var(--gray);
|
|
box-shadow: 0 6px 18px black;
|
|
border-radius: 4px;
|
|
padding: 5px 10px 4px;
|
|
border-bottom: 3px solid;
|
|
border-image-slice: 1;
|
|
border-image-source: linear-gradient(
|
|
90deg,
|
|
rgba(251, 99, 107, 1) 0%,
|
|
rgba(97, 242, 234, 1) 100%
|
|
);
|
|
}
|
|
.tooltip-arrow {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
position: absolute;
|
|
margin: 5px;
|
|
border-color: #aeabab;
|
|
z-index: 1;
|
|
}
|
|
&[x-placement^='top'] {
|
|
margin-bottom: 5px;
|
|
.tooltip-arrow {
|
|
border-width: 5px 5px 0 5px;
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
bottom: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&[x-placement^='bottom'] {
|
|
margin-top: 5px;
|
|
.tooltip-arrow {
|
|
border-width: 0 5px 5px 5px;
|
|
border-left-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
top: -5px;
|
|
left: calc(50% - 5px);
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
&[x-placement^='right'] {
|
|
margin-left: 5px;
|
|
.tooltip-arrow {
|
|
border-width: 5px 5px 5px 0;
|
|
border-left-color: transparent !important;
|
|
border-top-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
left: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&[x-placement^='left'] {
|
|
margin-right: 5px;
|
|
.tooltip-arrow {
|
|
border-width: 5px 0 5px 5px;
|
|
border-top-color: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: transparent !important;
|
|
right: -5px;
|
|
top: calc(50% - 5px);
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
&[aria-hidden='true'] {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: opacity 0.15s, visibility 0.15s;
|
|
}
|
|
&[aria-hidden='false'] {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
transition: opacity 0.15s;
|
|
}
|
|
}
|
|
</style>
|