Skip to content

Instantly share code, notes, and snippets.

@rkgarg
Created March 28, 2013 11:07
Show Gist options
  • Save rkgarg/be262f1d2c8bafb4013b to your computer and use it in GitHub Desktop.
Save rkgarg/be262f1d2c8bafb4013b to your computer and use it in GitHub Desktop.
// 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
@rkgarg
Copy link
Author

rkgarg commented Mar 28, 2013

@elyseholladay

  1. Above refers to changes I made locally to tiptip.sass (https://github.com/OceanusAuto/dealer360/blob/develop/app/assets/themes/new_ui/stylesheets/modules/tiptip.sass) file globally.
  2. And remove the use of resources20 specific tiptip.sass (by removing @import external/tiptip ) line from application-resources.sass
  3. Now float-right works fine on the .folder_actions , .resource_actions

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment