Skip to content

Commit

Permalink
Improve <Tooltip /> styling
Browse files Browse the repository at this point in the history 
Tooltips positioned vertically flush with a non centeral horizontal
attachment now size their arrow correctly.

Tooltips of the `light` varaint now use a darker border to ensure
readability and consistency with other components
  • Loading branch information
Richard Palmer committed Mar 8, 2017
1 parent eb1b948 commit 741dcf8
Showing 1 changed file with 47 additions and 27 deletions.
74 changes: 47 additions & 27 deletions components/Tooltip/Tooltip.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
border-color: var(--color-black);
}
.light.target:before {
border-color: var(--color-greyLightest);
border-color: var(--color-greyLighter);
}

.active.target:after {
Expand All @@ -36,7 +36,7 @@
.tooltip {
padding: var(--size-medium);
border-radius: 4px;
box-shadow: 0 2px 4px 0 var(--color-greyLightest);
box-shadow: 0 2px 4px 0 var(--color-greyLighter);
z-index: var(--z-tooltip);
}
.dark.tooltip {
Expand All @@ -47,7 +47,7 @@
.light.tooltip {
background-color: var(--color-white);
color: var(--color-greyDarker);
border: 1px solid var(--color-greyLightest);
border: 1px solid var(--color-greyLighter);
}

.targetBottom.targetHorizontalCenter:after {
Expand All @@ -73,17 +73,19 @@
.targetBottom.targetRight:before {
border-right-color: transparent;
border-top-color: transparent;
right: -18px;
bottom: -16px;
right: -10px;
bottom: -9px;
border-width: 5px;
}
.targetBottom.targetRight:after {
border-right-color: transparent;
border-top-color: transparent;
right: -17px;
bottom: -16px;
right: -9px;
bottom: -9px;
border-width: 4px;
}
.tooltipBottom.tooltipRight {
transform: translateY(15px);
transform: translateY(8px);
border-top-left-radius: 0;
}

Expand All @@ -110,17 +112,19 @@
.targetTop.targetRight:before {
border-right-color: transparent;
border-bottom-color: transparent;
right: -18px;
top: -16px;
right: -10px;
top: -9px;
border-width: 5px;
}
.targetTop.targetRight:after {
border-right-color: transparent;
border-bottom-color: transparent;
right: -17px;
top: -16px;
right: -9px;
top: -9px;
border-width: 4px;
}
.tooltipTop.tooltipRight {
transform: translateY(-15px);
transform: translateY(-8px);
border-bottom-left-radius: 0;
}

Expand All @@ -147,17 +151,19 @@
.targetTop.targetLeft:before {
border-left-color: transparent;
border-bottom-color: transparent;
left: -18px;
top: -16px;
left: -10px;
top: -9px;
border-width: 5px;
}
.targetTop.targetLeft:after {
border-left-color: transparent;
border-bottom-color: transparent;
left: -17px;
top: -16px;
left: -9px;
top: -9px;
border-width: 4px;
}
.tooltipTop.tooltipLeft {
transform: translateY(-15px);
transform: translateY(-8px);
border-bottom-right-radius: 0;
}

Expand All @@ -184,17 +190,19 @@
.targetBottom.targetLeft:before {
border-left-color: transparent;
border-top-color: transparent;
left: -18px;
bottom: -16px;
left: -10px;
bottom: -9px;
border-width: 5px;
}
.targetBottom.targetLeft:after {
border-left-color: transparent;
border-top-color: transparent;
left: -17px;
bottom: -16px;
left: -9px;
bottom: -9px;
border-width: 4px;
}
.tooltipBottom.tooltipLeft {
transform: translateY(15px);
transform: translateY(8px);
border-top-right-radius: 0;
}

Expand All @@ -205,6 +213,7 @@
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 9px;
}
.targetFlushVertical.targetBottom.targetRight:after {
top: 50%;
Expand All @@ -213,6 +222,7 @@
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 8px;
}
.dark.targetFlushVertical.targetBottom.targetRight:before {
border-right-color: var(--color-black);
Expand All @@ -221,7 +231,7 @@
border-right-color: var(--color-black);
}
.light.targetFlushVertical.targetBottom.targetRight:before {
border-right-color: var(--color-greyLightest);
border-right-color: var(--color-greyLighter);
}
.light.targetFlushVertical.targetBottom.targetRight:after {
border-right-color: var(--color-white);
Expand All @@ -239,6 +249,7 @@
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 9px;
}
.targetFlushVertical.targetTop.targetRight:after {
top: 50%;
Expand All @@ -247,6 +258,7 @@
border-left-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 8px;
}
.dark.targetFlushVertical.targetTop.targetRight:before {
border-right-color: var(--color-black);
Expand All @@ -255,7 +267,7 @@
border-right-color: var(--color-black);
}
.light.targetFlushVertical.targetTop.targetRight:before {
border-right-color: var(--color-greyLightest);
border-right-color: var(--color-greyLighter);
}
.light.targetFlushVertical.targetTop.targetRight:after {
border-right-color: var(--color-white);
Expand All @@ -272,6 +284,7 @@
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 9px;
}
.targetFlushVertical.targetTop.targetLeft:after {
top: 50%;
Expand All @@ -280,6 +293,7 @@
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 8px;
}
.dark.targetFlushVertical.targetTop.targetLeft:before {
border-left-color: var(--color-black);
Expand All @@ -288,7 +302,7 @@
border-left-color: var(--color-black);
}
.light.targetFlushVertical.targetTop.targetLeft:before {
border-left-color: var(--color-greyLightest);
border-left-color: var(--color-greyLighter);
}
.light.targetFlushVertical.targetTop.targetLeft:after {
border-left-color: var(--color-white);
Expand All @@ -305,6 +319,7 @@
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 9px;
}
.targetFlushVertical.targetBottom.targetLeft:after {
top: 50%;
Expand All @@ -313,6 +328,7 @@
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-width: 8px;
}
.dark.targetFlushVertical.targetBottom.targetLeft:before {
border-left-color: var(--color-black);
Expand All @@ -321,7 +337,7 @@
border-left-color: var(--color-black);
}
.light.targetFlushVertical.targetBottom.targetLeft:before {
border-left-color: var(--color-greyLightest);
border-left-color: var(--color-greyLighter);
}
.light.targetFlushVertical.targetBottom.targetLeft:after {
border-left-color: var(--color-white);
Expand All @@ -340,6 +356,7 @@
left: 50%;
transform: translateX(-50%);
bottom: -9px;
border-width: 9px;
}
.targetFlushHorizontal.targetBottom.targetRight:after,
.targetFlushHorizontal.targetBottom.targetLeft:after {
Expand All @@ -350,6 +367,7 @@
left: 50%;
transform: translateX(-50%);
bottom: -9px;
border-width: 8px;
}
.tooltipFlushHorizontal.tooltipBottom.tooltipRight,
.tooltipFlushHorizontal.tooltipBottom.tooltipLeft {
Expand All @@ -366,6 +384,7 @@
left: 50%;
transform: translateX(-50%);
top: -9px;
border-width: 9px;
}
.targetFlushHorizontal.targetTop.targetRight:after,
.targetFlushHorizontal.targetTop.targetLeft:after {
Expand All @@ -376,6 +395,7 @@
left: 50%;
transform: translateX(-50%);
top: -9px;
border-width: 8px;
}
.tooltipFlushHorizontal.tooltipTop.tooltipRight,
.tooltipFlushHorizontal.tooltipTop.tooltipLeft {
Expand Down

0 comments on commit 741dcf8

Please sign in to comment.