ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling tooltips and popovers

Browse Source
This commit is contained in:
Grzegorz Leoniec 2018-10-16 09:41:33 +02:00
parent 9912f88ae5
commit b462f1c6c4
1 changed files with 110 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
assets/styles/imports/_tooltip.scss Normal file
View File

@ -0,0 +1,110 @@
@import 'vue-cion-design-system/src/system/tokens/generated/tokens.scss';
.tooltip {
display: block !important;
z-index: 10000;
.tooltip-inner {
background: white;
color: $text-color-base;
border-radius: $border-radius-large;
padding: $space-x-small $space-small;
box-shadow: $box-shadow-large;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: white;
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;
}
}
&.popover {
.popover-inner {
background: white;
color: $text-color-base;
border-radius: $border-radius-large;
padding: $space-x-small $space-small;
box-shadow: $box-shadow-large;
}
.popover-arrow {
border-color: white;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}