mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-08 17:36:38 +02:00
Code Issues Releases Wiki Activity

feat: Declare & Use CSS Custom Properties (#3146)

Browse Source
This commit is contained in:
Sami Mazouz
2021-11-04 22:34:18 +01:00
committed by GitHub
parent 26bf5d350b
commit 809df29d29
44 changed files with 502 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
less/common/Tooltip.less
View File

@@ -3,8 +3,10 @@
// Base class
.tooltip {
--tooltip-arrow-width: @tooltip-arrow-width;
position: absolute;
z-index: @zindex-tooltip;
z-index: var(--zindex-tooltip);
display: block;
font-size: 12px;
font-weight: normal;
@@ -13,21 +15,21 @@
transition: opacity 0.15s linear;
&.in { opacity: 1; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
&.top { margin-top: -3px; padding: var(--tooltip-arrow-width) 0; }
&.right { margin-left: 3px; padding: 0 var(--tooltip-arrow-width); }
&.bottom { margin-top: 3px; padding: var(--tooltip-arrow-width) 0; }
&.left { margin-left: -3px; padding: 0 var(--tooltip-arrow-width); }
}
// Wrapper for the tooltip content
.tooltip-inner {
max-width: 200px;
padding: 7px 12px;
color: @tooltip-color;
color: var(--tooltip-color);
text-align: center;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius;
background-color: var(--tooltip-bg);
border-radius: var(--border-radius);
}
// Arrows
@@ -44,29 +46,29 @@
&.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg;
margin-left: calc(~"0px - var(--tooltip-arrow-width)");
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
border-top-color: var(--tooltip-bg);
}
&.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg;
margin-top: calc(~"0px - var(--tooltip-arrow-width)");
border-width: var(--tooltip-arrow-width) var(--tooltip-arrow-width) var(--tooltip-arrow-width) 0;
border-right-color: var(--tooltip-bg);
}
&.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg;
margin-top: calc(~"0px - var(--tooltip-arrow-width)");
border-width: var(--tooltip-arrow-width) 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
border-left-color: var(--tooltip-bg);
}
&.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg;
margin-left: calc(~"0px - var(--tooltip-arrow-width)");
border-width: 0 var(--tooltip-arrow-width) var(--tooltip-arrow-width);
border-bottom-color: var(--tooltip-bg);
}
}