Merge branch 'gh-pages' of github.com:quirkyinc/semantic

docs/button.html

@@ -24,7 +24,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
 </head>
 
@@ -200,6 +200,9 @@
   <div class="medium ui button">
     Medium
   </div>
+  <div class="large ui button">
+    Large
+  </div>
   <div class="big ui button">
     Big
   </div>

docs/form.html

@@ -27,7 +27,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
 </head>
 
@@ -376,6 +376,8 @@
   </div>
 
   <h2>Variations</h2>
+  
+  <h3>Forms</h3>
 
   <h4>Size</h4>
   <p>A form can also be small or large</p>
@@ -397,7 +399,7 @@
         <input placeholder="Last Name" type="text">
       </div>
     </div>
-    <div class="ui blue submit button">Submit</div>
+    <div class="ui blue small submit button">Submit</div>
   </div>
   <br><br>
   <div class="ui large form segment">
@@ -421,6 +423,33 @@
     <div class="ui blue submit button">Submit</div>
   </div>
   
+  <h4>Inverted</h4>
+  <p>A form on a dark background may have to invert its color scheme</p>
+  
+  <div style="background-color: #333333; padding: 15px;">
+    <div class="ui inverted form">
+      <div class="ui info block">
+        <div class="header">We had some issues</div>
+        <ul class="list">
+          <li>Please enter your first name</li>
+          <li>Please enter your last name</li>
+        </ul>
+      </div>
+      <div class="two fields">
+        <div class="error field">
+          <label>First Name</label>
+          <input placeholder="First Name" type="text">
+        </div>
+        <div class="field">
+          <label>Last Name</label>
+          <input placeholder="Last Name" type="text">
+        </div>
+      </div>
+      <div class="ui blue submit button">Submit</div>
+    </div>
+  </div>
+  
+  
   <h3>Fields</h3>
   
   <h4>Inline</h4>
@@ -434,6 +463,37 @@
     </div>
   </div>
   
+  <h4>Date</h4>
+  <p>A field can let users know they are for dates</p>
+  <div class="ui form">
+    <div class="date field">
+      <label>Birthday</label>
+      <input type="text" placeholder="Full Name">
+    </div>
+  </div>
+  
+  
+  <h2>Groups</h2>
+  
+  <h4>Field Groups</h4>
+  <p>Fields can exist side by side on groups</p>
+  <div class="ui form">
+    <div class="ui three fields">
+      <div class="field">
+        <label>First name</label>
+        <input type="text" placeholder="First Name">
+      </div>
+      <div class="field">
+        <label>Middle name</label>
+        <input type="text" placeholder="Middle Name">
+      </div>
+      <div class="field">
+        <label>Last name</label>
+        <input type="text" placeholder="Last Name">
+      </div>
+    </div>
+  </div>
+  
 </div>
 </body>
 

docs/javascript/example.js → 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)
 ;

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

docs/module.html

@@ -21,7 +21,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
 
   </head>
 

docs/shape.html

@@ -24,7 +24,7 @@
   <script src="library/ace/ace.js" type="text/javascript"></script>
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="library/waypoints.js" type="text/javascript"></script>
-  <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/semantic.js" type="text/javascript"></script>
   <script src="javascript/shape.js" type="text/javascript"></script>
 
 

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

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

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;

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
----------------------*/