richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

More accurate arrow positioning in tooltips

pull/4273/head
Jack Lukic 9 years ago
parent
6fea79b669
commit
dfc0cff5f9
2 changed files with 20 additions and 20 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 37
      src/definitions/modules/popup.less
  2. 3
      src/themes/default/modules/popup.variables

37
src/definitions/modules/popup.less
View File

@ -108,7 +108,6 @@
text-transform: none; text-transform: none;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
margin-bottom: @tooltipArrowOffset;
font-size: @tooltipFontSize; font-size: @tooltipFontSize;
@ -134,8 +133,8 @@
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
background: @tooltipArrowBottomBackground; background: @tooltipArrowBottomBackground;
margin-left: @tooltipArrowOffset;
margin-bottom: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-bottom: -@tooltipArrowVerticalOffset;
} }
[data-tooltip]:not([data-position]):after { [data-tooltip]:not([data-position]):after {
left: 50%; left: 50%;
@ -252,8 +251,8 @@
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
background: @tooltipArrowTopBackground; background: @tooltipArrowTopBackground;
margin-left: @tooltipArrowOffset;
margin-bottom: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-bottom: -@tooltipArrowVerticalOffset;
} }
/* Top Left */ /* Top Left */
@ -269,8 +268,8 @@
right: auto; right: auto;
bottom: 100%; bottom: 100%;
left: @arrowDistanceFromEdge; left: @arrowDistanceFromEdge;
margin-left: @tooltipArrowOffset;
margin-bottom: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-bottom: -@tooltipArrowVerticalOffset;
} }
/* Top Right */ /* Top Right */
@ -286,8 +285,8 @@
left: auto; left: auto;
bottom: 100%; bottom: 100%;
right: @arrowDistanceFromEdge; right: @arrowDistanceFromEdge;
margin-left: @tooltipArrowOffset;
margin-bottom: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-bottom: -@tooltipArrowVerticalOffset;
} }
@ -305,8 +304,8 @@
right: auto; right: auto;
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: @tooltipArrowOffset;
margin-top: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-top: -@tooltipArrowVerticalOffset;
} }
/* Bottom Left */ /* Bottom Left */
@ -320,8 +319,8 @@
right: auto; right: auto;
top: 100%; top: 100%;
left: @arrowDistanceFromEdge; left: @arrowDistanceFromEdge;
margin-left: @tooltipArrowOffset;
margin-top: -@tooltipArrowOffset;
margin-left: @tooltipArrowHorizontalOffset;
margin-top: -@tooltipArrowVerticalOffset;
} }
/* Bottom Right */ /* Bottom Right */
@ -335,8 +334,8 @@
left: auto; left: auto;
top: 100%; top: 100%;
right: @arrowDistanceFromEdge; right: @arrowDistanceFromEdge;
margin-left: @tooltipArrowOffset;
margin-top: -@tooltipArrowOffset;
margin-left: @tooltipArrowVerticalOffset;
margin-top: -@tooltipArrowHorizontalOffset;
} }
/* Left Center */ /* Left Center */
@ -349,8 +348,8 @@
[data-position="left center"][data-tooltip]:before { [data-position="left center"][data-tooltip]:before {
right: 100%; right: 100%;
top: 50%; top: 50%;
margin-top: @tooltipArrowOffset;
margin-right: @tooltipArrowOffset;
margin-top: @tooltipArrowVerticalOffset;
margin-right: @tooltipArrowHorizontalOffset;
} }
/* Right Center */ /* Right Center */
@ -363,8 +362,8 @@
[data-position="right center"][data-tooltip]:before { [data-position="right center"][data-tooltip]:before {
left: 100%; left: 100%;
top: 50%; top: 50%;
margin-top: @tooltipArrowOffset;
margin-left: -@tooltipArrowOffset;
margin-top: @tooltipArrowHorizontalOffset;
margin-left: -@tooltipArrowVerticalOffset;
} }
/* Arrow */ /* Arrow */

3
src/themes/default/modules/popup.variables
View File

@ -91,7 +91,8 @@
@tooltipInvertedHeaderColor: @invertedHeaderColor; @tooltipInvertedHeaderColor: @invertedHeaderColor;
/* Arrow */ /* Arrow */
@tooltipArrowOffset: -@2px;
@tooltipArrowVerticalOffset: -@2px;
@tooltipArrowHorizontalOffset: -@1px;
@tooltipArrowBoxShadow: @arrowBoxShadow; @tooltipArrowBoxShadow: @arrowBoxShadow;
@tooltipArrowBackground: @arrowBackground; @tooltipArrowBackground: @arrowBackground;
@tooltipArrowTopBackground: @arrowTopBackground; @tooltipArrowTopBackground: @arrowTopBackground;

Write Preview
Loading…
Cancel
Save