Created
March 20, 2014 19:58
-
-
Save nerdpruitt/9672512 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
| <div class="tooltip"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> |
This file contains hidden or 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
| // ---- | |
| // Sass (v3.3.3) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); | |
| body { font-family: 'Open Sans', sans-serif; font-weight: 400; padding: 20px; } | |
| $black_20: #333; | |
| $white: #fff; | |
| $bold-font-weight: 700; | |
| .tooltip { | |
| background-color: $black_20; | |
| border-radius: 4px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.25); | |
| color: $white; | |
| font-size: 14px; | |
| padding: 15px; | |
| position: relative; | |
| width: 250px; | |
| &__heading { font-weight: $bold-font-weight; margin-bottom: 5px; } | |
| &__text { margin-bottom: 10px; } | |
| &__meta { font-size: 12px; } | |
| // ----- Arrows----- // | |
| &:before { | |
| border-color: transparent; | |
| border-style: solid; | |
| content:''; | |
| display: block; | |
| height: 0; | |
| position: absolute; | |
| width: 0; | |
| z-index: 2; | |
| } | |
| // ----- Above or below target and arrow centered ----- // | |
| &--below, &--above { | |
| @extend .tooltip; | |
| &:before { | |
| left: 50%; | |
| margin-left: -6px; | |
| } | |
| } | |
| &--below { | |
| margin-top: 10px; | |
| &:before { | |
| border-bottom-color: $black_20; | |
| border-width: 0 6px 6px 6px; | |
| bottom: 100%; | |
| } | |
| } | |
| &--above { | |
| margin-top: -10px; | |
| &:before { | |
| border-top-color: $black_20; | |
| border-width: 6px 6px 0 6px; | |
| top: 100%; | |
| } | |
| } | |
| // ----- Above or below target and arrow to the left or right ----- // | |
| &--below--left, &--below--right { @extend .tooltip--below; } | |
| &--above--left, &--above--right { @extend .tooltip--above; } | |
| &--below--left, &--above--left { | |
| &:before { | |
| left: 15px; | |
| margin: 0; | |
| } | |
| } | |
| &--below--right, &--above--right { | |
| &:before { | |
| left: auto; | |
| right: 15px; | |
| margin: 0; | |
| } | |
| } | |
| // ----- To the left or right of target and arrow centered ----- // | |
| &--left, &--right { | |
| @extend .tooltip; | |
| &:before { | |
| top: 50%; | |
| margin-top: -6px; | |
| } | |
| } | |
| &--left { | |
| margin-left: -10px; | |
| &:before { | |
| border-left-color: $black_20; | |
| border-width: 6px 0 6px 6px; | |
| left: 100%; | |
| } | |
| } | |
| &--right { | |
| margin-left: 10px; | |
| &:before { | |
| border-right-color: $black_20; | |
| border-width: 6px 6px 6px 0; | |
| right: 100%; | |
| top: 50%; | |
| margin-top: -6px; | |
| } | |
| } | |
| } |
This file contains hidden or 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
| @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 400; | |
| padding: 20px; | |
| } | |
| .tooltip, .tooltip--below, .tooltip--below--left, .tooltip--below--right, .tooltip--above, .tooltip--above--left, .tooltip--above--right, .tooltip--left, .tooltip--right { | |
| background-color: #333333; | |
| border-radius: 4px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); | |
| color: white; | |
| font-size: 14px; | |
| padding: 15px; | |
| position: relative; | |
| width: 250px; | |
| } | |
| .tooltip__heading { | |
| font-weight: 700; | |
| margin-bottom: 5px; | |
| } | |
| .tooltip__text { | |
| margin-bottom: 10px; | |
| } | |
| .tooltip__meta { | |
| font-size: 12px; | |
| } | |
| .tooltip:before, .tooltip--below:before, .tooltip--below--left:before, .tooltip--below--right:before, .tooltip--above:before, .tooltip--above--left:before, .tooltip--above--right:before, .tooltip--left:before, .tooltip--right:before { | |
| border-color: transparent; | |
| border-style: solid; | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| position: absolute; | |
| width: 0; | |
| z-index: 2; | |
| } | |
| .tooltip--below:before, .tooltip--below--left:before, .tooltip--below--right:before, .tooltip--above:before, .tooltip--above--left:before, .tooltip--above--right:before { | |
| left: 50%; | |
| margin-left: -6px; | |
| } | |
| .tooltip--below, .tooltip--below--left, .tooltip--below--right { | |
| margin-top: 10px; | |
| } | |
| .tooltip--below:before, .tooltip--below--left:before, .tooltip--below--right:before { | |
| border-bottom-color: #333333; | |
| border-width: 0 6px 6px 6px; | |
| bottom: 100%; | |
| } | |
| .tooltip--above, .tooltip--above--left, .tooltip--above--right { | |
| margin-top: -10px; | |
| } | |
| .tooltip--above:before, .tooltip--above--left:before, .tooltip--above--right:before { | |
| border-top-color: #333333; | |
| border-width: 6px 6px 0 6px; | |
| top: 100%; | |
| } | |
| .tooltip--below--left:before, .tooltip--above--left:before { | |
| left: 15px; | |
| margin: 0; | |
| } | |
| .tooltip--below--right:before, .tooltip--above--right:before { | |
| left: auto; | |
| right: 15px; | |
| margin: 0; | |
| } | |
| .tooltip--left:before, .tooltip--right:before { | |
| top: 50%; | |
| margin-top: -6px; | |
| } | |
| .tooltip--left { | |
| margin-left: -10px; | |
| } | |
| .tooltip--left:before { | |
| border-left-color: #333333; | |
| border-width: 6px 0 6px 6px; | |
| left: 100%; | |
| } | |
| .tooltip--right { | |
| margin-left: 10px; | |
| } | |
| .tooltip--right:before { | |
| border-right-color: #333333; | |
| border-width: 6px 6px 6px 0; | |
| right: 100%; | |
| top: 50%; | |
| margin-top: -6px; | |
| } |
This file contains hidden or 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
| <div class="tooltip"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--below--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--above--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--left"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> | |
| <br><br> | |
| <div class="tooltip--right"> | |
| <span class="tooltip__icon"></span> | |
| <h2 class="tooltip__heading">This is the heading</h2> | |
| <p class="tooltip__text">This is some body text that can get kinda long sometimes.</p> | |
| <div class="tooltip__meta">Created today</div> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment