assets/stylesheets/semantic_ui/definitions/modules/popup.less in less-rails-semantic_ui-2.1.8.2 vs assets/stylesheets/semantic_ui/definitions/modules/popup.less in less-rails-semantic_ui-2.2.1.0
- old
+ new
@@ -6,17 +6,15 @@
*= depend_on semantic_ui/config/globals/site.variables
*= depend_on semantic_ui/config/modules/popup.overrides
*= depend_on semantic_ui/config/modules/popup.variables
*/
-
/*!
* # Semantic UI - Popup
* http://github.com/semantic-org/semantic-ui/
*
*
- * Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
@@ -84,9 +82,353 @@
}
/*******************************
Types
*******************************/
+
+/*--------------
+ Tooltip
+---------------*/
+
+/* Content */
+[data-tooltip] {
+ position: relative;
+}
+
+/* Arrow */
+[data-tooltip]:before {
+ pointer-events: none;
+ position: absolute;
+ content: '';
+ font-size: @medium;
+ width: @arrowSize;
+ height: @arrowSize;
+
+ background: @tooltipArrowBackground;
+ transform: rotate(45deg);
+
+ z-index: @arrowZIndex;
+ box-shadow: @tooltipArrowBoxShadow;
+}
+
+/* Popup */
+[data-tooltip]:after {
+ pointer-events: none;
+ content: attr(data-tooltip);
+ position: absolute;
+ text-transform: none;
+ text-align: left;
+ white-space: nowrap;
+
+ font-size: @tooltipFontSize;
+
+ border: @tooltipBorder;
+ line-height: @tooltipLineHeight;
+ max-width: @tooltipMaxWidth;
+ background: @tooltipBackground;
+
+ padding: @tooltipPadding;
+ font-weight: @tooltipFontWeight;
+ font-style: @tooltipFontStyle;
+ color: @tooltipColor;
+
+ border-radius: @tooltipBorderRadius;
+ box-shadow: @tooltipBoxShadow;
+ z-index: @tooltipZIndex;
+}
+
+/* Default Position (Top Center) */
+[data-tooltip]:not([data-position]):before {
+ top: auto;
+ right: auto;
+ bottom: 100%;
+ left: 50%;
+ background: @tooltipArrowBottomBackground;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-bottom: -@tooltipArrowVerticalOffset;
+}
+[data-tooltip]:not([data-position]):after {
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 100%;
+ margin-bottom: @tooltipDistanceAway;
+}
+
+/* Animation */
+[data-tooltip]:before,
+[data-tooltip]:after {
+ pointer-events: none;
+ visibility: hidden;
+}
+[data-tooltip]:before {
+ opacity: 0;
+ transform: rotate(45deg) scale(0) !important;
+ transform-origin: center top;
+ transition:
+ all @tooltipDuration @tooltipEasing
+ ;
+}
+[data-tooltip]:after {
+ opacity: 1;
+ transform-origin: center bottom;
+ transition:
+ all @tooltipDuration @tooltipEasing
+ ;
+}
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+ visibility: visible;
+ pointer-events: auto;
+}
+[data-tooltip]:hover:before {
+ transform: rotate(45deg) scale(1) !important;
+ opacity: 1;
+}
+
+/* Animation Position */
+[data-tooltip]:after,
+[data-tooltip][data-position="top center"]:after,
+[data-tooltip][data-position="bottom center"]:after {
+ transform: translateX(-50%) scale(0) !important;
+}
+[data-tooltip]:hover:after,
+[data-tooltip][data-position="bottom center"]:hover:after {
+ transform: translateX(-50%) scale(1) !important;
+}
+[data-tooltip][data-position="left center"]:after,
+[data-tooltip][data-position="right center"]:after {
+ transform: translateY(-50%) scale(0) !important;
+}
+[data-tooltip][data-position="left center"]:hover:after,
+[data-tooltip][data-position="right center"]:hover:after {
+ transform: translateY(-50%) scale(1) !important;
+}
+[data-tooltip][data-position="top left"]:after,
+[data-tooltip][data-position="top right"]:after,
+[data-tooltip][data-position="bottom left"]:after,
+[data-tooltip][data-position="bottom right"]:after {
+ transform: scale(0) !important;
+}
+[data-tooltip][data-position="top left"]:hover:after,
+[data-tooltip][data-position="top right"]:hover:after,
+[data-tooltip][data-position="bottom left"]:hover:after,
+[data-tooltip][data-position="bottom right"]:hover:after {
+ transform: scale(1) !important;
+}
+
+
+/*--------------
+ Inverted
+---------------*/
+
+/* Arrow */
+[data-tooltip][data-inverted]:before {
+ box-shadow: none !important;
+}
+
+/* Arrow Position */
+[data-tooltip][data-inverted]:before {
+ background: @invertedArrowBottomBackground;
+}
+
+/* Popup */
+[data-tooltip][data-inverted]:after {
+ background: @tooltipInvertedBackground;
+ color: @tooltipInvertedColor;
+ border: @tooltipInvertedBorder;
+ box-shadow: @tooltipInvertedBoxShadow;
+}
+[data-tooltip][data-inverted]:after .header {
+ background-color: @tooltipInvertedHeaderBackground;
+ color: @tooltipInvertedHeaderColor;
+}
+
+/*--------------
+ Position
+---------------*/
+
+/* Top Center */
+[data-position="top center"][data-tooltip]:after {
+ top: auto;
+ right: auto;
+ left: 50%;
+ bottom: 100%;
+ transform: translateX(-50%);
+ margin-bottom: @tooltipDistanceAway;
+}
+[data-position="top center"][data-tooltip]:before {
+ top: auto;
+ right: auto;
+ bottom: 100%;
+ left: 50%;
+ background: @tooltipArrowTopBackground;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-bottom: -@tooltipArrowVerticalOffset;
+}
+
+/* Top Left */
+[data-position="top left"][data-tooltip]:after {
+ top: auto;
+ right: auto;
+ left: 0;
+ bottom: 100%;
+ margin-bottom: @tooltipDistanceAway;
+}
+[data-position="top left"][data-tooltip]:before {
+ top: auto;
+ right: auto;
+ bottom: 100%;
+ left: @arrowDistanceFromEdge;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-bottom: -@tooltipArrowVerticalOffset;
+}
+
+/* Top Right */
+[data-position="top right"][data-tooltip]:after {
+ top: auto;
+ left: auto;
+ right: 0;
+ bottom: 100%;
+ margin-bottom: @tooltipDistanceAway;
+}
+[data-position="top right"][data-tooltip]:before {
+ top: auto;
+ left: auto;
+ bottom: 100%;
+ right: @arrowDistanceFromEdge;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-bottom: -@tooltipArrowVerticalOffset;
+}
+
+
+/* Bottom Center */
+[data-position="bottom center"][data-tooltip]:after {
+ bottom: auto;
+ right: auto;
+ left: 50%;
+ top: 100%;
+ transform: translateX(-50%);
+ margin-top: @tooltipDistanceAway;
+}
+[data-position="bottom center"][data-tooltip]:before {
+ bottom: auto;
+ right: auto;
+ top: 100%;
+ left: 50%;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-top: -@tooltipArrowVerticalOffset;
+}
+
+/* Bottom Left */
+[data-position="bottom left"][data-tooltip]:after {
+ left: 0;
+ top: 100%;
+ margin-top: @tooltipDistanceAway;
+}
+[data-position="bottom left"][data-tooltip]:before {
+ bottom: auto;
+ right: auto;
+ top: 100%;
+ left: @arrowDistanceFromEdge;
+ margin-left: @tooltipArrowHorizontalOffset;
+ margin-top: -@tooltipArrowVerticalOffset;
+}
+
+/* Bottom Right */
+[data-position="bottom right"][data-tooltip]:after {
+ right: 0;
+ top: 100%;
+ margin-top: @tooltipDistanceAway;
+}
+[data-position="bottom right"][data-tooltip]:before {
+ bottom: auto;
+ left: auto;
+ top: 100%;
+ right: @arrowDistanceFromEdge;
+ margin-left: @tooltipArrowVerticalOffset;
+ margin-top: -@tooltipArrowHorizontalOffset;
+}
+
+/* Left Center */
+[data-position="left center"][data-tooltip]:after {
+ right: 100%;
+ top: 50%;
+ margin-right: @tooltipDistanceAway;
+ transform: translateY(-50%);
+}
+[data-position="left center"][data-tooltip]:before {
+ right: 100%;
+ top: 50%;
+ margin-top: @tooltipArrowVerticalOffset;
+ margin-right: @tooltipArrowHorizontalOffset;
+}
+
+/* Right Center */
+[data-position="right center"][data-tooltip]:after {
+ left: 100%;
+ top: 50%;
+ margin-left: @tooltipDistanceAway;
+ transform: translateY(-50%);
+}
+[data-position="right center"][data-tooltip]:before {
+ left: 100%;
+ top: 50%;
+ margin-top: @tooltipArrowHorizontalOffset;
+ margin-left: -@tooltipArrowVerticalOffset;
+}
+
+/* Arrow */
+[data-position~="bottom"][data-tooltip]:before {
+ background: @arrowTopBackground;
+ box-shadow: @bottomArrowBoxShadow;
+}
+[data-position="left center"][data-tooltip]:before {
+ background: @arrowCenterBackground;
+ box-shadow: @leftArrowBoxShadow;
+}
+[data-position="right center"][data-tooltip]:before {
+ background: @arrowCenterBackground;
+ box-shadow: @rightArrowBoxShadow;
+}
+[data-position~="top"][data-tooltip]:before {
+ background: @arrowBottomBackground;
+}
+
+/* Inverted Arrow Color */
+[data-inverted][data-position~="bottom"][data-tooltip]:before {
+ background: @invertedArrowTopBackground;
+ box-shadow: @bottomArrowBoxShadow;
+}
+[data-inverted][data-position="left center"][data-tooltip]:before {
+ background: @invertedArrowCenterBackground;
+ box-shadow: @leftArrowBoxShadow;
+}
+[data-inverted][data-position="right center"][data-tooltip]:before {
+ background: @invertedArrowCenterBackground;
+ box-shadow: @rightArrowBoxShadow;
+}
+[data-inverted][data-position~="top"][data-tooltip]:before {
+ background: @invertedArrowBottomBackground;
+}
+
+[data-position~="bottom"][data-tooltip]:before {
+ transform-origin: center bottom;
+}
+[data-position~="bottom"][data-tooltip]:after {
+ transform-origin: center top;
+}
+[data-position="left center"][data-tooltip]:before {
+ transform-origin: top center;
+}
+[data-position="left center"][data-tooltip]:after {
+ transform-origin: right center;
+}
+[data-position="right center"][data-tooltip]:before {
+ transform-origin: right center;
+}
+[data-position="right center"][data-tooltip]:after {
+ transform-origin: left center;
+}
/*--------------
Spacing
---------------*/