2014-11-13 14:27:45 +03:00
|
|
|
// ------------------------------------------------------------
|
|
|
|
// Popovers
|
|
|
|
//
|
|
|
|
// Styles for the popover component
|
|
|
|
//
|
|
|
|
// * Popovers
|
|
|
|
// * Triangles placeholder styles
|
|
|
|
// * Triangles classes
|
|
|
|
// * Open/close
|
|
|
|
// * Positioning
|
|
|
|
// ------------------------------------------------------------
|
|
|
|
|
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
//
|
|
|
|
// Popovers
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
.popover-item {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
padding: 11px 26px 13px 16px;
|
|
|
|
background: $darkgrey;
|
|
|
|
min-width: 300px;
|
|
|
|
max-width: 400px;
|
|
|
|
border-radius: 6px;
|
|
|
|
font-size: 1.2rem;
|
|
|
|
color: $midgrey;
|
|
|
|
}
|
|
|
|
.popover-title {
|
|
|
|
font-size: 1.4rem;
|
|
|
|
font-weight: 300;
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
.popover-desc {
|
|
|
|
margin-top: -4px;
|
|
|
|
}
|
|
|
|
.popover-body {
|
|
|
|
margin-top: 11px;
|
|
|
|
line-height: 1.7;
|
|
|
|
b {
|
|
|
|
color: #fff;
|
|
|
|
}
|
|
|
|
> *:last-child {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//
|
2014-11-13 14:27:45 +03:00
|
|
|
// Triangles placeholder styles
|
2014-09-29 15:17:27 +04:00
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
%popover-triangle {
|
|
|
|
&:before {
|
|
|
|
content: '';
|
|
|
|
position: absolute;
|
|
|
|
display: block;
|
|
|
|
} // :before
|
|
|
|
}
|
|
|
|
|
|
|
|
%popover-triangle-vertical-top {
|
|
|
|
&:before {
|
|
|
|
@include triangle($popover_triangle, $darkgrey, up, shallow);
|
|
|
|
top: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-vertical-bottom {
|
|
|
|
&:before {
|
|
|
|
@include triangle($popover_triangle, $darkgrey, down, shallow);
|
|
|
|
bottom: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-horizontal-left {
|
|
|
|
&:before {
|
|
|
|
@include triangle($popover_triangle, $darkgrey, left, shallow);
|
|
|
|
left: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-horizontal-right {
|
|
|
|
&:before {
|
|
|
|
@include triangle($popover_triangle, $darkgrey, right, shallow);
|
|
|
|
right: -(floor($popover_triangle * $popover_triangle_shallow_multiplier));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
%popover-triangle-vertical-center {
|
|
|
|
&:before {
|
|
|
|
left: 50%;
|
|
|
|
margin-left: -($popover_triangle / 2);
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-vertical-left {
|
|
|
|
&:before {
|
|
|
|
left: $popover_triangle;
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-vertical-right {
|
|
|
|
&:before {
|
|
|
|
left: auto;
|
|
|
|
right: $popover_triangle;
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-horizontal-center {
|
|
|
|
&:before {
|
|
|
|
top: 50%;
|
|
|
|
margin-top: -$popover_triangle;
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-horizontal-top {
|
|
|
|
&:before {
|
|
|
|
top: $popover_triangle;
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
%popover-triangle-horizontal-bottom {
|
|
|
|
&:before {
|
|
|
|
top: auto;
|
|
|
|
bottom: $popover_triangle;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2014-11-13 14:27:45 +03:00
|
|
|
|
|
|
|
//
|
|
|
|
// Triangles classes
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-top {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-top;
|
|
|
|
@extend %popover-triangle-vertical-center;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: top center;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-top-left {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-top;
|
|
|
|
@extend %popover-triangle-vertical-left;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: top left;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-top-right {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-top;
|
|
|
|
@extend %popover-triangle-vertical-right;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: top right;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-bottom {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-bottom;
|
|
|
|
@extend %popover-triangle-vertical-center;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: bottom center;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-bottom-left {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-bottom;
|
|
|
|
@extend %popover-triangle-vertical-left;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: bottom left;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-bottom-right {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-vertical-bottom;
|
|
|
|
@extend %popover-triangle-vertical-right;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: bottom right;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-left {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-left;
|
|
|
|
@extend %popover-triangle-horizontal-center;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: left center;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-left-top {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-left;
|
|
|
|
@extend %popover-triangle-horizontal-top;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: left top;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-left-bottom {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-left;
|
|
|
|
@extend %popover-triangle-horizontal-bottom;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: left bottom;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-right {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-right;
|
|
|
|
@extend %popover-triangle-horizontal-center;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: right center;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-right-top {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-right;
|
|
|
|
@extend %popover-triangle-horizontal-top;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: right top;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover-triangle-right-bottom {
|
|
|
|
@extend %popover-triangle;
|
|
|
|
@extend %popover-triangle-horizontal-right;
|
|
|
|
@extend %popover-triangle-horizontal-bottom;
|
2014-11-13 14:27:45 +03:00
|
|
|
transform-origin: right bottom;
|
2014-09-29 15:17:27 +04:00
|
|
|
}
|
|
|
|
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
//
|
2014-11-13 14:27:45 +03:00
|
|
|
// Open/close
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
.popover {
|
|
|
|
position: relative;
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
.popover-item {
|
|
|
|
position: absolute;
|
|
|
|
z-index: 20;
|
|
|
|
|
|
|
|
&.open {
|
|
|
|
display: block;
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
|
2014-09-29 15:17:27 +04:00
|
|
|
&.closed {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2014-11-13 14:27:45 +03:00
|
|
|
}//.popover
|
2014-09-29 15:17:27 +04:00
|
|
|
|
2014-11-13 14:27:45 +03:00
|
|
|
|
|
|
|
//
|
|
|
|
// Positioning
|
|
|
|
// --------------------------------------------------
|
|
|
|
// Position relative to the position of the triangle
|
|
|
|
// So... `popover-triangle-left-top` opens on the right
|
|
|
|
// of the button because the triangle is on the top left,
|
|
|
|
// pointing to the top right of the button
|
|
|
|
//
|
|
|
|
// |------| |-----------------|
|
|
|
|
// |Button| < Popover content |
|
|
|
|
// |------| | Lorem ipsum dol |
|
|
|
|
// |-----------------|
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-bottom {
|
|
|
|
bottom: calc(100% + 16px);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-bottom-left {
|
|
|
|
bottom: calc(100% + 16px);
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-bottom-right {
|
|
|
|
bottom: calc(100% + 16px);
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-top {
|
|
|
|
top: calc(100% + 16px);
|
|
|
|
left: 50%;
|
|
|
|
transform: translateX(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-top-left {
|
|
|
|
top: calc(100% + 16px);
|
|
|
|
left: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-top-right {
|
|
|
|
top: calc(100% + 16px);
|
|
|
|
right: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-left {
|
|
|
|
left: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-left-top {
|
|
|
|
left: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-($popover_triangle * 2));
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-left-bottom {
|
|
|
|
left: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-right {
|
|
|
|
right: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-right-top {
|
|
|
|
right: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(-($popover_triangle * 2));
|
|
|
|
}
|
|
|
|
|
|
|
|
.popover-item.popover-triangle-right-bottom {
|
|
|
|
right: calc(100% + 16px);
|
|
|
|
top: 50%;
|
|
|
|
transform: translateY(calc(-100% + #{($popover_triangle * 2)}));
|
|
|
|
}
|