diff --git a/node/src/documents/elements/label.html b/node/src/documents/elements/label.html index 9d6e1c938..f7cc87131 100755 --- a/node/src/documents/elements/label.html +++ b/node/src/documents/elements/label.html @@ -40,38 +40,6 @@ type : 'UI Element' -
-

Attached Label

-

A label attached to a content segment

-
-
-
-
Top Left
-
Top Right
-
Bottom Left
-
Bottom Right
-

Hey let's look at labels.

-
-
-
-
-
Existing Users
-
-
- - -
-
- - -
-
Log in
-
-
-
-
-
-

Label with detail

A tag can optionally display a detail

@@ -173,11 +141,35 @@ type : 'UI Element'
-

Tag

-

A label can look like a tag

- - First - +

Attached Label

+

A label attached to a content segment

+
+
+
+
Top Left
+
Top Right
+
Bottom Left
+
Bottom Right
+

Hey let's look at labels.

+
+
+
+
+
Existing Users
+
+
+ + +
+
+ + +
+
Log in
+
+
+
+
@@ -196,7 +188,7 @@ type : 'UI Element'

Label Groups

-

Groups can share variations together

+

Labels can share sizes together

Fun @@ -211,22 +203,24 @@ type : 'UI Element' Witty
-

-
- +
+
+

Labels can share colors together

+
+ Fun - + Happy
22
 - + Smart - + Insane - + Exciting
diff --git a/node/src/documents/elements/progress.html b/node/src/documents/elements/progress.html index b89fca471..1ca9997a1 100755 --- a/node/src/documents/elements/progress.html +++ b/node/src/documents/elements/progress.html @@ -22,7 +22,7 @@ type : 'UI Element'

Standard

-
+

Progress:

A standard progress bar

diff --git a/node/src/documents/modules/checkbox.html b/node/src/documents/modules/checkbox.html index 06e1b5f95..463dbf01e 100755 --- a/node/src/documents/modules/checkbox.html +++ b/node/src/documents/modules/checkbox.html @@ -9,87 +9,144 @@ type : 'UI Module'

Checkbox

-

Checkbox is a plugin for attaching form events to UI checkbox

+

A checkbox is a ui module which indicates a user's selection of a choice.

- Structure + Standard + Variations Behavior - Examples - Getting Started Settings
-

UI checkboxes do not need javascript to function correctly, checkboxs can be triggered by matching the label's for attribute to the id tag of an input field

-

However, there may be situations where it is less work to use javascript to initialize a checkbox then to manually assign ID tags to each field, or you might want to programmatically trigger the checkbox state. In these cases the checkbox module may be useful.

- -

Examples

- -

Initializing a check box

-
$('.ui.checkbox') - .checkbox() -; -
+ +

Standard

-
-

Check Box

-

The html required for a standard UI checkbox

+
+

Check Box

+

A standard checkbox

- +
+
+
+ +
+

Check Box

+

A checkbox can function without javascript

+
+ +
-

Radio Box

-

The html required for a standard UI radio box

-

A radio box is just a reskinned version of a checkbox, the initialization of the module is the same.

-
- - +

Form Checkbox

+

A checkbox can be found inside a form

+
+
+
+ +
+
+ +
+
+ +

Variations

+ +
+

Radio Box

+

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

- +
+
+

Size

+

A checkbox can be a different size.

+
+ + +
+

+
+ + +
+
-

Getting Started

- -

The plugin must be initialized once before methods can be accessed

-
$('.ui.checkbox') - .checkbox() -;
+

Behavior

-

You can enable a checkbox programmatically using the enable method

-
$('.ui.checkbox') - .checkbox('enable') -;
+
+

A checkbox can be enabled

+
+ $('.enable.button') + .checkbox('enable') + ; +
+
Enable
+
+ +
+
+

You can enable all checkboxes initialized at the same time by calling the enableAll method

-
$('.ui.checkbox') - .checkbox('enableAll') -;
+
+ $('.ui.checkbox') + .checkbox('enableAll') + ; +

You can disable a checkbox programmatically using the disable method

-
$('.ui.checkbox') - .checkbox('disable') -;
+
+ $('.ui.checkbox') + .checkbox('disable') + ; +

You can disable all checkboxes initialized at the same time by calling the disableAll method

-
$('.ui.checkbox') - .checkbox('disableAll') -;
+
+ $('.ui.checkbox') + .checkbox('disableAll') + ; +
+ +

Getting Started

+

Initializing a check box

+
+ $('.ui.checkbox') + .checkbox() + ; +
+

Defaults

