init

2026-11-13 19:06:11 +03:00 · 2021-08-14 14:35:10 +03:00
parent 6da6da6ad0
commit a66ccba187
63 changed files with 24744 additions and 0 deletions
@@ -0,0 +1,171 @@
+:root {
+    --kit-tooltip-font-size: 0.8em;
+    --kit-tooltip-color: #ffffff;
+    --kit-tooltip-content-color: #212121fa;
+    --kit-tooltip-border-color: #212121fa;
+    --kit-tooltip-border-width: 0px;
+    --kit-tooltip-arrow-width: 0.8em;
+    --math-sqrt-2: 1.414213562373095;
+}
+.tooltip {
+    position: absolute;
+    z-index: 1070;
+    display: block;
+    margin: 0;
+    font-family: inherit;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: left;
+    text-align: start;
+    text-decoration: none;
+    text-shadow: none;
+    text-transform: none;
+    letter-spacing: normal;
+    word-break: normal;
+    word-spacing: normal;
+    white-space: normal;
+    line-break: auto;
+    font-size: var(--kit-tooltip-font-size);
+    word-wrap: break-word;
+    opacity: 0;
+}
+
+.tooltip.show {
+    opacity: 0.9;
+}
+
+.tooltip .arrow {
+    position: absolute;
+    display: block;
+    width: 0.8rem;
+    height: 0.4rem;
+    overflow: hidden;
+}
+
+.tooltip .arrow::before {
+    border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
+    position: absolute;
+    content: "";
+    border-color: transparent;
+    border-style: solid;
+    width: var(--kit-tooltip-arrow-width);
+    height: var(--kit-tooltip-arrow-width);
+    background-color: var(--kit-tooltip-content-color);
+    box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
+}
+
+.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
+    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
+    bottom: 0;
+    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    /* left: 50% !important; */
+    /* transform: translate(-50%, 0); */
+}
+
+.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
+    bottom: 0;
+    left: 50%;
+    transform: rotate(
+            225deg
+    ) translate(0, 100%);
+    transform-origin: 0 100%;
+    border-left-color: var(
+            --kit-tooltip-border-color);
+    border-top-color: var(
+            --kit-tooltip-border-color);
+    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
+}
+
+.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
+    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
+    left: 0;
+    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%);
+}
+
+.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
+    left: 0px;
+    top: 50%;
+    transform: rotate(
+            225deg
+    ) translate(25%, -50%);
+    transform-origin: 75% 0;
+    border-right-color: var(
+            --kit-tooltip-border-color);
+    border-top-color: var(
+            --kit-tooltip-border-color);
+}
+
+.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
+    padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
+}
+
+.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
+    top: 0;
+    width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    /*left: 50% !important;*/
+    /*transform: translate(-50%, 0);*/
+}
+
+.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
+    top: 0;
+    left: 50%;
+    transform: rotate(
+            45deg
+    ) translate(0, 0);
+    transform-origin: 0 0;
+    border-left-color: var(
+            --kit-tooltip-border-color);
+    border-top-color: var(
+            --kit-tooltip-border-color);
+    border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
+}
+
+::before {}
+
+.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
+    padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
+}
+
+.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
+    right: 0;
+    width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
+    top: 50% !important;
+    transform: translate(0px, -50%);
+}
+
+.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
+    right: 0;
+    top: 50%;
+    transform: rotate(
+            45deg
+    ) translate(-25%, -50%);
+    transform-origin: 25% 0;
+    border-right-color: var(
+            --kit-tooltip-border-color);
+    border-top-color: var(
+            --kit-tooltip-border-color);
+}
+
+.tooltip-inner {
+    max-width: 200px;
+    padding: 0.25rem 0.5rem;
+    color: var(--kit-tooltip-color);
+    text-align: center;
+    background-color: var(--kit-tooltip-content-color);
+    border-radius: 0.25rem;
+    border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
+    box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
+}