Skip to content
This repository has been archived by the owner on May 31, 2021. It is now read-only.

Commit

Permalink
Clean up code styling
Browse files Browse the repository at this point in the history
  • Loading branch information
John Furrow committed Jul 16, 2016
1 parent 2c7f7a8 commit e36ea11
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 93 deletions.
219 changes: 132 additions & 87 deletions client/sass/components/_tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ $tooltip-font-size: 0.8rem;
$tooltip-line-height: 1rem;

$tooltip-padding-vertical: $spacing-unit * 3/10;
$tooltip-padding-horizontal: $spacing-unit * 5/10;
$tooltip-padding-horizontal: $spacing-unit * 1/2;

$tooltip-arrow-border-width: 7px;
$tooltip-arrow-offset: 8px;
Expand All @@ -21,7 +21,7 @@ $tooltip-anchor-offset: $tooltip-arrow-offset + $tooltip-arrow-border-width;
position: fixed;
transition: opacity 0.3s, visibility 0.3s;
visibility: hidden;
z-index: 9999;
z-index: 1000;

&__wrapper {
display: inline-block;
Expand Down Expand Up @@ -59,135 +59,180 @@ $tooltip-anchor-offset: $tooltip-arrow-offset + $tooltip-arrow-border-width;
white-space: nowrap;
}

&--position--bottom,
&--position--top {
&--position {

&.tooltip--anchor--center {
transform: translateX(-50%);
&--bottom,
&--top {

.tooltip__content {
&.tooltip {

&:after {
left: 50%;
transform: translateX(-50%);
}
}
}
&--anchor {

&.tooltip--anchor--start {
transform: translateX($tooltip-anchor-offset * -1);
&--center {
transform: translateX(-50%);

.tooltip__content {
.tooltip {

&:after {
left: $tooltip-arrow-offset;
}
}
}
&__content {

&.tooltip--anchor--end {
transform: translateX(calc(-100% + #{$tooltip-anchor-offset}));
&:after {
left: 50%;
transform: translateX(-50%);
}
}
}
}

.tooltip__content {
&--start {
transform: translateX($tooltip-anchor-offset * -1);

&:after {
right: $tooltip-arrow-offset;
}
}
}
}
.tooltip {

&--position--bottom {
padding-top: $tooltip-arrow-border-width;
&__content {

.tooltip__content {
&:after {
left: $tooltip-arrow-offset;
}
}
}
}

&:after {
border-left-color: transparent;
border-right-color: transparent;
border-top: none;
bottom: 100%;
}
}
}
&--end {
transform: translateX(calc(-100% + #{$tooltip-anchor-offset}));

&--position--top {
padding-bottom: $tooltip-arrow-border-width;
.tooltip {

.tooltip__content {
&__content {

&:after {
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
top: 100%;
&:after {
right: $tooltip-arrow-offset;
}
}
}
}
}
}
}
}

&--position--left,
&--position--right {
&--bottom {
padding-top: $tooltip-arrow-border-width;

&.tooltip--anchor--center {
top: 50%;
transform: translateY(-50%);
.tooltip {

.tooltip__content {
&__content {

&:after {
top: 50%;
transform: translateY(-50%);
&:after {
border-left-color: transparent;
border-right-color: transparent;
border-top: none;
bottom: 100%;
}
}
}
}

&.tooltip--anchor--start {
transform: translateY($tooltip-anchor-offset * -1);
&--top {
padding-bottom: $tooltip-arrow-border-width;

.tooltip__content {
.tooltip {

&:after {
top: $tooltip-arrow-offset;
&__content {

&:after {
border-bottom: none;
border-left-color: transparent;
border-right-color: transparent;
top: 100%;
}
}
}
}

&.tooltip--anchor--end {
transform: translateY(calc(-100% + #{$tooltip-anchor-offset}));
&--left,
&--right {

&.tooltip {

.tooltip__content {
&--anchor {

&:after {
bottom: $tooltip-arrow-offset;
&--center {
top: 50%;
transform: translateY(-50%);

.tooltip {

&__content {

&:after {
top: 50%;
transform: translateY(-50%);
}
}
}
}

&--start {
transform: translateY($tooltip-anchor-offset * -1);

.tooltip {

&__content {

&:after {
top: $tooltip-arrow-offset;
}
}
}
}

&--end {
transform: translateY(calc(-100% + #{$tooltip-anchor-offset}));

.tooltip {

&__content {

&:after {
bottom: $tooltip-arrow-offset;
}
}
}
}
}
}
}
}

&.tooltip--position--left {
padding-right: $tooltip-arrow-border-width;
&--left {
padding-right: $tooltip-arrow-border-width;

.tooltip {

.tooltip__content {
&__content {

&:after {
border-bottom-color: transparent;
border-right: none;
border-top-color: transparent;
left: 100%;
&:after {
border-bottom-color: transparent;
border-right: none;
border-top-color: transparent;
left: 100%;
}
}
}
}
}

&.tooltip--position--right {
padding-left: $tooltip-arrow-border-width;
&--right {
padding-left: $tooltip-arrow-border-width;

.tooltip__content {
.tooltip {

&:after {
border-bottom-color: transparent;
border-left: none;
border-top-color: transparent;
right: 100%;
&__content {

&:after {
border-bottom-color: transparent;
border-left: none;
border-top-color: transparent;
right: 100%;
}
}
}
}
}
Expand Down
7 changes: 3 additions & 4 deletions client/scripts/components/Sidebar/SettingsButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,11 @@ class SettingsButton extends React.Component {

return (
<Tooltip
anchor="end"
content={label}
onClick={this.handleSettingsButtonClick}
offset={-5}
ref={(ref) => {this.tooltipRef = ref;}}
position="bottom"
offset={5}
ref={(ref) => this.tooltipRef = ref}
position="left"
wrapperClassName="sidebar__action sidebar__icon-button
sidebar__icon-button--settings tooltip__wrapper">
<SettingsIcon />
Expand Down
3 changes: 1 addition & 2 deletions client/scripts/components/Sidebar/SpeedLimitDropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,9 @@ class SpeedLimitDropdown extends React.Component {

return (
<Tooltip
anchor="start"
content={label}
offset={-5}
position="bottom"
position="right"
wrapperClassName="sidebar__icon-button sidebar__icon-button--limits
tooltip__wrapper">
<LimitsIcon />
Expand Down

0 comments on commit e36ea11

Please sign in to comment.