diff options
author | Annabel Gray <annabel.m.gray@gmail.com> | 2018-07-18 19:08:43 +0300 |
---|---|---|
committer | Clement Ho <clemmakesapps@gmail.com> | 2018-07-18 19:08:43 +0300 |
commit | 359018f5a7dca9601e36bb65d6218798bca297a3 (patch) | |
tree | 57ea997f29643d9485e2dbf8df20a4bbe2842927 /app | |
parent | 6c6988cb5ef8bb749da058b5fe1bf0e188e8062f (diff) |
Resolve "Fix arrow for popovers on monitoring graph"
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/monitoring/components/graph/flag.vue | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/environments.scss | 42 |
2 files changed, 35 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue index 92fe98508ad..1e6803abf3a 100644 --- a/app/assets/javascripts/monitoring/components/graph/flag.vue +++ b/app/assets/javascripts/monitoring/components/graph/flag.vue @@ -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"> diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 3144dcc4dc0..8915b323b3c 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -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; } } |