- - - - +
Callbacks
+ + + + + + + + + + +
Checkbox Settings
contextfalseA selector or jQuery object to use as a delegated event context
+ + + + + + @@ -105,11 +162,14 @@ type : 'UI Module' -
Callbacks
onChange NoneNone Callback after a checkbox is disabled.
- - - - + +
UI Module Settings
+ + + + + + @@ -140,7 +200,7 @@ type : 'UI Module' diff --git a/node/src/files/components/semantic/src/collections/form.css b/node/src/files/components/semantic/src/collections/form.css index cde344d64..9c351ab24 100644 --- a/node/src/files/components/semantic/src/collections/form.css +++ b/node/src/files/components/semantic/src/collections/form.css @@ -398,9 +398,15 @@ .ui.form .inline.field > p, .ui.form .inline.field > input, .ui.form .inline.field > select { + display: inline-block; - vertical-align: middle; width: auto; + + margin-top: 0em; + margin-bottom: 0em; + + vertical-align: middle; + font-size: 1em; } .ui.form .inline.fields .field > :first-child, diff --git a/node/src/files/components/semantic/src/collections/table.css b/node/src/files/components/semantic/src/collections/table.css index 43ba6a0bb..c30cb6019 100644 --- a/node/src/files/components/semantic/src/collections/table.css +++ b/node/src/files/components/semantic/src/collections/table.css @@ -24,7 +24,6 @@ color: rgba(0, 0, 0, 0.75); border: 1px solid #DDDDDD; - border-bottom-width: 3px; } .ui.table tr, @@ -43,7 +42,7 @@ transition: all 0.1s ease-out; } .ui.table thead { - border-bottom: 2px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: rgba(50, 50, 50, 0.1); } .ui.table th { @@ -94,7 +93,7 @@ Hover ---------------*/ -/* Grid */ +/* Celled */ .ui.celled.table tr:hover td { background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 1); @@ -231,11 +230,11 @@ *******************************/ /*-------------- - Grid + Celled ---------------*/ .ui.celled.table { - color: rgba(0, 0, 0, 0.55); + color: rgba(25, 25, 25, 0.9); } .ui.celled.table tbody tr, .ui.celled.table tfoot tr { diff --git a/node/src/files/components/semantic/src/modules/checkbox.css b/node/src/files/components/semantic/src/modules/checkbox.css index f24a1bdd9..7358ea950 100644 --- a/node/src/files/components/semantic/src/modules/checkbox.css +++ b/node/src/files/components/semantic/src/modules/checkbox.css @@ -15,7 +15,7 @@ width: 1em; height: 1em; - vertical-align: baseline; + vertical-align: middle; } .ui.checkbox input { visibility: hidden; @@ -24,6 +24,7 @@ /*--- Box ---*/ +.ui.checkbox .box, .ui.checkbox label { outline: none; cursor: pointer; @@ -38,7 +39,7 @@ -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - background: #FCFFF4; + background: #FFFFFF; -webkit-transition: background-color 0.1s ease-out, @@ -63,6 +64,7 @@ } /*--- Checkbox ---*/ +.ui.checkbox .box:after, .ui.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -79,6 +81,7 @@ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } +.ui.checkbox .box:after, .ui.checkbox label:after { width: 0.5em; height: 0.2em; @@ -94,6 +97,7 @@ /*--- Hover ---*/ +.ui.checkbox .box:hover, .ui.checkbox label:hover { background-color: rgba(0, 0, 0, 0.02); -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); @@ -103,12 +107,14 @@ /*--- Down ---*/ +.ui.checkbox .box:active, .ui.checkbox label:active { background-color: rgba(0, 0, 0, 0.05); } /*--- Active ---*/ +.ui.checkbox input:checked + .box:after, .ui.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); @@ -117,6 +123,8 @@ /*--- Disabled ---*/ +.ui.disabled.checkbox + .box:after, +.ui.checkbox input[disabled] + .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; @@ -136,6 +144,7 @@ width: 14px; height: 16px; } +.ui.radio.checkbox .box, .ui.radio.checkbox label { width: 14px; height: 14px; @@ -143,6 +152,7 @@ -moz-border-radius: 500px; border-radius: 500px; } +.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { top: 3px; left: 3px; @@ -163,18 +173,33 @@ ---------------*/ .ui.checkbox, +.ui.checkbox .box, .ui.checkbox label { font-size: 1em; } .ui.large.checkbox, +.ui.large.checkbox .box, .ui.large.checkbox label { - font-size: 1.5em; + font-size: 1.25em; } .ui.huge.checkbox, +.ui.huge.checkbox .box, .ui.huge.checkbox label { font-size: 1.5em; } +/*-------------- + Colors +---------------*/ + +.ui.round.blue.checkbox label:after { + background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); + background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); + background: -o-linear-gradient(top, #016286 0%, #00506E 100%); + background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); + background: linear-gradient(top, #016286 0%, #00506E 100%); +} + /*-------------- Rounded @@ -204,6 +229,7 @@ position: relative; } +.ui.round.checkbox .box, .ui.round.checkbox label { cursor: pointer; position: absolute; @@ -237,6 +263,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 ); } +.ui.round.checkbox .box:after, .ui.round.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -264,22 +291,15 @@ -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); } +.ui.round.checkbox .box:hover:after, .ui.round.checkbox label:hover:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } +.ui.round.checkbox input:checked + .box:after, .ui.round.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } - -/* Variations */ -.ui.round.blue.checkbox label:after { - background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); - background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); - background: -o-linear-gradient(top, #016286 0%, #00506E 100%); - background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); - background: linear-gradient(top, #016286 0%, #00506E 100%); -} \ No newline at end of file diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 7f9fe4357..f1f21d9d8 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -15,18 +15,18 @@ semantic.ready = function() { $sortTable = $('.sortable.table'), $demo = $('.demo'), $waypoints = $('h2:not(.ui)'), - + $menuPopup = $('.ui.main.menu .popup.item'), - + $example = $('.example'), $shownExample = $example.filter('.shown'), - + $developer = $('.developer.item'), $designer = $('.designer.item'), - + $increaseFont = $('.font .increase'), $decreaseFont = $('.font .decrease'), - + $peek = $('.peek'), $peekItem = $peek.children('.menu').children('a.item'), $peekSubItem = $peek.find('.item .menu .item'), @@ -100,7 +100,7 @@ semantic.ready = function() { $annotated = $example.find('.annotated'), $code = $annotated.find('.code'), whiteSpace = new RegExp('\\n\\s{4}', 'g'), - code = '' + code = '' ; // if ui has wrapper use that if($demo.filter('.ui').size() === 0) { @@ -125,12 +125,12 @@ semantic.ready = function() { $code = $('
') .data('type', 'html') .addClass('code') - .text(code) + .html(code) .appendTo($annotated) ; $.proxy(handler.initializeCode, $code)(); } - if( $demo.first().is(':visible') || type == 'developer' ) { + if( $demo.first().is(':visible') || type == 'developer' && type != 'designer' ) { $demo.hide(); $annotated.fadeIn(500); } @@ -147,13 +147,30 @@ semantic.ready = function() { initializeCode: function() { var - $code = $(this), - contentType = $code.data('type') || 'javascript', - editor = ace.edit($code[0]), - editorSession = editor.getSession(), - padding = 4, - codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding + $code = $(this), + code = $code.html(), + contentType = $code.data('type') || 'javascript', + whiteSpace = new RegExp('\\n\\s{4}', 'g'), + padding = 4, + editor, + editorSession, + codeHeight ; + + // trim whitespace + code = $.trim(code.replace(whiteSpace, '\n')); + $code.text(code); + + if($code.hasClass('evaluated')) { + console.log(code); + eval(code); + } + + // initialize + editor = ace.edit($code[0]); + editorSession = editor.getSession(); + codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight) + editor.renderer.scrollBar.getWidth() + padding; + editor.setTheme('ace/theme/github'); editor.setShowPrintMargin(false); editor.setReadOnly(true); diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 20dbda2cd..2eb75a4f1 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -510,7 +510,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */ font-weight: bold; } #example .settings.table td:nth-child(2n) { - width: 300px; + width: 100px; } /* example code reskin */ diff --git a/node/src/layouts/default.html.eco b/node/src/layouts/default.html.eco index 880223933..214475ab9 100755 --- a/node/src/layouts/default.html.eco +++ b/node/src/layouts/default.html.eco @@ -132,7 +132,7 @@ <% end %>
- <% if @document.type is 'UI Element' or @document.type is 'UI Collection': %> + <% if @document.type is 'UI Element' or @document.type is 'UI Collection' or @document.type is 'UI Module': %> diff --git a/src/collections/form.css b/src/collections/form.css index cde344d64..9c351ab24 100755 --- a/src/collections/form.css +++ b/src/collections/form.css @@ -398,9 +398,15 @@ .ui.form .inline.field > p, .ui.form .inline.field > input, .ui.form .inline.field > select { + display: inline-block; - vertical-align: middle; width: auto; + + margin-top: 0em; + margin-bottom: 0em; + + vertical-align: middle; + font-size: 1em; } .ui.form .inline.fields .field > :first-child, diff --git a/src/collections/table.css b/src/collections/table.css index 43ba6a0bb..c30cb6019 100755 --- a/src/collections/table.css +++ b/src/collections/table.css @@ -24,7 +24,6 @@ color: rgba(0, 0, 0, 0.75); border: 1px solid #DDDDDD; - border-bottom-width: 3px; } .ui.table tr, @@ -43,7 +42,7 @@ transition: all 0.1s ease-out; } .ui.table thead { - border-bottom: 2px solid rgba(0, 0, 0, 0.1); + border-bottom: 1px solid rgba(0, 0, 0, 0.1); background-color: rgba(50, 50, 50, 0.1); } .ui.table th { @@ -94,7 +93,7 @@ Hover ---------------*/ -/* Grid */ +/* Celled */ .ui.celled.table tr:hover td { background-color: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 1); @@ -231,11 +230,11 @@ *******************************/ /*-------------- - Grid + Celled ---------------*/ .ui.celled.table { - color: rgba(0, 0, 0, 0.55); + color: rgba(25, 25, 25, 0.9); } .ui.celled.table tbody tr, .ui.celled.table tfoot tr { diff --git a/src/modules/checkbox.css b/src/modules/checkbox.css index f24a1bdd9..7358ea950 100755 --- a/src/modules/checkbox.css +++ b/src/modules/checkbox.css @@ -15,7 +15,7 @@ width: 1em; height: 1em; - vertical-align: baseline; + vertical-align: middle; } .ui.checkbox input { visibility: hidden; @@ -24,6 +24,7 @@ /*--- Box ---*/ +.ui.checkbox .box, .ui.checkbox label { outline: none; cursor: pointer; @@ -38,7 +39,7 @@ -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2); - background: #FCFFF4; + background: #FFFFFF; -webkit-transition: background-color 0.1s ease-out, @@ -63,6 +64,7 @@ } /*--- Checkbox ---*/ +.ui.checkbox .box:after, .ui.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -79,6 +81,7 @@ -ms-transform: rotate(-45deg); transform: rotate(-45deg); } +.ui.checkbox .box:after, .ui.checkbox label:after { width: 0.5em; height: 0.2em; @@ -94,6 +97,7 @@ /*--- Hover ---*/ +.ui.checkbox .box:hover, .ui.checkbox label:hover { background-color: rgba(0, 0, 0, 0.02); -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3); @@ -103,12 +107,14 @@ /*--- Down ---*/ +.ui.checkbox .box:active, .ui.checkbox label:active { background-color: rgba(0, 0, 0, 0.05); } /*--- Active ---*/ +.ui.checkbox input:checked + .box:after, .ui.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); @@ -117,6 +123,8 @@ /*--- Disabled ---*/ +.ui.disabled.checkbox + .box:after, +.ui.checkbox input[disabled] + .box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled] + label { opacity: 0.4; @@ -136,6 +144,7 @@ width: 14px; height: 16px; } +.ui.radio.checkbox .box, .ui.radio.checkbox label { width: 14px; height: 14px; @@ -143,6 +152,7 @@ -moz-border-radius: 500px; border-radius: 500px; } +.ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { top: 3px; left: 3px; @@ -163,18 +173,33 @@ ---------------*/ .ui.checkbox, +.ui.checkbox .box, .ui.checkbox label { font-size: 1em; } .ui.large.checkbox, +.ui.large.checkbox .box, .ui.large.checkbox label { - font-size: 1.5em; + font-size: 1.25em; } .ui.huge.checkbox, +.ui.huge.checkbox .box, .ui.huge.checkbox label { font-size: 1.5em; } +/*-------------- + Colors +---------------*/ + +.ui.round.blue.checkbox label:after { + background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); + background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); + background: -o-linear-gradient(top, #016286 0%, #00506E 100%); + background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); + background: linear-gradient(top, #016286 0%, #00506E 100%); +} + /*-------------- Rounded @@ -204,6 +229,7 @@ position: relative; } +.ui.round.checkbox .box, .ui.round.checkbox label { cursor: pointer; position: absolute; @@ -237,6 +263,7 @@ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#4D4D4D',GradientType=0 ); } +.ui.round.checkbox .box:after, .ui.round.checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); @@ -264,22 +291,15 @@ -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); } +.ui.round.checkbox .box:hover:after, .ui.round.checkbox label:hover:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; } +.ui.round.checkbox input:checked + .box:after, .ui.round.checkbox input:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } - -/* Variations */ -.ui.round.blue.checkbox label:after { - background: -webkit-linear-gradient(top, #016286 0%, #00506E 100%); - background: -moz-linear-gradient(top, #016286 0%, #00506E 100%); - background: -o-linear-gradient(top, #016286 0%, #00506E 100%); - background: -ms-linear-gradient(top, #016286 0%, #00506E 100%); - background: linear-gradient(top, #016286 0%, #00506E 100%); -} \ No newline at end of file
UI Module Settings
moduleName Checkbox
errors : { method : 'The method you called is not defined.' -}
+ }