diff --git a/server/documents/elements/segment.html.eco b/server/documents/elements/segment.html.eco index 194706327..7888c2184 100755 --- a/server/documents/elements/segment.html.eco +++ b/server/documents/elements/segment.html.eco @@ -323,6 +323,16 @@ themes : ['default', 'GitHub']

Pellentesque habitant morbi

+
+
+
+

Pellentesque habitant morbi

+
+
+

Pellentesque habitant morbi

+
+
+

Colored

diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco index 8701fe471..6d461cd47 100644 --- a/server/documents/hotfix.html.eco +++ b/server/documents/hotfix.html.eco @@ -12,23 +12,80 @@ type : 'Library'
-
- -
+
+
+ + + Electronics + +
+
+ +
+ + Mobile Phones +
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+ + +
+ +
+
+ + Tablets +
+
+ +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+ + +
+ +
+
+
\ No newline at end of file diff --git a/server/documents/modules/checkbox.html.eco b/server/documents/modules/checkbox.html.eco index a9db4d49c..bd55606ed 100755 --- a/server/documents/modules/checkbox.html.eco +++ b/server/documents/modules/checkbox.html.eco @@ -27,16 +27,24 @@ themes : ['Default', 'Colored']

Checkbox

A standard checkbox

- +
-

Radio Box

+

Radio

A checkbox can be formatted as a radio element. This means it is an exclusive option.

+ +
+ + +
+
+
+
@@ -66,34 +74,29 @@ themes : ['Default', 'Colored']
-
-
- - -
-
+
- +
- +
- +
- +
@@ -113,8 +116,8 @@ themes : ['Default', 'Colored']
-
+
@@ -162,6 +165,27 @@ themes : ['Default', 'Colored']
+
+

Checked

+

A checkbox can be checked

+
+ + +
+
+ +
+

Indeterminate

+

A checkbox can be indeterminate

+
+ An indeterminate state can only be set in javascript, see examples section +
+
+ + +
+
+

Disabled

A checkbox can be read-only and unable to change states

@@ -182,22 +206,22 @@ themes : ['Default', 'Colored']

Variations

-
+

Fitted

A fitted checkbox does not leave padding for a label

-
+
-
+
-
+
@@ -211,6 +235,126 @@ themes : ['Default', 'Colored']

Examples

+
+

Grouped Checkboxes

+

The indeterminate state can be used to represent a value that is neither checked or unchecked.

+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ // master checkbox + $('.list .master.checkbox') + .checkbox({ + onChange : function () { + var + $parentCheckbox = $(this), + $childCheckbox = $(this).closest('.checkbox').siblings('.list').find('.checkbox') + ; + // change state of child checkbox + if( $parentCheckbox.checkbox('is indeterminate') ) { + return; + } + else if( $parentCheckbox.checkbox('is checked') ) { + $childCheckbox.checkbox('check'); + } + else { + $childCheckbox.checkbox('uncheck') + } + } + }) + ; +
+
+ // child list checkbox + $('.list .child.checkbox') + .checkbox({ + fireOnInit : true, + onChange : function() { + var + $parentCheckbox = $(this).closest('.list').closest('.item').children('.checkbox'), + $checkbox = $(this).closest('.list').not('.ui').find('.checkbox'), + allChecked = true, + allUnchecked = true + ; + // check to see if all other siblings are checked or unchecked + $checkbox.each(function() { + if( $(this).checkbox('is checked') ) { + allUnchecked = false; + } + else { + allChecked = false; + } + }); + // set parent checkbox to match + if(allChecked) { + console.log('checking parent'); + $parentCheckbox.checkbox('set input checked'); + } + else if(allUnchecked) { + console.log('unchecking parent'); + $parentCheckbox.checkbox('set input unchecked'); + } + else { + console.log('indeterminate parent'); + $parentCheckbox.checkbox('set input indeterminate'); + } + } + }) + ; +
+

Uncheckable Checkboxes

To make a user able to check a box, but unable to uncheck it, use the uncheckable setting.

@@ -426,6 +570,16 @@ themes : ['Default', 'Colored'] HTML input element Callback after a checkbox is checked. + + onUndeterminate + HTML input element + Callback after a checkbox is set to undeterminate. + + + onDeterminate + HTML input element + Callback after a checkbox is set to determinate. + onUnchecked HTML input element diff --git a/server/files/javascript/checkbox.js b/server/files/javascript/checkbox.js index a22fc51be..e69060fdf 100644 --- a/server/files/javascript/checkbox.js +++ b/server/files/javascript/checkbox.js @@ -5,6 +5,7 @@ semantic.dropdown.ready = function() { // selector cache var + $indeterminate = $('.indeterminate.example').find('.ui.checkbox'), $checkbox = $('.example').not('.static').find('.ui.checkbox'), // alias handler @@ -19,6 +20,12 @@ semantic.dropdown.ready = function() { .checkbox() ; + $indeterminate + .checkbox('indeterminate') + ; + + + }; diff --git a/server/files/javascript/docs.js b/server/files/javascript/docs.js index 63fd2ed1c..8f029d3bd 100644 --- a/server/files/javascript/docs.js +++ b/server/files/javascript/docs.js @@ -71,7 +71,7 @@ semantic.ready = function() { $example = $('.example'), $popupExample = $example.not('.no'), $shownExample = $example.filter('.shown'), - $prerenderedExample = $example.has('.ui.dropdown, .ui.search, .ui.rating, .ui.dimmer, .ui.embed'), + $prerenderedExample = $example.has('.ui.checkbox, .ui.dropdown, .ui.search, .ui.rating, .ui.dimmer, .ui.embed'), $visibilityExample = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'), @@ -538,7 +538,6 @@ semantic.ready = function() { $themeDropdown .api({ on : 'now', - cache : 'local', debug : true, action : 'getVariables', dataType : 'text', @@ -548,7 +547,6 @@ semantic.ready = function() { $themeDropdown .api({ on : 'now', - cache : 'local', action : 'getOverrides', dataType : 'text', urlData : urlData, diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index a39f3bcb6..c9e4a4cc3 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -976,6 +976,14 @@ blockquote .author { } +/*-------------- + Fitted +---------------*/ + +#example .fitted.example .segment { + line-height: 1; +} + /*-------------- Grid ---------------*/ @@ -1683,15 +1691,15 @@ code.code .class.value b { border-radius: 5px; line-height: 1; vertical-align: baseline; - display: inline-block; + display: inline-block;/* -webkit-transition: all 0.3s ease; - transition: all 0.3s ease; + transition: all 0.3s ease;*/ } -code.code:hover .class.value { +code.code .class.value { /*color: #668C79;*/ } -code.code:hover .class.string b, -code.code:hover .class.value b { +code.code .class.string b, +code.code .class.value b { background-color: rgba(98, 190, 169, 0.25); color: #008078; margin: 0px -2px; diff --git a/server/partials/header.html.eco b/server/partials/header.html.eco index 84228fc6b..b020cb4f1 100755 --- a/server/partials/header.html.eco +++ b/server/partials/header.html.eco @@ -9,7 +9,7 @@ <%=@document.title %> <% if @document.status?: %><%= @document.status %><% end %>
- <% if 'developments' in @getEnvironments(): %> + <% if 'development' in @getEnvironments(): %> <% else: %> <% end %> @@ -148,7 +148,7 @@ <% end %>