Browse Source

Adds glow transition

pull/5282/merge
Jack 6 years ago
parent
commit
0141f6ed25
2 changed files with 24 additions and 2 deletions
  1. 2
      RELEASE-NOTES.md
  2. 24
      src/themes/default/modules/transition.overrides

2
RELEASE-NOTES.md

@ -16,6 +16,7 @@
- **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
- **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/)
- **Modal** - You can now modify `closable` setting after init **Thanks @mdehoog** #3396
- **Transition** - Adds new `glow` transition for highlighting an element on the page
**Tiny Enhancements**
- **Popup** - `arrowBackground` now inherits from `background` #6059 **Thanks @devsli**
@ -28,6 +29,7 @@
- **Popup** - Popup will now use `content` specified in settings before `title` attribute #4614 **Thanks @aaronbhansen**
- **Form Validation** - Fixes bug where `on: 'change'` would still show validation prompts on `blur` when using `inline: true` #4423 **Thanks @avalanche1**
- **Dimmer** - Fixes issue with `inverted dimmer` with `content` having wrong text color **Thanks @rijk** #4631
- **Images / Transition** - Fixed issue where `ui images` would show nested images with `transition hidden` as block (Fixes sequential img animation demo in docs)
**Doc Updates**
- **Icons** - Icon documentation now has a search that will copy the relevent icon html to clipboard

24
src/themes/default/modules/transition.overrides

@ -784,6 +784,7 @@
Emphasis
---------------*/
.flash.transition {
animation-duration: 750ms;
animation-name: flash;
@ -808,6 +809,14 @@
animation-duration: 750ms;
animation-name: jiggle;
}
.transition.glow {
animation-duration: 2000ms;
animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.transition.glow {
animation-name: glow;
}
/* Flash */
@keyframes flash {
@ -881,7 +890,7 @@
}
/* Rubberband */
/* Jiggle */
@keyframes jiggle {
0% {
transform: scale3d(1, 1, 1);
@ -906,5 +915,16 @@
}
}
/* Glow */
@keyframes glow {
0% {
background-color: #FCFCFD;
}
30% {
background-color: #FFF6CD;
}
100% {
background-color: #FCFCFD;
}
}
Loading…
Cancel
Save