Mercurial > gemma

comparison client/src/application/assets/tooltip.scss @ 585:ef307bd6b5d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: restructured client application To make the application more accessible for developers, the structure was reorganized. Instead of sticking to technical terminology, the application terminology is according to the domain: I.e. "map" contains everything regarding map (including store).
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 07 Sep 2018 11:13:56 +0200
parents
children ca628dce90dd
comparison
equal deleted inserted replaced
584:8b66a10aaf8a 585:ef307bd6b5d8
1 .tooltip {
2 display: block !important;
3 z-index: 10000;
4
5 .tooltip-inner {
6 background: black;
7 color: white;
8 border-radius: 16px;
9 padding: 5px 10px 4px;
10 }
11
12 .tooltip-arrow {
13 width: 0;
14 height: 0;
15 border-style: solid;
16 position: absolute;
17 margin: 5px;
18 border-color: black;
19 z-index: 1;
20 }
21
22 &[x-placement^="top"] {
23 margin-bottom: 5px;
24
25 .tooltip-arrow {
26 border-width: 5px 5px 0 5px;
27 border-left-color: transparent !important;
28 border-right-color: transparent !important;
29 border-bottom-color: transparent !important;
30 bottom: -5px;
31 left: calc(50% - 5px);
32 margin-top: 0;
33 margin-bottom: 0;
34 }
35 }
36
37 &[x-placement^="bottom"] {
38 margin-top: 5px;
39
40 .tooltip-arrow {
41 border-width: 0 5px 5px 5px;
42 border-left-color: transparent !important;
43 border-right-color: transparent !important;
44 border-top-color: transparent !important;
45 top: -5px;
46 left: calc(50% - 5px);
47 margin-top: 0;
48 margin-bottom: 0;
49 }
50 }
51
52 &[x-placement^="right"] {
53 margin-left: 5px;
54
55 .tooltip-arrow {
56 border-width: 5px 5px 5px 0;
57 border-left-color: transparent !important;
58 border-top-color: transparent !important;
59 border-bottom-color: transparent !important;
60 left: -5px;
61 top: calc(50% - 5px);
62 margin-left: 0;
63 margin-right: 0;
64 }
65 }
66
67 &[x-placement^="left"] {
68 margin-right: 5px;
69
70 .tooltip-arrow {
71 border-width: 5px 0 5px 5px;
72 border-top-color: transparent !important;
73 border-right-color: transparent !important;
74 border-bottom-color: transparent !important;
75 right: -5px;
76 top: calc(50% - 5px);
77 margin-left: 0;
78 margin-right: 0;
79 }
80 }
81
82 &.popover {
83 $color: #f9f9f9;
84
85 .popover-inner {
86 background: $color;
87 color: black;
88 padding: 24px;
89 border-radius: 5px;
90 box-shadow: 0 5px 30px rgba(black, 0.1);
91 }
92
93 .popover-arrow {
94 border-color: $color;
95 }
96 }
97
98 &[aria-hidden="true"] {
99 visibility: hidden;
100 opacity: 0;
101 transition: opacity 0.15s, visibility 0.15s;
102 }
103
104 &[aria-hidden="false"] {
105 visibility: visible;
106 opacity: 1;
107 transition: opacity 0.15s;
108 }
109 }