src/scss/toolkit/modules/tooltip.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/modules/tooltip.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,130 +1,130 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
/**
* Should be used in conjunction with the JavaScript Titon.Tooltip module.
*
- * <div class="tooltip">
- * <div class="tooltip-inner">
- * <div class="tooltip-head">Tooltip Title</div>
- * <div class="tooltip-body">Tooltip Content</div>
- * </div>
- * <div class="tooltip-arrow"></div>
- * </div>
+ * <div class="tooltip">
+ * <div class="tooltip-inner">
+ * <div class="tooltip-head">Tooltip Title</div>
+ * <div class="tooltip-body">Tooltip Content</div>
+ * </div>
+ * <div class="tooltip-arrow"></div>
+ * </div>
*/
.tooltip {
- position: absolute;
- top: 0;
- left: 0;
- margin: 0;
- padding: $small-padding;
- z-index: 500;
- max-width: 200px;
- visibility: hidden;
- background: #000;
- color: #fff;
- @include box-sizing(content-box); // required or else MooTools position() is off
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: $small-padding;
+ z-index: 500;
+ max-width: 200px;
+ visibility: hidden;
+ background: #000;
+ color: #fff;
+ @include box-sizing(content-box); // Required or else MooTools position() is off
- &.center-left .tooltip-arrow,
- &.center-right .tooltip-arrow {
- top: 50%;
- margin-top: -6px;
- }
+ &.center-left .tooltip-arrow,
+ &.center-right .tooltip-arrow {
+ top: 50%;
+ margin-top: -6px;
+ }
- &.center-left .tooltip-arrow {
- border-left-color: #000;
- right: -12px;
- }
+ &.center-left .tooltip-arrow {
+ border-left-color: #000;
+ right: -12px;
+ }
- &.center-right .tooltip-arrow {
- border-right-color: #000;
- left: -12px;
- }
+ &.center-right .tooltip-arrow {
+ border-right-color: #000;
+ left: -12px;
+ }
- &.top-center .tooltip-arrow,
- &.bottom-center .tooltip-arrow {
- left: 50%;
- margin-left: -6px;
- }
+ &.top-center .tooltip-arrow,
+ &.bottom-center .tooltip-arrow {
+ left: 50%;
+ margin-left: -6px;
+ }
- &.top-center .tooltip-arrow {
- border-top-color: #000;
- bottom: -12px;
- }
+ &.top-center .tooltip-arrow {
+ border-top-color: #000;
+ bottom: -12px;
+ }
- &.bottom-center .tooltip-arrow {
- border-bottom-color: #000;
- top: -12px;
- }
+ &.bottom-center .tooltip-arrow {
+ border-bottom-color: #000;
+ top: -12px;
+ }
}
.tooltip-arrow {
- width: 0;
- height: 0;
- border: 6px solid transparent;
- position: absolute;
+ width: 0;
+ height: 0;
+ border: 6px solid transparent;
+ position: absolute;
- &:after {
- content: "";
- border: 4px solid transparent;
- position: absolute;
- }
+ &:after {
+ content: "";
+ border: 4px solid transparent;
+ position: absolute;
+ }
}
//-------------------- Animations --------------------//
.tooltip,
.popover {
- &.fade {
- opacity: 0;
- @include transition(opacity 0.5s);
- }
+ &.fade {
+ opacity: 0;
+ @include transition(opacity 0.5s);
+ }
- &.from-above {
- @include transition(transform 0.3s);
- @include transform(scale(1.2));
+ &.from-above {
+ @include transition(transform 0.3s);
+ @include transform(scale(1.2));
- &.show {
- @include transform(scale(1));
- }
- }
+ &.show {
+ @include transform(scale(1));
+ }
+ }
- &.from-below {
- @include transition(transform 0.3s);
- @include transform(scale(0.8));
+ &.from-below {
+ @include transition(transform 0.3s);
+ @include transform(scale(0.8));
- &.show {
- @include transform(scale(1));
- }
- }
+ &.show {
+ @include transform(scale(1));
+ }
+ }
- &.flip-rotate {
- @include transition(transform 0.3s);
- @include transform(rotate(-90deg));
+ &.flip-rotate {
+ @include transition(transform 0.3s);
+ @include transform(rotate(-90deg));
- &.show {
- @include transform(rotate(0deg));
- }
- }
+ &.show {
+ @include transform(rotate(0deg));
+ }
+ }
- &.slide-in {
- @include transition(transform 0.3s);
+ &.slide-in {
+ @include transition(transform 0.3s);
- &.top-left { @include transform(translate(-25%, -25%)); }
- &.top-center { @include transform(translateY(-50%)); }
- &.top-right { @include transform(translate(25%, -25%)); }
- &.center-left { @include transform(translateX(-25%)); }
- &.center-right { @include transform(translateX(25%)); }
- &.bottom-left { @include transform(translate(-25%, 25%)); }
- &.bottom-center { @include transform(translateY(50%)); }
- &.bottom-right { @include transform(translate(25%, 25%)); }
+ &.top-left { @include transform(translate(-25%, -25%)); }
+ &.top-center { @include transform(translateY(-50%)); }
+ &.top-right { @include transform(translate(25%, -25%)); }
+ &.center-left { @include transform(translateX(-25%)); }
+ &.center-right { @include transform(translateX(25%)); }
+ &.bottom-left { @include transform(translate(-25%, 25%)); }
+ &.bottom-center { @include transform(translateY(50%)); }
+ &.bottom-right { @include transform(translate(25%, 25%)); }
- &.show { @include transform(translate(0)); }
- }
+ &.show { @include transform(translate(0)); }
+ }
}
\ No newline at end of file