From 179cdb43a48f0b91585c79c3bdffb67c6e36cbb8 Mon Sep 17 00:00:00 2001 From: icefox0801 Date: Mon, 24 Feb 2014 00:03:05 +0800 Subject: [PATCH 01/13] Fixes bracket match in rule function When adding a custom method e.g. "isValid[\[0-9A-Za-z\]+]" using form validation module, I found it got the wrong match "[0-9A-Za-z" as the regular expression, so I prefer using greedy match. --- src/modules/behavior/form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/behavior/form.js b/src/modules/behavior/form.js index cd877fd28..c0ea9b14d 100755 --- a/src/modules/behavior/form.js +++ b/src/modules/behavior/form.js @@ -403,7 +403,7 @@ $.fn.form = function(fields, parameters) { type = validation.type, value = $.trim($field.val() + ''), - bracketRegExp = /\[(.*?)\]/i, + bracketRegExp = /\[(.*)\]/i, bracket = bracketRegExp.exec(type), isValid = true, ancillary, From 6bc576e4311966c52bd45ba24602bee83a6b4520 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 25 Feb 2014 18:31:49 -0500 Subject: [PATCH 02/13] Bug fixes for grid, popup, adds visibility module --- src/behaviors/visibility.js | 471 ++++++++++++++++++++++++++++++++++++ src/collections/grid.less | 13 + src/modules/popup.js | 41 ++-- src/modules/transition.js | 9 +- 4 files changed, 515 insertions(+), 19 deletions(-) create mode 100644 src/behaviors/visibility.js diff --git a/src/behaviors/visibility.js b/src/behaviors/visibility.js new file mode 100644 index 000000000..f94a7e4ae --- /dev/null +++ b/src/behaviors/visibility.js @@ -0,0 +1,471 @@ +/* + * # Semantic - Visibility + * http://github.com/jlukic/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(); + }, + + 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.resize) + .on('scroll', module.event.scroll) + ; + }, + + event: { + resize: function() { + requestAnimationFrame(module.refresh); + }, + scroll: function() { + requestAnimationFrame(function() { + module.checkVisibility(); + $.proxy(settings.onScroll, element)(); + }); + } + }, + + refresh: function() { + module.save.position(); + module.checkVisibility(); + $.proxy(settings.onRefresh, element)(); + }, + + reset: function() { + module.cache = { + screen : {}, + element : {} + }; + }, + + checkVisibility: function() { + module.save.scroll(); + module.save.direction(); + module.save.screenCalculations(); + module.save.elementCalculations(); + module.debug('Updating visibility of element', module.cache.element); + }, + + 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) + }); + // meta calculations + $.extend(module.cache.element, { + visible : (module.cache.element.topVisible || module.cache.element.bottomVisible), + hidden : (!module.cache.element.topVisible && !module.cache.element.bottomVisible) + }); + }, + 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: { + 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, + + offset : 0, + includeMargin : false, + + onTopVisible : function(){}, + onBottomVisible : function(){}, + onTopPassed : function(){}, + onBottomPassed : function(){}, + + onRefresh : function(){}, + onScroll : function(){}, + + error : { + method : 'The method you called is not defined.' + } + +}; + +})( jQuery, window , document ); diff --git a/src/collections/grid.less b/src/collections/grid.less index 893b3fa8c..0b683ddb3 100755 --- a/src/collections/grid.less +++ b/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; diff --git a/src/modules/popup.js b/src/modules/popup.js index 7e3d25f7d..0dee4e43c 100755 --- a/src/modules/popup.js +++ b/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(); } }, diff --git a/src/modules/transition.js b/src/modules/transition.js index 295f66a7c..a2cadf8c4 100755 --- a/src/modules/transition.js +++ b/src/modules/transition.js @@ -1,6 +1,6 @@ /* * # Semantic - Transition - * http://github.com/semantic-org/semantic-ui/ + * http://github.com/jlukic/semantic-ui/ * * * Copyright 2013 Contributors @@ -374,6 +374,13 @@ $.fn.transition = function() { .removeClass(className.looping) ; module.forceRepaint(); + }, + + transition: function() { + $module + .removeClass(className.visible) + .removeClass(className.hidden) + ; } }, From 5f812c53cf242c89d8964343b2a2a169cad04b89 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:12:48 -0500 Subject: [PATCH 03/13] Fixes and updates to some elements --- src/elements/button.less | 22 ++++++++++++++++------ src/elements/divider.less | 10 ++++------ src/elements/header.less | 3 ++- src/elements/segment.less | 6 +++--- 4 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/elements/button.less b/src/elements/button.less index 3bd493b22..32301f45f 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -1,4 +1,4 @@ -/* + /* * # Semantic - Button * http://github.com/semantic-org/semantic-ui/ * @@ -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; diff --git a/src/elements/divider.less b/src/elements/divider.less index 0274bc8f3..762c5a808 100755 --- a/src/elements/divider.less +++ b/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; } /*-------------- diff --git a/src/elements/header.less b/src/elements/header.less index 467ca43fe..774b06d68 100755 --- a/src/elements/header.less +++ b/src/elements/header.less @@ -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; diff --git a/src/elements/segment.less b/src/elements/segment.less index 6f379f520..bf60c0dc2 100755 --- a/src/elements/segment.less +++ b/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%; From a26ab147439c70d0f4b36b6401f94654dc8039aa Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:21:16 -0500 Subject: [PATCH 04/13] Retheming of checkbox to use inline font file, and new styles for slider and toggle --- src/themes/default/modules/checkbox.overrides | 37 +++++++++ src/themes/default/modules/checkbox.variables | 81 +++++++++++++++++++ .../default/elements/container.variables | 6 -- .../checkbox.overrides} | 1 + .../default/modules/checkbox.variables | 4 + 5 files changed, 123 insertions(+), 6 deletions(-) create mode 100644 src/themes/default/modules/checkbox.overrides create mode 100644 src/themes/default/modules/checkbox.variables delete mode 100644 src/themes/packaged/default/elements/container.variables rename src/themes/packaged/default/{elements/container.overrides => modules/checkbox.overrides} (98%) create mode 100644 src/themes/packaged/default/modules/checkbox.variables diff --git a/src/themes/default/modules/checkbox.overrides b/src/themes/default/modules/checkbox.overrides new file mode 100644 index 000000000..2940adf9a --- /dev/null +++ b/src/themes/default/modules/checkbox.overrides @@ -0,0 +1,37 @@ +/******************************* + Overrides +*******************************/ + +@font-face { + font-family: 'Checkbox'; + src: url('data:application/octet-stream;base64,d09GRgABAAAAAAoUAA4AAAAAEPQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABRAAAAEQAAABWPeFJAWNtYXAAAAGIAAAAOgAAAUrQEhm3Y3Z0IAAAAcQAAAAUAAAAHAZJ/5RmcGdtAAAB2AAABPkAAAmRigp4O2dhc3AAAAbUAAAACAAAAAgAAAAQZ2x5ZgAABtwAAACuAAAAtt9nBHZoZWFkAAAHjAAAADUAAAA2ASs8e2hoZWEAAAfEAAAAIAAAACQHUwNNaG10eAAAB+QAAAAMAAAADAspAABsb2NhAAAH8AAAAAgAAAAIADgAW21heHAAAAf4AAAAIAAAACAApgm8bmFtZQAACBgAAAF3AAACzcydGhxwb3N0AAAJkAAAACoAAAA7rr1AmHByZXAAAAm8AAAAVgAAAFaSoZr/eJxjYGTewTiBgZWBg6mKaQ8DA0MPhGZ8wGDIyMTAwMTAysyAFQSkuaYwOLxgeMHIHPQ/iyGKmZvBHyjMCJIDAPe9C2B4nGNgYGBmgGAZBkYGEHAB8hjBfBYGDSDNBqQZGZgYGF4w/v8PUvCCAURLMELVAwEjG8OIBwBk5AavAAB4nGNgQANGDEbM3P83gjAAELQD4XicnVXZdtNWFJU8ZHASOmSgoA7X3DhQ68qEKRgwaSrFdiEdHAitBB2kDHTkncc+62uOQrtWH/m07n09JLR0rbYsls++R1tn2DrnRhwjKn0aiGvUoZKXA6msPZZK90lc13Uvj5UMBnFdthJPSZuonSRKat3sUC7xWOsqWSdYJ+PlIFZPVZ5noAziFB5lSUQbRBuplyZJ4onjJ4kWZxAfJUkgJaMQp9LIUEI1GsRS1aFM6dCr1xNx00DKRqMedVhU90PFJ8c1p9SsA0YqVznCFevVRr4bpwMve5DEOsGzrYcxHnisfpQqkIqR6cg/dkpOlIaBVHHUoVbi6DCTX/eRTCrNQKaMYkWl7oG43f102xYxPXQ6vi5KlUaqurnOKJrt0fGogygP2cbppNzQ2fbw5RlTVKtdcbPtQGYNXErJbHSfRAAdJlLj6QFONZwCqRn1R8XZ588BEslclKo8VTKHegOZMzt7cTHtbiersnCknwcyb3Z2452HQ6dXh3/R+hdM4cxHj+Jifj5C+lBqfiJOJKVGWMzyp4YfcVcgQrkxiAsXyuBThDl0RdrZZl3jtTH2hs/5SqlhPQna6KP4fgr9TiQrHGdRo/VInM1j13Wt3GdQS7W7Fzsyr0OVIu7vCwuuM+eEYZ4WC1VfnvneBTT/Bohn/EDeNIVL+5YpSrRvm6JMu2iKCu0SVKVdNsUU7YoppmnPmmKG9h1TzNKeMzLj/8vc55H7HN7xkJv2XeSmfQ+5ad9HbtoPkJtWITdtHblpLyA3rUZu2lWjOnYEGgZpF1IVQdA0svph3Fab9UDWjDR8aWDyLmLI+upER521tcofxX914gsHcmmip7siF5viLq/bFj483e6rj5pG3bDV+MaR8jAeRnocmtBZ+c3hv+1N3S6a7jKqMugBFUwKwABl7UAC0zrbCaT1mqf48gdgXIZ4zkpDtVSfO4am7+V5X/exOfG+x+3GLrdcd3kJWdYNcmP28N9SZKrrH+UtrVQnR6wrJ49VaxhDKrwour6SlHu0tRu/KKmy8l6U1srnk5CbPYMbQlu27mGwI0xpyiUeXlOlKD3UUo6yQyxvKco84JSLC1qGxLgOdQ9qa8TpoXoYGwshhqG0vRBwSCldFd+0ynfxHqtr2Oj4xRXh6XpyEhGf4ir7UfBU10b96A7avGbdMoMpVaqn+4xPsa/b9lFZaaSOsxe3VAfXNOsaORXTT+Rr4HRvOGjdAz1UfDRBI1U1x+jGKGM0ljXl3wR0MVZ+w2jVYvs93E+dpFWsuUuY7JsT9+C0u/0q+7WcW0bW/dcGvW3kip8jMb8tCvw7B2K3ZA3UO5OBGAvIWdAYxhYmdxiug23EbfY/Jqf/34aFRXJXOxq7eerD1ZNRJXfZ8rjLTXZZ16M2R9VOGvsIjS0PN+bY4XIstsRgQbb+wf8x7gF3aVEC4NDIZZiI2nShnurh6h6rsW04VxIBds2x43QAegAuQd8cu9bzCYD13CPnLsB9cgh2yCH4lByCz8i5BfA5OQRfkEMwIIdgl5w7AA/IIXhIDsEeOQSPyNkE+JIcgq/IIYjJIUjIuQ3wmByCJ+QQfE0OwTdGrk5k/pYH2QD6zqKbQKmdGhzaOGRGrk3Y+zxY9oFFZB9aROqRkesT6lMeLPV7i0j9wSJSfzRyY0L9iQdL/dkiUn+xiNRnxpeZIymvDp7zjg7+BJfqrV4AAAAAAQAB//8AD3icY2BkAALmJUwzGEQZZBwk+RkZGBmdGJgYmbIYgMwsoGSiiLgIs5A2owg7I5uSOqOaiT2jmZE8I5gQY17C/09BQEfg3yt+fh8gvYQxD0j68DOJiQn8U+DnZxQDcQUEljLmCwBpBgbG/3//b2SOZ+Zm4GEQcuAH2sblDLSEm8FFVJhJEGgLH6OSHpMdo5EcI3Nk0bEXJ/LYqvZ82VXHGFd6pKTkyCsQwQAAq+QkqAAAeJxjYGRgYADiw5VSsfH8Nl8ZuJlfAEUYzpvO6IXQCb7///7fyLyEmRvI5WBgAokCAFb/DJAAAAB4nGNgZGBgDvqfxRDF/IKB4f935iUMQBEUwAwAi5YFpgPoAAAD6AAAA1kAAAAAAAAAOABbAAEAAAADABYAAQAAAAAAAgAGABMAbgAAAC0JkQAAAAB4nHWQy2rCQBSG//HSi0JbWui2sypKabxgN4IgWHTTbqS4LTHGJBIzMhkFX6Pv0IfpS/RZ+puMpShNmMx3vjlz5mQAXOMbAvnzxJGzwBmjnAs4Rc9ykf7Zcon8YrmMKt4sn9C/W67gAYHlKm7wwQqidM5ogU/LAlfi0nIBF+LOcpH+0XKJ3LNcxq14tXxC71muYCJSy1Xci6+BWm11FIRG1gZ12W62OnK6lYoqStxYumsTKp3KvpyrxPhxrBxPLfc89oN17Op9uJ8nvk4jlciW09yrkZ/42jX+bFc93QRtY+ZyrtVSDm2GXGm18D3jhMasuo3G3/MwgMIKW2hEvKoQBhI12jrnNppooUOaMkMyM8+KkMBFTONizR1htpIy7nPMGSW0PjNisgOP3+WRH5MC7o9ZRR+tHsYT0u6MKPOSfTns7jBrREqyTDezs9/eU2x4WpvWcNeuS511JTE8qCF5H7u1BY1H72S3Ymi7aPD95/9+AN1fhEsAeJxjYGKAAC4G7ICZgYGRiZGZMzkjNTk7N7Eomy05syg5J5WBAQBE1QZBAABLuADIUlixAQGOWbkIAAgAYyCwASNEsAMjcLIEKAlFUkSyCgIHKrEGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAA') format('woff'), + url('data:application/octet-stream;base64,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') format('truetype'); +} +.ui.checkbox label:before, +.ui.checkbox .box:before, +.ui.checkbox label:after, +.ui.checkbox .box:after { + font-family: 'Checkbox'; +} +.ui.checkbox label:after, +.ui.checkbox .box:after { + content: '\e800'; /* '' */ +} + +/* Radio Checkbox */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + content: '\e801'; /* '' */ + top: 0em; + left: 0.28em; + font-size: 0.68em; +} + +.icon-check:before { content: '\e800'; } +.icon-circle:before { content: '\e801'; } /* '' */ +.icon-ok-circled:before { content: '\e806'; } /* '' */ +.icon-ok-circle:before { content: '\e805'; } /* '' */ +.icon-cancel-circle:before { content: '\e807'; } /* '' */ +.icon-cancel-circle-1:before { content: '\e804'; } /* '' */ +.icon-empty-circle:before { content: '\e802'; } /* '' */ +.icon-radio:before { content: '\e803'; }/* '' */ \ No newline at end of file diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables new file mode 100644 index 000000000..5d15b4b43 --- /dev/null +++ b/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 +--------------------*/ diff --git a/src/themes/packaged/default/elements/container.variables b/src/themes/packaged/default/elements/container.variables deleted file mode 100644 index 6d265450e..000000000 --- a/src/themes/packaged/default/elements/container.variables +++ /dev/null @@ -1,6 +0,0 @@ - -/*------------------- - Container ---------------------*/ - - diff --git a/src/themes/packaged/default/elements/container.overrides b/src/themes/packaged/default/modules/checkbox.overrides similarity index 98% rename from src/themes/packaged/default/elements/container.overrides rename to src/themes/packaged/default/modules/checkbox.overrides index c5c53367f..627300769 100644 --- a/src/themes/packaged/default/elements/container.overrides +++ b/src/themes/packaged/default/modules/checkbox.overrides @@ -1,3 +1,4 @@ /******************************* Overrides *******************************/ + diff --git a/src/themes/packaged/default/modules/checkbox.variables b/src/themes/packaged/default/modules/checkbox.variables new file mode 100644 index 000000000..627300769 --- /dev/null +++ b/src/themes/packaged/default/modules/checkbox.variables @@ -0,0 +1,4 @@ +/******************************* + Overrides +*******************************/ + From 6900ed99c72b7334efe4840ee3b13a944264bca6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:23:15 -0500 Subject: [PATCH 05/13] updates to button/divider/header variables --- src/themes/default/elements/button.variables | 11 ++++++++--- src/themes/default/elements/divider.variables | 6 ++++-- src/themes/default/elements/header.variables | 1 - 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables index 26a244cdc..328007416 100755 --- a/src/themes/default/elements/button.variables +++ b/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 */ diff --git a/src/themes/default/elements/divider.variables b/src/themes/default/elements/divider.variables index 69efa17da..e9392d037 100755 --- a/src/themes/default/elements/divider.variables +++ b/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 */ diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/header.variables index 8f7e09f54..59d962791 100755 --- a/src/themes/default/elements/header.variables +++ b/src/themes/default/elements/header.variables @@ -21,7 +21,6 @@ @fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif; @fontWeight: bold; @textTransform: none; -@textColor: 'inherit'; @topMargin: 1em; @bottomMargin: 1rem; From 9c49fa433547cc9d66a96182376a0f5b97e0f665 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:29:32 -0500 Subject: [PATCH 06/13] completion of viisibility module --- src/behaviors/visibility.js | 200 +++++++++++++++++++++++++++++++----- 1 file changed, 175 insertions(+), 25 deletions(-) diff --git a/src/behaviors/visibility.js b/src/behaviors/visibility.js index f94a7e4ae..c44a9053d 100644 --- a/src/behaviors/visibility.js +++ b/src/behaviors/visibility.js @@ -1,6 +1,6 @@ /* * # Semantic - Visibility - * http://github.com/jlukic/semantic-ui/ + * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors @@ -64,6 +64,8 @@ $.fn.visibility = function(parameters) { module.save.position(); module.bindEvents(); module.instantiate(); + + setTimeout(module.checkVisibility, settings.loadWait); }, instantiate: function() { @@ -87,20 +89,17 @@ $.fn.visibility = function(parameters) { bindEvents: function() { $window - .on('resize', module.event.resize) + .on('resize', module.event.refresh) .on('scroll', module.event.scroll) ; }, event: { - resize: function() { + refresh: function() { requestAnimationFrame(module.refresh); }, scroll: function() { - requestAnimationFrame(function() { - module.checkVisibility(); - $.proxy(settings.onScroll, element)(); - }); + requestAnimationFrame(module.checkVisibility); } }, @@ -118,11 +117,129 @@ $.fn.visibility = function(parameters) { }, checkVisibility: function() { + module.verbose('Updating visibility of element', module.cache.element); module.save.scroll(); module.save.direction(); module.save.screenCalculations(); module.save.elementCalculations(); - module.debug('Updating visibility of element', module.cache.element); + + 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: { @@ -184,16 +301,24 @@ $.fn.visibility = function(parameters) { } // 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) + 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 @@ -222,6 +347,15 @@ $.fn.visibility = function(parameters) { }, 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(); @@ -444,23 +578,39 @@ $.fn.visibility = function(parameters) { $.fn.visibility.settings = { - name : 'Visibility', - namespace : 'visibility', + name : 'Visibility', + namespace : 'visibility', + + verbose : false, + debug : false, + performance : true, + + loadWait : 1000, + + watch : true, + offset : 0, + includeMargin : false, - verbose : false, - debug : false, - performance : true, + // array of callbacks + onPassed : {}, - offset : 0, - includeMargin : false, + // standard callbacks + onPassing : false, + onTopVisible : false, + onBottomVisible : false, + onTopPassed : false, + onBottomPassed : false, - onTopVisible : function(){}, - onBottomVisible : function(){}, - onTopPassed : function(){}, - onBottomPassed : function(){}, + // utility callbacks + onRefresh : function(){}, + onScroll : function(){}, - onRefresh : function(){}, - onScroll : function(){}, + watchedProperties : [ + 'offsetWidth', + 'offsetHeight', + 'top', + 'left' + ], error : { method : 'The method you called is not defined.' From d95a163cc8ff42400b3dc5a5ac9d33bae6705912 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:34:01 -0500 Subject: [PATCH 07/13] Fixes checkboxes not to submit form on enter --- src/behaviors/form.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/behaviors/form.js b/src/behaviors/form.js index bd43e5279..f6e3010af 100644 --- a/src/behaviors/form.js +++ b/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' From a30baa3bb015a3d7c4fe1aab833ec1242f137800 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:44:00 -0500 Subject: [PATCH 08/13] Rewrite of checkbox, new styles, css variables, font file embeds for legitness --- src/modules/checkbox.js | 52 +++++-- src/modules/checkbox.less | 292 ++++++++++++++++++-------------------- 2 files changed, 178 insertions(+), 166 deletions(-) diff --git a/src/modules/checkbox.js b/src/modules/checkbox.js index 16d6f4e90..e189530f6 100755 --- a/src/modules/checkbox.js +++ b/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.' diff --git a/src/modules/checkbox.less b/src/modules/checkbox.less index 1916c6561..c6a25efca 100755 --- a/src/modules/checkbox.less +++ b/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,75 @@ .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; } -/* 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 +286,7 @@ .ui.toggle.checkbox .box, .ui.toggle.checkbox label { - padding-left: 4em; + padding-left: 3em; } /* Switch */ @@ -309,58 +297,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 +363,6 @@ } .ui.huge.checkbox { font-size: 1.5em; -} \ No newline at end of file +} + +.loadUIOverrides(); From efafa3ae9b4c0f2df6da7647c4f9614256fd292b Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:54:03 -0500 Subject: [PATCH 09/13] Updates to sticky menu module --- src/modules/sticky.js | 85 +++++++++++++++++++++++++++---------------- 1 file changed, 53 insertions(+), 32 deletions(-) diff --git a/src/modules/sticky.js b/src/modules/sticky.js index a56c0a770..75682f370 100644 --- a/src/modules/sticky.js +++ b/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.' }, From 9561d9a851d965980bbccf0ecea666ee9df9e6c6 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:54:35 -0500 Subject: [PATCH 10/13] Fixes repo link --- src/modules/transition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/modules/transition.js b/src/modules/transition.js index a2cadf8c4..13e145d39 100755 --- a/src/modules/transition.js +++ b/src/modules/transition.js @@ -1,6 +1,6 @@ /* * # Semantic - Transition - * http://github.com/jlukic/semantic-ui/ + * http://github.com/semantic-org/semantic-ui/ * * * Copyright 2013 Contributors From 577681a924f9030e2c4d10f4a44f5d2efa8d1024 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 17:58:18 -0500 Subject: [PATCH 11/13] Moves dimmer to use request animation frame instead of debouncing --- src/modules/modal.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/modules/modal.js b/src/modules/modal.js index 97ad251e9..a0f7469ab 100755 --- a/src/modules/modal.js +++ b/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); } } }, From dbf9d20f2cc81f51fbcd3761be2c754f513ab379 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 18:24:21 -0500 Subject: [PATCH 12/13] Fixes dropdown inside even-item menu --- src/collections/menu.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/collections/menu.less b/src/collections/menu.less index 162cdfc49..1ef230b56 100755 --- a/src/collections/menu.less +++ b/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 ---------------*/ From 69ba43daac3868b211c1e73db34de5fc8942e8e9 Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 27 Feb 2014 18:46:12 -0500 Subject: [PATCH 13/13] Adds checkbox user override, adds border box as required reset to avoid some issues with library --- src/elements/button.less | 2 +- src/elements/header.less | 2 +- src/elements/input.less | 2 +- src/modules/checkbox.less | 4 +++- src/site.less | 10 +++++++++- src/themes/_site/modules/checkbox.overrides | 3 +++ src/themes/_site/modules/checkbox.variables | 3 +++ src/themes/default/elements/header.variables | 2 +- src/themes/default/elements/input.variables | 2 +- src/themes/default/site.variables | 4 ++-- src/themes/packaged/bookish/elements/header.variables | 2 +- src/themes/packaged/chubby/elements/button.variables | 2 +- src/themes/packaged/chubby/elements/header.variables | 2 +- src/themes/packaged/github/elements/button.variables | 2 +- 14 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 src/themes/_site/modules/checkbox.overrides create mode 100644 src/themes/_site/modules/checkbox.variables diff --git a/src/elements/button.less b/src/elements/button.less index 32301f45f..a2a8d2fc2 100755 --- a/src/elements/button.less +++ b/src/elements/button.less @@ -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; diff --git a/src/elements/header.less b/src/elements/header.less index 774b06d68..a583f7632 100755 --- a/src/elements/header.less +++ b/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; diff --git a/src/elements/input.less b/src/elements/input.less index e8d7338e0..7315cd1e9 100755 --- a/src/elements/input.less +++ b/src/elements/input.less @@ -35,7 +35,7 @@ } .ui.input input { width: 100%; - font-family: @fontFamily; + font-family: @pageFont; margin: 0em; padding: @verticalPadding @horizontalPadding; diff --git a/src/modules/checkbox.less b/src/modules/checkbox.less index c6a25efca..0860df7c0 100755 --- a/src/modules/checkbox.less +++ b/src/modules/checkbox.less @@ -233,6 +233,9 @@ transform: none; border-radius: @circularRadius; + transition: + background 0.3s ease + ; } /* Handle */ @@ -253,7 +256,6 @@ border-radius: @circularRadius; transition: - background 0.3s ease 0s, left 0.3s ease 0s ; } diff --git a/src/site.less b/src/site.less index 65a122917..a29ea753d 100755 --- a/src/site.less +++ b/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; diff --git a/src/themes/_site/modules/checkbox.overrides b/src/themes/_site/modules/checkbox.overrides new file mode 100644 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/_site/modules/checkbox.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/_site/modules/checkbox.variables b/src/themes/_site/modules/checkbox.variables new file mode 100644 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/modules/checkbox.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/header.variables index 59d962791..3f31c70d8 100755 --- a/src/themes/default/elements/header.variables +++ b/src/themes/default/elements/header.variables @@ -18,7 +18,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; diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables index 3cf5b1ab0..37f640bd1 100755 --- a/src/themes/default/elements/input.variables +++ b/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; diff --git a/src/themes/default/site.variables b/src/themes/default/site.variables index 9fb03270e..391fbdb2a 100644 --- a/src/themes/default/site.variables +++ b/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 diff --git a/src/themes/packaged/bookish/elements/header.variables b/src/themes/packaged/bookish/elements/header.variables index b69e411ef..e85ac0e73 100644 --- a/src/themes/packaged/bookish/elements/header.variables +++ b/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; diff --git a/src/themes/packaged/chubby/elements/button.variables b/src/themes/packaged/chubby/elements/button.variables index 408bc5e78..1115b405b 100644 --- a/src/themes/packaged/chubby/elements/button.variables +++ b/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; diff --git a/src/themes/packaged/chubby/elements/header.variables b/src/themes/packaged/chubby/elements/header.variables index 9c6e51053..ad2068aef 100644 --- a/src/themes/packaged/chubby/elements/header.variables +++ b/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; diff --git a/src/themes/packaged/github/elements/button.variables b/src/themes/packaged/github/elements/button.variables index e283abdff..465b4f4c5 100644 --- a/src/themes/packaged/github/elements/button.variables +++ b/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;