Created
March 28, 2013 11:07
-
-
Save rkgarg/be262f1d2c8bafb4013b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// TipTip CSS - Version 1.2 | |
@mixin tiptip_grey | |
background-color: $greylight | |
color: $white | |
@mixin tiptip_black | |
background-color: $black | |
color: $white | |
@mixin tiptip_red | |
background-color: $red | |
color: $white | |
#tiptip_holder | |
display: none | |
position: absolute | |
top: 0 | |
left: 0 | |
z-index: 99999 | |
&.tip_top | |
padding-bottom: 5px | |
&.tip_bottom | |
padding-top: 5px | |
&.tip_right | |
padding-left: 5px | |
&.tip_left | |
padding-right: 5px | |
#tiptip_content | |
@include tiptip_grey | |
font-size: 11px | |
text-shadow: 0 0 1px rgba(0,0,0,.75) | |
padding: 2px 7px | |
font-weight: bold | |
border-radius: 2px | |
-webkit-border-radius: 2px | |
-moz-border-radius: 2px | |
box-shadow: 0 0 2px #555 | |
-webkit-box-shadow: 0 0 2px #555 | |
-moz-box-shadow: 0 0 2px #555 | |
&.tiptip_black | |
@include tiptip_black | |
&.tiptip_red | |
@include tiptip_red | |
#tiptip_arrow, #tiptip_arrow_inner | |
position: absolute | |
border-color: transparent | |
border-style: solid | |
border-width: 6px | |
height: 0 | |
width: 0 | |
#tiptip_holder | |
&.tip_top #tiptip_arrow_inner | |
margin-top: -7px | |
margin-left: -6px | |
border-top-color: $greylight | |
&.tip_bottom #tiptip_arrow_inner | |
margin-top: -5px | |
margin-left: -6px | |
border-bottom-color: $greylight | |
&.tip_right #tiptip_arrow_inner | |
margin-top: -6px | |
margin-left: -5px | |
border-right-color: $greylight | |
&.tip_left #tiptip_arrow_inner | |
margin-top: -6px | |
margin-left: -7px | |
border-left-color: $greylight | |
&.tip_top #tiptip_arrow.tiptip_black | |
border-top-color: $black | |
#tiptip_arrow_inner | |
border-top-color: $black | |
&.tip_bottom #tiptip_arrow.tiptip_black | |
border-bottom-color: $black | |
#tiptip_arrow_inner | |
border-bottom-color: $black | |
&.tip_right #tiptip_arrow.tiptip_black | |
border-right-color: $black | |
#tiptip_arrow_inner | |
border-right-color: $black | |
&.tip_left #tiptip_arrow.tiptip_black | |
border-left-color: $black | |
#tiptip_arrow_inner | |
border-left-color: $black | |
&.tip_top #tiptip_arrow.tiptip_red | |
border-top-color: $red | |
#tiptip_arrow_inner | |
border-top-color: $red | |
&.tip_bottom #tiptip_arrow.tiptip_red | |
border-bottom-color: $red | |
#tiptip_arrow_inner | |
border-bottom-color: $red | |
&.tip_right #tiptip_arrow.tiptip_red | |
border-right-color: $red | |
#tiptip_arrow_inner | |
border-right-color: $red | |
&.tip_left #tiptip_arrow.tiptip_red | |
border-left-color: $red | |
#tiptip_arrow_inner | |
border-left-color: $red |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@elyseholladay
Note: I haven't commited any of these changes however.
The main issue was that in tiptip.sass, border-top-color should only be applied if .tip_top class is there, If .tip_bottom is there then only border-bottom-color is to be applied, no other border etc... Similarly color changs for grey/red/black. The above sass I think can be refactor. Feel free to do so, if required before making these changes to global tiptip.sass