Browse Source

Merge branch 'master' of github.com:quirkyinc/semantic

Conflicts:
	build/minified/modules/checkbox.min.js
	build/minified/modules/transition.js
	build/minified/modules/transition.min.js
	build/packaged/modules/transition.js
	build/packaged/semantic.min.css
	build/packaged/semantic.min.js
	build/uncompressed/modules/transition.js
	node/src/files/components/semantic/modules/transition.js

Former-commit-id: ecd5fa47b0
Former-commit-id: 35d3509f50
pull/258/head
Jack Lukic 11 years ago
parent
commit
7ba38c56ed
20 changed files with 527 additions and 102 deletions
  1. 2
      build/minified/collections/grid.min.css
  2. 10
      build/minified/modules/checkbox.js
  3. 2
      build/minified/modules/checkbox.min.js
  4. 2
      build/minified/modules/transition.min.css
  5. 10
      build/packaged/modules/checkbox.js
  6. 2
      build/packaged/semantic.min.css.REMOVED.git-id
  7. 2
      build/packaged/semantic.min.js.REMOVED.git-id
  8. 123
      build/uncompressed/collections/grid.css
  9. 10
      build/uncompressed/modules/checkbox.js
  10. 10
      build/uncompressed/modules/transition.css
  11. 83
      node/src/documents/collections/grid.html
  12. 19
      node/src/documents/modules/checkbox.html
  13. 65
      node/src/documents/modules/transition.html
  14. 123
      node/src/files/components/semantic/collections/grid.css
  15. 10
      node/src/files/components/semantic/modules/checkbox.js
  16. 10
      node/src/files/components/semantic/modules/transition.css
  17. 1
      node/src/files/stylesheets/semantic.css
  18. 127
      src/collections/grid.less
  19. 10
      src/modules/checkbox.js
  20. 8
      src/modules/transition.less

2
build/minified/collections/grid.min.css
File diff suppressed because it is too large
View File

10
build/minified/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'
}

2
build/minified/modules/checkbox.min.js

