css: Use SCSS nesting in hotspots.scss for `.hotspot-popover`.

This commit is contained in:
Vaibhav 2019-06-05 22:33:21 +05:30 committed by Tim Abbott
parent d43548c7ca
commit 4c41bc1324
1 changed files with 72 additions and 70 deletions

View File

@ -146,25 +146,26 @@
}
/* arrows */
.hotspot-popover::after,
.hotspot-popover::before {
.hotspot-popover {
&::after,
&::before {
border: solid transparent;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
}
.hotspot-popover::after {
&::after {
border-width: 12px;
}
}
.hotspot-popover::before {
&::before {
border-width: 13px;
}
}
.hotspot-popover.arrow-top {
&.arrow-top {
&::before,
&::after {
bottom: 100%;
@ -180,9 +181,9 @@
border-bottom-color: hsl(0, 0%, 80%);
margin-right: -13px;
}
}
}
.hotspot-popover.arrow-left {
&.arrow-left {
&::before,
&::after {
right: 100%;
@ -198,9 +199,9 @@
border-right-color: hsl(0, 0%, 80%);
margin-top: -13px;
}
}
}
.hotspot-popover.arrow-bottom {
&.arrow-bottom {
&::before,
&::after {
top: 100%;
@ -216,9 +217,9 @@
border-top-color: hsl(0, 0%, 80%);
margin-right: -13px;
}
}
}
.hotspot-popover.arrow-right {
&.arrow-right {
&::before,
&::after {
left: 100%;
@ -234,6 +235,7 @@
border-left-color: hsl(0, 0%, 80%);
margin-top: -13px;
}
}
}
/* individual icon z-indexing */