fix

2026-11-13 19:06:11 +03:00 · 2021-09-05 20:17:36 +03:00
parent 7310d04755
commit 6297c67201
28 changed files with 2676 additions and 1591 deletions
@@ -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);
+}