@ -1 +1 @@
!function(a,b,c,d){a.fn.checkbox=function(b){var c,e=a(this),f=a.extend(!0,{},a.fn.checkbox.settings,b),g=e.selector||"",h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=a(this).next(f.selector.label).first(),n=a(this).find(f.selector.input),o="."+f.namespace,p="module-"+f.namespace,q=e.selector||"",r=this,s=e.data(p),t=f.className,u=f.namespace,v=f.errors;b={initialize:function(){b.verbose("Initializing checkbox"),f.context&&""!==q?(b.verbose("Adding delegated events"),a(r,f.context).on(q,"click"+o,b.toggle).on(q+" + "+f.selector.label,"click"+o,b.toggle)):(e.on("click"+o,b.toggle).data(p,b),m.on("click"+o,b.toggle)),b.instantiate()},instantiate:function(){b.verbose("Storing instance of module",b),s=b,e.data(p,b)},destroy:function(){b.verbose("Destroying previous module"),e.off(u)},is:{radio:function(){return e.hasClass(t.radio)}},can:{disable:function(){return"boolean"==typeof f.required?f.required:!b.is.radio()}},enable:function(){b.debug("Enabling checkbox"),e.addClass(t.active),n.prop("checked",!0),a.proxy(f.onChange,n.get())(),a.proxy(f.onEnable,n.get())()},disable:function(){b.debug("Disabling checkbox"),e.removeClass(t.active),n.prop("checked",!1),a.proxy(f.onChange,n.get())(),a.proxy(f.onDisable,n.get())()},toggle:function(c){b.verbose("Determining new checkbox state",a(c.target)),n.prop("checked")!==d&&n.prop("checked")?b.can.disable()&&b.disable():b.enable()},setting:function(b,c){return c===d?f[b]:(a.isPlainObject(b)?a.extend(!0,f,b):f[b]=c,void 0)},internal:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):(b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"),b.debug.apply(console,arguments)))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):(b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"),b.verbose.apply(console,arguments)))},error:function(){b.error=Function.prototype.bind.call(console.error,console,f.moduleName+":"),b.error.apply(console,arguments)},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:r,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var c=f.moduleName+":",e=0;h=!1,clearTimeout(b.performance.timer),a.each(i,function(a,b){e+=b["Execution Time"]}),c+=" "+e+"ms",g&&(c+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(c),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=r||f,"string"==typeof c&&s!==d&&(c=c.split(/[\. ]/),g=c.length-1,a.each(c,function(c,e){a.isPlainObject(s[e])&&c!=g?s=s[e]:s[e]!==d?h=s[e]:b.error(v.method)})),a.isFunction(h)?h.apply(f,e):h||!1}},k?(s===d&&b.initialize(),c=b.invoke(j)):(s!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.checkbox.settings={moduleName:"Checkbox",namespace:"checkbox",verbose:!0,debug:!0,performance:!0,context:!1,required:"auto",onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input",label:"label"},className:{active:"active",radio:"radio"}}}(jQuery,window,document);
!function(a,b,c,d){a.fn.checkbox=function(b){var c,e=a(this),f=a.extend(!0,{},a.fn.checkbox.settings,b),g=e.selector||"",h=(new Date).getTime(),i=[],j=arguments[0],k="string"==typeof j,l=[].slice.call(arguments,1);return e.each(function(){var b,e=a(this),m=a(this).next(f.selector.label).first(),n=a(this).find(f.selector.input),o="."+f.namespace,p="module-"+f.namespace,q=e.selector||"",r=this,s=e.data(p),t=f.className,u=(f.namespace,f.errors);b={initialize:function(){b.verbose("Initializing checkbox"),f.context&&""!==q?(b.verbose("Adding delegated events"),a(r,f.context).on(q,"click"+o,b.toggle).on(q+" + "+f.selector.label,"click"+o,b.toggle)):(e.on("click"+o,b.toggle).data(p,b),m.on("click"+o,b.toggle)),b.instantiate()},instantiate:function(){b.verbose("Storing instance of module",b),s=b,e.data(p,b)},destroy:function(){b.verbose("Destroying previous module"),e.off(o).removeData(p)},is:{radio:function(){return e.hasClass(t.radio)}},can:{disable:function(){return"boolean"==typeof f.required?f.required:!b.is.radio()}},enable:function(){b.debug("Enabling checkbox"),n.prop("checked",!0),a.proxy(f.onChange,n.get())(),a.proxy(f.onEnable,n.get())()},disable:function(){b.debug("Disabling checkbox"),n.prop("checked",!1),a.proxy(f.onChange,n.get())(),a.proxy(f.onDisable,n.get())()},toggle:function(c){b.verbose("Determining new checkbox state",a(c.target)),n.prop("checked")!==d&&n.prop("checked")?b.can.disable()&&b.disable():b.enable()},setting:function(b,c){return c===d?f[b]:(a.isPlainObject(b)?a.extend(!0,f,b):f[b]=c,void 0)},internal:function(c,e){return e===d?b[c]:(a.isPlainObject(c)?a.extend(!0,b,c):b[c]=e,void 0)},debug:function(){f.debug&&(f.performance?b.performance.log(arguments):(b.debug=Function.prototype.bind.call(console.info,console,f.moduleName+":"),b.debug.apply(console,arguments)))},verbose:function(){f.verbose&&f.debug&&(f.performance?b.performance.log(arguments):(b.verbose=Function.prototype.bind.call(console.info,console,f.moduleName+":"),b.verbose.apply(console,arguments)))},error:function(){b.error=Function.prototype.bind.call(console.error,console,f.moduleName+":"),b.error.apply(console,arguments)},performance:{log:function(a){var c,d,e;f.performance&&(c=(new Date).getTime(),e=h||c,d=c-e,h=c,i.push({Element:r,Name:a[0],Arguments:[].slice.call(a,1)||"","Execution Time":d})),clearTimeout(b.performance.timer),b.performance.timer=setTimeout(b.performance.display,100)},display:function(){var c=f.moduleName+":",e=0;h=!1,clearTimeout(b.performance.timer),a.each(i,function(a,b){e+=b["Execution Time"]}),c+=" "+e+"ms",g&&(c+=" '"+g+"'"),(console.group!==d||console.table!==d)&&i.length>0&&(console.groupCollapsed(c),console.table?console.table(i):a.each(i,function(a,b){console.log(b.Name+": "+b["Execution Time"]+"ms")}),console.groupEnd()),i=[]}},invoke:function(c,e,f){var g,h;return e=e||l,f=r||f,"string"==typeof c&&s!==d&&(c=c.split(/[\. ]/),g=c.length-1,a.each(c,function(c,e){a.isPlainObject(s[e])&&c!=g?s=s[e]:s[e]!==d?h=s[e]:b.error(u.method)})),a.isFunction(h)?h.apply(f,e):h||!1}},k?(s===d&&b.initialize(),c=b.invoke(j)):(s!==d&&b.destroy(),b.initialize())}),c?c:this},a.fn.checkbox.settings={moduleName:"Checkbox",namespace:"checkbox",verbose:!0,debug:!0,performance:!0,context:!1,required:"auto",onChange:function(){},onEnable:function(){},onDisable:function(){},errors:{method:"The method you called is not defined."},selector:{input:"input",label:"label"},className:{radio:"radio"}}}(jQuery,window,document);

2
build/minified/modules/transition.min.css
File diff suppressed because it is too large
View File

10
build/packaged/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'
}

2
build/packaged/semantic.min.css.REMOVED.git-id

@ -1 +1 @@
dd5ec5286dfb0fa08a1ab809cacf09ac1e7ca562
04c9369ea06741fa349716aeecf6285b4fc6818b

2
build/packaged/semantic.min.js.REMOVED.git-id

@ -1 +1 @@
615e02d507dc7a9bdf1f57b32ea9b35b7081199d
ecce5ee7e1170b0392897d0bd28d04f1d1fb7ffa

123
build/uncompressed/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;

10
build/uncompressed/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'
}

