Skip to content

Commit

Permalink
Merge pull request #79 from xPaw/tooltips
Browse files Browse the repository at this point in the history 
Replace bootstrap tooltips with css tooltips from Primer
  • Loading branch information
@astorije
astorije committed Feb 22, 2016
2 parents f8d8b74 + 8151e07 commit dd86522
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 645 deletions.
98 changes: 0 additions & 98 deletions client/css/bootstrap.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1022,104 +1022,6 @@ tbody.collapse.in {
-o-transition: height 0.35s ease;
transition: height 0.35s ease;
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
font-size: 12px;
line-height: 1.4;
opacity: 0;
filter: alpha(opacity=0);
}
.tooltip.in {
opacity: 0.9;
filter: alpha(opacity=90);
}
.tooltip.top {
margin-top: -3px;
padding: 5px 0;
}
.tooltip.right {
margin-left: 3px;
padding: 0 5px;
}
.tooltip.bottom {
margin-top: 3px;
padding: 5px 0;
}
.tooltip.left {
margin-left: -3px;
padding: 0 5px;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
bottom: 0;
left: 5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
bottom: 0;
right: 5px;
border-width: 5px 5px 0;
border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-width: 5px 5px 5px 0;
border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-width: 5px 0 5px 5px;
border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
top: 0;
left: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
top: 0;
right: 5px;
border-width: 0 5px 5px;
border-bottom-color: #000000;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
Expand Down
166 changes: 156 additions & 10 deletions client/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,16 +123,6 @@ button,
padding-top: 20px;
}

.tooltip-inner {
background: #fff;
border-radius: 2px;
color: #262c36;
}

.tooltip.top .tooltip-arrow {
border-top-color: #fff;
}

.btn {
border: 2px solid #84ce88;
border-radius: 3px;
Expand Down Expand Up @@ -1161,6 +1151,162 @@ button,
width: 58px;
}

/**
* Tooltips
* See http://primercss.io/tooltips/
*/
.tooltipped {
position: relative;
}

.tooltipped:after {
position: absolute;
z-index: 1000000;
display: inline-block;
visibility: hidden;
opacity: 0;
padding: 5px 8px;
font-size: 12px;
line-height: 1.2;
color: #262c36;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-wrap: break-word;
white-space: pre;
pointer-events: none;
content: attr(aria-label);
background: #fff;
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
transition: .2s;
}

.tooltipped:before {
position: absolute;
z-index: 1000001;
display: inline-block;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
color: #262c36;
pointer-events: none;
content: "";
border: 5px solid transparent;
transition: .2s;
}

.tooltipped:hover:before,
.tooltipped:hover:after,
.tooltipped:active:before,
.tooltipped:active:after,
.tooltipped:focus:before,
.tooltipped:focus:after {
visibility: visible;
opacity: 1;
text-decoration: none;
}

.tooltipped-s:after,
.tooltipped-se:after,
.tooltipped-sw:after {
top: 100%;
right: 50%;
margin-top: 5px;
}

.tooltipped-s:before,
.tooltipped-se:before,
.tooltipped-sw:before {
top: auto;
right: 50%;
bottom: -5px;
margin-right: -5px;
border-bottom-color: #fff;
}

.tooltipped-se:after {
right: auto;
left: 50%;
margin-left: -15px;
}

.tooltipped-sw:after {
margin-right: -15px;
}

.tooltipped-n:after,
.tooltipped-ne:after,
.tooltipped-nw:after {
right: 50%;
bottom: 100%;
margin-bottom: 5px;
}

.tooltipped-n:before,
.tooltipped-ne:before,
.tooltipped-nw:before {
top: -5px;
right: 50%;
bottom: auto;
margin-right: -5px;
border-top-color: #fff;
}

.tooltipped-ne:after {
right: auto;
left: 50%;
margin-left: -15px;
}

.tooltipped-nw:after {
margin-right: -15px;
}

.tooltipped-s:after,
.tooltipped-n:after {
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}

.tooltipped-w:after {
right: 100%;
bottom: 50%;
margin-right: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}

.tooltipped-w:before {
top: 50%;
bottom: 50%;
left: -5px;
margin-top: -5px;
border-left-color: #fff;
}

.tooltipped-e:after {
bottom: 50%;
left: 100%;
margin-left: 5px;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
}

.tooltipped-e:before {
top: 50%;
right: -5px;
bottom: 50%;
margin-top: -5px;
border-right-color: #fff;
}

/**
* IRC Message Styling
* https://github.com/megawac/irc-style-parser
Expand Down
14 changes: 7 additions & 7 deletions client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,15 +34,15 @@
</div>
</aside>
<footer id="footer">
<button class="icon sign-in" data-target="#sign-in" data-title="Sign in" data-placement="top" title="Sign in to The Lounge"></button>
<button class="icon connect" data-target="#connect" data-title="Connect" data-placement="top" title="Connect to network"></button>
<button class="icon settings" data-target="#settings" data-title="Settings" data-placement="top" title="Client settings"></button>
<button id="sign-out" class="icon sign-out" data-placement="top" title="Sign out"></button>
<span class="tooltipped tooltipped-n" aria-label="Sign in to The Lounge"><button class="icon sign-in" data-target="#sign-in"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Connect to network"><button class="icon connect" data-target="#connect"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Client settings"><button class="icon settings" data-target="#settings"></button></span>
<span class="tooltipped tooltipped-n" aria-label="Sign out"><button class="icon sign-out" id="sign-out"></button></span>
</footer>
<div id="main">
<div id="windows">
<div id="chat" class="no-colors"></div>
<div id="sign-in" data-title="Sign in" class="window">
<div id="sign-in" class="window">
<div class="header">
<button class="lt"></button>
</div>
Expand Down Expand Up @@ -80,7 +80,7 @@ <h1 class="title">Sign in</h1>
</div>
</form>
</div>
<div id="connect" data-title="Connect" class="window">
<div id="connect" class="window">
<div class="header">
<button class="lt"></button>
</div>
Expand Down Expand Up @@ -164,7 +164,7 @@ <h2>User preferences</h2>
</div>
</form>
</div>
<div id="settings" data-title="Settings" class="window">
<div id="settings" class="window">
<div class="header">
<button class="lt"></button>
</div>
Expand Down
Loading

0 comments on commit dd86522

Please sign in to comment.