richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'next' of github.com:Semantic-Org/Semantic-UI into menu-flex

pull/2034/head
jlukic 10 years ago
parent
c7b4981f22 089bf33400
commit
6b17f8fe77
8 changed files with 136 additions and 73 deletions
Split View
  1. 2
      README.md
  2. 13
      RELEASE-NOTES.md
  3. 6
      src/definitions/collections/form.less
  4. 1
      src/definitions/modules/dropdown.js
  5. 8
      src/definitions/modules/dropdown.less
  6. 76
      src/definitions/modules/transition.js
  7. 3
      src/themes/default/globals/site.variables
  8. 100
      src/themes/default/modules/transition.overrides

2
README.md
View File

@ -18,6 +18,8 @@ Key Features
npm install semantic-ui # Use themes, import build/watch tasks into your own gulpfile.
```
![Getting Started](https://dl.dropboxusercontent.com/u/2657007/install.gif)
For details on how work with Semantic theming please [read our customization guide](http://learnsemantic.com/developing/customizing.html) on [LearnSemantic.com](http://learnsemantic.com/)
#### Additional Versions

13
RELEASE-NOTES.md
View File

@ -3,18 +3,27 @@
### Version 1.11.0 - February xx, 2015
**New Components**
- **Visibiliity** - Attach callbacks to elements visibility conditions like `top visible` `bottom visible`, `passing`. Useful for things like: image lazy loading, infinite scroll content, and recording tracking metrics
**Enhancements**
- **Menu** - Horizontal menus now use flexbox so they can resize automatically to content size.
- **Transition** - Added more reasonable default durations for each animation
- **Loader** - `inline loader` now has a `centered` variation
- **Transition** - Added `toggle` behavior and docs for `show` and `hide`
- **Transition** - transition now has `stop`, `stop all`, and `clear queue` for removing transitions, (undocumented method `stop`, and `start` renamed to `enable` and `disable`)
**Bugs**
- **Input** - Fix bug with vertical centering of `ui action input` inside `menu` due to `flexbox` changes
- **Dropdown** - Fixes issue where dropdown would not open after restoring previus value on failed `search dropdown` search
- **Transition** - Fixes `swing out` animations not working correctly
- **Transition** - Fixed display state other than `block` not determined when using `show` and `hide` without an animation
- **Transition** - Fix bug in `remove looping` causing next animation to use same duration
- **Menu** - Fix vertical pointing menu, sub menu arrow color
- **Item ** - `img` inside of `ui item content` now do not receive formatting by default
- **Item ** - `img` inside of `ui item content` now do not receive size formatting by default
- **Form** - Added `input[type="search"]` styles to `ui form`
**Docs**
- **Transition** - Adds examples of `hide, `show`, `toggle`, `stop`, `stop all`, and `clear queue`
- **Item** - Significant rewrite of `ui item` documentation
### Version 1.10.1-2 - February 24, 2015

6
src/definitions/collections/form.less
View File