10
build/uncompressed/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% {

83
node/src/documents/collections/grid.html

@ -313,6 +313,89 @@ type : 'UI Collection'
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Only (Device)</h4>
<p>A grid can have its columns, or rows only show for either a computer, tablet, or mobile.</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc</i>
</div>
<div class="ui grid">
<div class="two column mobile only row">
<div class="column">
<div class="ui segment">
Mobile
</div>
</div>
<div class="column">
<div class="ui segment">
Mobile
</div>
</div>
</div>
<div class="three column row">
<div class="computer only column">
<div class="ui segment">
Computer
</div>
</div>
<div class="tablet mobile only column">
<div class="ui segment">
Tablet and Mobile
</div>
</div>
<div class="column">
<div class="ui segment">
All Sizes
</div>
</div>
<div class="column">
<div class="ui segment">
All Sizes
</div>
</div>
</div>
<div class="four column computer only row">
<div class="column">
<div class="ui segment">
Computer
</div>
</div>
<div class="column">
<div class="ui segment">
Computer
</div>
</div>
<div class="column">
<div class="ui segment">
Computer
</div>
</div>
<div class="column">
<div class="ui segment">
Computer
</div>
</div>
</div>
<div class="three column tablet only row">
<div class="column">
<div class="ui segment">
Tablet
</div>
</div>
<div class="column">
<div class="ui segment">
Tablet
</div>
</div>
<div class="column">
<div class="ui segment">
Tablet
</div>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Changing grid column count</h4>

19
node/src/documents/modules/checkbox.html

@ -65,25 +65,6 @@ type : 'UI Module'
</div>
</div>
<div class="example">
<h4 class="ui header">Form Checkbox</h4>
<p>A checkbox can be found inside a form</p>
<div class="ui form segment">
<div class="field">
<label>Name</label>
<input placeholder="Name" type="text">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" />
<div class="box"></div>
</div>
<label>Accept all our evil terms and conditions</label>
</div>
<div class="ui teal button">Submit</div>
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">

65
node/src/documents/modules/transition.html

@ -46,13 +46,31 @@ type : 'UI Module'
;
</div>
<h3 class="ui header">Visibility</h3>
<p>After the animation queue finishes for an element, its final visibility state is determined. If an animation is an outward transition, the final visibility status will be hidden. If an animation is inward the element will be visible after the animatino finishes.</p>
<div class="code" data-demo="true" data-title="Disapearing element">
$('.dog.image')
.transition('vertical flip out')
;
</div>
<h3 class="ui header">Transition Direction</h3>
<p>If an animation direction is not specified it will automatically be determined based on the elements current visibility. For example, if the element is visible the animation "fade out" will be called, if the animation is not visible "fade in".</p>
<div class="code" data-demo="true" data-title="Initializing a transition">
<div class="code" data-demo="true" data-title="Automatically choosing direction">
$('.dog.image')
// fade up out is used if available
.transition('fade up')
// this is now fade up in
.transition('fade up')
;
</div>
<div class="code" data-demo="true" data-title="Specifying a direction">
$('.dog.image')
.transition('slide')
// if a direction if specified it will be obeyed
.transition('horizontal flip in')
.transition('vertical flip in')
;
</div>
@ -64,8 +82,8 @@ type : 'UI Module'
<p>Animations called in sequence will be queued. Any queued animation will automatically determine the transition direction if none is specified.</p>
<div class="code" data-demo="true" data-title="Queueing animations">
$('.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'
<h2 class="ui dividing header">Variations</h2>
<h3>Emphasis</h3>
<div class="example">
<h4 class="ui header">Flash</h4>
<p>An element can flash to draw attention to itself</p>
<div class="ui icon button">
<i class="icon cloud"></i>
</div>
</div>
<div class="example">
<h4 class="ui header">Shake</h4>
<p>An element can shake to draw attention to its position</p>
</div>
<div class="example">
<h4 class="ui header">Tada</h4>
<p>An element can give user positive feedback for an action</p>
</div>
<div class="example">
<h4 class="ui header">Bounce</h4>
<p>An element can bounce to politely remind you of itself</p>
</div>
<h3>Appearance</h3>
<div class="example">
<h4 class="ui header">Horizontal Flip</h4>
<p>An element can flip in horizontally into or out of view</p>
</div>
<div class="example">
<h4 class="ui header">Vertical Flip</h4>
<p>An element can flip vertically into or out of view</p>
</div>
<div class="example">
<h4 class="ui header">Fade</h4>
<p>An element can fade into or out of view</p>
</div>
<div class="example">
<h4 class="ui header">Scale</h4>
<p>An element can scale into or out of view</p>
</div>
<h2 class="ui dividing header">Behavior</h2>
</div>
<div class="five wide right floated column">
<div class="ui secondary fixed segment">
<div class="five wide right floated fixed column">
<div class="ui secondary segment">
<img src="/images/demo/vector.png" class="ui dog image">
</div>
</div>

123
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;

10
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'
}

10
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% {

1
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;
}

127
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;

10
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'
}

8
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;

Loading…
Cancel
Save