Merge branch 'css' of github.com:Semantic-Org/Semantic-UI into css

src/behaviors/form.js

@@ -150,7 +150,7 @@ $.fn.form = function(fields, parameters) {
                   .blur()
                 ;
               }
-              if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) ) {
+              if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).size() > 0 ) {
                 module.debug('Enter key pressed, submitting form');
                 $submit
                   .addClass(className.down)
@@ -633,6 +633,7 @@ $.fn.form.settings = {
     message : '.error.message',
     field   : 'input, textarea, select',
     group   : '.field',
+    checkbox: 'input[type="checkbox"], input[type="radio"]',
     input   : 'input',
     prompt  : '.prompt',
     submit  : '.submit'

src/behaviors/visibility.js

@@ -0,0 +1,621 @@
+/*
+ * # Semantic - Visibility
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+$.fn.visibility = function(parameters) {
+  var
+    $allModules    = $(this),
+    moduleSelector = $allModules.selector || '',
+
+    time           = new Date().getTime(),
+    performance    = [],
+
+    query          = arguments[0],
+    methodInvoked  = (typeof query == 'string'),
+    queryArguments = [].slice.call(arguments, 1),
+    returnedValue
+  ;
+
+  $allModules
+    .each(function() {
+      var
+        settings        = $.extend(true, {}, $.fn.visibility.settings, parameters),
+
+        className       = settings.className,
+        namespace       = settings.namespace,
+        error           = settings.error,
+
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+
+        $module         = $(this),
+        $window         = $(window),
+        $container      = $module.offsetParent(),
+        $context,
+
+        selector        = $module.selector || '',
+        instance        = $module.data(moduleNamespace),
+
+        requestAnimationFrame = window.requestAnimationFrame
+          || window.mozRequestAnimationFrame
+          || window.webkitRequestAnimationFrame
+          || window.msRequestAnimationFrame
+          || function(callback) { setTimeout(callback, 0); },
+
+        element         = this,
+        module
+      ;
+
+      module      = {
+
+        initialize: function() {
+          module.verbose('Initializing visibility', settings);
+
+          module.reset();
+          module.save.position();
+          module.bindEvents();
+          module.instantiate();
+
+          setTimeout(module.checkVisibility, settings.loadWait);
+        },
+
+        instantiate: function() {
+          module.verbose('Storing instance of module', module);
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous module');
+          $window
+            .off(eventNamespace)
+          ;
+          $module
+            .off(eventNamespace)
+            .removeData(moduleNamespace)
+          ;
+        },
+
+        bindEvents: function() {
+          $window
+            .on('resize', module.event.refresh)
+            .on('scroll', module.event.scroll)
+          ;
+        },
+
+        event: {
+          refresh: function() {
+            requestAnimationFrame(module.refresh);
+          },
+          scroll: function() {
+            requestAnimationFrame(module.checkVisibility);
+          }
+        },
+
+        refresh: function() {
+          module.save.position();
+          module.checkVisibility();
+          $.proxy(settings.onRefresh, element)();
+        },
+
+        reset: function() {
+          module.cache = {
+            screen  : {},
+            element : {}
+          };
+        },
+
+        checkVisibility: function() {
+          module.verbose('Updating visibility of element', module.cache.element);
+          module.save.scroll();
+          module.save.direction();
+          module.save.screenCalculations();
+          module.save.elementCalculations();
+
+          module.passed();
+          module.passing();
+          module.topVisible();
+          module.bottomVisible();
+          module.topPassed();
+          module.bottomPassed();
+        },
+
+        passing: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            screen       = module.get.screenCalculations(),
+            callback     = newCallback || settings.onPassing
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for passing', newCallback);
+            settings.onPassing = newCallback;
+          }
+          if(callback && calculations.passing) {
+            $.proxy(callback, element)(calculations, screen);
+          }
+          else {
+            return calculations.passing;
+          }
+        },
+
+        passed: function(amount, newCallback) {
+          var
+            calculations   = module.get.elementCalculations(),
+            amountInPixels
+          ;
+          // assign callback
+          if(amount !== undefined && newCallback !== undefined) {
+            settings.onPassed[amount] = newCallback;
+          }
+          else if(amount !== undefined) {
+            return (module.get.pixelsPassed(amount) > calculations.pixelsPassed);
+          }
+          else if(calculations.passing) {
+            $.each(settings.onPassed, function(amount, callback) {
+              if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) {
+                callback();
+              }
+            });
+          }
+        },
+
+        topVisible: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            screen       = module.get.screenCalculations(),
+            callback     = newCallback || settings.onTopVisible
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for top visible', newCallback);
+            settings.onTopVisible = newCallback;
+          }
+          if(callback && calculations.topVisible) {
+            $.proxy(callback, element)(calculations, screen);
+          }
+          else {
+            return calculations.topVisible;
+          }
+        },
+
+        bottomVisible: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            screen       = module.get.screenCalculations(),
+            callback     = newCallback || settings.onBottomVisible
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for bottom visible', newCallback);
+            settings.onBottomVisible = newCallback;
+          }
+          if(callback && calculations.bottomVisible) {
+            $.proxy(callback, element)(calculations, screen);
+          }
+          else {
+            return calculations.bottomVisible;
+          }
+        },
+
+        topPassed: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            screen       = module.get.screenCalculations(),
+            callback     = newCallback || settings.onTopPassed
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for top passed', newCallback);
+            settings.onTopPassed = newCallback;
+          }
+          if(callback && calculations.topPassed) {
+            $.proxy(callback, element)(calculations, screen);
+          }
+          else {
+            return calculations.topPassed;
+          }
+        },
+
+        bottomPassed: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            screen       = module.get.screenCalculations(),
+            callback     = newCallback || settings.onBottomPassed
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for bottom passed', newCallback);
+            settings.bottomPassed = newCallback;
+          }
+          if(callback && calculations.bottomPassed) {
+            $.proxy(callback, element)(calculations, screen);
+          }
+          else {
+            return calculations.bottomPassed;
+          }
+        },
+
+        save: {
+          scroll: function() {
+            module.cache.scroll = $window.scrollTop() + settings.offset;
+          },
+          direction: function() {
+            var
+              scroll     = module.get.scroll(),
+              lastScroll = module.get.lastScroll(),
+              direction
+            ;
+            if(scroll > lastScroll && lastScroll) {
+              direction = 'down';
+            }
+            else if(scroll < lastScroll && lastScroll) {
+              direction = 'up';
+            }
+            else {
+              direction = 'static';
+            }
+            module.cache.direction = direction;
+            return module.cache.direction;
+          },
+          elementPosition: function() {
+            var
+              screen = module.get.screenSize()
+            ;
+            module.verbose('Saving element position');
+            $.extend(module.cache.element, {
+              margin : {
+                top    : parseInt($module.css('margin-top'), 10),
+                bottom : parseInt($module.css('margin-bottom'), 10)
+              },
+              fits   : (element.height < screen.height),
+              offset : $module.offset(),
+              width  : $module.outerWidth(),
+              height : $module.outerHeight()
+            });
+            return module.cache.element;
+          },
+          elementCalculations: function() {
+            var
+              screen  = module.get.screenCalculations(),
+              element = module.get.elementPosition()
+            ;
+            // offset
+            if(settings.includeMargin) {
+              $.extend(module.cache.element, {
+                top    : element.offset.top - element.margin.top,
+                bottom : element.offset.top + element.height + element.margin.bottom
+              });
+            }
+            else {
+              $.extend(module.cache.element, {
+                top    : element.offset.top,
+                bottom : element.offset.top + element.height
+              });
+            }
+            // visibility
+            $.extend(module.cache.element, {
+              topVisible       : (screen.bottom > element.top),
+              topPassed        : (screen.top > element.top),
+              bottomVisible    : (screen.bottom > element.bottom),
+              bottomPassed     : (screen.top > element.bottom),
+              pixelsPassed     : 0,
+              percentagePassed : 0
+            });
+            // meta calculations
+            $.extend(module.cache.element, {
+              visible : (module.cache.element.topVisible || module.cache.element.bottomVisible),
+              passing : (module.cache.element.topPassed && !module.cache.element.bottomPassed),
+              hidden  : (!module.cache.element.topVisible && !module.cache.element.bottomVisible)
+            });
+            if(module.cache.element.passing) {
+              module.cache.element.pixelsPassed = (screen.top - element.top);
+              module.cache.element.percentagePassed = (screen.top - element.top) / element.height;
+            }
+            module.verbose('Updated element calculations', module.cache.element);
+          },
+          screenCalculations: function() {
+            var
+              scroll = $window.scrollTop()
+            ;
+            if(module.cache.scroll === undefined) {
+              module.cache.scroll = $window.scrollTop();
+            }
+            module.save.direction();
+            $.extend(module.cache.screen, {
+              top    : scroll + settings.offset,
+              bottom : scroll + settings.offset + module.cache.screen.height
+            });
+            return module.cache.screen;
+          },
+          screenSize: function() {
+            module.verbose('Saving window position');
+            module.cache.screen = {
+              height: $window.height()
+            };
+          },
+          position: function() {
+            module.save.screenSize();
+            module.save.elementPosition();
+          }
+        },
+
+        get: {
+          pixelsPassed: function(amount) {
+            var
+              element = module.get.elementCalculations()
+            ;
+            if(amount.search('%') > -1) {
+              return ( element.height * (parseInt(amount, 10) / 100) );
+            }
+            return parseInt(amount, 10);
+          },
+          direction: function() {
+            if(module.cache.direction === undefined) {
+              module.save.direction();
+            }
+            return module.cache.direction;
+          },
+          elementPosition: function() {
+            if(module.cache.element === undefined) {
+              module.save.elementPosition();
+            }
+            return module.cache.element;
+          },
+          elementCalculations: function() {
+            if(module.cache.element === undefined) {
+              module.save.elementCalculations();
+            }
+            return module.cache.element;
+          },
+          screenCalculations: function() {
+            if(module.cache.screen === undefined) {
+              module.save.screenCalculations();
+            }
+            return module.cache.screen;
+          },
+          screenSize: function() {
+            if(module.cache.screen === undefined) {
+              module.save.screenSize();
+            }
+            return module.cache.screen;
+          },
+          scroll: function() {
+            if(module.cache.scroll === undefined) {
+              module.save.scroll();
+            }
+            return module.cache.scroll;
+          },
+          lastScroll: function() {
+            if(module.cache.screen === undefined) {
+              module.debug('First scroll event, no last scroll could be found');
+              return false;
+            }
+            return module.cache.screen.top;
+          }
+        },
+
+        setting: function(name, value) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            settings[name] = value;
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, module, name);
+          }
+          else if(value !== undefined) {
+            module[name] = value;
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+          module.error.apply(console, arguments);
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Element'        : element,
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,
+            response
+          ;
+          passedArguments = passedArguments || queryArguments;
+          context         = element         || context;
+          if(typeof query == 'string' && object !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              var camelCaseValue = (depth != maxDepth)
+                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+                : query
+              ;
+              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+                object = object[camelCaseValue];
+              }
+              else if( object[camelCaseValue] !== undefined ) {
+                found = object[camelCaseValue];
+                return false;
+              }
+              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+                object = object[value];
+              }
+              else if( object[value] !== undefined ) {
+                found = object[value];
+                return false;
+              }
+              else {
+                return false;
+              }
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            response = found.apply(context, passedArguments);
+          }
+          else if(found !== undefined) {
+            response = found;
+          }
+          if($.isArray(returnedValue)) {
+            returnedValue.push(response);
+          }
+          else if(returnedValue !== undefined) {
+            returnedValue = [returnedValue, response];
+          }
+          else if(response !== undefined) {
+            returnedValue = response;
+          }
+          return found;
+        }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
+        }
+        module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          module.destroy();
+        }
+        module.initialize();
+      }
+    })
+  ;
+
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.fn.visibility.settings = {
+
+  name              : 'Visibility',
+  namespace         : 'visibility',
+
+  verbose           : false,
+  debug             : false,
+  performance       : true,
+
+  loadWait          : 1000,
+
+  watch             : true,
+  offset            : 0,
+  includeMargin     : false,
+
+  // array of callbacks
+  onPassed          : {},
+
+  // standard callbacks
+  onPassing         : false,
+  onTopVisible      : false,
+  onBottomVisible   : false,
+  onTopPassed       : false,
+  onBottomPassed    : false,
+
+  // utility callbacks
+  onRefresh         : function(){},
+  onScroll          : function(){},
+
+  watchedProperties : [
+    'offsetWidth',
+    'offsetHeight',
+    'top',
+    'left'
+  ],
+
+  error : {
+    method   : 'The method you called is not defined.'
+  }
+
+};
+
+})( jQuery, window , document );

src/collections/grid.less

@@ -369,6 +369,11 @@ body > .ui.grid {
   padding-right: @veryRelaxedGutterWidth;
 }
 
+.ui.vertically.divided.grid > .row:before {
+  margin-left: @relaxedGutterWidth;
+  margin-right: @relaxedGutterWidth;
+}
+
 /*----------------------
         Fitted
 -----------------------*/
@@ -383,6 +388,12 @@ body > .ui.grid {
   margin-right: -@relaxedGutterWidth;
 }
 
+.ui.vertically.divided.fitted.grid > .row:before {
+  margin-left: 0%;
+  margin-right: 0%;
+}
+
+
 /*----------------------
        "Floated"
 -----------------------*/
@@ -826,6 +837,8 @@ body > .ui.grid {
     padding: 0em;
     margin: 0em;
   }
+  .ui.stackable.grid > .row > .wide.column,
+  .ui.stackable.grid > .wide.column,
   .ui.stackable.grid > .row > .column,
   .ui.stackable.grid > .column {
     display: block !important;

src/collections/menu.less

@@ -325,6 +325,11 @@
   min-width: 100%;
 }
 
+/* Even Width Menu Dropdown */
+.ui.item.menu .dropdown .menu .item {
+  width: 100%;
+}
+
 /*--------------
      Labels
 ---------------*/
@@ -1428,7 +1433,6 @@
   padding-right: 0px !important;
   text-align: center;
 }
-
 .ui.menu.two.item .item {
   width: 50%;
 }
@@ -1463,6 +1467,7 @@
   width: 8.333%;
 }
 
