Skip to content

Commit

Permalink
Add animations to css popups
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Jun 12, 2016
1 parent 2ed268a commit 047f66c
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 63 deletions.
1 change: 1 addition & 0 deletions RELEASE-NOTES.md
View file
Expand Up @@ -102,6 +102,7 @@
- **Icon** - Sizes smaller tham `small` were using with `rem` #3782
- **Input** - Fixes issue with `dropdown` or button on the left side of an `action` input not properly rounding
- **Input** - Fixed `:active` styles appearing on disabled input, when input is disabled using `disabled` property #3907
- **Label** - Fixed margin when `right floated` element precedes a `top attached label`
- **List** - `relaxed` and `very relaxed` lists included unnecessary padding on the first and last items #3710
- **List** - Bullets would be affected by font weight, or whether the list item was a link #3715 #3721
- **List** - Divided lists had unnecessary padding on first and last items, in both horizontal and vertical layouts #3710
Expand Down
153 changes: 90 additions & 63 deletions src/definitions/modules/popup.less
View file
@@ -1,4 +1,3 @@

/*!
* # Semantic UI - Popup
* http://github.com/semantic-org/semantic-ui/
Expand Down Expand Up @@ -86,15 +85,29 @@
position: relative;
}

/* Popup */
/* Arrow */
[data-tooltip]:before {
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 {
content: attr(data-tooltip);
display: none;
position: absolute;
white-space: nowrap;
margin-bottom: @arrowOffset;

font-size: @tooltipFontStyle;
font-size: @tooltipFontSize;

border: @tooltipBorder;
line-height: @tooltipLineHeight;
Expand All @@ -108,70 +121,84 @@

border-radius: @tooltipBorderRadius;
box-shadow: @tooltipBoxShadow;
z-index: 1;
}

/* Arrow */
[data-tooltip]:after {
position: absolute;
display: none;
content: '';
font-size: @medium;
width: @arrowSize;
height: @arrowSize;

background: @tooltipArrowBackground;
transform: rotate(45deg);

z-index: @arrowZIndex;
box-shadow: @tooltipArrowBoxShadow;
z-index: @tooltipZIndex;
}

/* Default Position (Top Center) */
[data-tooltip]:not([data-position]):before {
left: 50%;
transform: translateX(-50%);
bottom: 100%;
margin-bottom: @tooltipDistanceAway;
}
[data-tooltip]:not([data-position]):after {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: @tooltipArrowBottomBackground;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset;
margin-bottom: -@arrowOffset;
}
[data-tooltip]:not([data-position]):after {
left: 50%;
transform: translateX(-50%);
bottom: 100%;
margin-bottom: @tooltipDistanceAway;
}

/* Hover */
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
display: block;
/* 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: translateX(-50%) scale(0) !important;
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;
}
[data-tooltip]:hover:after {
transform: translateX(-50%) scale(1) !important;
opacity: 1;
}

/*--------------
Inverted
---------------*/

/* Arrow */
[data-tooltip][data-inverted]:after {
[data-tooltip][data-inverted]:before {
box-shadow: none !important;
}

/* Arrow Position */
[data-tooltip][data-inverted]:after {
[data-tooltip][data-inverted]:before {
background: @invertedArrowBottomBackground;
}

/* Popup */
[data-tooltip][data-inverted]:before {
[data-tooltip][data-inverted]:after {
background: @tooltipInvertedBackground;
color: @tooltipInvertedColor;
border: @tooltipInvertedBorder;
box-shadow: @tooltipInvertedBoxShadow;
}
[data-tooltip][data-inverted]:before .header {
[data-tooltip][data-inverted]:after .header {
background-color: @tooltipInvertedHeaderBackground;
color: @tooltipInvertedHeaderColor;
}
Expand All @@ -181,71 +208,71 @@
---------------*/

/* Top Center */
[data-position="top center"][data-tooltip]:before {
[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]:after {
[data-position="top center"][data-tooltip]:before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
background: @tooltipArrowBottomBackground;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset;
margin-bottom: -@arrowOffset;
}

/* Top Left */
[data-position="top left"][data-tooltip]:before {
[data-position="top left"][data-tooltip]:after {
top: auto;
right: auto;
left: 0;
bottom: 100%;
margin-bottom: @tooltipDistanceAway;
}
[data-position="top left"][data-tooltip]:after {
[data-position="top left"][data-tooltip]:before {
top: auto;
right: auto;
bottom: 100%;
left: @arrowDistanceFromEdge;
background: @tooltipArrowBottomBackground;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset;
margin-bottom: -@arrowOffset;
}

/* Top Right */
[data-position="top right"][data-tooltip]:before {
[data-position="top right"][data-tooltip]:after {
top: auto;
left: auto;
right: 0;
bottom: 100%;
margin-bottom: @tooltipDistanceAway;
}
[data-position="top right"][data-tooltip]:after {
[data-position="top right"][data-tooltip]:before {
top: auto;
left: auto;
bottom: 100%;
right: @arrowDistanceFromEdge;
background: @tooltipArrowBottomBackground;
background: @tooltipArrowTopBackground;
margin-left: @arrowOffset;
margin-bottom: -@arrowOffset;
}


/* Bottom Center */
[data-position="bottom center"][data-tooltip]:before {
[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]:after {
[data-position="bottom center"][data-tooltip]:before {
bottom: auto;
right: auto;
top: 100%;
Expand All @@ -256,12 +283,12 @@
}

/* Bottom Left */
[data-position="bottom left"][data-tooltip]:before {
[data-position="bottom left"][data-tooltip]:after {
left: 0;
top: 100%;
margin-top: @tooltipDistanceAway;
}
[data-position="bottom left"][data-tooltip]:after {
[data-position="bottom left"][data-tooltip]:before {
bottom: auto;
right: auto;
top: 100%;
Expand All @@ -272,12 +299,12 @@
}

/* Bottom Right */
[data-position="bottom right"][data-tooltip]:before {
[data-position="bottom right"][data-tooltip]:after {
right: 0;
top: 100%;
margin-top: @tooltipDistanceAway;
}
[data-position="bottom right"][data-tooltip]:after {
[data-position="bottom right"][data-tooltip]:before {
bottom: auto;
left: auto;
top: 100%;
Expand All @@ -288,64 +315,64 @@
}

/* Left Center */
[data-position="left center"][data-tooltip]:before {
[data-position="left center"][data-tooltip]:after {
right: 100%;
top: 50%;
margin-right: @tooltipDistanceAway;
transform: translateY(-50%);
}
[data-position="left center"][data-tooltip]:after {
[data-position="left center"][data-tooltip]:before {
right: 100%;
top: 50%;
margin-top: @arrowOffset;
margin-right: -@arrowOffset;
}

/* Right Center */
[data-position="right center"][data-tooltip]:before {
[data-position="right center"][data-tooltip]:after {
left: 100%;
top: 50%;
margin-left: @tooltipDistanceAway;
transform: translateY(-50%);
}
[data-position="right center"][data-tooltip]:after {
[data-position="right center"][data-tooltip]:before {
left: 100%;
top: 50%;
margin-top: @arrowOffset;
margin-left: -@arrowOffset;
}

/* Arrow Color */
[data-position~="bottom"][data-tooltip]:after {
[data-position~="bottom"][data-tooltip]:before {
background: @arrowTopBackground;
box-shadow: @bottomArrowBoxShadow;
}
[data-position="left center"][data-tooltip]:after {
[data-position="left center"][data-tooltip]:before {
background: @arrowCenterBackground;
box-shadow: @leftArrowBoxShadow;
}
[data-position="right center"][data-tooltip]:after {
[data-position="right center"][data-tooltip]:before {
background: @arrowCenterBackground;
box-shadow: @rightArrowBoxShadow;
}
[data-position~="top"][data-tooltip]:after {
[data-position~="top"][data-tooltip]:before {
background: @arrowBottomBackground;
}

/* Inverted Arrow Color */
[data-inverted][data-position~="bottom"][data-tooltip]:after {
[data-inverted][data-position~="bottom"][data-tooltip]:before {
background: @invertedArrowTopBackground;
box-shadow: @bottomArrowBoxShadow;
}
[data-inverted][data-position="left center"][data-tooltip]:after {
[data-inverted][data-position="left center"][data-tooltip]:before {
background: @invertedArrowCenterBackground;
box-shadow: @leftArrowBoxShadow;
}
[data-inverted][data-position="right center"][data-tooltip]:after {
[data-inverted][data-position="right center"][data-tooltip]:before {
background: @invertedArrowCenterBackground;
box-shadow: @rightArrowBoxShadow;
}
[data-inverted][data-position~="top"][data-tooltip]:after {
[data-inverted][data-position~="top"][data-tooltip]:before {
background: @invertedArrowBottomBackground;
}

Expand Down

0 comments on commit 047f66c

Please sign in to comment.