+ $('.dog.image')
+ // fade up out is used if available
+ .transition('fade up')
+ // this is now fade up in
+ .transition('fade up')
+ ;
+
+
$('.dog.image')
- .transition('slide')
+ // if a direction if specified it will be obeyed
+ .transition('horizontal flip in')
+ .transition('vertical flip in')
;
@@ -64,8 +82,8 @@ type : 'UI Module'
Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.
$('.dog.image')
- .transition('flip y', '500ms')
- .transition('flip x', 500, function() {
+ .transition('horizontal flip', '500ms')
+ .transition('horizontal flip', 500, function() {
alert('done!');
})
;
@@ -73,18 +91,47 @@ type : 'UI Module'
+
- Variations
+Emphasis
Flash
An element can flash to draw attention to itself
-
+
+ Shake
+An element can shake to draw attention to its position
+
+
+ Tada
+An element can give user positive feedback for an action
+
+
+
+ Bounce
+An element can bounce to politely remind you of itself
+Appearance
+
+
+ Horizontal Flip
+An element can flip in horizontally into or out of view
+
+
+ Vertical Flip
+An element can flip vertically into or out of view
+
+
+ Fade
+An element can fade into or out of view
+
+
+
Scale
+An element can scale into or out of view
+Behavior
-
+
+
diff --git a/node/src/files/components/semantic/collections/grid.css b/node/src/files/components/semantic/collections/grid.css
index 5d627271b..2aef461f0 100644
--- a/node/src/files/components/semantic/collections/grid.css
+++ b/node/src/files/components/semantic/collections/grid.css
@@ -270,7 +270,7 @@
float: right;
}
/*----------------------
- Divided
+ Divided
-----------------------*/
.ui.divided.grid,
.ui.divided.grid > .row {
@@ -286,6 +286,9 @@
-moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1), -2px 0px 0px 0px rgba(255, 255, 255, 0.8);
}
+.ui.divided.grid > .column.row {
+ display: table;
+}
.ui.divided.grid > .column:first-child,
.ui.divided.grid > .row > .column:first-child {
-webkit-box-shadow: none;
@@ -317,7 +320,9 @@
-moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
box-shadow: 0px 0px 0px 1px #DFDFDF;
}
-.ui.celled.grid > .row {
+.ui.celled.grid > .row,
+.ui.celled.grid > .column.row,
+.ui.celled.grid > .column.row:first-child {
display: table;
width: 100%;
margin-top: 0em;
@@ -326,7 +331,7 @@
-moz-box-shadow: 0px -1px 0px 0px #dfdfdf;
box-shadow: 0px -1px 0px 0px #dfdfdf;
}
-.ui.celled.grid > .column,
+.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column {
display: table-cell;
padding: 0.75em;
@@ -340,7 +345,7 @@
-moz-box-shadow: none;
box-shadow: none;
}
-.ui.celled.repsonsive.grid {
+.ui.celled.responsive.grid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@@ -405,10 +410,118 @@
.ui.grid > .equal.height.row > .column {
display: table-cell;
}
+/*----------------------
+ Only (Device)
+-----------------------*/
+/* Mobile Only */
+@media only screen and (max-width: 768px) {
+ .ui.mobile.only.grid,
+ .ui.grid > .mobile.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .mobile.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.mobile.only.grid,
+ .ui.celled.mobile.only.grid,
+ .ui.divided.mobile.only.grid .row,
+ .ui.celled.mobile.only.grid .row,
+ .ui.divided.grid .mobile.only.row,
+ .ui.celled.grid .mobile.only.row,
+ .ui.grid .mobile.only.equal.height.row,
+ .ui.mobile.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .mobile.only.column,
+ .ui.celled.grid > .row > .mobile.only.column,
+ .ui.divided.mobile.only.grid > .row > .column,
+ .ui.celled.mobile.only.grid > .row > .column,
+ .ui.divided.mobile.only.grid > .column,
+ .ui.celled.mobile.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (min-width: 768px) {
+ .ui.mobile.only.grid,
+ .ui.grid > .mobile.only.row,
+ .ui.grid > .row > .mobile.only.column {
+ display: none;
+ }
+}
+/* Tablet Only */
+@media only screen and (min-width: 768px) and (max-width: 998px) {
+ .ui.tablet.only.grid,
+ .ui.grid > .tablet.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .tablet.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.tablet.only.grid,
+ .ui.celled.tablet.only.grid,
+ .ui.divided.tablet.only.grid .row,
+ .ui.celled.tablet.only.grid .row,
+ .ui.divided.grid .tablet.only.row,
+ .ui.celled.grid .tablet.only.row,
+ .ui.grid .tablet.only.equal.height.row,
+ .ui.tablet.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .tablet.only.column,
+ .ui.celled.grid > .row > .tablet.only.column,
+ .ui.divided.tablet.only.grid > .row > .column,
+ .ui.celled.tablet.only.grid > .row > .column,
+ .ui.divided.tablet.only.grid > .column,
+ .ui.celled.tablet.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (max-width: 768px), (min-width: 998px) {
+ .ui.tablet.only.grid,
+ .ui.grid > .tablet.only.row,
+ .ui.grid > .row > .tablet.only.column {
+ display: none;
+ }
+}
+/* Computer Only */
+@media only screen and (min-width: 998px) {
+ .ui.computer.only.grid,
+ .ui.grid > .computer.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .computer.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.computer.only.grid,
+ .ui.celled.computer.only.grid,
+ .ui.divided.computer.only.grid .row,
+ .ui.celled.computer.only.grid .row,
+ .ui.divided.grid .computer.only.row,
+ .ui.celled.grid .computer.only.row,
+ .ui.grid .computer.only.equal.height.row,
+ .ui.computer.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .computer.only.column,
+ .ui.celled.grid > .row > .computer.only.column,
+ .ui.divided.computer.only.grid > .row > .column,
+ .ui.celled.computer.only.grid > .row > .column,
+ .ui.divided.computer.only.grid > .column,
+ .ui.celled.computer.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (max-width: 998px) {
+ .ui.computer.only.grid,
+ .ui.grid > .computer.only.row,
+ .ui.grid > .row > .computer.only.column {
+ display: none;
+ }
+}
/*-------------------
Stackable
--------------------*/
-@media only screen and (max-width: 960px) {
+@media only screen and (max-width: 768px) {
.ui.stackable.grid {
display: block !important;
padding: 0em;
diff --git a/node/src/files/components/semantic/modules/checkbox.js b/node/src/files/components/semantic/modules/checkbox.js
index beef64e17..b69d4e699 100644
--- a/node/src/files/components/semantic/modules/checkbox.js
+++ b/node/src/files/components/semantic/modules/checkbox.js
@@ -83,7 +83,8 @@ $.fn.checkbox = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module');
$module
- .off(namespace)
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
;
},
@@ -104,9 +105,6 @@ $.fn.checkbox = function(parameters) {
enable: function() {
module.debug('Enabling checkbox');
- $module
- .addClass(className.active)
- ;
$input
.prop('checked', true)
;
@@ -116,9 +114,6 @@ $.fn.checkbox = function(parameters) {
disable: function() {
module.debug('Disabling checkbox');
- $module
- .removeClass(className.active)
- ;
$input
.prop('checked', false)
;
@@ -315,7 +310,6 @@ $.fn.checkbox.settings = {
},
className : {
- active : 'active',
radio : 'radio'
}
diff --git a/node/src/files/components/semantic/modules/transition.css b/node/src/files/components/semantic/modules/transition.css
index af3916fb4..e59b06bc3 100644
--- a/node/src/files/components/semantic/modules/transition.css
+++ b/node/src/files/components/semantic/modules/transition.css
@@ -121,7 +121,7 @@
/*--------------
Flips
---------------*/
-.ui.flip.x.transition.in {
+.ui.horizontal.flip.transition.in {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
@@ -131,7 +131,7 @@
backface-visibility: visible !important;
animation-name: flipInX;
}
-.ui.flip.x.transition.out {
+.ui.horizontal.flip.transition.out {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
@@ -141,7 +141,7 @@
animation-name: flipOutX;
backface-visibility: visible !important;
}
-.ui.flip.y.transition.in {
+.ui.vertical.flip.transition.in {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
-moz-backface-visibility: visible !important;
@@ -151,7 +151,7 @@
backface-visibility: visible !important;
animation-name: flipInY;
}
-.ui.flip.y.transition.out {
+.ui.vertical.flip.transition.out {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
-moz-backface-visibility: visible !important;
@@ -727,11 +727,11 @@
---------------*/
@-moz-keyframes slideIn {
0% {
+ overflow: hidden;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
- overflow: hidden;
height: 0;
}
100% {
diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css
index 2fecc230d..0dbe7a872 100755
--- a/node/src/files/stylesheets/semantic.css
+++ b/node/src/files/stylesheets/semantic.css
@@ -987,6 +987,7 @@ body.progress .ui.progress .bar {
display: none;
}
+#example .fixed.column,
#example .fixed.segment {
position: fixed;
}
diff --git a/src/collections/grid.less b/src/collections/grid.less
index 3aa59298e..1f8f909e7 100755
--- a/src/collections/grid.less
+++ b/src/collections/grid.less
@@ -318,8 +318,9 @@
float: right;
}
+
/*----------------------
- Divided
+ Divided
-----------------------*/
.ui.divided.grid,
@@ -345,6 +346,9 @@
-2px 0px 0px 0px rgba(255, 255, 255, 0.8)
;
}
+.ui.divided.grid > .column.row {
+ display: table;
+}
.ui.divided.grid > .column:first-child,
.ui.divided.grid > .row > .column:first-child {
-webkit-box-shadow: none;
@@ -389,7 +393,9 @@
-moz-box-shadow: 0px 0px 0px 1px #DFDFDF;
box-shadow: 0px 0px 0px 1px #DFDFDF;
}
-.ui.celled.grid > .row {
+.ui.celled.grid > .row,
+.ui.celled.grid > .column.row,
+.ui.celled.grid > .column.row:first-child {
display: table;
width: 100%;
margin-top: 0em;
@@ -398,7 +404,7 @@
-moz-box-shadow: 0px -1px 0px 0px #DFDFDF;
box-shadow: 0px -1px 0px 0px #DFDFDF;
}
-.ui.celled.grid > .column,
+.ui.celled.grid > .column:not(.row),
.ui.celled.grid > .row > .column {
display: table-cell;
padding: 0.75em;
@@ -413,7 +419,7 @@
box-shadow: none;
}
-.ui.celled.repsonsive.grid {
+.ui.celled.responsive.grid {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
@@ -486,12 +492,123 @@
display: table-cell;
}
+
+/*----------------------
+ Only (Device)
+-----------------------*/
+
+/* Mobile Only */
+@media only screen and (max-width : 768px) {
+ .ui.mobile.only.grid,
+ .ui.grid > .mobile.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .mobile.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.mobile.only.grid,
+ .ui.celled.mobile.only.grid,
+ .ui.divided.mobile.only.grid .row,
+ .ui.celled.mobile.only.grid .row,
+ .ui.divided.grid .mobile.only.row,
+ .ui.celled.grid .mobile.only.row,
+ .ui.grid .mobile.only.equal.height.row,
+ .ui.mobile.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .mobile.only.column,
+ .ui.celled.grid > .row > .mobile.only.column,
+ .ui.divided.mobile.only.grid > .row > .column,
+ .ui.celled.mobile.only.grid > .row > .column,
+ .ui.divided.mobile.only.grid > .column,
+ .ui.celled.mobile.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (min-width : 768px) {
+ .ui.mobile.only.grid,
+ .ui.grid > .mobile.only.row,
+ .ui.grid > .row > .mobile.only.column {
+ display: none;
+ }
+}
+/* Tablet Only */
+@media only screen and (min-width : 768px) and (max-width : 998px) {
+ .ui.tablet.only.grid,
+ .ui.grid > .tablet.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .tablet.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.tablet.only.grid,
+ .ui.celled.tablet.only.grid,
+ .ui.divided.tablet.only.grid .row,
+ .ui.celled.tablet.only.grid .row,
+ .ui.divided.grid .tablet.only.row,
+ .ui.celled.grid .tablet.only.row,
+ .ui.grid .tablet.only.equal.height.row,
+ .ui.tablet.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .tablet.only.column,
+ .ui.celled.grid > .row > .tablet.only.column,
+ .ui.divided.tablet.only.grid > .row > .column,
+ .ui.celled.tablet.only.grid > .row > .column,
+ .ui.divided.tablet.only.grid > .column,
+ .ui.celled.tablet.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (max-width : 768px), (min-width: 998px) {
+ .ui.tablet.only.grid,
+ .ui.grid > .tablet.only.row,
+ .ui.grid > .row > .tablet.only.column {
+ display: none;
+ }
+}
+/* Computer Only */
+@media only screen and (min-width : 998px) {
+ .ui.computer.only.grid,
+ .ui.grid > .computer.only.row {
+ display: block !important;
+ }
+ .ui.grid > .row > .computer.only.column {
+ display: inline-block !important;
+ }
+ .ui.divided.computer.only.grid,
+ .ui.celled.computer.only.grid,
+ .ui.divided.computer.only.grid .row,
+ .ui.celled.computer.only.grid .row,
+ .ui.divided.grid .computer.only.row,
+ .ui.celled.grid .computer.only.row,
+ .ui.grid .computer.only.equal.height.row,
+ .ui.computer.only.grid .equal.height.row {
+ display: table !important;
+ }
+ .ui.divided.grid > .row > .computer.only.column,
+ .ui.celled.grid > .row > .computer.only.column,
+ .ui.divided.computer.only.grid > .row > .column,
+ .ui.celled.computer.only.grid > .row > .column,
+ .ui.divided.computer.only.grid > .column,
+ .ui.celled.computer.only.grid > .column {
+ display: table-cell !important;
+ }
+}
+@media only screen and (max-width : 998px) {
+ .ui.computer.only.grid,
+ .ui.grid > .computer.only.row,
+ .ui.grid > .row > .computer.only.column {
+ display: none;
+ }
+}
+
/*-------------------
Stackable
--------------------*/
-@media only screen and (max-width : 960px) {
+@media only screen and (max-width : 768px) {
.ui.stackable.grid {
display: block !important;
padding: 0em;
diff --git a/src/modules/checkbox.js b/src/modules/checkbox.js
index beef64e17..b69d4e699 100755
--- a/src/modules/checkbox.js
+++ b/src/modules/checkbox.js
@@ -83,7 +83,8 @@ $.fn.checkbox = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module');
$module
- .off(namespace)
+ .off(eventNamespace)
+ .removeData(moduleNamespace)
;
},
@@ -104,9 +105,6 @@ $.fn.checkbox = function(parameters) {
enable: function() {
module.debug('Enabling checkbox');
- $module
- .addClass(className.active)
- ;
$input
.prop('checked', true)
;
@@ -116,9 +114,6 @@ $.fn.checkbox = function(parameters) {
disable: function() {
module.debug('Disabling checkbox');
- $module
- .removeClass(className.active)
- ;
$input
.prop('checked', false)
;
@@ -315,7 +310,6 @@ $.fn.checkbox.settings = {
},
className : {
- active : 'active',
radio : 'radio'
}
diff --git a/src/modules/transition.less b/src/modules/transition.less
index ec2c370f6..031ebd511 100755
--- a/src/modules/transition.less
+++ b/src/modules/transition.less
@@ -139,7 +139,7 @@
Flips
---------------*/
-.ui.flip.x.transition.in {
+.ui.horizontal.flip.transition.in {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInX;
-moz-backface-visibility: visible !important;
@@ -149,7 +149,7 @@
backface-visibility: visible !important;
animation-name: flipInX;
}
-.ui.flip.x.transition.out {
+.ui.horizontal.flip.transition.out {
-webkit-animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-moz-animation-name: flipOutX;
@@ -159,7 +159,7 @@
animation-name: flipOutX;
backface-visibility: visible !important;
}
-.ui.flip.y.transition.in {
+.ui.vertical.flip.transition.in {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipInY;
-moz-backface-visibility: visible !important;
@@ -169,7 +169,7 @@
backface-visibility: visible !important;
animation-name: flipInY;
}
-.ui.flip.y.transition.out {
+.ui.vertical.flip.transition.out {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
-moz-backface-visibility: visible !important;