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

Merge pull request #173 from dod-ccpo/ui/tooltip-styles

Browse Source 
new styles for tooltips
This commit is contained in:
andrewdds 2018-08-14 14:23:35 -04:00 committed by GitHub
commit a63ee9a0e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
styles/elements/_tooltip.scss
View File

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

2
templates/components/tooltip.html
View File

@ -2,7 +2,7 @@
{% macro Tooltip(message,title='Help') -%} {% 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> {{ Icon('help') }}<span>{{ title }}</span>
</span> </span>