2017-10-26 23:31:29 +03:00
|
|
|
.Popover {
|
2017-10-27 22:15:01 +03:00
|
|
|
position: absolute;
|
|
|
|
z-index: 100;
|
|
|
|
}
|
|
|
|
|
|
|
|
.Popover-message {
|
2017-10-27 18:14:00 +03:00
|
|
|
position: relative;
|
2017-11-03 00:42:51 +03:00
|
|
|
width: 235px;
|
2017-10-27 18:14:00 +03:00
|
|
|
margin-right: auto;
|
|
|
|
margin-left: auto;
|
2017-10-26 23:31:29 +03:00
|
|
|
|
|
|
|
// Carets
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
position: absolute;
|
2017-10-27 18:14:00 +03:00
|
|
|
left: 50%;
|
2017-10-26 23:31:29 +03:00
|
|
|
display: inline-block;
|
|
|
|
content: "";
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
2017-11-06 23:48:00 +03:00
|
|
|
top: -16px;
|
2017-10-27 18:14:00 +03:00
|
|
|
margin-left: -9px;
|
2017-11-03 21:12:32 +03:00
|
|
|
border: $spacer-2 $border-style transparent;
|
2017-10-26 23:31:29 +03:00
|
|
|
border-bottom-color: rgba(0, 0, 0, 0.15);
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
2017-11-06 23:48:00 +03:00
|
|
|
top: -14px;
|
2017-10-27 18:14:00 +03:00
|
|
|
margin-left: -8px;
|
2017-11-03 21:12:32 +03:00
|
|
|
border: 7px $border-style transparent;
|
2017-10-26 23:31:29 +03:00
|
|
|
border-bottom-color: $bg-white;
|
|
|
|
}
|
2017-10-27 18:14:00 +03:00
|
|
|
}
|
2017-10-26 23:31:29 +03:00
|
|
|
|
2017-11-03 19:18:45 +03:00
|
|
|
// Bottom-oriented carets
|
|
|
|
.Popover-message--bottom,
|
|
|
|
.Popover-message--bottom--right,
|
|
|
|
.Popover-message--bottom--left {
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
top: auto;
|
|
|
|
border-bottom-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
2017-11-06 23:48:00 +03:00
|
|
|
bottom: -16px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-top-color: rgba(0, 0, 0, 0.15);
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
2017-11-06 23:48:00 +03:00
|
|
|
bottom: -14px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-top-color: $bg-white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Top & Bottom: Right-oriented carets
|
|
|
|
.Popover-message--top--right,
|
|
|
|
.Popover-message--bottom--right {
|
2017-10-27 18:14:00 +03:00
|
|
|
right: -9px;
|
|
|
|
margin-right: 0;
|
|
|
|
|
|
|
|
&::before,
|
|
|
|
&::after {
|
2017-10-26 23:31:29 +03:00
|
|
|
left: auto;
|
2017-10-27 18:14:00 +03:00
|
|
|
margin-left: 0;
|
|
|
|
}
|
2017-10-26 23:31:29 +03:00
|
|
|
|
2017-10-27 18:14:00 +03:00
|
|
|
&::before {
|
|
|
|
right: 20px;
|
|
|
|
}
|
2017-10-26 23:31:29 +03:00
|
|
|
|
2017-10-27 18:14:00 +03:00
|
|
|
&::after {
|
|
|
|
right: 21px;
|
2017-10-26 23:31:29 +03:00
|
|
|
}
|
|
|
|
}
|
2017-10-27 18:14:00 +03:00
|
|
|
|
2017-11-03 19:18:45 +03:00
|
|
|
// Top & Bottom: Left-oriented carets
|
|
|
|
.Popover-message--top--left,
|
|
|
|
.Popover-message--bottom--left {
|
2017-10-27 18:14:00 +03:00
|
|
|
left: -9px;
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
left: 20px;
|
|
|
|
margin-left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
left: 21px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-11-03 19:18:45 +03:00
|
|
|
// Right- & Left-oriented carets
|
|
|
|
.Popover-message--right,
|
|
|
|
.Popover-message--right--top,
|
|
|
|
.Popover-message--right--bottom,
|
|
|
|
.Popover-message--left,
|
|
|
|
.Popover-message--left--top,
|
|
|
|
.Popover-message--left--bottom {
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
top: 50%;
|
|
|
|
left: auto;
|
|
|
|
margin-left: 0;
|
|
|
|
border-bottom-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
margin-top: -9px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
margin-top: -8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Right-oriented carets
|
|
|
|
.Popover-message--right,
|
|
|
|
.Popover-message--right--top,
|
|
|
|
.Popover-message--right--bottom {
|
|
|
|
&::before {
|
2017-11-06 23:48:00 +03:00
|
|
|
right: -16px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-left-color: rgba(0, 0, 0, 0.15);
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
2017-11-06 23:48:00 +03:00
|
|
|
right: -14px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-left-color: $bg-white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Left-oriented carets
|
|
|
|
.Popover-message--left,
|
|
|
|
.Popover-message--left--top,
|
|
|
|
.Popover-message--left--bottom {
|
|
|
|
&::before {
|
2017-11-06 23:48:00 +03:00
|
|
|
left: -16px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-right-color: rgba(0, 0, 0, 0.15);
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
2017-11-06 23:48:00 +03:00
|
|
|
left: -14px;
|
2017-11-03 19:18:45 +03:00
|
|
|
border-right-color: $bg-white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Right & Left: Top-oriented carets
|
|
|
|
.Popover-message--right--top,
|
|
|
|
.Popover-message--left--top {
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Right & Left: Bottom-oriented carets
|
|
|
|
.Popover-message--right--bottom,
|
|
|
|
.Popover-message--left--bottom {
|
|
|
|
&::before,
|
|
|
|
&::after {
|
|
|
|
top: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
bottom: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
bottom: 21px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-10-27 22:15:01 +03:00
|
|
|
.Popover-message--lg {
|
2017-11-03 00:42:51 +03:00
|
|
|
|
|
|
|
@include breakpoint(sm) {
|
|
|
|
min-width: 330px;
|
|
|
|
}
|
2017-10-27 18:14:00 +03:00
|
|
|
}
|