pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new styles for tooltips

Browse Source
This commit is contained in:
Andrew Croce 2018-08-14 14:05:50 -04:00
parent 765a1bac40
commit d793390df6
2 changed files with 16 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
styles/elements/_tooltip.scss
View File

@ -2,36 +2,31 @@
display: block;
z-index: 10000;
max-width: $text-max-width;
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
.tooltip-inner {
background: $color-black;
color: $color-white;
border-radius: $border-radius;
padding: $gap*2;
background-color: $color-aqua-lightest;
padding: $gap * 3;
border-left: ($gap / 2) solid $color-blue;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
width: 1rem;
height: 1rem;
position: absolute;
margin: 5px;
border-color: black;
background-color: $color-aqua-lightest;
z-index: 1;
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
transform: rotate(-45deg);
box-shadow: -2px 2px 2px 0 rgba(0,0,0,0.25);
}
}
@ -39,14 +34,10 @@
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
transform: rotate(135deg);
box-shadow: -2px 2px 2px -2px rgba(0,0,0,0.25);
}
}
@ -54,14 +45,9 @@
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
transform: rotate(-135deg);
}
}
@ -69,14 +55,9 @@
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
transform: rotate(45deg);
}
}

2
templates/components/tooltip.html
View File

@ -2,7 +2,7 @@
{% macro Tooltip(message,title='Help') -%}
<span class="icon-tooltip" v-tooltip="{content: '{{message}}'}">
<span class="icon-tooltip" v-tooltip.top="{content: '{{message}}'}">
{{ Icon('help') }}<span>{{ title }}</span>
</span>