IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Update css to use the border-radius variable and add a new variable for the popper's distance to its ref

Browse Source
This commit is contained in:
Johannes Schill
2018-12-05 09:39:03 +01:00
parent e55659192a
commit 0a8f23d8a6
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/sass/components/_popper.scss
View File

@@ -1,3 +1,5 @@
$popper-margin-from-ref: 5px;
.popper { .popper {
position: absolute; position: absolute;
z-index: $zindex-tooltip; z-index: $zindex-tooltip;
@@ -20,14 +22,14 @@
.popper__background { .popper__background {
background: $tooltipBackground; background: $tooltipBackground;
border-radius: 3px; border-radius: $border-radius;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 10px; padding: 10px;
} }
// Top // Top
.popper[data-placement^='top'] { .popper[data-placement^='top'] {
padding-bottom: 5px; padding-bottom: $popper-margin-from-ref;
} }
.popper[data-placement^='top'] .popper__arrow { .popper[data-placement^='top'] .popper__arrow {
border-width: 5px 5px 0 5px; border-width: 5px 5px 0 5px;
@@ -41,7 +43,7 @@
// Bottom // Bottom
.popper[data-placement^='bottom'] { .popper[data-placement^='bottom'] {
padding-top: 5px; padding-top: $popper-margin-from-ref;
} }
.popper[data-placement^='bottom'] .popper__arrow { .popper[data-placement^='bottom'] .popper__arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
@@ -53,7 +55,7 @@
} }
.popper[data-placement^='bottom-start'] { .popper[data-placement^='bottom-start'] {
padding-top: 5px; padding-top: $popper-margin-from-ref;
} }
.popper[data-placement^='bottom-start'] .popper__arrow { .popper[data-placement^='bottom-start'] .popper__arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
@@ -65,7 +67,7 @@
} }
.popper[data-placement^='bottom-end'] { .popper[data-placement^='bottom-end'] {
padding-top: 5px; padding-top: $popper-margin-from-ref;
} }
.popper[data-placement^='bottom-end'] .popper__arrow { .popper[data-placement^='bottom-end'] .popper__arrow {
border-width: 0 5px 5px 5px; border-width: 0 5px 5px 5px;
@@ -78,7 +80,7 @@
// Right // Right
.popper[data-placement^='right'] { .popper[data-placement^='right'] {
padding-left: 5px; padding-left: $popper-margin-from-ref;
} }
.popper[data-placement^='right'] .popper__arrow { .popper[data-placement^='right'] .popper__arrow {
border-width: 5px 5px 5px 0; border-width: 5px 5px 5px 0;
@@ -91,7 +93,7 @@
// Left // Left
.popper[data-placement^='left'] { .popper[data-placement^='left'] {
padding-right: 5px; padding-right: $popper-margin-from-ref;
} }
.popper[data-placement^='left'] .popper__arrow { .popper[data-placement^='left'] .popper__arrow {
border-width: 5px 0 5px 5px; border-width: 5px 0 5px 5px;