+
 /*--------------
      Fixed
 ---------------*/

src/elements/button.less

@@ -1,4 +1,4 @@
-/*
+ /*
  * # Semantic - Button
  * http://github.com/semantic-org/semantic-ui/
  *
@@ -38,7 +38,7 @@
   margin: @verticalMargin @horizontalMargin 0em 0em;
   padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);
 
-  font-family: @fontFamily;
+  font-family: @pageFont;
   text-transform: @textTransform;
   text-shadow: @textShadow;
   font-weight: @fontWeight;
@@ -71,11 +71,24 @@
   color: @selectedTextColor;
 }
 
-.ui.button:hover .icon,
-.ui.button.hover .icon {
+.ui.button:hover .icon {
   opacity: @iconHoverOpacity;
 }
 
+/*--------------
+      Focus
+---------------*/
+
+.ui.button:focus {
+  background-color: @focusBackgroundColor;
+  background-image: @focusBackgroundImage;
+  color: @selectedTextColor;
+}
+
+.ui.button:focus .icon {
+  opacity: @iconFocusOpacity;
+}
+
 /*--------------
       Down
 ---------------*/
@@ -866,9 +879,6 @@
   box-shadow: @orBoxShadow;
   box-sizing: border-box;
 }
-.ui.buttons .or[data-text]:before{
-    content: attr(data-text);
-}
 .ui.buttons .or:after {
   position: absolute;
   top: 0em;

src/elements/divider.less

@@ -24,7 +24,7 @@
 *******************************/
 
 .ui.divider {
-  margin: 1rem 0rem;
+  margin: @dividerMargin 0rem;
 
   border-top: @shadowWidth solid @shadowColor;
   border-bottom: @highlightWidth solid @highlightColor;
@@ -50,7 +50,7 @@
   font-size: @medium;
   font-weight: bold;
   text-align: center;
-  text-transform: uppercase;
+  text-transform: @dividerTextTransform;
 
   color: @dividerTextColor;
 }
@@ -106,7 +106,7 @@
   top: 0%;
   left: 0%;
 
-  margin: @horizontalDividerVerticalMargin @horizontalDividerHorizontalMargin;
+  margin: @horizontalDividerVerticalMargin 0em;
   height: auto;
   padding: 0em;
 
@@ -120,7 +120,7 @@
   content: '';
   z-index: 3;
 
-  width: 50%;
+  width: @horizontalDividerWidth;
   top: 50%;
   height: 0%;
 
@@ -130,12 +130,10 @@
 
 .ui.horizontal.divider:before {
   left: 0%;
-  margin-left: -@horizontalDividerHorizontalMargin;
 }
 .ui.horizontal.divider:after {
   left: auto;
   right: 0%;
-  margin-right: -@horizontalDividerHorizontalMargin;
 }
 
 /*--------------

src/elements/header.less

@@ -25,7 +25,7 @@
 /* Standard */
 .ui.header {
   border: none;
-  font-family: @fontFamily;
+  font-family: @pageFont;
   margin: @topMargin 0em @bottomMargin;
   padding: @verticalPadding @horizontalPadding;
   font-weight: @fontWeight;
@@ -61,7 +61,8 @@
 /* Only One */
 .ui.header .icon:only-child {
   display: inline-block;
-  vertical-align: baseline;
+  padding: 0em;
+  vertical-align: middle;
 }
 .ui.header .content {
   display: inline-block;

src/elements/input.less

@@ -35,7 +35,7 @@
 }
 .ui.input input {
   width: 100%;
-  font-family: @fontFamily;
+  font-family: @pageFont;
 
   margin: 0em;
   padding: @verticalPadding @horizontalPadding;

src/elements/segment.less

@@ -59,7 +59,7 @@
 
   background-color: transparent;
   border-radius: 0px;
-  box-shadow: 0px @segmentBorderWidth 0px @borderColor;
+  box-shadow: 0px 1px 0px @borderColor;
 }
 .ui.vertical.segment:first-child {
   padding-top: 0em;
@@ -72,7 +72,7 @@
 
   background-color: transparent;
   border-radius: 0px;
-  box-shadow: @segmentBorderWidth 0px 0px @borderColor;
+  box-shadow: 1px 0px 0px @borderColor;
 }
 .ui.horizontal.segment:first-child {
   padding-left: 0em;
@@ -163,7 +163,7 @@
   bottom: -3px;
   left: 0%;
 
-  border-top: @segmentBorderWidth solid @borderColor;
+  border-top: 1px solid @borderColor;
   background-color: @subtleTransparentBlack;
 
   width: 100%;

src/modules/behavior/form.js

@@ -401,7 +401,7 @@ $.fn.form = function(fields, parameters) {
               type          = validation.type,
               value         = $.trim($field.val() + ''),
 
-              bracketRegExp = /\[(.*?)\]/i,
+              bracketRegExp = /\[(.*)\]/i,
               bracket       = bracketRegExp.exec(type),
               isValid       = true,
               ancillary,

src/modules/checkbox.js

@@ -64,6 +64,9 @@ $.fn.checkbox = function(parameters) {
               .on('click' + eventNamespace, module.toggle)
               .data(moduleNamespace, module)
             ;
+            $input
+              .on('keydown' + eventNamespace, module.event.keydown)
+            ;
             $label
               .on('click' + eventNamespace, module.toggle)
             ;
@@ -90,20 +93,41 @@ $.fn.checkbox = function(parameters) {
           ;
         },
 
+        event: {
+          keydown: function(event) {
+            var
+              key     = event.which,
+              keyCode = {
+                enter  : 13,
+                escape : 27
+              }
+            ;
+            if( key == keyCode.escape) {
+              module.verbose('Escape key pressed blurring field');
+              $module
+                .blur()
+              ;
+            }
+            if(!event.ctrlKey && key == keyCode.enter) {
+              $.proxy(module.toggle, this)();
+            }
+          }
+        },
+
         is: {
           radio: function() {
             return $module.hasClass(className.radio);
           },
-          enabled: function() {
+          checked: function() {
             return $input.prop('checked') !== undefined && $input.prop('checked');
           },
-          disabled: function() {
-            return !module.is.enabled();
+          unchecked: function() {
+            return !module.is.checked();
           }
         },
 
         can: {
-          disable: function() {
+          uncheck: function() {
             return (typeof settings.required === 'boolean')
               ? settings.required
               : !module.is.radio()
@@ -111,33 +135,33 @@ $.fn.checkbox = function(parameters) {
           }
         },
 
-        enable: function() {
+        check: function() {
           module.debug('Enabling checkbox', $input);
           $input
             .prop('checked', true)
             .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
-          $.proxy(settings.onEnable, $input.get())();
+          $.proxy(settings.onChecked, $input.get())();
         },
 
-        disable: function() {
+        uncheck: function() {
           module.debug('Disabling checkbox');
           $input
             .prop('checked', false)
             .trigger('change')
           ;
           $.proxy(settings.onChange, $input.get())();
-          $.proxy(settings.onDisable, $input.get())();
+          $.proxy(settings.onUnchecked, $input.get())();
         },
 
         toggle: function(event) {
           module.verbose('Determining new checkbox state');
-          if( module.is.disabled() ) {
-            module.enable();
+          if( module.is.unchecked() ) {
+            module.check();
           }
-          else if( module.is.enabled() && module.can.disable() ) {
-            module.disable();
+          else if( module.is.checked() && module.can.uncheck() ) {
+            module.uncheck();
           }
         },
         setting: function(name, value) {
@@ -329,8 +353,8 @@ $.fn.checkbox.settings = {
   required    : 'auto',
 
   onChange    : function(){},
-  onEnable    : function(){},
-  onDisable   : function(){},
+  onChecked   : function(){},
+  onUnchecked : function(){},
 
   error     : {
     method   : 'The method you called is not defined.'

src/modules/checkbox.less

@@ -9,23 +9,32 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'module';
+@element : 'checkbox';
+
+@import '../semantic.config';
+
+
 /*******************************
            Checkbox
 *******************************/
 
+
 /*--------------
-    Standard
+    Content
 ---------------*/
 
-
-/*--- Content ---*/
-
 .ui.checkbox {
   position: relative;
   display: inline-block;
 
+  height: @checkboxHeight;
+
   min-width: 1em;
-  height: 1.25em;
   line-height: 1em;
 
   outline: none;
@@ -40,84 +49,72 @@
 }
 
 
-/*--- Box ---*/
+/*--------------
+      Box
+---------------*/
+
 
 .ui.checkbox .box,
 .ui.checkbox label {
   cursor: pointer;
-  padding-left: 2em;
+  padding-left: @labelPadding;
   outline: none;
 }
 
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   position: absolute;
-  top: 0em;
-  left: 0em;
 
   line-height: 1;
-  width: 1em;
-  height: 1em;
-  left: 0em;
+  width: 1.25em;
+  height: 1.25em;
+  top: @boxOffset;
+  left: @boxOffset;
   content: '';
 
-  border-radius: 4px;
-
   background: #FFFFFF;
+  border-radius: 0.25em;
 
   transition:
     background-color 0.3s ease,
+    border 0.3s ease,
     box-shadow 0.3s ease
   ;
-
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
+  border: @checkboxBorder;
 }
 
-/*--- Checkbox ---*/
+/*--------------
+    Checkmark
+---------------*/
+
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-  filter: alpha(opacity=0);
-  opacity: 0;
-  content: '';
   position: absolute;
-  background: transparent;
-  border: 0.2em solid #333333;
-  border-top: none;
-  border-right: none;
-  transform: rotate(-45deg);
-}
-.ui.checkbox .box:after,
-.ui.checkbox label:after {
-  top: 0.275em;
-  left: 0.2em;
-  width: 0.45em;
-  height: 0.15em;
+  top: 0em;
+  left: 0em;
+
+  opacity: 0;
+  color: @checkboxColor;
+  transition: opacity 0.1s ease;
 }
 
-/*--- Inside Label ---*/
-.ui.checkbox label {
-  color: rgba(0, 0, 0, 0.6);
+/*--------------
+      Label
+---------------*/
 
+/* Inside */
+.ui.checkbox label,
+.ui.checkbox + label {
+  cursor: pointer;
+  color: @labelColor;
   transition: color 0.2s ease;
-}
-.ui.checkbox label:hover {
-  color: rgba(0, 0, 0, 0.8);
+  user-select: none;
 }
 
-.ui.checkbox input:focus + label {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/*--- Outside Label  ---*/
+/* Outside */
 .ui.checkbox + label {
-  cursor: pointer;
-  opacity: 0.85;
   vertical-align: middle;
 }
-.ui.checkbox + label:hover {
-  opacity: 1;
-}
 
 
 /*******************************
@@ -125,33 +122,54 @@
 *******************************/
 
 
-/*--- Hover ---*/
+/*--------------
+      Hover
+---------------*/
+
 .ui.checkbox .box:hover::before,
 .ui.checkbox label:hover::before {
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  border: 1px solid @selectedBorderColor;
+}
+.ui.checkbox label:hover,
+.ui.checkbox + label:hover {
+  color: @labelHoverColor;
 }
 
-/*--- Down ---*/
+/*--------------
+      Down
+---------------*/
+
 .ui.checkbox .box:active::before,
 .ui.checkbox label:active::before {
   background-color: #F5F5F5;
 }
 
-/*--- Focus ---*/
+/*--------------
+      Focus
+---------------*/
+
 .ui.checkbox input:focus + .box:before,
 .ui.checkbox input:focus + label:before {
-  box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
+  border: 1px solid @selectedBorderColor;
+}
+.ui.checkbox input:focus + label {
+  color: @labelSelectedColor;
 }
 
-/*--- Active ---*/
+
+/*--------------
+     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);
   opacity: 1;
 }
 
-/*--- Disabled ---*/
+/*--------------
+     Disabled
+---------------*/
+
 .ui.disabled.checkbox + .box:after,
 .ui.checkbox input[disabled] + .box:after,
 .ui.disabled.checkbox label,
@@ -170,26 +188,17 @@
      Radio
 ---------------*/
 
+/* Box */
 .ui.radio.checkbox .box:before,
 .ui.radio.checkbox label:before {
-  min-width: 1em;
-  height: 1em;
-  border-radius: 500px;
+  border-radius: @circularRadius;
   transform: none;
 }
+
+/* Circle */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
   border: none;
-  top: 0.2em;
-  left: 0.2em;
-
-  width: 0.6em;
-  height: 0.6em;
-
-  background-color: #555555;
-
-  transform: none;
-  border-radius: 500px;
 }
 
 /*--------------
@@ -198,96 +207,77 @@
 
 .ui.slider.checkbox {
   cursor: pointer;
-  min-width: 3em;
 }
 
-/* Line */
-.ui.slider.checkbox:after {
-  position: absolute;
-  top: 0.5em;
-  left: 0em;
-  content: '';
-
-  width: 3em;
-  height: 2px;
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-/* Button */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
-  padding-left: 4em;
+  padding-left: @sliderLabelDistance;
 }
+
+/* Line */
 .ui.slider.checkbox .box:before,
 .ui.slider.checkbox label:before {
   cursor: pointer;
   display: block;
 
   position: absolute;
-  top: -0.25em;
+  content: '';
+  top: @sliderLineVerticalOffset;
   left: 0em;
   z-index: 1;
+  border: none !important;
 
-  width: 1.5em;
-  height: 1.5em;
+  background-color: @neutralCheckbox;
+  width: @sliderLineWidth;
+  height: @sliderLineHeight;
 
   transform: none;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-
-  border-radius: 50rem;
-
-  transition: left 0.3s ease 0s;
+  border-radius: @circularRadius;
+  transition:
+    background 0.3s ease
+  ;
 }
 
-/* Button Activation Light */
+/* Handle */
 .ui.slider.checkbox .box:after,
 .ui.slider.checkbox label:after {
-  opacity: 1;
-
+  background: @handleBackground;
   position: absolute;
   content: '';
-  top: 0.15em;
-  left: 0em;
+  opacity: 1;
   z-index: 2;
 
-  margin-left: 0.375em;
-
   border: none;
-  width: 0.75em;
-  height: 0.75em;
-
-  border-radius: 50rem;
-
-  transform: none;
+  box-shadow: @handleBoxShadow;
+  width: @handleSize;
+  height: @handleSize;
+  top: @sliderHandleOffset;
+  left: 0em;
 
+  border-radius: @circularRadius;
   transition:
-    background 0.3s ease 0s,
     left 0.3s ease 0s
   ;
 }
 
-/* Selected Slider Toggle */
-.ui.slider.checkbox input:checked + .box:before,
-.ui.slider.checkbox input:checked + label:before,
-.ui.slider.checkbox input:checked + .box:after,
-.ui.slider.checkbox input:checked + label:after {
-  left: 1.75em;
+/* Focus */
+.ui.slider.checkbox input:focus + .box:before,
+.ui.slider.checkbox input:focus + label:before {
+  background-color: @toggleFocusColor;
+  border: none;
 }
 
-/* Off Color */
-.ui.slider.checkbox .box:after,
-.ui.slider.checkbox label:after {
-  background-color: #D95C5C;
+/* Active */
+.ui.slider.checkbox input:checked + .box:before,
+.ui.slider.checkbox input:checked + label:before {
+  background-color: @positiveCheckbox;
 }
-
-/* On Color */
 .ui.slider.checkbox input:checked + .box:after,
 .ui.slider.checkbox input:checked + label:after {
-  background-color: #89B84C;
+  left: @sliderTravelDistance;
 }
 
 
-
 /*--------------
      Toggle
 ---------------*/
@@ -298,7 +288,7 @@
 
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
-  padding-left: 4em;
+  padding-left: 3em;
 }
 
 /* Switch */
@@ -309,58 +299,56 @@
 
   position: absolute;
   content: '';
-  top: -0.25em;
+
+  top: @toggleSwitchVerticalOffset;
   left: 0em;
   z-index: 1;
+  border: none;
 
-  background-color: #FFFFFF;
-  width: 3em;
-  height: 1.5em;
-
-  transform: none;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  border-radius: 50rem;
+  background-color: @neutralCheckbox;
+  width: @toggleSwitchWidth;
+  height: @toggleSwitchHeight;
+  border-radius: @circularRadius;
 }
 
-/* Activation Light */
+/* Handle */
 .ui.toggle.checkbox .box:after,
 .ui.toggle.checkbox label:after {
-  opacity: 1;
-
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-
-  content: '';
+  background: @handleBackground;
   position: absolute;
-  top: 0.15em;
-  left: 0.5em;
+  content: '';
+  opacity: 1;
   z-index: 2;
 
   border: none;
-  width: 0.75em;
-  height: 0.75em;
+  box-shadow: @handleBoxShadow;
+  width: @handleSize;
+  height: @handleSize;
+  top: @sliderHandleOffset;
+  left: 0em;
 
-  background-color: #D95C5C;
-  border-radius: 50rem;
+  border-radius: @circularRadius;
   transition:
     background 0.3s ease 0s,
     left 0.3s ease 0s
   ;
 }
 
-/* Active */
-.ui.toggle.checkbox:active .box:before,
-.ui.toggle.checkbox:active label:before {
-  background-color: #F5F5F5;
+/* Focus */
+.ui.toggle.checkbox input:focus + .box:before,
+.ui.toggle.checkbox input:focus + label:before {
+  background-color: @toggleFocusColor;
+  border: none;
 }
 
 /* Active */
+.ui.toggle.checkbox input:checked + .box:before,
+.ui.toggle.checkbox input:checked + label:before {
+  background-color: @positiveCheckbox;
+}
 .ui.toggle.checkbox input:checked + .box:after,
 .ui.toggle.checkbox input:checked + label:after {
-  left: 1.75em;
-  background-color: #89B84C;
+  left: 1em;
 }
 
 
@@ -377,4 +365,6 @@
 }
 .ui.huge.checkbox {
   font-size: 1.5em;
-}
+}
+
+.loadUIOverrides();

src/modules/modal.js

@@ -65,7 +65,7 @@ $.fn.modal = function(parameters) {
         initialize: function() {
           module.verbose('Initializing dimmer', $context);
 
-          if(typeof $.fn.dimmer === undefined) {
+          if($.fn.dimmer === undefined) {
             module.error(error.dimmer);
             return;
           }
@@ -73,7 +73,7 @@ $.fn.modal = function(parameters) {
             .dimmer({
               closable : false,
               useCSS   : true,
-              duration: {
+              duration : {
                 show     : settings.duration * 0.9,
                 hide     : settings.duration * 1.1
               }
@@ -96,9 +96,7 @@ $.fn.modal = function(parameters) {
             .on('click' + eventNamespace, module.event.close)
           ;
           $window
-            .on('resize' + eventNamespace, function() {
-              module.event.debounce(module.refresh, 50);
-            })
+            .on('resize' + eventNamespace, module.event.resize)
           ;
           module.instantiate();
         },
@@ -210,7 +208,7 @@ $.fn.modal = function(parameters) {
           },
           resize: function() {
             if( $dimmable.dimmer('is active') ) {
-              module.refresh();
+              requestAnimationFrame(module.refresh);
             }
           }
         },

src/modules/popup.js

@@ -1,6 +1,6 @@
 /*
  * # Semantic - Popup
- * http://github.com/semantic-org/semantic-ui/
+ * http://github.com/jlukic/semantic-ui/
  *
  *
  * Copyright 2013 Contributors
@@ -167,14 +167,12 @@ $.fn.popup = function(parameters) {
             if(settings.inline) {
               module.verbose('Inserting popup element inline', $popup);
               $popup
-                .data(moduleNamespace, instance)
                 .insertAfter($module)
               ;
             }
             else {
               module.verbose('Appending popup element to body', $popup);
               $popup
-                .data(moduleNamespace, instance)
                 .appendTo( $context )
               ;
             }
@@ -209,9 +207,10 @@ $.fn.popup = function(parameters) {
           if( !module.exists() ) {
             module.create();
           }
-          module.save.conditions();
-          module.set.position();
-          module.animate.show(callback);
+          if( module.set.position() ) {
+            module.save.conditions();
+            module.animate.show(callback);
+          }
         },
 
 
@@ -220,9 +219,9 @@ $.fn.popup = function(parameters) {
           $module
             .removeClass(className.visible)
           ;
-          module.restore.conditions();
           module.unbind.close();
           if( module.is.visible() ) {
+            module.restore.conditions();
             module.animate.hide(callback);
           }
         },
@@ -276,8 +275,8 @@ $.fn.popup = function(parameters) {
           conditions: function() {
             if(module.cache && module.cache.title) {
               $module.attr('title', module.cache.title);
-              module.verbose('Restoring original attributes', module.cache.title);
             }
+            module.verbose('Restoring original attributes', module.cache.title);
             return true;
           }
         },
@@ -463,7 +462,7 @@ $.fn.popup = function(parameters) {
               break;
               case 'top center':
                 positioning = {
-                  bottom :  parentHeight - offset.top + distanceAway,
+                  bottom : parentHeight - offset.top + distanceAway,
                   left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
                   top    : 'auto',
                   right  : 'auto'
@@ -472,14 +471,14 @@ $.fn.popup = function(parameters) {
               case 'top right':
                 positioning = {
                   top    : 'auto',
-                  bottom :  parentHeight - offset.top + distanceAway,
+                  bottom : parentHeight - offset.top + distanceAway,
                   left   : offset.left + width + arrowOffset,
                   right  : 'auto'
                 };
               break;
               case 'left center':
                 positioning = {
-                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  top    : offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
                   right  : parentWidth - offset.left + distanceAway,
                   left   : 'auto',
                   bottom : 'auto'
@@ -487,7 +486,7 @@ $.fn.popup = function(parameters) {
               break;
               case 'right center':
                 positioning = {
-                  top    :  offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
+                  top    : offset.top + (height / 2) - (popupHeight / 2) + arrowOffset,
                   left   : offset.left + width + distanceAway,
                   bottom : 'auto',
                   right  : 'auto'
@@ -495,7 +494,7 @@ $.fn.popup = function(parameters) {
               break;
               case 'bottom left':
                 positioning = {
-                  top    :  offset.top + height + distanceAway,
+                  top    : offset.top + height + distanceAway,
                   right  : parentWidth - offset.left - arrowOffset,
                   left   : 'auto',
                   bottom : 'auto'
@@ -503,7 +502,7 @@ $.fn.popup = function(parameters) {
               break;
               case 'bottom center':
                 positioning = {
-                  top    :  offset.top + height + distanceAway,
+                  top    : offset.top + height + distanceAway,
                   left   : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset,
                   bottom : 'auto',
                   right  : 'auto'
@@ -511,7 +510,7 @@ $.fn.popup = function(parameters) {
               break;
               case 'bottom right':
                 positioning = {
-                  top    :  offset.top + height + distanceAway,
+                  top    : offset.top + height + distanceAway,
                   left   : offset.left + width + arrowOffset,
                   bottom : 'auto',
                   right  : 'auto'
@@ -594,10 +593,16 @@ $.fn.popup = function(parameters) {
 
         reset: function() {
           $popup
-            .attr('style', '')
-            .removeAttr('style')
+            .removeClass(className.visible)
           ;
-          if(!settings.preserve) {
+          if(settings.preserve) {
+            if($.fn.transition !== undefined) {
+              $popup
+                .transition('remove transition')
+              ;
+            }
+          }
+          else {
             module.remove();
           }
         },

src/modules/sticky.js

@@ -1,6 +1,6 @@
 /*
  * # Semantic - Sticky
- * http://github.com/jlukic/semantic-ui/
+ * http://github.com/semantic-org/semantic-ui/
  *
  *
  * Copyright 2013 Contributors
@@ -68,8 +68,8 @@ $.fn.sticky = function(parameters) {
           }
 
           $window
-            .on('resize', module.event.resize)
-            .on('scroll', module.event.scroll)
+            .on('resize' + eventNamespace, module.event.resize)
+            .on('scroll' + eventNamespace, module.event.scroll)
           ;
 
           module.save.positions();
@@ -88,29 +88,29 @@ $.fn.sticky = function(parameters) {
         destroy: function() {
           module.verbose('Destroying previous module');
           module.reset();
-          $window
-            .off(eventNamespace)
-          ;
           $module
-            .off(eventNamespace)
             .removeData(moduleNamespace)
           ;
         },
 
         event: {
           resize: function() {
-            requestAnimationFrame(function() {
-              module.reset();
-              module.save.positions();
-            });
+            requestAnimationFrame(module.refresh);
           },
           scroll: function() {
             requestAnimationFrame(function() {
               module.stick();
+              $.proxy(settings.onScroll, element)();
             });
           }
         },
 
+        refresh: function() {
+          module.reset();
+          module.save.positions();
+          $.proxy(settings.onReposition, element)();
+        },
+
         save: {
           scroll: function(scroll) {
             module.lastScroll = scroll;
@@ -200,8 +200,13 @@ $.fn.sticky = function(parameters) {
 
         set: {
           containerSize: function() {
-            module.debug('Settings container size', module.cache.context.height);
-            $container.height(module.cache.context.height);
+            if($module.is(':visible') && $container.get(0).tagName === 'HTML') {
+              module.error(error.container);
+            }
+            else {
+              module.debug('Settings container size', module.cache.context.height);
+              $container.height(module.cache.context.height);
+            }
           },
           size: function() {
             $module
@@ -275,9 +280,8 @@ $.fn.sticky = function(parameters) {
                 module.bindBottom();
               }
               else if(elementPassed) {
-                console.log(currentOffset);
                 if(module.is.top() && direction == 'down') {
-                  module.debug('Misfitting element at bottom edge');
+                  module.debug('Stuck content at bottom edge');
                   if(newOffset >= (element.height - window.height)) {
                     $module
                       .css('top', '')
@@ -291,7 +295,7 @@ $.fn.sticky = function(parameters) {
                   }
                 }
                 if(module.is.bottom() && direction == 'up') {
-                  module.debug('Misfitting element at topp edge');
+                  module.debug('Stuck content at top edge');
                   if(newOffset >= (element.height - window.height)) {
                     $module
                       .css('bottom', '')
@@ -314,11 +318,18 @@ $.fn.sticky = function(parameters) {
             if(fits) {
               // fix to bottom of screen on way back up
               if(module.is.bottom() ) {
-                if( module.is.bound() && screen.bottom < context.bottom ) {
-                  module.stickBottom();
+                if(settings.pushing) {
+                  if(module.is.bound() && screen.bottom < context.bottom ) {
+                    module.stickBottom();
+                  }
+                }
+                else {
+                  if(module.is.bound() && screen.top < context.bottom - element.height) {
+                    module.stickTop();
+                  }
                 }
               }
-              else if(screen.top > element.top && screen.bottom < context.bottom) {
+              else if(screen.top > element.top && screen.top < context.bottom - element.height) {
                 module.stickTop();
               }
             }
@@ -339,6 +350,8 @@ $.fn.sticky = function(parameters) {
             .addClass(className.bound)
             .addClass(className.top)
           ;
+          $.proxy(settings.onTop, element)();
+          $.proxy(settings.onUnstick, element)();
         },
         bindBottom: function() {
           module.debug('Binding element to bottom of parent container');
@@ -348,6 +361,8 @@ $.fn.sticky = function(parameters) {
             .addClass(className.bound)
             .addClass(className.bottom)
           ;
+          $.proxy(settings.onBottom, element)();
+          $.proxy(settings.onUnstick, element)();
         },
 
         stickTop: function() {
@@ -358,6 +373,7 @@ $.fn.sticky = function(parameters) {
             .addClass(className.fixed)
             .addClass(className.top)
           ;
+          $.proxy(settings.onStick, element)();
         },
 
         stickBottom: function() {
@@ -368,6 +384,7 @@ $.fn.sticky = function(parameters) {
             .addClass(className.fixed)
             .addClass(className.bottom)
           ;
+          $.proxy(settings.onStick, element)();
         },
 
         unbind: function() {
@@ -386,6 +403,7 @@ $.fn.sticky = function(parameters) {
             .removeClass(className.top)
             .removeClass(className.bottom)
           ;
+          $.proxy(settings.onUnstick, this)();
         },
 
         reset: function() {
@@ -579,24 +597,27 @@ $.fn.sticky = function(parameters) {
 
 $.fn.sticky.settings = {
 
-  name        : 'Sticky',
-  namespace   : 'sticky',
+  name         : 'Sticky',
+  namespace    : 'sticky',
+
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  pushing      : false,
 
-  context     : false,
-  offset      : 0,
+  context      : false,
+  offset       : 0,
 
-  onReposition: function(){},
-  onChange    : function(){},
-  onStick     : function(){},
-  onUnstick   : function(){},
-  onTop       : function(){},
-  onBottom    : function(){},
+  onReposition : function(){},
+  onScroll     : function(){},
+  onStick      : function(){},
+  onUnstick    : function(){},
+  onTop        : function(){},
+  onBottom     : function(){},
 
   error     : {
+    container: 'Sticky element must be inside a relative container',
     method   : 'The method you called is not defined.'
   },
 

src/modules/transition.js

@@ -374,6 +374,13 @@ $.fn.transition = function() {
               .removeClass(className.looping)
             ;
             module.forceRepaint();
+          },
+
+          transition: function() {
+            $module
+              .removeClass(className.visible)
+              .removeClass(className.hidden)
+            ;
           }
 
         },

src/site.less

@@ -22,15 +22,23 @@
              Page
 *******************************/
 
+/* UI Requires Border Box */
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 html,
 body {
   font-size: @fontSize;
   height: 100%;
 }
 
+
 body {
   background: @bodyBackground;
-  font-family: @fontFamily;
+  font-family: @pageFont;
   margin: 0px;
   padding: 0px;
   color: @textColor;

src/themes/_site/modules/checkbox.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/default/elements/button.variables

@@ -11,7 +11,7 @@
 // @textColor, @invertedTextColor
 
 /*-------------------
-      Element
+       Button
 --------------------*/
 
 @verticalMargin: 0.25em;
@@ -33,7 +33,7 @@
 ;
 
 /* transitions */
-@transition: 
+@transition:
   opacity @transitionDuration @transitionEasing,
   background-color @transitionDuration @transitionEasing,
   color @transitionDuration @transitionEasing,
@@ -72,6 +72,12 @@
 @hoverBackgroundColor: '';
 @hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
 @hoverBoxShadow: '';
+@iconHoverOpacity: 0.85;
+
+@focusBackgroundColor: '';
+@focusBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
+@focusBoxShadow: '';
+@iconFocusOpacity: 0.85;
 
 @downBackgroundColor: #F1F1F1;
 @downBackgroundImage: '';
@@ -105,7 +111,6 @@
 @orSpacerColor: @white;
 
 /* Icon */
-@iconHoverOpacity: 0.85;
 @iconButtonOpacity: 0.9;
 
 /* Labeled Icon */

src/themes/default/elements/divider.variables

@@ -6,6 +6,8 @@
        Divider
 --------------------*/
 
+@dividerMargin: 1rem;
+
 @highlightWidth: 1px;
 @highlightColor: rgba(255, 255, 255, 0.8);
 
@@ -13,6 +15,7 @@
 @shadowColor: rgba(0, 0, 0, 0.1);
 
 @dividerTextColor: @textColor;
+@dividerTextTransform: uppercase;
 
 /*-------------------
        Coupling
@@ -32,8 +35,7 @@
 @directionalTextColor: @invertedLightTextColor;
 
 @horizontalDividerVerticalMargin: 1rem;
-@horizontalDividerHorizontalMargin: 1.5rem;
-
+@horizontalDividerWidth: 40%;
 @verticalDividerWidth: 6%;
 
 /* Inverted */

src/themes/default/elements/header.variables

@@ -18,10 +18,9 @@
        Header
 --------------------*/
 
-@fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
 @fontWeight: bold;
 @textTransform: none;
-@textColor: 'inherit';
 
 @topMargin: 1em;
 @bottomMargin: 1rem;

src/themes/default/elements/input.variables

@@ -13,7 +13,7 @@
       Element
 --------------------*/
 
-@fontFamily: "Helvetica Neue", "Helvetica", Arial;
+@pageFont: "Helvetica Neue", "Helvetica", Arial;
 
 @verticalPadding: 0.65em;
 @horizontalPadding: 1em;

src/themes/default/modules/checkbox.variables

@@ -0,0 +1,81 @@
+/*-------------------
+      Checkbox
+--------------------*/
+
+@checkboxHeight: 1.25em;
+@checkboxColor: @textColor;
+@labelPadding: 2em;
+
+@neutralCheckbox: @transparentBlack;
+@positiveCheckbox: @positiveColor;
+@negativeCheckbox: @negativeColor;
+
+/* Checkbox */
+@boxSize: 1.25em;
+@boxOffset: (1em - @boxSize) / 2;
+@backgroundColor: @white;
+@checkboxBorder: 1px solid @borderColor;
+@borderRadius: 0.25em;
+
+/* Slider & Toggle Handle */
+@handleBackground: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.1));
+@handleBoxShadow:
+  0px 2px 2px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset
+;
+@handleSize: 1.3em;
+
+/*-------------------
+      Coupling
+--------------------*/
+
+@labelColor: @textColor;
+@labelHoverColor: @selectedTextColor;
+@labelSelectedColor: @selectedTextColor;
+
+
+@labelOpacity: 0.6;
+@labelHoverOpacity: 0.8;
+@labelSelectedOpacity: 1;
+
+/*-------------------
+        States
+--------------------*/
+
+@checkboxHoverBorder: 1px solid @selectedBorderColor;
+@checkboxSelectedBorder: 1px solid @selectedBorderColor;
+
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Radio */
+
+/* Slider */
+@sliderLineWidth: 2.25em;
+@sliderLineHeight: 0.25em;
+@sliderLineVerticalOffset: 0.4em;
+
+@sliderHandleOffset: (1em - @handleSize) / 2;
+@sliderTravelDistance: @sliderLineWidth - @handleSize;
+@sliderLabelDistance: @sliderLineWidth + 1em;
+
+
+/* Toggle */
+@toggleSwitchWidth: 2.25em;
+@toggleSwitchHeight: 1.25em;
+@toggleSwitchVerticalOffset: (1em - @toggleSwitchHeight) / 2;
+
+@toggleFocusColor: @strongTransparentBlack;
+
+@toggleHandleOffset: (1em - @handleSize) / 2;
+@toggleTravelDistance: @toggleSwitchWidth - @handleSize;
+@toggleLabelDistance: @toggleSwitchWidth + 1em;
+
+
+
+
+/*-------------------
+      Variations
+--------------------*/

src/themes/default/site.variables

@@ -14,7 +14,7 @@
 --------------------*/
 
 @bodyBackground      : #FCFCFC;
-@fontSize            : 15px;
+@fontSize            : 14px;
 @textColor           : rgba(0, 0, 0, 0.7);
 
 @paragraphMargin     : 1em 0em;
@@ -40,7 +40,7 @@
        Fonts
 --------------------*/
 
-@fontFamily : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont : Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
 
 /*-------------------
        Icons

src/themes/packaged/bookish/elements/header.variables

@@ -2,7 +2,7 @@
        Header
 --------------------*/
 
-@fontFamily : 'Libre Baskerville', serif;
+@pageFont : 'Libre Baskerville', serif;
 @fontWeight: normal;
 
 @iconSize: 1.5em;

src/themes/packaged/chubby/elements/button.variables

@@ -3,7 +3,7 @@
 --------------------*/
 
 /* Button Variables */
-@fontFamily: 'Source Sans Pro', sans-serif;
+@pageFont: 'Source Sans Pro', sans-serif;
 
 @textTransform: none;
 @fontWeight: normal;

src/themes/packaged/chubby/elements/header.variables

@@ -2,7 +2,7 @@
        Header
 --------------------*/
 
-@fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
 @fontWeight: bold;
 @textTransform: none;
 

src/themes/packaged/default/elements/container.variables

@@ -1,6 +0,0 @@
-
-/*-------------------
-      Container
---------------------*/
-
-

src/themes/packaged/default/modules/checkbox.overrides

@@ -0,0 +1,4 @@
+/*******************************
+           Overrides
+*******************************/
+

src/themes/packaged/default/modules/checkbox.variables

@@ -0,0 +1,4 @@
+/*******************************
+           Overrides
+*******************************/
+

src/themes/packaged/github/elements/button.variables

@@ -3,7 +3,7 @@
 --------------------*/
 
 /* Button Variables */
-@fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif;
+@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif;
 @textTransform: none;
 @fontWeight: bold;
 @textColor: #333333;