Commit 20938681 authored by Clement Ho's avatar Clement Ho

Merge branch '41784-monitoring-graph-popovers' into 'master'

Resolve "Fix arrow for popovers on monitoring graph"

Closes #41784

See merge request gitlab-org/gitlab-ce!20655
parents 6c6988cb 359018f5
......@@ -125,6 +125,7 @@ export default {
:class="flagOrientation"
class="prometheus-graph-flag popover"
>
<div class="arrow-shadow"></div>
<div class="arrow"></div>
<div class="popover-title">
<h5 v-if="deploymentFlagData">
......
......@@ -293,6 +293,8 @@
.prometheus-graph-flag {
display: block;
min-width: 160px;
border: 0;
box-shadow: 0 1px 4px 0 $black-transparent;
h5 {
padding: 0;
......@@ -312,7 +314,6 @@
&.popover {
padding: 0;
border: 1px solid $border-color;
&.left {
left: auto;
......@@ -320,12 +321,19 @@
margin-right: 10px;
> .arrow {
right: -16px;
right: -14px;
border-left-color: $border-color;
}
> .arrow::after {
border-left-color: $theme-gray-50;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 4px solid $theme-gray-50;
}
.arrow-shadow {
right: -3px;
box-shadow: 1px 0 9px 0 $black-transparent;
}
}
......@@ -335,19 +343,35 @@
margin-left: 10px;
> .arrow {
left: -16px;
left: -7px;
border-right-color: $border-color;
}
> .arrow::after {
border-right-color: $theme-gray-50;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 4px solid $theme-gray-50;
}
.arrow-shadow {
left: -3px;
box-shadow: 1px 0 8px 0 $black-transparent;
}
}
> .arrow {
top: 16px;
margin-top: -8px;
border-width: 8px;
top: 10px;
margin: 0;
}
.arrow-shadow {
content: "";
position: absolute;
width: 7px;
height: 7px;
background-color: transparent;
transform: rotate(45deg);
top: 13px;
}
> .popover-title,
......@@ -355,10 +379,12 @@
padding: 8px;
font-size: 12px;
white-space: nowrap;
position: relative;
}
> .popover-title {
background-color: $theme-gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
}
}
......
---
title: Update design for system metrics popovers
merge_request: 20655
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment