Browse Source

Fix some variables in tooltip

pull/4164/head
Jack Lukic 8 years ago
parent
commit
246aafeec1
2 changed files with 11 additions and 14 deletions
  1. 14
      src/definitions/modules/popup.less
  2. 11
      src/themes/default/modules/popup.variables

14
src/definitions/modules/popup.less

@ -94,7 +94,7 @@
height: @arrowSize; height: @arrowSize;
background: @tooltipArrowBackground; background: @tooltipArrowBackground;
transform: rotate(-45deg);
transform: rotate(45deg);
z-index: @arrowZIndex; z-index: @arrowZIndex;
box-shadow: @tooltipArrowBoxShadow; box-shadow: @tooltipArrowBoxShadow;
@ -104,7 +104,6 @@
[data-tooltip]:after { [data-tooltip]:after {
content: attr(data-tooltip); content: attr(data-tooltip);
position: absolute; position: absolute;
white-space: nowrap;
margin-bottom: @arrowOffset; margin-bottom: @arrowOffset;
font-size: @tooltipFontSize; font-size: @tooltipFontSize;
@ -130,7 +129,7 @@
right: auto; right: auto;
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
background: @tooltipArrowTopBackground;
background: @tooltipArrowBottomBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-bottom: -@arrowOffset; margin-bottom: -@arrowOffset;
} }
@ -149,7 +148,7 @@
} }
[data-tooltip]:before { [data-tooltip]:before {
opacity: 0; opacity: 0;
transform: rotate(-45deg) scale(0) !important;
transform: rotate(45deg) scale(0) !important;
transform-origin: center top; transform-origin: center top;
transition: transition:
all @tooltipDuration @tooltipEasing all @tooltipDuration @tooltipEasing
@ -169,7 +168,7 @@
pointer-events: auto; pointer-events: auto;
} }
[data-tooltip]:hover:before { [data-tooltip]:hover:before {
transform: rotate(-45deg) scale(1) !important;
transform: rotate(45deg) scale(1) !important;
opacity: 1; opacity: 1;
} }
[data-tooltip]:hover:after { [data-tooltip]:hover:after {
@ -239,7 +238,6 @@
right: auto; right: auto;
bottom: 100%; bottom: 100%;
left: @arrowDistanceFromEdge; left: @arrowDistanceFromEdge;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-bottom: -@arrowOffset; margin-bottom: -@arrowOffset;
} }
@ -257,7 +255,6 @@
left: auto; left: auto;
bottom: 100%; bottom: 100%;
right: @arrowDistanceFromEdge; right: @arrowDistanceFromEdge;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-bottom: -@arrowOffset; margin-bottom: -@arrowOffset;
} }
@ -277,7 +274,6 @@
right: auto; right: auto;
top: 100%; top: 100%;
left: 50%; left: 50%;
background: @tooltipArrowBottomBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-top: -@arrowOffset; margin-top: -@arrowOffset;
} }
@ -293,7 +289,6 @@
right: auto; right: auto;
top: 100%; top: 100%;
left: @arrowDistanceFromEdge; left: @arrowDistanceFromEdge;
background: @tooltipArrowBottomBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-top: -@arrowOffset; margin-top: -@arrowOffset;
} }
@ -309,7 +304,6 @@
left: auto; left: auto;
top: 100%; top: 100%;
right: @arrowDistanceFromEdge; right: @arrowDistanceFromEdge;
background: @tooltipArrowBottomBackground;
margin-left: @arrowOffset; margin-left: @arrowOffset;
margin-top: -@arrowOffset; margin-top: -@arrowOffset;
} }

11
src/themes/default/modules/popup.variables

@ -74,10 +74,13 @@
@tooltipColor: @color; @tooltipColor: @color;
@tooltipBorder: @border; @tooltipBorder: @border;
@tooltipBoxShadow: @boxShadow; @tooltipBoxShadow: @boxShadow;
@tooltipMaxWidth: @maxWidth;
@tooltipMaxWidth: none;
@tooltipFontSize: @medium; @tooltipFontSize: @medium;
@tooltipLineHeight: @lineHeight; @tooltipLineHeight: @lineHeight;
@tooltipDistanceAway: @relative7px; @tooltipDistanceAway: @relative7px;
@tooltipZIndex: 1;
@tooltipDuration: @defaultDuration;
@tooltipEasing: @defaultEasing;
/* Inverted */ /* Inverted */
@tooltipInvertedBackground: @invertedBackground; @tooltipInvertedBackground: @invertedBackground;
@ -90,9 +93,9 @@
/* Arrow */ /* Arrow */
@tooltipArrowBoxShadow: @arrowBoxShadow; @tooltipArrowBoxShadow: @arrowBoxShadow;
@tooltipArrowBackground: @arrowBackground; @tooltipArrowBackground: @arrowBackground;
@tooltipArrowTopBackground: @tooltipArrowBackground;
@tooltipArrowCenterBackground: @tooltipArrowBackground;
@tooltipArrowBottomBackground: @tooltipArrowBackground;
@tooltipArrowTopBackground: @arrowTopBackground;
@tooltipArrowCenterBackground: @arrowCenterBackground;
@tooltipArrowBottomBackground: @arrowBottomBackground;
/*------------------- /*-------------------
Coupling Coupling

Loading…
Cancel
Save