diff --git a/docs/button.html b/docs/button.html index 52687b1e9..45fa755e9 100755 --- a/docs/button.html +++ b/docs/button.html @@ -24,7 +24,7 @@ - + @@ -200,6 +200,9 @@
Medium
+
+ Large +
Big
diff --git a/docs/form.html b/docs/form.html index 343bf8c52..083352480 100755 --- a/docs/form.html +++ b/docs/form.html @@ -27,7 +27,7 @@ - + @@ -376,6 +376,8 @@

Variations

+ +

Forms

Size

A form can also be small or large

@@ -397,7 +399,7 @@ -
Submit
+
Submit


@@ -421,6 +423,33 @@
Submit
+

Inverted

+

A form on a dark background may have to invert its color scheme

+ +
+
+
+
We had some issues
+
    +
  • Please enter your first name
    • +
  • Please enter your last name
    • +
+
+
+
+ + +
+
+ + +
+
+
Submit
+
+
+ +

Fields

Inline

@@ -434,6 +463,37 @@ +

Date

+

A field can let users know they are for dates

+
+
+ + +
+
+ + +

Groups

+ +

Field Groups

+

Fields can exist side by side on groups

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ diff --git a/docs/javascript/example.js b/docs/javascript/semantic.js similarity index 97% rename from docs/javascript/example.js rename to docs/javascript/semantic.js index 41bc385a7..6c5bc2322 100755 --- a/docs/javascript/example.js +++ b/docs/javascript/semantic.js @@ -1,10 +1,10 @@ // namespace -var shape = { +var semantic = { handler: {} }; // ready event -shape.ready = function() { +semantic.ready = function() { // selector cache var @@ -140,5 +140,5 @@ shape.ready = function() { // attach ready event $(document) - .ready(shape.ready) + .ready(semantic.ready) ; \ No newline at end of file diff --git a/docs/javascript/shape.js b/docs/javascript/shape.js index 5b63f7c35..81cae4d58 100755 --- a/docs/javascript/shape.js +++ b/docs/javascript/shape.js @@ -1,10 +1,7 @@ -// namespace -var shape = { - handler: {} -}; +semantic.shape = {}; // ready event -shape.ready = function() { +semantic.shape.ready = function() { // selector cache var @@ -78,5 +75,5 @@ shape.ready = function() { // attach ready event $(document) - .ready(shape.ready) + .ready(semantic.shape.ready) ; \ No newline at end of file diff --git a/docs/module.html b/docs/module.html index 479187c06..287a75409 100755 --- a/docs/module.html +++ b/docs/module.html @@ -21,7 +21,7 @@ - + diff --git a/docs/shape.html b/docs/shape.html index bddd546ad..fdc21e344 100755 --- a/docs/shape.html +++ b/docs/shape.html @@ -24,7 +24,7 @@ - + diff --git a/docs/stylesheets/example.css b/docs/stylesheets/example.css index 0e6211278..ab61d6a42 100755 --- a/docs/stylesheets/example.css +++ b/docs/stylesheets/example.css @@ -212,6 +212,18 @@ a:hover { left: -230px; width: 180px; } +#example .peek .panel :nth-child(1) { + border-left-color: #00B9F0; +} +#example .peek .panel :nth-child(2) { + border-left-color: #56BB73; +} +#example .peek .panel :nth-child(3) { + border-left-color: #EF3F49; +} +#example .peek .panel :nth-child(4) { + border-left-color: #A24096; +} #example .peek .panel { width: 180px; } diff --git a/src/modules/ui/colorize.js b/src/modules/behavior/colorize.js similarity index 100% rename from src/modules/ui/colorize.js rename to src/modules/behavior/colorize.js diff --git a/src/modules/ui/shape.js b/src/modules/ui/shape.js index bd62597a5..c38971f35 100755 --- a/src/modules/ui/shape.js +++ b/src/modules/ui/shape.js @@ -89,10 +89,11 @@ $.fn.shape = function(parameters) { animate: function(propertyObject, callback) { module.verbose('Animating box with properties', propertyObject); - callback = callback || function() { + callback = callback || function(event) { module.reset(); module.set.active(); $.proxy(settings.onChange, $nextSide)(); + event.stopImmediatePropagation(); }; if(settings.useCSS) { module.verbose('Starting CSS animation'); @@ -136,6 +137,7 @@ $.fn.shape = function(parameters) { module.debug('Queueing animation of', method); $shape .one(endTransition, function() { + module.debug('Executing queued animation'); $module.shape(method); }) ; diff --git a/src/ui/flat/button.css b/src/ui/flat/button.css index 2d780b980..061ee6d4a 100755 --- a/src/ui/flat/button.css +++ b/src/ui/flat/button.css @@ -376,31 +376,36 @@ Red / Negative .ui.tiny.button { font-size: 11px; font-weight: bold; - padding: 6px 13px; + padding: 8px 15px; } .ui.small.buttons .button, .ui.small.button { font-size: 12px; - padding: 6px 15px; + padding: 10px 20px; } .ui.medium.buttons .button, .ui.medium.button { font-size: 14px; - padding: 7px 20px; + padding: 12px 30px; +} +.ui.large.buttons .button, +.ui.large.button { + font-size: 16px; + padding: 15px 30px; } .ui.big.buttons .button, .ui.big.button { - font-size: 16px; - padding: 13px 30px; + font-size: 18px; + padding: 15px 30px; } .ui.huge.buttons .button, .ui.huge.button { - font-size: 18px; - padding: 15px 30px; + font-size: 20px; + padding: 18px 30px; } .ui.massive.buttons .button, .ui.massive.button { - padding: 15px 45px; + padding: 20px 45px; font-size: 24px; font-weight: bold; diff --git a/src/ui/flat/form.css b/src/ui/flat/form.css index a94b231d2..051427260 100755 --- a/src/ui/flat/form.css +++ b/src/ui/flat/form.css @@ -63,15 +63,17 @@ .ui.form textarea, .ui.form input[type="text"], +.ui.form input[type="date"], .ui.form input[type="password"], .ui.textarea, .ui.input { width: 100%; - padding: 0.5em 0.7em; + padding: 0.53em 0.7em; font-size: 0.825em; background-color: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.15); + outline: none; color: #555555; @@ -167,9 +169,11 @@ } .ui.form .fields.error .field textarea, .ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="date"], .ui.form .fields.error .field input[type="password"], .ui.form .field.error textarea, .ui.form .field.error input[type="text"], +.ui.form .field.error input[type="date"], .ui.form .field.error input[type="password"] { background-color: #FFFAFA; border-color: rgba(255, 80, 80, 0.7); @@ -187,10 +191,10 @@ /* browsers require these rules separate */ .ui.form ::-webkit-input-placeholder { - color: #CCCCCC; + color: #E0E0E0; } .ui.form ::-moz-placeholder { - color: #CCCCCC; + color: #E0E0E0; } .ui.form :focus::-webkit-input-placeholder { color: #AAAAAA; @@ -200,7 +204,7 @@ } .ui.form textarea.empty, .ui.form input.empty { - color: #CCCCCC; + color: #E0E0E0; } /* Error Placeholder */ @@ -285,47 +289,26 @@ } .ui.form .date.field > label:after { position: absolute; - top: 22px; - right: 10px; + top: 1.2em; + right: 0.4em; font-family: 'Icons'; content: '📅'; /* '\1f4c5' */ - font-size: 20px; + font-size: 1.5em; font-weight: normal; color: #CCCCCC; } -.ui.large.form .date.field > label:after { - top: 29px; - font-size: 24px; -} /*-------------------- - Higher Contrast + Inverted Colors ---------------------*/ -.ui.contrasting.form label { +.ui.inverted.form label { color: #FFFFFF; } -.ui.contrasting.form .field.error textarea, -.ui.contrasting.form .field.error input[type="text"] { - background-color: #FFAAAA; - border-color: #FF3333; - color: #AA5555; -} -.ui.contrasting.form .field.error label { - color: #FF3333; -} -.ui.contrasting.form .notices, -.ui.contrasting.form .errors { - border-color: #FF3333; - background-image: -webkit-linear-gradient(top , #F36666 0px, #E14242 100%); - background-image: -moz-linear-gradient(top , #F36666 0px, #E14242 100%); - background-image: -o-linear-gradient(top , #F36666 0px, #E14242 100%); - background-image: -ms-linear-gradient(top , #F36666 0px, #E14242 100%); - background-image: linear-gradient(top , #F36666 0px, #E14242 100%); - - color: #FFFFFF; - text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5); +.ui.inverted.form .field.error textarea, +.ui.inverted.form .field.error input[type="text"] { + background-color: #FFCCCC; } /*-------------------- @@ -443,7 +426,3 @@ font-weight: bold; } - -/*-------------------- - Error Messages ----------------------*/ diff --git a/src/ui/images/throbber-large.gif b/src/ui/images/throbber-large.gif index 965fcbcd8..519621ccd 100755 Binary files a/src/ui/images/throbber-large.gif and b/src/ui/images/throbber-large.gif differ