bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
bellord
2021-08-14 14:35:10 +03:00
parent 6da6da6ad0
commit a66ccba187
63 changed files with 24744 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/tooltip/tooltip.css
+175
View File
@@ -0,0 +1,175 @@
: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.7em;
--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 .tooltip-arrow {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
overflow: hidden;
}
.tooltip .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);
}
/*top*/
.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 .tooltip-arrow, .kit-tooltip-auto[x-placement^="top"] .tooltip-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 .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="top"] .tooltip-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);
}
/*right*/
.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 .tooltip-arrow, .kit-tooltip-auto[x-placement^="right"] .tooltip-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 .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="right"] .tooltip-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);
}
/*bottom*/
.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 .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-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 .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .tooltip-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);
}
/*left*/
.kit-tooltip-left,
.kit-tooltip-auto[x-placement^="left"],
.kit-tooltip-start[data-popper-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 .tooltip-arrow, .kit-tooltip-auto[x-placement^="left"] .tooltip-arrow,
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-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%) !important;
}
.kit-tooltip-left .tooltip-arrow::before,
.kit-tooltip-auto[x-placement^="left"] .tooltip-arrow::before,
.kit-tooltip-start[data-popper-placement^="left"] .tooltip-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);
}