@ -96,6 +96,7 @@
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
@ -111,6 +112,7 @@
.ui.form input[type="email"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
@ -298,6 +300,7 @@
.ui.form input[type="email"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="text"]:focus,
@ -365,6 +368,7 @@
.ui.form .fields.error .field input[type="email"],
.ui.form .fields.error .field input[type="number"],
.ui.form .fields.error .field input[type="password"],
.ui.form .fields.error .field input[type="search"],
.ui.form .fields.error .field input[type="tel"],
.ui.form .fields.error .field input[type="time"],
.ui.form .fields.error .field input[type="text"],
@ -376,6 +380,7 @@
.ui.form .field.error input[type="email"],
.ui.form .field.error input[type="number"],
.ui.form .field.error input[type="password"],
.ui.form .field.error input[type="search"],
.ui.form .field.error input[type="tel"],
.ui.form .field.error input[type="time"],
.ui.form .field.error input[type="text"],
@ -393,6 +398,7 @@
.ui.form .field.error input[type="email"]:focus,
.ui.form .field.error input[type="number"]:focus,
.ui.form .field.error input[type="password"]:focus,
.ui.form .field.error input[type="search"]:focus,
.ui.form .field.error input[type="tel"]:focus,
.ui.form .field.error input[type="time"]:focus,
.ui.form .field.error input[type="text"]:focus,

1
src/definitions/modules/dropdown.js
View File

@ -456,6 +456,7 @@ $.fn.dropdown = function(parameters) {
;
if(hasSelected) {
module.event.item.click.call($selectedItem);
module.remove.filteredItem();
}
},

8
src/definitions/modules/dropdown.less
View File

@ -395,6 +395,14 @@ select.ui.dropdown {
display: none;
}
/* Scrollbar in IE */
@media all and (-ms-high-contrast:none) {
.ui.selection.dropdown .menu {
min-width: calc(100% - @scrollBarWidth);
}
}
@media only screen and (max-width : @largestMobileScreen) {
.ui.selection.dropdown .menu {
max-height: @selectionMobileMaxMenuHeight;

76
src/definitions/modules/transition.js
View File

@ -187,7 +187,7 @@ $.fn.transition = function() {
reset: function() {
module.debug('Resetting animation to beginning conditions');
module.remove.animationEndCallback();
module.remove.animationCallbacks();
module.restore.conditions();
module.remove.animating();
},
@ -196,7 +196,7 @@ $.fn.transition = function() {
module.debug('Queueing animation of', animation);
module.queuing = true;
$module
.one(animationEnd + eventNamespace, function() {
.one(animationEnd + '.queue' + eventNamespace, function() {
module.queuing = false;
module.repaint();
module.animate.apply(this, settings);
@ -206,7 +206,7 @@ $.fn.transition = function() {
complete: function (event) {
module.verbose('CSS animation complete', settings.animation);
module.remove.animationEndCallback();
module.remove.completeCallback();
module.remove.failSafe();
if(!module.is.looping()) {
if( module.is.outward() ) {
@ -219,7 +219,6 @@ $.fn.transition = function() {
module.verbose('Animation is outward, showing element');
module.restore.conditions();
module.show();
module.set.display();
settings.onShow.call(this);
}
else {
@ -262,7 +261,7 @@ $.fn.transition = function() {
module.save.conditions();
}
module.remove.direction();
module.remove.animationEndCallback();
module.remove.completeCallback();
if(module.can.transition() && !module.has.direction()) {
module.set.direction();
}
@ -393,11 +392,13 @@ $.fn.transition = function() {
$module.removeAttr('class');
}
if(module.cache.style) {
console.log(module.cache.style);
module.verbose('Restoring original style attribute', module.cache.style);
$module.attr('style', module.cache.style);
}
if(module.is.looping()) {
module.remove.looping();
else {
module.verbose('Clearing style attribute');
$module.removeAttr('style');
}
module.verbose('Restoring original attributes', module.cache);
}
@ -430,8 +431,15 @@ $.fn.transition = function() {
})
;
},
animationEndCallback: function() {
$module.off('.complete');
animationCallbacks: function() {
module.remove.queueCallback();
module.remove.completeCallback();
},
queueCallback: function() {
$module.off('.queue' + eventNamespace)
},
completeCallback: function() {
$module.off('.complete' + eventNamespace);
},
display: function() {
$module.css('display', '');
@ -456,10 +464,12 @@ $.fn.transition = function() {
},
looping: function() {
module.debug('Transitions are no longer looping');
$module
.removeClass(className.looping)
;
module.forceRepaint();
if( module.is.looping() ) {
module.reset();
$module
.removeClass(className.looping)
;
}
},
transition: function() {
$module
@ -660,6 +670,8 @@ $.fn.transition = function() {
.css('display')
;
module.verbose('Determining final display state', displayType);
module.save.displayType(displayType);
$clone.remove();
if(currentAnimation != inAnimation) {
module.debug('Direction exists for animation', animation);
@ -673,7 +685,6 @@ $.fn.transition = function() {
module.debug('Static animation found', animation, displayType);
directionExists = false;
}
module.save.displayType(displayType);
module.save.transitionExists(animation, directionExists);
}
return (transitionExists !== undefined)
@ -731,24 +742,47 @@ $.fn.transition = function() {
module.verbose('Showing element', display);
module.remove.hidden();
module.set.visible();
module.set.display();
module.repaint();
},
start: function() {
toggle: function() {
if( module.is.visible() ) {
module.hide();
}
else {
module.show();
}
},
stop: function() {
module.debug('Stopping current animation');
$module.trigger(animationEnd);
},
stopAll: function() {
module.debug('Stopping all animation');
module.remove.queueCallback();
$module.trigger(animationEnd);
},
clear: {
queue: function() {
module.debug('Clearing animation queue')
module.remove.queueCallback();
}
},
enable: function() {
module.verbose('Starting animation');
$module.removeClass(className.disabled);
},
stop: function() {
disable: function() {
module.debug('Stopping animation');
$module.addClass(className.disabled);
},
toggle: function() {
module.debug('Toggling play status');
$module.toggleClass(className.disabled);
},
setting: function(name, value) {
module.debug('Changing setting', name, value);
if( $.isPlainObject(name) ) {

3
src/themes/default/globals/site.variables
View File

@ -374,6 +374,9 @@
Derived Values
--------------------*/
/* Rendered Scrollbar Width */
@scrollBarWidth: 15px;
/* Header Spacing */
@headerLineHeightOffset : (@lineHeight - 1em) / 2;
@headerTopMargin : ~"calc(2rem - "@lineHeightOffset~")";

100
src/themes/default/modules/transition.overrides
View File

@ -14,6 +14,9 @@
Browse
---------------*/
.transition.browse {
animation-duration: 500ms;
}
.transition.browse.in {
animation-name: browseIn;
}
@ -92,7 +95,7 @@
.drop.transition {
transform-origin: top center;
animation-duration: 0.5s;
animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1);
}
.drop.transition.in {
@ -266,6 +269,7 @@
.flip.transition.in,
.flip.transition.out {
animation-duration: 600ms;
perspective: 2000px;
}
.horizontal.flip.transition.in {
@ -653,39 +657,42 @@
Swing
---------------*/
.transition.swing.in,
.transition.swing {
animation-duration: 800ms;
}
.transition[class*="swing down"].in {
animation-name: swingInY;
animation-name: swingInX;
transform-origin: top center;
}
.transition[class*="swing up"].in {
animation-name: swingInY;
animation-name: swingInX;
transform-origin: bottom center;
}
.transition[class*="swing left"].in {
animation-name: swingInX;
animation-name: swingInY;
transform-origin: center right;
}
.transition[class*="swing right"].in {
animation-name: swingInX;
animation-name: swingInY;
transform-origin: center left;
}
.transition.swing.out,
.transition[class*="swing down"].out {
animation-name: swingOutY;
animation-name: swingOutX;
transform-origin: top center;
}
.transition[class*="swing up"].out {
animation-name: swingOutY;
animation-name: swingOutX;
transform-origin: bottom center;
}
.transition[class*="swing left"].out {
animation-name: swingOutX;
animation-name: swingOutY;
transform-origin: center right;
}
.transition[class*="swing right"].out {
animation-name: swingOutX;
animation-name: swingOutY;
transform-origin: center left;
}
@ -696,14 +703,14 @@
opacity: 0;
}
40% {
transform: perspective(1000px) rotateX(-20deg);
transform: perspective(1000px) rotateX(-30deg);
opacity: 1;
}
60% {
transform: perspective(1000px) rotateX(10deg);
transform: perspective(1000px) rotateX(15deg);
}
80% {
transform: perspective(1000px) rotateX(-5deg);
opacity: 1;
transform: perspective(1000px) rotateX(-7.5deg);
}
100% {
transform: perspective(1000px) rotateX(0deg);
@ -715,14 +722,14 @@
opacity: 0;
}
40% {
transform: perspective(1000px) rotateY(20deg);
transform: perspective(1000px) rotateY(30deg);
opacity: 1;
}
60% {
transform: perspective(1000px) rotateY(-10deg);
transform: perspective(1000px) rotateY(-17.5deg);
}
80% {
transform: perspective(1000px) rotateY(5deg);
opacity: 1;
transform: perspective(1000px) rotateY(7.5deg);
}
100% {
transform: perspective(1000px) rotateY(0deg);
@ -730,59 +737,46 @@
}
/* Out */
@keyframes swingOutUp {
@keyframes swingOutX {
0% {
transform: perspective(1000px) rotateX(0deg);
}
30% {
transform: perspective(1000px) rotateX(-20deg);
opacity:1;
}
100% {
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
40% {
transform: perspective(1000px) rotateX(-7.5deg);
}
}
@keyframes swingOutDown {
0% {
transform: perspective(1000px) rotateX(0deg);
60% {
transform: perspective(1000px) rotateX(17.5deg);
}
30% {
transform: perspective(1000px) rotateX(20deg);
opacity:1;
80% {
transform: perspective(1000px) rotateX(-30deg);
opacity: 1;
}
100% {
transform: perspective(1000px) rotateX(-90deg);
transform: perspective(1000px) rotateX(90deg);
opacity: 0;
}
}
@keyframes swingOutLeft {
@keyframes swingOutY {
0% {
transform: perspective(1000px) rotateY(0deg);
}
30% {
transform: perspective(1000px) rotateY(20deg);
opacity:1;
}
100% {
transform: perspective(1000px) rotateY(-90deg);
opacity: 0;
40% {
transform: perspective(1000px) rotateY(7.5deg);
}
}
@keyframes swingOutRight {
0% {
transform: perspective(1000px) rotateY(0deg);
60% {
transform: perspective(1000px) rotateY(-10deg);
}
30% {
transform: perspective(1000px) rotateY(-20deg);
opacity:1;
80% {
transform: perspective(1000px) rotateY(30deg);
opacity: 1;
}
100% {
transform: perspective(1000px) rotateY(90deg);
transform: perspective(1000px) rotateY(-90deg);
opacity: 0;
}
}
/*******************************
Static Animations
*******************************/
@ -792,21 +786,27 @@
---------------*/
.flash.transition {
animation-duration: 750ms;
animation-name: flash;
}
.shake.transition {
animation-duration: 750ms;
animation-name: shake;
}
.bounce.transition {
animation-duration: 750ms;
animation-name: bounce;
}
.tada.transition {
animation-duration: 750ms;
animation-name: tada;
}
.pulse.transition {
animation-duration: 500ms;
animation-name: pulse;
}
.jiggle.transition {
animation-duration: 750ms;
animation-name: jiggle;
}

Write Preview
|||||||
100:0
Loading…
Cancel
Save