mirror of
https://github.com/papercss/papercss
synced 2024-06-08 00:42:20 +02:00
98 lines
1.6 KiB
SCSS
98 lines
1.6 KiB
SCSS
@import './colors.less';
|
|
@import './borders.less';
|
|
|
|
// Core popovers
|
|
[popover-top],
|
|
[popover-right],
|
|
[popover-bottom],
|
|
[popover-left]{
|
|
position: relative;
|
|
margin: 24px;
|
|
|
|
// Popover hover trigger
|
|
&:hover {
|
|
&::after {
|
|
transition: opacity .2s ease-out;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Creating popover::after element
|
|
&::after {
|
|
position: absolute;
|
|
top: -6px;
|
|
left: 50%;
|
|
opacity: 0;
|
|
padding: 4px 2px;
|
|
min-width: 80px;
|
|
font-size: 0.7em;
|
|
text-align: center;
|
|
color: $white;
|
|
background: $light-dark;
|
|
transition: opacity .25s ease-out;
|
|
transform: translateX(-50%) translateY(-100%);
|
|
.border;
|
|
}
|
|
}
|
|
|
|
// Popover positioning: left, right, top, bottom
|
|
[popover-left] {
|
|
&::before {
|
|
left: 0;
|
|
top: 50%;
|
|
margin-left: -12px;
|
|
transform: translatey(-50%) rotate(-90deg);
|
|
}
|
|
|
|
&::after {
|
|
content: attr(popover-left);
|
|
left: 0;
|
|
top: 50%;
|
|
margin-left: -8px;
|
|
transform: translateX(-100%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
[popover-right] {
|
|
&::before {
|
|
left: 100%;
|
|
top: 50%;
|
|
margin-left: 1px;
|
|
transform: translatey(-50%) rotate(90deg);
|
|
}
|
|
|
|
&::after {
|
|
content: attr(popover-right);
|
|
left: 100%;
|
|
top: 50%;
|
|
margin-left: 8px;
|
|
transform: translateX(0%) translateY(-50%);
|
|
}
|
|
}
|
|
|
|
[popover-top] {
|
|
&::before {
|
|
left: 50%;
|
|
}
|
|
|
|
&::after {
|
|
content: attr(popover-top);
|
|
left: 50%;
|
|
}
|
|
}
|
|
|
|
[popover-bottom] {
|
|
&::before {
|
|
top:100%;
|
|
margin-top: 8px;
|
|
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
|
|
}
|
|
|
|
&::after {
|
|
content: attr(popover-bottom);
|
|
top: 100%;
|
|
margin-top: 8px;
|
|
transform: translateX(-50%) translateY(0%);
|
|
}
|
|
}
|