This commit is contained in:
2021-09-05 20:17:36 +03:00
parent 7310d04755
commit 6297c67201
28 changed files with 2676 additions and 1591 deletions
File diff suppressed because it is too large Load Diff
+139
View File
@@ -0,0 +1,139 @@
:root {
--popper-font-size: 0.8em;
--popper-border-color: #212121fa;
--popper-border-width: 1px;
--popper-arrow-width: 0.7em;
--popper-color: #1a1a1a;
--popper-content-color: #fff;
--popper-header-color: #1a1a1a;
--popper-header-content-color: #fff;
--popper-body-color: #1a1a1a;
--popper-body-content-color: #fff;
--popper-footer-color: #1a1a1a;
--popper-footer-content-color: #fff;
--math-sqrt-2: 1.414213562373095;
}
[data-popper-arrow] {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
overflow: hidden;
}
[data-popper-arrow]::before {
border-width: var(--popper-border-width) var(--popper-border-width) 0px 0px;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
width: calc(var(--popper-arrow-width) + var(--popper-border-width));
height: calc(var(--popper-arrow-width) + var(--popper-border-width));
background-color: var(--popper-content-color);
box-shadow: 0px 0px 4px -2px var(--popper-content-color);
}
/*top*/
[data-popper-placement^="top"] {
padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
[data-popper-placement^="top"] [data-popper-arrow] {
bottom: 0;
width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
/* left: 50% !important; */
/* transform: translate(-50%, 0); */
}
[data-popper-placement^="top"] [data-popper-arrow]::before {
bottom: 0;
left: 50%;
transform: rotate(
225deg
) translate(0, 100%);
transform-origin: 0 100%;
border-left-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}
/*right*/
[data-popper-placement^="right"] {
padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}
[data-popper-placement^="right"] [data-popper-arrow] {
left: 0;
width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
[data-popper-placement^="right"] [data-popper-arrow]::before {
left: 0px;
top: 50%;
transform: rotate(
225deg
) translate(25%, -50%);
transform-origin: 75% 0;
border-right-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
}
/*bottom*/
[data-popper-placement^="bottom"] {
padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
[data-popper-placement^="bottom"] [data-popper-arrow] {
top: 0;
width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
/*left: 50% !important;*/
/*transform: translate(-50%, 0);*/
}
[data-popper-placement^="bottom"] [data-popper-arrow]::before {
top: 0;
left: 50%;
transform: rotate(
45deg
) translate(0, 0);
transform-origin: 0 0;
border-left-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}
/*left*/
[data-popper-placement^="left"] {
padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}
[data-popper-placement^="left"] [data-popper-arrow] {
right: 0;
width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
[data-popper-placement^="left"] [data-popper-arrow]::before {
right: 0;
top: 50%;
transform: rotate(
45deg
) translate(-25%, -50%);
transform-origin: 25% 0;
border-right-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
}