luxolus/open-nomad
2
0
Fork 0
Code Issues 1 Pull requests Packages Releases Wiki Activity

Add new is-static chart tooltip variant and decouple from charts

Browse source
This commit is contained in:
Michael Lange 2020-10-30 14:22:32 -07:00
parent ab4b04e940
commit d9cac96e5a
1 changed files with 101 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

195
ui/app/styles/charts/tooltip.scss
View file

@ -1,109 +1,116 @@
.chart {
position: relative;
}
.chart-tooltip {
position: absolute;
top: 0;
display: none;
background: $white;
color: rgba($black, 0.6);
border: 1px solid $grey;
min-width: 150px;
margin-top: -10px;
transform: translate(-50%, -100%);
transition: 0.2s top ease-out, 0.2s left ease-out;
.chart-tooltip {
position: absolute;
top: 0;
display: none;
background: $white;
color: rgba($black, 0.6);
border: 1px solid $grey;
min-width: 150px;
margin-top: -10px;
transform: translate(-50%, -100%);
transition: 0.2s top ease-out, 0.2s left ease-out;
pointer-events: none;
z-index: $z-tooltip;
&.is-snappy {
transition: 0.2s top ease-out, 0.05s left ease-out;
}
&::before {
pointer-events: none;
display: inline-block;
content: '';
width: 0;
height: 0;
border-top: 7px solid $grey;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
position: absolute;
transform: translateX(-7px);
left: 50%;
bottom: -8px;
z-index: $z-tooltip;
}
&.is-snappy {
transition: 0.2s top ease-out, 0.05s left ease-out;
}
&::after {
pointer-events: none;
display: inline-block;
content: '';
width: 0;
height: 0;
border-top: 6px solid $white;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
transform: translateX(-6px);
left: 50%;
bottom: -6px;
z-index: $z-tooltip;
}
&::before {
pointer-events: none;
display: inline-block;
content: '';
width: 0;
height: 0;
border-top: 7px solid $grey;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
position: absolute;
transform: translateX(-7px);
left: 50%;
bottom: -8px;
z-index: $z-tooltip;
}
&.active {
display: block;
}
&::after {
pointer-events: none;
display: inline-block;
content: '';
width: 0;
height: 0;
border-top: 6px solid $white;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
transform: translateX(-6px);
left: 50%;
bottom: -6px;
z-index: $z-tooltip;
}
&.active {
display: block;
}
ol {
list-style: none;
}
ol > li,
p {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0.25rem 0.5rem;
span {
display: inline-block;
}
ol {
list-style: none;
&.is-static {
.label {
white-space: nowrap;
font-weight: $weight-bold;
color: $black;
margin: 0;
&.is-empty {
color: rgba($grey, 0.6);
}
}
.value {
padding-left: 1em;
}
}
ol > li {
.label {
color: rgba($black, 0.6);
}
&.active {
color: $black;
background: $white-ter;
.label {
color: $black;
}
}
+ li {
border-top: 1px solid $grey-light;
background: $white;
}
}
}
ol > li,
p {
display: flex;
flex-flow: row;
flex-wrap: nowrap;
justify-content: space-between;
padding: 0.25rem 0.5rem;
span {
display: inline-block;
}
.label {
white-space: nowrap;
font-weight: $weight-bold;
color: $black;
margin: 0;
&.is-empty {
color: rgba($grey, 0.6);
}
}
.value {
padding-left: 1em;
}
}
ol > li {
.label {
color: rgba($black, 0.6);
}
&.active {
color: $black;
background: $white-ter;
.label {
color: $black;
}
}
+ li {
border-top: 1px solid $grey-light;
}
}
}