archiwum/old-gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalise card layout, toast css, tooltip css

Browse Source
This commit is contained in:
Jakub Mańczak
2021-07-31 20:53:51 +02:00
parent d3bccd3e12
commit 4aef927aba
3 changed files with 154 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/layouts/Default.vue
View File

@@ -4,6 +4,14 @@
</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');
@@ -46,10 +54,109 @@ html {
}
</style>
<static-query>
query {
metadata {
siteName
}
<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%
);
}
</static-query>
</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>