Login

') + .addClass('ui basic red pointing prompt label') + .html(errors[0]) + ; + } + }, + + rules: { + + // is not empty or blank string + empty: function(value) { + return !(value === undefined || '' === value || $.isArray(value) && value.length === 0); + }, + + // checkbox checked + checked: function() { + return ($(this).filter(':checked').length > 0); + }, + + // is most likely an email + email: function(value){ + return $.fn.form.settings.regExp.email.test(value); + }, + + // value is most likely url + url: function(value) { + return $.fn.form.settings.regExp.url.test(value); + }, + + // matches specified regExp + regExp: function(value, regExp) { + if(regExp instanceof RegExp) { + return value.match(regExp); + } + var + regExpParts = regExp.match($.fn.form.settings.regExp.flags), + flags + ; + // regular expression specified as /baz/gi (flags) + if(regExpParts) { + regExp = (regExpParts.length >= 2) + ? regExpParts[1] + : regExp + ; + flags = (regExpParts.length >= 3) + ? regExpParts[2] + : '' + ; + } + return value.match( new RegExp(regExp, flags) ); + }, + + // is valid integer or matches range + integer: function(value, range) { + var + intRegExp = $.fn.form.settings.regExp.integer, + min, + max, + parts + ; + if( !range || ['', '..'].indexOf(range) !== -1) { + // do nothing + } + else if(range.indexOf('..') == -1) { + if(intRegExp.test(range)) { + min = max = range - 0; + } + } + else { + parts = range.split('..', 2); + if(intRegExp.test(parts[0])) { + min = parts[0] - 0; + } + if(intRegExp.test(parts[1])) { + max = parts[1] - 0; + } + } + return ( + intRegExp.test(value) && + (min === undefined || value >= min) && + (max === undefined || value <= max) + ); + }, + + // is valid number (with decimal) + decimal: function(value) { + return $.fn.form.settings.regExp.decimal.test(value); + }, + + // is valid number + number: function(value) { + return $.fn.form.settings.regExp.number.test(value); + }, + + // is value (case insensitive) + is: function(value, text) { + text = (typeof text == 'string') + ? text.toLowerCase() + : text + ; + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + return (value == text); + }, + + // is value + isExactly: function(value, text) { + return (value == text); + }, + + // value is not another value (case insensitive) + not: function(value, notValue) { + value = (typeof value == 'string') + ? value.toLowerCase() + : value + ; + notValue = (typeof notValue == 'string') + ? notValue.toLowerCase() + : notValue + ; + return (value != notValue); + }, + + // value is not another value (case sensitive) + notExactly: function(value, notValue) { + return (value != notValue); + }, + + // value contains text (insensitive) + contains: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) !== -1); + }, + + // value contains text (case sensitive) + containsExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) !== -1); + }, + + // value contains text (insensitive) + doesntContain: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text, 'i') ) === -1); + }, + + // value contains text (case sensitive) + doesntContainExactly: function(value, text) { + // escape regex characters + text = text.replace($.fn.form.settings.regExp.escape, "\\$&"); + return (value.search( new RegExp(text) ) === -1); + }, + + // is at least string length + minLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // see rls notes for 2.0.6 (this is a duplicate of minLength) + length: function(value, requiredLength) { + return (value !== undefined) + ? (value.length >= requiredLength) + : false + ; + }, + + // is exactly length + exactLength: function(value, requiredLength) { + return (value !== undefined) + ? (value.length == requiredLength) + : false + ; + }, + + // is less than length + maxLength: function(value, maxLength) { + return (value !== undefined) + ? (value.length <= maxLength) + : false + ; + }, + + // matches another field + match: function(value, identifier) { + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() == matchingValue.toString() ) + : false + ; + }, + + // different than another field + different: function(value, identifier) { + // use either id or name of field + var + $form = $(this), + matchingValue + ; + if( $('[data-validate="'+ identifier +'"]').length > 0 ) { + matchingValue = $('[data-validate="'+ identifier +'"]').val(); + } + else if($('#' + identifier).length > 0) { + matchingValue = $('#' + identifier).val(); + } + else if($('[name="' + identifier +'"]').length > 0) { + matchingValue = $('[name="' + identifier + '"]').val(); + } + else if( $('[name="' + identifier +'[]"]').length > 0 ) { + matchingValue = $('[name="' + identifier +'[]"]'); + } + return (matchingValue !== undefined) + ? ( value.toString() !== matchingValue.toString() ) + : false + ; + }, + + creditCard: function(cardNumber, cardTypes) { + var + cards = { + visa: { + pattern : /^4/, + length : [16] + }, + amex: { + pattern : /^3[47]/, + length : [15] + }, + mastercard: { + pattern : /^5[1-5]/, + length : [16] + }, + discover: { + pattern : /^(6011|622(12[6-9]|1[3-9][0-9]|[2-8][0-9]{2}|9[0-1][0-9]|92[0-5]|64[4-9])|65)/, + length : [16] + }, + unionPay: { + pattern : /^(62|88)/, + length : [16, 17, 18, 19] + }, + jcb: { + pattern : /^35(2[89]|[3-8][0-9])/, + length : [16] + }, + maestro: { + pattern : /^(5018|5020|5038|6304|6759|676[1-3])/, + length : [12, 13, 14, 15, 16, 17, 18, 19] + }, + dinersClub: { + pattern : /^(30[0-5]|^36)/, + length : [14] + }, + laser: { + pattern : /^(6304|670[69]|6771)/, + length : [16, 17, 18, 19] + }, + visaElectron: { + pattern : /^(4026|417500|4508|4844|491(3|7))/, + length : [16] + } + }, + valid = {}, + validCard = false, + requiredTypes = (typeof cardTypes == 'string') + ? cardTypes.split(',') + : false, + unionPay, + validation + ; + + if(typeof cardNumber !== 'string' || cardNumber.length === 0) { + return; + } + + // allow dashes in card + cardNumber = cardNumber.replace(/[\-]/g, ''); + + // verify card types + if(requiredTypes) { + $.each(requiredTypes, function(index, type){ + // verify each card type + validation = cards[type]; + if(validation) { + valid = { + length : ($.inArray(cardNumber.length, validation.length) !== -1), + pattern : (cardNumber.search(validation.pattern) !== -1) + }; + if(valid.length && valid.pattern) { + validCard = true; + } + } + }); + + if(!validCard) { + return false; + } + } + + // skip luhn for UnionPay + unionPay = { + number : ($.inArray(cardNumber.length, cards.unionPay.length) !== -1), + pattern : (cardNumber.search(cards.unionPay.pattern) !== -1) + }; + if(unionPay.number && unionPay.pattern) { + return true; + } + + // verify luhn, adapted from + var + length = cardNumber.length, + multiple = 0, + producedValue = [ + [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], + [0, 2, 4, 6, 8, 1, 3, 5, 7, 9] + ], + sum = 0 + ; + while (length--) { + sum += producedValue[multiple][parseInt(cardNumber.charAt(length), 10)]; + multiple ^= 1; + } + return (sum % 10 === 0 && sum > 0); + }, + + minCount: function(value, minCount) { + if(minCount == 0) { + return true; + } + if(minCount == 1) { + return (value !== ''); + } + return (value.split(',').length >= minCount); + }, + + exactCount: function(value, exactCount) { + if(exactCount == 0) { + return (value === ''); + } + if(exactCount == 1) { + return (value !== '' && value.search(',') === -1); + } + return (value.split(',').length == exactCount); + }, + + maxCount: function(value, maxCount) { + if(maxCount == 0) { + return false; + } + if(maxCount == 1) { + return (value.search(',') === -1); + } + return (value.split(',').length <= maxCount); + } + } + +}; + +})( jQuery, window, document ); diff --git a/static/semantic/src/definitions/behaviors/visibility.js b/static/semantic/src/definitions/behaviors/visibility.js new file mode 100755 index 0000000..8ae572c --- /dev/null +++ b/static/semantic/src/definitions/behaviors/visibility.js @@ -0,0 +1,1311 @@ +/*! + * # Semantic UI - Visibility + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.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, + + moduleCount = $allModules.length, + loadedCount = 0 + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.visibility.settings, parameters) + : $.extend({}, $.fn.visibility.settings), + + className = settings.className, + namespace = settings.namespace, + error = settings.error, + metadata = settings.metadata, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $window = $(window), + + $module = $(this), + $context = $(settings.context), + + $placeholder, + + selector = $module.selector || '', + instance = $module.data(moduleNamespace), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + element = this, + disabled = false, + + contextObserver, + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', settings); + + module.setup.cache(); + + if( module.should.trackChanges() ) { + + if(settings.type == 'image') { + module.setup.image(); + } + if(settings.type == 'fixed') { + module.setup.fixed(); + } + + if(settings.observeChanges) { + module.observeChanges(); + } + module.bind.events(); + } + + module.save.position(); + if( !module.is.visible() ) { + module.error(error.visible, $module); + } + + if(settings.initialCheck) { + module.checkVisibility(); + } + module.instantiate(); + }, + + instantiate: function() { + module.debug('Storing instance', module); + $module + .data(moduleNamespace, module) + ; + instance = module; + }, + + destroy: function() { + module.verbose('Destroying previous module'); + if(observer) { + observer.disconnect(); + } + if(contextObserver) { + contextObserver.disconnect(); + } + $window + .off('load' + eventNamespace, module.event.load) + .off('resize' + eventNamespace, module.event.resize) + ; + $context + .off('scroll' + eventNamespace, module.event.scroll) + .off('scrollchange' + eventNamespace, module.event.scrollchange) + ; + if(settings.type == 'fixed') { + module.resetFixed(); + module.remove.placeholder(); + } + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + observeChanges: function() { + if('MutationObserver' in window) { + contextObserver = new MutationObserver(module.event.contextChanged); + observer = new MutationObserver(module.event.changed); + contextObserver.observe(document, { + childList : true, + subtree : true + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.verbose('Binding visibility events to scroll and resize'); + if(settings.refreshOnLoad) { + $window + .on('load' + eventNamespace, module.event.load) + ; + } + $window + .on('resize' + eventNamespace, module.event.resize) + ; + // pub/sub pattern + $context + .off('scroll' + eventNamespace) + .on('scroll' + eventNamespace, module.event.scroll) + .on('scrollchange' + eventNamespace, module.event.scrollchange) + ; + } + }, + + event: { + changed: function(mutations) { + module.verbose('DOM tree modified, updating visibility calculations'); + module.timer = setTimeout(function() { + module.verbose('DOM tree modified, updating sticky menu'); + module.refresh(); + }, 100); + }, + contextChanged: function(mutations) { + [].forEach.call(mutations, function(mutation) { + if(mutation.removedNodes) { + [].forEach.call(mutation.removedNodes, function(node) { + if(node == element || $(node).find(element).length > 0) { + module.debug('Element removed from DOM, tearing down events'); + module.destroy(); + } + }); + } + }); + }, + resize: function() { + module.debug('Window resized'); + if(settings.refreshOnResize) { + requestAnimationFrame(module.refresh); + } + }, + load: function() { + module.debug('Page finished loading'); + requestAnimationFrame(module.refresh); + }, + // publishes scrollchange event on one scroll + scroll: function() { + if(settings.throttle) { + clearTimeout(module.timer); + module.timer = setTimeout(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }, settings.throttle); + } + else { + requestAnimationFrame(function() { + $context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]); + }); + } + }, + // subscribes to scrollchange + scrollchange: function(event, scrollPosition) { + module.checkVisibility(scrollPosition); + }, + }, + + precache: function(images, callback) { + if (!(images instanceof Array)) { + images = [images]; + } + var + imagesLength = images.length, + loadedCounter = 0, + cache = [], + cacheImage = document.createElement('img'), + handleLoad = function() { + loadedCounter++; + if (loadedCounter >= images.length) { + if ($.isFunction(callback)) { + callback(); + } + } + } + ; + while (imagesLength--) { + cacheImage = document.createElement('img'); + cacheImage.onload = handleLoad; + cacheImage.onerror = handleLoad; + cacheImage.src = images[imagesLength]; + cache.push(cacheImage); + } + }, + + enableCallbacks: function() { + module.debug('Allowing callbacks to occur'); + disabled = false; + }, + + disableCallbacks: function() { + module.debug('Disabling all callbacks temporarily'); + disabled = true; + }, + + should: { + trackChanges: function() { + if(methodInvoked) { + module.debug('One time query, no need to bind events'); + return false; + } + module.debug('Callbacks being attached'); + return true; + } + }, + + setup: { + cache: function() { + module.cache = { + occurred : {}, + screen : {}, + element : {}, + }; + }, + image: function() { + var + src = $module.data(metadata.src) + ; + if(src) { + module.verbose('Lazy loading image', src); + settings.once = true; + settings.observeChanges = false; + + // show when top visible + settings.onOnScreen = function() { + module.debug('Image on screen', element); + module.precache(src, function() { + module.set.image(src, function() { + loadedCount++; + if(loadedCount == moduleCount) { + settings.onAllLoaded.call(this); + } + settings.onLoad.call(this); + }); + }); + }; + } + }, + fixed: function() { + module.debug('Setting up fixed'); + settings.once = false; + settings.observeChanges = false; + settings.initialCheck = true; + settings.refreshOnLoad = true; + if(!parameters.transition) { + settings.transition = false; + } + module.create.placeholder(); + module.debug('Added placeholder', $placeholder); + settings.onTopPassed = function() { + module.debug('Element passed, adding fixed position', $module); + module.show.placeholder(); + module.set.fixed(); + if(settings.transition) { + if($.fn.transition !== undefined) { + $module.transition(settings.transition, settings.duration); + } + } + }; + settings.onTopPassedReverse = function() { + module.debug('Element returned to position, removing fixed', $module); + module.hide.placeholder(); + module.remove.fixed(); + }; + } + }, + + create: { + placeholder: function() { + module.verbose('Creating fixed position placeholder'); + $placeholder = $module + .clone(false) + .css('display', 'none') + .addClass(className.placeholder) + .insertAfter($module) + ; + } + }, + + show: { + placeholder: function() { + module.verbose('Showing placeholder'); + $placeholder + .css('display', 'block') + .css('visibility', 'hidden') + ; + } + }, + hide: { + placeholder: function() { + module.verbose('Hiding placeholder'); + $placeholder + .css('display', 'none') + .css('visibility', '') + ; + } + }, + + set: { + fixed: function() { + module.verbose('Setting element to fixed position'); + $module + .addClass(className.fixed) + .css({ + position : 'fixed', + top : settings.offset + 'px', + left : 'auto', + zIndex : settings.zIndex + }) + ; + settings.onFixed.call(element); + }, + image: function(src, callback) { + $module + .attr('src', src) + ; + if(settings.transition) { + if( $.fn.transition !== undefined) { + if($module.hasClass(className.visible)) { + module.debug('Transition already occurred on this image, skipping animation'); + return; + } + $module.transition(settings.transition, settings.duration, callback); + } + else { + $module.fadeIn(settings.duration, callback); + } + } + else { + $module.show(); + } + } + }, + + is: { + onScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.onScreen; + }, + offScreen: function() { + var + calculations = module.get.elementCalculations() + ; + return calculations.offScreen; + }, + visible: function() { + if(module.cache && module.cache.element) { + return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0); + } + return false; + }, + verticallyScrollableContext: function() { + var + overflowY = ($context.get(0) !== window) + ? $context.css('overflow-y') + : false + ; + return (overflowY == 'auto' || overflowY == 'scroll'); + }, + horizontallyScrollableContext: function() { + var + overflowX = ($context.get(0) !== window) + ? $context.css('overflow-x') + : false + ; + return (overflowX == 'auto' || overflowX == 'scroll'); + } + }, + + refresh: function() { + module.debug('Refreshing constants (width/height)'); + if(settings.type == 'fixed') { + module.resetFixed(); + } + module.reset(); + module.save.position(); + if(settings.checkOnRefresh) { + module.checkVisibility(); + } + settings.onRefresh.call(element); + }, + + resetFixed: function () { + module.remove.fixed(); + module.remove.occurred(); + }, + + reset: function() { + module.verbose('Resetting all cached values'); + if( $.isPlainObject(module.cache) ) { + module.cache.screen = {}; + module.cache.element = {}; + } + }, + + checkVisibility: function(scroll) { + module.verbose('Checking visibility of element', module.cache.element); + + if( !disabled && module.is.visible() ) { + + // save scroll position + module.save.scroll(scroll); + + // update calculations derived from scroll + module.save.calculations(); + + // percentage + module.passed(); + + // reverse (must be first) + module.passingReverse(); + module.topVisibleReverse(); + module.bottomVisibleReverse(); + module.topPassedReverse(); + module.bottomPassedReverse(); + + // one time + module.onScreen(); + module.offScreen(); + module.passing(); + module.topVisible(); + module.bottomVisible(); + module.topPassed(); + module.bottomPassed(); + + // on update callback + if(settings.onUpdate) { + settings.onUpdate.call(element, module.get.elementCalculations()); + } + } + }, + + passed: function(amount, newCallback) { + var + calculations = module.get.elementCalculations(), + amountInPixels + ; + // assign callback + if(amount && newCallback) { + 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)) { + module.execute(callback, amount); + } + else if(!settings.once) { + module.remove.occurred(callback); + } + }); + } + }, + + onScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOnScreen, + callbackName = 'onScreen' + ; + if(newCallback) { + module.debug('Adding callback for onScreen', newCallback); + settings.onOnScreen = newCallback; + } + if(calculations.onScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOnScreen; + } + }, + + offScreen: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onOffScreen, + callbackName = 'offScreen' + ; + if(newCallback) { + module.debug('Adding callback for offScreen', newCallback); + settings.onOffScreen = newCallback; + } + if(calculations.offScreen) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.onOffScreen; + } + }, + + passing: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassing, + callbackName = 'passing' + ; + if(newCallback) { + module.debug('Adding callback for passing', newCallback); + settings.onPassing = newCallback; + } + if(calculations.passing) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return calculations.passing; + } + }, + + + topVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisible, + callbackName = 'topVisible' + ; + if(newCallback) { + module.debug('Adding callback for top visible', newCallback); + settings.onTopVisible = newCallback; + } + if(calculations.topVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topVisible; + } + }, + + bottomVisible: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisible, + callbackName = 'bottomVisible' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible', newCallback); + settings.onBottomVisible = newCallback; + } + if(calculations.bottomVisible) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomVisible; + } + }, + + topPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassed, + callbackName = 'topPassed' + ; + if(newCallback) { + module.debug('Adding callback for top passed', newCallback); + settings.onTopPassed = newCallback; + } + if(calculations.topPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.topPassed; + } + }, + + bottomPassed: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassed, + callbackName = 'bottomPassed' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed', newCallback); + settings.onBottomPassed = newCallback; + } + if(calculations.bottomPassed) { + module.execute(callback, callbackName); + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return calculations.bottomPassed; + } + }, + + passingReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onPassingReverse, + callbackName = 'passingReverse' + ; + if(newCallback) { + module.debug('Adding callback for passing reverse', newCallback); + settings.onPassingReverse = newCallback; + } + if(!calculations.passing) { + if(module.get.occurred('passing')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback !== undefined) { + return !calculations.passing; + } + }, + + + topVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopVisibleReverse, + callbackName = 'topVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for top visible reverse', newCallback); + settings.onTopVisibleReverse = newCallback; + } + if(!calculations.topVisible) { + if(module.get.occurred('topVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.topVisible; + } + }, + + bottomVisibleReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomVisibleReverse, + callbackName = 'bottomVisibleReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom visible reverse', newCallback); + settings.onBottomVisibleReverse = newCallback; + } + if(!calculations.bottomVisible) { + if(module.get.occurred('bottomVisible')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomVisible; + } + }, + + topPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onTopPassedReverse, + callbackName = 'topPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for top passed reverse', newCallback); + settings.onTopPassedReverse = newCallback; + } + if(!calculations.topPassed) { + if(module.get.occurred('topPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.onTopPassed; + } + }, + + bottomPassedReverse: function(newCallback) { + var + calculations = module.get.elementCalculations(), + callback = newCallback || settings.onBottomPassedReverse, + callbackName = 'bottomPassedReverse' + ; + if(newCallback) { + module.debug('Adding callback for bottom passed reverse', newCallback); + settings.onBottomPassedReverse = newCallback; + } + if(!calculations.bottomPassed) { + if(module.get.occurred('bottomPassed')) { + module.execute(callback, callbackName); + } + } + else if(!settings.once) { + module.remove.occurred(callbackName); + } + if(newCallback === undefined) { + return !calculations.bottomPassed; + } + }, + + execute: function(callback, callbackName) { + var + calculations = module.get.elementCalculations(), + screen = module.get.screenCalculations() + ; + callback = callback || false; + if(callback) { + if(settings.continuous) { + module.debug('Callback being called continuously', callbackName, calculations); + callback.call(element, calculations, screen); + } + else if(!module.get.occurred(callbackName)) { + module.debug('Conditions met', callbackName, calculations); + callback.call(element, calculations, screen); + } + } + module.save.occurred(callbackName); + }, + + remove: { + fixed: function() { + module.debug('Removing fixed position'); + $module + .removeClass(className.fixed) + .css({ + position : '', + top : '', + left : '', + zIndex : '' + }) + ; + settings.onUnfixed.call(element); + }, + placeholder: function() { + module.debug('Removing placeholder content'); + if($placeholder) { + $placeholder.remove(); + } + }, + occurred: function(callback) { + if(callback) { + var + occurred = module.cache.occurred + ; + if(occurred[callback] !== undefined && occurred[callback] === true) { + module.debug('Callback can now be called again', callback); + module.cache.occurred[callback] = false; + } + } + else { + module.cache.occurred = {}; + } + } + }, + + save: { + calculations: function() { + module.verbose('Saving all calculations necessary to determine positioning'); + module.save.direction(); + module.save.screenCalculations(); + module.save.elementCalculations(); + }, + occurred: function(callback) { + if(callback) { + if(module.cache.occurred[callback] === undefined || (module.cache.occurred[callback] !== true)) { + module.verbose('Saving callback occurred', callback); + module.cache.occurred[callback] = true; + } + } + }, + scroll: function(scrollPosition) { + scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset; + module.cache.scroll = scrollPosition; + }, + 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 + element = module.cache.element, + screen = module.get.screenSize() + ; + module.verbose('Saving element position'); + // (quicker than $.extend) + element.fits = (element.height < screen.height); + element.offset = $module.offset(); + element.width = $module.outerWidth(); + element.height = $module.outerHeight(); + // compensate for scroll in context + if(module.is.verticallyScrollableContext()) { + element.offset.top += $context.scrollTop() - $context.offset().top; + } + if(module.is.horizontallyScrollableContext()) { + element.offset.left += $context.scrollLeft - $context.offset().left; + } + // store + module.cache.element = element; + return element; + }, + elementCalculations: function() { + var + screen = module.get.screenCalculations(), + element = module.get.elementPosition() + ; + // offset + if(settings.includeMargin) { + element.margin = {}; + element.margin.top = parseInt($module.css('margin-top'), 10); + element.margin.bottom = parseInt($module.css('margin-bottom'), 10); + element.top = element.offset.top - element.margin.top; + element.bottom = element.offset.top + element.height + element.margin.bottom; + } + else { + element.top = element.offset.top; + element.bottom = element.offset.top + element.height; + } + + // visibility + element.topPassed = (screen.top >= element.top); + element.bottomPassed = (screen.top >= element.bottom); + element.topVisible = (screen.bottom >= element.top) && !element.topPassed; + element.bottomVisible = (screen.bottom >= element.bottom) && !element.bottomPassed; + element.pixelsPassed = 0; + element.percentagePassed = 0; + + // meta calculations + element.onScreen = ((element.topVisible || element.passing) && !element.bottomPassed); + element.passing = (element.topPassed && !element.bottomPassed); + element.offScreen = (!element.onScreen); + + // passing calculations + if(element.passing) { + element.pixelsPassed = (screen.top - element.top); + element.percentagePassed = (screen.top - element.top) / element.height; + } + module.cache.element = element; + module.verbose('Updated element calculations', element); + return element; + }, + screenCalculations: function() { + var + scroll = module.get.scroll() + ; + module.save.direction(); + module.cache.screen.top = scroll; + module.cache.screen.bottom = scroll + module.cache.screen.height; + return module.cache.screen; + }, + screenSize: function() { + module.verbose('Saving window position'); + module.cache.screen = { + height: $context.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); + }, + occurred: function(callback) { + return (module.cache.occurred !== undefined) + ? module.cache.occurred[callback] || false + : false + ; + }, + 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.silent && 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.silent && 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() { + if(!settings.silent) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + 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 { + module.error(error.method, query); + 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(); + } + instance.save.scroll(); + instance.save.calculations(); + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.visibility.settings = { + + name : 'Visibility', + namespace : 'visibility', + + debug : false, + verbose : false, + performance : true, + + // whether to use mutation observers to follow changes + observeChanges : true, + + // check position immediately on init + initialCheck : true, + + // whether to refresh calculations after all page images load + refreshOnLoad : true, + + // whether to refresh calculations after page resize event + refreshOnResize : true, + + // should call callbacks on refresh event (resize, etc) + checkOnRefresh : true, + + // callback should only occur one time + once : true, + + // callback should fire continuously whe evaluates to true + continuous : false, + + // offset to use with scroll top + offset : 0, + + // whether to include margin in elements position + includeMargin : false, + + // scroll context for visibility checks + context : window, + + // visibility check delay in ms (defaults to animationFrame) + throttle : false, + + // special visibility type (image, fixed) + type : false, + + // z-index to use with visibility 'fixed' + zIndex : '10', + + // image only animation settings + transition : 'fade in', + duration : 1000, + + // array of callbacks for percentage + onPassed : {}, + + // standard callbacks + onOnScreen : false, + onOffScreen : false, + onPassing : false, + onTopVisible : false, + onBottomVisible : false, + onTopPassed : false, + onBottomPassed : false, + + // reverse callbacks + onPassingReverse : false, + onTopVisibleReverse : false, + onBottomVisibleReverse : false, + onTopPassedReverse : false, + onBottomPassedReverse : false, + + // special callbacks for image + onLoad : function() {}, + onAllLoaded : function() {}, + + // special callbacks for fixed position + onFixed : function() {}, + onUnfixed : function() {}, + + // utility callbacks + onUpdate : false, // disabled by default for performance + onRefresh : function(){}, + + metadata : { + src: 'src' + }, + + className: { + fixed : 'fixed', + placeholder : 'placeholder', + visible : 'visible' + }, + + error : { + method : 'The method you called is not defined.', + visible : 'Element is hidden, you must call refresh after element becomes visible' + } + +}; + +})( jQuery, window, document ); diff --git a/static/semantic/src/definitions/collections/breadcrumb.less b/static/semantic/src/definitions/collections/breadcrumb.less new file mode 100755 index 0000000..67a4e31 --- /dev/null +++ b/static/semantic/src/definitions/collections/breadcrumb.less @@ -0,0 +1,122 @@ +/*! + * # Semantic UI - Breadcrumb + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'breadcrumb'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Breadcrumb +*******************************/ + +.ui.breadcrumb { + line-height: 1; + display: @display; + margin: @verticalMargin 0em; + vertical-align: @verticalAlign; +} +.ui.breadcrumb:first-child { + margin-top: 0em; +} +.ui.breadcrumb:last-child { + margin-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* Divider */ +.ui.breadcrumb .divider { + display: inline-block; + opacity: @dividerOpacity; + margin: 0em @dividerSpacing 0em; + + font-size: @dividerSize; + color: @dividerColor; + vertical-align: @dividerVerticalAlign; +} + +/* Link */ +.ui.breadcrumb a { + color: @linkColor; +} +.ui.breadcrumb a:hover { + color: @linkHoverColor; +} + + +/* Icon Divider */ +.ui.breadcrumb .icon.divider { + font-size: @iconDividerSize; + vertical-align: @iconDividerVerticalAlign; +} + +/* Section */ +.ui.breadcrumb a.section { + cursor: pointer; +} +.ui.breadcrumb .section { + display: inline-block; + margin: @sectionMargin; + padding: @sectionPadding; +} + +/* Loose Coupling */ +.ui.breadcrumb.segment { + display: inline-block; + padding: @segmentPadding; +} + +/******************************* + States +*******************************/ + +.ui.breadcrumb .active.section { + font-weight: @activeFontWeight; +} + + +/******************************* + Variations +*******************************/ + +.ui.mini.breadcrumb { + font-size: @mini; +} +.ui.tiny.breadcrumb { + font-size: @tiny; +} +.ui.small.breadcrumb { + font-size: @small; +} +.ui.breadcrumb { + font-size: @medium; +} +.ui.large.breadcrumb { + font-size: @large; +} +.ui.big.breadcrumb { + font-size: @big; +} +.ui.huge.breadcrumb { + font-size: @huge; +} +.ui.massive.breadcrumb { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/collections/form.less b/static/semantic/src/definitions/collections/form.less new file mode 100755 index 0000000..73ef2a2 --- /dev/null +++ b/static/semantic/src/definitions/collections/form.less @@ -0,0 +1,1053 @@ +/*! + * # Semantic UI - Form + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'form'; + +@import (multiple) '../../theme.config'; + +/******************************* + Elements +*******************************/ + +/*-------------------- + Form +---------------------*/ + +.ui.form { + position: relative; + max-width: 100%; +} + +/*-------------------- + Content +---------------------*/ + +.ui.form > p { + margin: @paragraphMargin; +} + +/*-------------------- + Field +---------------------*/ + +.ui.form .field { + clear: both; + margin: @fieldMargin; +} + +.ui.form .field:last-child, +.ui.form .fields:last-child .field { + margin-bottom: 0em; +} + +.ui.form .fields .field { + clear: both; + margin: 0em; +} + + +/*-------------------- + Labels +---------------------*/ + +.ui.form .field > label { + display: block; + margin: @labelMargin; + color: @labelColor; + font-size: @labelFontSize; + font-weight: @labelFontWeight; + text-transform: @labelTextTransform; +} + +/*-------------------- + Standard Inputs +---------------------*/ + + +.ui.form textarea, +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="file"], +.ui.form input[type="url"] { + width: @inputWidth; + vertical-align: top; +} + +/* Set max height on unusual input */ +.ui.form ::-webkit-datetime-edit, +.ui.form ::-webkit-inner-spin-button { + height: @inputLineHeight; +} + +.ui.form input:not([type]), +.ui.form input[type="date"], +.ui.form input[type="datetime-local"], +.ui.form input[type="email"], +.ui.form input[type="number"], +.ui.form input[type="password"], +.ui.form input[type="search"], +.ui.form input[type="tel"], +.ui.form input[type="time"], +.ui.form input[type="text"], +.ui.form input[type="file"], +.ui.form input[type="url"] { + font-family: @inputFont; + margin: 0em; + outline: none; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + line-height: @inputLineHeight; + padding: @inputPadding; + font-size: @inputFontSize; + + background: @inputBackground; + border: @inputBorder; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @inputTransition; +} + +/* Text Area */ +.ui.form textarea { + margin: 0em; + -webkit-appearance: none; + tap-highlight-color: rgba(255, 255, 255, 0); + + padding: @textAreaPadding; + font-size: @textAreaFontSize; + background: @textAreaBackground; + border: @textAreaBorder; + outline: none; + color: @inputColor; + border-radius: @inputBorderRadius; + box-shadow: @inputBoxShadow; + transition: @textAreaTransition; + font-size: @textAreaFontSize; + line-height: @textAreaLineHeight; + resize: @textAreaResize; +} +.ui.form textarea:not([rows]) { + height: @textAreaHeight; + min-height: @textAreaMinHeight; + max-height: @textAreaMaxHeight; +} + +.ui.form textarea, +.ui.form input[type="checkbox"] { + vertical-align: @checkboxVerticalAlign; +} + +/*-------------------------- + Input w/ attached Button +---------------------------*/ + +.ui.form input.attached { + width: auto; +} + + +/*-------------------- + Basic Select +---------------------*/ + +.ui.form select { + display: block; + height: auto; + width: 100%; + background: @selectBackground; + border: @selectBorder; + border-radius: @selectBorderRadius; + box-shadow: @selectBoxShadow; + padding: @selectPadding; + color: @selectColor; + transition: @selectTransition; +} + +/*-------------------- + Dropdown +---------------------*/ + +/* Block */ +.ui.form .field > .selection.dropdown { + width: 100%; +} +.ui.form .field > .selection.dropdown > .dropdown.icon { + float: right; +} + +/* Inline */ +.ui.form .inline.fields .field > .selection.dropdown, +.ui.form .inline.field > .selection.dropdown { + width: auto; +} +.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, +.ui.form .inline.field > .selection.dropdown > .dropdown.icon { + float: none; +} + +/*-------------------- + UI Input +---------------------*/ + +/* Block */ +.ui.form .field .ui.input, +.ui.form .fields .field .ui.input, +.ui.form .wide.field .ui.input { + width: 100%; +} + +/* Inline */ +.ui.form .inline.fields .field:not(.wide) .ui.input, +.ui.form .inline.field:not(.wide) .ui.input { + width: auto; + vertical-align: middle; +} + +/* Auto Input */ +.ui.form .fields .field .ui.input input, +.ui.form .field .ui.input input { + width: auto; +} + +/* Full Width Input */ +.ui.form .ten.fields .ui.input input, +.ui.form .nine.fields .ui.input input, +.ui.form .eight.fields .ui.input input, +.ui.form .seven.fields .ui.input input, +.ui.form .six.fields .ui.input input, +.ui.form .five.fields .ui.input input, +.ui.form .four.fields .ui.input input, +.ui.form .three.fields .ui.input input, +.ui.form .two.fields .ui.input input, +.ui.form .wide.field .ui.input input { + flex: 1 0 auto; + width: 0px; +} + + +/*-------------------- + Types of Messages +---------------------*/ + +.ui.form .success.message, +.ui.form .warning.message, +.ui.form .error.message { + display: none; +} + +/* Assumptions */ +.ui.form .message:first-child { + margin-top: 0px; +} + +/*-------------------- + Validation Prompt +---------------------*/ + +.ui.form .field .prompt.label { + white-space: normal; + background: @promptBackground !important; + border: @promptBorder !important; + color: @promptTextColor !important; +} +.ui.form .inline.fields .field .prompt, +.ui.form .inline.field .prompt { + vertical-align: top; + margin: @inlinePromptMargin; +} +.ui.form .inline.fields .field .prompt:before, +.ui.form .inline.field .prompt:before { + border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth; + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Autofilled +---------------------*/ + +.ui.form .field.field input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important; + border-color: @inputAutoFillBorder !important; +} + +/* Focus */ +.ui.form .field.field input:-webkit-autofill:focus { + box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important; + border-color: @inputAutoFillFocusBorder !important; +} + +/* Error */ +.ui.form .error.error input:-webkit-autofill { + box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important; + border-color: @inputAutoFillErrorBorder !important; +} + + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ +.ui.form ::-webkit-input-placeholder { + color: @inputPlaceholderColor; +} +.ui.form :-ms-input-placeholder { + color: @inputPlaceholderColor !important; +} +.ui.form ::-moz-placeholder { + color: @inputPlaceholderColor; +} + +.ui.form :focus::-webkit-input-placeholder { + color: @inputPlaceholderFocusColor; +} +.ui.form :focus:-ms-input-placeholder { + color: @inputPlaceholderFocusColor !important; +} +.ui.form :focus::-moz-placeholder { + color: @inputPlaceholderFocusColor; +} + +/* Error Placeholder */ +.ui.form .error ::-webkit-input-placeholder { + color: @inputErrorPlaceholderColor; +} +.ui.form .error :-ms-input-placeholder { + color: @inputErrorPlaceholderColor !important; +} +.ui.form .error ::-moz-placeholder { + color: @inputErrorPlaceholderColor; +} + +.ui.form .error :focus::-webkit-input-placeholder { + color: @inputErrorPlaceholderFocusColor; +} +.ui.form .error :focus:-ms-input-placeholder { + color: @inputErrorPlaceholderFocusColor !important; +} +.ui.form .error :focus::-moz-placeholder { + color: @inputErrorPlaceholderFocusColor; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.form input:not([type]):focus, +.ui.form input[type="date"]:focus, +.ui.form input[type="datetime-local"]:focus, +.ui.form input[type="email"]:focus, +.ui.form input[type="number"]:focus, +.ui.form input[type="password"]:focus, +.ui.form input[type="search"]:focus, +.ui.form input[type="tel"]:focus, +.ui.form input[type="time"]:focus, +.ui.form input[type="text"]:focus, +.ui.form input[type="file"]:focus, +.ui.form input[type="url"]:focus { + color: @inputFocusColor; + border-color: @inputFocusBorderColor; + border-radius: @inputFocusBorderRadius; + background: @inputFocusBackground; + box-shadow: @inputFocusBoxShadow; +} +.ui.form textarea:focus { + color: @textAreaFocusColor; + border-color: @textAreaFocusBorderColor; + border-radius: @textAreaFocusBorderRadius; + background: @textAreaFocusBackground; + box-shadow: @textAreaFocusBoxShadow; + -webkit-appearance: none; +} + + +/*-------------------- + Success +---------------------*/ + +/* On Form */ +.ui.form.success .success.message:not(:empty) { + display: block; +} +.ui.form.success .compact.success.message:not(:empty) { + display: inline-block; +} +.ui.form.success .icon.success.message:not(:empty) { + display: flex; +} + +/*-------------------- + Warning +---------------------*/ + +/* On Form */ +.ui.form.warning .warning.message:not(:empty) { + display: block; +} +.ui.form.warning .compact.warning.message:not(:empty) { + display: inline-block; +} +.ui.form.warning .icon.warning.message:not(:empty) { + display: flex; +} + +/*-------------------- + Error +---------------------*/ + +/* On Form */ +.ui.form.error .error.message:not(:empty) { + display: block; +} +.ui.form.error .compact.error.message:not(:empty) { + display: inline-block; +} +.ui.form.error .icon.error.message:not(:empty) { + display: flex; +} + +/* On Field(s) */ +.ui.form .fields.error .field label, +.ui.form .field.error label, +.ui.form .fields.error .field .input, +.ui.form .field.error .input { + color: @formErrorColor; +} + +.ui.form .fields.error .field .corner.label, +.ui.form .field.error .corner.label { + border-color: @formErrorColor; + color: @white; +} + +.ui.form .fields.error .field textarea, +.ui.form .fields.error .field select, +.ui.form .fields.error .field input:not([type]), +.ui.form .fields.error .field input[type="date"], +.ui.form .fields.error .field input[type="datetime-local"], +.ui.form .fields.error .field input[type="email"], +.ui.form .fields.error .field input[type="number"], +.ui.form .fields.error .field input[type="password"], +.ui.form .fields.error .field input[type="search"], +.ui.form .fields.error .field input[type="tel"], +.ui.form .fields.error .field input[type="time"], +.ui.form .fields.error .field input[type="text"], +.ui.form .fields.error .field input[type="file"], +.ui.form .fields.error .field input[type="url"], +.ui.form .field.error textarea, +.ui.form .field.error select, +.ui.form .field.error input:not([type]), +.ui.form .field.error input[type="date"], +.ui.form .field.error input[type="datetime-local"], +.ui.form .field.error input[type="email"], +.ui.form .field.error input[type="number"], +.ui.form .field.error input[type="password"], +.ui.form .field.error input[type="search"], +.ui.form .field.error input[type="tel"], +.ui.form .field.error input[type="time"], +.ui.form .field.error input[type="text"], +.ui.form .field.error input[type="file"], +.ui.form .field.error input[type="url"] { + background: @formErrorBackground; + border-color: @formErrorBorder; + color: @formErrorColor; + border-radius: @inputErrorBorderRadius; + box-shadow: @inputErrorBoxShadow; +} +.ui.form .field.error textarea:focus, +.ui.form .field.error select:focus, +.ui.form .field.error input:not([type]):focus, +.ui.form .field.error input[type="date"]:focus, +.ui.form .field.error input[type="datetime-local"]:focus, +.ui.form .field.error input[type="email"]:focus, +.ui.form .field.error input[type="number"]:focus, +.ui.form .field.error input[type="password"]:focus, +.ui.form .field.error input[type="search"]:focus, +.ui.form .field.error input[type="tel"]:focus, +.ui.form .field.error input[type="time"]:focus, +.ui.form .field.error input[type="text"]:focus, +.ui.form .field.error input[type="file"]:focus, +.ui.form .field.error input[type="url"]:focus { + background: @inputErrorFocusBackground; + border-color: @inputErrorFocusBorder; + color: @inputErrorFocusColor; + + -webkit-appearance: none; + box-shadow: @inputErrorFocusBoxShadow; +} + +/* Preserve Native Select Stylings */ +.ui.form .field.error select { + -webkit-appearance: menulist-button; +} + +/*------------------ + Dropdown Error +--------------------*/ + +.ui.form .fields.error .field .ui.dropdown, +.ui.form .fields.error .field .ui.dropdown .item, +.ui.form .field.error .ui.dropdown, +.ui.form .field.error .ui.dropdown .text, +.ui.form .field.error .ui.dropdown .item { + background: @formErrorBackground; + color: @formErrorColor; +} +.ui.form .fields.error .field .ui.dropdown, +.ui.form .field.error .ui.dropdown { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover, +.ui.form .field.error .ui.dropdown:hover { + border-color: @formErrorBorder !important; +} +.ui.form .fields.error .field .ui.dropdown:hover .menu, +.ui.form .field.error .ui.dropdown:hover .menu { + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, +.ui.form .field.error .ui.multiple.selection.dropdown > .label { + background-color: @dropdownErrorLabelBackground; + color: @dropdownErrorLabelColor; +} + +/* Hover */ +.ui.form .fields.error .field .ui.dropdown .menu .item:hover, +.ui.form .field.error .ui.dropdown .menu .item:hover { + background-color: @dropdownErrorHoverBackground; +} + +/* Selected */ +.ui.form .fields.error .field .ui.dropdown .menu .selected.item, +.ui.form .field.error .ui.dropdown .menu .selected.item { + background-color: @dropdownErrorSelectedBackground; +} + + +/* Active */ +.ui.form .fields.error .field .ui.dropdown .menu .active.item, +.ui.form .field.error .ui.dropdown .menu .active.item { + background-color: @dropdownErrorActiveBackground !important; +} + +/*-------------------- + Checkbox Error +---------------------*/ + +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { + color: @formErrorColor; +} +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, +.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, +.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { + background: @formErrorBackground; + border-color: @formErrorBorder; +} +.ui.form .fields.error .field .checkbox label:after, +.ui.form .field.error .checkbox label:after, +.ui.form .fields.error .field .checkbox .box:after, +.ui.form .field.error .checkbox .box:after { + color: @formErrorColor; +} + +/*-------------------- + Disabled +---------------------*/ + +.ui.form .disabled.fields .field, +.ui.form .disabled.field, +.ui.form .field :disabled { + pointer-events: none; + opacity: @disabledOpacity; +} +.ui.form .field.disabled > label, +.ui.form .fields.disabled > label { + opacity: @disabledLabelOpacity; +} +.ui.form .field.disabled :disabled { + opacity: 1; +} + + +/*-------------- + Loading +---------------*/ + +.ui.loading.form { + position: relative; + cursor: default; + pointer-events: none; +} +.ui.loading.form:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + z-index: @loaderDimmerZIndex; +} +.ui.loading.form:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: form-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes form-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Element Types +*******************************/ + +/*-------------------- + Required Field +---------------------*/ + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after, +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + margin: @requiredMargin; + content: @requiredContent; + color: @requiredColor; +} + +.ui.form .required.fields:not(.grouped) > .field > label:after, +.ui.form .required.fields.grouped > label:after, +.ui.form .required.field > label:after { + display: inline-block; + vertical-align: top; +} + +.ui.form .required.fields:not(.grouped) > .field > .checkbox:after, +.ui.form .required.field > .checkbox:after { + position: absolute; + top: 0%; + left: 100%; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------------- + Inverted Colors +---------------------*/ + +.ui.inverted.form label, +.ui.form .inverted.segment label, +.ui.form .inverted.segment .ui.checkbox label, +.ui.form .inverted.segment .ui.checkbox .box, +.ui.inverted.form .ui.checkbox label, +.ui.inverted.form .ui.checkbox .box, +.ui.inverted.form .inline.fields > label, +.ui.inverted.form .inline.fields .field > label, +.ui.inverted.form .inline.fields .field > p, +.ui.inverted.form .inline.field > label, +.ui.inverted.form .inline.field > p { + color: @invertedLabelColor; +} + +/* Inverted Field */ +.ui.inverted.form input:not([type]), +.ui.inverted.form input[type="date"], +.ui.inverted.form input[type="datetime-local"], +.ui.inverted.form input[type="email"], +.ui.inverted.form input[type="number"], +.ui.inverted.form input[type="password"], +.ui.inverted.form input[type="search"], +.ui.inverted.form input[type="tel"], +.ui.inverted.form input[type="time"], +.ui.inverted.form input[type="text"], +.ui.inverted.form input[type="file"], +.ui.inverted.form input[type="url"] { + background: @invertedInputBackground; + border-color: @invertedInputBorderColor; + color: @invertedInputColor; + box-shadow: @invertedInputBoxShadow; +} + + +/*-------------------- + Field Groups +---------------------*/ + +/* Grouped Vertically */ +.ui.form .grouped.fields { + display: block; + margin: @groupedMargin; +} +.ui.form .grouped.fields:last-child { + margin-bottom: 0em; +} + +.ui.form .grouped.fields > label { + margin: @groupedLabelMargin; + color: @groupedLabelColor; + font-size: @groupedLabelFontSize; + font-weight: @groupedLabelFontWeight; + text-transform: @groupedLabelTextTransform; +} + +.ui.form .grouped.fields .field, +.ui.form .grouped.inline.fields .field { + display: block; + margin: @groupedFieldMargin; + padding: 0em; +} + +/*-------------------- + Fields +---------------------*/ + +/* Split fields */ +.ui.form .fields { + display: flex; + flex-direction: row; + margin: @fieldsMargin; +} +.ui.form .fields > .field { + flex: 0 1 auto; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} +.ui.form .fields > .field:first-child { + border-left: none; + box-shadow: none; +} + +/* Other Combinations */ +.ui.form .two.fields > .fields, +.ui.form .two.fields > .field { + width: @twoColumn; +} +.ui.form .three.fields > .fields, +.ui.form .three.fields > .field { + width: @threeColumn; +} +.ui.form .four.fields > .fields, +.ui.form .four.fields > .field { + width: @fourColumn; +} +.ui.form .five.fields > .fields, +.ui.form .five.fields > .field { + width: @fiveColumn; +} +.ui.form .six.fields > .fields, +.ui.form .six.fields > .field { + width: @sixColumn; +} +.ui.form .seven.fields > .fields, +.ui.form .seven.fields > .field { + width: @sevenColumn; +} +.ui.form .eight.fields > .fields, +.ui.form .eight.fields > .field { + width: @eightColumn; +} +.ui.form .nine.fields > .fields, +.ui.form .nine.fields > .field { + width: @nineColumn; +} +.ui.form .ten.fields > .fields, +.ui.form .ten.fields > .field { + width: @tenColumn; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form .fields { + flex-wrap: wrap; + } + + .ui[class*="equal width"].form:not(.unstackable) .fields > .field, + .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field { + width: @oneColumn !important; + margin: 0em 0em @rowDistance; + } +} + + +/* Sizing Combinations */ +.ui.form .fields .wide.field { + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} + +.ui.form .one.wide.field { + width: @oneWide !important; +} +.ui.form .two.wide.field { + width: @twoWide !important; +} +.ui.form .three.wide.field { + width: @threeWide !important; +} +.ui.form .four.wide.field { + width: @fourWide !important; +} +.ui.form .five.wide.field { + width: @fiveWide !important; +} +.ui.form .six.wide.field { + width: @sixWide !important; +} +.ui.form .seven.wide.field { + width: @sevenWide !important; +} +.ui.form .eight.wide.field { + width: @eightWide !important; +} +.ui.form .nine.wide.field { + width: @nineWide !important; +} +.ui.form .ten.wide.field { + width: @tenWide !important; +} +.ui.form .eleven.wide.field { + width: @elevenWide !important; +} +.ui.form .twelve.wide.field { + width: @twelveWide !important; +} +.ui.form .thirteen.wide.field { + width: @thirteenWide !important; +} +.ui.form .fourteen.wide.field { + width: @fourteenWide !important; +} +.ui.form .fifteen.wide.field { + width: @fifteenWide !important; +} +.ui.form .sixteen.wide.field { + width: @sixteenWide !important; +} + +/* Swap to full width on mobile */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields, + .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field, + .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field { + width: @oneColumn !important; + } + .ui.form .fields { + margin-bottom: 0em; + } +} + +/*-------------------- + Equal Width +---------------------*/ + +.ui[class*="equal width"].form .fields > .field, +.ui.form [class*="equal width"].fields > .field { + width: 100%; + flex: 1 1 auto; +} + +/*-------------------- + Inline Fields +---------------------*/ + +.ui.form .inline.fields { + margin: @fieldMargin; + align-items: center; +} +.ui.form .inline.fields .field { + margin: 0em; + padding: @inlineFieldsMargin; +} + +/* Inline Label */ +.ui.form .inline.fields > label, +.ui.form .inline.fields .field > label, +.ui.form .inline.fields .field > p, +.ui.form .inline.field > label, +.ui.form .inline.field > p { + display: inline-block; + width: auto; + margin-top: 0em; + margin-bottom: 0em; + vertical-align: baseline; + font-size: @inlineLabelFontSize; + font-weight: @inlineLabelFontWeight; + color: @inlineLabelColor; + text-transform: @inlineLabelTextTransform; +} + +/* Grouped Inline Label */ +.ui.form .inline.fields > label { + margin: @groupedInlineLabelMargin; +} + +/* Inline Input */ +.ui.form .inline.fields .field > input, +.ui.form .inline.fields .field > select, +.ui.form .inline.field > input, +.ui.form .inline.field > select { + display: inline-block; + width: auto; + + margin-top: 0em; + margin-bottom: 0em; + + vertical-align: middle; + font-size: @inlineInputSize; +} + +/* Label */ +.ui.form .inline.fields .field > :first-child, +.ui.form .inline.field > :first-child { + margin: 0em @inlineLabelDistance 0em 0em; +} +.ui.form .inline.fields .field > :only-child, +.ui.form .inline.field > :only-child { + margin: 0em; +} + +/* Wide */ +.ui.form .inline.fields .wide.field { + display: flex; + align-items: center; +} +.ui.form .inline.fields .wide.field > input, +.ui.form .inline.fields .wide.field > select { + width: 100%; +} + + +/*-------------------- + Sizes +---------------------*/ + +.ui.mini.form { + font-size: @mini; +} +.ui.tiny.form { + font-size: @tiny; +} +.ui.small.form { + font-size: @small; +} +.ui.form { + font-size: @medium; +} +.ui.large.form { + font-size: @large; +} +.ui.big.form { + font-size: @big; +} +.ui.huge.form { + font-size: @huge; +} +.ui.massive.form { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/collections/grid.less b/static/semantic/src/definitions/collections/grid.less new file mode 100755 index 0000000..05c0a2b --- /dev/null +++ b/static/semantic/src/definitions/collections/grid.less @@ -0,0 +1,1920 @@ +/*! + * # Semantic UI - Grid + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'grid'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +.ui.grid { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: stretch; + padding: 0em; +} + +/*---------------------- + Remove Gutters +-----------------------*/ + +.ui.grid { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + margin-left: -(@gutterWidth / 2); + margin-right: -(@gutterWidth / 2); +} +.ui.relaxed.grid { + margin-left: -(@relaxedGutterWidth / 2); + margin-right: -(@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid { + margin-left: -(@veryRelaxedGutterWidth / 2); + margin-right: -(@veryRelaxedGutterWidth / 2); +} + + +/* Preserve Rows Spacing on Consecutive Grids */ +.ui.grid + .grid { + margin-top: @consecutiveGridDistance; +} + +/*------------------- + Columns +--------------------*/ + +/* Standard 16 column */ +.ui.grid > .column:not(.row), +.ui.grid > .row > .column { + position: relative; + display: inline-block; + + width: @oneWide; + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); + vertical-align: top; +} + +.ui.grid > * { + padding-left: (@gutterWidth / 2); + padding-right: (@gutterWidth / 2); +} + +/*------------------- + Rows +--------------------*/ + +.ui.grid > .row { + position: relative; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: inherit; + align-items: stretch; + width: 100% !important; + padding: 0rem; + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/*------------------- + Columns +--------------------*/ + +/* Vertical padding when no rows */ +.ui.grid > .column:not(.row) { + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} +.ui.grid > .row > .column { + margin-top: 0em; + margin-bottom: 0em; +} + +/*------------------- + Content +--------------------*/ + +.ui.grid > .row > img, +.ui.grid > .row > .column > img { + max-width: @columnMaxImageWidth; +} + +/*------------------- + Loose Coupling +--------------------*/ + +/* Collapse Margin on Consecutive Grid */ +.ui.grid > .ui.grid:first-child { + margin-top: 0em; +} +.ui.grid > .ui.grid:last-child { + margin-bottom: 0em; +} + +/* Segment inside Aligned Grid */ +.ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), +.ui.aligned.grid .column > .segment:not(.compact):not(.attached) { + width: 100%; +} + +/* Align Dividers with Gutter */ +.ui.grid .row + .ui.divider { + flex-grow: 1; + margin: (@rowSpacing / 2) (@gutterWidth / 2); +} +.ui.grid .column + .ui.vertical.divider { + height: calc(50% - (@rowSpacing / 2)); +} + +/* Remove Border on Last Horizontal Segment */ +.ui.grid > .row > .column:last-child > .horizontal.segment, +.ui.grid > .column:last-child > .horizontal.segment { + box-shadow: none; +} + +/******************************* + Variations +*******************************/ + + +/*----------------------- + Page Grid +-------------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.page.grid { + width: @mobileWidth; + padding-left: @mobileGutter; + padding-right: @mobileGutter; + margin-left: 0em; + margin-right: 0em; + } +} +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.page.grid { + width: @tabletWidth; + margin-left: @tabletMargin; + margin-right: @tabletMargin; + padding-left: @tabletGutter; + padding-right: @tabletGutter; + } +} +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.page.grid { + width: @computerWidth; + margin-left: @computerMargin; + margin-right: @computerMargin; + padding-left: @computerGutter; + padding-right: @computerGutter; + } +} +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui.page.grid { + width: @largeMonitorWidth; + margin-left: @largeMonitorMargin; + margin-right: @largeMonitorMargin; + padding-left: @largeMonitorGutter; + padding-right: @largeMonitorGutter; + } +} +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.page.grid { + width: @widescreenMonitorWidth; + margin-left: @widescreenMargin; + margin-right: @widescreenMargin; + padding-left: @widescreenMonitorGutter; + padding-right: @widescreenMonitorGutter; + } +} + + +/*------------------- + Column Count +--------------------*/ + +/* Assume full width with one column */ +.ui.grid > .column:only-child, +.ui.grid > .row > .column:only-child { + width: @oneColumn; +} + +/* Grid Based */ +.ui[class*="one column"].grid > .row > .column, +.ui[class*="one column"].grid > .column:not(.row) { + width: @oneColumn; +} +.ui[class*="two column"].grid > .row > .column, +.ui[class*="two column"].grid > .column:not(.row) { + width: @twoColumn; +} +.ui[class*="three column"].grid > .row > .column, +.ui[class*="three column"].grid > .column:not(.row) { + width: @threeColumn; +} +.ui[class*="four column"].grid > .row > .column, +.ui[class*="four column"].grid > .column:not(.row) { + width: @fourColumn; +} +.ui[class*="five column"].grid > .row > .column, +.ui[class*="five column"].grid > .column:not(.row) { + width: @fiveColumn; +} +.ui[class*="six column"].grid > .row > .column, +.ui[class*="six column"].grid > .column:not(.row) { + width: @sixColumn; +} +.ui[class*="seven column"].grid > .row > .column, +.ui[class*="seven column"].grid > .column:not(.row) { + width: @sevenColumn; +} +.ui[class*="eight column"].grid > .row > .column, +.ui[class*="eight column"].grid > .column:not(.row) { + width: @eightColumn; +} +.ui[class*="nine column"].grid > .row > .column, +.ui[class*="nine column"].grid > .column:not(.row) { + width: @nineColumn; +} +.ui[class*="ten column"].grid > .row > .column, +.ui[class*="ten column"].grid > .column:not(.row) { + width: @tenColumn; +} +.ui[class*="eleven column"].grid > .row > .column, +.ui[class*="eleven column"].grid > .column:not(.row) { + width: @elevenColumn; +} +.ui[class*="twelve column"].grid > .row > .column, +.ui[class*="twelve column"].grid > .column:not(.row) { + width: @twelveColumn; +} +.ui[class*="thirteen column"].grid > .row > .column, +.ui[class*="thirteen column"].grid > .column:not(.row) { + width: @thirteenColumn; +} +.ui[class*="fourteen column"].grid > .row > .column, +.ui[class*="fourteen column"].grid > .column:not(.row) { + width: @fourteenColumn; +} +.ui[class*="fifteen column"].grid > .row > .column, +.ui[class*="fifteen column"].grid > .column:not(.row) { + width: @fifteenColumn; +} +.ui[class*="sixteen column"].grid > .row > .column, +.ui[class*="sixteen column"].grid > .column:not(.row) { + width: @sixteenColumn; +} + +/* Row Based Overrides */ +.ui.grid > [class*="one column"].row > .column { + width: @oneColumn !important; +} +.ui.grid > [class*="two column"].row > .column { + width: @twoColumn !important; +} +.ui.grid > [class*="three column"].row > .column { + width: @threeColumn !important; +} +.ui.grid > [class*="four column"].row > .column { + width: @fourColumn !important; +} +.ui.grid > [class*="five column"].row > .column { + width: @fiveColumn !important; +} +.ui.grid > [class*="six column"].row > .column { + width: @sixColumn !important; +} +.ui.grid > [class*="seven column"].row > .column { + width: @sevenColumn !important; +} +.ui.grid > [class*="eight column"].row > .column { + width: @eightColumn !important; +} +.ui.grid > [class*="nine column"].row > .column { + width: @nineColumn !important; +} +.ui.grid > [class*="ten column"].row > .column { + width: @tenColumn !important; +} +.ui.grid > [class*="eleven column"].row > .column { + width: @elevenColumn !important; +} +.ui.grid > [class*="twelve column"].row > .column { + width: @twelveColumn !important; +} +.ui.grid > [class*="thirteen column"].row > .column { + width: @thirteenColumn !important; +} +.ui.grid > [class*="fourteen column"].row > .column { + width: @fourteenColumn !important; +} +.ui.grid > [class*="fifteen column"].row > .column { + width: @fifteenColumn !important; +} +.ui.grid > [class*="sixteen column"].row > .column { + width: @sixteenColumn !important; +} + +/* Celled Page */ +.ui.celled.page.grid { + box-shadow: none; +} + +/*------------------- + Column Width +--------------------*/ + +/* Sizing Combinations */ +.ui.grid > .row > [class*="one wide"].column, +.ui.grid > .column.row > [class*="one wide"].column, +.ui.grid > [class*="one wide"].column, +.ui.column.grid > [class*="one wide"].column { + width: @oneWide !important; +} +.ui.grid > .row > [class*="two wide"].column, +.ui.grid > .column.row > [class*="two wide"].column, +.ui.grid > [class*="two wide"].column, +.ui.column.grid > [class*="two wide"].column { + width: @twoWide !important; +} +.ui.grid > .row > [class*="three wide"].column, +.ui.grid > .column.row > [class*="three wide"].column, +.ui.grid > [class*="three wide"].column, +.ui.column.grid > [class*="three wide"].column { + width: @threeWide !important; +} +.ui.grid > .row > [class*="four wide"].column, +.ui.grid > .column.row > [class*="four wide"].column, +.ui.grid > [class*="four wide"].column, +.ui.column.grid > [class*="four wide"].column { + width: @fourWide !important; +} +.ui.grid > .row > [class*="five wide"].column, +.ui.grid > .column.row > [class*="five wide"].column, +.ui.grid > [class*="five wide"].column, +.ui.column.grid > [class*="five wide"].column { + width: @fiveWide !important; +} +.ui.grid > .row > [class*="six wide"].column, +.ui.grid > .column.row > [class*="six wide"].column, +.ui.grid > [class*="six wide"].column, +.ui.column.grid > [class*="six wide"].column { + width: @sixWide !important; +} +.ui.grid > .row > [class*="seven wide"].column, +.ui.grid > .column.row > [class*="seven wide"].column, +.ui.grid > [class*="seven wide"].column, +.ui.column.grid > [class*="seven wide"].column { + width: @sevenWide !important; +} +.ui.grid > .row > [class*="eight wide"].column, +.ui.grid > .column.row > [class*="eight wide"].column, +.ui.grid > [class*="eight wide"].column, +.ui.column.grid > [class*="eight wide"].column { + width: @eightWide !important; +} +.ui.grid > .row > [class*="nine wide"].column, +.ui.grid > .column.row > [class*="nine wide"].column, +.ui.grid > [class*="nine wide"].column, +.ui.column.grid > [class*="nine wide"].column { + width: @nineWide !important; +} +.ui.grid > .row > [class*="ten wide"].column, +.ui.grid > .column.row > [class*="ten wide"].column, +.ui.grid > [class*="ten wide"].column, +.ui.column.grid > [class*="ten wide"].column { + width: @tenWide !important; +} +.ui.grid > .row > [class*="eleven wide"].column, +.ui.grid > .column.row > [class*="eleven wide"].column, +.ui.grid > [class*="eleven wide"].column, +.ui.column.grid > [class*="eleven wide"].column { + width: @elevenWide !important; +} +.ui.grid > .row > [class*="twelve wide"].column, +.ui.grid > .column.row > [class*="twelve wide"].column, +.ui.grid > [class*="twelve wide"].column, +.ui.column.grid > [class*="twelve wide"].column { + width: @twelveWide !important; +} +.ui.grid > .row > [class*="thirteen wide"].column, +.ui.grid > .column.row > [class*="thirteen wide"].column, +.ui.grid > [class*="thirteen wide"].column, +.ui.column.grid > [class*="thirteen wide"].column { + width: @thirteenWide !important; +} +.ui.grid > .row > [class*="fourteen wide"].column, +.ui.grid > .column.row > [class*="fourteen wide"].column, +.ui.grid > [class*="fourteen wide"].column, +.ui.column.grid > [class*="fourteen wide"].column { + width: @fourteenWide !important; +} +.ui.grid > .row > [class*="fifteen wide"].column, +.ui.grid > .column.row > [class*="fifteen wide"].column, +.ui.grid > [class*="fifteen wide"].column, +.ui.column.grid > [class*="fifteen wide"].column { + width: @fifteenWide !important; +} +.ui.grid > .row > [class*="sixteen wide"].column, +.ui.grid > .column.row > [class*="sixteen wide"].column, +.ui.grid > [class*="sixteen wide"].column, +.ui.column.grid > [class*="sixteen wide"].column { + width: @sixteenWide !important; +} + +/*---------------------- + Width per Device +-----------------------*/ + +/* Mobile Sizing Combinations */ +@media only screen and (min-width: @mobileBreakpoint) and (max-width: @largestMobileScreen) { + .ui.grid > .row > [class*="one wide mobile"].column, + .ui.grid > .column.row > [class*="one wide mobile"].column, + .ui.grid > [class*="one wide mobile"].column, + .ui.column.grid > [class*="one wide mobile"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide mobile"].column, + .ui.grid > .column.row > [class*="two wide mobile"].column, + .ui.grid > [class*="two wide mobile"].column, + .ui.column.grid > [class*="two wide mobile"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide mobile"].column, + .ui.grid > .column.row > [class*="three wide mobile"].column, + .ui.grid > [class*="three wide mobile"].column, + .ui.column.grid > [class*="three wide mobile"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide mobile"].column, + .ui.grid > .column.row > [class*="four wide mobile"].column, + .ui.grid > [class*="four wide mobile"].column, + .ui.column.grid > [class*="four wide mobile"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide mobile"].column, + .ui.grid > .column.row > [class*="five wide mobile"].column, + .ui.grid > [class*="five wide mobile"].column, + .ui.column.grid > [class*="five wide mobile"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide mobile"].column, + .ui.grid > .column.row > [class*="six wide mobile"].column, + .ui.grid > [class*="six wide mobile"].column, + .ui.column.grid > [class*="six wide mobile"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide mobile"].column, + .ui.grid > .column.row > [class*="seven wide mobile"].column, + .ui.grid > [class*="seven wide mobile"].column, + .ui.column.grid > [class*="seven wide mobile"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide mobile"].column, + .ui.grid > .column.row > [class*="eight wide mobile"].column, + .ui.grid > [class*="eight wide mobile"].column, + .ui.column.grid > [class*="eight wide mobile"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide mobile"].column, + .ui.grid > .column.row > [class*="nine wide mobile"].column, + .ui.grid > [class*="nine wide mobile"].column, + .ui.column.grid > [class*="nine wide mobile"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide mobile"].column, + .ui.grid > .column.row > [class*="ten wide mobile"].column, + .ui.grid > [class*="ten wide mobile"].column, + .ui.column.grid > [class*="ten wide mobile"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide mobile"].column, + .ui.grid > .column.row > [class*="eleven wide mobile"].column, + .ui.grid > [class*="eleven wide mobile"].column, + .ui.column.grid > [class*="eleven wide mobile"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide mobile"].column, + .ui.grid > .column.row > [class*="twelve wide mobile"].column, + .ui.grid > [class*="twelve wide mobile"].column, + .ui.column.grid > [class*="twelve wide mobile"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide mobile"].column, + .ui.grid > .column.row > [class*="thirteen wide mobile"].column, + .ui.grid > [class*="thirteen wide mobile"].column, + .ui.column.grid > [class*="thirteen wide mobile"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide mobile"].column, + .ui.grid > .column.row > [class*="fourteen wide mobile"].column, + .ui.grid > [class*="fourteen wide mobile"].column, + .ui.column.grid > [class*="fourteen wide mobile"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide mobile"].column, + .ui.grid > .column.row > [class*="fifteen wide mobile"].column, + .ui.grid > [class*="fifteen wide mobile"].column, + .ui.column.grid > [class*="fifteen wide mobile"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide mobile"].column, + .ui.grid > .column.row > [class*="sixteen wide mobile"].column, + .ui.grid > [class*="sixteen wide mobile"].column, + .ui.column.grid > [class*="sixteen wide mobile"].column { + width: @sixteenWide !important; + } +} + +/* Tablet Sizing Combinations */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.grid > .row > [class*="one wide tablet"].column, + .ui.grid > .column.row > [class*="one wide tablet"].column, + .ui.grid > [class*="one wide tablet"].column, + .ui.column.grid > [class*="one wide tablet"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide tablet"].column, + .ui.grid > .column.row > [class*="two wide tablet"].column, + .ui.grid > [class*="two wide tablet"].column, + .ui.column.grid > [class*="two wide tablet"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide tablet"].column, + .ui.grid > .column.row > [class*="three wide tablet"].column, + .ui.grid > [class*="three wide tablet"].column, + .ui.column.grid > [class*="three wide tablet"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide tablet"].column, + .ui.grid > .column.row > [class*="four wide tablet"].column, + .ui.grid > [class*="four wide tablet"].column, + .ui.column.grid > [class*="four wide tablet"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide tablet"].column, + .ui.grid > .column.row > [class*="five wide tablet"].column, + .ui.grid > [class*="five wide tablet"].column, + .ui.column.grid > [class*="five wide tablet"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide tablet"].column, + .ui.grid > .column.row > [class*="six wide tablet"].column, + .ui.grid > [class*="six wide tablet"].column, + .ui.column.grid > [class*="six wide tablet"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide tablet"].column, + .ui.grid > .column.row > [class*="seven wide tablet"].column, + .ui.grid > [class*="seven wide tablet"].column, + .ui.column.grid > [class*="seven wide tablet"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide tablet"].column, + .ui.grid > .column.row > [class*="eight wide tablet"].column, + .ui.grid > [class*="eight wide tablet"].column, + .ui.column.grid > [class*="eight wide tablet"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide tablet"].column, + .ui.grid > .column.row > [class*="nine wide tablet"].column, + .ui.grid > [class*="nine wide tablet"].column, + .ui.column.grid > [class*="nine wide tablet"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide tablet"].column, + .ui.grid > .column.row > [class*="ten wide tablet"].column, + .ui.grid > [class*="ten wide tablet"].column, + .ui.column.grid > [class*="ten wide tablet"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide tablet"].column, + .ui.grid > .column.row > [class*="eleven wide tablet"].column, + .ui.grid > [class*="eleven wide tablet"].column, + .ui.column.grid > [class*="eleven wide tablet"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide tablet"].column, + .ui.grid > .column.row > [class*="twelve wide tablet"].column, + .ui.grid > [class*="twelve wide tablet"].column, + .ui.column.grid > [class*="twelve wide tablet"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide tablet"].column, + .ui.grid > .column.row > [class*="thirteen wide tablet"].column, + .ui.grid > [class*="thirteen wide tablet"].column, + .ui.column.grid > [class*="thirteen wide tablet"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide tablet"].column, + .ui.grid > .column.row > [class*="fourteen wide tablet"].column, + .ui.grid > [class*="fourteen wide tablet"].column, + .ui.column.grid > [class*="fourteen wide tablet"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide tablet"].column, + .ui.grid > .column.row > [class*="fifteen wide tablet"].column, + .ui.grid > [class*="fifteen wide tablet"].column, + .ui.column.grid > [class*="fifteen wide tablet"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide tablet"].column, + .ui.grid > .column.row > [class*="sixteen wide tablet"].column, + .ui.grid > [class*="sixteen wide tablet"].column, + .ui.column.grid > [class*="sixteen wide tablet"].column { + width: @sixteenWide !important; + } +} + +/* Computer/Desktop Sizing Combinations */ +@media only screen and (min-width: @computerBreakpoint) { + .ui.grid > .row > [class*="one wide computer"].column, + .ui.grid > .column.row > [class*="one wide computer"].column, + .ui.grid > [class*="one wide computer"].column, + .ui.column.grid > [class*="one wide computer"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide computer"].column, + .ui.grid > .column.row > [class*="two wide computer"].column, + .ui.grid > [class*="two wide computer"].column, + .ui.column.grid > [class*="two wide computer"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide computer"].column, + .ui.grid > .column.row > [class*="three wide computer"].column, + .ui.grid > [class*="three wide computer"].column, + .ui.column.grid > [class*="three wide computer"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide computer"].column, + .ui.grid > .column.row > [class*="four wide computer"].column, + .ui.grid > [class*="four wide computer"].column, + .ui.column.grid > [class*="four wide computer"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide computer"].column, + .ui.grid > .column.row > [class*="five wide computer"].column, + .ui.grid > [class*="five wide computer"].column, + .ui.column.grid > [class*="five wide computer"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide computer"].column, + .ui.grid > .column.row > [class*="six wide computer"].column, + .ui.grid > [class*="six wide computer"].column, + .ui.column.grid > [class*="six wide computer"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide computer"].column, + .ui.grid > .column.row > [class*="seven wide computer"].column, + .ui.grid > [class*="seven wide computer"].column, + .ui.column.grid > [class*="seven wide computer"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide computer"].column, + .ui.grid > .column.row > [class*="eight wide computer"].column, + .ui.grid > [class*="eight wide computer"].column, + .ui.column.grid > [class*="eight wide computer"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide computer"].column, + .ui.grid > .column.row > [class*="nine wide computer"].column, + .ui.grid > [class*="nine wide computer"].column, + .ui.column.grid > [class*="nine wide computer"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide computer"].column, + .ui.grid > .column.row > [class*="ten wide computer"].column, + .ui.grid > [class*="ten wide computer"].column, + .ui.column.grid > [class*="ten wide computer"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide computer"].column, + .ui.grid > .column.row > [class*="eleven wide computer"].column, + .ui.grid > [class*="eleven wide computer"].column, + .ui.column.grid > [class*="eleven wide computer"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide computer"].column, + .ui.grid > .column.row > [class*="twelve wide computer"].column, + .ui.grid > [class*="twelve wide computer"].column, + .ui.column.grid > [class*="twelve wide computer"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide computer"].column, + .ui.grid > .column.row > [class*="thirteen wide computer"].column, + .ui.grid > [class*="thirteen wide computer"].column, + .ui.column.grid > [class*="thirteen wide computer"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide computer"].column, + .ui.grid > .column.row > [class*="fourteen wide computer"].column, + .ui.grid > [class*="fourteen wide computer"].column, + .ui.column.grid > [class*="fourteen wide computer"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide computer"].column, + .ui.grid > .column.row > [class*="fifteen wide computer"].column, + .ui.grid > [class*="fifteen wide computer"].column, + .ui.column.grid > [class*="fifteen wide computer"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide computer"].column, + .ui.grid > .column.row > [class*="sixteen wide computer"].column, + .ui.grid > [class*="sixteen wide computer"].column, + .ui.column.grid > [class*="sixteen wide computer"].column { + width: @sixteenWide !important; + } +} + +/* Large Monitor Sizing Combinations */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor){ + .ui.grid > .row > [class*="one wide large screen"].column, + .ui.grid > .column.row > [class*="one wide large screen"].column, + .ui.grid > [class*="one wide large screen"].column, + .ui.column.grid > [class*="one wide large screen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide large screen"].column, + .ui.grid > .column.row > [class*="two wide large screen"].column, + .ui.grid > [class*="two wide large screen"].column, + .ui.column.grid > [class*="two wide large screen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide large screen"].column, + .ui.grid > .column.row > [class*="three wide large screen"].column, + .ui.grid > [class*="three wide large screen"].column, + .ui.column.grid > [class*="three wide large screen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide large screen"].column, + .ui.grid > .column.row > [class*="four wide large screen"].column, + .ui.grid > [class*="four wide large screen"].column, + .ui.column.grid > [class*="four wide large screen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide large screen"].column, + .ui.grid > .column.row > [class*="five wide large screen"].column, + .ui.grid > [class*="five wide large screen"].column, + .ui.column.grid > [class*="five wide large screen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide large screen"].column, + .ui.grid > .column.row > [class*="six wide large screen"].column, + .ui.grid > [class*="six wide large screen"].column, + .ui.column.grid > [class*="six wide large screen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide large screen"].column, + .ui.grid > .column.row > [class*="seven wide large screen"].column, + .ui.grid > [class*="seven wide large screen"].column, + .ui.column.grid > [class*="seven wide large screen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide large screen"].column, + .ui.grid > .column.row > [class*="eight wide large screen"].column, + .ui.grid > [class*="eight wide large screen"].column, + .ui.column.grid > [class*="eight wide large screen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide large screen"].column, + .ui.grid > .column.row > [class*="nine wide large screen"].column, + .ui.grid > [class*="nine wide large screen"].column, + .ui.column.grid > [class*="nine wide large screen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide large screen"].column, + .ui.grid > .column.row > [class*="ten wide large screen"].column, + .ui.grid > [class*="ten wide large screen"].column, + .ui.column.grid > [class*="ten wide large screen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide large screen"].column, + .ui.grid > .column.row > [class*="eleven wide large screen"].column, + .ui.grid > [class*="eleven wide large screen"].column, + .ui.column.grid > [class*="eleven wide large screen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide large screen"].column, + .ui.grid > .column.row > [class*="twelve wide large screen"].column, + .ui.grid > [class*="twelve wide large screen"].column, + .ui.column.grid > [class*="twelve wide large screen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide large screen"].column, + .ui.grid > .column.row > [class*="thirteen wide large screen"].column, + .ui.grid > [class*="thirteen wide large screen"].column, + .ui.column.grid > [class*="thirteen wide large screen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide large screen"].column, + .ui.grid > .column.row > [class*="fourteen wide large screen"].column, + .ui.grid > [class*="fourteen wide large screen"].column, + .ui.column.grid > [class*="fourteen wide large screen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide large screen"].column, + .ui.grid > .column.row > [class*="fifteen wide large screen"].column, + .ui.grid > [class*="fifteen wide large screen"].column, + .ui.column.grid > [class*="fifteen wide large screen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide large screen"].column, + .ui.grid > .column.row > [class*="sixteen wide large screen"].column, + .ui.grid > [class*="sixteen wide large screen"].column, + .ui.column.grid > [class*="sixteen wide large screen"].column { + width: @sixteenWide !important; + } +} + +/* Widescreen Sizing Combinations */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.grid > .row > [class*="one wide widescreen"].column, + .ui.grid > .column.row > [class*="one wide widescreen"].column, + .ui.grid > [class*="one wide widescreen"].column, + .ui.column.grid > [class*="one wide widescreen"].column { + width: @oneWide !important; + } + .ui.grid > .row > [class*="two wide widescreen"].column, + .ui.grid > .column.row > [class*="two wide widescreen"].column, + .ui.grid > [class*="two wide widescreen"].column, + .ui.column.grid > [class*="two wide widescreen"].column { + width: @twoWide !important; + } + .ui.grid > .row > [class*="three wide widescreen"].column, + .ui.grid > .column.row > [class*="three wide widescreen"].column, + .ui.grid > [class*="three wide widescreen"].column, + .ui.column.grid > [class*="three wide widescreen"].column { + width: @threeWide !important; + } + .ui.grid > .row > [class*="four wide widescreen"].column, + .ui.grid > .column.row > [class*="four wide widescreen"].column, + .ui.grid > [class*="four wide widescreen"].column, + .ui.column.grid > [class*="four wide widescreen"].column { + width: @fourWide !important; + } + .ui.grid > .row > [class*="five wide widescreen"].column, + .ui.grid > .column.row > [class*="five wide widescreen"].column, + .ui.grid > [class*="five wide widescreen"].column, + .ui.column.grid > [class*="five wide widescreen"].column { + width: @fiveWide !important; + } + .ui.grid > .row > [class*="six wide widescreen"].column, + .ui.grid > .column.row > [class*="six wide widescreen"].column, + .ui.grid > [class*="six wide widescreen"].column, + .ui.column.grid > [class*="six wide widescreen"].column { + width: @sixWide !important; + } + .ui.grid > .row > [class*="seven wide widescreen"].column, + .ui.grid > .column.row > [class*="seven wide widescreen"].column, + .ui.grid > [class*="seven wide widescreen"].column, + .ui.column.grid > [class*="seven wide widescreen"].column { + width: @sevenWide !important; + } + .ui.grid > .row > [class*="eight wide widescreen"].column, + .ui.grid > .column.row > [class*="eight wide widescreen"].column, + .ui.grid > [class*="eight wide widescreen"].column, + .ui.column.grid > [class*="eight wide widescreen"].column { + width: @eightWide !important; + } + .ui.grid > .row > [class*="nine wide widescreen"].column, + .ui.grid > .column.row > [class*="nine wide widescreen"].column, + .ui.grid > [class*="nine wide widescreen"].column, + .ui.column.grid > [class*="nine wide widescreen"].column { + width: @nineWide !important; + } + .ui.grid > .row > [class*="ten wide widescreen"].column, + .ui.grid > .column.row > [class*="ten wide widescreen"].column, + .ui.grid > [class*="ten wide widescreen"].column, + .ui.column.grid > [class*="ten wide widescreen"].column { + width: @tenWide !important; + } + .ui.grid > .row > [class*="eleven wide widescreen"].column, + .ui.grid > .column.row > [class*="eleven wide widescreen"].column, + .ui.grid > [class*="eleven wide widescreen"].column, + .ui.column.grid > [class*="eleven wide widescreen"].column { + width: @elevenWide !important; + } + .ui.grid > .row > [class*="twelve wide widescreen"].column, + .ui.grid > .column.row > [class*="twelve wide widescreen"].column, + .ui.grid > [class*="twelve wide widescreen"].column, + .ui.column.grid > [class*="twelve wide widescreen"].column { + width: @twelveWide !important; + } + .ui.grid > .row > [class*="thirteen wide widescreen"].column, + .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, + .ui.grid > [class*="thirteen wide widescreen"].column, + .ui.column.grid > [class*="thirteen wide widescreen"].column { + width: @thirteenWide !important; + } + .ui.grid > .row > [class*="fourteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, + .ui.grid > [class*="fourteen wide widescreen"].column, + .ui.column.grid > [class*="fourteen wide widescreen"].column { + width: @fourteenWide !important; + } + .ui.grid > .row > [class*="fifteen wide widescreen"].column, + .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, + .ui.grid > [class*="fifteen wide widescreen"].column, + .ui.column.grid > [class*="fifteen wide widescreen"].column { + width: @fifteenWide !important; + } + .ui.grid > .row > [class*="sixteen wide widescreen"].column, + .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, + .ui.grid > [class*="sixteen wide widescreen"].column, + .ui.column.grid > [class*="sixteen wide widescreen"].column { + width: @sixteenWide !important; + } +} + +/*---------------------- + Centered +-----------------------*/ + +.ui.centered.grid, +.ui.centered.grid > .row, +.ui.grid > .centered.row { + text-align: center; + justify-content: center; +} +.ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), +.ui.centered.grid > .row > .column:not(.aligned):not(.justified), +.ui.grid .centered.row > .column:not(.aligned):not(.justified) { + text-align: left; +} + +.ui.grid > .centered.column, +.ui.grid > .row > .centered.column { + display: block; + margin-left: auto; + margin-right: auto; +} + +/*---------------------- + Relaxed +-----------------------*/ + +.ui.relaxed.grid > .column:not(.row), +.ui.relaxed.grid > .row > .column, +.ui.grid > .relaxed.row > .column { + padding-left: (@relaxedGutterWidth / 2); + padding-right: (@relaxedGutterWidth / 2); +} + +.ui[class*="very relaxed"].grid > .column:not(.row), +.ui[class*="very relaxed"].grid > .row > .column, +.ui.grid > [class*="very relaxed"].row > .column { + padding-left: (@veryRelaxedGutterWidth / 2); + padding-right: (@veryRelaxedGutterWidth / 2); +} + +/* Coupling with UI Divider */ +.ui.relaxed.grid .row + .ui.divider, +.ui.grid .relaxed.row + .ui.divider { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); +} +.ui[class*="very relaxed"].grid .row + .ui.divider, +.ui.grid [class*="very relaxed"].row + .ui.divider { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); +} + + +/*---------------------- + Padded +-----------------------*/ + +.ui.padded.grid:not(.vertically):not(.horizontally) { + margin: 0em !important; +} +[class*="horizontally padded"].ui.grid { + margin-left: 0em !important; + margin-right: 0em !important; +} +[class*="vertically padded"].ui.grid { + margin-top: 0em !important; + margin-bottom: 0em !important; +} + +/*---------------------- + "Floated" +-----------------------*/ + +.ui.grid [class*="left floated"].column { + margin-right: auto; +} +.ui.grid [class*="right floated"].column { + margin-left: auto; +} + + +/*---------------------- + Divided +-----------------------*/ + +.ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedBorder; +} + +/* Swap from padding to margin on columns to have dividers align */ +.ui[class*="vertically divided"].grid > .column:not(.row), +.ui[class*="vertically divided"].grid > .row > .column { + margin-top: (@rowSpacing / 2); + margin-bottom: (@rowSpacing / 2); + padding-top: 0rem; + padding-bottom: 0rem; +} +.ui[class*="vertically divided"].grid > .row { + margin-top: 0em; + margin-bottom: 0em; +} + + + +/* No divider on first column on row */ +.ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, +.ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} + +/* No space on top of first row */ +.ui[class*="vertically divided"].grid > .row:first-child > .column { + margin-top: 0em; +} + + +/* Divided Row */ +.ui.grid > .divided.row > .column { + box-shadow: @dividedBorder; +} +.ui.grid > .divided.row > .column:first-child { + box-shadow: none; +} + +/* Vertically Divided */ +.ui[class*="vertically divided"].grid > .row { + position: relative; +} +.ui[class*="vertically divided"].grid > .row:before { + position: absolute; + content: ""; + top: 0em; + left: 0px; + + width: calc(100% - @gutterWidth); + height: 1px; + + margin: 0% (@gutterWidth / 2); + box-shadow: @verticallyDividedBorder; +} + +/* Padded Horizontally Divided */ +[class*="horizontally padded"].ui.divided.grid, +.ui.padded.divided.grid:not(.vertically):not(.horizontally) { + width: 100%; +} + +/* First Row Vertically Divided */ +.ui[class*="vertically divided"].grid > .row:first-child:before { + box-shadow: none; +} + +/* Inverted Divided */ +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row), +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column { + box-shadow: @dividedInvertedBorder; +} +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .column:not(.row):first-child, +.ui.inverted.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: none; +} +.ui.inverted[class*="vertically divided"].grid > .row:before { + box-shadow: @verticallyDividedInvertedBorder; +} + +/* Relaxed */ +.ui.relaxed[class*="vertically divided"].grid > .row:before { + margin-left: (@relaxedGutterWidth / 2); + margin-right: (@relaxedGutterWidth / 2); + width: calc(100% - @relaxedGutterWidth); +} +.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { + margin-left: (@veryRelaxedGutterWidth / 2); + margin-right: (@veryRelaxedGutterWidth / 2); + width: calc(100% - @veryRelaxedGutterWidth); +} + +/*---------------------- + Celled +-----------------------*/ + +.ui.celled.grid { + width: 100%; + margin: @celledMargin; + box-shadow: @celledGridDivider; +} + +.ui.celled.grid > .row { + width: 100% !important; + margin: 0em; + padding: 0em; + box-shadow: @celledRowDivider; +} +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + box-shadow: @celledColumnDivider; +} + +.ui.celled.grid > .column:first-child, +.ui.celled.grid > .row > .column:first-child { + box-shadow: none; +} + +.ui.celled.grid > .column:not(.row), +.ui.celled.grid > .row > .column { + padding: @celledPadding; +} +.ui.relaxed.celled.grid > .column:not(.row), +.ui.relaxed.celled.grid > .row > .column { + padding: @celledRelaxedPadding; +} +.ui[class*="very relaxed"].celled.grid > .column:not(.row), +.ui[class*="very relaxed"].celled.grid > .row > .column { + padding: @celledVeryRelaxedPadding; +} + +/* Internally Celled */ +.ui[class*="internally celled"].grid { + box-shadow: none; + margin: 0em; +} +.ui[class*="internally celled"].grid > .row:first-child { + box-shadow: none; +} +.ui[class*="internally celled"].grid > .row > .column:first-child { + box-shadow: none; +} + +/*---------------------- + Vertically Aligned +-----------------------*/ + +/* Top Aligned */ +.ui[class*="top aligned"].grid > .column:not(.row), +.ui[class*="top aligned"].grid > .row > .column, +.ui.grid > [class*="top aligned"].row > .column, +.ui.grid > [class*="top aligned"].column:not(.row), +.ui.grid > .row > [class*="top aligned"].column { + flex-direction: column; + vertical-align: top; + align-self: flex-start !important; +} + +/* Middle Aligned */ +.ui[class*="middle aligned"].grid > .column:not(.row), +.ui[class*="middle aligned"].grid > .row > .column, +.ui.grid > [class*="middle aligned"].row > .column, +.ui.grid > [class*="middle aligned"].column:not(.row), +.ui.grid > .row > [class*="middle aligned"].column { + flex-direction: column; + vertical-align: middle; + align-self: center !important; +} + +/* Bottom Aligned */ +.ui[class*="bottom aligned"].grid > .column:not(.row), +.ui[class*="bottom aligned"].grid > .row > .column, +.ui.grid > [class*="bottom aligned"].row > .column, +.ui.grid > [class*="bottom aligned"].column:not(.row), +.ui.grid > .row > [class*="bottom aligned"].column { + flex-direction: column; + vertical-align: bottom; + align-self: flex-end !important; +} + +/* Stretched */ +.ui.stretched.grid > .row > .column, +.ui.stretched.grid > .column, +.ui.grid > .stretched.row > .column, +.ui.grid > .stretched.column:not(.row), +.ui.grid > .row > .stretched.column { + display: inline-flex !important; + align-self: stretch; + flex-direction: column; +} + +.ui.stretched.grid > .row > .column > *, +.ui.stretched.grid > .column > *, +.ui.grid > .stretched.row > .column > *, +.ui.grid > .stretched.column:not(.row) > *, +.ui.grid > .row > .stretched.column > * { + flex-grow: 1; +} + +/*---------------------- + Horizontally Centered +-----------------------*/ + +/* Left Aligned */ +.ui[class*="left aligned"].grid > .column, +.ui[class*="left aligned"].grid > .row > .column, +.ui.grid > [class*="left aligned"].row > .column, +.ui.grid > [class*="left aligned"].column.column, +.ui.grid > .row > [class*="left aligned"].column.column { + text-align: left; + align-self: inherit; +} + +/* Center Aligned */ +.ui[class*="center aligned"].grid > .column, +.ui[class*="center aligned"].grid > .row > .column, +.ui.grid > [class*="center aligned"].row > .column, +.ui.grid > [class*="center aligned"].column.column, +.ui.grid > .row > [class*="center aligned"].column.column { + text-align: center; + align-self: inherit; +} +.ui[class*="center aligned"].grid { + justify-content: center; +} + +/* Right Aligned */ +.ui[class*="right aligned"].grid > .column, +.ui[class*="right aligned"].grid > .row > .column, +.ui.grid > [class*="right aligned"].row > .column, +.ui.grid > [class*="right aligned"].column.column, +.ui.grid > .row > [class*="right aligned"].column.column { + text-align: right; + align-self: inherit; +} + +/* Justified */ +.ui.justified.grid > .column, +.ui.justified.grid > .row > .column, +.ui.grid > .justified.row > .column, +.ui.grid > .justified.column.column, +.ui.grid > .row > .justified.column.column { + text-align: justify; + hyphens: auto; +} + +/*---------------------- + Colored +-----------------------*/ + +.ui.grid > .row > .red.column, +.ui.grid > .row > .orange.column, +.ui.grid > .row > .yellow.column, +.ui.grid > .row > .olive.column, +.ui.grid > .row > .green.column, +.ui.grid > .row > .teal.column, +.ui.grid > .row > .blue.column, +.ui.grid > .row > .violet.column, +.ui.grid > .row > .purple.column, +.ui.grid > .row > .pink.column, +.ui.grid > .row > .brown.column, +.ui.grid > .row > .grey.column, +.ui.grid > .row > .black.column { + margin-top: -(@rowSpacing / 2); + margin-bottom: -(@rowSpacing / 2); + padding-top: (@rowSpacing / 2); + padding-bottom: (@rowSpacing / 2); +} + +/* Red */ +.ui.grid > .red.row, +.ui.grid > .red.column, +.ui.grid > .row > .red.column { + background-color: @red !important; + color: @white; +} +/* Orange */ +.ui.grid > .orange.row, +.ui.grid > .orange.column, +.ui.grid > .row > .orange.column { + background-color: @orange !important; + color: @white; +} +/* Yellow */ +.ui.grid > .yellow.row, +.ui.grid > .yellow.column, +.ui.grid > .row > .yellow.column { + background-color: @yellow !important; + color: @white; +} +/* Olive */ +.ui.grid > .olive.row, +.ui.grid > .olive.column, +.ui.grid > .row > .olive.column { + background-color: @olive !important; + color: @white; +} +/* Green */ +.ui.grid > .green.row, +.ui.grid > .green.column, +.ui.grid > .row > .green.column { + background-color: @green !important; + color: @white; +} +/* Teal */ +.ui.grid > .teal.row, +.ui.grid > .teal.column, +.ui.grid > .row > .teal.column { + background-color: @teal !important; + color: @white; +} +/* Blue */ +.ui.grid > .blue.row, +.ui.grid > .blue.column, +.ui.grid > .row > .blue.column { + background-color: @blue !important; + color: @white; +} +/* Violet */ +.ui.grid > .violet.row, +.ui.grid > .violet.column, +.ui.grid > .row > .violet.column { + background-color: @violet !important; + color: @white; +} +/* Purple */ +.ui.grid > .purple.row, +.ui.grid > .purple.column, +.ui.grid > .row > .purple.column { + background-color: @purple !important; + color: @white; +} +/* Pink */ +.ui.grid > .pink.row, +.ui.grid > .pink.column, +.ui.grid > .row > .pink.column { + background-color: @pink !important; + color: @white; +} +/* Brown */ +.ui.grid > .brown.row, +.ui.grid > .brown.column, +.ui.grid > .row > .brown.column { + background-color: @brown !important; + color: @white; +} +/* Grey */ +.ui.grid > .grey.row, +.ui.grid > .grey.column, +.ui.grid > .row > .grey.column { + background-color: @grey !important; + color: @white; +} +/* Black */ +.ui.grid > .black.row, +.ui.grid > .black.column, +.ui.grid > .row > .black.column { + background-color: @black !important; + color: @white; +} + + +/*---------------------- + Equal Width +-----------------------*/ + +.ui[class*="equal width"].grid > .column:not(.row), +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-grow: 1; +} +.ui[class*="equal width"].grid > .wide.column, +.ui[class*="equal width"].grid > .row > .wide.column, +.ui.grid > [class*="equal width"].row > .wide.column { + flex-grow: 0; +} + + +/*---------------------- + Reverse +-----------------------*/ + + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="mobile reversed"].grid, + .ui[class*="mobile reversed"].grid > .row, + .ui.grid > [class*="mobile reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="mobile vertically reversed"].grid, + .ui.stackable[class*="mobile reversed"] { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="tablet reversed"].grid, + .ui[class*="tablet reversed"].grid > .row, + .ui.grid > [class*="tablet reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="tablet vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + +/* Computer */ +@media only screen and (min-width: @computerBreakpoint) { + .ui[class*="computer reversed"].grid, + .ui[class*="computer reversed"].grid > .row, + .ui.grid > [class*="computer reversed"].row { + flex-direction: row-reverse; + } + .ui[class*="computer vertically reversed"].grid { + flex-direction: column-reverse; + } + + /* Divided Reversed */ + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { + box-shadow: @dividedBorder; + } + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, + .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { + box-shadow: none; + } + /* Vertically Divided Reversed */ + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { + box-shadow: @verticallyDividedBorder; + } + .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { + box-shadow: none; + } + /* Celled Reversed */ + .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { + box-shadow: @celledColumnDivider; + } + .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { + box-shadow: none; + } +} + + +/*------------------- + Doubling +--------------------*/ + +/* Tablet Only */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.doubling.grid { + width: auto; + } + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + display: inline-block !important; + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + box-shadow: none !important; + margin: 0em; + } + .ui[class*="two column"].doubling.grid > .row > .column, + .ui[class*="two column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling.row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling.grid > .row > .column, + .ui[class*="three column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling.grid > .row > .column, + .ui[class*="four column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling.row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling.grid > .row > .column, + .ui[class*="five column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="six column"].doubling.grid > .row > .column, + .ui[class*="six column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="seven column"].doubling.grid > .row > .column, + .ui[class*="seven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling.row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eight column"].doubling.grid > .row > .column, + .ui[class*="eight column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="nine column"].doubling.grid > .row > .column, + .ui[class*="nine column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling.row.row > .column { + width: @fourColumn !important; + } + .ui[class*="ten column"].doubling.grid > .row > .column, + .ui[class*="ten column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="eleven column"].doubling.grid > .row > .column, + .ui[class*="eleven column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling.row.row > .column { + width: @fiveColumn !important; + } + .ui[class*="twelve column"].doubling.grid > .row > .column, + .ui[class*="twelve column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="thirteen column"].doubling.grid > .row > .column, + .ui[class*="thirteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling.row.row > .column { + width: @sixColumn !important; + } + .ui[class*="fourteen column"].doubling.grid > .row > .column, + .ui[class*="fourteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="fifteen column"].doubling.grid > .row > .column, + .ui[class*="fifteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling.row.row > .column { + width: @sevenColumn !important; + } + .ui[class*="sixteen column"].doubling.grid > .row > .column, + .ui[class*="sixteen column"].doubling.grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling.row.row > .column { + width: @eightColumn !important; + } +} + +/* Mobile Only */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.grid > .doubling.row, + .ui.doubling.grid > .row { + margin: 0em !important; + padding: 0em !important; + } + .ui.grid > .doubling.row > .column, + .ui.doubling.grid > .row > .column { + padding-top: (@rowSpacing / 2) !important; + padding-bottom: (@rowSpacing / 2) !important; + margin: 0em !important; + box-shadow: none !important; + } + .ui[class*="two column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="two column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="two column"].doubling:not(.stackable).row.row > .column { + width: @oneColumn !important; + } + .ui[class*="three column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="three column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="three column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="four column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="four column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="four column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="five column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="five column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="five column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="six column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="six column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="six column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="seven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="seven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="seven column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="eight column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eight column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eight column"].doubling:not(.stackable).row.row > .column { + width: @twoColumn !important; + } + .ui[class*="nine column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="nine column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="nine column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="ten column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="ten column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="ten column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="eleven column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="eleven column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="eleven column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="twelve column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="twelve column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="twelve column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="thirteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="thirteen column"].doubling:not(.stackable).row.row > .column { + width: @threeColumn !important; + } + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fourteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fourteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="fifteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="fifteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .row > .column, + .ui[class*="sixteen column"].doubling:not(.stackable).grid > .column:not(.row), + .ui.grid > [class*="sixteen column"].doubling:not(.stackable).row.row > .column { + width: @fourColumn !important; + } +} + +/*------------------- + Stackable +--------------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.grid { + width: auto; + margin-left: 0em !important; + margin-right: 0em !important; + } + .ui.stackable.grid > .row > .wide.column, + .ui.stackable.grid > .wide.column, + .ui.stackable.grid > .column.grid > .column, + .ui.stackable.grid > .column.row > .column, + .ui.stackable.grid > .row > .column, + .ui.stackable.grid > .column:not(.row), + .ui.grid > .stackable.stackable.row > .column { + width: 100% !important; + margin: 0em 0em !important; + box-shadow: none !important; + padding: (@stackableRowSpacing / 2) (@stackableGutter / 2) !important; + } + .ui.stackable.grid:not(.vertically) > .row { + margin: 0em; + padding: 0em; + } + + /* Coupling */ + .ui.container > .ui.stackable.grid > .column, + .ui.container > .ui.stackable.grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + + /* Don't pad inside segment or nested grid */ + .ui.grid .ui.stackable.grid, + .ui.segment:not(.vertical) .ui.stackable.page.grid { + margin-left: -(@stackableGutter / 2) !important; + margin-right: -(@stackableGutter / 2) !important; + } + + /* Divided Stackable */ + .ui.stackable.divided.grid > .row:first-child > .column:first-child, + .ui.stackable.celled.grid > .row:first-child > .column:first-child, + .ui.stackable.divided.grid > .column:not(.row):first-child, + .ui.stackable.celled.grid > .column:not(.row):first-child { + border-top: none !important; + } + .ui.inverted.stackable.celled.grid > .column:not(.row), + .ui.inverted.stackable.divided.grid > .column:not(.row), + .ui.inverted.stackable.celled.grid > .row > .column, + .ui.inverted.stackable.divided.grid > .row > .column { + border-top: @stackableInvertedMobileBorder; + } + + .ui.stackable.celled.grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.celled.grid > .row > .column, + .ui.stackable.divided:not(.vertically).grid > .row > .column { + border-top: @stackableMobileBorder; + box-shadow: none !important; + padding-top: @stackableRowSpacing !important; + padding-bottom: @stackableRowSpacing !important; + } + + .ui.stackable.celled.grid > .row { + box-shadow: none !important; + } + .ui.stackable.divided:not(.vertically).grid > .column:not(.row), + .ui.stackable.divided:not(.vertically).grid > .row > .column { + padding-left: 0em !important; + padding-right: 0em !important; + } + +} + +/*---------------------- + Only (Device) +-----------------------*/ + + +/* These include arbitrary class repetitions for forced specificity */ + +/* Mobile Only Hide */ +@media only screen and (max-width: @largestMobileScreen) { + .ui[class*="tablet only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} +/* Tablet Only Hide */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui[class*="mobile only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="computer only"].grid.grid.grid:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), + .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), + .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Computer Only Hide */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="large screen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Large Screen Only Hide */ +@media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } + .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), + .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), + .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { + display: none !important; + } +} + +/* Widescreen Only Hide */ +@media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui[class*="mobile only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), + .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { + display: none !important; + } + .ui[class*="tablet only"].grid.grid.grid:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), + .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), + .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { + display: none !important; + } +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/collections/menu.less b/static/semantic/src/definitions/collections/menu.less new file mode 100755 index 0000000..5e48306 --- /dev/null +++ b/static/semantic/src/definitions/collections/menu.less @@ -0,0 +1,1981 @@ +/* + * # Semantic - Menu + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2015 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'menu'; + +@import (multiple) '../../theme.config'; + +/******************************* + Standard +*******************************/ + +/*-------------- + Menu +---------------*/ + +.ui.menu { + display: flex; + margin: @margin; + font-family: @fontFamily; + background: @background; + font-weight: @fontWeight; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + min-height: @minHeight; +} + +.ui.menu:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.menu:first-child { + margin-top: 0rem; +} +.ui.menu:last-child { + margin-bottom: 0rem; +} + + +/*-------------- + Sub-Menu +---------------*/ + +.ui.menu .menu { + margin: 0em; +} + +.ui.menu:not(.vertical) > .menu { + display: flex; +} + +/*-------------- + Item +---------------*/ + +.ui.menu:not(.vertical) .item { + display: flex; + align-items: center; +} + +.ui.menu .item { + position: relative; + vertical-align: middle; + line-height: 1; + text-decoration: none; + -webkit-tap-highlight-color: transparent; + flex: 0 0 auto; + user-select: none; + + background: @itemBackground; + padding: @itemVerticalPadding @itemHorizontalPadding; + text-transform: @itemTextTransform; + color: @itemTextColor; + font-weight: @itemFontWeight; + transition: @itemTransition; +} + +.ui.menu > .item:first-child { + border-radius: @borderRadius 0px 0px @borderRadius; +} + +/* Border */ +.ui.menu .item:before { + position: absolute; + content: ''; + top: 0%; + right: 0px; + height: 100%; + + width: @dividerSize; + background: @dividerBackground; +} + +/*-------------- + Text Content +---------------*/ + +.ui.menu .text.item > *, +.ui.menu .item > a:not(.ui), +.ui.menu .item > p:only-child { + user-select: text; + line-height: @textLineHeight; +} +.ui.menu .item > p:first-child { + margin-top: 0; +} +.ui.menu .item > p:last-child { + margin-bottom: 0; +} + +/*-------------- + Icons +---------------*/ + +.ui.menu .item > i.icon { + opacity: @iconOpacity; + float: @iconFloat; + margin: @iconMargin; +} + +/*-------------- + Button +---------------*/ + +.ui.menu:not(.vertical) .item > .button { + position: relative; + top: @buttonOffset; + margin: @buttonMargin; + padding-bottom: @buttonVerticalPadding; + padding-top: @buttonVerticalPadding; + font-size: @buttonSize; +} + +/*---------------- + Grid / Container +-----------------*/ + +.ui.menu > .grid, +.ui.menu > .container { + display: flex; + align-items: inherit; + flex-direction: inherit; +} + +/*-------------- + Inputs +---------------*/ + +.ui.menu .item > .input { + width: 100%; +} +.ui.menu:not(.vertical) .item > .input { + position: relative; + top: @inputOffset; + margin: @inputVerticalMargin 0em; +} +.ui.menu .item > .input input { + font-size: @inputSize; + padding-top: @inputVerticalPadding; + padding-bottom: @inputVerticalPadding; +} + + +/*-------------- + Header +---------------*/ + +.ui.menu .header.item, +.ui.vertical.menu .header.item { + margin: 0em; + background: @headerBackground; + text-transform: @headerTextTransform; + font-weight: @headerWeight; +} + +.ui.vertical.menu .item > .header:not(.ui) { + margin: @verticalHeaderMargin; + font-size: @verticalHeaderFontSize; + font-weight: @verticalHeaderFontWeight; +} + +/*-------------- + Dropdowns +---------------*/ + + +/* Dropdown Icon */ +.ui.menu .item > i.dropdown.icon { + padding: 0em; + float: @dropdownIconFloat; + margin: 0em 0em 0em @dropdownIconDistance; +} + +/* Menu */ +.ui.menu .dropdown.item .menu { + min-width: calc(100% - 1px); + border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius; + background: @dropdownBackground; + margin: @dropdownMenuDistance 0px 0px; + box-shadow: @dropdownMenuBoxShadow; + flex-direction: column !important; +} + + +/* Menu Items */ +.ui.menu .ui.dropdown .menu > .item { + margin: 0; + text-align: left; + font-size: @dropdownItemFontSize !important; + padding: @dropdownItemPadding !important; + background: @dropdownItemBackground !important; + color: @dropdownItemColor !important; + text-transform: @dropdownItemTextTransform !important; + font-weight: @dropdownItemFontWeight !important; + box-shadow: @dropdownItemBoxShadow !important; + transition: @dropdownItemTransition !important; +} +.ui.menu .ui.dropdown .menu > .item:hover { + background: @dropdownHoveredItemBackground !important; + color: @dropdownHoveredItemColor !important; +} +.ui.menu .ui.dropdown .menu > .selected.item { + background: @dropdownSelectedItemBackground !important; + color: @dropdownSelectedItemColor !important; +} +.ui.menu .ui.dropdown .menu > .active.item { + background: @dropdownActiveItemBackground !important; + font-weight: @dropdownActiveItemFontWeight !important; + color: @dropdownActiveItemColor !important; +} + +.ui.menu .ui.dropdown.item .menu .item:not(.filtered) { + display: block; +} +.ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) { + display: inline-block; + font-size: @dropdownItemIconFontSize !important; + float: @dropdownItemIconFloat; + margin: @dropdownItemIconMargin !important; +} + + +/* Secondary */ +.ui.secondary.menu .dropdown.item > .menu, +.ui.text.menu .dropdown.item > .menu { + border-radius: @dropdownMenuBorderRadius; + margin-top: @secondaryDropdownMenuDistance; +} + +/* Pointing */ +.ui.menu .pointing.dropdown.item .menu { + margin-top: @pointingDropdownMenuDistance; +} + +/* Inverted */ +.ui.inverted.menu .search.dropdown.item > .search, +.ui.inverted.menu .search.dropdown.item > .text { + color: @invertedSelectionDropdownColor; +} + +/* Vertical */ +.ui.vertical.menu .dropdown.item > .icon { + float: right; + content: "\f0da"; + margin-left: 1em; +} +.ui.vertical.menu .dropdown.item .menu { + left: 100%; + min-width: 0; + margin: 0em 0em 0em @dropdownMenuDistance; + box-shadow: @dropdownVerticalMenuBoxShadow; + border-radius: 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius @dropdownMenuBorderRadius; +} +.ui.vertical.menu .dropdown.item.upward .menu { + bottom: 0; +} +.ui.vertical.menu .dropdown.item:not(.upward) .menu { + top: 0; +} +.ui.vertical.menu .active.dropdown.item { + border-top-right-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.vertical.menu .dropdown.active.item { + box-shadow: none; +} + +/* Evenly Divided */ +.ui.item.menu .dropdown .menu .item { + width: 100%; +} + +/*-------------- + Labels +---------------*/ + +.ui.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-left: @labelTextMargin; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.vertical.menu .item > .label { + background: @labelBackground; + color: @labelTextColor; + margin-top: @labelOffset; + margin-bottom: @labelOffset; + padding: @labelVerticalPadding @labelHorizontalPadding; +} +.ui.menu .item > .floating.label { + padding: @labelVerticalPadding @labelHorizontalPadding; +} + +/*-------------- + Images +---------------*/ + +.ui.menu .item > img:not(.ui) { + display: inline-block; + vertical-align: middle; + margin: @imageMargin; + width: @imageWidth; +} +.ui.vertical.menu .item > img:not(.ui):only-child { + display: block; + max-width: 100%; + width: @verticalImageWidth; +} + +/******************************* + Coupling +*******************************/ + +/*-------------- + List +---------------*/ + +/* Menu divider shouldnt apply */ +.ui.menu .list .item:before { + background: none !important; +} + +/*-------------- + Sidebar +---------------*/ + +/* Show vertical dividers below last */ + +.ui.vertical.sidebar.menu > .item:first-child:before { + display: block !important; +} +.ui.vertical.sidebar.menu > .item::before { + top: auto; + bottom: 0px; +} + +/*-------------- + Container +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.menu > .ui.container { + width: 100% !important; + margin-left: 0em !important; + margin-right: 0em !important; + } +} +@media only screen and (min-width: @tabletBreakpoint) { + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { + border-left: @dividerSize solid @dividerBackground; + } +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + + +.ui.link.menu .item:hover, +.ui.menu .dropdown.item:hover, +.ui.menu .link.item:hover, +.ui.menu a.item:hover { + cursor: pointer; + background: @hoverItemBackground; + color: @hoverItemTextColor; +} + + +/*-------------- + Pressed +---------------*/ + +.ui.link.menu .item:active, +.ui.menu .link.item:active, +.ui.menu a.item:active { + background: @pressedItemBackground; + color: @pressedItemTextColor; +} + + +/*-------------- + Active +---------------*/ + +.ui.menu .active.item { + background: @activeItemBackground; + color: @activeItemTextColor; + font-weight: @activeItemFontWeight; + box-shadow: @activeItemBoxShadow; +} +.ui.menu .active.item > i.icon { + opacity: @activeIconOpacity; +} + +/*-------------- + Active Hover +---------------*/ + +.ui.menu .active.item:hover, +.ui.vertical.menu .active.item:hover { + background-color: @activeHoverItemBackground; + color: @activeHoverItemColor; +} + + +/*-------------- + Disabled +---------------*/ + +.ui.menu .item.disabled, +.ui.menu .item.disabled:hover { + cursor: default !important; + background-color: transparent !important; + color: @disabledTextColor !important; +} + + +/******************************* + Types +*******************************/ + +/*------------------ +Floated Menu / Item +-------------------*/ + +/* Left Floated */ +.ui.menu:not(.vertical) .left.item, +.ui.menu:not(.vertical) :not(.dropdown) > .left.menu { + display: flex; + margin-right: auto !important; +} +/* Right Floated */ +.ui.menu:not(.vertical) .right.item, +.ui.menu:not(.vertical) .right.menu { + display: flex; + margin-left: auto !important; +} + +/* Swapped Borders */ +.ui.menu .right.item::before, +.ui.menu .right.menu > .item::before { + right: auto; + left: 0; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.menu { + display: block; + flex-direction: column; + background: @verticalBackground; + box-shadow: @verticalBoxShadow; +} + +/*--- Item ---*/ +.ui.vertical.menu .item { + display: block; + background: @verticalItemBackground; + border-top: none; + border-right: none; +} +.ui.vertical.menu > .item:first-child { + border-radius: @borderRadius @borderRadius 0px 0px; +} +.ui.vertical.menu > .item:last-child { + border-radius: 0px 0px @borderRadius @borderRadius; +} + +/*--- Label ---*/ +.ui.vertical.menu .item > .label { + float: right; + text-align: center; +} + +/*--- Icon ---*/ +.ui.vertical.menu .item > i.icon { + width: @iconWidth; + float: @verticalIconFloat; + margin: @verticalIconMargin; +} +.ui.vertical.menu .item > .label + i.icon { + float: @labelAndIconFloat; + margin: @labelAndIconMargin; +} + + +/*--- Border ---*/ +.ui.vertical.menu .item:before { + position: absolute; + content: ''; + top: 0%; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; +} + +.ui.vertical.menu .item:first-child:before { + display: none !important; +} + + +/*--- Sub Menu ---*/ +.ui.vertical.menu .item > .menu { + margin: @subMenuMargin; +} +.ui.vertical.menu .menu .item { + background: none; + padding: @subMenuVerticalPadding @subMenuHorizontalPadding; + font-size: @subMenuFontSize; + color: @subMenuTextColor; +} +.ui.vertical.menu .item .menu a.item:hover, +.ui.vertical.menu .item .menu .link.item:hover { + color: @darkTextColor; +} +.ui.vertical.menu .menu .item:before { + display: none; +} + +/* Vertical Active */ +.ui.vertical.menu .active.item { + background: @activeItemBackground; + border-radius: 0em; + box-shadow: @verticalActiveBoxShadow; +} +.ui.vertical.menu > .active.item:first-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.vertical.menu > .active.item:last-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.vertical.menu > .active.item:only-child { + border-radius: @borderRadius; +} +.ui.vertical.menu .active.item .menu .active.item { + border-left: none; +} +.ui.vertical.menu .item .menu .active.item { + background-color: @subMenuActiveBackground; + font-weight: @subMenuActiveFontWeight; + color: @subMenuActiveTextColor; +} + + +/*-------------- + Tabular +---------------*/ + +.ui.tabular.menu { + border-radius: 0em; + box-shadow: none !important; + border: none; + background: @tabularBackground; + border-bottom: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.tabular.fluid.menu { + width: @tabularFluidWidth !important; +} +.ui.tabular.menu .item { + background: transparent; + border-bottom: none; + + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + padding: @tabularVerticalPadding @tabularHorizontalPadding; + color: @tabularTextColor; +} +.ui.tabular.menu .item:before { + display: none; +} + +/* Hover */ +.ui.tabular.menu .item:hover { + background-color: transparent; + color: @tabularHoveredTextColor; +} + +/* Active */ +.ui.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-top-width: @tabularBorderWidth; + border-color: @tabularBorderColor; + font-weight: @tabularActiveWeight; + margin-bottom: -@tabularBorderWidth; + box-shadow: @tabularActiveBoxShadow; + border-radius: @tabularBorderRadius @tabularBorderRadius 0px 0px !important; +} + +/* Coupling with segment for attachment */ +.ui.tabular.menu + .attached:not(.top).segment, +.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { + border-top: none; + margin-left: 0px; + margin-top: 0px; + margin-right: 0px; + width: 100%; +} +.top.attached.segment + .ui.bottom.tabular.menu { + position: relative; + width: @tabularFluidWidth; + left: -@tabularFluidOffset; +} + +/* Bottom Vertical Tabular */ +.ui.bottom.tabular.menu { + background: @tabularBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-top: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.bottom.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: none; +} +.ui.bottom.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: -@tabularBorderWidth 0px 0px 0px; + border-radius: 0px 0px @tabularBorderRadius @tabularBorderRadius !important; +} + +/* Vertical Tabular (Left) */ +.ui.vertical.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.tabular.menu .item { + background: none; + border-left: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-right: none; +} +.ui.vertical.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px -@tabularBorderWidth 0px 0px; + border-radius: @tabularBorderRadius 0px 0px @tabularBorderRadius !important; +} + +/* Vertical Right Tabular */ +.ui.vertical.right.tabular.menu { + background: @tabularVerticalBackground; + border-radius: 0em; + box-shadow: none !important; + border-bottom: none; + border-right: none; + border-left: @tabularBorderWidth solid @tabularBorderColor; +} +.ui.vertical.right.tabular.menu .item { + background: none; + border-right: @tabularBorderWidth solid transparent; + border-bottom: @tabularBorderWidth solid transparent; + border-top: @tabularBorderWidth solid transparent; + border-left: none; +} +.ui.vertical.right.tabular.menu .active.item { + background: @tabularActiveBackground; + color: @tabularActiveColor; + border-color: @tabularBorderColor; + margin: 0px 0px 0px -@tabularBorderWidth; + border-radius: 0px @tabularBorderRadius @tabularBorderRadius 0px !important; +} + +/* Dropdown */ +.ui.tabular.menu .active.dropdown.item { + margin-bottom: 0px; + border-left: @tabularBorderWidth solid transparent; + border-right: @tabularBorderWidth solid transparent; + border-top: @tabularOppositeBorderWidth solid transparent; + border-bottom: none; +} + + + +/*-------------- + Pagination +---------------*/ + +.ui.pagination.menu { + margin: 0em; + display: inline-flex; + vertical-align: middle; +} +.ui.pagination.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.pagination.menu .item:last-child:before { + display: none; +} + +.ui.pagination.menu .item { + min-width: @paginationMinWidth; + text-align: center; +} +.ui.pagination.menu .icon.item i.icon { + vertical-align: top; +} + +/* Active */ +.ui.pagination.menu .active.item { + border-top: none; + padding-top: @itemVerticalPadding; + background-color: @paginationActiveBackground; + color: @paginationActiveTextColor; + box-shadow: none; +} + +/*-------------- + Secondary +---------------*/ + +.ui.secondary.menu { + background: @secondaryBackground; + margin-left: -@secondaryItemSpacing; + margin-right: -@secondaryItemSpacing; + border-radius: 0em; + border: none; + box-shadow: none; +} + +/* Item */ +.ui.secondary.menu .item { + align-self: center; + box-shadow: none; + border: none; + padding: @secondaryItemPadding; + margin: @secondaryItemMargin; + background: @secondaryItemBackground; + transition: @secondaryItemTransition; + border-radius: @secondaryItemBorderRadius; +} + +/* No Divider */ +.ui.secondary.menu .item:before { + display: none !important; +} + +/* Header */ +.ui.secondary.menu .header.item { + border-radius: 0em; + border-right: @secondaryHeaderBorder; + background: @secondaryHeaderBackground; +} + +/* Image */ +.ui.secondary.menu .item > img:not(.ui) { + margin: 0em; +} + +/* Hover */ +.ui.secondary.menu .dropdown.item:hover, +.ui.secondary.menu .link.item:hover, +.ui.secondary.menu a.item:hover { + background: @secondaryHoverItemBackground; + color: @secondaryHoverItemColor; +} + +/* Active */ +.ui.secondary.menu .active.item { + box-shadow: none; + background: @secondaryActiveItemBackground; + color: @secondaryActiveItemColor; + border-radius: @secondaryItemBorderRadius; +} + +/* Active Hover */ +.ui.secondary.menu .active.item:hover { + box-shadow: none; + background: @secondaryActiveHoverItemBackground; + color: @secondaryActiveHoverItemColor; +} + + +/* Inverted */ +.ui.secondary.inverted.menu .link.item, +.ui.secondary.inverted.menu a.item { + color: @secondaryInvertedColor !important; +} +.ui.secondary.inverted.menu .dropdown.item:hover, +.ui.secondary.inverted.menu .link.item:hover, +.ui.secondary.inverted.menu a.item:hover { + background: @secondaryInvertedHoverBackground; + color: @secondaryInvertedHoverColor !important; +} +.ui.secondary.inverted.menu .active.item { + background: @secondaryInvertedActiveBackground; + color: @secondaryInvertedActiveColor !important; +} + +/* Fix item margins */ +.ui.secondary.item.menu { + margin-left: 0em; + margin-right: 0em; +} +.ui.secondary.item.menu .item:last-child { + margin-right: 0em; +} +.ui.secondary.attached.menu { + box-shadow: none; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu { + margin: @secondaryMenuSubMenuMargin; +} +.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { + margin: @secondaryMenuSubMenuItemMargin; + padding: @secondaryMenuSubMenuItemPadding; +} + + +/*--------------------- + Secondary Vertical +-----------------------*/ + +.ui.secondary.vertical.menu > .item { + border: none; + margin: @secondaryVerticalItemMargin; + border-radius: @secondaryVerticalItemBorderRadius !important; +} +.ui.secondary.vertical.menu > .header.item { + border-radius: 0em; +} + +/* Sub Menu */ +.ui.vertical.secondary.menu .item > .menu .item { + background-color: transparent; +} + +/* Inverted */ +.ui.secondary.inverted.menu { + background-color: transparent; +} + +/*--------------------- + Secondary Pointing +-----------------------*/ + +.ui.secondary.pointing.menu { + margin-left: 0em; + margin-right: 0em; + border-bottom: @secondaryPointingBorderWidth solid @secondaryPointingBorderColor; +} + +.ui.secondary.pointing.menu .item { + border-bottom-color: transparent; + border-bottom-style: solid; + border-radius: 0em; + align-self: flex-end; + + margin: 0em 0em -@secondaryPointingBorderWidth; + padding: @secondaryPointingItemVerticalPadding @secondaryPointingItemHorizontalPadding; + border-bottom-width: @secondaryPointingBorderWidth; + transition: @secondaryItemTransition; +} + +/* Item Types */ +.ui.secondary.pointing.menu .header.item { + color: @secondaryPointingHeaderColor !important; +} +.ui.secondary.pointing.menu .text.item { + box-shadow: none !important; +} +.ui.secondary.pointing.menu .item:after { + display: none; +} + +/* Hover */ +.ui.secondary.pointing.menu .dropdown.item:hover, +.ui.secondary.pointing.menu .link.item:hover, +.ui.secondary.pointing.menu a.item:hover { + background-color: transparent; + color: @secondaryPointingHoverTextColor; +} + +/* Pressed */ +.ui.secondary.pointing.menu .dropdown.item:active, +.ui.secondary.pointing.menu .link.item:active, +.ui.secondary.pointing.menu a.item:active { + background-color: transparent; + border-color: @secondaryPointingBorderColor; +} + +/* Active */ +.ui.secondary.pointing.menu .active.item { + background-color: transparent; + box-shadow: none; + border-color: @secondaryPointingActiveBorderColor; + font-weight: @secondaryPointingActiveFontWeight; + color: @secondaryPointingActiveTextColor; +} + +/* Active Hover */ +.ui.secondary.pointing.menu .active.item:hover { + border-color: @secondaryPointingActiveHoverBorderColor; + color: @secondaryPointingActiveHoverTextColor; +} + +/* Active Dropdown */ +.ui.secondary.pointing.menu .active.dropdown.item { + border-color: @secondaryPointingActiveDropdownBorderColor; +} + +/* Vertical Pointing */ +.ui.secondary.vertical.pointing.menu { + border-bottom-width: 0px; + border-right-width: @secondaryPointingBorderWidth; + border-right-style: solid; + border-right-color: @secondaryPointingBorderColor; +} +.ui.secondary.vertical.pointing.menu .item { + border-bottom: none; + border-right-style: solid; + border-right-color: transparent; + border-radius: 0em !important; + margin: @secondaryVerticalPointingItemMargin; + border-right-width: @secondaryPointingBorderWidth; +} + +/* Vertical Active */ +.ui.secondary.vertical.pointing.menu .active.item { + border-color: @secondaryPointingActiveBorderColor; +} + +/* Inverted */ +.ui.secondary.inverted.pointing.menu { + border-color: @secondaryPointingInvertedBorderColor; +} + +.ui.secondary.inverted.pointing.menu { + border-width: @secondaryPointingBorderWidth; + border-color: @secondaryPointingBorderColor; +} +.ui.secondary.inverted.pointing.menu .item { + color: @secondaryPointingInvertedItemTextColor; +} +.ui.secondary.inverted.pointing.menu .header.item { + color: @secondaryPointingInvertedItemHeaderColor !important; +} + +/* Hover */ +.ui.secondary.inverted.pointing.menu .link.item:hover, +.ui.secondary.inverted.pointing.menu a.item:hover { + color: @secondaryPointingInvertedItemHoverTextColor; +} + + +/* Active */ +.ui.secondary.inverted.pointing.menu .active.item { + border-color: @secondaryPointingInvertedActiveBorderColor; + color: @secondaryPointingInvertedActiveColor; +} + +/*-------------- + Text Menu +---------------*/ + +.ui.text.menu { + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + + margin: @textMenuMargin; +} +.ui.text.menu .item { + border-radius: 0px; + box-shadow: none; + align-self: center; + margin: @textMenuItemMargin; + padding: @textMenuItemPadding; + font-weight: @textMenuItemFontWeight; + color: @textMenuItemColor; + transition: @textMenuItemTransition; +} + +/* Border */ +.ui.text.menu .item:before, +.ui.text.menu .menu .item:before { + display: none !important; +} + +/* Header */ +.ui.text.menu .header.item { + background-color: transparent; + opacity: 1; + color: @textMenuHeaderColor; + font-size: @textMenuHeaderSize; + text-transform: @textMenuHeaderTextTransform; + font-weight: @textMenuHeaderFontWeight; +} + +/* Image */ +.ui.text.menu .item > img:not(.ui) { + margin: 0em; +} + +/*--- fluid text ---*/ +.ui.text.item.menu .item { + margin: 0em; +} + +/*--- vertical text ---*/ +.ui.vertical.text.menu { + margin: @textVerticalMenuMargin; +} +.ui.vertical.text.menu:first-child { + margin-top: 0rem; +} +.ui.vertical.text.menu:last-child { + margin-bottom: 0rem; +} +.ui.vertical.text.menu .item { + margin: @textVerticalMenuItemMargin; + padding-left: 0em; + padding-right: 0em; +} +.ui.vertical.text.menu .item > i.icon { + float: @textVerticalMenuIconFloat; + margin: @iconMargin; +} +.ui.vertical.text.menu .header.item { + margin: @textVerticalMenuHeaderMargin; +} + +/* Vertical Sub Menu */ +.ui.vertical.text.menu .item:not(.dropdown) > .menu { + margin: @textMenuSubMenuMargin; +} +.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { + margin: @textMenuSubMenuItemMargin; + padding: @textMenuSubMenuItemPadding; +} + +/*--- hover ---*/ +.ui.text.menu .item:hover { + opacity: 1; + background-color: transparent; +} + +/*--- active ---*/ +.ui.text.menu .active.item { + background-color: transparent; + border: none; + box-shadow: none; + font-weight: @textMenuActiveItemFontWeight; + color: @textMenuActiveItemColor; +} + +/*--- active hover ---*/ +.ui.text.menu .active.item:hover { + background-color: transparent; +} + +/* Disable Bariations */ +.ui.text.pointing.menu .active.item:after { + box-shadow: none; +} +.ui.text.attached.menu { + box-shadow: none; +} + +/* Inverted */ +.ui.inverted.text.menu, +.ui.inverted.text.menu .item, +.ui.inverted.text.menu .item:hover, +.ui.inverted.text.menu .active.item { + background-color: transparent !important; +} + +/* Fluid */ +.ui.fluid.text.menu { + margin-left: 0em; + margin-right: 0em; +} + +/*-------------- + Icon Only +---------------*/ + +/* Vertical Menu */ +.ui.vertical.icon.menu { + display: inline-block; + width: auto; +} + +/* Item */ +.ui.icon.menu .item { + height: auto; + text-align: @iconMenuTextAlign; + color: @iconMenuItemColor; +} + +/* Icon */ +.ui.icon.menu .item > .icon:not(.dropdown) { + margin: 0; + opacity: 1; +} + +/* Icon Gylph */ +.ui.icon.menu .icon:before { + opacity: 1; +} + +/* (x) Item Icon */ +.ui.menu .icon.item > .icon { + width: auto; + margin: 0em auto; +} + +/* Vertical Icon */ +.ui.vertical.icon.menu .item > .icon:not(.dropdown) { + display: block; + opacity: 1; + margin: 0em auto; + float: none; +} + +/* Inverted */ +.ui.inverted.icon.menu .item { + color: @iconMenuInvertedItemColor; +} + +/*-------------- + Labeled Icon +---------------*/ + +/* Menu */ +.ui.labeled.icon.menu { + text-align: center; +} + +/* Item */ +.ui.labeled.icon.menu .item { + min-width: @labeledIconMinWidth; + flex-direction: column; +} + +/* Icon */ +.ui.labeled.icon.menu .item > .icon:not(.dropdown) { + height: 1em; + display: block; + font-size: @labeledIconSize !important; + margin: 0em auto @labeledIconTextMargin !important; +} + +/* Fluid */ +.ui.fluid.labeled.icon.menu > .item { + min-width: 0em; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width: @largestMobileScreen) { + .ui.stackable.menu { + flex-direction: column; + } + .ui.stackable.menu .item { + width: 100% !important; + } + .ui.stackable.menu .item:before { + position: absolute; + content: ''; + top: auto; + bottom: 0px; + left: 0px; + width: 100%; + height: @dividerSize; + background: @verticalDividerBackground; + } + + .ui.stackable.menu .left.menu, + .ui.stackable.menu .left.item { + margin-right: 0 !important; + } + .ui.stackable.menu .right.menu, + .ui.stackable.menu .right.item { + margin-left: 0 !important; + } + + .ui.stackable.menu .right.menu, + .ui.stackable.menu .left.menu { + flex-direction: column; + } +} + +/*-------------- + Colors +---------------*/ + +/*--- Standard Colors ---*/ +.ui.menu .red.active.item, +.ui.red.menu .active.item { + border-color: @red !important; + color: @red !important; +} +.ui.menu .orange.active.item, +.ui.orange.menu .active.item { + border-color: @orange !important; + color: @orange !important; +} +.ui.menu .yellow.active.item, +.ui.yellow.menu .active.item { + border-color: @yellow !important; + color: @yellow !important; +} +.ui.menu .olive.active.item, +.ui.olive.menu .active.item { + border-color: @olive !important; + color: @olive !important; +} +.ui.menu .green.active.item, +.ui.green.menu .active.item { + border-color: @green !important; + color: @green !important; +} +.ui.menu .teal.active.item, +.ui.teal.menu .active.item { + border-color: @teal !important; + color: @teal !important; +} +.ui.menu .blue.active.item, +.ui.blue.menu .active.item { + border-color: @blue !important; + color: @blue !important; +} +.ui.menu .violet.active.item, +.ui.violet.menu .active.item { + border-color: @violet !important; + color: @violet !important; +} +.ui.menu .purple.active.item, +.ui.purple.menu .active.item { + border-color: @purple !important; + color: @purple !important; +} +.ui.menu .pink.active.item, +.ui.pink.menu .active.item { + border-color: @pink !important; + color: @pink !important; +} +.ui.menu .brown.active.item, +.ui.brown.menu .active.item { + border-color: @brown !important; + color: @brown !important; +} +.ui.menu .grey.active.item, +.ui.grey.menu .active.item { + border-color: @grey !important; + color: @grey !important; +} + + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.menu { + border: @invertedBorder; + background: @invertedBackground; + box-shadow: @invertedBoxShadow; +} + +/* Menu Item */ +.ui.inverted.menu .item, +.ui.inverted.menu .item > a:not(.ui) { + background: @invertedItemBackground; + color: @invertedItemTextColor; +} +.ui.inverted.menu .item.menu { + background: @invertedSubMenuBackground; +} + +/*--- Border ---*/ +.ui.inverted.menu .item:before { + background: @invertedDividerBackground; +} +.ui.vertical.inverted.menu .item:before { + background: @invertedVerticalDividerBackground; +} + +/* Sub Menu */ +.ui.vertical.inverted.menu .menu .item, +.ui.vertical.inverted.menu .menu .item a:not(.ui) { + color: @invertedSubMenuColor; +} + +/* Header */ +.ui.inverted.menu .header.item { + margin: 0em; + background: @invertedHeaderBackground; + box-shadow: none; +} + +/* Disabled */ +.ui.inverted.menu .item.disabled, +.ui.inverted.menu .item.disabled:hover { + color: @invertedDisabledTextColor; +} + +/*--- Hover ---*/ +.ui.link.inverted.menu .item:hover, +.ui.inverted.menu .dropdown.item:hover, +.ui.inverted.menu .link.item:hover, +.ui.inverted.menu a.item:hover { + background: @invertedHoverBackground; + color: @invertedHoverColor; +} +.ui.vertical.inverted.menu .item .menu a.item:hover, +.ui.vertical.inverted.menu .item .menu .link.item:hover { + background: @invertedSubMenuBackground; + color: @invertedSubMenuHoverColor; +} + +/*--- Pressed ---*/ +.ui.inverted.menu a.item:active, +.ui.inverted.menu .link.item:active{ + background: @invertedMenuPressedBackground; + color: @invertedMenuPressedColor; +} + +/*--- Active ---*/ +.ui.inverted.menu .active.item { + background: @invertedActiveBackground; + color: @invertedActiveColor !important; +} +.ui.inverted.vertical.menu .item .menu .active.item { + background: @invertedSubMenuActiveBackground; + color: @invertedSubMenuActiveColor; +} +.ui.inverted.pointing.menu .active.item:after { + background: @invertedArrowActiveColor !important; + margin: 0em !important; + box-shadow: none !important; + border: none !important; +} + +/*--- Active Hover ---*/ +.ui.inverted.menu .active.item:hover { + background: @invertedActiveHoverBackground; + color: @invertedActiveHoverColor !important; +} +.ui.inverted.pointing.menu .active.item:hover:after { + background: @invertedArrowActiveHoverColor !important; +} + + +/*-------------- + Floated +---------------*/ + +.ui.floated.menu { + float: left; + margin: 0rem @floatedDistance 0rem 0rem; +} +.ui.floated.menu .item:last-child:before { + display: none; +} + +.ui.right.floated.menu { + float: right; + margin: 0rem 0rem 0rem @floatedDistance; +} + + +/*-------------- + Inverted +---------------*/ + +/* Red */ +.ui.inverted.menu .red.active.item, +.ui.inverted.red.menu { + background-color: @red; +} +.ui.inverted.red.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.red.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Orange */ +.ui.inverted.menu .orange.active.item, +.ui.inverted.orange.menu { + background-color: @orange; +} +.ui.inverted.orange.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.orange.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Yellow */ +.ui.inverted.menu .yellow.active.item, +.ui.inverted.yellow.menu { + background-color: @yellow; +} +.ui.inverted.yellow.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.yellow.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Olive */ +.ui.inverted.menu .olive.active.item, +.ui.inverted.olive.menu { + background-color: @olive; +} +.ui.inverted.olive.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.olive.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Green */ +.ui.inverted.menu .green.active.item, +.ui.inverted.green.menu { + background-color: @green; +} +.ui.inverted.green.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.green.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Teal */ +.ui.inverted.menu .teal.active.item, +.ui.inverted.teal.menu { + background-color: @teal; +} +.ui.inverted.teal.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.teal.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Blue */ +.ui.inverted.menu .blue.active.item, +.ui.inverted.blue.menu { + background-color: @blue; +} +.ui.inverted.blue.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.blue.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Violet */ +.ui.inverted.menu .violet.active.item, +.ui.inverted.violet.menu { + background-color: @violet; +} +.ui.inverted.violet.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.violet.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Purple */ +.ui.inverted.menu .purple.active.item, +.ui.inverted.purple.menu { + background-color: @purple; +} +.ui.inverted.purple.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.purple.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Pink */ +.ui.inverted.menu .pink.active.item, +.ui.inverted.pink.menu { + background-color: @pink; +} +.ui.inverted.pink.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.pink.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Brown */ +.ui.inverted.menu .brown.active.item, +.ui.inverted.brown.menu { + background-color: @brown; +} +.ui.inverted.brown.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.brown.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + +/* Grey */ +.ui.inverted.menu .grey.active.item, +.ui.inverted.grey.menu { + background-color: @grey; +} +.ui.inverted.grey.menu .item:before { + background-color: @invertedColoredDividerBackground; +} +.ui.inverted.grey.menu .active.item { + background-color: @invertedColoredActiveBackground !important; +} + + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.menu .item, +.ui.fitted.menu .item .menu .item, +.ui.menu .fitted.item { + padding: 0em; +} +.ui.horizontally.fitted.menu .item, +.ui.horizontally.fitted.menu .item .menu .item, +.ui.menu .horizontally.fitted.item { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} +.ui.vertically.fitted.menu .item, +.ui.vertically.fitted.menu .item .menu .item, +.ui.menu .vertically.fitted.item { + padding-left: @itemHorizontalPadding; + padding-right: @itemHorizontalPadding; +} + +/*-------------- + Borderless +---------------*/ + +.ui.borderless.menu .item:before, +.ui.borderless.menu .item .menu .item:before, +.ui.menu .borderless.item:before { + background: none !important; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.menu { + display: inline-flex; + margin: 0em; + vertical-align: middle; +} +.ui.compact.vertical.menu { + display: inline-block; +} +.ui.compact.menu .item:last-child { + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui.compact.menu .item:last-child:before { + display: none; +} +.ui.compact.vertical.menu { + width: auto !important; +} +.ui.compact.vertical.menu .item:last-child::before { + display: block; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.menu.fluid, +.ui.vertical.menu.fluid { + width: 100% !important; +} + + +/*------------------- + Evenly Sized +--------------------*/ + +.ui.item.menu, +.ui.item.menu .item { + width: 100%; + padding-left: 0em !important; + padding-right: 0em !important; + margin-left: 0em !important; + margin-right: 0em !important; + text-align: center; + justify-content: center; +} +.ui.attached.item.menu { + margin: 0em @attachedHorizontalOffset !important; +} + +.ui.item.menu .item:last-child:before { + display: none; +} + +.ui.menu.two.item .item { + width: 50%; +} +.ui.menu.three.item .item { + width: 33.333%; +} +.ui.menu.four.item .item { + width: 25%; +} +.ui.menu.five.item .item { + width: 20%; +} +.ui.menu.six.item .item { + width: 16.666%; +} +.ui.menu.seven.item .item { + width: 14.285%; +} +.ui.menu.eight.item .item { + width: 12.500%; +} +.ui.menu.nine.item .item { + width: 11.11%; +} +.ui.menu.ten.item .item { + width: 10.0%; +} +.ui.menu.eleven.item .item { + width: 9.09%; +} +.ui.menu.twelve.item .item { + width: 8.333%; +} + +/*-------------- + Fixed +---------------*/ + +.ui.menu.fixed { + position: fixed; + z-index: 101; + margin: 0em; + width: 100%; +} +.ui.menu.fixed, +.ui.menu.fixed .item:first-child, +.ui.menu.fixed .item:last-child { + border-radius: 0px !important; +} + +.ui.fixed.menu, +.ui[class*="top fixed"].menu { + top: 0px; + left: 0px; + right: auto; + bottom: auto; +} +.ui[class*="top fixed"].menu { + border-top: none; + border-left: none; + border-right: none; +} +.ui[class*="right fixed"].menu { + border-top: none; + border-bottom: none; + border-right: none; + top: 0px; + right: 0px; + left: auto; + bottom: auto; + width: auto; + height: 100%; +} +.ui[class*="bottom fixed"].menu { + border-bottom: none; + border-left: none; + border-right: none; + bottom: 0px; + left: 0px; + top: auto; + right: auto; +} +.ui[class*="left fixed"].menu { + border-top: none; + border-bottom: none; + border-left: none; + top: 0px; + left: 0px; + right: auto; + bottom: auto; + width: auto; + height: 100%; +} + +/* Coupling with Grid */ +.ui.fixed.menu + .ui.grid { + padding-top: @fixedPrecedingGridMargin; +} + + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.menu .item:after { + visibility: hidden; + position: absolute; + content: ''; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + background: none; + + margin: (@arrowBorderWidth / 2) 0em 0em; + width: @arrowSize; + height: @arrowSize; + + border: none; + border-bottom: @arrowBorder; + border-right: @arrowBorder; + + z-index: @arrowZIndex; + transition: @arrowTransition; +} +.ui.vertical.pointing.menu .item:after { + position: absolute; + top: 50%; + right: 0%; + bottom: auto; + left: auto; + + transform: translateX(50%) translateY(-50%) rotate(45deg); + margin: 0em -(@arrowBorderWidth / 2) 0em 0em; + + border: none; + border-top: @arrowBorder; + border-right: @arrowBorder; +} + +/* Active */ +.ui.pointing.menu .active.item:after { + visibility: visible; +} +.ui.pointing.menu .active.dropdown.item:after { + visibility: hidden; +} + +/* Don't double up pointers */ +.ui.pointing.menu .dropdown.active.item:after, +.ui.pointing.menu .active.item .menu .active.item:after { + display: none; +} + +/* Colors */ +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowHoverColor; +} +.ui.pointing.menu .active.item:after { + background-color: @arrowActiveColor; +} +.ui.pointing.menu .active.item:hover:after { + background-color: @arrowActiveHoverColor; +} + +.ui.vertical.pointing.menu .active.item:hover:after { + background-color: @arrowVerticalHoverColor; +} +.ui.vertical.pointing.menu .active.item:after { + background-color: @arrowVerticalActiveColor; +} +.ui.vertical.pointing.menu .menu .active.item:after { + background-color: @arrowVerticalSubMenuColor; +} + + + +/*-------------- + Attached +---------------*/ + +/* Middle */ +.ui.attached.menu { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; +} +.ui.attached + .ui.attached.menu:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].menu { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.menu[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].menu { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].menu:last-child { + margin-bottom: 0em; +} + +/* Attached Menu Item */ +.ui.top.attached.menu > .item:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.bottom.attached.menu > .item:first-child { + border-radius: 0em 0em 0em @borderRadius; +} + +/* Tabular Attached */ +.ui.attached.menu:not(.tabular) { + border: @attachedBorder; +} +.ui.attached.inverted.menu { + border: none; +} +.ui.attached.tabular.menu { + margin-left: 0; + margin-right: 0; + width: 100%; +} + +/*-------------- + Sizes +---------------*/ + +/* Mini */ +.ui.mini.menu { + font-size: @mini; +} +.ui.mini.vertical.menu { + width: @miniWidth; +} + +/* Tiny */ +.ui.tiny.menu { + font-size: @tiny; +} +.ui.tiny.vertical.menu { + width: @tinyWidth; +} + +/* Small */ +.ui.small.menu { + font-size: @small; +} +.ui.small.vertical.menu { + width: @smallWidth; +} + +/* Medium */ +.ui.menu { + font-size: @medium; +} +.ui.vertical.menu { + width: @mediumWidth; +} + +/* Large */ +.ui.large.menu { + font-size: @large; +} +.ui.large.vertical.menu { + width: @largeWidth; +} + +/* Huge */ +.ui.huge.menu { + font-size: @huge; +} +.ui.huge.vertical.menu { + width: @hugeWidth; +} + +/* Big */ +.ui.big.menu { + font-size: @big; +} +.ui.big.vertical.menu { + width: @bigWidth; +} + +/* Massive */ +.ui.massive.menu { + font-size: @massive; +} +.ui.massive.vertical.menu { + width: @massiveWidth; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/collections/message.less b/static/semantic/src/definitions/collections/message.less new file mode 100755 index 0000000..8712679 --- /dev/null +++ b/static/semantic/src/definitions/collections/message.less @@ -0,0 +1,481 @@ +/*! + * # Semantic UI - Message + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'message'; + +@import (multiple) '../../theme.config'; + +/******************************* + Message +*******************************/ + +.ui.message { + position: relative; + min-height: 1em; + margin: @verticalMargin 0em; + background: @background; + padding: @padding; + line-height: @lineHeight; + color: @textColor; + transition: @transition; + border-radius: @borderRadius; + box-shadow: @boxShadow; +} + +.ui.message:first-child { + margin-top: 0em; +} +.ui.message:last-child { + margin-bottom: 0em; +} + + +/*-------------- + Content +---------------*/ + +/* Header */ +.ui.message .header { + display: @headerDisplay; + font-family: @headerFont; + font-weight: @headerFontWeight; + margin: @headerMargin; +} + +/* Default font size */ +.ui.message .header:not(.ui) { + font-size: @headerFontSize; +} + +/* Paragraph */ +.ui.message p { + opacity: @messageTextOpacity; + margin: @messageParagraphMargin 0em; +} +.ui.message p:first-child { + margin-top: 0em; +} +.ui.message p:last-child { + margin-bottom: 0em; +} +.ui.message .header + p { + margin-top: @headerParagraphDistance; +} + +/* List */ +.ui.message .list:not(.ui) { + text-align: left; + padding: 0em; + opacity: @listOpacity; + list-style-position: @listStylePosition; + margin: @listMargin 0em 0em; +} +.ui.message .list:not(.ui):first-child { + margin-top: 0em; +} +.ui.message .list:not(.ui):last-child { + margin-bottom: 0em; +} +.ui.message .list:not(.ui) li { + position: relative; + list-style-type: none; + margin: 0em 0em @listItemMargin @listItemIndent; + padding: 0em; +} +.ui.message .list:not(.ui) li:before { + position: absolute; + content: '•'; + left: -1em; + height: 100%; + vertical-align: baseline; +} +.ui.message .list:not(.ui) li:last-child { + margin-bottom: 0em; +} + + +/* Icon */ +.ui.message > .icon { + margin-right: @iconDistance; +} + +/* Close Icon */ +.ui.message > .close.icon { + cursor: pointer; + position: absolute; + margin: 0em; + top: @closeTopDistance; + right: @closeRightDistance; + opacity: @closeOpacity; + transition: @closeTransition; +} +.ui.message > .close.icon:hover { + opacity: 1; +} + +/* First / Last Element */ +.ui.message > :first-child { + margin-top: 0em; +} +.ui.message > :last-child { + margin-bottom: 0em; +} + +/******************************* + Coupling +*******************************/ + +.ui.dropdown .menu > .message { + margin: 0px -@borderWidth; +} + +/******************************* + States +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.visible.visible.visible.message { + display: block; +} + +.ui.icon.visible.visible.visible.visible.message { + display: flex; +} + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.hidden.hidden.hidden.message { + display: none; +} + + +/******************************* + Variations +*******************************/ + +/*-------------- + Compact +---------------*/ + +.ui.compact.message { + display: inline-block; +} +.ui.compact.icon.message { + display: inline-flex; +} + + +/*-------------- + Attached +---------------*/ + +.ui.attached.message { + margin-bottom: @attachedYOffset; + border-radius: @borderRadius @borderRadius 0em 0em; + box-shadow: @attachedBoxShadow; + margin-left: @attachedXOffset; + margin-right: @attachedXOffset; +} +.ui.attached + .ui.attached.message:not(.top):not(.bottom) { + margin-top: @attachedYOffset; + border-radius: 0em; +} +.ui.bottom.attached.message { + margin-top: @attachedYOffset; + border-radius: 0em 0em @borderRadius @borderRadius; + box-shadow: @attachedBottomBoxShadow; +} +.ui.bottom.attached.message:not(:last-child) { + margin-bottom: @verticalMargin; +} +.ui.attached.icon.message { + width: auto; +} + + +/*-------------- + Icon +---------------*/ + +.ui.icon.message { + display: flex; + width: 100%; + align-items: center; +} +.ui.icon.message > .icon:not(.close) { + display: block; + flex: 0 0 auto; + width: auto; + line-height: 1; + vertical-align: @iconVerticalAlign; + font-size: @iconSize; + opacity: @iconOpacity; +} +.ui.icon.message > .content { + display: block; + flex: 1 1 auto; + vertical-align: @iconVerticalAlign; +} + + +.ui.icon.message .icon:not(.close) + .content { + padding-left: @iconContentDistance; +} +.ui.icon.message .circular.icon { + width: 1em; +} + +/*-------------- + Floating +---------------*/ + +.ui.floating.message { + box-shadow: @floatingBoxShadow; +} + + +/*-------------- + Colors +---------------*/ + +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +/*-------------- + Types +---------------*/ + +/* Positive */ +.ui.positive.message { + background-color: @positiveBackgroundColor; + color: @positiveTextColor; +} +.ui.positive.message, +.ui.attached.positive.message { + box-shadow: @positiveBoxShadow; +} +.ui.positive.message .header { + color: @positiveHeaderColor; +} + +/* Negative */ +.ui.negative.message { + background-color: @negativeBackgroundColor; + color: @negativeTextColor; +} +.ui.negative.message, +.ui.attached.negative.message { + box-shadow: @negativeBoxShadow; +} +.ui.negative.message .header { + color: @negativeHeaderColor; +} + +/* Info */ +.ui.info.message { + background-color: @infoBackgroundColor; + color: @infoTextColor; +} +.ui.info.message, +.ui.attached.info.message { + box-shadow: @infoBoxShadow; +} +.ui.info.message .header { + color: @infoHeaderColor; +} + +/* Warning */ +.ui.warning.message { + background-color: @warningBackgroundColor; + color: @warningTextColor; +} +.ui.warning.message, +.ui.attached.warning.message { + box-shadow: @warningBoxShadow; +} +.ui.warning.message .header { + color: @warningHeaderColor; +} + +/* Error */ +.ui.error.message { + background-color: @errorBackgroundColor; + color: @errorTextColor; +} +.ui.error.message, +.ui.attached.error.message { + box-shadow: @errorBoxShadow; +} +.ui.error.message .header { + color: @errorHeaderColor; +} + +/* Success */ +.ui.success.message { + background-color: @successBackgroundColor; + color: @successTextColor; +} +.ui.success.message, +.ui.attached.success.message { + box-shadow: @successBoxShadow; +} +.ui.success.message .header { + color: @successHeaderColor; +} + + +/* Colors */ +.ui.inverted.message, +.ui.black.message { + background-color: @black; + color: @invertedTextColor; +} + +.ui.red.message { + background-color: @redBackground; + color: @redTextColor; + box-shadow: @redBoxShadow; +} +.ui.red.message .header { + color: @redHeaderColor; +} + +.ui.orange.message { + background-color: @orangeBackground; + color: @orangeTextColor; + box-shadow: @orangeBoxShadow; +} +.ui.orange.message .header { + color: @orangeHeaderColor; +} + +.ui.yellow.message { + background-color: @yellowBackground; + color: @yellowTextColor; + box-shadow: @yellowBoxShadow; +} +.ui.yellow.message .header { + color: @yellowHeaderColor; +} + +.ui.olive.message { + background-color: @oliveBackground; + color: @oliveTextColor; + box-shadow: @oliveBoxShadow; +} +.ui.olive.message .header { + color: @oliveHeaderColor; +} + +.ui.green.message { + background-color: @greenBackground; + color: @greenTextColor; + box-shadow: @greenBoxShadow; +} +.ui.green.message .header { + color: @greenHeaderColor; +} + +.ui.teal.message { + background-color: @tealBackground; + color: @tealTextColor; + box-shadow: @tealBoxShadow; +} +.ui.teal.message .header { + color: @tealHeaderColor; +} + +.ui.blue.message { + background-color: @blueBackground; + color: @blueTextColor; + box-shadow: @blueBoxShadow; +} +.ui.blue.message .header { + color: @blueHeaderColor; +} + +.ui.violet.message { + background-color: @violetBackground; + color: @violetTextColor; + box-shadow: @violetBoxShadow; +} +.ui.violet.message .header { + color: @violetHeaderColor; +} + +.ui.purple.message { + background-color: @purpleBackground; + color: @purpleTextColor; + box-shadow: @purpleBoxShadow; +} +.ui.purple.message .header { + color: @purpleHeaderColor; +} + +.ui.pink.message { + background-color: @pinkBackground; + color: @pinkTextColor; + box-shadow: @pinkBoxShadow; +} +.ui.pink.message .header { + color: @pinkHeaderColor; +} + +.ui.brown.message { + background-color: @brownBackground; + color: @brownTextColor; + box-shadow: @brownBoxShadow; +} +.ui.brown.message .header { + color: @brownHeaderColor; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.message { + font-size: @relativeMini; +} +.ui.tiny.message { + font-size: @relativeTiny; +} +.ui.small.message { + font-size: @relativeSmall; +} +.ui.message { + font-size: @relativeMedium; +} +.ui.large.message { + font-size: @relativeLarge; +} +.ui.big.message { + font-size: @relativeBig; +} +.ui.huge.message { + font-size: @relativeHuge; +} +.ui.massive.message { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/collections/table.less b/static/semantic/src/definitions/collections/table.less new file mode 100755 index 0000000..240e830 --- /dev/null +++ b/static/semantic/src/definitions/collections/table.less @@ -0,0 +1,1119 @@ +/*! + * # Semantic UI - Table + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'collection'; +@element : 'table'; + +@import (multiple) '../../theme.config'; + +/******************************* + Table +*******************************/ + +/* Prototype */ +.ui.table { + width: 100%; + background: @background; + margin: @margin; + border: @border; + box-shadow: @boxShadow; + border-radius: @borderRadius; + text-align: @textAlign; + color: @color; + border-collapse: @borderCollapse; + border-spacing: @borderSpacing; +} + +.ui.table:first-child { + margin-top: 0em; +} +.ui.table:last-child { + margin-bottom: 0em; +} + +/******************************* + Parts +*******************************/ + +/* Table Content */ +.ui.table th, +.ui.table td { + transition: @transition; +} + +/* Headers */ +.ui.table thead { + box-shadow: @headerBoxShadow; +} +.ui.table thead th { + cursor: auto; + background: @headerBackground; + text-align: @headerAlign; + color: @headerColor; + padding: @headerVerticalPadding @headerHorizontalPadding; + vertical-align: @headerVerticalAlign; + font-style: @headerFontStyle; + font-weight: @headerFontWeight; + text-transform: @headerTextTransform; + border-bottom: @headerBorder; + border-left: @headerDivider; +} + +.ui.table thead tr > th:first-child { + border-left: none; +} + +.ui.table thead tr:first-child > th:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui.table thead tr:first-child > th:last-child { + border-radius: 0em @borderRadius 0em 0em; +} +.ui.table thead tr:first-child > th:only-child { + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Footer */ +.ui.table tfoot { + box-shadow: @footerBoxShadow; +} +.ui.table tfoot th { + cursor: auto; + border-top: @footerBorder; + background: @footerBackground; + text-align: @footerAlign; + color: @footerColor; + padding: @footerVerticalPadding @footerHorizontalPadding; + vertical-align: @footerVerticalAlign; + font-style: @footerFontStyle; + font-weight: @footerFontWeight; + text-transform: @footerTextTransform; +} +.ui.table tfoot tr > th:first-child { + border-left: none; +} +.ui.table tfoot tr:first-child > th:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui.table tfoot tr:first-child > th:last-child { + border-radius: 0em 0em @borderRadius 0em; +} +.ui.table tfoot tr:first-child > th:only-child { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Table Row */ +.ui.table tr td { + border-top: @rowBorder; +} +.ui.table tr:first-child td { + border-top: none; +} + +/* Repeated tbody */ +.ui.table tbody + tbody tr:first-child td { + border-top: @rowBorder; +} + +/* Table Cells */ +.ui.table td { + padding: @cellVerticalPadding @cellHorizontalPadding; + text-align: @cellTextAlign; +} + +/* Icons */ +.ui.table > .icon { + vertical-align: @iconVerticalAlign; +} +.ui.table > .icon:only-child { + margin: 0em; +} + +/* Table Segment */ +.ui.table.segment { + padding: 0em; +} +.ui.table.segment:after { + display: none; +} +.ui.table.segment.stacked:after { + display: block; +} + + +/* Responsive */ +@media only screen and (max-width : @largestMobileScreen) { + .ui.table:not(.unstackable) { + width: 100%; + } + .ui.table:not(.unstackable) tbody, + .ui.table:not(.unstackable) tr, + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + display: block !important; + width: auto !important; + display: block !important; + } + + .ui.table:not(.unstackable) { + padding: 0em; + } + .ui.table:not(.unstackable) thead { + display: @responsiveHeaderDisplay; + } + .ui.table:not(.unstackable) tfoot { + display: @responsiveFooterDisplay; + } + .ui.table:not(.unstackable) tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + + .ui.table:not(.unstackable) tr > th, + .ui.table:not(.unstackable) tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important; + box-shadow: @responsiveCellBoxShadow; + } + .ui.table:not(.unstackable) th:first-child, + .ui.table:not(.unstackable) td:first-child { + font-weight: @responsiveCellHeaderFontWeight; + } + + /* Definition Table */ + .ui.definition.table:not(.unstackable) thead th:first-child { + box-shadow: none !important; + } +} + + +/******************************* + Coupling +*******************************/ + +/* UI Image */ +.ui.table th .image, +.ui.table th .image img, +.ui.table td .image, +.ui.table td .image img { + max-width: none; +} + + +/******************************* + Types +*******************************/ + +/*-------------- + Complex +---------------*/ + +.ui.structured.table { + border-collapse: collapse; +} +.ui.structured.table thead th { + border-left: @headerDivider; + border-right: @headerDivider; +} +.ui.structured.sortable.table thead th { + border-left: @sortableBorder; + border-right: @sortableBorder; +} +.ui.structured.basic.table th { + border-left: @basicTableHeaderDivider; + border-right: @basicTableHeaderDivider; +} +.ui.structured.celled.table tr th, +.ui.structured.celled.table tr td { + border-left: @cellBorder; + border-right: @cellBorder; +} + +/*-------------- + Definition +---------------*/ + +.ui.definition.table thead:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionHeaderBackground; + font-weight: @definitionHeaderFontWeight; + color: @definitionHeaderColor; + box-shadow: -@borderWidth -@borderWidth 0px @borderWidth @definitionPageBackground; +} + +.ui.definition.table tfoot:not(.full-width) th:first-child { + pointer-events: none; + background: @definitionFooterBackground; + font-weight: @definitionFooterColor; + color: @definitionFooterFontWeight; + box-shadow: @borderWidth @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Remove Border */ +.ui.celled.definition.table thead:not(.full-width) th:first-child { + box-shadow: 0px -@borderWidth 0px @borderWidth @definitionPageBackground; +} +.ui.celled.definition.table tfoot:not(.full-width) th:first-child { + box-shadow: 0px @borderWidth 0px @borderWidth @definitionPageBackground; +} + +/* Highlight Defining Column */ +.ui.definition.table tr td:first-child:not(.ignored), +.ui.definition.table tr td.definition { + background: @definitionColumnBackground; + font-weight: @definitionColumnFontWeight; + color: @definitionColumnColor; + text-transform: @definitionColumnTextTransform; + box-shadow: @definitionColumnBoxShadow; + text-align: @definitionColumnTextAlign; + font-size: @definitionColumnFontSize; + padding-left: @definitionColumnHorizontalPadding; + padding-right: @definitionColumnHorizontalPadding; +} + + +/* Fix 2nd Column */ +.ui.definition.table thead:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table tfoot:not(.full-width) th:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} +.ui.definition.table td:nth-child(2) { + border-left: @borderWidth solid @borderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Positive +---------------*/ + +.ui.table tr.positive, +.ui.table td.positive { + box-shadow: @positiveBoxShadow; +} +.ui.table tr.positive, +.ui.table td.positive { + background: @positiveBackgroundColor !important; + color: @positiveColor !important; +} + +/*-------------- + Negative +---------------*/ + +.ui.table tr.negative, +.ui.table td.negative { + box-shadow: @negativeBoxShadow; +} +.ui.table tr.negative, +.ui.table td.negative { + background: @negativeBackgroundColor !important; + color: @negativeColor !important; +} + +/*-------------- + Error +---------------*/ + +.ui.table tr.error, +.ui.table td.error { + box-shadow: @errorBoxShadow; +} +.ui.table tr.error, +.ui.table td.error { + background: @errorBackgroundColor !important; + color: @errorColor !important; +} +/*-------------- + Warning +---------------*/ + +.ui.table tr.warning, +.ui.table td.warning { + box-shadow: @warningBoxShadow; +} +.ui.table tr.warning, +.ui.table td.warning { + background: @warningBackgroundColor !important; + color: @warningColor !important; +} + +/*-------------- + Active +---------------*/ + +.ui.table tr.active, +.ui.table td.active { + box-shadow: @activeBoxShadow; +} +.ui.table tr.active, +.ui.table td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} + + + +/*-------------- + Disabled +---------------*/ + +.ui.table tr.disabled td, +.ui.table tr td.disabled, +.ui.table tr.disabled:hover, +.ui.table tr:hover td.disabled { + pointer-events: none; + color: @disabledTextColor; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Stackable +---------------*/ + +@media only screen and (max-width : @largestTabletScreen) { + + .ui[class*="tablet stackable"].table, + .ui[class*="tablet stackable"].table tbody, + .ui[class*="tablet stackable"].table tr, + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + display: block !important; + width: 100% !important; + display: block !important; + } + + .ui[class*="tablet stackable"].table { + padding: 0em; + } + .ui[class*="tablet stackable"].table thead { + display: @responsiveHeaderDisplay; + } + .ui[class*="tablet stackable"].table tfoot { + display: @responsiveFooterDisplay; + } + .ui[class*="tablet stackable"].table tr { + padding-top: @responsiveRowVerticalPadding; + padding-bottom: @responsiveRowVerticalPadding; + box-shadow: @responsiveRowBoxShadow; + } + .ui[class*="tablet stackable"].table tr > th, + .ui[class*="tablet stackable"].table tr > td { + background: none; + border: none !important; + padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding; + box-shadow: @responsiveCellBoxShadow; + } + + /* Definition Table */ + .ui.definition[class*="tablet stackable"].table thead th:first-child { + box-shadow: none !important; + } +} + +/*-------------- + Text Alignment +---------------*/ + +.ui.table[class*="left aligned"], +.ui.table [class*="left aligned"] { + text-align: left; +} +.ui.table[class*="center aligned"], +.ui.table [class*="center aligned"] { + text-align: center; +} +.ui.table[class*="right aligned"], +.ui.table [class*="right aligned"] { + text-align: right; +} + +/*------------------ + Vertical Alignment +------------------*/ + +.ui.table[class*="top aligned"], +.ui.table [class*="top aligned"] { + vertical-align: top; +} +.ui.table[class*="middle aligned"], +.ui.table [class*="middle aligned"] { + vertical-align: middle; +} +.ui.table[class*="bottom aligned"], +.ui.table [class*="bottom aligned"] { + vertical-align: bottom; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.table th.collapsing, +.ui.table td.collapsing { + width: 1px; + white-space: nowrap; +} + +/*-------------- + Fixed +---------------*/ + +.ui.fixed.table { + table-layout: fixed; +} + +.ui.fixed.table th, +.ui.fixed.table td { + overflow: hidden; + text-overflow: ellipsis; +} + + +/*-------------- + Selectable +---------------*/ + +.ui.selectable.table tbody tr:hover, +.ui.table tbody tr td.selectable:hover { + background: @selectableBackground !important; + color: @selectableTextColor !important; +} +.ui.selectable.inverted.table tbody tr:hover, +.ui.inverted.table tbody tr td.selectable:hover { + background: @selectableInvertedBackground !important; + color: @selectableInvertedTextColor !important; +} + +/* Selectable Cell Link */ +.ui.table tbody tr td.selectable { + padding: 0em; +} +.ui.table tbody tr td.selectable > a:not(.ui) { + display: block; + color: inherit; + padding: @cellVerticalPadding @cellHorizontalPadding; +} + +/* Other States */ +.ui.selectable.table tr.error:hover, +.ui.table tr td.selectable.error:hover, +.ui.selectable.table tr:hover td.error { + background: @errorBackgroundHover !important; + color: @errorColorHover !important; +} +.ui.selectable.table tr.warning:hover, +.ui.table tr td.selectable.warning:hover, +.ui.selectable.table tr:hover td.warning { + background: @warningBackgroundHover !important; + color: @warningColorHover !important; +} +.ui.selectable.table tr.active:hover, +.ui.table tr td.selectable.active:hover, +.ui.selectable.table tr:hover td.active { + background: @activeBackgroundColor !important; + color: @activeColor !important; +} +.ui.selectable.table tr.positive:hover, +.ui.table tr td.selectable.positive:hover, +.ui.selectable.table tr:hover td.positive { + background: @positiveBackgroundHover !important; + color: @positiveColorHover !important; +} +.ui.selectable.table tr.negative:hover, +.ui.table tr td.selectable.negative:hover, +.ui.selectable.table tr:hover td.negative { + background: @negativeBackgroundHover !important; + color: @negativeColorHover !important; +} + + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.table { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached + .ui.attached.table:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].table { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.table[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui[class*="bottom attached"].table { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].table:last-child { + margin-bottom: 0em; +} + +/*-------------- + Striped +---------------*/ + +/* Table Striping */ +.ui.striped.table > tr:nth-child(2n), +.ui.striped.table tbody tr:nth-child(2n) { + background-color: @stripedBackground; +} + +/* Stripes */ +.ui.inverted.striped.table > tr:nth-child(2n), +.ui.inverted.striped.table tbody tr:nth-child(2n) { + background-color: @invertedStripedBackground; +} + +/* Allow striped active hover */ +.ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { + background: @activeBackgroundHover !important; + color: @activeColorHover !important; +} + +/*-------------- + Single Line +---------------*/ + +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} +.ui.table[class*="single line"], +.ui.table [class*="single line"] { + white-space: nowrap; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.table { + border-top: @coloredBorderSize solid @red; +} +.ui.inverted.red.table { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.table { + border-top: @coloredBorderSize solid @orange; +} +.ui.inverted.orange.table { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.table { + border-top: @coloredBorderSize solid @yellow; +} +.ui.inverted.yellow.table { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.table { + border-top: @coloredBorderSize solid @olive; +} +.ui.inverted.olive.table { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.table { + border-top: @coloredBorderSize solid @green; +} +.ui.inverted.green.table { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.table { + border-top: @coloredBorderSize solid @teal; +} +.ui.inverted.teal.table { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.table { + border-top: @coloredBorderSize solid @blue; +} +.ui.inverted.blue.table { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.table { + border-top: @coloredBorderSize solid @violet; +} +.ui.inverted.violet.table { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.table { + border-top: @coloredBorderSize solid @purple; +} +.ui.inverted.purple.table { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.table { + border-top: @coloredBorderSize solid @pink; +} +.ui.inverted.pink.table { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.table { + border-top: @coloredBorderSize solid @brown; +} +.ui.inverted.brown.table { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.table { + border-top: @coloredBorderSize solid @grey; +} +.ui.inverted.grey.table { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.table { + border-top: @coloredBorderSize solid @black; +} +.ui.inverted.black.table { + background-color: @black !important; + color: @white !important; +} + + +/*-------------- + Column Count +---------------*/ + +/* Grid Based */ +.ui.one.column.table td { + width: @oneColumn; +} +.ui.two.column.table td { + width: @twoColumn; +} +.ui.three.column.table td { + width: @threeColumn; +} +.ui.four.column.table td { + width: @fourColumn; +} +.ui.five.column.table td { + width: @fiveColumn; +} +.ui.six.column.table td { + width: @sixColumn; +} +.ui.seven.column.table td { + width: @sevenColumn; +} +.ui.eight.column.table td { + width: @eightColumn; +} +.ui.nine.column.table td { + width: @nineColumn; +} +.ui.ten.column.table td { + width: @tenColumn; +} +.ui.eleven.column.table td { + width: @elevenColumn; +} +.ui.twelve.column.table td { + width: @twelveColumn; +} +.ui.thirteen.column.table td { + width: @thirteenColumn; +} +.ui.fourteen.column.table td { + width: @fourteenColumn; +} +.ui.fifteen.column.table td { + width: @fifteenColumn; +} +.ui.sixteen.column.table td { + width: @sixteenColumn; +} + +/* Column Width */ +.ui.table th.one.wide, +.ui.table td.one.wide { + width: @oneWide; +} +.ui.table th.two.wide, +.ui.table td.two.wide { + width: @twoWide; +} +.ui.table th.three.wide, +.ui.table td.three.wide { + width: @threeWide; +} +.ui.table th.four.wide, +.ui.table td.four.wide { + width: @fourWide; +} +.ui.table th.five.wide, +.ui.table td.five.wide { + width: @fiveWide; +} +.ui.table th.six.wide, +.ui.table td.six.wide { + width: @sixWide; +} +.ui.table th.seven.wide, +.ui.table td.seven.wide { + width: @sevenWide; +} +.ui.table th.eight.wide, +.ui.table td.eight.wide { + width: @eightWide; +} +.ui.table th.nine.wide, +.ui.table td.nine.wide { + width: @nineWide; +} +.ui.table th.ten.wide, +.ui.table td.ten.wide { + width: @tenWide; +} +.ui.table th.eleven.wide, +.ui.table td.eleven.wide { + width: @elevenWide; +} +.ui.table th.twelve.wide, +.ui.table td.twelve.wide { + width: @twelveWide; +} +.ui.table th.thirteen.wide, +.ui.table td.thirteen.wide { + width: @thirteenWide; +} +.ui.table th.fourteen.wide, +.ui.table td.fourteen.wide { + width: @fourteenWide; +} +.ui.table th.fifteen.wide, +.ui.table td.fifteen.wide { + width: @fifteenWide; +} +.ui.table th.sixteen.wide, +.ui.table td.sixteen.wide { + width: @sixteenWide; +} + +/*-------------- + Sortable +---------------*/ + +.ui.sortable.table thead th { + cursor: pointer; + white-space: nowrap; + border-left: @sortableBorder; + color: @sortableColor; +} +.ui.sortable.table thead th:first-child { + border-left: none; +} +.ui.sortable.table thead th.sorted, +.ui.sortable.table thead th.sorted:hover { + user-select: none; +} + +.ui.sortable.table thead th:after { + display: none; + font-style: normal; + font-weight: @normal; + text-decoration: inherit; + content: ''; + height: 1em; + width: @sortableIconWidth; + opacity: @sortableIconOpacity; + margin: 0em 0em 0em @sortableIconDistance; + font-family: @sortableIconFont; +} +.ui.sortable.table thead th.ascending:after { + content: @sortableIconAscending; +} +.ui.sortable.table thead th.descending:after { + content: @sortableIconDescending; +} + +/* Hover */ +.ui.sortable.table th.disabled:hover { + cursor: auto; + color: @sortableDisabledColor; +} +.ui.sortable.table thead th:hover { + background: @sortableHoverBackground; + color: @sortableHoverColor; +} + +/* Sorted */ +.ui.sortable.table thead th.sorted { + background: @sortableActiveBackground; + color: @sortableActiveColor; +} +.ui.sortable.table thead th.sorted:after { + display: inline-block; +} + +/* Sorted Hover */ +.ui.sortable.table thead th.sorted:hover { + background: @sortableActiveHoverBackground; + color: @sortableActiveHoverColor; +} + +/* Inverted */ +.ui.inverted.sortable.table thead th.sorted { + background: @sortableInvertedActiveBackground; + color: @sortableInvertedActiveColor; +} +.ui.inverted.sortable.table thead th:hover { + background: @sortableInvertedHoverBackground; + color: @sortableInvertedHoverColor; +} +.ui.inverted.sortable.table thead th { + border-left-color: @sortableInvertedBorderColor; + border-right-color: @sortableInvertedBorderColor; +} + + +/*-------------- + Inverted +---------------*/ + +/* Text Color */ +.ui.inverted.table { + background: @invertedBackground; + color: @invertedCellColor; + border: @invertedBorder; +} +.ui.inverted.table th { + background-color: @invertedHeaderBackground; + border-color: @invertedHeaderBorderColor !important; + color: @invertedHeaderColor !important; +} +.ui.inverted.table tr td { + border-color: @invertedCellBorderColor !important; +} + +.ui.inverted.table tr.disabled td, +.ui.inverted.table tr td.disabled, +.ui.inverted.table tr.disabled:hover td, +.ui.inverted.table tr:hover td.disabled { + pointer-events: none; + color: @invertedDisabledTextColor; +} + +/* Definition */ +.ui.inverted.definition.table tfoot:not(.full-width) th:first-child, +.ui.inverted.definition.table thead:not(.full-width) th:first-child { + background: @definitionPageBackground; +} +.ui.inverted.definition.table tr td:first-child { + background: @invertedDefinitionColumnBackground; + color: @invertedDefinitionColumnColor; +} + +/*-------------- + Collapsing +---------------*/ + +.ui.collapsing.table { + width: auto; +} + +/*-------------- + Basic +---------------*/ + +.ui.basic.table { + background: @basicTableBackground; + border: @basicTableBorder; + box-shadow: @basicBoxShadow; +} +.ui.basic.table thead, +.ui.basic.table tfoot { + box-shadow: none; +} +.ui.basic.table th { + background: @basicTableHeaderBackground; + border-left: @basicTableHeaderDivider; +} +.ui.basic.table tbody tr { + border-bottom: @basicTableCellBorder; +} +.ui.basic.table td { + background: @basicTableCellBackground; +} +.ui.basic.striped.table tbody tr:nth-child(2n) { + background-color: @basicTableStripedBackground !important; +} + +/* Very Basic */ +.ui[class*="very basic"].table { + border: none; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td { + padding: @basicTableCellPadding; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child { + padding-left: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) th:last-child, +.ui[class*="very basic"].table:not(.sortable):not(.striped) td:last-child { + padding-right: 0em; +} +.ui[class*="very basic"].table:not(.sortable):not(.striped) thead tr:first-child th { + padding-top: 0em; +} + +/*-------------- + Celled +---------------*/ + +.ui.celled.table tr th, +.ui.celled.table tr td { + border-left: @cellBorder; +} +.ui.celled.table tr th:first-child, +.ui.celled.table tr td:first-child { + border-left: none; +} + +/*-------------- + Padded +---------------*/ + +.ui.padded.table th { + padding-left: @paddedHorizontalPadding; + padding-right: @paddedHorizontalPadding; +} +.ui.padded.table th, +.ui.padded.table td { + padding: @paddedVerticalPadding @paddedHorizontalPadding; +} + +/* Very */ +.ui[class*="very padded"].table th { + padding-left: @veryPaddedHorizontalPadding; + padding-right: @veryPaddedHorizontalPadding; +} +.ui[class*="very padded"].table td { + padding: @veryPaddedVerticalPadding @veryPaddedHorizontalPadding; +} + +/*-------------- + Compact +---------------*/ + +.ui.compact.table th { + padding-left: @compactHorizontalPadding; + padding-right: @compactHorizontalPadding; +} +.ui.compact.table td { + padding: @compactVerticalPadding @compactHorizontalPadding; +} + +/* Very */ +.ui[class*="very compact"].table th { + padding-left: @veryCompactHorizontalPadding; + padding-right: @veryCompactHorizontalPadding; +} +.ui[class*="very compact"].table td { + padding: @veryCompactVerticalPadding @veryCompactHorizontalPadding; +} + +/*-------------- + Sizes +---------------*/ + +/* Small */ +.ui.small.table { + font-size: @small; +} + +/* Standard */ +.ui.table { + font-size: @medium; +} + +/* Large */ +.ui.large.table { + font-size: @large; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/button.less b/static/semantic/src/definitions/elements/button.less new file mode 100755 index 0000000..ebe3d7d --- /dev/null +++ b/static/semantic/src/definitions/elements/button.less @@ -0,0 +1,3561 @@ +/*! + * # Semantic UI - Button + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'button'; + +@import (multiple) '../../theme.config'; + +/******************************* + Button +*******************************/ + +.ui.button { + cursor: pointer; + display: inline-block; + + min-height: 1em; + + outline: none; + border: none; + vertical-align: @verticalAlign; + background: @background; + color: @textColor; + + font-family: @fontFamily; + + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + + text-transform: @textTransform; + text-shadow: @textShadow; + font-weight: @fontWeight; + line-height: @lineHeight; + font-style: normal; + text-align: center; + text-decoration: none; + + border-radius: @borderRadius; + box-shadow: @boxShadow; + + user-select: none; + transition: @transition; + will-change: @willChange; + + -webkit-tap-highlight-color: @tapColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Hover +---------------*/ + +.ui.button:hover { + background-color: @hoverBackgroundColor; + background-image: @hoverBackgroundImage; + box-shadow: @hoverBoxShadow; + color: @hoverColor; +} + +.ui.button:hover .icon { + opacity: @iconHoverOpacity; +} + +/*-------------- + Focus +---------------*/ + +.ui.button:focus { + background-color: @focusBackgroundColor; + color: @focusColor; + background-image: @focusBackgroundImage !important; + box-shadow: @focusBoxShadow !important; +} + +.ui.button:focus .icon { + opacity: @iconFocusOpacity; +} + +/*-------------- + Down +---------------*/ + +.ui.button:active, +.ui.active.button:active { + background-color: @downBackgroundColor; + background-image: @downBackgroundImage; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------- + Active +---------------*/ + +.ui.active.button { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; + box-shadow: @activeBoxShadow; + color: @activeColor; +} +.ui.active.button:hover { + background-color: @activeHoverBackgroundColor; + background-image: @activeHoverBackgroundImage; + color: @activeHoverColor; +} +.ui.active.button:active { + background-color: @activeBackgroundColor; + background-image: @activeBackgroundImage; +} + + +/*-------------- + Loading +---------------*/ + +/* Specificity hack */ +.ui.loading.loading.loading.loading.loading.loading.button { + position: relative; + cursor: default; + text-shadow: none !important; + color: transparent !important; + opacity: @loadingOpacity; + pointer-events: @loadingPointerEvents; + transition: @loadingTransition; +} +.ui.loading.button:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @invertedLoaderFillColor; +} +.ui.loading.button:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @invertedLoaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} +.ui.labeled.icon.loading.button .icon { + background-color: transparent; + box-shadow: none; +} + +@keyframes button-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.ui.basic.loading.button:not(.inverted):before { + border-color: @loaderFillColor; +} +.ui.basic.loading.button:not(.inverted):after { + border-top-color: @loaderLineColor; +} + +/*------------------- + Disabled +--------------------*/ + +.ui.buttons .disabled.button, +.ui.disabled.button, +.ui.button:disabled, +.ui.disabled.button:hover, +.ui.disabled.active.button { + cursor: default; + opacity: @disabledOpacity !important; + background-image: none !important; + box-shadow: none !important; + pointer-events: none !important; +} + +/* Basic Group With Disabled */ +.ui.basic.buttons .ui.disabled.button { + border-color: @disabledBorderColor; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Animated +--------------------*/ + +.ui.animated.button { + position: relative; + overflow: hidden; + padding-right: 0em !important; + vertical-align: @animatedVerticalAlign; + z-index: @animatedZIndex; +} + +.ui.animated.button .content { + will-change: transform, opacity; +} +.ui.animated.button .visible.content { + position: relative; + margin-right: @horizontalPadding; +} +.ui.animated.button .hidden.content { + position: absolute; + width: 100%; +} + +/* Horizontal */ +.ui.animated.button .visible.content, +.ui.animated.button .hidden.content { + transition: right @animationDuration @animationEasing 0s; +} +.ui.animated.button .visible.content { + left: auto; + right: 0%; +} +.ui.animated.button .hidden.content { + top: 50%; + left: auto; + right: -100%; + margin-top: -(@lineHeight / 2); +} +.ui.animated.button:focus .visible.content, +.ui.animated.button:hover .visible.content { + left: auto; + right: 200%; +} +.ui.animated.button:focus .hidden.content, +.ui.animated.button:hover .hidden.content { + left: auto; + right: 0%; +} + +/* Vertical */ +.ui.vertical.animated.button .visible.content, +.ui.vertical.animated.button .hidden.content { + transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.vertical.animated.button .visible.content { + transform: translateY(0%); + right: auto; +} +.ui.vertical.animated.button .hidden.content { + top: -50%; + left: 0%; + right: auto; +} +.ui.vertical.animated.button:focus .visible.content, +.ui.vertical.animated.button:hover .visible.content { + transform: translateY(200%); + right: auto; +} +.ui.vertical.animated.button:focus .hidden.content, +.ui.vertical.animated.button:hover .hidden.content { + top: 50%; + right: auto; +} + +/* Fade */ +.ui.fade.animated.button .visible.content, +.ui.fade.animated.button .hidden.content { + transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing; +} +.ui.fade.animated.button .visible.content { + left: auto; + right: auto; + opacity: 1; + transform: scale(1); +} +.ui.fade.animated.button .hidden.content { + opacity: 0; + left: 0%; + right: auto; + transform: scale(@fadeScaleHigh); +} +.ui.fade.animated.button:focus .visible.content, +.ui.fade.animated.button:hover .visible.content { + left: auto; + right: auto; + opacity: 0; + transform: scale(@fadeScaleLow); +} +.ui.fade.animated.button:focus .hidden.content, +.ui.fade.animated.button:hover .hidden.content { + left: 0%; + right: auto; + opacity: 1; + transform: scale(1); +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.button { + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + background: transparent none; + color: @white; + text-shadow: none !important; +} + +/* Group */ +.ui.inverted.buttons .button { + margin: @invertedGroupButtonOffset; +} +.ui.inverted.buttons .button:first-child { + margin-left: 0em; +} +.ui.inverted.vertical.buttons .button { + margin: @invertedVerticalGroupButtonOffset; +} +.ui.inverted.vertical.buttons .button:first-child { + margin-top: 0em; +} + +/* States */ + +/* Hover */ +.ui.inverted.button:hover { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @hoverColor; +} + +/* Active / Focus */ +.ui.inverted.button:focus, +.ui.inverted.button.active { + background: @white; + box-shadow: 0px 0px 0px @invertedBorderSize @white inset !important; + color: @focusColor; +} + +/* Active Focus */ +.ui.inverted.button.active:focus { + background: @midWhite; + box-shadow: 0px 0px 0px @invertedBorderSize @midWhite inset !important; + color: @focusColor; +} + + +/*------------------- + Labeled Button +--------------------*/ + +.ui.labeled.button:not(.icon) { + display: inline-flex; + flex-direction: row; + background: none !important; + padding: 0px !important; + border: none !important; + box-shadow: none !important; +} + +.ui.labeled.button > .button { + margin: 0px; +} +.ui.labeled.button > .label { + display: flex; + align-items: @labeledLabelAlign; + margin: 0px 0px 0px @labeledLabelBorderOffset !important; + font-size: @labeledLabelFontSize; + padding: @labeledLabelPadding; + font-size: @labeledLabelFontSize; + border-color: @labeledLabelBorderColor; +} + +/* Tag */ +.ui.labeled.button > .tag.label:before { + width: @labeledTagLabelSize; + height: @labeledTagLabelSize; +} + +/* Right */ +.ui.labeled.button:not([class*="left labeled"]) > .button { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.button:not([class*="left labeled"]) > .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +/* Left Side */ +.ui[class*="left labeled"].button > .button { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.ui[class*="left labeled"].button > .label { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} + +/*------------------- + Social +--------------------*/ + +/* Facebook */ +.ui.facebook.button { + background-color: @facebookColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.facebook.button:hover { + background-color: @facebookHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.facebook.button:active { + background-color: @facebookDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Twitter */ +.ui.twitter.button { + background-color: @twitterColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.twitter.button:hover { + background-color: @twitterHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.twitter.button:active { + background-color: @twitterDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Google Plus */ +.ui.google.plus.button { + background-color: @googlePlusColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.google.plus.button:hover { + background-color: @googlePlusHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.google.plus.button:active { + background-color: @googlePlusDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Linked In */ +.ui.linkedin.button { + background-color: @linkedInColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:hover { + background-color: @linkedInHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.linkedin.button:active { + background-color: @linkedInDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* YouTube */ +.ui.youtube.button { + background-color: @youtubeColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.youtube.button:hover { + background-color: @youtubeHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.youtube.button:active { + background-color: @youtubeDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Instagram */ +.ui.instagram.button { + background-color: @instagramColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.instagram.button:hover { + background-color: @instagramHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.instagram.button:active { + background-color: @instagramDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* Pinterest */ +.ui.pinterest.button { + background-color: @pinterestColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.pinterest.button:hover { + background-color: @pinterestHoverColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} +.ui.pinterest.button:active { + background-color: @pinterestDownColor; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; +} + +/* VK */ +.ui.vk.button { + background-color: #4D7198; + color: @white; + background-image: @coloredBackgroundImage; + box-shadow: @coloredBoxShadow; +} +.ui.vk.button:hover { + background-color: @vkHoverColor; + color: @white; +} +.ui.vk.button:active { + background-color: @vkDownColor; + color: @white; +} + +/*-------------- + Icon +---------------*/ + +.ui.button > .icon:not(.button) { + height: @iconHeight; + opacity: @iconOpacity; + margin: @iconMargin; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + color: @iconColor; +} + +.ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { + margin: @iconMargin; +} +.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { + margin: @rightIconMargin; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Floated +--------------------*/ + +.ui[class*="left floated"].buttons, +.ui[class*="left floated"].button { + float: left; + margin-left: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].buttons, +.ui[class*="right floated"].button { + float: right; + margin-right: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.buttons .button, +.ui.compact.button { + padding: @compactVerticalPadding @compactHorizontalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.icon.buttons .button, +.ui.compact.icon.button { + padding: @compactVerticalPadding @compactVerticalPadding ( @compactVerticalPadding + @shadowOffset ); +} +.ui.compact.labeled.icon.buttons .button, +.ui.compact.labeled.icon.button { + padding: @compactVerticalPadding (@compactHorizontalPadding + @labeledIconWidth) ( @compactVerticalPadding + @shadowOffset ); +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.buttons .button, +.ui.mini.buttons .or, +.ui.mini.button { + font-size: @mini; +} +.ui.tiny.buttons .button, +.ui.tiny.buttons .or, +.ui.tiny.button { + font-size: @tiny; +} +.ui.small.buttons .button, +.ui.small.buttons .or, +.ui.small.button { + font-size: @small; +} +.ui.buttons .button, +.ui.buttons .or, +.ui.button { + font-size: @medium; +} +.ui.large.buttons .button, +.ui.large.buttons .or, +.ui.large.button { + font-size: @large; +} +.ui.big.buttons .button, +.ui.big.buttons .or, +.ui.big.button { + font-size: @big; +} +.ui.huge.buttons .button, +.ui.huge.buttons .or, +.ui.huge.button { + font-size: @huge; +} +.ui.massive.buttons .button, +.ui.massive.buttons .or, +.ui.massive.button { + font-size: @massive; +} + +/*-------------- + Icon Only +---------------*/ + +.ui.icon.buttons .button, +.ui.icon.button { + padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); +} +.ui.icon.buttons .button > .icon, +.ui.icon.button > .icon { + opacity: @iconButtonOpacity; + margin: 0em !important; + vertical-align: top; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.buttons .button, +.ui.basic.button { + background: @basicBackground !important; + color: @basicTextColor !important; + font-weight: @basicFontWeight; + border-radius: @basicBorderRadius; + text-transform: @basicTextTransform; + text-shadow: none !important; + box-shadow: @basicBoxShadow; +} +.ui.basic.buttons { + box-shadow: @basicGroupBoxShadow; + border: @basicGroupBorder; + border-radius: @borderRadius; +} +.ui.basic.buttons .button { + border-radius: 0em; +} + +.ui.basic.buttons .button:hover, +.ui.basic.button:hover { + background: @basicHoverBackground !important; + color: @basicHoverTextColor !important; + box-shadow: @basicHoverBoxShadow; +} +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { + background: @basicFocusBackground !important; + color: @basicFocusTextColor !important; + box-shadow: @basicFocusBoxShadow; +} +.ui.basic.buttons .button:active, +.ui.basic.button:active { + background: @basicDownBackground !important; + color: @basicDownTextColor !important; + box-shadow: @basicDownBoxShadow; +} +.ui.basic.buttons .active.button, +.ui.basic.active.button { + background: @basicActiveBackground !important; + box-shadow: @basicActiveBoxShadow !important; + color: @basicActiveTextColor !important; +} +.ui.basic.buttons .active.button:hover, +.ui.basic.active.button:hover { + background-color: @transparentBlack; +} + +/* Vertical */ +.ui.basic.buttons .button:hover { + box-shadow: @basicHoverBoxShadow inset; +} +.ui.basic.buttons .button:active { + box-shadow: @basicDownBoxShadow inset; +} +.ui.basic.buttons .active.button { + box-shadow: @basicActiveBoxShadow !important; +} + +/* Standard Basic Inverted */ +.ui.basic.inverted.buttons .button, +.ui.basic.inverted.button { + background-color: transparent !important; + color: @offWhite !important; + box-shadow: @basicInvertedBoxShadow !important; +} +.ui.basic.inverted.buttons .button:hover, +.ui.basic.inverted.button:hover { + color: @white !important; + box-shadow: @basicInvertedHoverBoxShadow !important; +} +.ui.basic.inverted.buttons .button:focus, +.ui.basic.inverted.button:focus { + color: @white !important; + box-shadow: @basicInvertedFocusBoxShadow !important; +} +.ui.basic.inverted.buttons .button:active, +.ui.basic.inverted.button:active { + background-color: @transparentWhite !important; + color: @white !important; + box-shadow: @basicInvertedDownBoxShadow !important; +} +.ui.basic.inverted.buttons .active.button, +.ui.basic.inverted.active.button { + background-color: @transparentWhite; + color: @invertedTextColor; + text-shadow: @invertedTextShadow; + box-shadow: @basicInvertedActiveBoxShadow; +} +.ui.basic.inverted.buttons .active.button:hover, +.ui.basic.inverted.active.button:hover { + background-color: @strongTransparentWhite; + box-shadow: @basicInvertedHoverBoxShadow !important; +} + + +/* Basic Group */ +.ui.basic.buttons .button { + border-left: @basicGroupBorder; + box-shadow: none; +} +.ui.basic.vertical.buttons .button { + border-left: none; +} +.ui.basic.vertical.buttons .button { + border-left-width: 0px; + border-top: @basicGroupBorder; +} +.ui.basic.vertical.buttons .button:first-child { + border-top-width: 0px; +} + + + +/*-------------- + Labeled Icon +---------------*/ + +.ui.labeled.icon.buttons .button, +.ui.labeled.icon.button { + position: relative; + padding-left: @labeledIconPadding !important; + padding-right: @horizontalPadding !important; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + position: absolute; + height: 100%; + line-height: 1; + border-radius: 0px; + border-top-left-radius: inherit; + border-bottom-left-radius: inherit; + text-align: center; + + margin: @labeledIconMargin; + width: @labeledIconWidth; + background-color: @labeledIconBackgroundColor; + color: @labeledIconColor; + box-shadow: @labeledIconLeftShadow; +} + +/* Left Labeled */ +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + top: 0em; + left: 0em; +} + +/* Right Labeled */ +.ui[class*="right labeled"].icon.button { + padding-right: @labeledIconPadding !important; + padding-left: @horizontalPadding !important; +} +.ui[class*="right labeled"].icon.button > .icon { + left: auto; + right: 0em; + border-radius: 0px; + border-top-right-radius: inherit; + border-bottom-right-radius: inherit; + box-shadow: @labeledIconRightShadow; +} + + +.ui.labeled.icon.buttons > .button > .icon:before, +.ui.labeled.icon.button > .icon:before, +.ui.labeled.icon.buttons > .button > .icon:after, +.ui.labeled.icon.button > .icon:after { + display: block; + position: absolute; + width: 100%; + top: 50%; + text-align: center; + transform: translateY(-50%); +} + +.ui.labeled.icon.buttons .button > .icon { + border-radius: 0em; +} +.ui.labeled.icon.buttons .button:first-child > .icon { + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.labeled.icon.buttons .button:last-child > .icon { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:first-child > .icon { + border-radius: 0em; + border-top-left-radius: @borderRadius; +} +.ui.vertical.labeled.icon.buttons .button:last-child > .icon { + border-radius: 0em; + border-bottom-left-radius: @borderRadius; +} + +/* Fluid Labeled */ +.ui.fluid[class*="left labeled"].icon.button, +.ui.fluid[class*="right labeled"].icon.button { + padding-left: @horizontalPadding !important; + padding-right: @horizontalPadding !important; +} + + + + +/*-------------- + Toggle +---------------*/ + +/* Toggle (Modifies active state to give affordances) */ +.ui.toggle.buttons .active.button, +.ui.buttons .button.toggle.active, +.ui.button.toggle.active { + background-color: @positiveColor !important; + box-shadow: none !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} +.ui.button.toggle.active:hover { + background-color: @positiveColorHover !important; + text-shadow: @invertedTextShadow; + color: @invertedTextColor !important; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.button { + border-radius: 10em; +} +.ui.circular.button > .icon { + width: 1em; + vertical-align: baseline; +} + + +/*------------------- + Or Buttons +--------------------*/ + +.ui.buttons .or { + position: relative; + width: @orGap; + height: @orHeight; + z-index: @orZIndex; +} +.ui.buttons .or:before { + position: absolute; + text-align: center; + border-radius: @circularRadius; + + content: @orText; + top: 50%; + left: 50%; + background-color: @orBackgroundColor; + text-shadow: @orTextShadow; + + margin-top: @orVerticalOffset; + margin-left: @orHorizontalOffset; + + width: @orCircleSize; + height: @orCircleSize; + + line-height: @orLineHeight; + color: @orTextColor; + + font-style: @orTextStyle; + font-weight: @orTextWeight; + + box-shadow: @orBoxShadow; +} +.ui.buttons .or[data-text]:before { + content: attr(data-text); +} + +/* Fluid Or */ +.ui.fluid.buttons .or { + width: 0em !important; +} +.ui.fluid.buttons .or:after { + display: none; +} + + +/*------------------- + Attached +--------------------*/ + + +/* Singular */ +.ui.attached.button { + position: relative; + display: block; + margin: 0em; + border-radius: 0em; + box-shadow: @attachedBoxShadow !important; +} + +/* Top / Bottom */ +.ui.attached.top.button { + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.attached.bottom.button { + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Left / Right */ +.ui.left.attached.button { + display: inline-block; + border-left: none; + text-align: right; + + padding-right: @attachedHorizontalPadding; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui.right.attached.button { + display: inline-block; + text-align: left; + padding-left: @attachedHorizontalPadding; + border-radius: 0em @borderRadius @borderRadius 0em; +} + +/* Plural */ +.ui.attached.buttons { + position: relative; + display: flex; + border-radius: 0em; + width: auto !important; + z-index: @attachedZIndex; + margin-left: @attachedOffset; + margin-right: @attachedOffset; +} +.ui.attached.buttons .button { + margin: 0em; +} +.ui.attached.buttons .button:first-child { + border-radius: 0em; +} +.ui.attached.buttons .button:last-child { + border-radius: 0em; +} + +/* Top / Bottom */ +.ui[class*="top attached"].buttons { + margin-bottom: @attachedOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui[class*="top attached"].buttons .button:first-child { + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="top attached"].buttons .button:last-child { + border-radius: 0em @borderRadius 0em 0em; +} + +.ui[class*="bottom attached"].buttons { + margin-top: @attachedOffset; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:first-child { + border-radius: 0em 0em 0em @borderRadius; +} +.ui[class*="bottom attached"].buttons .button:last-child { + border-radius: 0em 0em @borderRadius 0em; +} + +/* Left / Right */ +.ui[class*="left attached"].buttons { + display: inline-flex; + margin-right: 0em; + margin-left: @attachedOffset; + border-radius: 0em @borderRadius @borderRadius 0em; +} +.ui[class*="left attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: 0em @borderRadius 0em 0em; +} +.ui[class*="left attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em @borderRadius 0em; +} + +.ui[class*="right attached"].buttons { + display: inline-flex; + margin-left: 0em; + margin-right: @attachedOffset; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right attached"].buttons .button:first-child { + margin-left: @attachedOffset; + border-radius: @borderRadius 0em 0em 0em; +} +.ui[class*="right attached"].buttons .button:last-child { + margin-left: @attachedOffset; + border-radius: 0em 0em 0em @borderRadius; +} + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.buttons, +.ui.fluid.button { + width: 100%; +} +.ui.fluid.button { + display: block; +} + +.ui.two.buttons { + width: 100%; +} +.ui.two.buttons > .button { + width: 50%; +} + +.ui.three.buttons { + width: 100%; +} +.ui.three.buttons > .button { + width: 33.333%; +} + +.ui.four.buttons { + width: 100%; +} +.ui.four.buttons > .button { + width: 25%; +} + +.ui.five.buttons { + width: 100%; +} +.ui.five.buttons > .button { + width: 20%; +} + +.ui.six.buttons { + width: 100%; +} +.ui.six.buttons > .button { + width: 16.666%; +} + +.ui.seven.buttons { + width: 100%; +} +.ui.seven.buttons > .button { + width: 14.285%; +} + +.ui.eight.buttons { + width: 100%; +} +.ui.eight.buttons > .button { + width: 12.500%; +} + +.ui.nine.buttons { + width: 100%; +} +.ui.nine.buttons > .button { + width: 11.11%; +} + +.ui.ten.buttons { + width: 100%; +} +.ui.ten.buttons > .button { + width: 10%; +} + +.ui.eleven.buttons { + width: 100%; +} +.ui.eleven.buttons > .button { + width: 9.09%; +} + +.ui.twelve.buttons { + width: 100%; +} +.ui.twelve.buttons > .button { + width: 8.3333%; +} + +/* Fluid Vertical Buttons */ +.ui.fluid.vertical.buttons, +.ui.fluid.vertical.buttons > .button { + display: flex; + width: auto; +} + +.ui.two.vertical.buttons > .button { + height: 50%; +} +.ui.three.vertical.buttons > .button { + height: 33.333%; +} +.ui.four.vertical.buttons > .button { + height: 25%; +} +.ui.five.vertical.buttons > .button { + height: 20%; +} +.ui.six.vertical.buttons > .button { + height: 16.666%; +} +.ui.seven.vertical.buttons > .button { + height: 14.285%; +} +.ui.eight.vertical.buttons > .button { + height: 12.500%; +} +.ui.nine.vertical.buttons > .button { + height: 11.11%; +} +.ui.ten.vertical.buttons > .button { + height: 10%; +} +.ui.eleven.vertical.buttons > .button { + height: 9.09%; +} +.ui.twelve.vertical.buttons > .button { + height: 8.3333%; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Black ---*/ +.ui.black.buttons .button, +.ui.black.button { + background-color: @black; + color: @blackTextColor; + text-shadow: @blackTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.black.button { + box-shadow: @coloredBoxShadow; +} +.ui.black.buttons .button:hover, +.ui.black.button:hover { + background-color: @blackHover; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:focus, +.ui.black.button:focus { + background-color: @blackFocus; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .button:active, +.ui.black.button:active { + background-color: @blackDown; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} +.ui.black.buttons .active.button, +.ui.black.buttons .active.button:active, +.ui.black.active.button, +.ui.black.button .active.button:active { + background-color: @blackActive; + color: @blackTextColor; + text-shadow: @blackTextShadow; +} + +/* Basic */ +.ui.basic.black.buttons .button, +.ui.basic.black.button { + box-shadow: 0px 0px 0px @basicBorderSize @black inset !important; + color: @black !important; +} +.ui.basic.black.buttons .button:hover, +.ui.basic.black.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackHover inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .button:focus, +.ui.basic.black.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackFocus inset !important; + color: @blackHover !important; +} +.ui.basic.black.buttons .active.button, +.ui.basic.black.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackActive inset !important; + color: @blackDown !important; +} +.ui.basic.black.buttons .button:active, +.ui.basic.black.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blackDown inset !important; + color: @blackDown !important; +} +.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.black.buttons .button, +.ui.inverted.black.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover, +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus, +.ui.inverted.black.buttons .button.active, +.ui.inverted.black.button.active, +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + box-shadow: none !important; + color: @lightBlackTextColor; +} +.ui.inverted.black.buttons .button:hover, +.ui.inverted.black.button:hover { + background-color: @lightBlackHover; +} +.ui.inverted.black.buttons .button:focus, +.ui.inverted.black.button:focus { + background-color: @lightBlackFocus; +} +.ui.inverted.black.buttons .active.button, +.ui.inverted.black.active.button { + background-color: @lightBlackActive; +} +.ui.inverted.black.buttons .button:active, +.ui.inverted.black.button:active { + background-color: @lightBlackDown; +} + +/* Inverted Basic */ +.ui.inverted.black.basic.buttons .button, +.ui.inverted.black.buttons .basic.button, +.ui.inverted.black.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:hover, +.ui.inverted.black.buttons .basic.button:hover, +.ui.inverted.black.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackHover inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.buttons .button:focus, +.ui.inverted.black.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackFocus inset !important; + color: @lightBlack !important; +} +.ui.inverted.black.basic.buttons .active.button, +.ui.inverted.black.buttons .basic.active.button, +.ui.inverted.black.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackActive inset !important; + color: @white !important; +} +.ui.inverted.black.basic.buttons .button:active, +.ui.inverted.black.buttons .basic.button:active, +.ui.inverted.black.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlackDown inset !important; + color: @white !important; +} + +/*--- Grey ---*/ +.ui.grey.buttons .button, +.ui.grey.button { + background-color: @grey; + color: @greyTextColor; + text-shadow: @greyTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.grey.button { + box-shadow: @coloredBoxShadow; +} +.ui.grey.buttons .button:hover, +.ui.grey.button:hover { + background-color: @greyHover; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:focus, +.ui.grey.button:focus { + background-color: @greyFocus; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .button:active, +.ui.grey.button:active { + background-color: @greyDown; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} +.ui.grey.buttons .active.button, +.ui.grey.buttons .active.button:active, +.ui.grey.active.button, +.ui.grey.button .active.button:active { + background-color: @greyActive; + color: @greyTextColor; + text-shadow: @greyTextShadow; +} + +/* Basic */ +.ui.basic.grey.buttons .button, +.ui.basic.grey.button { + box-shadow: 0px 0px 0px @basicBorderSize @grey inset !important; + color: @grey !important; +} +.ui.basic.grey.buttons .button:hover, +.ui.basic.grey.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyHover inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .button:focus, +.ui.basic.grey.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyFocus inset !important; + color: @greyHover !important; +} +.ui.basic.grey.buttons .active.button, +.ui.basic.grey.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyActive inset !important; + color: @greyDown !important; +} +.ui.basic.grey.buttons .button:active, +.ui.basic.grey.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greyDown inset !important; + color: @greyDown !important; +} +.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.grey.buttons .button, +.ui.inverted.grey.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @solidBorderColor inset !important; + color: @invertedTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover, +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus, +.ui.inverted.grey.buttons .button.active, +.ui.inverted.grey.button.active, +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + box-shadow: none !important; + color: @lightGreyTextColor; +} +.ui.inverted.grey.buttons .button:hover, +.ui.inverted.grey.button:hover { + background-color: @lightGreyHover; +} +.ui.inverted.grey.buttons .button:focus, +.ui.inverted.grey.button:focus { + background-color: @lightGreyFocus; +} +.ui.inverted.grey.buttons .active.button, +.ui.inverted.grey.active.button { + background-color: @lightGreyActive; +} +.ui.inverted.grey.buttons .button:active, +.ui.inverted.grey.button:active { + background-color: @lightGreyDown; +} + +/* Inverted Basic */ +.ui.inverted.grey.basic.buttons .button, +.ui.inverted.grey.buttons .basic.button, +.ui.inverted.grey.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:hover, +.ui.inverted.grey.buttons .basic.button:hover, +.ui.inverted.grey.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyHover inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.buttons .button:focus, +.ui.inverted.grey.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyFocus inset !important; + color: @lightGrey !important; +} +.ui.inverted.grey.basic.buttons .active.button, +.ui.inverted.grey.buttons .basic.active.button, +.ui.inverted.grey.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyActive inset !important; + color: @white !important; +} +.ui.inverted.grey.basic.buttons .button:active, +.ui.inverted.grey.buttons .basic.button:active, +.ui.inverted.grey.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreyDown inset !important; + color: @white !important; +} + + +/*--- Brown ---*/ +.ui.brown.buttons .button, +.ui.brown.button { + background-color: @brown; + color: @brownTextColor; + text-shadow: @brownTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.brown.button { + box-shadow: @coloredBoxShadow; +} +.ui.brown.buttons .button:hover, +.ui.brown.button:hover { + background-color: @brownHover; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:focus, +.ui.brown.button:focus { + background-color: @brownFocus; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .button:active, +.ui.brown.button:active { + background-color: @brownDown; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} +.ui.brown.buttons .active.button, +.ui.brown.buttons .active.button:active, +.ui.brown.active.button, +.ui.brown.button .active.button:active { + background-color: @brownActive; + color: @brownTextColor; + text-shadow: @brownTextShadow; +} + +/* Basic */ +.ui.basic.brown.buttons .button, +.ui.basic.brown.button { + box-shadow: 0px 0px 0px @basicBorderSize @brown inset !important; + color: @brown !important; +} +.ui.basic.brown.buttons .button:hover, +.ui.basic.brown.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownHover inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .button:focus, +.ui.basic.brown.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownFocus inset !important; + color: @brownHover !important; +} +.ui.basic.brown.buttons .active.button, +.ui.basic.brown.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownActive inset !important; + color: @brownDown !important; +} +.ui.basic.brown.buttons .button:active, +.ui.basic.brown.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @brownDown inset !important; + color: @brownDown !important; +} +.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.brown.buttons .button, +.ui.inverted.brown.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrown inset !important; + color: @lightBrown; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover, +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus, +.ui.inverted.brown.buttons .button.active, +.ui.inverted.brown.button.active, +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + box-shadow: none !important; + color: @lightBrownTextColor; +} +.ui.inverted.brown.buttons .button:hover, +.ui.inverted.brown.button:hover { + background-color: @lightBrownHover; +} +.ui.inverted.brown.buttons .button:focus, +.ui.inverted.brown.button:focus { + background-color: @lightBrownFocus; +} +.ui.inverted.brown.buttons .active.button, +.ui.inverted.brown.active.button { + background-color: @lightBrownActive; +} +.ui.inverted.brown.buttons .button:active, +.ui.inverted.brown.button:active { + background-color: @lightBrownDown; +} + +/* Inverted Basic */ +.ui.inverted.brown.basic.buttons .button, +.ui.inverted.brown.buttons .basic.button, +.ui.inverted.brown.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.brown.basic.buttons .button:hover, +.ui.inverted.brown.buttons .basic.button:hover, +.ui.inverted.brown.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownHover inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.buttons .button:focus, +.ui.inverted.brown.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownFocus inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .active.button, +.ui.inverted.brown.buttons .basic.active.button, +.ui.inverted.brown.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownActive inset !important; + color: @lightBrown !important; +} +.ui.inverted.brown.basic.buttons .button:active, +.ui.inverted.brown.buttons .basic.button:active, +.ui.inverted.brown.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBrownDown inset !important; + color: @lightBrown !important; +} + +/*--- Blue ---*/ +.ui.blue.buttons .button, +.ui.blue.button { + background-color: @blue; + color: @blueTextColor; + text-shadow: @blueTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.blue.button { + box-shadow: @coloredBoxShadow; +} +.ui.blue.buttons .button:hover, +.ui.blue.button:hover { + background-color: @blueHover; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:focus, +.ui.blue.button:focus { + background-color: @blueFocus; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .button:active, +.ui.blue.button:active { + background-color: @blueDown; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} +.ui.blue.buttons .active.button, +.ui.blue.buttons .active.button:active, +.ui.blue.active.button, +.ui.blue.button .active.button:active { + background-color: @blueActive; + color: @blueTextColor; + text-shadow: @blueTextShadow; +} + +/* Basic */ +.ui.basic.blue.buttons .button, +.ui.basic.blue.button { + box-shadow: 0px 0px 0px @basicBorderSize @blue inset !important; + color: @blue !important; +} +.ui.basic.blue.buttons .button:hover, +.ui.basic.blue.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueHover inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .button:focus, +.ui.basic.blue.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueFocus inset !important; + color: @blueHover !important; +} +.ui.basic.blue.buttons .active.button, +.ui.basic.blue.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueActive inset !important; + color: @blueDown !important; +} +.ui.basic.blue.buttons .button:active, +.ui.basic.blue.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @blueDown inset !important; + color: @blueDown !important; +} +.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.blue.buttons .button, +.ui.inverted.blue.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlue inset !important; + color: @lightBlue; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover, +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus, +.ui.inverted.blue.buttons .button.active, +.ui.inverted.blue.button.active, +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + box-shadow: none !important; + color: @lightBlueTextColor; +} +.ui.inverted.blue.buttons .button:hover, +.ui.inverted.blue.button:hover { + background-color: @lightBlueHover; +} +.ui.inverted.blue.buttons .button:focus, +.ui.inverted.blue.button:focus { + background-color: @lightBlueFocus; +} +.ui.inverted.blue.buttons .active.button, +.ui.inverted.blue.active.button { + background-color: @lightBlueActive; +} +.ui.inverted.blue.buttons .button:active, +.ui.inverted.blue.button:active { + background-color: @lightBlueDown; +} + +/* Inverted Basic */ +.ui.inverted.blue.basic.buttons .button, +.ui.inverted.blue.buttons .basic.button, +.ui.inverted.blue.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.blue.basic.buttons .button:hover, +.ui.inverted.blue.buttons .basic.button:hover, +.ui.inverted.blue.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueHover inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.buttons .button:focus, +.ui.inverted.blue.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueFocus inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .active.button, +.ui.inverted.blue.buttons .basic.active.button, +.ui.inverted.blue.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueActive inset !important; + color: @lightBlue !important; +} +.ui.inverted.blue.basic.buttons .button:active, +.ui.inverted.blue.buttons .basic.button:active, +.ui.inverted.blue.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightBlueDown inset !important; + color: @lightBlue !important; +} + +/*--- Green ---*/ +.ui.green.buttons .button, +.ui.green.button { + background-color: @green; + color: @greenTextColor; + text-shadow: @greenTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.green.button { + box-shadow: @coloredBoxShadow; +} +.ui.green.buttons .button:hover, +.ui.green.button:hover { + background-color: @greenHover; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:focus, +.ui.green.button:focus { + background-color: @greenFocus; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .button:active, +.ui.green.button:active { + background-color: @greenDown; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} +.ui.green.buttons .active.button, +.ui.green.buttons .active.button:active, +.ui.green.active.button, +.ui.green.button .active.button:active { + background-color: @greenActive; + color: @greenTextColor; + text-shadow: @greenTextShadow; +} + + +/* Basic */ +.ui.basic.green.buttons .button, +.ui.basic.green.button { + box-shadow: 0px 0px 0px @basicBorderSize @green inset !important; + color: @green !important; +} +.ui.basic.green.buttons .button:hover, +.ui.basic.green.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenHover inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .button:focus, +.ui.basic.green.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenFocus inset !important; + color: @greenHover !important; +} +.ui.basic.green.buttons .active.button, +.ui.basic.green.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenActive inset !important; + color: @greenDown !important; +} +.ui.basic.green.buttons .button:active, +.ui.basic.green.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @greenDown inset !important; + color: @greenDown !important; +} +.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.green.buttons .button, +.ui.inverted.green.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreen inset !important; + color: @lightGreen; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover, +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus, +.ui.inverted.green.buttons .button.active, +.ui.inverted.green.button.active, +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + box-shadow: none !important; + color: @greenTextColor; +} +.ui.inverted.green.buttons .button:hover, +.ui.inverted.green.button:hover { + background-color: @lightGreenHover; +} +.ui.inverted.green.buttons .button:focus, +.ui.inverted.green.button:focus { + background-color: @lightGreenFocus; +} +.ui.inverted.green.buttons .active.button, +.ui.inverted.green.active.button { + background-color: @lightGreenActive; +} +.ui.inverted.green.buttons .button:active, +.ui.inverted.green.button:active { + background-color: @lightGreenDown; +} + +/* Inverted Basic */ +.ui.inverted.green.basic.buttons .button, +.ui.inverted.green.buttons .basic.button, +.ui.inverted.green.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.green.basic.buttons .button:hover, +.ui.inverted.green.buttons .basic.button:hover, +.ui.inverted.green.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenHover inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.buttons .button:focus, +.ui.inverted.green.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenFocus inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .active.button, +.ui.inverted.green.buttons .basic.active.button, +.ui.inverted.green.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenActive inset !important; + color: @lightGreen !important; +} +.ui.inverted.green.basic.buttons .button:active, +.ui.inverted.green.buttons .basic.button:active, +.ui.inverted.green.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightGreenDown inset !important; + color: @lightGreen !important; +} + +/*--- Orange ---*/ +.ui.orange.buttons .button, +.ui.orange.button { + background-color: @orange; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.orange.button { + box-shadow: @coloredBoxShadow; +} +.ui.orange.buttons .button:hover, +.ui.orange.button:hover { + background-color: @orangeHover; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:focus, +.ui.orange.button:focus { + background-color: @orangeFocus; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .button:active, +.ui.orange.button:active { + background-color: @orangeDown; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} +.ui.orange.buttons .active.button, +.ui.orange.buttons .active.button:active, +.ui.orange.active.button, +.ui.orange.button .active.button:active { + background-color: @orangeActive; + color: @orangeTextColor; + text-shadow: @orangeTextShadow; +} + +/* Basic */ +.ui.basic.orange.buttons .button, +.ui.basic.orange.button { + box-shadow: 0px 0px 0px @basicBorderSize @orange inset !important; + color: @orange !important; +} +.ui.basic.orange.buttons .button:hover, +.ui.basic.orange.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeHover inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .button:focus, +.ui.basic.orange.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeFocus inset !important; + color: @orangeHover !important; +} +.ui.basic.orange.buttons .active.button, +.ui.basic.orange.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeActive inset !important; + color: @orangeDown !important; +} +.ui.basic.orange.buttons .button:active, +.ui.basic.orange.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @orangeDown inset !important; + color: @orangeDown !important; +} +.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.orange.buttons .button, +.ui.inverted.orange.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrange inset !important; + color: @lightOrange; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover, +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus, +.ui.inverted.orange.buttons .button.active, +.ui.inverted.orange.button.active, +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + box-shadow: none !important; + color: @lightOrangeTextColor; +} +.ui.inverted.orange.buttons .button:hover, +.ui.inverted.orange.button:hover { + background-color: @lightOrangeHover; +} +.ui.inverted.orange.buttons .button:focus, +.ui.inverted.orange.button:focus { + background-color: @lightOrangeFocus; +} +.ui.inverted.orange.buttons .active.button, +.ui.inverted.orange.active.button { + background-color: @lightOrangeActive; +} +.ui.inverted.orange.buttons .button:active, +.ui.inverted.orange.button:active { + background-color: @lightOrangeDown; +} + +/* Inverted Basic */ +.ui.inverted.orange.basic.buttons .button, +.ui.inverted.orange.buttons .basic.button, +.ui.inverted.orange.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.orange.basic.buttons .button:hover, +.ui.inverted.orange.buttons .basic.button:hover, +.ui.inverted.orange.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeHover inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.buttons .button:focus, +.ui.inverted.orange.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeFocus inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .active.button, +.ui.inverted.orange.buttons .basic.active.button, +.ui.inverted.orange.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeActive inset !important; + color: @lightOrange !important; +} +.ui.inverted.orange.basic.buttons .button:active, +.ui.inverted.orange.buttons .basic.button:active, +.ui.inverted.orange.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOrangeDown inset !important; + color: @lightOrange !important; +} + +/*--- Pink ---*/ +.ui.pink.buttons .button, +.ui.pink.button { + background-color: @pink; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.pink.button { + box-shadow: @coloredBoxShadow; +} +.ui.pink.buttons .button:hover, +.ui.pink.button:hover { + background-color: @pinkHover; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:focus, +.ui.pink.button:focus { + background-color: @pinkFocus; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .button:active, +.ui.pink.button:active { + background-color: @pinkDown; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} +.ui.pink.buttons .active.button, +.ui.pink.buttons .active.button:active, +.ui.pink.active.button, +.ui.pink.button .active.button:active { + background-color: @pinkActive; + color: @pinkTextColor; + text-shadow: @pinkTextShadow; +} + +/* Basic */ +.ui.basic.pink.buttons .button, +.ui.basic.pink.button { + box-shadow: 0px 0px 0px @basicBorderSize @pink inset !important; + color: @pink !important; +} +.ui.basic.pink.buttons .button:hover, +.ui.basic.pink.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkHover inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .button:focus, +.ui.basic.pink.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkFocus inset !important; + color: @pinkHover !important; +} +.ui.basic.pink.buttons .active.button, +.ui.basic.pink.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkActive inset !important; + color: @pinkDown !important; +} +.ui.basic.pink.buttons .button:active, +.ui.basic.pink.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @pinkDown inset !important; + color: @pinkDown !important; +} +.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.pink.buttons .button, +.ui.inverted.pink.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPink inset !important; + color: @lightPink; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover, +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus, +.ui.inverted.pink.buttons .button.active, +.ui.inverted.pink.button.active, +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + box-shadow: none !important; + color: @lightPinkTextColor; +} +.ui.inverted.pink.buttons .button:hover, +.ui.inverted.pink.button:hover { + background-color: @lightPinkHover; +} +.ui.inverted.pink.buttons .button:focus, +.ui.inverted.pink.button:focus { + background-color: @lightPinkFocus; +} +.ui.inverted.pink.buttons .active.button, +.ui.inverted.pink.active.button { + background-color: @lightPinkActive; +} +.ui.inverted.pink.buttons .button:active, +.ui.inverted.pink.button:active { + background-color: @lightPinkDown; +} + +/* Inverted Basic */ +.ui.inverted.pink.basic.buttons .button, +.ui.inverted.pink.buttons .basic.button, +.ui.inverted.pink.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.pink.basic.buttons .button:hover, +.ui.inverted.pink.buttons .basic.button:hover, +.ui.inverted.pink.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkHover inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.buttons .button:focus, +.ui.inverted.pink.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkFocus inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .active.button, +.ui.inverted.pink.buttons .basic.active.button, +.ui.inverted.pink.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkActive inset !important; + color: @lightPink !important; +} +.ui.inverted.pink.basic.buttons .button:active, +.ui.inverted.pink.buttons .basic.button:active, +.ui.inverted.pink.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPinkDown inset !important; + color: @lightPink !important; +} + + +/*--- Violet ---*/ +.ui.violet.buttons .button, +.ui.violet.button { + background-color: @violet; + color: @violetTextColor; + text-shadow: @violetTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.violet.button { + box-shadow: @coloredBoxShadow; +} +.ui.violet.buttons .button:hover, +.ui.violet.button:hover { + background-color: @violetHover; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:focus, +.ui.violet.button:focus { + background-color: @violetFocus; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .button:active, +.ui.violet.button:active { + background-color: @violetDown; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} +.ui.violet.buttons .active.button, +.ui.violet.buttons .active.button:active, +.ui.violet.active.button, +.ui.violet.button .active.button:active { + background-color: @violetActive; + color: @violetTextColor; + text-shadow: @violetTextShadow; +} + +/* Basic */ +.ui.basic.violet.buttons .button, +.ui.basic.violet.button { + box-shadow: 0px 0px 0px @basicBorderSize @violet inset !important; + color: @violet !important; +} +.ui.basic.violet.buttons .button:hover, +.ui.basic.violet.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetHover inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .button:focus, +.ui.basic.violet.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetFocus inset !important; + color: @violetHover !important; +} +.ui.basic.violet.buttons .active.button, +.ui.basic.violet.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetActive inset !important; + color: @violetDown !important; +} +.ui.basic.violet.buttons .button:active, +.ui.basic.violet.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @violetDown inset !important; + color: @violetDown !important; +} +.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.violet.buttons .button, +.ui.inverted.violet.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightViolet inset !important; + color: @lightViolet; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover, +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus, +.ui.inverted.violet.buttons .button.active, +.ui.inverted.violet.button.active, +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + box-shadow: none !important; + color: @lightVioletTextColor; +} +.ui.inverted.violet.buttons .button:hover, +.ui.inverted.violet.button:hover { + background-color: @lightVioletHover; +} +.ui.inverted.violet.buttons .button:focus, +.ui.inverted.violet.button:focus { + background-color: @lightVioletFocus; +} +.ui.inverted.violet.buttons .active.button, +.ui.inverted.violet.active.button { + background-color: @lightVioletActive; +} +.ui.inverted.violet.buttons .button:active, +.ui.inverted.violet.button:active { + background-color: @lightVioletDown; +} + +/* Inverted Basic */ +.ui.inverted.violet.basic.buttons .button, +.ui.inverted.violet.buttons .basic.button, +.ui.inverted.violet.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.violet.basic.buttons .button:hover, +.ui.inverted.violet.buttons .basic.button:hover, +.ui.inverted.violet.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletHover inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.buttons .button:focus, +.ui.inverted.violet.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletFocus inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .active.button, +.ui.inverted.violet.buttons .basic.active.button, +.ui.inverted.violet.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletActive inset !important; + color: @lightViolet !important; +} +.ui.inverted.violet.basic.buttons .button:active, +.ui.inverted.violet.buttons .basic.button:active, +.ui.inverted.violet.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightVioletDown inset !important; + color: @lightViolet !important; +} + +/*--- Purple ---*/ +.ui.purple.buttons .button, +.ui.purple.button { + background-color: @purple; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.purple.button { + box-shadow: @coloredBoxShadow; +} +.ui.purple.buttons .button:hover, +.ui.purple.button:hover { + background-color: @purpleHover; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:focus, +.ui.purple.button:focus { + background-color: @purpleFocus; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .button:active, +.ui.purple.button:active { + background-color: @purpleDown; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} +.ui.purple.buttons .active.button, +.ui.purple.buttons .active.button:active, +.ui.purple.active.button, +.ui.purple.button .active.button:active { + background-color: @purpleActive; + color: @purpleTextColor; + text-shadow: @purpleTextShadow; +} + +/* Basic */ +.ui.basic.purple.buttons .button, +.ui.basic.purple.button { + box-shadow: 0px 0px 0px @basicBorderSize @purple inset !important; + color: @purple !important; +} +.ui.basic.purple.buttons .button:hover, +.ui.basic.purple.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleHover inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .button:focus, +.ui.basic.purple.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleFocus inset !important; + color: @purpleHover !important; +} +.ui.basic.purple.buttons .active.button, +.ui.basic.purple.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleActive inset !important; + color: @purpleDown !important; +} +.ui.basic.purple.buttons .button:active, +.ui.basic.purple.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @purpleDown inset !important; + color: @purpleDown !important; +} +.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.purple.buttons .button, +.ui.inverted.purple.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurple inset !important; + color: @lightPurple; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover, +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus, +.ui.inverted.purple.buttons .button.active, +.ui.inverted.purple.button.active, +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + box-shadow: none !important; + color: @lightPurpleTextColor; +} +.ui.inverted.purple.buttons .button:hover, +.ui.inverted.purple.button:hover { + background-color: @lightPurpleHover; +} +.ui.inverted.purple.buttons .button:focus, +.ui.inverted.purple.button:focus { + background-color: @lightPurpleFocus; +} +.ui.inverted.purple.buttons .active.button, +.ui.inverted.purple.active.button { + background-color: @lightPurpleActive; +} +.ui.inverted.purple.buttons .button:active, +.ui.inverted.purple.button:active { + background-color: @lightPurpleDown; +} + +/* Inverted Basic */ +.ui.inverted.purple.basic.buttons .button, +.ui.inverted.purple.buttons .basic.button, +.ui.inverted.purple.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.purple.basic.buttons .button:hover, +.ui.inverted.purple.buttons .basic.button:hover, +.ui.inverted.purple.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleHover inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.buttons .button:focus, +.ui.inverted.purple.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleFocus inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .active.button, +.ui.inverted.purple.buttons .basic.active.button, +.ui.inverted.purple.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleActive inset !important; + color: @lightPurple !important; +} +.ui.inverted.purple.basic.buttons .button:active, +.ui.inverted.purple.buttons .basic.button:active, +.ui.inverted.purple.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPurpleDown inset !important; + color: @lightPurple !important; +} + +/*--- Red ---*/ +.ui.red.buttons .button, +.ui.red.button { + background-color: @red; + color: @redTextColor; + text-shadow: @redTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.red.button { + box-shadow: @coloredBoxShadow; +} +.ui.red.buttons .button:hover, +.ui.red.button:hover { + background-color: @redHover; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:focus, +.ui.red.button:focus { + background-color: @redFocus; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .button:active, +.ui.red.button:active { + background-color: @redDown; + color: @redTextColor; + text-shadow: @redTextShadow; +} +.ui.red.buttons .active.button, +.ui.red.buttons .active.button:active, +.ui.red.active.button, +.ui.red.button .active.button:active { + background-color: @redActive; + color: @redTextColor; + text-shadow: @redTextShadow; +} + +/* Basic */ +.ui.basic.red.buttons .button, +.ui.basic.red.button { + box-shadow: 0px 0px 0px @basicBorderSize @red inset !important; + color: @red !important; +} +.ui.basic.red.buttons .button:hover, +.ui.basic.red.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redHover inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redFocus inset !important; + color: @redHover !important; +} +.ui.basic.red.buttons .active.button, +.ui.basic.red.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @redActive inset !important; + color: @redDown !important; +} +.ui.basic.red.buttons .button:active, +.ui.basic.red.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @redDown inset !important; + color: @redDown !important; +} +.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.red.buttons .button, +.ui.inverted.red.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightRed inset !important; + color: @lightRed; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover, +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus, +.ui.inverted.red.buttons .button.active, +.ui.inverted.red.button.active, +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + box-shadow: none !important; + color: @lightRedTextColor; +} +.ui.inverted.red.buttons .button:hover, +.ui.inverted.red.button:hover { + background-color: @lightRedHover; +} +.ui.inverted.red.buttons .button:focus, +.ui.inverted.red.button:focus { + background-color: @lightRedFocus; +} +.ui.inverted.red.buttons .active.button, +.ui.inverted.red.active.button { + background-color: @lightRedActive; +} +.ui.inverted.red.buttons .button:active, +.ui.inverted.red.button:active { + background-color: @lightRedDown; +} + +/* Inverted Basic */ +.ui.inverted.red.basic.buttons .button, +.ui.inverted.red.buttons .basic.button, +.ui.inverted.red.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.red.basic.buttons .button:hover, +.ui.inverted.red.buttons .basic.button:hover, +.ui.inverted.red.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedHover inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.buttons .button:focus, +.ui.inverted.red.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedFocus inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .active.button, +.ui.inverted.red.buttons .basic.active.button, +.ui.inverted.red.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedActive inset !important; + color: @lightRed !important; +} +.ui.inverted.red.basic.buttons .button:active, +.ui.inverted.red.buttons .basic.button:active, +.ui.inverted.red.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightRedDown inset !important; + color: @lightRed !important; +} + + +/*--- Teal ---*/ +.ui.teal.buttons .button, +.ui.teal.button { + background-color: @teal; + color: @tealTextColor; + text-shadow: @tealTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.teal.button { + box-shadow: @coloredBoxShadow; +} +.ui.teal.buttons .button:hover, +.ui.teal.button:hover { + background-color: @tealHover; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:focus, +.ui.teal.button:focus { + background-color: @tealFocus; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .button:active, +.ui.teal.button:active { + background-color: @tealDown; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} +.ui.teal.buttons .active.button, +.ui.teal.buttons .active.button:active, +.ui.teal.active.button, +.ui.teal.button .active.button:active { + background-color: @tealActive; + color: @tealTextColor; + text-shadow: @tealTextShadow; +} + +/* Basic */ +.ui.basic.teal.buttons .button, +.ui.basic.teal.button { + box-shadow: 0px 0px 0px @basicBorderSize @teal inset !important; + color: @teal !important; +} +.ui.basic.teal.buttons .button:hover, +.ui.basic.teal.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealHover inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .button:focus, +.ui.basic.teal.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealFocus inset !important; + color: @tealHover !important; +} +.ui.basic.teal.buttons .active.button, +.ui.basic.teal.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealActive inset !important; + color: @tealDown !important; +} +.ui.basic.teal.buttons .button:active, +.ui.basic.teal.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @tealDown inset !important; + color: @tealDown !important; +} +.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.teal.buttons .button, +.ui.inverted.teal.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightTeal inset !important; + color: @lightTeal; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover, +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus, +.ui.inverted.teal.buttons .button.active, +.ui.inverted.teal.button.active, +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + box-shadow: none !important; + color: @lightTealTextColor; +} +.ui.inverted.teal.buttons .button:hover, +.ui.inverted.teal.button:hover { + background-color: @lightTealHover; +} +.ui.inverted.teal.buttons .button:focus, +.ui.inverted.teal.button:focus { + background-color: @lightTealFocus; +} +.ui.inverted.teal.buttons .active.button, +.ui.inverted.teal.active.button { + background-color: @lightTealActive; +} +.ui.inverted.teal.buttons .button:active, +.ui.inverted.teal.button:active { + background-color: @lightTealDown; +} + +/* Inverted Basic */ +.ui.inverted.teal.basic.buttons .button, +.ui.inverted.teal.buttons .basic.button, +.ui.inverted.teal.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.teal.basic.buttons .button:hover, +.ui.inverted.teal.buttons .basic.button:hover, +.ui.inverted.teal.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealHover inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.buttons .button:focus, +.ui.inverted.teal.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealFocus inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .active.button, +.ui.inverted.teal.buttons .basic.active.button, +.ui.inverted.teal.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealActive inset !important; + color: @lightTeal !important; +} +.ui.inverted.teal.basic.buttons .button:active, +.ui.inverted.teal.buttons .basic.button:active, +.ui.inverted.teal.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightTealDown inset !important; + color: @lightTeal !important; +} + + +/*--- Olive ---*/ +.ui.olive.buttons .button, +.ui.olive.button { + background-color: @olive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.olive.button { + box-shadow: @coloredBoxShadow; +} +.ui.olive.buttons .button:hover, +.ui.olive.button:hover { + background-color: @oliveHover; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:focus, +.ui.olive.button:focus { + background-color: @oliveFocus; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .button:active, +.ui.olive.button:active { + background-color: @oliveDown; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} +.ui.olive.buttons .active.button, +.ui.olive.buttons .active.button:active, +.ui.olive.active.button, +.ui.olive.button .active.button:active { + background-color: @oliveActive; + color: @oliveTextColor; + text-shadow: @oliveTextShadow; +} + +/* Basic */ +.ui.basic.olive.buttons .button, +.ui.basic.olive.button { + box-shadow: 0px 0px 0px @basicBorderSize @olive inset !important; + color: @olive !important; +} +.ui.basic.olive.buttons .button:hover, +.ui.basic.olive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveHover inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .button:focus, +.ui.basic.olive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveFocus inset !important; + color: @oliveHover !important; +} +.ui.basic.olive.buttons .active.button, +.ui.basic.olive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveActive inset !important; + color: @oliveDown !important; +} +.ui.basic.olive.buttons .button:active, +.ui.basic.olive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @oliveDown inset !important; + color: @oliveDown !important; +} +.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.olive.buttons .button, +.ui.inverted.olive.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightOlive inset !important; + color: @lightOlive; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover, +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus, +.ui.inverted.olive.buttons .button.active, +.ui.inverted.olive.button.active, +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + box-shadow: none !important; + color: @lightOliveTextColor; +} +.ui.inverted.olive.buttons .button:hover, +.ui.inverted.olive.button:hover { + background-color: @lightOliveHover; +} +.ui.inverted.olive.buttons .button:focus, +.ui.inverted.olive.button:focus { + background-color: @lightOliveFocus; +} +.ui.inverted.olive.buttons .active.button, +.ui.inverted.olive.active.button { + background-color: @lightOliveActive; +} +.ui.inverted.olive.buttons .button:active, +.ui.inverted.olive.button:active { + background-color: @lightOliveDown; +} + +/* Inverted Basic */ +.ui.inverted.olive.basic.buttons .button, +.ui.inverted.olive.buttons .basic.button, +.ui.inverted.olive.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.olive.basic.buttons .button:hover, +.ui.inverted.olive.buttons .basic.button:hover, +.ui.inverted.olive.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveHover inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.buttons .button:focus, +.ui.inverted.olive.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveFocus inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .active.button, +.ui.inverted.olive.buttons .basic.active.button, +.ui.inverted.olive.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveActive inset !important; + color: @lightOlive !important; +} +.ui.inverted.olive.basic.buttons .button:active, +.ui.inverted.olive.buttons .basic.button:active, +.ui.inverted.olive.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightOliveDown inset !important; + color: @lightOlive !important; +} + +/*--- Yellow ---*/ +.ui.yellow.buttons .button, +.ui.yellow.button { + background-color: @yellow; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.yellow.button { + box-shadow: @coloredBoxShadow; +} +.ui.yellow.buttons .button:hover, +.ui.yellow.button:hover { + background-color: @yellowHover; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:focus, +.ui.yellow.button:focus { + background-color: @yellowFocus; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .button:active, +.ui.yellow.button:active { + background-color: @yellowDown; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} +.ui.yellow.buttons .active.button, +.ui.yellow.buttons .active.button:active, +.ui.yellow.active.button, +.ui.yellow.button .active.button:active { + background-color: @yellowActive; + color: @yellowTextColor; + text-shadow: @yellowTextShadow; +} + +/* Basic */ +.ui.basic.yellow.buttons .button, +.ui.basic.yellow.button { + box-shadow: 0px 0px 0px @basicBorderSize @yellow inset !important; + color: @yellow !important; +} +.ui.basic.yellow.buttons .button:hover, +.ui.basic.yellow.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowHover inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .button:focus, +.ui.basic.yellow.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowFocus inset !important; + color: @yellowHover !important; +} +.ui.basic.yellow.buttons .active.button, +.ui.basic.yellow.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowActive inset !important; + color: @yellowDown !important; +} +.ui.basic.yellow.buttons .button:active, +.ui.basic.yellow.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @yellowDown inset !important; + color: @yellowDown !important; +} +.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.yellow.buttons .button, +.ui.inverted.yellow.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellow inset !important; + color: @lightYellow; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover, +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus, +.ui.inverted.yellow.buttons .button.active, +.ui.inverted.yellow.button.active, +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + box-shadow: none !important; + color: @lightYellowTextColor; +} +.ui.inverted.yellow.buttons .button:hover, +.ui.inverted.yellow.button:hover { + background-color: @lightYellowHover; +} +.ui.inverted.yellow.buttons .button:focus, +.ui.inverted.yellow.button:focus { + background-color: @lightYellowFocus; +} +.ui.inverted.yellow.buttons .active.button, +.ui.inverted.yellow.active.button { + background-color: @lightYellowActive; +} +.ui.inverted.yellow.buttons .button:active, +.ui.inverted.yellow.button:active { + background-color: @lightYellowDown; +} + +/* Inverted Basic */ +.ui.inverted.yellow.basic.buttons .button, +.ui.inverted.yellow.buttons .basic.button, +.ui.inverted.yellow.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.yellow.basic.buttons .button:hover, +.ui.inverted.yellow.buttons .basic.button:hover, +.ui.inverted.yellow.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowHover inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.buttons .button:focus, +.ui.inverted.yellow.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowFocus inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .active.button, +.ui.inverted.yellow.buttons .basic.active.button, +.ui.inverted.yellow.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowActive inset !important; + color: @lightYellow !important; +} +.ui.inverted.yellow.basic.buttons .button:active, +.ui.inverted.yellow.buttons .basic.button:active, +.ui.inverted.yellow.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightYellowDown inset !important; + color: @lightYellow !important; +} + + +/*------------------- + Primary +--------------------*/ + +/*--- Standard ---*/ +.ui.primary.buttons .button, +.ui.primary.button { + background-color: @primaryColor; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.primary.button { + box-shadow: @coloredBoxShadow; +} +.ui.primary.buttons .button:hover, +.ui.primary.button:hover { + background-color: @primaryColorHover; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:focus, +.ui.primary.button:focus { + background-color: @primaryColorFocus; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .button:active, +.ui.primary.button:active { + background-color: @primaryColorDown; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} +.ui.primary.buttons .active.button, +.ui.primary.buttons .active.button:active, +.ui.primary.active.button, +.ui.primary.button .active.button:active { + background-color: @primaryColorActive; + color: @primaryTextColor; + text-shadow: @primaryTextShadow; +} + +/* Basic */ +.ui.basic.primary.buttons .button, +.ui.basic.primary.button { + box-shadow: 0px 0px 0px @basicBorderSize @primaryColor inset !important; + color: @primaryColor !important; +} +.ui.basic.primary.buttons .button:hover, +.ui.basic.primary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorHover inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorFocus inset !important; + color: @primaryColorHover !important; +} +.ui.basic.primary.buttons .active.button, +.ui.basic.primary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorActive inset !important; + color: @primaryColorDown !important; +} +.ui.basic.primary.buttons .button:active, +.ui.basic.primary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @primaryColorDown inset !important; + color: @primaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.primary.buttons .button, +.ui.inverted.primary.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColor inset !important; + color: @lightPrimaryColor; +} +.ui.inverted.primary.buttons .button:hover, +.ui.inverted.primary.button:hover, +.ui.inverted.primary.buttons .button:focus, +.ui.inverted.primary.button:focus, +.ui.inverted.primary.buttons .button.active, +.ui.inverted.primary.button.active, +.ui.inverted.primary.buttons .button:active, +.ui.inverted.primary.button:active { + box-shadow: none !important; + color: @lightPrimaryTextColor; +} +.ui.inverted.primary.buttons .button:hover, +.ui.inverted.primary.button:hover { + background-color: @lightPrimaryColorHover; +} +.ui.inverted.primary.buttons .button:focus, +.ui.inverted.primary.button:focus { + background-color: @lightPrimaryColorFocus; +} +.ui.inverted.primary.buttons .active.button, +.ui.inverted.primary.active.button { + background-color: @lightPrimaryColorActive; +} +.ui.inverted.primary.buttons .button:active, +.ui.inverted.primary.button:active { + background-color: @lightPrimaryColorDown; +} + +/* Inverted Basic */ +.ui.inverted.primary.basic.buttons .button, +.ui.inverted.primary.buttons .basic.button, +.ui.inverted.primary.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.primary.basic.buttons .button:hover, +.ui.inverted.primary.buttons .basic.button:hover, +.ui.inverted.primary.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorHover inset !important; + color: @lightPrimaryColor !important; +} +.ui.inverted.primary.basic.buttons .button:focus, +.ui.inverted.primary.basic.buttons .button:focus, +.ui.inverted.primary.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorFocus inset !important; + color: @lightPrimaryColor !important; +} +.ui.inverted.primary.basic.buttons .active.button, +.ui.inverted.primary.buttons .basic.active.button, +.ui.inverted.primary.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorActive inset !important; + color: @lightPrimaryColor !important; +} +.ui.inverted.primary.basic.buttons .button:active, +.ui.inverted.primary.buttons .basic.button:active, +.ui.inverted.primary.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightPrimaryColorDown inset !important; + color: @lightPrimaryColor !important; +} + +/*------------------- + Secondary +--------------------*/ + +/* Standard */ +.ui.secondary.buttons .button, +.ui.secondary.button { + background-color: @secondaryColor; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.secondary.button { + box-shadow: @coloredBoxShadow; +} +.ui.secondary.buttons .button:hover, +.ui.secondary.button:hover { + background-color: @secondaryColorHover; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:focus, +.ui.secondary.button:focus { + background-color: @secondaryColorFocus; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .button:active, +.ui.secondary.button:active { + background-color: @secondaryColorDown; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} +.ui.secondary.buttons .active.button, +.ui.secondary.buttons .active.button:active, +.ui.secondary.active.button, +.ui.secondary.button .active.button:active { + background-color: @secondaryColorActive; + color: @secondaryTextColor; + text-shadow: @secondaryTextShadow; +} + +/* Basic */ +.ui.basic.secondary.buttons .button, +.ui.basic.secondary.button { + box-shadow: 0px 0px 0px @basicBorderSize @secondaryColor inset !important; + color: @secondaryColor !important; +} +.ui.basic.secondary.buttons .button:hover, +.ui.basic.secondary.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorHover inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .button:focus, +.ui.basic.secondary.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorFocus inset !important; + color: @secondaryColorHover !important; +} +.ui.basic.secondary.buttons .active.button, +.ui.basic.secondary.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorActive inset !important; + color: @secondaryColorDown !important; +} +.ui.basic.secondary.buttons .button:active, +.ui.basic.secondary.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @secondaryColorDown inset !important; + color: @secondaryColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/* Inverted */ +.ui.inverted.secondary.buttons .button, +.ui.inverted.secondary.button { + background-color: transparent; + box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColor inset !important; + color: @lightSecondaryColor; +} +.ui.inverted.secondary.buttons .button:hover, +.ui.inverted.secondary.button:hover, +.ui.inverted.secondary.buttons .button:focus, +.ui.inverted.secondary.button:focus, +.ui.inverted.secondary.buttons .button.active, +.ui.inverted.secondary.button.active, +.ui.inverted.secondary.buttons .button:active, +.ui.inverted.secondary.button:active { + box-shadow: none !important; + color: @lightSecondaryTextColor; +} +.ui.inverted.secondary.buttons .button:hover, +.ui.inverted.secondary.button:hover { + background-color: @lightSecondaryColorHover; +} +.ui.inverted.secondary.buttons .button:focus, +.ui.inverted.secondary.button:focus { + background-color: @lightSecondaryColorFocus; +} +.ui.inverted.secondary.buttons .active.button, +.ui.inverted.secondary.active.button { + background-color: @lightSecondaryColorActive; +} +.ui.inverted.secondary.buttons .button:active, +.ui.inverted.secondary.button:active { + background-color: @lightSecondaryColorDown; +} + +/* Inverted Basic */ +.ui.inverted.secondary.basic.buttons .button, +.ui.inverted.secondary.buttons .basic.button, +.ui.inverted.secondary.basic.button { + background-color: transparent; + box-shadow: @basicInvertedBoxShadow !important; + color: @white !important; +} +.ui.inverted.secondary.basic.buttons .button:hover, +.ui.inverted.secondary.buttons .basic.button:hover, +.ui.inverted.secondary.basic.button:hover { + box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorHover inset !important; + color: @lightSecondaryColor !important; +} +.ui.inverted.secondary.basic.buttons .button:focus, +.ui.inverted.secondary.basic.buttons .button:focus, +.ui.inverted.secondary.basic.button:focus { + box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorFocus inset !important; + color: @lightSecondaryColor !important; +} +.ui.inverted.secondary.basic.buttons .active.button, +.ui.inverted.secondary.buttons .basic.active.button, +.ui.inverted.secondary.basic.active.button { + box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorActive inset !important; + color: @lightSecondaryColor !important; +} +.ui.inverted.secondary.basic.buttons .button:active, +.ui.inverted.secondary.buttons .basic.button:active, +.ui.inverted.secondary.basic.button:active { + box-shadow: 0px 0px 0px @invertedBorderSize @lightSecondaryColorDown inset !important; + color: @lightSecondaryColor !important; +} + +/*--------------- + Positive +----------------*/ + +/* Standard */ +.ui.positive.buttons .button, +.ui.positive.button { + background-color: @positiveColor; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.positive.button { + box-shadow: @coloredBoxShadow; +} +.ui.positive.buttons .button:hover, +.ui.positive.button:hover { + background-color: @positiveColorHover; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .button:focus, +.ui.positive.button:focus { + background-color: @positiveColorFocus; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .button:active, +.ui.positive.button:active { + background-color: @positiveColorDown; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} +.ui.positive.buttons .active.button, +.ui.positive.buttons .active.button:active, +.ui.positive.active.button, +.ui.positive.button .active.button:active { + background-color: @positiveColorActive; + color: @positiveTextColor; + text-shadow: @positiveTextShadow; +} + +/* Basic */ +.ui.basic.positive.buttons .button, +.ui.basic.positive.button { + box-shadow: 0px 0px 0px @basicBorderSize @positiveColor inset !important; + color: @positiveColor !important; +} +.ui.basic.positive.buttons .button:hover, +.ui.basic.positive.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorHover inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .button:focus, +.ui.basic.positive.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorFocus inset !important; + color: @positiveColorHover !important; +} +.ui.basic.positive.buttons .active.button, +.ui.basic.positive.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorActive inset !important; + color: @positiveColorDown !important; +} +.ui.basic.positive.buttons .button:active, +.ui.basic.positive.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @positiveColorDown inset !important; + color: @positiveColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/*--------------- + Negative +----------------*/ + +/* Standard */ +.ui.negative.buttons .button, +.ui.negative.button { + background-color: @negativeColor; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; + background-image: @coloredBackgroundImage; +} +.ui.negative.button { + box-shadow: @coloredBoxShadow; +} +.ui.negative.buttons .button:hover, +.ui.negative.button:hover { + background-color: @negativeColorHover; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .button:focus, +.ui.negative.button:focus { + background-color: @negativeColorFocus; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .button:active, +.ui.negative.button:active { + background-color: @negativeColorDown; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} +.ui.negative.buttons .active.button, +.ui.negative.buttons .active.button:active, +.ui.negative.active.button, +.ui.negative.button .active.button:active { + background-color: @negativeColorActive; + color: @negativeTextColor; + text-shadow: @negativeTextShadow; +} + +/* Basic */ +.ui.basic.negative.buttons .button, +.ui.basic.negative.button { + box-shadow: 0px 0px 0px @basicBorderSize @negativeColor inset !important; + color: @negativeColor !important; +} +.ui.basic.negative.buttons .button:hover, +.ui.basic.negative.button:hover { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorHover inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .button:focus, +.ui.basic.negative.button:focus { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorFocus inset !important; + color: @negativeColorHover !important; +} +.ui.basic.negative.buttons .active.button, +.ui.basic.negative.active.button { + background: transparent !important; + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorActive inset !important; + color: @negativeColorDown !important; +} +.ui.basic.negative.buttons .button:active, +.ui.basic.negative.button:active { + box-shadow: 0px 0px 0px @basicColoredBorderSize @negativeColorDown inset !important; + color: @negativeColorDown !important; +} +.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + margin-left: -@basicColoredBorderSize; +} + +/******************************* + Groups +*******************************/ + +.ui.buttons { + display: inline-flex; + flex-direction: row; + font-size: 0em; + vertical-align: baseline; + margin: @verticalMargin @horizontalMargin 0em 0em; +} +.ui.buttons:not(.basic):not(.inverted) { + box-shadow: @groupBoxShadow; +} + +/* Clearfix */ +.ui.buttons:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/* Standard Group */ +.ui.buttons .button { + flex: 1 0 auto; + margin: 0em; + border-radius: 0em; + margin: @groupButtonOffset; +} +.ui.buttons > .ui.button:not(.basic):not(.inverted), +.ui.buttons:not(.basic):not(.inverted) > .button { + box-shadow: @groupButtonBoxShadow; +} + +.ui.buttons .button:first-child { + border-left: none; + margin-left: 0em; + border-top-left-radius: @borderRadius; + border-bottom-left-radius: @borderRadius; +} +.ui.buttons .button:last-child { + border-top-right-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} + +/* Vertical Style */ +.ui.vertical.buttons { + display: inline-flex; + flex-direction: column; +} +.ui.vertical.buttons .button { + display: block; + float: none; + width: 100%; + margin: @verticalGroupOffset; + box-shadow: @verticalBoxShadow; + border-radius: 0em; +} +.ui.vertical.buttons .button:first-child { + border-top-left-radius: @borderRadius; + border-top-right-radius: @borderRadius; +} +.ui.vertical.buttons .button:last-child { + margin-bottom: 0px; + border-bottom-left-radius: @borderRadius; + border-bottom-right-radius: @borderRadius; +} +.ui.vertical.buttons .button:only-child { + border-radius: @borderRadius; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/container.less b/static/semantic/src/definitions/elements/container.less new file mode 100755 index 0000000..14b32f2 --- /dev/null +++ b/static/semantic/src/definitions/elements/container.less @@ -0,0 +1,143 @@ +/*! + * # Semantic UI - Container + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'container'; + +@import (multiple) '../../theme.config'; + +/******************************* + Container +*******************************/ + +/* All Sizes */ +.ui.container { + display: block; + max-width: @maxWidth !important; +} + +/* Mobile */ +@media only screen and (max-width: @largestMobileScreen) { + .ui.container { + width: @mobileWidth !important; + margin-left: @mobileGutter !important; + margin-right: @mobileGutter !important; + } + .ui.grid.container { + width: @mobileGridWidth !important; + } + .ui.relaxed.grid.container { + width: @mobileRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @mobileVeryRelaxedGridWidth !important; + } +} + +/* Tablet */ +@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) { + .ui.container { + width: @tabletWidth; + margin-left: @tabletGutter !important; + margin-right: @tabletGutter !important; + } + .ui.grid.container { + width: @tabletGridWidth !important; + } + .ui.relaxed.grid.container { + width: @tabletRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @tabletVeryRelaxedGridWidth !important; + } +} + +/* Small Monitor */ +@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) { + .ui.container { + width: @computerWidth; + margin-left: @computerGutter !important; + margin-right: @computerGutter !important; + } + .ui.grid.container { + width: @computerGridWidth !important; + } + .ui.relaxed.grid.container { + width: @computerRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @computerVeryRelaxedGridWidth !important; + } +} + +/* Large Monitor */ +@media only screen and (min-width: @largeMonitorBreakpoint) { + .ui.container { + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; + } + .ui.grid.container { + width: @largeMonitorGridWidth !important; + } + .ui.relaxed.grid.container { + width: @largeMonitorRelaxedGridWidth !important; + } + .ui.very.relaxed.grid.container { + width: @largeMonitorVeryRelaxedGridWidth !important; + } +} + +/******************************* + Types +*******************************/ + + +/* Text Container */ +.ui.text.container { + font-family: @textFontFamily; + max-width: @textWidth !important; + line-height: @textLineHeight; +} + +.ui.text.container { + font-size: @textSize; +} + +/* Fluid */ +.ui.fluid.container { + width: 100%; +} + + +/******************************* + Variations +*******************************/ + +.ui[class*="left aligned"].container { + text-align: left; +} +.ui[class*="center aligned"].container { + text-align: center; +} +.ui[class*="right aligned"].container { + text-align: right; +} +.ui.justified.container { + text-align: justify; + hyphens: auto; +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/divider.less b/static/semantic/src/definitions/elements/divider.less new file mode 100755 index 0000000..28c0c68 --- /dev/null +++ b/static/semantic/src/definitions/elements/divider.less @@ -0,0 +1,255 @@ +/*! + * # Semantic UI - Divider + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'divider'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Divider +*******************************/ + +.ui.divider { + margin: @margin; + + line-height: 1; + height: 0em; + + font-weight: @fontWeight; + text-transform: @textTransform; + letter-spacing: @letterSpacing; + color: @color; + + user-select: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +/*-------------- + Basic +---------------*/ + +.ui.divider:not(.vertical):not(.horizontal) { + border-top: @shadowWidth solid @shadowColor; + border-bottom: @highlightWidth solid @highlightColor; +} + +/*-------------- + Coupling +---------------*/ + +/* Allow divider between each column row */ +.ui.grid > .column + .divider, +.ui.grid > .row > .column + .divider { + left: auto; +} + +/*-------------- + Horizontal +---------------*/ + +.ui.horizontal.divider { + display: table; + white-space: nowrap; + + height: auto; + margin: @horizontalMargin; + line-height: 1; + text-align: center; +} + +.ui.horizontal.divider:before, +.ui.horizontal.divider:after { + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; +} + +.ui.horizontal.divider:before { + background-position: right @horizontalDividerMargin top 50%; +} +.ui.horizontal.divider:after { + background-position: left @horizontalDividerMargin top 50%; +} + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.divider { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + + margin: 0rem; + padding: 0em; + width: auto; + height: 50%; + + line-height: 0em; + text-align: center; + transform: translateX(-50%); +} + +.ui.vertical.divider:before, +.ui.vertical.divider:after { + position: absolute; + left: 50%; + content: ''; + z-index: 3; + + border-left: @shadowWidth solid @shadowColor; + border-right: @highlightWidth solid @highlightColor; + + width: 0%; + height: @verticalDividerHeight; +} + +.ui.vertical.divider:before { + top: -100%; +} +.ui.vertical.divider:after { + top: auto; + bottom: 0px; +} + +/* Inside grid */ +@media only screen and (max-width : @largestMobileScreen) { + + .ui.stackable.grid .ui.vertical.divider, + .ui.grid .stackable.row .ui.vertical.divider { + display: table; + white-space: nowrap; + height: auto; + margin: @horizontalMargin; + overflow: hidden; + line-height: 1; + text-align: center; + position: static; + top: 0; + left: 0; + transform: none; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before, + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + position: static; + left: 0; + border-left: none; + border-right: none; + content: ''; + display: table-cell; + position: relative; + top: 50%; + width: 50%; + background-repeat: no-repeat; + } + + .ui.stackable.grid .ui.vertical.divider:before, + .ui.grid .stackable.row .ui.vertical.divider:before { + background-position: right @horizontalDividerMargin top 50%; + } + .ui.stackable.grid .ui.vertical.divider:after, + .ui.grid .stackable.row .ui.vertical.divider:after { + background-position: left @horizontalDividerMargin top 50%; + } +} + +/*-------------- + Icon +---------------*/ + +.ui.divider > .icon { + margin: @dividerIconMargin; + font-size: @dividerIconSize; + height: 1em; + vertical-align: middle; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Hidden +---------------*/ + +.ui.hidden.divider { + border-color: transparent !important; +} +.ui.hidden.divider:before, +.ui.hidden.divider:after { + display: none; +} + +/*-------------- + Inverted +---------------*/ + +.ui.divider.inverted, +.ui.vertical.inverted.divider, +.ui.horizontal.inverted.divider { + color: @invertedTextColor; +} +.ui.divider.inverted, +.ui.divider.inverted:after, +.ui.divider.inverted:before { + border-top-color: @invertedShadowColor !important; + border-left-color: @invertedShadowColor !important; + border-bottom-color: @invertedHighlightColor !important; + border-right-color: @invertedHighlightColor !important; +} + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.divider { + margin: 0em; +} + +/*-------------- + Clearing +---------------*/ + +.ui.clearing.divider { + clear: both; +} + +/*-------------- + Section +---------------*/ + +.ui.section.divider { + margin-top: @sectionMargin; + margin-bottom: @sectionMargin; +} + +/*-------------- + Sizes +---------------*/ + +.ui.divider { + font-size: @medium; +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/flag.less b/static/semantic/src/definitions/elements/flag.less new file mode 100755 index 0000000..1f4145e --- /dev/null +++ b/static/semantic/src/definitions/elements/flag.less @@ -0,0 +1,52 @@ +/*! + * # Semantic UI - Flag + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'flag'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Flag +*******************************/ + +i.flag:not(.icon) { + display: inline-block; + + width: @width; + height: @height; + + line-height: @height; + vertical-align: @verticalAlign; + margin: 0em @margin 0em 0em; + + text-decoration: inherit; + + speak: none; + font-smoothing: antialiased; + backface-visibility: hidden; +} + +/* Sprite */ +i.flag:not(.icon):before { + display: inline-block; + content: ''; + background: url(@spritePath) no-repeat -108px -1976px; + width: @width; + height: @height; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/header.less b/static/semantic/src/definitions/elements/header.less new file mode 100755 index 0000000..294d77a --- /dev/null +++ b/static/semantic/src/definitions/elements/header.less @@ -0,0 +1,708 @@ +/*! + * # Semantic UI - Header + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'header'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Header +*******************************/ + +/* Standard */ +.ui.header { + border: none; + margin: @margin; + padding: @verticalPadding @horizontalPadding; + font-family: @fontFamily; + font-weight: @fontWeight; + line-height: @lineHeight; + text-transform: @textTransform; + color: @textColor; +} + +.ui.header:first-child { + margin-top: @firstMargin; +} +.ui.header:last-child { + margin-bottom: @lastMargin; +} + +/*-------------- + Sub Header +---------------*/ + +.ui.header .sub.header { + display: block; + font-weight: @normal; + padding: 0em; + margin: @subHeaderMargin; + font-size: @subHeaderFontSize; + line-height: @subHeaderLineHeight; + color: @subHeaderColor; +} + +/*-------------- + Icon +---------------*/ + +.ui.header > .icon { + display: table-cell; + opacity: @iconOpacity; + font-size: @iconSize; + padding-top: @iconOffset; + vertical-align: @iconAlignment; +} + +/* With Text Node */ +.ui.header .icon:only-child { + display: inline-block; + padding: 0em; + margin-right: @iconMargin; +} + +/*------------------- + Image +--------------------*/ + +.ui.header > .image:not(.icon), +.ui.header > img { + display: inline-block; + margin-top: @imageOffset; + width: @imageWidth; + height: @imageHeight; + vertical-align: @imageAlignment; +} +.ui.header > .image:not(.icon):only-child, +.ui.header > img:only-child { + margin-right: @imageMargin; +} + +/*-------------- + Content +---------------*/ + +.ui.header .content { + display: inline-block; + vertical-align: @contentAlignment; +} + +/* After Image */ +.ui.header > img + .content, +.ui.header > .image + .content { + padding-left: @imageMargin; + vertical-align: @contentImageAlignment; +} + +/* After Icon */ +.ui.header > .icon + .content { + padding-left: @iconMargin; + display: table-cell; + vertical-align: @contentIconAlignment; +} + + +/*-------------- + Loose Coupling +---------------*/ + +.ui.header .ui.label { + font-size: @labelSize; + margin-left: @labelDistance; + vertical-align: @labelVerticalAlign; +} + +/* Positioning */ +.ui.header + p { + margin-top: @nextParagraphDistance; +} + + + +/******************************* + Types +*******************************/ + + +/*-------------- + Page +---------------*/ + +h1.ui.header { + font-size: @h1; +} +h2.ui.header { + font-size: @h2; +} +h3.ui.header { + font-size: @h3; +} +h4.ui.header { + font-size: @h4; +} +h5.ui.header { + font-size: @h5; +} + + +/* Sub Header */ +h1.ui.header .sub.header { + font-size: @h1SubHeaderFontSize; +} +h2.ui.header .sub.header { + font-size: @h2SubHeaderFontSize; +} +h3.ui.header .sub.header { + font-size: @h3SubHeaderFontSize; +} +h4.ui.header .sub.header { + font-size: @h4SubHeaderFontSize; +} +h5.ui.header .sub.header { + font-size: @h5SubHeaderFontSize; +} + + +/*-------------- + Content Heading +---------------*/ + +.ui.huge.header { + min-height: 1em; + font-size: @hugeFontSize; +} +.ui.large.header { + font-size: @largeFontSize; +} +.ui.medium.header { + font-size: @mediumFontSize; +} +.ui.small.header { + font-size: @smallFontSize; +} +.ui.tiny.header { + font-size: @tinyFontSize; +} + +/* Sub Header */ +.ui.huge.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.large.header .sub.header { + font-size: @hugeSubHeaderFontSize; +} +.ui.header .sub.header { + font-size: @subHeaderFontSize; +} +.ui.small.header .sub.header { + font-size: @smallSubHeaderFontSize; +} +.ui.tiny.header .sub.header { + font-size: @tinySubHeaderFontSize; +} + +/*-------------- + Sub Heading +---------------*/ + +.ui.sub.header { + padding: 0em; + margin-bottom: @subHeadingDistance; + font-weight: @subHeadingFontWeight; + font-size: @subHeadingFontSize; + text-transform: @subHeadingTextTransform; + color: @subHeadingColor; +} + +.ui.small.sub.header { + font-size: @smallSubHeadingSize; +} +.ui.sub.header { + font-size: @subHeadingFontSize; +} +.ui.large.sub.header { + font-size: @largeSubHeadingSize; +} +.ui.huge.sub.header { + font-size: @hugeSubHeadingSize; +} + + + +/*------------------- + Icon +--------------------*/ + +.ui.icon.header { + display: inline-block; + text-align: center; + margin: @iconHeaderTopMargin 0em @iconHeaderBottomMargin; +} +.ui.icon.header:after { + content: ''; + display: block; + height: 0px; + clear: both; + visibility: hidden; +} + +.ui.icon.header:first-child { + margin-top: @iconHeaderFirstMargin; +} +.ui.icon.header .icon { + float: none; + display: block; + width: auto; + height: auto; + line-height: 1; + padding: 0em; + font-size: @iconHeaderSize; + margin: 0em auto @iconHeaderMargin; + opacity: @iconHeaderOpacity; +} +.ui.icon.header .content { + display: block; + padding: 0em; +} +.ui.icon.header .circular.icon { + font-size: @circularHeaderIconSize; +} +.ui.icon.header .square.icon { + font-size: @squareHeaderIconSize; +} +.ui.block.icon.header .icon { + margin-bottom: 0em; +} +.ui.icon.header.aligned { + margin-left: auto; + margin-right: auto; + display: block; +} + +/******************************* + States +*******************************/ + +.ui.disabled.header { + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.header { + color: @invertedColor; +} +.ui.inverted.header .sub.header { + color: @invertedSubHeaderColor; +} +.ui.inverted.attached.header { + background: @invertedAttachedBackground; + box-shadow: none; + border-color: transparent; +} +.ui.inverted.block.header { + background: @invertedBlockBackground; + box-shadow: none; +} +.ui.inverted.block.header { + border-bottom: none; +} + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.header { + color: @red !important; +} +a.ui.red.header:hover { + color: @redHover !important; +} +.ui.red.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @red; +} + +/* Inverted */ +.ui.inverted.red.header { + color: @lightRed !important; +} +a.ui.inverted.red.header:hover { + color: @lightRedHover !important; +} + +/*--- Orange ---*/ +.ui.orange.header { + color: @orange !important; +} +a.ui.orange.header:hover { + color: @orangeHover !important; +} +.ui.orange.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @orange; +} +/* Inverted */ +.ui.inverted.orange.header { + color: @lightOrange !important; +} +a.ui.inverted.orange.header:hover { + color: @lightOrangeHover !important; +} + +/*--- Olive ---*/ +.ui.olive.header { + color: @olive !important; +} +a.ui.olive.header:hover { + color: @oliveHover !important; +} +.ui.olive.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @olive; +} +/* Inverted */ +.ui.inverted.olive.header { + color: @lightOlive !important; +} +a.ui.inverted.olive.header:hover { + color: @lightOliveHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.header { + color: @yellow !important; +} +a.ui.yellow.header:hover { + color: @yellowHover !important; +} +.ui.yellow.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @yellow; +} +/* Inverted */ +.ui.inverted.yellow.header { + color: @lightYellow !important; +} +a.ui.inverted.yellow.header:hover { + color: @lightYellowHover !important; +} + +/*--- Green ---*/ +.ui.green.header { + color: @green !important; +} +a.ui.green.header:hover { + color: @greenHover !important; +} +.ui.green.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @green; +} +/* Inverted */ +.ui.inverted.green.header { + color: @lightGreen !important; +} +a.ui.inverted.green.header:hover { + color: @lightGreenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.header { + color: @teal !important; +} +a.ui.teal.header:hover { + color: @tealHover !important; +} +.ui.teal.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @teal; +} +/* Inverted */ +.ui.inverted.teal.header { + color: @lightTeal !important; +} +a.ui.inverted.teal.header:hover { + color: @lightTealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.header { + color: @blue !important; +} +a.ui.blue.header:hover { + color: @blueHover !important; +} +.ui.blue.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @blue; +} +/* Inverted */ +.ui.inverted.blue.header { + color: @lightBlue !important; +} +a.ui.inverted.blue.header:hover { + color: @lightBlueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.header { + color: @violet !important; +} +a.ui.violet.header:hover { + color: @violetHover !important; +} +.ui.violet.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @violet; +} +/* Inverted */ +.ui.inverted.violet.header { + color: @lightViolet !important; +} +a.ui.inverted.violet.header:hover { + color: @lightVioletHover !important; +} + +/*--- Purple ---*/ +.ui.purple.header { + color: @purple !important; +} +a.ui.purple.header:hover { + color: @purpleHover !important; +} +.ui.purple.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @purple; +} +/* Inverted */ +.ui.inverted.purple.header { + color: @lightPurple !important; +} +a.ui.inverted.purple.header:hover { + color: @lightPurpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.header { + color: @pink !important; +} +a.ui.pink.header:hover { + color: @pinkHover !important; +} +.ui.pink.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @pink; +} +/* Inverted */ +.ui.inverted.pink.header { + color: @lightPink !important; +} +a.ui.inverted.pink.header:hover { + color: @lightPinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.header { + color: @brown !important; +} +a.ui.brown.header:hover { + color: @brownHover !important; +} +.ui.brown.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @brown; +} +/* Inverted */ +.ui.inverted.brown.header { + color: @lightBrown !important; +} +a.ui.inverted.brown.header:hover { + color: @lightBrownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.header { + color: @grey !important; +} +a.ui.grey.header:hover { + color: @greyHover !important; +} +.ui.grey.dividing.header { + border-bottom: @dividedColoredBorderWidth solid @grey; +} +/* Inverted */ +.ui.inverted.grey.header { + color: @lightGrey !important; +} +a.ui.inverted.grey.header:hover { + color: @lightGreyHover !important; +} + + +/*------------------- + Aligned +--------------------*/ + +.ui.left.aligned.header { + text-align: left; +} +.ui.right.aligned.header { + text-align: right; +} +.ui.centered.header, +.ui.center.aligned.header { + text-align: center; +} +.ui.justified.header { + text-align: justify; +} +.ui.justified.header:after { + display: inline-block; + content: ''; + width: 100%; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.header, +.ui[class*="left floated"].header { + float: left; + margin-top: 0em; + margin-right: @floatedMargin; +} +.ui[class*="right floated"].header { + float: right; + margin-top: 0em; + margin-left: @floatedMargin; +} + +/*------------------- + Fitted +--------------------*/ + +.ui.fitted.header { + padding: 0em; +} + + +/*------------------- + Dividing +--------------------*/ + +.ui.dividing.header { + padding-bottom: @dividedBorderPadding; + border-bottom: @dividedBorder; +} +.ui.dividing.header .sub.header { + padding-bottom: @dividedSubHeaderPadding; +} +.ui.dividing.header .icon { + margin-bottom: @dividedIconPadding; +} + +.ui.inverted.dividing.header { + border-bottom-color: @invertedDividedBorderColor; +} + + +/*------------------- + Block +--------------------*/ + +.ui.block.header { + background: @blockBackground; + padding: @blockVerticalPadding @blockHorizontalPadding; + box-shadow: @blockBoxShadow; + border: @blockBorder; + border-radius: @blockBorderRadius; +} + +.ui.tiny.block.header { + font-size: @tinyBlock; +} +.ui.small.block.header { + font-size: @smallBlock; +} +.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumBlock; +} +.ui.large.block.header { + font-size: @largeBlock; +} +.ui.huge.block.header { + font-size: @hugeBlock; +} + +/*------------------- + Attached +--------------------*/ + +.ui.attached.header { + background: @attachedBackground; + padding: @attachedVerticalPadding @attachedHorizontalPadding; + margin-left: @attachedOffset; + margin-right: @attachedOffset; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached.block.header { + background: @blockBackground; +} + +.ui.attached:not(.top):not(.bottom).header { + margin-top: 0em; + margin-bottom: 0em; + border-top: none; + border-radius: 0em; +} +.ui.top.attached.header { + margin-bottom: 0em; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.bottom.attached.header { + margin-top: 0em; + border-top: none; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} + +/* Attached Sizes */ +.ui.tiny.attached.header { + font-size: @tinyAttachedSize; +} +.ui.small.attached.header { + font-size: @smallAttachedSize; +} +.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumAttachedSize; +} +.ui.large.attached.header { + font-size: @largeAttachedSize; +} +.ui.huge.attached.header { + font-size: @hugeAttachedSize; +} + +/*------------------- + Sizing +--------------------*/ + +.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { + font-size: @mediumFontSize; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/icon.less b/static/semantic/src/definitions/elements/icon.less new file mode 100755 index 0000000..88b870d --- /dev/null +++ b/static/semantic/src/definitions/elements/icon.less @@ -0,0 +1,501 @@ +/*! + * # Semantic UI - Icon + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'icon'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Icon +*******************************/ + +@font-face { + font-family: 'Icons'; + src: @fallbackSRC; + src: @src; + font-style: normal; + font-weight: @normal; + font-variant: normal; + text-decoration: inherit; + text-transform: none; +} + +i.icon { + display: inline-block; + opacity: @opacity; + + margin: 0em @distanceFromText 0em 0em; + + width: @width; + height: @height; + + font-family: 'Icons'; + font-style: normal; + font-weight: @normal; + text-decoration: inherit; + text-align: center; + + speak: none; + font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + backface-visibility: hidden; +} + +i.icon:before { + background: none !important; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Loading +---------------*/ + +i.icon.loading { + height: 1em; + line-height: 1; + animation: icon-loading @loadingDuration linear infinite; +} +@keyframes icon-loading { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/******************************* + States +*******************************/ + +i.icon.hover { + opacity: 1 !important; +} + +i.icon.active { + opacity: 1 !important; +} + +i.emphasized.icon { + opacity: 1 !important; +} + +i.disabled.icon { + opacity: @disabledOpacity !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Fitted +--------------------*/ + +i.fitted.icon { + width: auto; + margin: 0em !important; +} + +/*------------------- + Link +--------------------*/ + +i.link.icon, i.link.icons { + cursor: pointer; + opacity: @linkOpacity; + transition: opacity @defaultDuration @defaultEasing; +} +i.link.icon:hover, i.link.icons:hover { + opacity: 1 !important; +} + +/*------------------- + Circular +--------------------*/ + +i.circular.icon { + border-radius: 500em !important; + line-height: 1 !important; + + padding: @circularPadding !important; + box-shadow: @circularShadow; + + width: @circularSize !important; + height: @circularSize !important; +} +i.circular.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Flipped +--------------------*/ + +i.flipped.icon, +i.horizontally.flipped.icon { + transform: scale(-1, 1); +} +i.vertically.flipped.icon { + transform: scale(1, -1); +} + +/*------------------- + Rotated +--------------------*/ + +i.rotated.icon, +i.right.rotated.icon, +i.clockwise.rotated.icon { + transform: rotate(90deg); +} + +i.left.rotated.icon, +i.counterclockwise.rotated.icon { + transform: rotate(-90deg); +} + +/*------------------- + Bordered +--------------------*/ + +i.bordered.icon { + line-height: 1; + vertical-align: baseline; + + width: @borderedSize; + height: @borderedSize; + padding: @borderedVerticalPadding @borderedHorizontalPadding !important; + box-shadow: @borderedShadow; +} +i.bordered.inverted.icon { + border: none; + box-shadow: none; +} + +/*------------------- + Inverted +--------------------*/ + +/* Inverted Shapes */ +i.inverted.bordered.icon, +i.inverted.circular.icon { + background-color: @black !important; + color: @white !important; +} + +i.inverted.icon { + color: @white; +} + + +/*------------------- + Colors +--------------------*/ + +/* Red */ +i.red.icon { + color: @red !important; +} +i.inverted.red.icon { + color: @lightRed !important; +} +i.inverted.bordered.red.icon, +i.inverted.circular.red.icon { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +i.orange.icon { + color: @orange !important; +} +i.inverted.orange.icon { + color: @lightOrange !important; +} +i.inverted.bordered.orange.icon, +i.inverted.circular.orange.icon { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +i.yellow.icon { + color: @yellow !important; +} +i.inverted.yellow.icon { + color: @lightYellow !important; +} +i.inverted.bordered.yellow.icon, +i.inverted.circular.yellow.icon { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +i.olive.icon { + color: @olive !important; +} +i.inverted.olive.icon { + color: @lightOlive !important; +} +i.inverted.bordered.olive.icon, +i.inverted.circular.olive.icon { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +i.green.icon { + color: @green !important; +} +i.inverted.green.icon { + color: @lightGreen !important; +} +i.inverted.bordered.green.icon, +i.inverted.circular.green.icon { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +i.teal.icon { + color: @teal !important; +} +i.inverted.teal.icon { + color: @lightTeal !important; +} +i.inverted.bordered.teal.icon, +i.inverted.circular.teal.icon { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +i.blue.icon { + color: @blue !important; +} +i.inverted.blue.icon { + color: @lightBlue !important; +} +i.inverted.bordered.blue.icon, +i.inverted.circular.blue.icon { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +i.violet.icon { + color: @violet !important; +} +i.inverted.violet.icon { + color: @lightViolet !important; +} +i.inverted.bordered.violet.icon, +i.inverted.circular.violet.icon { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +i.purple.icon { + color: @purple !important; +} +i.inverted.purple.icon { + color: @lightPurple !important; +} +i.inverted.bordered.purple.icon, +i.inverted.circular.purple.icon { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +i.pink.icon { + color: @pink !important; +} +i.inverted.pink.icon { + color: @lightPink !important; +} +i.inverted.bordered.pink.icon, +i.inverted.circular.pink.icon { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +i.brown.icon { + color: @brown !important; +} +i.inverted.brown.icon { + color: @lightBrown !important; +} +i.inverted.bordered.brown.icon, +i.inverted.circular.brown.icon { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +i.grey.icon { + color: @grey !important; +} +i.inverted.grey.icon { + color: @lightGrey !important; +} +i.inverted.bordered.grey.icon, +i.inverted.circular.grey.icon { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +i.black.icon { + color: @black !important; +} +i.inverted.black.icon { + color: @lightBlack !important; +} +i.inverted.bordered.black.icon, +i.inverted.circular.black.icon { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Sizes +--------------------*/ + +i.mini.icon, +i.mini.icons { + line-height: 1; + font-size: @mini; +} +i.tiny.icon, +i.tiny.icons { + line-height: 1; + font-size: @tiny; +} +i.small.icon, +i.small.icons { + line-height: 1; + font-size: @small; +} +i.icon, +i.icons { + font-size: @medium; +} +i.large.icon, +i.large.icons { + line-height: 1; + vertical-align: middle; + font-size: @large; +} +i.big.icon, +i.big.icons { + line-height: 1; + vertical-align: middle; + font-size: @big; +} +i.huge.icon, +i.huge.icons { + line-height: 1; + vertical-align: middle; + font-size: @huge; +} +i.massive.icon, +i.massive.icons { + line-height: 1; + vertical-align: middle; + font-size: @massive; +} + +/******************************* + Groups +*******************************/ + +i.icons { + display: inline-block; + position: relative; + line-height: 1; +} + +i.icons .icon { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + margin: 0em; + margin: 0; +} + +i.icons .icon:first-child { + position: static; + width: auto; + height: auto; + vertical-align: top; + transform: none; + margin-right: @distanceFromText; +} + +/* Corner Icon */ +i.icons .corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; + transform: none; + font-size: @cornerIconSize; + text-shadow: @cornerIconShadow; +} +i.icons .top.right.corner.icon { + top: 0; + left: auto; + right: 0; + bottom: auto; +} +i.icons .top.left.corner.icon { + top: 0; + left: 0; + right: auto; + bottom: auto; +} +i.icons .bottom.left.corner.icon { + top: auto; + left: 0; + right: auto; + bottom: 0; +} +i.icons .bottom.right.corner.icon { + top: auto; + left: auto; + right: 0; + bottom: 0; +} + +i.icons .inverted.corner.icon { + text-shadow: @cornerIconInvertedShadow; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/image.less b/static/semantic/src/definitions/elements/image.less new file mode 100755 index 0000000..03db0f2 --- /dev/null +++ b/static/semantic/src/definitions/elements/image.less @@ -0,0 +1,328 @@ +/*! + * # Semantic UI - Image + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'image'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Image +*******************************/ + +.ui.image { + position: relative; + display: inline-block; + vertical-align: middle; + max-width: 100%; + background-color: @placeholderColor; +} + +img.ui.image { + display: block; +} + +.ui.image svg, +.ui.image img { + display: block; + max-width: 100%; + height: auto; +} + + +/******************************* + States +*******************************/ + +.ui.hidden.images, +.ui.hidden.image { + display: none; +} +.ui.hidden.transition.images, +.ui.hidden.transition.image { + display: block; + visibility: hidden; +} +.ui.images > .hidden.transition { + display: inline-block; + visibility: hidden; +} + + +.ui.disabled.images, +.ui.disabled.image { + cursor: default; + opacity: @disabledOpacity; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Inline +---------------*/ + +.ui.inline.image, +.ui.inline.image svg, +.ui.inline.image img { + display: inline-block; +} + +/*------------------ + Vertical Aligned +-------------------*/ + +.ui.top.aligned.images .image, +.ui.top.aligned.image, +.ui.top.aligned.image svg, +.ui.top.aligned.image img { + display: inline-block; + vertical-align: top; +} +.ui.middle.aligned.images .image, +.ui.middle.aligned.image, +.ui.middle.aligned.image svg, +.ui.middle.aligned.image img { + display: inline-block; + vertical-align: middle; +} +.ui.bottom.aligned.images .image, +.ui.bottom.aligned.image, +.ui.bottom.aligned.image svg, +.ui.bottom.aligned.image img { + display: inline-block; + vertical-align: bottom; +} + +/*-------------- + Rounded +---------------*/ + +.ui.rounded.images .image, +.ui.rounded.image, +.ui.rounded.images .image > *, +.ui.rounded.image > * { + border-radius: @roundedBorderRadius; +} + +/*-------------- + Bordered +---------------*/ + +.ui.bordered.images .image, +.ui.bordered.images img, +.ui.bordered.images svg, +.ui.bordered.image img, +.ui.bordered.image svg, +img.ui.bordered.image { + border: @imageBorder; +} + +/*-------------- + Circular +---------------*/ + +.ui.circular.images, +.ui.circular.image { + overflow: hidden; +} + +.ui.circular.images .image, +.ui.circular.image, +.ui.circular.images .image > *, +.ui.circular.image > * { + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.images, +.ui.fluid.image, +.ui.fluid.images img, +.ui.fluid.images svg, +.ui.fluid.image svg, +.ui.fluid.image img { + display: block; + width: 100%; + height: auto; +} + + +/*-------------- + Avatar +---------------*/ + +.ui.avatar.images .image, +.ui.avatar.images img, +.ui.avatar.images svg, +.ui.avatar.image img, +.ui.avatar.image svg, +.ui.avatar.image { + margin-right: @avatarMargin; + + display: inline-block; + width: @avatarSize; + height: @avatarSize; + + -webkit-border-radius: @circularRadius; + -moz-border-radius: @circularRadius; + border-radius: @circularRadius; +} + +/*------------------- + Spaced +--------------------*/ + +.ui.spaced.image { + display: inline-block !important; + margin-left: @spacedDistance; + margin-right: @spacedDistance; +} + +.ui[class*="left spaced"].image { + margin-left: @spacedDistance; + margin-right: 0em; +} + +.ui[class*="right spaced"].image { + margin-left: 0em; + margin-right: @spacedDistance; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.image, +.ui.floated.images { + float: left; + margin-right: @floatedHorizontalMargin; + margin-bottom: @floatedVerticalMargin; +} +.ui.right.floated.images, +.ui.right.floated.image { + float: right; + margin-right: 0em; + margin-bottom: @floatedVerticalMargin; + margin-left: @floatedHorizontalMargin; +} + +.ui.floated.images:last-child, +.ui.floated.image:last-child { + margin-bottom: 0em; +} + + +.ui.centered.images, +.ui.centered.image { + margin-left: auto; + margin-right: auto; +} + +/*-------------- + Sizes +---------------*/ + +.ui.mini.images .image, +.ui.mini.images img, +.ui.mini.images svg, +.ui.mini.image { + width: @miniWidth; + height: auto; + font-size: @mini; +} +.ui.tiny.images .image, +.ui.tiny.images img, +.ui.tiny.images svg, +.ui.tiny.image { + width: @tinyWidth; + height: auto; + font-size: @tiny; +} +.ui.small.images .image, +.ui.small.images img, +.ui.small.images svg, +.ui.small.image { + width: @smallWidth; + height: auto; + font-size: @small; +} +.ui.medium.images .image, +.ui.medium.images img, +.ui.medium.images svg, +.ui.medium.image { + width: @mediumWidth; + height: auto; + font-size: @medium; +} +.ui.large.images .image, +.ui.large.images img, +.ui.large.images svg, +.ui.large.image { + width: @largeWidth; + height: auto; + font-size: @large; +} +.ui.big.images .image, +.ui.big.images img, +.ui.big.images svg, +.ui.big.image { + width: @bigWidth; + height: auto; + font-size: @big; +} +.ui.huge.images .image, +.ui.huge.images img, +.ui.huge.images svg, +.ui.huge.image { + width: @hugeWidth; + height: auto; + font-size: @huge; +} +.ui.massive.images .image, +.ui.massive.images img, +.ui.massive.images svg, +.ui.massive.image { + width: @massiveWidth; + height: auto; + font-size: @massive; +} + + +/******************************* + Groups +*******************************/ + +.ui.images { + font-size: 0em; + margin: 0em -@imageHorizontalMargin 0rem; +} + +.ui.images .image, +.ui.images > img, +.ui.images > svg { + display: inline-block; + margin: 0em @imageHorizontalMargin @imageVerticalMargin; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/input.less b/static/semantic/src/definitions/elements/input.less new file mode 100755 index 0000000..22d439f --- /dev/null +++ b/static/semantic/src/definitions/elements/input.less @@ -0,0 +1,508 @@ +/*! + * # Semantic UI - Input + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'input'; + +@import (multiple) '../../theme.config'; + + +/******************************* + Standard +*******************************/ + + +/*-------------------- + Inputs +---------------------*/ + +.ui.input { + position: relative; + font-weight: @normal; + font-style: normal; + display: inline-flex; + color: @inputColor; +} +.ui.input > input { + margin: 0em; + max-width: 100%; + flex: 1 0 auto; + outline: none; + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); + text-align: @textAlign; + line-height: @lineHeight; + + font-family: @inputFont; + padding: @padding; + + background: @background; + border: @border; + color: @inputColor; + border-radius: @borderRadius; + transition: @transition; + + box-shadow: @boxShadow; +} + + +/*-------------------- + Placeholder +---------------------*/ + +/* browsers require these rules separate */ + +.ui.input > input::-webkit-input-placeholder { + color: @placeholderColor; +} +.ui.input > input::-moz-placeholder { + color: @placeholderColor; +} +.ui.input > input:-ms-input-placeholder { + color: @placeholderColor; +} + + +/******************************* + States +*******************************/ + +/*-------------------- + Disabled +---------------------*/ + +.ui.disabled.input, +.ui.input:not(.disabled) input[disabled] { + opacity: @disabledOpacity; +} + +.ui.disabled.input > input, +.ui.input:not(.disabled) input[disabled] { + pointer-events: none; +} + +/*-------------------- + Active +---------------------*/ + +.ui.input > input:active, +.ui.input.down input { + border-color: @downBorderColor; + background: @downBackground; + color: @downColor; + box-shadow: @downBoxShadow; +} + +/*-------------------- + Loading +---------------------*/ + +.ui.loading.loading.input > i.icon:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} +.ui.loading.loading.input > i.icon:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: button-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor transparent transparent; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + + +/*-------------------- + Focus +---------------------*/ + +.ui.input.focus > input, +.ui.input > input:focus { + border-color: @focusBorderColor; + background: @focusBackground; + color: @focusColor; + box-shadow: @focusBoxShadow; +} +.ui.input.focus > input::-webkit-input-placeholder, +.ui.input > input:focus::-webkit-input-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus > input::-moz-placeholder, +.ui.input > input:focus::-moz-placeholder { + color: @placeholderFocusColor; +} +.ui.input.focus > input:-ms-input-placeholder, +.ui.input > input:focus:-ms-input-placeholder { + color: @placeholderFocusColor; +} + + + +/*-------------------- + Error +---------------------*/ + +.ui.input.error > input { + background-color: @errorBackground; + border-color: @errorBorder; + color: @errorColor; + box-shadow: @errorBoxShadow; +} + +/* Error Placeholder */ +.ui.input.error > input::-webkit-input-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error > input::-moz-placeholder { + color: @placeholderErrorColor; +} +.ui.input.error > input:-ms-input-placeholder { + color: @placeholderErrorColor !important; +} + +/* Focused Error Placeholder */ +.ui.input.error > input:focus::-webkit-input-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error > input:focus::-moz-placeholder { + color: @placeholderErrorFocusColor; +} +.ui.input.error > input:focus:-ms-input-placeholder { + color: @placeholderErrorFocusColor !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------------- + Transparent +---------------------*/ + + +.ui.transparent.input > input { + border-color: transparent !important; + background-color: transparent !important; + padding: 0em !important; + box-shadow: none !important; + border-radius: 0px !important; +} + +/* Transparent Icon */ +.ui.transparent.icon.input > i.icon { + width: @transparentIconWidth; +} +.ui.transparent.icon.input > input { + padding-left: 0em !important; + padding-right: @transparentIconMargin !important; +} +.ui.transparent[class*="left icon"].input > input { + padding-left: @transparentIconMargin !important; + padding-right: 0em !important; +} + +/* Transparent Inverted */ +.ui.transparent.inverted.input { + color: @transparentInvertedColor; +} +.ui.transparent.inverted.input > input { + color: inherit; +} + +.ui.transparent.inverted.input > input::-webkit-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input > input::-moz-placeholder { + color: @transparentInvertedPlaceholderColor; +} +.ui.transparent.inverted.input > input:-ms-input-placeholder { + color: @transparentInvertedPlaceholderColor; +} + + +/*-------------------- + Icon +---------------------*/ + +.ui.icon.input > i.icon { + cursor: default; + position: absolute; + line-height: 1; + text-align: center; + top: 0px; + right: 0px; + margin: 0em; + height: 100%; + + width: @iconWidth; + opacity: @iconOpacity; + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @iconTransition; +} +.ui.icon.input > i.icon:not(.link) { + pointer-events: none; +} +.ui.icon.input > input { + padding-right: @iconMargin !important; +} + +.ui.icon.input > i.icon:before, +.ui.icon.input > i.icon:after { + left: 0; + position: absolute; + text-align: center; + top: 50%; + width: 100%; + margin-top: @iconOffset; +} +.ui.icon.input > i.link.icon { + cursor: pointer; +} +.ui.icon.input > i.circular.icon { + top: @circularIconVerticalOffset; + right: @circularIconHorizontalOffset; +} + +/* Left Icon Input */ +.ui[class*="left icon"].input > i.icon { + right: auto; + left: @borderWidth; + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="left icon"].input > i.circular.icon { + right: auto; + left: @circularIconHorizontalOffset; +} +.ui[class*="left icon"].input > input { + padding-left: @iconMargin !important; + padding-right: @horizontalPadding !important; +} + +/* Focus */ +.ui.icon.input > input:focus ~ i.icon { + opacity: 1; +} + +/*-------------------- + Labeled +---------------------*/ + +/* Adjacent Label */ +.ui.labeled.input > .label { + flex: 0 0 auto; + margin: 0; + font-size: @relativeMedium; +} +.ui.labeled.input > .label:not(.corner) { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; +} + +/* Regular Label on Left */ +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + border-left-color: transparent; +} +.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { + border-left-color: @focusBorderColor; +} + +/* Regular Label on Right */ +.ui[class*="right labeled"].input > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui[class*="right labeled"].input > input + .label { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} + +.ui[class*="right labeled"].input > input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Corner Label */ +.ui.labeled.input .corner.label { + top: @labelCornerTop; + right: @labelCornerRight; + font-size: @labelCornerSize; + border-radius: 0em @borderRadius 0em 0em; +} + +/* Spacing with corner label */ +.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { + padding-right: @labeledMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { + padding-right: @labeledIconInputMargin !important; +} +.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon { + margin-right: @labeledIconMargin; +} + +/* Left Labeled */ +.ui[class*="left corner labeled"].labeled.input > input { + padding-left: @labeledMargin !important; +} +.ui[class*="left corner labeled"].icon.input > input { + padding-left: @labeledIconInputMargin !important; +} +.ui[class*="left corner labeled"].icon.input > .icon { + margin-left: @labeledIconMargin; +} + +/* Corner Label Position */ +.ui.input > .ui.corner.label { + top: @borderWidth; + right: @borderWidth; +} +.ui.input > .ui.left.corner.label { + right: auto; + left: @borderWidth; +} + + +/*-------------------- + Action +---------------------*/ + +.ui.action.input > .button, +.ui.action.input > .buttons { + display: flex; + align-items: center; + flex: 0 0 auto; +} +.ui.action.input > .button, +.ui.action.input > .buttons > .button { + padding-top: @verticalPadding; + padding-bottom: @verticalPadding; + margin: 0; +} + +/* Button on Right */ +.ui.action.input:not([class*="left action"]) > input { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + border-right-color: transparent !important; +} +.ui.action.input:not([class*="left action"]) > .dropdown:not(:first-child), +.ui.action.input:not([class*="left action"]) > .button:not(:first-child), +.ui.action.input:not([class*="left action"]) > .buttons:not(:first-child) > .button { + border-radius: 0px; +} +.ui.action.input:not([class*="left action"]) > .dropdown:last-child, +.ui.action.input:not([class*="left action"]) > .button:last-child, +.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button { + border-radius: 0px @borderRadius @borderRadius 0px; +} + +/* Input Focus */ +.ui.action.input:not([class*="left action"]) > input:focus { + border-right-color: @focusBorderColor !important; +} + +/* Button on Left */ +.ui[class*="left action"].input > input { + border-top-left-radius: 0px !important; + border-bottom-left-radius: 0px !important; + border-left-color: transparent !important; +} +.ui[class*="left action"].input > .dropdown, +.ui[class*="left action"].input > .button, +.ui[class*="left action"].input > .buttons > .button { + border-radius: 0px; +} +.ui[class*="left action"].input > .dropdown:first-child, +.ui[class*="left action"].input > .button:first-child, +.ui[class*="left action"].input > .buttons:first-child > .button { + border-radius: @borderRadius 0px 0px @borderRadius; +} +/* Input Focus */ +.ui[class*="left action"].input > input:focus { + border-left-color: @focusBorderColor !important; +} + +/*-------------------- + Inverted +---------------------*/ + +/* Standard */ +.ui.inverted.input > input { + border: none; +} + +/*-------------------- + Fluid +---------------------*/ + +.ui.fluid.input { + display: flex; +} +.ui.fluid.input > input { + width: 0px !important; +} + +/*-------------------- + Size +---------------------*/ + +.ui.mini.input { + font-size: @relativeMini; +} +.ui.small.input { + font-size: @relativeSmall; +} +.ui.input { + font-size: @relativeMedium; +} +.ui.large.input { + font-size: @relativeLarge; +} +.ui.big.input { + font-size: @relativeBig; +} +.ui.huge.input { + font-size: @relativeHuge; +} +.ui.massive.input { + font-size: @relativeMassive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/label.less b/static/semantic/src/definitions/elements/label.less new file mode 100755 index 0000000..7869305 --- /dev/null +++ b/static/semantic/src/definitions/elements/label.less @@ -0,0 +1,1258 @@ +/*! + * # Semantic UI - Label + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'label'; + +@import (multiple) '../../theme.config'; + +/******************************* + Label +*******************************/ + +.ui.label { + display: inline-block; + line-height: 1; + vertical-align: @verticalAlign; + + margin: @verticalMargin @horizontalMargin; + + background-color: @backgroundColor; + background-image: @backgroundImage; + padding: @verticalPadding @horizontalPadding; + color: @color; + + text-transform: @textTransform; + font-weight: @fontWeight; + + border: @border; + border-radius: @borderRadius; + transition: @transition; +} + +.ui.label:first-child { + margin-left: 0em; +} +.ui.label:last-child { + margin-right: 0em; +} + +/* Link */ +a.ui.label { + cursor: pointer; +} + +/* Inside Link */ +.ui.label > a { + cursor: pointer; + color: inherit; + opacity: @linkOpacity; + transition: @linkTransition; +} +.ui.label > a:hover { + opacity: 1; +} + +/* Image */ +.ui.label > img { + width: auto !important; + vertical-align: middle; + height: @imageHeight !important; +} + +/* Icon */ +.ui.label > .icon { + width: auto; + margin: 0em @iconDistance 0em 0em; +} + +/* Detail */ +.ui.label > .detail { + display: inline-block; + vertical-align: top; + font-weight: @detailFontWeight; + margin-left: @detailMargin; + opacity: @detailOpacity; +} +.ui.label > .detail .icon { + margin: 0em @detailIconDistance 0em 0em; +} + + +/* Removable label */ +.ui.label > .close.icon, +.ui.label > .delete.icon { + cursor: pointer; + margin-right: 0em; + margin-left: @deleteMargin; + font-size: @deleteSize; + opacity: @deleteOpacity; + transition: @deleteTransition; +} +.ui.label > .delete.icon:hover { + opacity: 1; +} + +/*------------------- + Group +--------------------*/ + +.ui.labels > .label { + margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; +} + + +/*------------------- + Coupling +--------------------*/ + +.ui.header > .ui.label { + margin-top: @lineHeightOffset; +} + + +/* Remove border radius on attached segment */ +.ui.attached.segment > .ui.top.left.attached.label, +.ui.bottom.attached.segment > .ui.top.left.attached.label { + border-top-left-radius: 0; +} +.ui.attached.segment > .ui.top.right.attached.label, +.ui.bottom.attached.segment > .ui.top.right.attached.label { + border-top-right-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.left.attached.label { + border-bottom-left-radius: 0; +} +.ui.top.attached.segment > .ui.bottom.right.attached.label { + border-bottom-right-radius: 0; +} + +/* Padding on next content after a label */ +.ui.top.attached.label:first-child + :not(.attached), +.ui.top.attached.label + [class*="right floated"] + * { + margin-top: @attachedSegmentPadding !important; +} +.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) { + margin-top: 0em; + margin-bottom: @attachedSegmentPadding !important; +} + + +/******************************* + Types +*******************************/ + +.ui.image.label { + width: auto !important; + margin-top: 0em; + margin-bottom: 0em; + max-width: 9999px; + vertical-align: baseline; + text-transform: none; + + background: @imageLabelBackground; + padding: @imageLabelPadding; + border-radius: @imageLabelBorderRadius; + box-shadow: @imageLabelBoxShadow; +} + +.ui.image.label img { + display: inline-block; + vertical-align: top; + + height: @imageLabelImageHeight; + margin: @imageLabelImageMargin; + border-radius: @imageLabelImageBorderRadius; +} + +.ui.image.label .detail { + background: @imageLabelDetailBackground; + margin: @imageLabelDetailMargin; + padding: @imageLabelDetailPadding; + border-radius: 0em @imageLabelBorderRadius @imageLabelBorderRadius 0em; +} + +/*------------------- + Tag +--------------------*/ + +.ui.tag.labels .label, +.ui.tag.label { + margin-left: 1em; + position: relative; + padding-left: @tagHorizontalPadding; + padding-right: @tagHorizontalPadding; + + border-radius: 0em @borderRadius @borderRadius 0em; + transition: @tagTransition; +} +.ui.tag.labels .label:before, +.ui.tag.label:before { + position: absolute; + transform: translateY(-50%) translateX(50%) rotate(-45deg); + + top: @tagTriangleTopOffset; + right: @tagTriangleRightOffset; + content: ''; + + background-color: inherit; + background-image: @tagTriangleBackgroundImage; + + width: @tagTriangleSize; + height: @tagTriangleSize; + transition: @tagTransition; +} + + +.ui.tag.labels .label:after, +.ui.tag.label:after { + position: absolute; + content: ''; + top: 50%; + left: -(@tagCircleSize / 2); + + margin-top: -(@tagCircleSize / 2); + background-color: @tagCircleColor !important; + width: @tagCircleSize; + height: @tagCircleSize; + + box-shadow: @tagCircleBoxShadow; + border-radius: @circularRadius; +} + + +/*------------------- + Corner Label +--------------------*/ + +.ui.corner.label { + position: absolute; + top: 0em; + right: 0em; + margin: 0em; + padding: 0em; + text-align: center; + + border-color: @backgroundColor; + + width: @cornerTriangleSize; + height: @cornerTriangleSize; + z-index: @cornerTriangleZIndex; + transition: @cornerTriangleTransition; +} + +/* Icon Label */ +.ui.corner.label{ + background-color: transparent !important; +} +.ui.corner.label:after { + position: absolute; + content: ""; + right: 0em; + top: 0em; + z-index: -1; + + width: 0em; + height: 0em; + background-color: transparent !important; + + border-top: 0em solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: @cornerTriangleSize solid transparent; + border-left: 0em solid transparent; + + border-right-color: inherit; + transition: @cornerTriangleTransition; +} + +.ui.corner.label .icon { + cursor: default; + position: relative; + top: @cornerIconTopOffset; + left: @cornerIconLeftOffset; + font-size: @cornerIconSize; + margin: 0em; +} + +/* Left Corner */ +.ui.left.corner.label, +.ui.left.corner.label:after { + right: auto; + left: 0em; +} +.ui.left.corner.label:after { + border-top: @cornerTriangleSize solid transparent; + border-right: @cornerTriangleSize solid transparent; + border-bottom: 0em solid transparent; + border-left: 0em solid transparent; + + border-top-color: inherit; +} +.ui.left.corner.label .icon { + left: -@cornerIconLeftOffset; +} + +/* Segment */ +.ui.segment > .ui.corner.label { + top: -1px; + right: -1px; +} +.ui.segment > .ui.left.corner.label { + right: auto; + left: -1px; +} + +/*------------------- + Ribbon +--------------------*/ + +.ui.ribbon.label { + position: relative; + margin: 0em; + min-width: max-content; + border-radius: 0em @borderRadius @borderRadius 0em; + border-color: @ribbonShadowColor; +} + +.ui.ribbon.label:after { + position: absolute; + content: ''; + + top: 100%; + left: 0%; + background-color: transparent !important; + + border-style: solid; + border-width: 0em @ribbonTriangleSize @ribbonTriangleSize 0em; + border-color: transparent; + border-right-color: inherit; + + width: 0em; + height: 0em; +} +/* Positioning */ +.ui.ribbon.label { + left: @ribbonOffset; + margin-right: -@ribbonTriangleSize; + padding-left: @ribbonDistance; + padding-right: @ribbonTriangleSize; +} +.ui[class*="right ribbon"].label { + left: @rightRibbonOffset; + padding-left: @ribbonTriangleSize; + padding-right: @ribbonDistance; +} + +/* Right Ribbon */ +.ui[class*="right ribbon"].label { + text-align: left; + transform: translateX(-100%); + border-radius: @borderRadius 0em 0em @borderRadius; +} +.ui[class*="right ribbon"].label:after { + left: auto; + right: 0%; + + border-style: solid; + border-width: @ribbonTriangleSize @ribbonTriangleSize 0em 0em; + border-color: transparent; + border-top-color: inherit; +} + +/* Inside Table */ +.ui.image > .ribbon.label, +.ui.card .image > .ribbon.label { + position: absolute; + top: @ribbonImageTopDistance; +} +.ui.card .image > .ui.ribbon.label, +.ui.image > .ui.ribbon.label { + left: @ribbonImageOffset; +} +.ui.card .image > .ui[class*="right ribbon"].label, +.ui.image > .ui[class*="right ribbon"].label { + left: @rightRibbonImageOffset; + padding-left: @horizontalPadding; +} + +/* Inside Table */ +.ui.table td > .ui.ribbon.label { + left: @ribbonTableOffset; +} +.ui.table td > .ui[class*="right ribbon"].label { + left: @rightRibbonTableOffset; + padding-left: @horizontalPadding; +} + + +/*------------------- + Attached +--------------------*/ + +.ui[class*="top attached"].label, +.ui.attached.label { + width: 100%; + position: absolute; + margin: 0em; + top: 0em; + left: 0em; + + padding: @attachedVerticalPadding @attachedHorizontalPadding; + + border-radius: @attachedCornerBorderRadius @attachedCornerBorderRadius 0em 0em; +} +.ui[class*="bottom attached"].label { + top: auto; + bottom: 0em; + border-radius: 0em 0em @attachedCornerBorderRadius @attachedCornerBorderRadius; +} + +.ui[class*="top left attached"].label { + width: auto; + margin-top: 0em !important; + border-radius: @attachedCornerBorderRadius 0em @attachedBorderRadius 0em; +} + +.ui[class*="top right attached"].label { + width: auto; + left: auto; + right: 0em; + border-radius: 0em @attachedCornerBorderRadius 0em @attachedBorderRadius; +} +.ui[class*="bottom left attached"].label { + width: auto; + top: auto; + bottom: 0em; + border-radius: 0em @attachedBorderRadius 0em @attachedCornerBorderRadius; +} +.ui[class*="bottom right attached"].label { + top: auto; + bottom: 0em; + left: auto; + right: 0em; + width: auto; + border-radius: @attachedBorderRadius 0em @attachedCornerBorderRadius 0em; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.label.disabled { + opacity: 0.5; +} + +/*------------------- + Hover +--------------------*/ + +a.ui.labels .label:hover, +a.ui.label:hover { + background-color: @labelHoverBackgroundColor; + border-color: @labelHoverBackgroundColor; + + background-image: @labelHoverBackgroundImage; + color: @labelHoverTextColor; +} +.ui.labels a.label:hover:before, +a.ui.label:hover:before { + color: @labelHoverTextColor; +} + +/*------------------- + Active +--------------------*/ + +.ui.active.label { + background-color: @labelActiveBackgroundColor; + border-color: @labelActiveBackgroundColor; + + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} +.ui.active.label:before { + background-color: @labelActiveBackgroundColor; + background-image: @labelActiveBackgroundImage; + color: @labelActiveTextColor; +} + +/*------------------- + Active Hover +--------------------*/ + +a.ui.labels .active.label:hover, +a.ui.active.label:hover { + background-color: @labelActiveHoverBackgroundColor; + border-color: @labelActiveHoverBackgroundColor; + + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} +.ui.labels a.active.label:ActiveHover:before, +a.ui.active.label:ActiveHover:before { + background-color: @labelActiveHoverBackgroundColor; + background-image: @labelActiveHoverBackgroundImage; + color: @labelActiveHoverTextColor; +} + + +/*------------------- + Visible +--------------------*/ + +.ui.labels.visible .label, +.ui.label.visible:not(.dropdown) { + display: inline-block !important; +} + +/*------------------- + Hidden +--------------------*/ + +.ui.labels.hidden .label, +.ui.label.hidden { + display: none !important; +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Colors +--------------------*/ + +/*--- Red ---*/ +.ui.red.labels .label, +.ui.red.label { + background-color: @red !important; + border-color: @red !important; + color: @redTextColor !important; +} +/* Link */ +.ui.red.labels .label:hover, +a.ui.red.label:hover{ + background-color: @redHover !important; + border-color: @redHover !important; + color: @redHoverTextColor !important; +} +/* Corner */ +.ui.red.corner.label, +.ui.red.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.red.ribbon.label { + border-color: @redRibbonShadow !important; +} +/* Basic */ +.ui.basic.red.label { + background: @basicBackground !important; + color: @red !important; + border-color: @red !important; +} +.ui.basic.red.labels a.label:hover, +a.ui.basic.red.label:hover { + background-color: @white !important; + color: @redHover !important; + border-color: @redHover !important; +} + +/*--- Orange ---*/ +.ui.orange.labels .label, +.ui.orange.label { + background-color: @orange !important; + border-color: @orange !important; + color: @orangeTextColor !important; +} +/* Link */ +.ui.orange.labels .label:hover, +a.ui.orange.label:hover{ + background-color: @orangeHover !important; + border-color: @orangeHover !important; + color: @orangeHoverTextColor !important; +} +/* Corner */ +.ui.orange.corner.label, +.ui.orange.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.orange.ribbon.label { + border-color: @orangeRibbonShadow !important; +} +/* Basic */ +.ui.basic.orange.label { + background: @basicBackground !important; + color: @orange !important; + border-color: @orange !important; +} +.ui.basic.orange.labels a.label:hover, +a.ui.basic.orange.label:hover { + background-color: @white !important; + color: @orangeHover !important; + border-color: @orangeHover !important; +} + +/*--- Yellow ---*/ +.ui.yellow.labels .label, +.ui.yellow.label { + background-color: @yellow !important; + border-color: @yellow !important; + color: @yellowTextColor !important; +} +/* Link */ +.ui.yellow.labels .label:hover, +a.ui.yellow.label:hover{ + background-color: @yellowHover !important; + border-color: @yellowHover !important; + color: @yellowHoverTextColor !important; +} +/* Corner */ +.ui.yellow.corner.label, +.ui.yellow.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.yellow.ribbon.label { + border-color: @yellowRibbonShadow !important; +} +/* Basic */ +.ui.basic.yellow.label { + background: @basicBackground !important; + color: @yellow !important; + border-color: @yellow !important; +} +.ui.basic.yellow.labels a.label:hover, +a.ui.basic.yellow.label:hover { + background-color: @white !important; + color: @yellowHover !important; + border-color: @yellowHover !important; +} + +/*--- Olive ---*/ +.ui.olive.labels .label, +.ui.olive.label { + background-color: @olive !important; + border-color: @olive !important; + color: @oliveTextColor !important; +} +/* Link */ +.ui.olive.labels .label:hover, +a.ui.olive.label:hover{ + background-color: @oliveHover !important; + border-color: @oliveHover !important; + color: @oliveHoverTextColor !important; +} +/* Corner */ +.ui.olive.corner.label, +.ui.olive.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.olive.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.olive.label { + background: @basicBackground !important; + color: @olive !important; + border-color: @olive !important; +} +.ui.basic.olive.labels a.label:hover, +a.ui.basic.olive.label:hover { + background-color: @white !important; + color: @oliveHover !important; + border-color: @oliveHover !important; +} + +/*--- Green ---*/ +.ui.green.labels .label, +.ui.green.label { + background-color: @green !important; + border-color: @green !important; + color: @greenTextColor !important; +} +/* Link */ +.ui.green.labels .label:hover, +a.ui.green.label:hover{ + background-color: @greenHover !important; + border-color: @greenHover !important; + color: @greenHoverTextColor !important; +} +/* Corner */ +.ui.green.corner.label, +.ui.green.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.green.ribbon.label { + border-color: @greenRibbonShadow !important; +} +/* Basic */ +.ui.basic.green.label { + background: @basicBackground !important; + color: @green !important; + border-color: @green !important; +} +.ui.basic.green.labels a.label:hover, +a.ui.basic.green.label:hover { + background-color: @white !important; + color: @greenHover !important; + border-color: @greenHover !important; +} + +/*--- Teal ---*/ +.ui.teal.labels .label, +.ui.teal.label { + background-color: @teal !important; + border-color: @teal !important; + color: @tealTextColor !important; +} +/* Link */ +.ui.teal.labels .label:hover, +a.ui.teal.label:hover{ + background-color: @tealHover !important; + border-color: @tealHover !important; + color: @tealHoverTextColor !important; +} +/* Corner */ +.ui.teal.corner.label, +.ui.teal.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.teal.ribbon.label { + border-color: @tealRibbonShadow !important; +} +/* Basic */ +.ui.basic.teal.label { + background: @basicBackground !important; + color: @teal !important; + border-color: @teal !important; +} +.ui.basic.teal.labels a.label:hover, +a.ui.basic.teal.label:hover { + background-color: @white !important; + color: @tealHover !important; + border-color: @tealHover !important; +} + +/*--- Blue ---*/ +.ui.blue.labels .label, +.ui.blue.label { + background-color: @blue !important; + border-color: @blue !important; + color: @blueTextColor !important; +} +/* Link */ +.ui.blue.labels .label:hover, +a.ui.blue.label:hover{ + background-color: @blueHover !important; + border-color: @blueHover !important; + color: @blueHoverTextColor !important; +} +/* Corner */ +.ui.blue.corner.label, +.ui.blue.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.blue.ribbon.label { + border-color: @blueRibbonShadow !important; +} +/* Basic */ +.ui.basic.blue.label { + background: @basicBackground !important; + color: @blue !important; + border-color: @blue !important; +} +.ui.basic.blue.labels a.label:hover, +a.ui.basic.blue.label:hover { + background-color: @white !important; + color: @blueHover !important; + border-color: @blueHover !important; +} + +/*--- Violet ---*/ +.ui.violet.labels .label, +.ui.violet.label { + background-color: @violet !important; + border-color: @violet !important; + color: @violetTextColor !important; +} +/* Link */ +.ui.violet.labels .label:hover, +a.ui.violet.label:hover{ + background-color: @violetHover !important; + border-color: @violetHover !important; + color: @violetHoverTextColor !important; +} +/* Corner */ +.ui.violet.corner.label, +.ui.violet.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.violet.ribbon.label { + border-color: @violetRibbonShadow !important; +} +/* Basic */ +.ui.basic.violet.label { + background: @basicBackground !important; + color: @violet !important; + border-color: @violet !important; +} +.ui.basic.violet.labels a.label:hover, +a.ui.basic.violet.label:hover { + background-color: @white !important; + color: @violetHover !important; + border-color: @violetHover !important; +} + +/*--- Purple ---*/ +.ui.purple.labels .label, +.ui.purple.label { + background-color: @purple !important; + border-color: @purple !important; + color: @purpleTextColor !important; +} +/* Link */ +.ui.purple.labels .label:hover, +a.ui.purple.label:hover{ + background-color: @purpleHover !important; + border-color: @purpleHover !important; + color: @purpleHoverTextColor !important; +} +/* Corner */ +.ui.purple.corner.label, +.ui.purple.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.purple.ribbon.label { + border-color: @purpleRibbonShadow !important; +} +/* Basic */ +.ui.basic.purple.label { + background: @basicBackground !important; + color: @purple !important; + border-color: @purple !important; +} +.ui.basic.purple.labels a.label:hover, +a.ui.basic.purple.label:hover { + background-color: @white !important; + color: @purpleHover !important; + border-color: @purpleHover !important; +} + +/*--- Pink ---*/ +.ui.pink.labels .label, +.ui.pink.label { + background-color: @pink !important; + border-color: @pink !important; + color: @pinkTextColor !important; +} +/* Link */ +.ui.pink.labels .label:hover, +a.ui.pink.label:hover{ + background-color: @pinkHover !important; + border-color: @pinkHover !important; + color: @pinkHoverTextColor !important; +} +/* Corner */ +.ui.pink.corner.label, +.ui.pink.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.pink.ribbon.label { + border-color: @pinkRibbonShadow !important; +} +/* Basic */ +.ui.basic.pink.label { + background: @basicBackground !important; + color: @pink !important; + border-color: @pink !important; +} +.ui.basic.pink.labels a.label:hover, +a.ui.basic.pink.label:hover { + background-color: @white !important; + color: @pinkHover !important; + border-color: @pinkHover !important; +} + +/*--- Brown ---*/ +.ui.brown.labels .label, +.ui.brown.label { + background-color: @brown !important; + border-color: @brown !important; + color: @brownTextColor !important; +} +/* Link */ +.ui.brown.labels .label:hover, +a.ui.brown.label:hover{ + background-color: @brownHover !important; + border-color: @brownHover !important; + color: @brownHoverTextColor !important; +} +/* Corner */ +.ui.brown.corner.label, +.ui.brown.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.brown.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.brown.label { + background: @basicBackground !important; + color: @brown !important; + border-color: @brown !important; +} +.ui.basic.brown.labels a.label:hover, +a.ui.basic.brown.label:hover { + background-color: @white !important; + color: @brownHover !important; + border-color: @brownHover !important; +} + +/*--- Grey ---*/ +.ui.grey.labels .label, +.ui.grey.label { + background-color: @grey !important; + border-color: @grey !important; + color: @greyTextColor !important; +} +/* Link */ +.ui.grey.labels .label:hover, +a.ui.grey.label:hover{ + background-color: @greyHover !important; + border-color: @greyHover !important; + color: @greyHoverTextColor !important; +} +/* Corner */ +.ui.grey.corner.label, +.ui.grey.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.grey.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.grey.label { + background: @basicBackground !important; + color: @grey !important; + border-color: @grey !important; +} +.ui.basic.grey.labels a.label:hover, +a.ui.basic.grey.label:hover { + background-color: @white !important; + color: @greyHover !important; + border-color: @greyHover !important; +} + +/*--- Black ---*/ +.ui.black.labels .label, +.ui.black.label { + background-color: @black !important; + border-color: @black !important; + color: @blackTextColor !important; +} +/* Link */ +.ui.black.labels .label:hover, +a.ui.black.label:hover{ + background-color: @blackHover !important; + border-color: @blackHover !important; + color: @blackHoverTextColor !important; +} +/* Corner */ +.ui.black.corner.label, +.ui.black.corner.label:hover { + background-color: transparent !important; +} +/* Ribbon */ +.ui.black.ribbon.label { + border-color: @brownRibbonShadow !important; +} +/* Basic */ +.ui.basic.black.label { + background: @basicBackground !important; + color: @black !important; + border-color: @black !important; +} +.ui.basic.black.labels a.label:hover, +a.ui.basic.black.label:hover { + background-color: @white !important; + color: @blackHover !important; + border-color: @blackHover !important; +} + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.label { + background: @basicBackground; + border: @basicBorder; + color: @basicColor; + box-shadow: @basicBoxShadow; +} + +/* Link */ +a.ui.basic.label:hover { + text-decoration: none; + background: @basicHoverBackground; + color: @basicHoverColor; + box-shadow: @basicHoverBorder; + box-shadow: @basicHoverBoxShadow; +} + +/* Pointing */ +.ui.basic.pointing.label:before { + border-color: inherit; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.label.fluid, +.ui.fluid.labels > .label { + width: 100%; + box-sizing: border-box; +} + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.labels .label, +.ui.inverted.label { + color: @invertedTextColor !important; +} + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.labels .label, +.ui.horizontal.label { + margin: 0em @horizontalLabelMargin 0em 0em; + + padding: @horizontalLabelVerticalPadding @horizontalPadding; + min-width: @horizontalLabelMinWidth; + text-align: center; +} + + +/*------------------- + Circular +--------------------*/ + +.ui.circular.labels .label, +.ui.circular.label { + min-width: @circularMinSize; + min-height: @circularMinSize; + + padding: @circularPadding !important; + + line-height: 1em; + text-align: center; + border-radius: @circularRadius; +} +.ui.empty.circular.labels .label, +.ui.empty.circular.label { + min-width: 0em; + min-height: 0em; + overflow: hidden; + width: @emptyCircleSize; + height: @emptyCircleSize; + vertical-align: baseline; +} + +/*------------------- + Pointing +--------------------*/ + +.ui.pointing.label { + position: relative; +} + +.ui.attached.pointing.label { + position: absolute; +} + +.ui.pointing.label:before { + background-color: inherit; + background-image: inherit; + border-width: none; + border-style: solid; + border-color: @pointingBorderColor; +} +/* Arrow */ +.ui.pointing.label:before { + position: absolute; + content: ''; + transform: rotate(45deg); + background-image: none; + + z-index: @pointingTriangleZIndex; + width: @pointingTriangleSize; + height: @pointingTriangleSize; + transition: @pointingTriangleTransition; +} + +/*--- Above ---*/ +.ui.pointing.label, +.ui[class*="pointing above"].label { + margin-top: @pointingVerticalDistance; +} +.ui.pointing.label:before, +.ui[class*="pointing above"].label:before { + border-width: @borderWidth 0px 0px @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 0%; + left: 50%; +} +/*--- Below ---*/ +.ui[class*="bottom pointing"].label, +.ui[class*="pointing below"].label { + margin-top: 0em; + margin-bottom: @pointingVerticalDistance; +} +.ui[class*="bottom pointing"].label:before, +.ui[class*="pointing below"].label:before { + border-width: 0px @borderWidth @borderWidth 0px; + top: auto; + right: auto; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + top: 100%; + left: 50%; +} +/*--- Left ---*/ +.ui[class*="left pointing"].label { + margin-top: 0em; + margin-left: @pointingHorizontalDistance; +} +.ui[class*="left pointing"].label:before { + border-width: 0px 0px @borderWidth @borderWidth; + transform: translateX(-50%) translateY(-50%) rotate(45deg); + bottom: auto; + right: auto; + top: 50%; + left: 0em; +} +/*--- Right ---*/ +.ui[class*="right pointing"].label { + margin-top: 0em; + margin-right: @pointingHorizontalDistance; +} +.ui[class*="right pointing"].label:before { + border-width: @borderWidth @borderWidth 0px 0px; + transform: translateX(50%) translateY(-50%) rotate(45deg); + top: 50%; + right: 0%; + bottom: auto; + left: auto; +} + +/* Basic Pointing */ + +/*--- Above ---*/ +.ui.basic.pointing.label:before, +.ui.basic[class*="pointing above"].label:before { + margin-top: @basicPointingTriangleOffset; +} +/*--- Below ---*/ +.ui.basic[class*="bottom pointing"].label:before, +.ui.basic[class*="pointing below"].label:before { + bottom: auto; + top: 100%; + margin-top: -@basicPointingTriangleOffset; +} +/*--- Left ---*/ +.ui.basic[class*="left pointing"].label:before { + top: 50%; + left: @basicPointingTriangleOffset; +} +/*--- Right ---*/ +.ui.basic[class*="right pointing"].label:before { + top: 50%; + right: @basicPointingTriangleOffset; +} + + +/*------------------ + Floating Label +-------------------*/ + +.ui.floating.label { + position: absolute; + z-index: @floatingZIndex; + top: @floatingTopOffset; + left: 100%; + margin: 0em 0em 0em @floatingLeftOffset !important; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.labels .label, +.ui.mini.label { + font-size: @mini; +} +.ui.tiny.labels .label, +.ui.tiny.label { + font-size: @tiny; +} +.ui.small.labels .label, +.ui.small.label { + font-size: @small; +} +.ui.labels .label, +.ui.label { + font-size: @medium; +} +.ui.large.labels .label, +.ui.large.label { + font-size: @large; +} +.ui.big.labels .label, +.ui.big.label { + font-size: @big; +} +.ui.huge.labels .label, +.ui.huge.label { + font-size: @huge; +} +.ui.massive.labels .label, +.ui.massive.label { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/list.less b/static/semantic/src/definitions/elements/list.less new file mode 100755 index 0000000..eb747d3 --- /dev/null +++ b/static/semantic/src/definitions/elements/list.less @@ -0,0 +1,953 @@ +/*! + * # Semantic UI - List + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'list'; + +@import (multiple) '../../theme.config'; + +/******************************* + List +*******************************/ + +ul.ui.list, +ol.ui.list, +.ui.list { + list-style-type: @listStyleType; + margin: @margin; + padding: @verticalPadding @horizontalPadding; +} + +ul.ui.list:first-child, +ol.ui.list:first-child, +.ui.list:first-child { + margin-top: 0em; + padding-top: 0em; +} + +ul.ui.list:last-child, +ol.ui.list:last-child, +.ui.list:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + +/******************************* + Content +*******************************/ + +/* List Item */ +ul.ui.list li, +ol.ui.list li, +.ui.list > .item, +.ui.list .list > .item { + display: list-item; + table-layout: fixed; + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemPadding; + line-height: @itemLineHeight; +} + +ul.ui.list > li:first-child:after, +ol.ui.list > li:first-child:after, +.ui.list > .list > .item, +.ui.list > .item:after { + content: ''; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +ul.ui.list li:first-child, +ol.ui.list li:first-child, +.ui.list .list > .item:first-child, +.ui.list > .item:first-child { + padding-top: 0em; +} +ul.ui.list li:last-child, +ol.ui.list li:last-child, +.ui.list .list > .item:last-child, +.ui.list > .item:last-child { + padding-bottom: 0em; +} + +/* Child List */ +ul.ui.list ul, +ol.ui.list ol, +.ui.list .list { + clear: both; + margin: 0em; + padding: @childListPadding; +} + +/* Child Item */ +ul.ui.list ul li, +ol.ui.list ol li, +.ui.list .list > .item { + padding: @childItemPadding; + line-height: @childItemLineHeight; +} + + +/* Icon */ +.ui.list .list > .item > i.icon, +.ui.list > .item > i.icon { + display: table-cell; + margin: 0em; + padding-top: @iconOffset; + padding-right: @iconDistance; + vertical-align: @iconContentVerticalAlign; + transition: @iconTransition; +} +.ui.list .list > .item > i.icon:only-child, +.ui.list > .item > i.icon:only-child { + display: inline-block; + vertical-align: @iconVerticalAlign; +} + + +/* Image */ +.ui.list .list > .item > .image, +.ui.list > .item > .image { + display: table-cell; + background-color: transparent; + margin: 0em; + vertical-align: @imageAlign; +} +.ui.list .list > .item > .image:not(:only-child):not(img), +.ui.list > .item > .image:not(:only-child):not(img) { + padding-right: @imageDistance; +} +.ui.list .list > .item > .image img, +.ui.list > .item > .image img { + vertical-align: @imageAlign; +} + +.ui.list .list > .item > img.image, +.ui.list .list > .item > .image:only-child, +.ui.list > .item > img.image, +.ui.list > .item > .image:only-child { + display: inline-block; +} + +/* Content */ +.ui.list .list > .item > .content, +.ui.list > .item > .content { + line-height: @contentLineHeight; +} +.ui.list .list > .item > .image + .content, +.ui.list .list > .item > .icon + .content, +.ui.list > .item > .image + .content, +.ui.list > .item > .icon + .content { + display: table-cell; + width: 100%; + padding: 0em 0em 0em @contentDistance; + vertical-align: @contentVerticalAlign; +} +.ui.list .list > .item > img.image + .content, +.ui.list > .item > img.image + .content { + display: inline-block; + width: auto; +} +.ui.list .list > .item > .content > .list, +.ui.list > .item > .content > .list { + margin-left: 0em; + padding-left: 0em; +} + +/* Header */ +.ui.list .list > .item .header, +.ui.list > .item .header { + display: block; + margin: 0em; + font-family: @itemHeaderFontFamily; + font-weight: @itemHeaderFontWeight; + color: @itemHeaderColor; +} + +/* Description */ +.ui.list .list > .item .description, +.ui.list > .item .description { + display: block; + color: @itemDescriptionColor; +} + +/* Child Link */ +.ui.list > .item a, +.ui.list .list > .item a { + cursor: pointer; +} + +/* Linking Item */ +.ui.list .list > a.item, +.ui.list > a.item { + cursor: pointer; + color: @itemLinkColor; +} +.ui.list .list > a.item:hover, +.ui.list > a.item:hover { + color: @itemLinkHoverColor; +} + +/* Linked Item Icons */ +.ui.list .list > a.item i.icon, +.ui.list > a.item i.icon { + color: @itemLinkIconColor; +} + +/* Header Link */ +.ui.list .list > .item a.header, +.ui.list > .item a.header { + cursor: pointer; + color: @itemHeaderLinkColor !important; +} +.ui.list .list > .item a.header:hover, +.ui.list > .item a.header:hover { + color: @itemHeaderLinkHoverColor !important; +} + +/* Floated Content */ +.ui[class*="left floated"].list { + float: left; +} +.ui[class*="right floated"].list { + float: right; +} + +.ui.list .list > .item [class*="left floated"], +.ui.list > .item [class*="left floated"] { + float: left; + margin: @leftFloatMargin; +} +.ui.list .list > .item [class*="right floated"], +.ui.list > .item [class*="right floated"] { + float: right; + margin: @rightFloatMargin; +} + +/******************************* + Coupling +*******************************/ + +.ui.menu .ui.list > .item, +.ui.menu .ui.list .list > .item { + display: list-item; + table-layout: fixed; + background-color: transparent; + + list-style-type: @listStyleType; + list-style-position: @listStylePosition; + + padding: @itemVerticalPadding @itemHorizontalPadding; + line-height: @itemLineHeight; +} +.ui.menu .ui.list .list > .item:before, +.ui.menu .ui.list > .item:before { + border: none; + background: none; +} +.ui.menu .ui.list .list > .item:first-child, +.ui.menu .ui.list > .item:first-child { + padding-top: 0em; +} +.ui.menu .ui.list .list > .item:last-child, +.ui.menu .ui.list > .item:last-child { + padding-bottom: 0em; +} + + +/******************************* + Types +*******************************/ + +/*------------------- + Horizontal +--------------------*/ + +.ui.horizontal.list { + display: inline-block; + font-size: 0em; +} +.ui.horizontal.list > .item { + display: inline-block; + margin-left: @horizontalSpacing; + font-size: 1rem; +} +.ui.horizontal.list:not(.celled) > .item:first-child { + margin-left: 0em !important; + padding-left: 0em !important; +} +.ui.horizontal.list .list { + padding-left: 0em; + padding-bottom: 0em; +} + +.ui.horizontal.list > .item > .image, +.ui.horizontal.list .list > .item > .image, +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list .list > .item > .icon, +.ui.horizontal.list > .item > .content, +.ui.horizontal.list .list > .item > .content { + vertical-align: @horizontalVerticalAlign; +} + +/* Padding on all elements */ +.ui.horizontal.list > .item:first-child, +.ui.horizontal.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Horizontal List */ +.ui.horizontal.list > .item > i.icon { + margin: 0em; + padding: 0em @horizontalIconDistance 0em 0em; +} +.ui.horizontal.list > .item > .icon, +.ui.horizontal.list > .item > .icon + .content { + float: none; + display: inline-block; +} + + +/******************************* + States +*******************************/ + +/*------------------- + Disabled +--------------------*/ + +.ui.list .list > .disabled.item, +.ui.list > .disabled.item { + pointer-events: none; + color: @disabledColor !important; +} +.ui.inverted.list .list > .disabled.item, +.ui.inverted.list > .disabled.item { + color: @invertedDisabledColor !important; +} + +/*------------------- + Hover +--------------------*/ + +.ui.list .list > a.item:hover .icon, +.ui.list > a.item:hover .icon { + color: @itemLinkIconHoverColor; +} + + +/******************************* + Variations +*******************************/ + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.list .list > a.item > .icon, +.ui.inverted.list > a.item > .icon { + color: @invertedIconLinkColor; +} +.ui.inverted.list .list > .item .header, +.ui.inverted.list > .item .header { + color: @invertedHeaderColor; +} +.ui.inverted.list .list > .item .description, +.ui.inverted.list > .item .description { + color: @invertedDescriptionColor; +} + +/* Item Link */ +.ui.inverted.list .list > a.item, +.ui.inverted.list > a.item { + cursor: pointer; + color: @invertedItemLinkColor; +} +.ui.inverted.list .list > a.item:hover, +.ui.inverted.list > a.item:hover { + color: @invertedItemLinkHoverColor; +} + + +/* Linking Content */ +.ui.inverted.list .item a:not(.ui) { + color: @invertedItemLinkColor !important; +} +.ui.inverted.list .item a:not(.ui):hover { + color: @invertedItemLinkHoverColor !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui.list[class*="top aligned"] .image, +.ui.list[class*="top aligned"] .content, +.ui.list [class*="top aligned"] { + vertical-align: top !important; +} +.ui.list[class*="middle aligned"] .image, +.ui.list[class*="middle aligned"] .content, +.ui.list [class*="middle aligned"] { + vertical-align: middle !important; +} +.ui.list[class*="bottom aligned"] .image, +.ui.list[class*="bottom aligned"] .content, +.ui.list [class*="bottom aligned"] { + vertical-align: bottom !important; +} + +/*------------------- + Link +--------------------*/ + +.ui.link.list .item, +.ui.link.list a.item, +.ui.link.list .item a:not(.ui) { + color: @linkListItemColor; + transition: @linkListTransition; +} +.ui.link.list.list a.item:hover, +.ui.link.list.list .item a:not(.ui):hover { + color: @linkListItemHoverColor; +} +.ui.link.list.list a.item:active, +.ui.link.list.list .item a:not(.ui):active { + color: @linkListItemDownColor; +} +.ui.link.list.list .active.item, +.ui.link.list.list .active.item a:not(.ui) { + color: @linkListItemActiveColor; +} + +/* Inverted */ +.ui.inverted.link.list .item, +.ui.inverted.link.list a.item, +.ui.inverted.link.list .item a:not(.ui) { + color: @invertedLinkListItemColor; +} +.ui.inverted.link.list.list a.item:hover, +.ui.inverted.link.list.list .item a:not(.ui):hover { + color: @invertedLinkListItemHoverColor; +} +.ui.inverted.link.list.list a.item:active, +.ui.inverted.link.list.list .item a:not(.ui):active { + color: @invertedLinkListItemDownColor; +} +.ui.inverted.link.list.list a.active.item, +.ui.inverted.link.list.list .active.item a:not(.ui) { + color: @invertedLinkListItemActiveColor; +} + +/*------------------- + Selection +--------------------*/ + +.ui.selection.list .list > .item, +.ui.selection.list > .item { + cursor: pointer; + background: @selectionListBackground; + padding: @selectionListItemVerticalPadding @selectionListItemHorizontalPadding; + margin: @selectionListItemMargin; + color: @selectionListColor; + border-radius: @selectionListItemBorderRadius; + transition: @selectionListTransition; +} +.ui.selection.list .list > .item:last-child, +.ui.selection.list > .item:last-child { + margin-bottom: 0em; +} +.ui.selection.list.list > .item:hover, +.ui.selection.list > .item:hover { + background: @selectionListHoverBackground; + color: @selectionListHoverColor; +} +.ui.selection.list .list > .item:active, +.ui.selection.list > .item:active { + background: @selectionListDownBackground; + color: @selectionListDownColor; +} +.ui.selection.list .list > .item.active, +.ui.selection.list > .item.active { + background: @selectionListActiveBackground; + color: @selectionListActiveColor; +} + +/* Inverted */ +.ui.inverted.selection.list > .item, +.ui.inverted.selection.list > .item { + background: @invertedSelectionListBackground; + color: @invertedSelectionListColor; +} +.ui.inverted.selection.list > .item:hover, +.ui.inverted.selection.list > .item:hover { + background: @invertedSelectionListHoverBackground; + color: @invertedSelectionListHoverColor; +} +.ui.inverted.selection.list > .item:active, +.ui.inverted.selection.list > .item:active { + background: @invertedSelectionListDownBackground; + color: @invertedSelectionListDownColor; +} +.ui.inverted.selection.list > .item.active, +.ui.inverted.selection.list > .item.active { + background: @invertedSelectionListActiveBackground; + color: @invertedSelectionListActiveColor; +} + +/* Celled / Divided Selection List */ +.ui.celled.selection.list .list > .item, +.ui.divided.selection.list .list > .item, +.ui.celled.selection.list > .item, +.ui.divided.selection.list > .item { + border-radius: 0em; +} + +/*------------------- + Animated +--------------------*/ + +.ui.animated.list > .item { + transition: @animatedListTransition; +} +.ui.animated.list:not(.horizontal) > .item:hover { + padding-left: @animatedListIndent; +} + +/*------------------- + Fitted +--------------------*/ +.ui.fitted.list:not(.selection) .list > .item, +.ui.fitted.list:not(.selection) > .item { + padding-left: 0em; + padding-right: 0em; +} +.ui.fitted.selection.list .list > .item, +.ui.fitted.selection.list > .item { + margin-left: -@selectionListItemHorizontalPadding; + margin-right: -@selectionListItemHorizontalPadding; +} + +/*------------------- + Bulleted +--------------------*/ + +ul.ui.list, +.ui.bulleted.list { + margin-left: @bulletDistance; +} +ul.ui.list li, +.ui.bulleted.list .list > .item, +.ui.bulleted.list > .item { + position: relative; +} +ul.ui.list li:before, +.ui.bulleted.list .list > .item:before, +.ui.bulleted.list > .item:before { + user-select: none; + pointer-events: none; + position: absolute; + top: auto; + left: auto; + font-weight: @normal; + margin-left: @bulletOffset; + content: @bulletCharacter; + opacity: @bulletOpacity; + color: @bulletColor; + vertical-align: @bulletVerticalAlign; +} + +ul.ui.list li:before, +.ui.bulleted.list .list > a.item:before, +.ui.bulleted.list > a.item:before { + color: @bulletLinkColor; +} + +ul.ui.list ul, +.ui.bulleted.list .list { + padding-left: @bulletChildDistance; +} + +/* Horizontal Bulleted */ +ul.ui.horizontal.bulleted.list, +.ui.horizontal.bulleted.list { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li, +.ui.horizontal.bulleted.list > .item { + margin-left: @horizontalBulletSpacing; +} +ul.ui.horizontal.bulleted.list li:first-child, +.ui.horizontal.bulleted.list > .item:first-child { + margin-left: 0em; +} +ul.ui.horizontal.bulleted.list li::before, +.ui.horizontal.bulleted.list > .item::before { + color: @horizontalBulletColor; +} +ul.ui.horizontal.bulleted.list li:first-child::before, +.ui.horizontal.bulleted.list > .item:first-child::before { + display: none; +} + +/*------------------- + Ordered +--------------------*/ + +ol.ui.list, +.ui.ordered.list, +.ui.ordered.list .list, +ol.ui.list ol { + counter-reset: ordered; + margin-left: @orderedCountDistance; + list-style-type: none; +} +ol.ui.list li, +.ui.ordered.list .list > .item, +.ui.ordered.list > .item { + list-style-type: none; + position: relative; +} +ol.ui.list li:before, +.ui.ordered.list .list > .item:before, +.ui.ordered.list > .item:before { + position: absolute; + top: auto; + left: auto; + user-select: none; + pointer-events: none; + margin-left: -(@orderedCountDistance); + counter-increment: @orderedCountName; + content: @orderedCountContent; + text-align: @orderedCountTextAlign; + color: @orderedCountColor; + vertical-align: @orderedCountVerticalAlign; + opacity: @orderedCountOpacity; +} + +ol.ui.inverted.list li:before, +.ui.ordered.inverted.list .list > .item:before, +.ui.ordered.inverted.list > .item:before { + color: @orderedInvertedCountColor; +} + +/* Value */ +.ui.ordered.list > .list > .item[data-value], +.ui.ordered.list > .item[data-value] { + content: attr(data-value); +} +ol.ui.list li[value]:before { + content: attr(value); +} + +/* Child Lists */ +ol.ui.list ol, +.ui.ordered.list .list { + margin-left: @orderedChildCountDistance; +} +ol.ui.list ol li:before, +.ui.ordered.list .list > .item:before { + margin-left: @orderedChildCountOffset; +} + +/* Horizontal Ordered */ +ol.ui.horizontal.list, +.ui.ordered.horizontal.list { + margin-left: 0em; +} +ol.ui.horizontal.list li:before, +.ui.ordered.horizontal.list .list > .item:before, +.ui.ordered.horizontal.list > .item:before { + position: static; + margin: 0em @horizontalOrderedCountDistance 0em 0em; +} + +/*------------------- + Divided +--------------------*/ + +.ui.divided.list > .item { + border-top: @dividedBorder; +} +.ui.divided.list .list > .item { + border-top: @dividedChildListBorder; +} +.ui.divided.list .item .list > .item { + border-top: @dividedChildItemBorder; +} +.ui.divided.list .list > .item:first-child, +.ui.divided.list > .item:first-child { + border-top: none; +} + +/* Sub Menu */ +.ui.divided.list:not(.horizontal) .list > .item:first-child { + border-top-width: @dividedBorderWidth; +} + +/* Divided bulleted */ +.ui.divided.bulleted.list:not(.horizontal), +.ui.divided.bulleted.list .list { + margin-left: 0em; + padding-left: 0em; +} +.ui.divided.bulleted.list > .item:not(.horizontal) { + padding-left: @bulletDistance; +} + +/* Divided Ordered */ +.ui.divided.ordered.list { + margin-left: 0em; +} +.ui.divided.ordered.list .list > .item, +.ui.divided.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.divided.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.divided.ordered.list .item .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Divided Selection */ +.ui.divided.selection.list .list > .item, +.ui.divided.selection.list > .item { + margin: 0em; + border-radius: 0em; +} + +/* Divided horizontal */ +.ui.divided.horizontal.list { + margin-left: 0em; +} +.ui.divided.horizontal.list > .item:not(:first-child) { + padding-left: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item:not(:last-child) { + padding-right: @horizontalDividedSpacing; +} +.ui.divided.horizontal.list > .item { + border-top: none; + border-left: @dividedBorder; + margin: 0em; + line-height: @horizontalDividedLineHeight; +} +.ui.horizontal.divided.list > .item:first-child { + border-left: none; +} +/* Inverted */ +.ui.divided.inverted.list > .item, +.ui.divided.inverted.list > .list, +.ui.divided.inverted.horizontal.list > .item { + border-color: @dividedInvertedBorderColor; +} + + +/*------------------- + Celled +--------------------*/ + +.ui.celled.list > .item, +.ui.celled.list > .list { + border-top: @celledBorder; + padding-left: @celledHorizontalPadding; + padding-right: @celledHorizontalPadding; +} +.ui.celled.list > .item:last-child { + border-bottom: @celledBorder; +} + +/* Padding on all elements */ +.ui.celled.list > .item:first-child, +.ui.celled.list > .item:last-child { + padding-top: @itemVerticalPadding; + padding-bottom: @itemVerticalPadding; +} + +/* Sub Menu */ +.ui.celled.list .item .list > .item { + border-width: 0px; +} +.ui.celled.list .list > .item:first-child { + border-top-width: 0px; +} + +/* Celled Bulleted */ +.ui.celled.bulleted.list { + margin-left: 0em; +} +.ui.celled.bulleted.list .list > .item, +.ui.celled.bulleted.list > .item { + padding-left: (@bulletDistance); +} +.ui.celled.bulleted.list .item .list { + margin-left: -(@bulletDistance); + margin-right: -(@bulletDistance); + padding-bottom: @itemVerticalPadding; +} + +/* Celled Ordered */ +.ui.celled.ordered.list { + margin-left: 0em; +} +.ui.celled.ordered.list .list > .item, +.ui.celled.ordered.list > .item { + padding-left: @orderedCountDistance; +} +.ui.celled.ordered.list .item .list { + margin-left: 0em; + margin-right: 0em; + padding-bottom: @itemVerticalPadding; +} +.ui.celled.ordered.list .list > .item { + padding-left: @orderedChildCountDistance; +} + +/* Celled Horizontal */ +.ui.horizontal.celled.list { + margin-left: 0em; +} +.ui.horizontal.celled.list .list > .item, +.ui.horizontal.celled.list > .item { + border-top: none; + border-left: @celledBorder; + margin: 0em; + padding-left: @horizontalCelledSpacing; + padding-right: @horizontalCelledSpacing; + + line-height: @horizontalCelledLineHeight; +} +.ui.horizontal.celled.list .list > .item:last-child, +.ui.horizontal.celled.list > .item:last-child { + border-bottom: none; + border-right: @celledBorder; +} + +/* Inverted */ +.ui.celled.inverted.list > .item, +.ui.celled.inverted.list > .list { + border-color: @celledInvertedBorder; +} +.ui.celled.inverted.horizontal.list .list > .item, +.ui.celled.inverted.horizontal.list > .item { + border-color: @celledInvertedBorder; +} + +/*------------------- + Relaxed +--------------------*/ + +.ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { + padding-top: @relaxedItemVerticalPadding; +} +.ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @relaxedItemVerticalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:first-child), +.ui.horizontal.relaxed.list > .item:not(:first-child) { + padding-left: @relaxedHorizontalPadding; +} +.ui.horizontal.relaxed.list .list > .item:not(:last-child), +.ui.horizontal.relaxed.list > .item:not(:last-child) { + padding-right: @relaxedHorizontalPadding; +} + +/* Very Relaxed */ +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { + padding-top: @veryRelaxedItemVerticalPadding; +} +.ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { + padding-bottom: @veryRelaxedItemVerticalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { + padding-left: @veryRelaxedHorizontalPadding; +} +.ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), +.ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { + padding-right: @veryRelaxedHorizontalPadding; +} + +/*------------------- + Sizes +--------------------*/ + +.ui.mini.list { + font-size: @relativeMini; +} +.ui.tiny.list { + font-size: @relativeTiny; +} +.ui.small.list { + font-size: @relativeSmall; +} +.ui.list { + font-size: @relativeMedium; +} +.ui.large.list { + font-size: @relativeLarge; +} +.ui.big.list { + font-size: @relativeBig; +} +.ui.huge.list { + font-size: @relativeHuge; +} +.ui.massive.list { + font-size: @relativeMassive; +} + +.ui.mini.horizontal.list .list > .item, +.ui.mini.horizontal.list > .item { + font-size: @mini; +} +.ui.tiny.horizontal.list .list > .item, +.ui.tiny.horizontal.list > .item { + font-size: @tiny; +} +.ui.small.horizontal.list .list > .item, +.ui.small.horizontal.list > .item { + font-size: @small; +} +.ui.horizontal.list .list > .item, +.ui.horizontal.list > .item { + font-size: @medium; +} +.ui.large.horizontal.list .list > .item, +.ui.large.horizontal.list > .item { + font-size: @large; +} +.ui.big.horizontal.list .list > .item, +.ui.big.horizontal.list > .item { + font-size: @big; +} +.ui.huge.horizontal.list .list > .item, +.ui.huge.horizontal.list > .item { + font-size: @huge; +} +.ui.massive.horizontal.list .list > .item, +.ui.massive.horizontal.list > .item { + font-size: @massive; +} + +.loadUIOverrides(); + diff --git a/static/semantic/src/definitions/elements/loader.less b/static/semantic/src/definitions/elements/loader.less new file mode 100755 index 0000000..9bf271d --- /dev/null +++ b/static/semantic/src/definitions/elements/loader.less @@ -0,0 +1,331 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'loader'; + +@import (multiple) '../../theme.config'; + +/******************************* + Loader +*******************************/ + + +/* Standard Size */ +.ui.loader { + display: none; + position: absolute; + top: @loaderTopOffset; + left: @loaderLeftOffset; + margin: 0px; + text-align: center; + z-index: 1000; + transform: translateX(-50%) translateY(-50%); +} + +/* Static Shape */ +.ui.loader:before { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + border-radius: @circularRadius; + border: @loaderLineWidth solid @loaderFillColor; +} + +/* Active Shape */ +.ui.loader:after { + position: absolute; + content: ''; + top: 0%; + left: 50%; + width: 100%; + height: 100%; + + animation: loader @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @shapeBorderColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; +} + +/* Active Animation */ +@keyframes loader { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +/* Sizes */ +.ui.mini.loader:before, +.ui.mini.loader:after { + width: @mini; + height: @mini; + margin: @miniOffset; +} +.ui.tiny.loader:before, +.ui.tiny.loader:after { + width: @tiny; + height: @tiny; + margin: @tinyOffset; +} +.ui.small.loader:before, +.ui.small.loader:after { + width: @small; + height: @small; + margin: @smallOffset; +} +.ui.loader:before, +.ui.loader:after { + width: @medium; + height: @medium; + margin: @mediumOffset; +} +.ui.large.loader:before, +.ui.large.loader:after { + width: @large; + height: @large; + margin: @largeOffset; +} +.ui.big.loader:before, +.ui.big.loader:after { + width: @big; + height: @big; + margin: @bigOffset; +} +.ui.huge.loader:before, +.ui.huge.loader:after { + width: @huge; + height: @huge; + margin: @hugeOffset; +} +.ui.massive.loader:before, +.ui.massive.loader:after { + width: @massive; + height: @massive; + margin: @massiveOffset; +} + +/*------------------- + Coupling +--------------------*/ + +/* Show inside active dimmer */ +.ui.dimmer .loader { + display: block; +} + +/* Black Dimmer */ +.ui.dimmer .ui.loader { + color: @invertedLoaderTextColor; +} +.ui.dimmer .ui.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.dimmer .ui.loader:after { + border-color: @invertedShapeBorderColor; +} + +/* White Dimmer (Inverted) */ +.ui.inverted.dimmer .ui.loader { + color: @loaderTextColor; +} +.ui.inverted.dimmer .ui.loader:before { + border-color: @loaderFillColor; +} +.ui.inverted.dimmer .ui.loader:after { + border-color: @shapeBorderColor; +} + +/******************************* + Types +*******************************/ + +/*------------------- + Text +--------------------*/ + +.ui.text.loader { + width: auto !important; + height: auto !important; + text-align: center; + font-style: normal; +} + + +/******************************* + States +*******************************/ + +.ui.indeterminate.loader:after { + animation-direction: @indeterminateDirection; + animation-duration: @indeterminateSpeed; +} + +.ui.loader.active, +.ui.loader.visible { + display: block; +} +.ui.loader.disabled, +.ui.loader.hidden { + display: none; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + + +/* Loader */ +.ui.inverted.dimmer .ui.mini.loader, +.ui.mini.loader { + width: @mini; + height: @mini; + font-size: @miniFontSize; +} +.ui.inverted.dimmer .ui.tiny.loader, +.ui.tiny.loader { + width: @tiny; + height: @tiny; + font-size: @tinyFontSize; +} +.ui.inverted.dimmer .ui.small.loader, +.ui.small.loader { + width: @small; + height: @small; + font-size: @smallFontSize; +} +.ui.inverted.dimmer .ui.loader, +.ui.loader { + width: @medium; + height: @medium; + font-size: @mediumFontSize; +} +.ui.inverted.dimmer .ui.large.loader, +.ui.large.loader { + width: @large; + height: @large; + font-size: @largeFontSize; +} +.ui.inverted.dimmer .ui.big.loader, +.ui.big.loader { + width: @big; + height: @big; + font-size: @bigFontSize; +} +.ui.inverted.dimmer .ui.huge.loader, +.ui.huge.loader { + width: @huge; + height: @huge; + font-size: @hugeFontSize; +} +.ui.inverted.dimmer .ui.massive.loader, +.ui.massive.loader { + width: @massive; + height: @massive; + font-size: @massiveFontSize; +} + +/* Text Loader */ +.ui.mini.text.loader { + min-width: @mini; + padding-top: (@mini + @textDistance); +} +.ui.tiny.text.loader { + min-width: @tiny; + padding-top: (@tiny + @textDistance); +} +.ui.small.text.loader { + min-width: @small; + padding-top: (@small + @textDistance); +} +.ui.text.loader { + min-width: @medium; + padding-top: (@medium + @textDistance); +} +.ui.large.text.loader { + min-width: @large; + padding-top: (@large + @textDistance); +} +.ui.big.text.loader { + min-width: @big; + padding-top: (@big + @textDistance); +} +.ui.huge.text.loader { + min-width: @huge; + padding-top: (@huge + @textDistance); +} +.ui.massive.text.loader { + min-width: @massive; + padding-top: (@massive + @textDistance); +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.loader { + color: @invertedLoaderTextColor +} +.ui.inverted.loader:before { + border-color: @invertedLoaderFillColor; +} +.ui.inverted.loader:after { + border-top-color: @invertedLoaderLineColor; +} + +/*------------------- + Inline +--------------------*/ + +.ui.inline.loader { + position: relative; + vertical-align: @inlineVerticalAlign; + margin: @inlineMargin; + left: 0em; + top: 0em; + transform: none; +} + +.ui.inline.loader.active, +.ui.inline.loader.visible { + display: inline-block; +} + +/* Centered Inline */ +.ui.centered.inline.loader.active, +.ui.centered.inline.loader.visible { + display: block; + margin-left: auto; + margin-right: auto; +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/placeholder.less b/static/semantic/src/definitions/elements/placeholder.less new file mode 100755 index 0000000..e18c4ab --- /dev/null +++ b/static/semantic/src/definitions/elements/placeholder.less @@ -0,0 +1,232 @@ +/*! + * # Semantic UI - Loader + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'placeholder'; + +@import (multiple) '../../theme.config'; + +/*------------------- + Content +--------------------*/ + +.ui.placeholder { + position: static; + overflow: hidden; + animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; + animation-iteration-count: infinite; + background-color: @white; + background-image: @placeholderLoadingGradient; + background-size: @placeholderLoadingGradientWidth 100%; + max-width: @placeholderMaxWidth; +} + +@keyframes placeholderShimmer{ + 0% { + background-position: -@placeholderLoadingGradientWidth 0 + } + 100% { + background-position: @placeholderLoadingGradientWidth 0 + } +} + +.ui.placeholder + .ui.placeholder { + margin-top: @consecutivePlaceholderSpacing; +} +.ui.placeholder + .ui.placeholder { + animation-delay: @placeholderAnimationInterval; +} +.ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 2); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 3); +} +.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder { + animation-delay: (@placeholderAnimationInterval * 4); +} + +.ui.placeholder, +.ui.placeholder > :before, +.ui.placeholder .image.header:after, +.ui.placeholder .line, +.ui.placeholder .line:after { + background-color: @white; +} + +/* Image */ +.ui.placeholder .image:not(.header):not(.ui) { + height: @placeholderImageHeight; +} +.ui.placeholder .square.image:not(.header) { + height: 0px; + overflow: hidden; + /* 1/1 aspect ratio */ + padding-top: 100%; +} +.ui.placeholder .rectangular.image:not(.header) { + height: 0px; + overflow: hidden; + /* 4/3 aspect ratio */ + padding-top: 75%; +} + + +/* Lines */ +.ui.placeholder .line { + position: relative; + height: @placeholderLineMargin; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + top: 100%; + position: absolute; + content: ''; + background-color: inherit; +} +.ui.placeholder .line:before { + left: 0px; +} +.ui.placeholder .line:after { + right: 0px; +} + +/* Any Lines */ +.ui.placeholder .line { + margin-bottom: @placeholderLineHeight; +} +.ui.placeholder .line:before, +.ui.placeholder .line:after { + height: @placeholderLineHeight; +} +.ui.placeholder .line:not(:first-child) { + margin-top: @placeholderLineHeight; +} + +/* Header Image + 2 Lines */ +.ui.placeholder .header { + position: relative; + overflow: hidden; +} + +/* Line Outdent */ +.ui.placeholder .line:nth-child(1):after { + width: @placeholderLineOneOutdent; +} +.ui.placeholder .line:nth-child(2):after { + width: @placeholderLineTwoOutdent; +} +.ui.placeholder .line:nth-child(3):after { + width: @placeholderLineThreeOutdent; +} +.ui.placeholder .line:nth-child(4):after { + width: @placeholderLineFourOutdent; +} +.ui.placeholder .line:nth-child(5):after { + width: @placeholderLineFiveOutdent; +} + +/* Header Line 1 & 2*/ +.ui.placeholder .header .line { + margin-bottom: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:before, +.ui.placeholder .header .line:after { + height: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:not(:first-child) { + margin-top: @placeholderHeaderLineHeight; +} +.ui.placeholder .header .line:after { + width: @placeholderHeaderLineOneOutdent; +} +.ui.placeholder .header .line:nth-child(2):after { + width: @placeholderHeaderLineTwoOutdent; +} + +/* Image Header */ +.ui.placeholder .image.header .line { + margin-left: @placeholderImageWidth; +} +.ui.placeholder .image.header .line:before { + width: @placeholderImageTextIndent; +} +.ui.placeholder .image.header:after { + display: block; + height: @placeholderLineMargin; + content: ''; + margin-left: @placeholderImageWidth; +} + +/* Spacing */ +.ui.placeholder .image .line:first-child, +.ui.placeholder .paragraph .line:first-child, +.ui.placeholder .header .line:first-child { + height: 0.01px; +} +.ui.placeholder .image:not(:first-child):before, +.ui.placeholder .paragraph:not(:first-child):before, +.ui.placeholder .header:not(:first-child):before { + height: @placeholderSpacing; + content: ''; + display: block; +} + +/* Inverted Content Loader */ +.ui.inverted.placeholder { + background-image: @placeholderInvertedLoadingGradient; +} +.ui.inverted.placeholder, +.ui.inverted.placeholder > :before, +.ui.inverted.placeholder .image.header:after, +.ui.inverted.placeholder .line, +.ui.inverted.placeholder .line:after { + background-color: @black; +} + +/******************************* + Variations +*******************************/ + + +/*------------------- + Sizes +--------------------*/ + +.ui.placeholder .full.line.line.line:after { + width: @placeholderFullLineOutdent; +} +.ui.placeholder .very.long.line.line.line:after { + width: @placeholderVeryLongLineOutdent; +} +.ui.placeholder .long.line.line.line:after { + width: @placeholderLongLineOutdent; +} +.ui.placeholder .medium.line.line.line:after { + width: @placeholderMediumLineOutdent; +} +.ui.placeholder .short.line.line.line:after { + width: @placeholderShortLineOutdent; +} +.ui.placeholder .very.short.line.line.line:after { + width: @placeholderVeryShortLineOutdent; +} + + +/*------------------- + Fluid +--------------------*/ + +.ui.fluid.placeholder { + max-width: none; +} diff --git a/static/semantic/src/definitions/elements/rail.less b/static/semantic/src/definitions/elements/rail.less new file mode 100755 index 0000000..7eacee7 --- /dev/null +++ b/static/semantic/src/definitions/elements/rail.less @@ -0,0 +1,154 @@ +/*! + * # Semantic UI - Rail + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'rail'; + +@import (multiple) '../../theme.config'; + +/******************************* + Rails +*******************************/ + +.ui.rail { + position: absolute; + top: 0%; + width: @width; + height: @height; +} + +.ui.left.rail { + left: auto; + right: 100%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + +.ui.right.rail { + left: 100%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Internal +---------------*/ + +.ui.left.internal.rail { + left: 0%; + right: auto; + padding: 0em 0em 0em @splitDistance; + margin: 0em 0em 0em @splitDistance; +} + +.ui.right.internal.rail { + left: auto; + right: 0%; + padding: 0em @splitDistance 0em 0em; + margin: 0em @splitDistance 0em 0em; +} + + +/*-------------- + Dividing +---------------*/ + +.ui.dividing.rail { + width: @dividingWidth; +} +.ui.left.dividing.rail { + padding: 0em @splitDividingDistance 0em 0em; + margin: 0em @splitDividingDistance 0em 0em; + border-right: @dividingBorder; +} +.ui.right.dividing.rail { + border-left: @dividingBorder; + padding: 0em 0em 0em @splitDividingDistance; + margin: 0em 0em 0em @splitDividingDistance; +} + +/*-------------- + Distance +---------------*/ + +.ui.close.rail { + width: @closeWidth; +} +.ui.close.left.rail { + padding: 0em @splitCloseDistance 0em 0em; + margin: 0em @splitCloseDistance 0em 0em; +} +.ui.close.right.rail { + padding: 0em 0em 0em @splitCloseDistance; + margin: 0em 0em 0em @splitCloseDistance; +} + +.ui.very.close.rail { + width: @veryCloseWidth; +} +.ui.very.close.left.rail { + padding: 0em @splitVeryCloseDistance 0em 0em; + margin: 0em @splitVeryCloseDistance 0em 0em; +} +.ui.very.close.right.rail { + padding: 0em 0em 0em @splitVeryCloseDistance; + margin: 0em 0em 0em @splitVeryCloseDistance; +} + +/*-------------- + Attached +---------------*/ + +.ui.attached.left.rail, +.ui.attached.right.rail { + padding: 0em; + margin: 0em; +} + +/*-------------- + Sizing +---------------*/ + +.ui.mini.rail { + font-size: @mini; +} +.ui.tiny.rail { + font-size: @tiny; +} +.ui.small.rail { + font-size: @small; +} +.ui.rail { + font-size: @medium; +} +.ui.large.rail { + font-size: @large; +} +.ui.big.rail { + font-size: @big; +} +.ui.huge.rail { + font-size: @huge; +} +.ui.massive.rail { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/reveal.less b/static/semantic/src/definitions/elements/reveal.less new file mode 100755 index 0000000..41b3764 --- /dev/null +++ b/static/semantic/src/definitions/elements/reveal.less @@ -0,0 +1,275 @@ +/*! + * # Semantic UI - Reveal + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'reveal'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reveal +*******************************/ + +.ui.reveal { + display: inherit; + position: relative !important; + font-size: 0em !important; +} + +.ui.reveal > .visible.content { + position: absolute !important; + top: 0em !important; + left: 0em !important; + z-index: @topZIndex !important; + transition: @transition; +} +.ui.reveal > .hidden.content { + position: relative !important; + z-index: @bottomZIndex !important; +} + +/* Make sure hovered element is on top of other reveal */ +.ui.active.reveal .visible.content, +.ui.reveal:hover .visible.content { + z-index: @activeZIndex !important; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Slide +---------------*/ + +.ui.slide.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.slide.reveal > .content { + display: block; + width: 100%; + white-space: normal; + float: left; + + margin: 0em; + transition: @slideTransition; +} + +.ui.slide.reveal > .visible.content { + position: relative !important; +} +.ui.slide.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; + transform: translateX(100%) !important; +} +.ui.slide.active.reveal > .visible.content, +.ui.slide.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.slide.active.reveal > .hidden.content, +.ui.slide.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.right.reveal > .visible.content { + transform: translateX(0%) !important; +} +.ui.slide.right.reveal > .hidden.content { + transform: translateX(-100%) !important; +} +.ui.slide.right.active.reveal > .visible.content, +.ui.slide.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.slide.right.active.reveal > .hidden.content, +.ui.slide.right.reveal:hover > .hidden.content { + transform: translateX(0%) !important; +} + +.ui.slide.up.reveal > .hidden.content { + transform: translateY(100%) !important; +} +.ui.slide.up.active.reveal > .visible.content, +.ui.slide.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.slide.up.active.reveal > .hidden.content, +.ui.slide.up.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + +.ui.slide.down.reveal > .hidden.content { + transform: translateY(-100%) !important; +} +.ui.slide.down.active.reveal > .visible.content, +.ui.slide.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} +.ui.slide.down.active.reveal > .hidden.content, +.ui.slide.down.reveal:hover > .hidden.content { + transform: translateY(0%) !important; +} + + +/*-------------- + Fade +---------------*/ + +.ui.fade.reveal > .visible.content { + opacity: 1; +} +.ui.fade.active.reveal > .visible.content, +.ui.fade.reveal:hover > .visible.content { + opacity: 0; +} + + +/*-------------- + Move +---------------*/ + +.ui.move.reveal { + position: relative !important; + overflow: hidden !important; + white-space: nowrap; +} + +.ui.move.reveal > .content { + display: block; + float: left; + white-space: normal; + + margin: 0em; + transition: @moveTransition; +} + +.ui.move.reveal > .visible.content { + position: relative !important; +} +.ui.move.reveal > .hidden.content { + position: absolute !important; + left: 0% !important; + width: 100% !important; +} +.ui.move.active.reveal > .visible.content, +.ui.move.reveal:hover > .visible.content { + transform: translateX(-100%) !important; +} +.ui.move.right.active.reveal > .visible.content, +.ui.move.right.reveal:hover > .visible.content { + transform: translateX(100%) !important; +} +.ui.move.up.active.reveal > .visible.content, +.ui.move.up.reveal:hover > .visible.content { + transform: translateY(-100%) !important; +} +.ui.move.down.active.reveal > .visible.content, +.ui.move.down.reveal:hover > .visible.content { + transform: translateY(100%) !important; +} + + + +/*-------------- + Rotate +---------------*/ + +.ui.rotate.reveal > .visible.content { + transition-duration: @transitionDuration; + transform: rotate(0deg); +} + +.ui.rotate.reveal > .visible.content, +.ui.rotate.right.reveal > .visible.content { + transform-origin: bottom right; +} +.ui.rotate.active.reveal > .visible.content, +.ui.rotate.reveal:hover > .visible.content, +.ui.rotate.right.active.reveal > .visible.content, +.ui.rotate.right.reveal:hover > .visible.content { + transform: rotate(@rotateDegrees); +} + +.ui.rotate.left.reveal > .visible.content { + transform-origin: bottom left; +} +.ui.rotate.left.active.reveal > .visible.content, +.ui.rotate.left.reveal:hover > .visible.content { + transform: rotate(-@rotateDegrees); +} + +/******************************* + States +*******************************/ + +.ui.disabled.reveal:hover > .visible.visible.content { + position: static !important; + display: block !important; + opacity: 1 !important; + top: 0 !important; + left: 0 !important; + right: auto !important; + bottom: auto !important; + transform: none !important; +} +.ui.disabled.reveal:hover > .hidden.hidden.content { + display: none !important; +} + + +/******************************* + Coupling +*******************************/ + +.ui.reveal > .ui.ribbon.label { + z-index: @overlayZIndex; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Visible +---------------*/ + +.ui.visible.reveal { + overflow: visible; +} + +/*-------------- + Instant +---------------*/ + +.ui.instant.reveal > .content { + transition-delay: 0s !important; +} + + +/*-------------- + Sizing +---------------*/ + +.ui.reveal > .content { + font-size: @medium !important; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/segment.less b/static/semantic/src/definitions/elements/segment.less new file mode 100755 index 0000000..34d5a42 --- /dev/null +++ b/static/semantic/src/definitions/elements/segment.less @@ -0,0 +1,829 @@ +/*! + * # Semantic UI - Segment + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'element'; +@element : 'segment'; + +@import (multiple) '../../theme.config'; + +/******************************* + Segment +*******************************/ + +.ui.segment { + position: relative; + background: @background; + box-shadow: @boxShadow; + margin: @margin; + padding: @padding; + border-radius: @borderRadius; + border: @border; +} + +.ui.segment:first-child { + margin-top: 0em; +} +.ui.segment:last-child { + margin-bottom: 0em; +} + + +/* Vertical */ +.ui.vertical.segment { + margin: 0em; + padding-left: 0em; + padding-right: 0em; + + background: none transparent; + border-radius: 0px; + box-shadow: none; + border: none; + border-bottom: @borderWidth solid @borderColor; +} +.ui.vertical.segment:last-child { + border-bottom: none; +} + + +/*------------------- + Loose Coupling +--------------------*/ + +/* Header */ +.ui.inverted.segment > .ui.header { + color: @white; +} + +/* Label */ +.ui[class*="bottom attached"].segment > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui[class*="top attached"].segment > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { + border-top-left-radius: 0em; + border-top-right-radius: 0em; +} +.ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { + border-bottom-left-radius: 0em; + border-bottom-right-radius: 0em; +} + +/* Grid */ +.ui.page.grid.segment, +.ui.grid > .row > .ui.segment.column, +.ui.grid > .ui.segment.column { + padding-top: @pageGridMargin; + padding-bottom: @pageGridMargin; +} +.ui.grid.segment { + margin: @margin; + border-radius: @borderRadius; +} + +/* Table */ +.ui.basic.table.segment { + background: @background; + border: @border; + box-shadow: @boxShadow; +} +.ui[class*="very basic"].table.segment { + padding: @padding; +} + + +/******************************* + Types +*******************************/ + + +/*------------------- + Placeholder +--------------------*/ + +.ui.placeholder.segment { + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; + max-width: initial; + animation: none; + overflow: visible; + padding: @placeholderPadding; + min-height: @placeholderMinHeight; + background: @placeholderBackground; + border-color: @placeholderBorderColor; + box-shadow: @placeholderBoxShadow; +} + +.ui.placeholder.segment .button, +.ui.placeholder.segment textarea { + display: block; +} +.ui.placeholder.segment .field, +.ui.placeholder.segment textarea, +.ui.placeholder.segment > .ui.input, +.ui.placeholder.segment .button { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; +} +.ui.placeholder.segment .column .button, +.ui.placeholder.segment .column .field, +.ui.placeholder.segment .column textarea, +.ui.placeholder.segment .column > .ui.input { + max-width: @placeholderContentMaxWidth; + margin-left: auto; + margin-right: auto; +} + +.ui.placeholder.segment > .inline { + align-self: center; +} +.ui.placeholder.segment > .inline > .button { + display: inline-block; + width: auto; + margin: @placeholderContentInlineButtonMargin; +} +.ui.placeholder.segment > .inline > .button:last-child { + margin-right: 0px; +} + + +/*------------------- + Piled +--------------------*/ + +.ui.piled.segments, +.ui.piled.segment { + margin: @piledMargin 0em; + box-shadow: @piledBoxShadow; + z-index: @piledZIndex; +} +.ui.piled.segment:first-child { + margin-top: 0em; +} +.ui.piled.segment:last-child { + margin-bottom: 0em; +} +.ui.piled.segments:after, +.ui.piled.segments:before, +.ui.piled.segment:after, +.ui.piled.segment:before { + background-color: @white; + visibility: visible; + content: ''; + display: block; + height: 100%; + left: 0px; + position: absolute; + width: 100%; + border: @piledBorder; + box-shadow: @piledBoxShadow; +} +.ui.piled.segments:before, +.ui.piled.segment:before { + transform: rotate(-@piledDegrees); + top: 0; + z-index: -2; +} +.ui.piled.segments:after, +.ui.piled.segment:after { + transform: rotate(@piledDegrees); + top: 0; + z-index: -1; +} + +/* Piled Attached */ +.ui[class*="top attached"].piled.segment { + margin-top: @piledMargin; + margin-bottom: 0em; +} +.ui.piled.segment[class*="top attached"]:first-child { + margin-top: 0em; +} +.ui.piled.segment[class*="bottom attached"] { + margin-top: 0em; + margin-bottom: @piledMargin; +} +.ui.piled.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Stacked +--------------------*/ + +.ui.stacked.segment { + padding-bottom: @stackedPadding; +} +.ui.stacked.segments:before, +.ui.stacked.segments:after, +.ui.stacked.segment:before, +.ui.stacked.segment:after { + content: ''; + position: absolute; + bottom: -(@stackedHeight / 2); + left: 0%; + + border-top: 1px solid @borderColor; + background: @stackedPageBackground; + + width: 100%; + height: @stackedHeight; + visibility: visible; +} +.ui.stacked.segments:before, +.ui.stacked.segment:before { + display: none; +} + +/* Add additional page */ +.ui.tall.stacked.segments:before, +.ui.tall.stacked.segment:before { + display: block; + bottom: 0px; +} + +/* Inverted */ +.ui.stacked.inverted.segments:before, +.ui.stacked.inverted.segments:after, +.ui.stacked.inverted.segment:before, +.ui.stacked.inverted.segment:after { + background-color: @subtleTransparentBlack; + border-top: 1px solid @selectedBorderColor; +} + +/*------------------- + Padded +--------------------*/ + +.ui.padded.segment { + padding: @paddedSegmentPadding; +} + +.ui[class*="very padded"].segment { + padding: @veryPaddedSegmentPadding; +} + +/* Padded vertical */ +.ui.padded.segment.vertical.segment, +.ui[class*="very padded"].vertical.segment { + padding-left: 0px; + padding-right: 0px; +} + +/*------------------- + Compact +--------------------*/ + +.ui.compact.segment { + display: table; +} + +/* Compact Group */ +.ui.compact.segments { + display: inline-flex; +} +.ui.compact.segments .segment, +.ui.segments .compact.segment { + display: block; + flex: 0 1 auto; +} + +/*------------------- + Circular +--------------------*/ + +.ui.circular.segment { + display: table-cell; + padding: @circularPadding; + text-align: center; + vertical-align: middle; + border-radius: 500em; +} + +/*------------------- + Raised +--------------------*/ + +.ui.raised.segments, +.ui.raised.segment { + box-shadow: @raisedBoxShadow; +} + + +/******************************* + Groups +*******************************/ + +/* Group */ +.ui.segments { + flex-direction: column; + position: relative; + margin: @groupedMargin; + border: @groupedBorder; + box-shadow: @groupedBoxShadow; + border-radius: @groupedBorderRadius; +} +.ui.segments:first-child { + margin-top: 0em; +} +.ui.segments:last-child { + margin-bottom: 0em; +} + + +/* Nested Segment */ +.ui.segments > .segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: @groupedSegmentMargin; + width: @groupedSegmentWidth; + box-shadow: @groupedSegmentBoxShadow; + border: @groupedSegmentBorder; + border-top: @groupedSegmentDivider; +} + +.ui.segments:not(.horizontal) > .segment:first-child { + top: @attachedTopOffset; + bottom: 0px; + border-top: none; + margin-top: 0em; + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + border-radius: @borderRadius @borderRadius 0em 0em; +} + +/* Bottom */ +.ui.segments:not(.horizontal) > .segment:last-child { + top: @attachedBottomOffset; + bottom: 0px; + margin-top: 0em; + margin-bottom: 0em; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} + +/* Only */ +.ui.segments:not(.horizontal) > .segment:only-child { + border-radius: @borderRadius; +} + + +/* Nested Group */ +.ui.segments > .ui.segments { + border-top: @groupedSegmentDivider; + margin: @nestedGroupMargin; +} +.ui.segments > .segments:first-child { + border-top: none; +} +.ui.segments > .segment + .segments:not(.horizontal) { + margin-top: 0em; +} + +/* Horizontal Group */ +.ui.horizontal.segments { + display: flex; + flex-direction: row; + background-color: transparent; + border-radius: 0px; + padding: 0em; + background-color: @background; + box-shadow: @boxShadow; + margin: @margin; + border-radius: @borderRadius; + border: @border; +} + +/* Nested Horizontal Group */ +.ui.segments > .horizontal.segments { + margin: 0em; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-top: @groupedSegmentDivider; +} + +/* Horizontal Segment */ +.ui.horizontal.segments > .segment { + flex: 1 1 auto; + -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */ + margin: 0em; + min-width: 0px; + background-color: transparent; + border-radius: 0px; + border: none; + box-shadow: none; + border-left: @borderWidth solid @borderColor; +} + +/* Border Fixes */ +.ui.segments > .horizontal.segments:first-child { + border-top: none; +} +.ui.horizontal.segments > .segment:first-child { + border-left: none; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.segment { + opacity: @disabledOpacity; + color: @disabledTextColor; +} + +/*-------------- + Loading +---------------*/ + +.ui.loading.segment { + position: relative; + cursor: default; + pointer-events: none; + text-shadow: none !important; + color: transparent !important; + transition: all 0s linear; +} +.ui.loading.segment:before { + position: absolute; + content: ''; + top: 0%; + left: 0%; + background: @loaderDimmerColor; + width: 100%; + height: 100%; + border-radius: @borderRadius; + z-index: @loaderDimmerZIndex; +} +.ui.loading.segment:after { + position: absolute; + content: ''; + top: 50%; + left: 50%; + + margin: @loaderMargin; + width: @loaderSize; + height: @loaderSize; + + animation: segment-spin @loaderSpeed linear; + animation-iteration-count: infinite; + + border-radius: @circularRadius; + + border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor; + border-style: solid; + border-width: @loaderLineWidth; + + box-shadow: 0px 0px 0px 1px transparent; + visibility: visible; + z-index: @loaderLineZIndex; +} + +@keyframes segment-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + + +/******************************* + Variations +*******************************/ + + +/*------------------- + Basic +--------------------*/ + +.ui.basic.segment { + background: @basicBackground; + box-shadow: @basicBoxShadow; + border: @basicBorder; + border-radius: @basicBorderRadius; +} + +/*------------------- + Clearing +--------------------*/ + +.ui.clearing.segment:after { + content: "."; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +/*------------------- + Colors +--------------------*/ + +/* Red */ +.ui.red.segment:not(.inverted) { + border-top: @coloredBorderSize solid @red !important; +} +.ui.inverted.red.segment { + background-color: @red !important; + color: @white !important; +} + +/* Orange */ +.ui.orange.segment:not(.inverted) { + border-top: @coloredBorderSize solid @orange !important; +} +.ui.inverted.orange.segment { + background-color: @orange !important; + color: @white !important; +} + +/* Yellow */ +.ui.yellow.segment:not(.inverted) { + border-top: @coloredBorderSize solid @yellow !important; +} +.ui.inverted.yellow.segment { + background-color: @yellow !important; + color: @white !important; +} + +/* Olive */ +.ui.olive.segment:not(.inverted) { + border-top: @coloredBorderSize solid @olive !important; +} +.ui.inverted.olive.segment { + background-color: @olive !important; + color: @white !important; +} + +/* Green */ +.ui.green.segment:not(.inverted) { + border-top: @coloredBorderSize solid @green !important; +} +.ui.inverted.green.segment { + background-color: @green !important; + color: @white !important; +} + +/* Teal */ +.ui.teal.segment:not(.inverted) { + border-top: @coloredBorderSize solid @teal !important; +} +.ui.inverted.teal.segment { + background-color: @teal !important; + color: @white !important; +} + +/* Blue */ +.ui.blue.segment:not(.inverted) { + border-top: @coloredBorderSize solid @blue !important; +} +.ui.inverted.blue.segment { + background-color: @blue !important; + color: @white !important; +} + +/* Violet */ +.ui.violet.segment:not(.inverted) { + border-top: @coloredBorderSize solid @violet !important; +} +.ui.inverted.violet.segment { + background-color: @violet !important; + color: @white !important; +} + +/* Purple */ +.ui.purple.segment:not(.inverted) { + border-top: @coloredBorderSize solid @purple !important; +} +.ui.inverted.purple.segment { + background-color: @purple !important; + color: @white !important; +} + +/* Pink */ +.ui.pink.segment:not(.inverted) { + border-top: @coloredBorderSize solid @pink !important; +} +.ui.inverted.pink.segment { + background-color: @pink !important; + color: @white !important; +} + +/* Brown */ +.ui.brown.segment:not(.inverted) { + border-top: @coloredBorderSize solid @brown !important; +} +.ui.inverted.brown.segment { + background-color: @brown !important; + color: @white !important; +} + +/* Grey */ +.ui.grey.segment:not(.inverted) { + border-top: @coloredBorderSize solid @grey !important; +} +.ui.inverted.grey.segment { + background-color: @grey !important; + color: @white !important; +} + +/* Black */ +.ui.black.segment:not(.inverted) { + border-top: @coloredBorderSize solid @black !important; +} +.ui.inverted.black.segment { + background-color: @black !important; + color: @white !important; +} + +/*------------------- + Aligned +--------------------*/ + +.ui[class*="left aligned"].segment { + text-align: left; +} +.ui[class*="right aligned"].segment { + text-align: right; +} +.ui[class*="center aligned"].segment { + text-align: center; +} + +/*------------------- + Floated +--------------------*/ + +.ui.floated.segment, +.ui[class*="left floated"].segment { + float: left; + margin-right: @floatedDistance; +} +.ui[class*="right floated"].segment { + float: right; + margin-left: @floatedDistance; +} + + +/*------------------- + Inverted +--------------------*/ + +.ui.inverted.segment { + border: none; + box-shadow: none; +} +.ui.inverted.segment, +.ui.primary.inverted.segment { + background: @invertedBackground; + color: @invertedTextColor; +} + +/* Nested */ +.ui.inverted.segment .segment { + color: @textColor; +} +.ui.inverted.segment .inverted.segment { + color: @invertedTextColor; +} + +/* Attached */ +.ui.inverted.attached.segment { + border-color: @solidWhiteBorderColor; +} + +/*------------------- + Emphasis +--------------------*/ + +/* Secondary */ +.ui.secondary.segment { + background: @secondaryBackground; + color: @secondaryColor; +} +.ui.secondary.inverted.segment { + background: @secondaryInvertedBackground; + color: @secondaryInvertedColor; +} + +/* Tertiary */ +.ui.tertiary.segment { + background: @tertiaryBackground; + color: @tertiaryColor; +} +.ui.tertiary.inverted.segment { + background: @tertiaryInvertedBackground; + color: @tertiaryInvertedColor; +} + + +/*------------------- + Attached +--------------------*/ + +/* Middle */ +.ui.attached.segment { + top: 0px; + bottom: 0px; + border-radius: 0px; + margin: 0em @attachedHorizontalOffset; + width: @attachedWidth; + max-width: @attachedWidth; + box-shadow: @attachedBoxShadow; + border: @attachedBorder; +} +.ui.attached:not(.message) + .ui.attached.segment:not(.top) { + border-top: none; +} + +/* Top */ +.ui[class*="top attached"].segment { + bottom: 0px; + margin-bottom: 0em; + top: @attachedTopOffset; + margin-top: @verticalMargin; + border-radius: @borderRadius @borderRadius 0em 0em; +} +.ui.segment[class*="top attached"]:first-child { + margin-top: 0em; +} + +/* Bottom */ +.ui.segment[class*="bottom attached"] { + bottom: 0px; + margin-top: 0em; + top: @attachedBottomOffset; + margin-bottom: @verticalMargin; + box-shadow: @attachedBottomBoxShadow; + border-radius: 0em 0em @borderRadius @borderRadius; +} +.ui.segment[class*="bottom attached"]:last-child { + margin-bottom: 0em; +} + +/*------------------- + Size +--------------------*/ + +.ui.mini.segments .segment, +.ui.mini.segment { + font-size: @mini; +} +.ui.tiny.segments .segment, +.ui.tiny.segment { + font-size: @tiny; +} +.ui.small.segments .segment, +.ui.small.segment { + font-size: @small; +} +.ui.segments .segment, +.ui.segment { + font-size: @medium; +} +.ui.large.segments .segment, +.ui.large.segment { + font-size: @large; +} +.ui.big.segments .segment, +.ui.big.segment { + font-size: @big; +} +.ui.huge.segments .segment, +.ui.huge.segment { + font-size: @huge; +} +.ui.massive.segments .segment, +.ui.massive.segment { + font-size: @massive; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/elements/step.less b/static/semantic/src/definitions/elements/step.less new file mode 100755 index 0000000..5c4aff2 --- /dev/null +++ b/static/semantic/src/definitions/elements/step.less @@ -0,0 +1,562 @@ +/*! + * # Semantic UI - Step + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Step +*******************************/ + +/*-------------- + Load Theme +---------------*/ + +@type : 'element'; +@element : 'step'; + +@import (multiple) '../../theme.config'; + +/******************************* + Plural +*******************************/ + +.ui.steps { + display: inline-flex; + flex-direction: row; + align-items: stretch; + margin: @stepMargin; + background: @stepsBackground; + box-shadow: @stepsBoxShadow; + line-height: @lineHeight; + border-radius: @stepsBorderRadius; + border: @stepsBorder; +} + +/* First Steps */ +.ui.steps:first-child { + margin-top: 0em; +} + +/* Last Steps */ +.ui.steps:last-child { + margin-bottom: 0em; +} + + +/******************************* + Singular +*******************************/ + +.ui.steps .step { + position: relative; + display: flex; + flex: 1 0 auto; + flex-wrap: wrap; + flex-direction: row; + vertical-align: middle; + align-items: center; + justify-content: @justifyContent; + + margin: @verticalMargin @horizontalMargin; + padding: @verticalPadding @horizontalPadding; + background: @background; + color: @textColor; + box-shadow: @boxShadow; + border-radius: @borderRadius; + border: @border; + border-right: @divider; + transition: @transition; +} + +/* Arrow */ +.ui.steps .step:after { + display: none; + position: absolute; + z-index: 2; + content: ''; + top: @arrowTopOffset; + right: @arrowRightOffset; + border: medium none; + background-color: @arrowBackgroundColor; + width: @arrowSize; + height: @arrowSize; + + border-style: solid; + border-color: @borderColor; + border-width: @arrowBorderWidth; + + transition: @transition; + transform: translateY(-50%) translateX(50%) rotate(-45deg); +} + +/* First Step */ +.ui.steps .step:first-child { + padding-left: @horizontalPadding; + border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius; +} + +/* Last Step */ +.ui.steps .step:last-child { + border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em; +} +.ui.steps .step:last-child { + border-right: none; + margin-right: 0em; +} + +/* Only Step */ +.ui.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/******************************* + Content +*******************************/ + +/* Title */ +.ui.steps .step .title { + font-family: @titleFontFamily; + font-size: @titleFontSize; + font-weight: @titleFontWeight; +} +.ui.steps .step > .title { + width: 100%; +} + +/* Description */ +.ui.steps .step .description { + font-weight: @descriptionFontWeight; + font-size: @descriptionFontSize; + color: @descriptionColor; +} +.ui.steps .step > .description { + width: 100%; +} +.ui.steps .step .title ~ .description { + margin-top: @descriptionDistance; +} + +/* Icon */ +.ui.steps .step > .icon { + line-height: 1; + font-size: @iconSize; + margin: 0em @iconDistance 0em 0em; +} +.ui.steps .step > .icon, +.ui.steps .step > .icon ~ .content { + display: block; + flex: 0 1 auto; + align-self: @iconAlign; +} +.ui.steps .step > .icon ~ .content { + flex-grow: 1 0 auto; +} + +/* Horizontal Icon */ +.ui.steps:not(.vertical) .step > .icon { + width: auto; +} + +/* Link */ +.ui.steps .link.step, +.ui.steps a.step { + cursor: pointer; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Ordered +---------------*/ + +.ui.ordered.steps { + counter-reset: ordered; +} +.ui.ordered.steps .step:before { + display: block; + position: static; + text-align: center; + content: counters(ordered, "."); + align-self: @iconAlign; + margin-right: @iconDistance; + font-size: @iconSize; + counter-increment: ordered; + font-family: @orderedFontFamily; + font-weight: @orderedFontWeight; +} + +.ui.ordered.steps .step > * { + display: block; + align-self: @iconAlign; +} + + +/*-------------- + Vertical +---------------*/ + +.ui.vertical.steps { + display: inline-flex; + flex-direction: column; + overflow: visible; +} +.ui.vertical.steps .step { + justify-content: flex-start; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @verticalDivider; +} +.ui.vertical.steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.vertical.steps .step:last-child { + border-bottom: none; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.vertical.steps .step:only-child { + border-radius: @stepsBorderRadius; +} + + +/* Arrow */ +.ui.vertical.steps .step:after { + display: none; +} +.ui.vertical.steps .step:after { + top: @verticalArrowTopOffset; + right: @verticalArrowRightOffset; + border-width: @verticalArrowBorderWidth; +} + +.ui.vertical.steps .step:after { + display: @verticalArrowDisplay; +} +.ui.vertical.steps .active.step:after { + display: @verticalActiveArrowDisplay; +} +.ui.vertical.steps .step:last-child:after { + display: @verticalLastArrowDisplay; +} +.ui.vertical.steps .active.step:last-child:after { + display: @verticalActiveLastArrowDisplay; +} + + +/*--------------- + Responsive +----------------*/ + +/* Mobile (Default) */ +@media only screen and (max-width: (@largestMobileScreen)) { + + .ui.steps:not(.unstackable) { + display: inline-flex; + overflow: visible; + flex-direction: column; + } + .ui.steps:not(.unstackable) .step { + width: 100% !important; + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; + } + .ui.steps:not(.unstackable) .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; + } + .ui.steps:not(.unstackable) .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; + } + + /* Arrow */ + .ui.steps:not(.unstackable) .step:after { + display: none !important; + } + + /* Content */ + .ui.steps:not(.unstackable) .step .content { + text-align: center; + } + + /* Icon */ + .ui.steps:not(.unstackable) .step > .icon, + .ui.ordered.steps:not(.unstackable) .step:before { + margin: 0em 0em @mobileIconDistance 0em; + } + +} + +/******************************* + States +*******************************/ + +/* Link Hover */ +.ui.steps .link.step:hover::after, +.ui.steps .link.step:hover, +.ui.steps a.step:hover::after, +.ui.steps a.step:hover { + background: @hoverBackground; + color: @hoverColor; +} + +/* Link Down */ +.ui.steps .link.step:active::after, +.ui.steps .link.step:active, +.ui.steps a.step:active::after, +.ui.steps a.step:active { + background: @downBackground; + color: @downColor; +} + +/* Active */ +.ui.steps .step.active { + cursor: auto; + background: @activeBackground; +} +.ui.steps .step.active:after { + background: @activeBackground; +} +.ui.steps .step.active .title { + color: @activeColor; +} +.ui.ordered.steps .step.active:before, +.ui.steps .active.step .icon { + color: @activeIconColor; +} + +/* Active Arrow */ +.ui.steps .step:after { + display: @arrowDisplay; +} +.ui.steps .active.step:after { + display: @activeArrowDisplay; +} +.ui.steps .step:last-child:after { + display: @lastArrowDisplay; +} +.ui.steps .active.step:last-child:after { + display: @activeLastArrowDisplay; +} + +/* Active Hover */ +.ui.steps .link.active.step:hover::after, +.ui.steps .link.active.step:hover, +.ui.steps a.active.step:hover::after, +.ui.steps a.active.step:hover { + cursor: pointer; + background: @activeHoverBackground; + color: @activeHoverColor; +} + +/* Completed */ +.ui.steps .step.completed > .icon:before, +.ui.ordered.steps .step.completed:before { + color: @completedColor; +} + +/* Disabled */ +.ui.steps .disabled.step { + cursor: auto; + background: @disabledBackground; + pointer-events: none; +} +.ui.steps .disabled.step, +.ui.steps .disabled.step .title, +.ui.steps .disabled.step .description { + color: @disabledColor; +} +.ui.steps .disabled.step:after { + background: @disabledBackground; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Stackable +---------------*/ + +/* Tablet Or Below */ +@media only screen and (max-width: @largestTabletScreen) { + +.ui[class*="tablet stackable"].steps { + display: inline-flex; + overflow: visible; + flex-direction: column; +} + +/* Steps */ +.ui[class*="tablet stackable"].steps .step { + flex-direction: column; + border-radius: @borderRadius; + padding: @verticalPadding @horizontalPadding; +} +.ui[class*="tablet stackable"].steps .step:first-child { + padding: @verticalPadding @horizontalPadding; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui[class*="tablet stackable"].steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} + +/* Arrow */ +.ui[class*="tablet stackable"].steps .step:after { + display: none !important; +} + +/* Content */ +.ui[class*="tablet stackable"].steps .step .content { + text-align: center; +} + +/* Icon */ +.ui[class*="tablet stackable"].steps .step > .icon, +.ui[class*="tablet stackable"].ordered.steps .step:before { + margin: 0em 0em @mobileIconDistance 0em; +} + +} + +/*-------------- + Fluid +---------------*/ + +/* Fluid */ +.ui.fluid.steps { + display: flex; + width: 100%; +} + +/*-------------- + Attached +---------------*/ + +/* Top */ +.ui.attached.steps { + width: @attachedWidth !important; + margin: 0em @attachedHorizontalOffset @attachedVerticalOffset; + max-width: @attachedWidth; + border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em; +} +.ui.attached.steps .step:first-child { + border-radius: @stepsBorderRadius 0em 0em 0em; +} +.ui.attached.steps .step:last-child { + border-radius: 0em @stepsBorderRadius 0em 0em; +} + +/* Bottom */ +.ui.bottom.attached.steps { + margin: @attachedVerticalOffset @attachedHorizontalOffset 0em; + border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:first-child { + border-radius: 0em 0em 0em @stepsBorderRadius; +} +.ui.bottom.attached.steps .step:last-child { + border-radius: 0em 0em @stepsBorderRadius 0em; +} + +/*------------------- + Evenly Divided +--------------------*/ + +.ui.one.steps, +.ui.two.steps, +.ui.three.steps, +.ui.four.steps, +.ui.five.steps, +.ui.six.steps, +.ui.seven.steps, +.ui.eight.steps { + width: 100%; +} +.ui.one.steps > .step, +.ui.two.steps > .step, +.ui.three.steps > .step, +.ui.four.steps > .step, +.ui.five.steps > .step, +.ui.six.steps > .step, +.ui.seven.steps > .step, +.ui.eight.steps > .step { + flex-wrap: nowrap; +} +.ui.one.steps > .step { + width: 100%; +} +.ui.two.steps > .step { + width: 50%; +} +.ui.three.steps > .step { + width: 33.333%; +} +.ui.four.steps > .step { + width: 25%; +} +.ui.five.steps > .step { + width: 20%; +} +.ui.six.steps > .step { + width: 16.666%; +} +.ui.seven.steps > .step { + width: 14.285%; +} +.ui.eight.steps > .step { + width: 12.500%; +} + +/*------------------- + Sizes +--------------------*/ + + +.ui.mini.steps .step, +.ui.mini.step { + font-size: @mini; +} +.ui.tiny.steps .step, +.ui.tiny.step { + font-size: @tiny; +} +.ui.small.steps .step, +.ui.small.step { + font-size: @small; +} +.ui.steps .step, +.ui.step { + font-size: @medium; +} +.ui.large.steps .step, +.ui.large.step { + font-size: @large; +} +.ui.big.steps .step, +.ui.big.step { + font-size: @big; +} +.ui.huge.steps .step, +.ui.huge.step { + font-size: @huge; +} +.ui.massive.steps .step, +.ui.massive.step { + font-size: @massive; +} + + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/globals/reset.less b/static/semantic/src/definitions/globals/reset.less new file mode 100755 index 0000000..7514d94 --- /dev/null +++ b/static/semantic/src/definitions/globals/reset.less @@ -0,0 +1,40 @@ +/*! + * # Semantic UI - Reset + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'reset'; + +@import (multiple) '../../theme.config'; + +/******************************* + Reset +*******************************/ + +/* Border-Box */ +*, +*:before, +*:after { + box-sizing: inherit; +} +html { + box-sizing: border-box; +} + +/* iPad Input Shadows */ +input[type="text"], input[type="email"], input[type="search"], input[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; /* mobile firefox too! */ +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/globals/site.js b/static/semantic/src/definitions/globals/site.js new file mode 100755 index 0000000..63cbd9d --- /dev/null +++ b/static/semantic/src/definitions/globals/site.js @@ -0,0 +1,487 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +$.site = $.fn.site = function(parameters) { + var + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.site.settings, parameters) + : $.extend({}, $.site.settings), + + namespace = settings.namespace, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $document = $(document), + $module = $document, + element = this, + instance = $module.data(moduleNamespace), + + module, + returnedValue + ; + module = { + + initialize: function() { + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of site', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + normalize: function() { + module.fix.console(); + module.fix.requestAnimationFrame(); + }, + + fix: { + console: function() { + module.debug('Normalizing window.console'); + if (console === undefined || console.log === undefined) { + module.verbose('Console not available, normalizing events'); + module.disable.console(); + } + if (typeof console.group == 'undefined' || typeof console.groupEnd == 'undefined' || typeof console.groupCollapsed == 'undefined') { + module.verbose('Console group not available, normalizing events'); + window.console.group = function() {}; + window.console.groupEnd = function() {}; + window.console.groupCollapsed = function() {}; + } + if (typeof console.markTimeline == 'undefined') { + module.verbose('Mark timeline not available, normalizing events'); + window.console.markTimeline = function() {}; + } + }, + consoleClear: function() { + module.debug('Disabling programmatic console clearing'); + window.console.clear = function() {}; + }, + requestAnimationFrame: function() { + module.debug('Normalizing requestAnimationFrame'); + if(window.requestAnimationFrame === undefined) { + module.debug('RequestAnimationFrame not available, normalizing event'); + window.requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); } + ; + } + } + }, + + moduleExists: function(name) { + return ($.fn[name] !== undefined && $.fn[name].settings !== undefined); + }, + + enabled: { + modules: function(modules) { + var + enabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(module.moduleExists(name)) { + enabledModules.push(name); + } + }); + return enabledModules; + } + }, + + disabled: { + modules: function(modules) { + var + disabledModules = [] + ; + modules = modules || settings.modules; + $.each(modules, function(index, name) { + if(!module.moduleExists(name)) { + disabledModules.push(name); + } + }); + return disabledModules; + } + }, + + change: { + setting: function(setting, value, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? (modules === 'all') + ? settings.modules + : [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + namespace = (module.moduleExists(name)) + ? $.fn[name].settings.namespace || false + : true, + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', setting, value, name); + $.fn[name].settings[setting] = value; + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', setting, value); + } + } + } + }); + }, + settings: function(newSettings, modules, modifyExisting) { + modules = (typeof modules === 'string') + ? [modules] + : modules || settings.modules + ; + modifyExisting = (modifyExisting !== undefined) + ? modifyExisting + : true + ; + $.each(modules, function(index, name) { + var + $existingModules + ; + if(module.moduleExists(name)) { + module.verbose('Changing default setting', newSettings, name); + $.extend(true, $.fn[name].settings, newSettings); + if(modifyExisting && namespace) { + $existingModules = $(':data(module-' + namespace + ')'); + if($existingModules.length > 0) { + module.verbose('Modifying existing settings', $existingModules); + $existingModules[name]('setting', newSettings); + } + } + } + }); + } + }, + + enable: { + console: function() { + module.console(true); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling debug for modules', modules); + module.change.setting('debug', true, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Enabling verbose debug for modules', modules); + module.change.setting('verbose', true, modules, modifyExisting); + } + }, + disable: { + console: function() { + module.console(false); + }, + debug: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling debug for modules', modules); + module.change.setting('debug', false, modules, modifyExisting); + }, + verbose: function(modules, modifyExisting) { + modules = modules || settings.modules; + module.debug('Disabling verbose debug for modules', modules); + module.change.setting('verbose', false, modules, modifyExisting); + } + }, + + console: function(enable) { + if(enable) { + if(instance.cache.console === undefined) { + module.error(error.console); + return; + } + module.debug('Restoring console function'); + window.console = instance.cache.console; + } + else { + module.debug('Disabling console function'); + instance.cache.console = window.console; + window.console = { + clear : function(){}, + error : function(){}, + group : function(){}, + groupCollapsed : function(){}, + groupEnd : function(){}, + info : function(){}, + log : function(){}, + markTimeline : function(){}, + warn : function(){} + }; + } + }, + + destroy: function() { + module.verbose('Destroying previous site for', $module); + $module + .removeData(moduleNamespace) + ; + }, + + cache: {}, + + 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, 500); + }, + 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( (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 { + module.error(error.method, query); + 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 + ; +}; + +$.site.settings = { + + name : 'Site', + namespace : 'site', + + error : { + console : 'Console cannot be restored, most likely it was overwritten outside of module', + method : 'The method you called is not defined.' + }, + + debug : false, + verbose : false, + performance : true, + + modules: [ + 'accordion', + 'api', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'form', + 'modal', + 'nag', + 'popup', + 'rating', + 'shape', + 'sidebar', + 'state', + 'sticky', + 'tab', + 'transition', + 'visit', + 'visibility' + ], + + siteNamespace : 'site', + namespaceStub : { + cache : {}, + config : {}, + sections : {}, + section : {}, + utilities : {} + } + +}; + +// allows for selection of elements with data attributes +$.extend($.expr[ ":" ], { + data: ($.expr.createPseudo) + ? $.expr.createPseudo(function(dataName) { + return function(elem) { + return !!$.data(elem, dataName); + }; + }) + : function(elem, i, match) { + // support: jQuery < 1.8 + return !!$.data(elem, match[ 3 ]); + } +}); + + +})( jQuery, window, document ); diff --git a/static/semantic/src/definitions/globals/site.less b/static/semantic/src/definitions/globals/site.less new file mode 100755 index 0000000..ffe558b --- /dev/null +++ b/static/semantic/src/definitions/globals/site.less @@ -0,0 +1,208 @@ +/*! + * # Semantic UI - Site + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + + +/******************************* + Theme +*******************************/ + +@type : 'global'; +@element : 'site'; + +@import (multiple) '../../theme.config'; + +/******************************* + Page +*******************************/ + +.loadFonts(); + +html, +body { + height: 100%; +} + +html { + font-size: @emSize; +} + +body { + margin: 0px; + padding: 0px; + overflow-x: @pageOverflowX; + min-width: @pageMinWidth; + background: @pageBackground; + font-family: @pageFont; + font-size: @fontSize; + line-height: @lineHeight; + color: @textColor; + font-smoothing: @fontSmoothing; +} + +/******************************* + Headers +*******************************/ + +h1, +h2, +h3, +h4, +h5 { + font-family: @headerFont; + line-height: @headerLineHeight; + margin: @headerMargin; + font-weight: @headerFontWeight; + padding: 0em; +} + +h1 { + min-height: 1rem; + font-size: @h1; +} +h2 { + font-size: @h2; +} +h3 { + font-size: @h3; +} +h4 { + font-size: @h4; +} +h5 { + font-size: @h5; +} + +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child { + margin-top: 0em; +} + +h1:last-child, +h2:last-child, +h3:last-child, +h4:last-child, +h5:last-child { + margin-bottom: 0em; +} + + +/******************************* + Text +*******************************/ + +p { + margin: @paragraphMargin; + line-height: @paragraphLineHeight; +} +p:first-child { + margin-top: 0em; +} +p:last-child { + margin-bottom: 0em; +} + +/*------------------- + Links +--------------------*/ + +a { + color: @linkColor; + text-decoration: @linkUnderline; +} +a:hover { + color: @linkHoverColor; + text-decoration: @linkHoverUnderline; +} + + +/******************************* + Scrollbars +*******************************/ + +.addScrollbars() when (@useCustomScrollbars) { + + /* Force Simple Scrollbars */ + body ::-webkit-scrollbar { + -webkit-appearance: none; + width: @customScrollbarWidth; + height: @customScrollbarHeight; + } + body ::-webkit-scrollbar-track { + background: @trackBackground; + border-radius: @trackBorderRadius; + } + body ::-webkit-scrollbar-thumb { + cursor: pointer; + border-radius: @thumbBorderRadius; + background: @thumbBackground; + transition: @thumbTransition; + } + body ::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInactiveBackground; + } + body ::-webkit-scrollbar-thumb:hover { + background: @thumbHoverBackground; + } + + /* Inverted UI */ + body .ui.inverted::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + body .ui.inverted::-webkit-scrollbar-thumb:hover { + background: @thumbInvertedHoverBackground; + } +} + +/******************************* + Highlighting +*******************************/ + +/* Site */ +::-webkit-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::-moz-selection { + background-color: @highlightBackground; + color: @highlightColor; +} +::selection { + background-color: @highlightBackground; + color: @highlightColor; +} + +/* Form */ +textarea::-webkit-selection, +input::-webkit-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::-moz-selection, +input::-moz-selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} +textarea::selection, +input::selection { + background-color: @inputHighlightBackground; + color: @inputHighlightColor; +} + +.addScrollbars(); +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/modules/accordion.js b/static/semantic/src/definitions/modules/accordion.js new file mode 100755 index 0000000..818e3d6 --- /dev/null +++ b/static/semantic/src/definitions/modules/accordion.js @@ -0,0 +1,613 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.accordion = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + requestAnimationFrame = window.requestAnimationFrame + || window.mozRequestAnimationFrame + || window.webkitRequestAnimationFrame + || window.msRequestAnimationFrame + || function(callback) { setTimeout(callback, 0); }, + + returnedValue + ; + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.accordion.settings, parameters) + : $.extend({}, $.fn.accordion.settings), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + $module = $(this), + $title = $module.find(selector.title), + $content = $module.find(selector.content), + + element = this, + instance = $module.data(moduleNamespace), + observer, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing', $module); + module.bind.events(); + if(settings.observeChanges) { + module.observeChanges(); + } + module.instantiate(); + }, + + instantiate: function() { + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.debug('Destroying previous instance', $module); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + }, + + refresh: function() { + $title = $module.find(selector.title); + $content = $module.find(selector.content); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + bind: { + events: function() { + module.debug('Binding delegated events'); + $module + .on(settings.on + eventNamespace, selector.trigger, module.event.click) + ; + } + }, + + event: { + click: function() { + module.toggle.call(this); + } + }, + + toggle: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive && !isAnimating), + isOpening = (!isActive && isAnimating) + ; + module.debug('Toggling visibility of content', $activeTitle); + if(isOpen || isOpening) { + if(settings.collapsible) { + module.close.call($activeTitle); + } + else { + module.debug('Cannot close accordion content collapsing is disabled'); + } + } + else { + module.open.call($activeTitle); + } + }, + + open: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpen = (isActive || isAnimating) + ; + if(isOpen) { + module.debug('Accordion already open, skipping', $activeContent); + return; + } + module.debug('Opening accordion content', $activeTitle); + settings.onOpening.call($activeContent); + settings.onChanging.call($activeContent); + if(settings.exclusive) { + module.closeOthers.call($activeTitle); + } + $activeTitle + .addClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade in', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 1 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideDown(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .addClass(className.active) + ; + module.reset.display.call(this); + settings.onOpen.call(this); + settings.onChange.call(this); + }) + ; + }, + + close: function(query) { + var + $activeTitle = (query !== undefined) + ? (typeof query === 'number') + ? $title.eq(query) + : $(query).closest(selector.title) + : $(this).closest(selector.title), + $activeContent = $activeTitle.next($content), + isAnimating = $activeContent.hasClass(className.animating), + isActive = $activeContent.hasClass(className.active), + isOpening = (!isActive && isAnimating), + isClosing = (isActive && isAnimating) + ; + if((isActive || isOpening) && !isClosing) { + module.debug('Closing accordion content', $activeContent); + settings.onClosing.call($activeContent); + settings.onChanging.call($activeContent); + $activeTitle + .removeClass(className.active) + ; + $activeContent + .stop(true, true) + .addClass(className.animating) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $activeContent + .children() + .transition({ + animation : 'fade out', + queue : false, + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $activeContent + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $activeContent + .slideUp(settings.duration, settings.easing, function() { + $activeContent + .removeClass(className.animating) + .removeClass(className.active) + ; + module.reset.display.call(this); + settings.onClose.call(this); + settings.onChange.call(this); + }) + ; + } + }, + + closeOthers: function(index) { + var + $activeTitle = (index !== undefined) + ? $title.eq(index) + : $(this).closest(selector.title), + $parentTitles = $activeTitle.parents(selector.content).prev(selector.title), + $activeAccordion = $activeTitle.closest(selector.accordion), + activeSelector = selector.title + '.' + className.active + ':visible', + activeContent = selector.content + '.' + className.active + ':visible', + $openTitles, + $nestedTitles, + $openContents + ; + if(settings.closeNested) { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $openContents = $openTitles.next($content); + } + else { + $openTitles = $activeAccordion.find(activeSelector).not($parentTitles); + $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles); + $openTitles = $openTitles.not($nestedTitles); + $openContents = $openTitles.next($content); + } + if( ($openTitles.length > 0) ) { + module.debug('Exclusive enabled, closing other content', $openTitles); + $openTitles + .removeClass(className.active) + ; + $openContents + .removeClass(className.animating) + .stop(true, true) + ; + if(settings.animateChildren) { + if($.fn.transition !== undefined && $module.transition('is supported')) { + $openContents + .children() + .transition({ + animation : 'fade out', + useFailSafe : true, + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration + }) + ; + } + else { + $openContents + .children() + .stop(true, true) + .animate({ + opacity: 0 + }, settings.duration, module.resetOpacity) + ; + } + } + $openContents + .slideUp(settings.duration , settings.easing, function() { + $(this).removeClass(className.active); + module.reset.display.call(this); + }) + ; + } + }, + + reset: { + + display: function() { + module.verbose('Removing inline display from element', this); + $(this).css('display', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + opacity: function() { + module.verbose('Removing inline opacity from element', this); + $(this).css('opacity', ''); + if( $(this).attr('style') === '') { + $(this) + .attr('style', '') + .removeAttr('style') + ; + } + }, + + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + settings[name] = value; + } + } + else { + return settings[name]; + } + }, + internal: function(name, value) { + module.debug('Changing internal', name, value); + if(value !== undefined) { + if( $.isPlainObject(name) ) { + $.extend(true, module, name); + } + else { + module[name] = value; + } + } + else { + return module[name]; + } + }, + debug: function() { + if(!settings.silent && 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.silent && 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() { + if(!settings.silent) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + 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 { + module.error(error.method, query); + 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) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.accordion.settings = { + + name : 'Accordion', + namespace : 'accordion', + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // event on title that opens accordion + + observeChanges : true, // whether accordion should automatically refresh on DOM insertion + + exclusive : true, // whether a single accordion content panel should be open at once + collapsible : true, // whether accordion content can be closed + closeNested : false, // whether nested content should be closed when a panel is closed + animateChildren : true, // whether children opacity should be animated + + duration : 350, // duration of animation + easing : 'easeOutQuad', // easing equation for animation + + onOpening : function(){}, // callback before open animation + onClosing : function(){}, // callback before closing animation + onChanging : function(){}, // callback before closing or opening animation + + onOpen : function(){}, // callback after open animation + onClose : function(){}, // callback after closing animation + onChange : function(){}, // callback after closing or opening animation + + error: { + method : 'The method you called is not defined' + }, + + className : { + active : 'active', + animating : 'animating' + }, + + selector : { + accordion : '.accordion', + title : '.title', + trigger : '.title', + content : '.content' + } + +}; + +// Adds easing +$.extend( $.easing, { + easeOutQuad: function (x, t, b, c, d) { + return -c *(t/=d)*(t-2) + b; + } +}); + +})( jQuery, window, document ); + diff --git a/static/semantic/src/definitions/modules/accordion.less b/static/semantic/src/definitions/modules/accordion.less new file mode 100755 index 0000000..835f490 --- /dev/null +++ b/static/semantic/src/definitions/modules/accordion.less @@ -0,0 +1,219 @@ +/*! + * # Semantic UI - Accordion + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'accordion'; + +@import (multiple) '../../theme.config'; + +/******************************* + Accordion +*******************************/ + +.ui.accordion, +.ui.accordion .accordion { + max-width: 100%; +} +.ui.accordion .accordion { + margin: @childAccordionMargin; + padding: @childAccordionPadding; +} + +/* Title */ +.ui.accordion .title, +.ui.accordion .accordion .title { + cursor: pointer; +} + +/* Default Styling */ +.ui.accordion .title:not(.ui) { + padding: @titlePadding; + font-family: @titleFont; + font-size: @titleFontSize; + color: @titleColor; +} + +/* Content */ +.ui.accordion .title ~ .content, +.ui.accordion .accordion .title ~ .content { + display: none; +} + +/* Default Styling */ +.ui.accordion:not(.styled) .title ~ .content:not(.ui), +.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) { + margin: @contentMargin; + padding: @contentPadding; +} +.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child { + padding-bottom: 0em; +} + +/* Arrow */ +.ui.accordion .title .dropdown.icon, +.ui.accordion .accordion .title .dropdown.icon { + display: @iconDisplay; + float: @iconFloat; + opacity: @iconOpacity; + width: @iconWidth; + height: @iconHeight; + margin: @iconMargin; + padding: @iconPadding; + font-size: @iconFontSize; + transition: @iconTransition; + vertical-align: @iconVerticalAlign; + transform: @iconTransform; +} + +/*-------------- + Coupling +---------------*/ + +/* Menu */ +.ui.accordion.menu .item .title { + display: block; + padding: @menuTitlePadding; +} +.ui.accordion.menu .item .title > .dropdown.icon { + float: @menuIconFloat; + margin: @menuIconMargin; + transform: @menuIconTransform; +} + +/* Header */ +.ui.accordion .ui.header .dropdown.icon { + font-size: @iconFontSize; + margin: @iconMargin; +} + +/******************************* + States +*******************************/ + +.ui.accordion .active.title .dropdown.icon, +.ui.accordion .accordion .active.title .dropdown.icon { + transform: @activeIconTransform; +} + +.ui.accordion.menu .item .active.title > .dropdown.icon { + transform: @activeIconTransform; +} + +/******************************* + Types +*******************************/ + +/*-------------- + Styled +---------------*/ + +.ui.styled.accordion { + width: @styledWidth; +} + +.ui.styled.accordion, +.ui.styled.accordion .accordion { + border-radius: @styledBorderRadius; + background: @styledBackground; + box-shadow: @styledBoxShadow; +} +.ui.styled.accordion .title, +.ui.styled.accordion .accordion .title { + margin: @styledTitleMargin; + padding: @styledTitlePadding; + color: @styledTitleColor; + font-weight: @styledTitleFontWeight; + border-top: @styledTitleBorder; + transition: @styledTitleTransition; +} +.ui.styled.accordion > .title:first-child, +.ui.styled.accordion .accordion .title:first-child { + border-top: none; +} + + +/* Content */ +.ui.styled.accordion .content, +.ui.styled.accordion .accordion .content { + margin: @styledContentMargin; + padding: @styledContentPadding; +} +.ui.styled.accordion .accordion .content { + padding: @styledChildContentMargin; + padding: @styledChildContentPadding; +} + + +/* Hover */ +.ui.styled.accordion .title:hover, +.ui.styled.accordion .active.title, +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledTitleHoverBackground; + color: @styledTitleHoverColor; +} +.ui.styled.accordion .accordion .title:hover, +.ui.styled.accordion .accordion .active.title { + background: @styledHoverChildTitleBackground; + color: @styledHoverChildTitleColor; +} + + +/* Active */ +.ui.styled.accordion .active.title { + background: @styledActiveTitleBackground; + color: @styledActiveTitleColor; +} +.ui.styled.accordion .accordion .active.title { + background: @styledActiveChildTitleBackground; + color: @styledActiveChildTitleColor; +} + + +/******************************* + States +*******************************/ + +/*-------------- + Active +---------------*/ + +.ui.accordion .active.content, +.ui.accordion .accordion .active.content { + display: block; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fluid +---------------*/ + +.ui.fluid.accordion, +.ui.fluid.accordion .accordion { + width: 100%; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.accordion .title:not(.ui) { + color: @invertedTitleColor; +} + +.loadUIOverrides(); + diff --git a/static/semantic/src/definitions/modules/checkbox.js b/static/semantic/src/definitions/modules/checkbox.js new file mode 100755 index 0000000..f88c4d0 --- /dev/null +++ b/static/semantic/src/definitions/modules/checkbox.js @@ -0,0 +1,831 @@ +/*! + * # Semantic UI - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.checkbox = 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.checkbox.settings, parameters), + + className = settings.className, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $label = $(this).children(selector.label), + $input = $(this).children(selector.input), + input = $input[0], + + initialLoad = false, + shortcutPressed = false, + instance = $module.data(moduleNamespace), + + observer, + element = this, + module + ; + + module = { + + initialize: function() { + module.verbose('Initializing checkbox', settings); + + module.create.label(); + module.bind.events(); + + module.set.tabbable(); + module.hide.input(); + + module.observeChanges(); + module.instantiate(); + module.setup(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying module'); + module.unbind.events(); + module.show.input(); + $module.removeData(moduleNamespace); + }, + + fix: { + reference: function() { + if( $module.is(selector.input) ) { + module.debug('Behavior called on adjusting invoked element'); + $module = $module.closest(selector.checkbox); + module.refresh(); + } + } + }, + + setup: function() { + module.set.initialLoad(); + if( module.is.indeterminate() ) { + module.debug('Initial value is indeterminate'); + module.indeterminate(); + } + else if( module.is.checked() ) { + module.debug('Initial value is checked'); + module.check(); + } + else { + module.debug('Initial value is unchecked'); + module.uncheck(); + } + module.remove.initialLoad(); + }, + + refresh: function() { + $label = $module.children(selector.label); + $input = $module.children(selector.input); + input = $input[0]; + }, + + hide: { + input: function() { + module.verbose('Modifying z-index to be unselectable'); + $input.addClass(className.hidden); + } + }, + show: { + input: function() { + module.verbose('Modifying z-index to be selectable'); + $input.removeClass(className.hidden); + } + }, + + observeChanges: function() { + if('MutationObserver' in window) { + observer = new MutationObserver(function(mutations) { + module.debug('DOM tree modified, updating selector cache'); + module.refresh(); + }); + observer.observe(element, { + childList : true, + subtree : true + }); + module.debug('Setting up mutation observer', observer); + } + }, + + attachEvents: function(selector, event) { + var + $element = $(selector) + ; + event = $.isFunction(module[event]) + ? module[event] + : module.toggle + ; + if($element.length > 0) { + module.debug('Attaching checkbox events to element', selector, event); + $element + .on('click' + eventNamespace, event) + ; + } + else { + module.error(error.notFound); + } + }, + + event: { + click: function(event) { + var + $target = $(event.target) + ; + if( $target.is(selector.input) ) { + module.verbose('Using default check action on initialized checkbox'); + return; + } + if( $target.is(selector.link) ) { + module.debug('Clicking link inside checkbox, skipping toggle'); + return; + } + module.toggle(); + $input.focus(); + event.preventDefault(); + }, + keydown: function(event) { + var + key = event.which, + keyCode = { + enter : 13, + space : 32, + escape : 27 + } + ; + if(key == keyCode.escape) { + module.verbose('Escape key pressed blurring field'); + $input.blur(); + shortcutPressed = true; + } + else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) { + module.verbose('Enter/space key pressed, toggling checkbox'); + module.toggle(); + shortcutPressed = true; + } + else { + shortcutPressed = false; + } + }, + keyup: function(event) { + if(shortcutPressed) { + event.preventDefault(); + } + } + }, + + check: function() { + if( !module.should.allowCheck() ) { + return; + } + module.debug('Checking checkbox', $input); + module.set.checked(); + if( !module.should.ignoreCallbacks() ) { + settings.onChecked.call(input); + settings.onChange.call(input); + } + }, + + uncheck: function() { + if( !module.should.allowUncheck() ) { + return; + } + module.debug('Unchecking checkbox'); + module.set.unchecked(); + if( !module.should.ignoreCallbacks() ) { + settings.onUnchecked.call(input); + settings.onChange.call(input); + } + }, + + indeterminate: function() { + if( module.should.allowIndeterminate() ) { + module.debug('Checkbox is already indeterminate'); + return; + } + module.debug('Making checkbox indeterminate'); + module.set.indeterminate(); + if( !module.should.ignoreCallbacks() ) { + settings.onIndeterminate.call(input); + settings.onChange.call(input); + } + }, + + determinate: function() { + if( module.should.allowDeterminate() ) { + module.debug('Checkbox is already determinate'); + return; + } + module.debug('Making checkbox determinate'); + module.set.determinate(); + if( !module.should.ignoreCallbacks() ) { + settings.onDeterminate.call(input); + settings.onChange.call(input); + } + }, + + enable: function() { + if( module.is.enabled() ) { + module.debug('Checkbox is already enabled'); + return; + } + module.debug('Enabling checkbox'); + module.set.enabled(); + settings.onEnable.call(input); + // preserve legacy callbacks + settings.onEnabled.call(input); + }, + + disable: function() { + if( module.is.disabled() ) { + module.debug('Checkbox is already disabled'); + return; + } + module.debug('Disabling checkbox'); + module.set.disabled(); + settings.onDisable.call(input); + // preserve legacy callbacks + settings.onDisabled.call(input); + }, + + get: { + radios: function() { + var + name = module.get.name() + ; + return $('input[name="' + name + '"]').closest(selector.checkbox); + }, + otherRadios: function() { + return module.get.radios().not($module); + }, + name: function() { + return $input.attr('name'); + } + }, + + is: { + initialLoad: function() { + return initialLoad; + }, + radio: function() { + return ($input.hasClass(className.radio) || $input.attr('type') == 'radio'); + }, + indeterminate: function() { + return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate'); + }, + checked: function() { + return $input.prop('checked') !== undefined && $input.prop('checked'); + }, + disabled: function() { + return $input.prop('disabled') !== undefined && $input.prop('disabled'); + }, + enabled: function() { + return !module.is.disabled(); + }, + determinate: function() { + return !module.is.indeterminate(); + }, + unchecked: function() { + return !module.is.checked(); + } + }, + + should: { + allowCheck: function() { + if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow check, checkbox is already checked'); + return false; + } + if(settings.beforeChecked.apply(input) === false) { + module.debug('Should not allow check, beforeChecked cancelled'); + return false; + } + return true; + }, + allowUncheck: function() { + if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) { + module.debug('Should not allow uncheck, checkbox is already unchecked'); + return false; + } + if(settings.beforeUnchecked.apply(input) === false) { + module.debug('Should not allow uncheck, beforeUnchecked cancelled'); + return false; + } + return true; + }, + allowIndeterminate: function() { + if(module.is.indeterminate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow indeterminate, checkbox is already indeterminate'); + return false; + } + if(settings.beforeIndeterminate.apply(input) === false) { + module.debug('Should not allow indeterminate, beforeIndeterminate cancelled'); + return false; + } + return true; + }, + allowDeterminate: function() { + if(module.is.determinate() && !module.should.forceCallbacks() ) { + module.debug('Should not allow determinate, checkbox is already determinate'); + return false; + } + if(settings.beforeDeterminate.apply(input) === false) { + module.debug('Should not allow determinate, beforeDeterminate cancelled'); + return false; + } + return true; + }, + forceCallbacks: function() { + return (module.is.initialLoad() && settings.fireOnInit); + }, + ignoreCallbacks: function() { + return (initialLoad && !settings.fireOnInit); + } + }, + + can: { + change: function() { + return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') ); + }, + uncheck: function() { + return (typeof settings.uncheckable === 'boolean') + ? settings.uncheckable + : !module.is.radio() + ; + } + }, + + set: { + initialLoad: function() { + initialLoad = true; + }, + checked: function() { + module.verbose('Setting class to checked'); + $module + .removeClass(className.indeterminate) + .addClass(className.checked) + ; + if( module.is.radio() ) { + module.uncheckOthers(); + } + if(!module.is.indeterminate() && module.is.checked()) { + module.debug('Input is already checked, skipping input property change'); + return; + } + module.verbose('Setting state to checked', input); + $input + .prop('indeterminate', false) + .prop('checked', true) + ; + module.trigger.change(); + }, + unchecked: function() { + module.verbose('Removing checked class'); + $module + .removeClass(className.indeterminate) + .removeClass(className.checked) + ; + if(!module.is.indeterminate() && module.is.unchecked() ) { + module.debug('Input is already unchecked'); + return; + } + module.debug('Setting state to unchecked'); + $input + .prop('indeterminate', false) + .prop('checked', false) + ; + module.trigger.change(); + }, + indeterminate: function() { + module.verbose('Setting class to indeterminate'); + $module + .addClass(className.indeterminate) + ; + if( module.is.indeterminate() ) { + module.debug('Input is already indeterminate, skipping input property change'); + return; + } + module.debug('Setting state to indeterminate'); + $input + .prop('indeterminate', true) + ; + module.trigger.change(); + }, + determinate: function() { + module.verbose('Removing indeterminate class'); + $module + .removeClass(className.indeterminate) + ; + if( module.is.determinate() ) { + module.debug('Input is already determinate, skipping input property change'); + return; + } + module.debug('Setting state to determinate'); + $input + .prop('indeterminate', false) + ; + }, + disabled: function() { + module.verbose('Setting class to disabled'); + $module + .addClass(className.disabled) + ; + if( module.is.disabled() ) { + module.debug('Input is already disabled, skipping input property change'); + return; + } + module.debug('Setting state to disabled'); + $input + .prop('disabled', 'disabled') + ; + module.trigger.change(); + }, + enabled: function() { + module.verbose('Removing disabled class'); + $module.removeClass(className.disabled); + if( module.is.enabled() ) { + module.debug('Input is already enabled, skipping input property change'); + return; + } + module.debug('Setting state to enabled'); + $input + .prop('disabled', false) + ; + module.trigger.change(); + }, + tabbable: function() { + module.verbose('Adding tabindex to checkbox'); + if( $input.attr('tabindex') === undefined) { + $input.attr('tabindex', 0); + } + } + }, + + remove: { + initialLoad: function() { + initialLoad = false; + } + }, + + trigger: { + change: function() { + var + events = document.createEvent('HTMLEvents'), + inputElement = $input[0] + ; + if(inputElement) { + module.verbose('Triggering native change event'); + events.initEvent('change', true, false); + inputElement.dispatchEvent(events); + } + } + }, + + + create: { + label: function() { + if($input.prevAll(selector.label).length > 0) { + $input.prev(selector.label).detach().insertAfter($input); + module.debug('Moving existing label', $label); + } + else if( !module.has.label() ) { + $label = $('').insertAfter($input); + module.debug('Creating label', $label); + } + } + }, + + has: { + label: function() { + return ($label.length > 0); + } + }, + + bind: { + events: function() { + module.verbose('Attaching checkbox events'); + $module + .on('click' + eventNamespace, module.event.click) + .on('keydown' + eventNamespace, selector.input, module.event.keydown) + .on('keyup' + eventNamespace, selector.input, module.event.keyup) + ; + } + }, + + unbind: { + events: function() { + module.debug('Removing events'); + $module + .off(eventNamespace) + ; + } + }, + + uncheckOthers: function() { + var + $radios = module.get.otherRadios() + ; + module.debug('Unchecking other radios', $radios); + $radios.removeClass(className.checked); + }, + + toggle: function() { + if( !module.can.change() ) { + if(!module.is.radio()) { + module.debug('Checkbox is read-only or disabled, ignoring toggle'); + } + return; + } + if( module.is.indeterminate() || module.is.unchecked() ) { + module.debug('Currently unchecked'); + module.check(); + } + else if( module.is.checked() && module.can.uncheck() ) { + module.debug('Currently checked'); + module.uncheck(); + } + }, + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + 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.silent && 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.silent && 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() { + if(!settings.silent) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + 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 { + module.error(error.method, query); + 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) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.checkbox.settings = { + + name : 'Checkbox', + namespace : 'checkbox', + + silent : false, + debug : false, + verbose : true, + performance : true, + + // delegated event context + uncheckable : 'auto', + fireOnInit : false, + + onChange : function(){}, + + beforeChecked : function(){}, + beforeUnchecked : function(){}, + beforeDeterminate : function(){}, + beforeIndeterminate : function(){}, + + onChecked : function(){}, + onUnchecked : function(){}, + + onDeterminate : function() {}, + onIndeterminate : function() {}, + + onEnable : function(){}, + onDisable : function(){}, + + // preserve misspelled callbacks (will be removed in 3.0) + onEnabled : function(){}, + onDisabled : function(){}, + + className : { + checked : 'checked', + indeterminate : 'indeterminate', + disabled : 'disabled', + hidden : 'hidden', + radio : 'radio', + readOnly : 'read-only' + }, + + error : { + method : 'The method you called is not defined' + }, + + selector : { + checkbox : '.ui.checkbox', + label : 'label, .box', + input : 'input[type="checkbox"], input[type="radio"]', + link : 'a[href]' + } + +}; + +})( jQuery, window, document ); diff --git a/static/semantic/src/definitions/modules/checkbox.less b/static/semantic/src/definitions/modules/checkbox.less new file mode 100755 index 0000000..98f7746 --- /dev/null +++ b/static/semantic/src/definitions/modules/checkbox.less @@ -0,0 +1,598 @@ +/*! + * # Semantic UI - Checkbox + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'checkbox'; + +@import (multiple) '../../theme.config'; + +/******************************* + Checkbox +*******************************/ + + +/*-------------- + Content +---------------*/ + +.ui.checkbox { + position: relative; + display: inline-block; + backface-visibility: hidden; + outline: none; + vertical-align: baseline; + font-style: normal; + + min-height: @checkboxSize; + font-size: @medium; + line-height: @checkboxLineHeight; + min-width: @checkboxSize; +} + +/* HTML Checkbox */ +.ui.checkbox input[type="checkbox"], +.ui.checkbox input[type="radio"] { + cursor: pointer; + position: absolute; + top: 0px; + left: 0px; + opacity: 0 !important; + outline: none; + z-index: 3; + width: @checkboxSize; + height: @checkboxSize; +} + + +/*-------------- + Box +---------------*/ + + +.ui.checkbox .box, +.ui.checkbox label { + cursor: auto; + position: relative; + display: block; + padding-left: @labelDistance; + outline: none; + font-size: @labelFontSize; +} + +.ui.checkbox .box:before, +.ui.checkbox label:before { + position: absolute; + top: 0px; + left: 0px; + + width: @checkboxSize; + height: @checkboxSize; + content: ''; + + background: @checkboxBackground; + border-radius: @checkboxBorderRadius; + + transition: @checkboxTransition; + border: @checkboxBorder; +} + +/*-------------- + Checkmark +---------------*/ + +.ui.checkbox .box:after, +.ui.checkbox label:after { + position: absolute; + font-size: @checkboxCheckFontSize; + top: @checkboxCheckTop; + left: @checkboxCheckLeft; + width: @checkboxCheckSize; + height: @checkboxCheckSize; + text-align: center; + + opacity: 0; + color: @checkboxColor; + transition: @checkboxTransition; +} + +/*-------------- + Label +---------------*/ + +/* Inside */ +.ui.checkbox label, +.ui.checkbox + label { + color: @labelColor; + transition: @labelTransition; +} + +/* Outside */ +.ui.checkbox + label { + vertical-align: middle; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Hover +---------------*/ + +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before { + background: @checkboxHoverBackground; + border-color: @checkboxHoverBorderColor; +} +.ui.checkbox label:hover, +.ui.checkbox + label:hover { + color: @labelHoverColor; +} + +/*-------------- + Down +---------------*/ + +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { + background: @checkboxPressedBackground; + border-color: @checkboxPressedBorderColor; +} +.ui.checkbox .box:active::after, +.ui.checkbox label:active::after { + color: @checkboxPressedColor; +} +.ui.checkbox input:active ~ label { + color: @labelPressedColor; +} + +/*-------------- + Focus +---------------*/ + +.ui.checkbox input:focus ~ .box:before, +.ui.checkbox input:focus ~ label:before { + background: @checkboxFocusBackground; + border-color: @checkboxFocusBorderColor; +} +.ui.checkbox input:focus ~ .box:after, +.ui.checkbox input:focus ~ label:after { + color: @checkboxFocusCheckColor; +} +.ui.checkbox input:focus ~ label { + color: @labelFocusColor; +} + +/*-------------- + Active +---------------*/ + +.ui.checkbox input:checked ~ .box:before, +.ui.checkbox input:checked ~ label:before { + background: @checkboxActiveBackground; + border-color: @checkboxActiveBorderColor; +} +.ui.checkbox input:checked ~ .box:after, +.ui.checkbox input:checked ~ label:after { + opacity: @checkboxActiveCheckOpacity; + color: @checkboxActiveCheckColor; +} + +/*-------------- + Indeterminate +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:before { + background: @checkboxIndeterminateBackground; + border-color: @checkboxIndeterminateBorderColor; +} +.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate ~ label:after { + opacity: @checkboxIndeterminateCheckOpacity; + color: @checkboxIndeterminateCheckColor; +} + +/*-------------- + Active Focus +---------------*/ + +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, +.ui.checkbox input:checked:focus ~ .box:before, +.ui.checkbox input:checked:focus ~ label:before { + background: @checkboxActiveFocusBackground; + border-color: @checkboxActiveFocusBorderColor; +} +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after, +.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, +.ui.checkbox input:checked:focus ~ .box:after, +.ui.checkbox input:checked:focus ~ label:after { + color: @checkboxActiveFocusCheckColor; +} + + +/*-------------- + Read-Only +---------------*/ + +.ui.read-only.checkbox, +.ui.read-only.checkbox label { + cursor: default; +} + + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.checkbox .box:after, +.ui.disabled.checkbox label, +.ui.checkbox input[disabled] ~ .box:after, +.ui.checkbox input[disabled] ~ label { + cursor: default !important; + opacity: @disabledCheckboxOpacity; + color: @disabledCheckboxLabelColor; +} + +/*-------------- + Hidden +---------------*/ + +/* Initialized checkbox moves input below element + to prevent manually triggering */ +.ui.checkbox input.hidden { + z-index: -1; +} + +/* Selectable Label */ +.ui.checkbox input.hidden + label { + cursor: pointer; + user-select: none; +} + + +/******************************* + Types +*******************************/ + + +/*-------------- + Radio +---------------*/ + +.ui.radio.checkbox { + min-height: @radioSize; +} + +.ui.radio.checkbox .box, +.ui.radio.checkbox label { + padding-left: @radioLabelDistance; +} + +/* Box */ +.ui.radio.checkbox .box:before, +.ui.radio.checkbox label:before { + content: ''; + transform: none; + + width: @radioSize; + height: @radioSize; + border-radius: @circularRadius; + top: @radioTop; + left: @radioLeft; +} + +/* Bullet */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + border: none; + content: '' !important; + width: @radioSize; + height: @radioSize; + line-height: @radioSize; +} + +/* Radio Checkbox */ +.ui.radio.checkbox .box:after, +.ui.radio.checkbox label:after { + top: @bulletTop; + left: @bulletLeft; + width: @radioSize; + height: @radioSize; + border-radius: @bulletRadius; + transform: scale(@bulletScale); + background-color: @bulletColor; +} + +/* Focus */ +.ui.radio.checkbox input:focus ~ .box:before, +.ui.radio.checkbox input:focus ~ label:before { + background-color: @radioFocusBackground; +} +.ui.radio.checkbox input:focus ~ .box:after, +.ui.radio.checkbox input:focus ~ label:after { + background-color: @radioFocusBulletColor; +} + +/* Indeterminate */ +.ui.radio.checkbox input:indeterminate ~ .box:after, +.ui.radio.checkbox input:indeterminate ~ label:after { + opacity: 0; +} + +/* Active */ +.ui.radio.checkbox input:checked ~ .box:before, +.ui.radio.checkbox input:checked ~ label:before { + background-color: @radioActiveBackground; +} +.ui.radio.checkbox input:checked ~ .box:after, +.ui.radio.checkbox input:checked ~ label:after { + background-color: @radioActiveBulletColor; +} + +/* Active Focus */ +.ui.radio.checkbox input:focus:checked ~ .box:before, +.ui.radio.checkbox input:focus:checked ~ label:before { + background-color: @radioActiveFocusBackground; +} +.ui.radio.checkbox input:focus:checked ~ .box:after, +.ui.radio.checkbox input:focus:checked ~ label:after { + background-color: @radioActiveFocusBulletColor; +} + +/*-------------- + Slider +---------------*/ + +.ui.slider.checkbox { + min-height: @sliderHeight; +} + +/* Input */ +.ui.slider.checkbox input { + width: @sliderWidth; + height: @sliderHeight; +} + +/* Label */ +.ui.slider.checkbox .box, +.ui.slider.checkbox label { + padding-left: @sliderLabelDistance; + line-height: @sliderLabelLineHeight; + color: @sliderOffLabelColor; +} + +/* Line */ +.ui.slider.checkbox .box:before, +.ui.slider.checkbox label:before { + display: block; + position: absolute; + content: ''; + transform: none; + border: none !important; + left: 0em; + z-index: 1; + + top: @sliderLineVerticalOffset; + + background-color: @sliderLineColor; + width: @sliderLineWidth; + height: @sliderLineHeight; + + transform: none; + border-radius: @sliderLineRadius; + transition: @sliderLineTransition; + +} + +/* Handle */ +.ui.slider.checkbox .box:after, +.ui.slider.checkbox label:after { + background: @handleBackground; + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + + border: none; + box-shadow: @handleBoxShadow; + width: @sliderHandleSize; + height: @sliderHandleSize; + top: @sliderHandleOffset; + left: 0em; + transform: none; + + border-radius: @circularRadius; + transition: @sliderHandleTransition; +} + +/* Focus */ +.ui.slider.checkbox input:focus ~ .box:before, +.ui.slider.checkbox input:focus ~ label:before { + background-color: @toggleFocusColor; + border: none; +} + +/* Hover */ +.ui.slider.checkbox .box:hover, +.ui.slider.checkbox label:hover { + color: @sliderHoverLabelColor; +} +.ui.slider.checkbox .box:hover::before, +.ui.slider.checkbox label:hover::before { + background: @sliderHoverLaneBackground; +} + +/* Active */ +.ui.slider.checkbox input:checked ~ .box, +.ui.slider.checkbox input:checked ~ label { + color: @sliderOnLabelColor !important; +} +.ui.slider.checkbox input:checked ~ .box:before, +.ui.slider.checkbox input:checked ~ label:before { + background-color: @sliderOnLineColor !important; +} +.ui.slider.checkbox input:checked ~ .box:after, +.ui.slider.checkbox input:checked ~ label:after { + left: @sliderTravelDistance; +} + +/* Active Focus */ +.ui.slider.checkbox input:focus:checked ~ .box, +.ui.slider.checkbox input:focus:checked ~ label { + color: @sliderOnFocusLabelColor !important; +} +.ui.slider.checkbox input:focus:checked ~ .box:before, +.ui.slider.checkbox input:focus:checked ~ label:before { + background-color: @sliderOnFocusLineColor !important; +} + + +/*-------------- + Toggle +---------------*/ + +.ui.toggle.checkbox { + min-height: @toggleHeight; +} + +/* Input */ +.ui.toggle.checkbox input { + width: @toggleWidth; + height: @toggleHeight; +} + +/* Label */ +.ui.toggle.checkbox .box, +.ui.toggle.checkbox label { + min-height: @toggleHandleSize; + padding-left: @toggleLabelDistance; + color: @toggleOffLabelColor; +} +.ui.toggle.checkbox label { + padding-top: @toggleLabelOffset; +} + +/* Switch */ +.ui.toggle.checkbox .box:before, +.ui.toggle.checkbox label:before { + display: block; + position: absolute; + content: ''; + z-index: 1; + transform: none; + border: none; + + top: @toggleLaneVerticalOffset; + + background: @toggleLaneBackground; + box-shadow: @toggleLaneBoxShadow; + width: @toggleLaneWidth; + height: @toggleLaneHeight; + border-radius: @toggleHandleRadius; +} + +/* Handle */ +.ui.toggle.checkbox .box:after, +.ui.toggle.checkbox label:after { + background: @handleBackground; + position: absolute; + content: '' !important; + opacity: 1; + z-index: 2; + + border: none; + box-shadow: @handleBoxShadow; + width: @toggleHandleSize; + height: @toggleHandleSize; + top: @toggleHandleOffset; + left: 0em; + + border-radius: @circularRadius; + transition: @toggleHandleTransition; +} + +.ui.toggle.checkbox input ~ .box:after, +.ui.toggle.checkbox input ~ label:after { + left: @toggleOffOffset; + box-shadow: @toggleOffHandleBoxShadow; +} + +/* Focus */ +.ui.toggle.checkbox input:focus ~ .box:before, +.ui.toggle.checkbox input:focus ~ label:before { + background-color: @toggleFocusColor; + border: none; +} + +/* Hover */ +.ui.toggle.checkbox .box:hover::before, +.ui.toggle.checkbox label:hover::before { + background-color: @toggleHoverColor; + border: none; +} + +/* Active */ +.ui.toggle.checkbox input:checked ~ .box, +.ui.toggle.checkbox input:checked ~ label { + color: @toggleOnLabelColor !important; +} +.ui.toggle.checkbox input:checked ~ .box:before, +.ui.toggle.checkbox input:checked ~ label:before { + background-color: @toggleOnLaneColor !important; +} +.ui.toggle.checkbox input:checked ~ .box:after, +.ui.toggle.checkbox input:checked ~ label:after { + left: @toggleOnOffset; + box-shadow: @toggleOnHandleBoxShadow; +} + + +/* Active Focus */ +.ui.toggle.checkbox input:focus:checked ~ .box, +.ui.toggle.checkbox input:focus:checked ~ label { + color: @toggleOnFocusLabelColor !important; +} +.ui.toggle.checkbox input:focus:checked ~ .box:before, +.ui.toggle.checkbox input:focus:checked ~ label:before { + background-color: @toggleOnFocusLaneColor !important; +} + +/******************************* + Variations +*******************************/ + +/*-------------- + Fitted +---------------*/ + +.ui.fitted.checkbox .box, +.ui.fitted.checkbox label { + padding-left: 0em !important; +} + +.ui.fitted.toggle.checkbox, +.ui.fitted.toggle.checkbox { + width: @toggleWidth; +} + +.ui.fitted.slider.checkbox, +.ui.fitted.slider.checkbox { + width: @sliderWidth; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/modules/dimmer.js b/static/semantic/src/definitions/modules/dimmer.js new file mode 100755 index 0000000..49bf63e --- /dev/null +++ b/static/semantic/src/definitions/modules/dimmer.js @@ -0,0 +1,733 @@ +/*! + * # Semantic UI - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.dimmer = function(parameters) { + var + $allModules = $(this), + + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.dimmer.settings, parameters) + : $.extend({}, $.fn.dimmer.settings), + + selector = settings.selector, + namespace = settings.namespace, + className = settings.className, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + moduleSelector = $allModules.selector || '', + + clickEvent = ('ontouchstart' in document.documentElement) + ? 'touchstart' + : 'click', + + $module = $(this), + $dimmer, + $dimmable, + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + preinitialize: function() { + if( module.is.dimmer() ) { + + $dimmable = $module.parent(); + $dimmer = $module; + } + else { + $dimmable = $module; + if( module.has.dimmer() ) { + if(settings.dimmerName) { + $dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName); + } + else { + $dimmer = $dimmable.find(selector.dimmer); + } + } + else { + $dimmer = module.create(); + } + } + }, + + initialize: function() { + module.debug('Initializing dimmer', settings); + + module.bind.events(); + module.set.dimmable(); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of module', module); + instance = module; + $module + .data(moduleNamespace, instance) + ; + }, + + destroy: function() { + module.verbose('Destroying previous module', $dimmer); + module.unbind.events(); + module.remove.variation(); + $dimmable + .off(eventNamespace) + ; + }, + + bind: { + events: function() { + if(settings.on == 'hover') { + $dimmable + .on('mouseenter' + eventNamespace, module.show) + .on('mouseleave' + eventNamespace, module.hide) + ; + } + else if(settings.on == 'click') { + $dimmable + .on(clickEvent + eventNamespace, module.toggle) + ; + } + if( module.is.page() ) { + module.debug('Setting as a page dimmer', $dimmable); + module.set.pageDimmer(); + } + + if( module.is.closable() ) { + module.verbose('Adding dimmer close event', $dimmer); + $dimmable + .on(clickEvent + eventNamespace, selector.dimmer, module.event.click) + ; + } + } + }, + + unbind: { + events: function() { + $module + .removeData(moduleNamespace) + ; + $dimmable + .off(eventNamespace) + ; + } + }, + + event: { + click: function(event) { + module.verbose('Determining if event occured on dimmer', event); + if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { + module.hide(); + event.stopImmediatePropagation(); + } + }, + }, + + addContent: function(element) { + var + $content = $(element) + ; + module.debug('Add content to dimmer', $content); + if($content.parent()[0] !== $dimmer[0]) { + $content.detach().appendTo($dimmer); + } + }, + + create: function() { + var + $element = $( settings.template.dimmer() ) + ; + if(settings.dimmerName) { + module.debug('Creating named dimmer', settings.dimmerName); + $element.addClass(settings.dimmerName); + } + $element + .appendTo($dimmable) + ; + return $element; + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.debug('Showing dimmer', $dimmer, settings); + module.set.variation(); + if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) { + module.animate.show(callback); + settings.onShow.call(element); + settings.onChange.call(element); + } + else { + module.debug('Dimmer is already shown or disabled'); + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.dimmed() || module.is.animating() ) { + module.debug('Hiding dimmer', $dimmer); + module.animate.hide(callback); + settings.onHide.call(element); + settings.onChange.call(element); + } + else { + module.debug('Dimmer is not visible'); + } + }, + + toggle: function() { + module.verbose('Toggling dimmer visibility', $dimmer); + if( !module.is.dimmed() ) { + module.show(); + } + else { + module.hide(); + } + }, + + animate: { + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + if(settings.useFlex) { + module.debug('Using flex dimmer'); + module.remove.legacy(); + } + else { + module.debug('Using legacy non-flex dimmer'); + module.set.legacy(); + } + if(settings.opacity !== 'auto') { + module.set.opacity(); + } + $dimmer + .transition({ + displayType : settings.useFlex + ? 'flex' + : 'block', + animation : settings.transition + ' in', + queue : false, + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { + module.set.dimmed(); + }, + onComplete : function() { + module.set.active(); + callback(); + } + }) + ; + } + else { + module.verbose('Showing dimmer animation with javascript'); + module.set.dimmed(); + if(settings.opacity == 'auto') { + settings.opacity = 0.8; + } + $dimmer + .stop() + .css({ + opacity : 0, + width : '100%', + height : '100%' + }) + .fadeTo(module.get.duration(), settings.opacity, function() { + $dimmer.removeAttr('style'); + module.set.active(); + callback(); + }) + ; + } + }, + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { + module.verbose('Hiding dimmer with css'); + $dimmer + .transition({ + displayType : settings.useFlex + ? 'flex' + : 'block', + animation : settings.transition + ' out', + queue : false, + duration : module.get.duration(), + useFailSafe : true, + onStart : function() { + module.remove.dimmed(); + }, + onComplete : function() { + module.remove.variation(); + module.remove.active(); + callback(); + } + }) + ; + } + else { + module.verbose('Hiding dimmer with javascript'); + module.remove.dimmed(); + $dimmer + .stop() + .fadeOut(module.get.duration(), function() { + module.remove.active(); + $dimmer.removeAttr('style'); + callback(); + }) + ; + } + } + }, + + get: { + dimmer: function() { + return $dimmer; + }, + duration: function() { + if(typeof settings.duration == 'object') { + if( module.is.active() ) { + return settings.duration.hide; + } + else { + return settings.duration.show; + } + } + return settings.duration; + } + }, + + has: { + dimmer: function() { + if(settings.dimmerName) { + return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0); + } + else { + return ( $module.find(selector.dimmer).length > 0 ); + } + } + }, + + is: { + active: function() { + return $dimmer.hasClass(className.active); + }, + animating: function() { + return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) ); + }, + closable: function() { + if(settings.closable == 'auto') { + if(settings.on == 'hover') { + return false; + } + return true; + } + return settings.closable; + }, + dimmer: function() { + return $module.hasClass(className.dimmer); + }, + dimmable: function() { + return $module.hasClass(className.dimmable); + }, + dimmed: function() { + return $dimmable.hasClass(className.dimmed); + }, + disabled: function() { + return $dimmable.hasClass(className.disabled); + }, + enabled: function() { + return !module.is.disabled(); + }, + page: function () { + return $dimmable.is('body'); + }, + pageDimmer: function() { + return $dimmer.hasClass(className.pageDimmer); + } + }, + + can: { + show: function() { + return !$dimmer.hasClass(className.disabled); + } + }, + + set: { + opacity: function(opacity) { + var + color = $dimmer.css('background-color'), + colorArray = color.split(','), + isRGB = (colorArray && colorArray.length == 3), + isRGBA = (colorArray && colorArray.length == 4) + ; + opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity; + if(isRGB || isRGBA) { + colorArray[3] = opacity + ')'; + color = colorArray.join(','); + } + else { + color = 'rgba(0, 0, 0, ' + opacity + ')'; + } + module.debug('Setting opacity to', opacity); + $dimmer.css('background-color', color); + }, + legacy: function() { + $dimmer.addClass(className.legacy); + }, + active: function() { + $dimmer.addClass(className.active); + }, + dimmable: function() { + $dimmable.addClass(className.dimmable); + }, + dimmed: function() { + $dimmable.addClass(className.dimmed); + }, + pageDimmer: function() { + $dimmer.addClass(className.pageDimmer); + }, + disabled: function() { + $dimmer.addClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.addClass(variation); + } + } + }, + + remove: { + active: function() { + $dimmer + .removeClass(className.active) + ; + }, + legacy: function() { + $dimmer.removeClass(className.legacy); + }, + dimmed: function() { + $dimmable.removeClass(className.dimmed); + }, + disabled: function() { + $dimmer.removeClass(className.disabled); + }, + variation: function(variation) { + variation = variation || settings.variation; + if(variation) { + $dimmer.removeClass(variation); + } + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + 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.silent && 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.silent && 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() { + if(!settings.silent) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + 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($allModules.length > 1) { + title += ' ' + '(' + $allModules.length + ')'; + } + 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 { + module.error(error.method, query); + 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; + } + }; + + module.preinitialize(); + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.dimmer.settings = { + + name : 'Dimmer', + namespace : 'dimmer', + + silent : false, + debug : false, + verbose : false, + performance : true, + + // whether should use flex layout + useFlex : true, + + // name to distinguish between multiple dimmers in context + dimmerName : false, + + // whether to add a variation type + variation : false, + + // whether to bind close events + closable : 'auto', + + // whether to use css animations + useCSS : true, + + // css animation to use + transition : 'fade', + + // event to bind to + on : false, + + // overriding opacity value + opacity : 'auto', + + // transition durations + duration : { + show : 500, + hide : 500 + }, + + onChange : function(){}, + onShow : function(){}, + onHide : function(){}, + + error : { + method : 'The method you called is not defined.' + }, + + className : { + active : 'active', + animating : 'animating', + dimmable : 'dimmable', + dimmed : 'dimmed', + dimmer : 'dimmer', + disabled : 'disabled', + hide : 'hide', + legacy : 'legacy', + pageDimmer : 'page', + show : 'show' + }, + + selector: { + dimmer : '> .ui.dimmer', + content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' + }, + + template: { + dimmer: function() { + return $('

').attr('class', 'ui dimmer'); + } + } + +}; + +})( jQuery, window, document ); diff --git a/static/semantic/src/definitions/modules/dimmer.less b/static/semantic/src/definitions/modules/dimmer.less new file mode 100755 index 0000000..fb0ce54 --- /dev/null +++ b/static/semantic/src/definitions/modules/dimmer.less @@ -0,0 +1,231 @@ +/*! + * # Semantic UI - Dimmer + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'dimmer'; + +@import (multiple) '../../theme.config'; + +/******************************* + Dimmer +*******************************/ + +.dimmable:not(body) { + position: @dimmablePosition; +} + +.ui.dimmer { + display: none; + position: @dimmerPosition; + top: 0em !important; + left: 0em !important; + + width: 100%; + height: 100%; + + text-align: @textAlign; + vertical-align: @verticalAlign; + padding: @padding; + + background-color: @backgroundColor; + opacity: @hiddenOpacity; + line-height: @lineHeight; + + animation-fill-mode: both; + animation-duration: @duration; + transition: @transition; + + flex-direction: column; + align-items: center; + justify-content: center; + + user-select: none; + will-change: opacity; + z-index: @zIndex; +} + +/* Dimmer Content */ +.ui.dimmer > .content { + user-select: text; + color: @textColor; +} + + +/* Loose Coupling */ +.ui.segment > .ui.dimmer { + border-radius: inherit !important; +} + +/* Scrollbars */ +.addScrollbars() when (@useCustomScrollbars) { + .ui.dimmer:not(.inverted)::-webkit-scrollbar-track { + background: @trackInvertedBackground; + } + .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb { + background: @thumbInvertedBackground; + } + .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:window-inactive { + background: @thumbInvertedInactiveBackground; + } + .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover { + background: @thumbInvertedHoverBackground; + } +} +.addScrollbars(); + +/******************************* + States +*******************************/ + +/* Animating */ +.animating.dimmable:not(body), +.dimmed.dimmable:not(body) { + overflow: @overflow; +} + +/* Animating / Active / Visible */ +.dimmed.dimmable > .ui.animating.dimmer, +.dimmed.dimmable > .ui.visible.dimmer, +.ui.active.dimmer { + display: flex; + opacity: @visibleOpacity; +} + +/* Disabled */ +.ui.disabled.dimmer { + width: 0 !important; + height: 0 !important; +} + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Legacy +---------------*/ + +/* Animating / Active / Visible */ +.dimmed.dimmable > .ui.animating.legacy.dimmer, +.dimmed.dimmable > .ui.visible.legacy.dimmer, +.ui.active.legacy.dimmer { + display: block; +} + +/*-------------- + Alignment +---------------*/ + +.ui[class*="top aligned"].dimmer { + justify-content: flex-start; +} +.ui[class*="bottom aligned"].dimmer { + justify-content: flex-end; +} + +/*-------------- + Page +---------------*/ + +.ui.page.dimmer { + position: @pageDimmerPosition; + transform-style: @transformStyle; + perspective: @perspective; + transform-origin: center center; +} + +body.animating.in.dimmable, +body.dimmed.dimmable { + overflow: hidden; +} + +body.dimmable > .dimmer { + position: fixed; +} + +/*-------------- + Blurring +---------------*/ + +.blurring.dimmable > :not(.dimmer) { + filter: @blurredStartFilter; + transition: @blurredTransition; +} +.blurring.dimmed.dimmable > :not(.dimmer) { + filter: @blurredEndFilter; +} + +/* Dimmer Color */ +.blurring.dimmable > .dimmer { + background-color: @blurredBackgroundColor; +} +.blurring.dimmable > .inverted.dimmer { + background-color: @blurredInvertedBackgroundColor; +} + +/*-------------- + Aligned +---------------*/ + +.ui.dimmer > .top.aligned.content > * { + vertical-align: top; +} +.ui.dimmer > .bottom.aligned.content > * { + vertical-align: bottom; +} + +/*-------------- + Inverted +---------------*/ + +.ui.inverted.dimmer { + background-color: @invertedBackgroundColor; +} +.ui.inverted.dimmer > .content > * { + color: @invertedTextColor; +} + +/*-------------- + Simple +---------------*/ + +/* Displays without javascript */ +.ui.simple.dimmer { + display: block; + overflow: hidden; + opacity: 1; + width: 0%; + height: 0%; + z-index: -100; + background-color: @simpleStartBackgroundColor; +} +.dimmed.dimmable > .ui.simple.dimmer { + overflow: visible; + opacity: 1; + width: 100%; + height: 100%; + background-color: @simpleEndBackgroundColor; + z-index: @simpleZIndex; +} + +.ui.simple.inverted.dimmer { + background-color: @simpleInvertedStartBackgroundColor; +} +.dimmed.dimmable > .ui.simple.inverted.dimmer { + background-color: @simpleInvertedEndBackgroundColor; +} + +.loadUIOverrides(); diff --git a/static/semantic/src/definitions/modules/dropdown.js b/static/semantic/src/definitions/modules/dropdown.js new file mode 100755 index 0000000..04da799 --- /dev/null +++ b/static/semantic/src/definitions/modules/dropdown.js @@ -0,0 +1,3955 @@ +/*! + * # Semantic UI - Dropdown + * http://github.com/semantic-org/semantic-ui/ + * + * + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ($, window, document, undefined) { + +'use strict'; + +window = (typeof window != 'undefined' && window.Math == Math) + ? window + : (typeof self != 'undefined' && self.Math == Math) + ? self + : Function('return this')() +; + +$.fn.dropdown = function(parameters) { + var + $allModules = $(this), + $document = $(document), + + moduleSelector = $allModules.selector || '', + + hasTouch = ('ontouchstart' in document.documentElement), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function(elementIndex) { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.dropdown.settings, parameters) + : $.extend({}, $.fn.dropdown.settings), + + className = settings.className, + message = settings.message, + fields = settings.fields, + keys = settings.keys, + metadata = settings.metadata, + namespace = settings.namespace, + regExp = settings.regExp, + selector = settings.selector, + error = settings.error, + templates = settings.templates, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $context = $(settings.context), + $text = $module.find(selector.text), + $search = $module.find(selector.search), + $sizer = $module.find(selector.sizer), + $input = $module.find(selector.input), + $icon = $module.find(selector.icon), + + $combo = ($module.prev().find(selector.text).length > 0) + ? $module.prev().find(selector.text) + : $module.prev(), + + $menu = $module.children(selector.menu), + $item = $menu.find(selector.item), + + activated = false, + itemActivated = false, + internalChange = false, + element = this, + instance = $module.data(moduleNamespace), + + initialLoad, + pageLostFocus, + willRefocus, + elementNamespace, + id, + selectObserver, + menuObserver, + module + ; + + module = { + + initialize: function() { + module.debug('Initializing dropdown', settings); + + if( module.is.alreadySetup() ) { + module.setup.reference(); + } + else { + + module.setup.layout(); + + if(settings.values) { + module.change.values(settings.values); + } + + module.refreshData(); + + module.save.defaults(); + module.restore.selected(); + + module.create.id(); + module.bind.events(); + + module.observeChanges(); + module.instantiate(); + } + + }, + + instantiate: function() { + module.verbose('Storing instance of dropdown', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + destroy: function() { + module.verbose('Destroying previous dropdown', $module); + module.remove.tabbable(); + $module + .off(eventNamespace) + .removeData(moduleNamespace) + ; + $menu + .off(eventNamespace) + ; + $document + .off(elementNamespace) + ; + module.disconnect.menuObserver(); + module.disconnect.selectObserver(); + }, + + observeChanges: function() { + if('MutationObserver' in window) { + selectObserver = new MutationObserver(module.event.select.mutation); + menuObserver = new MutationObserver(module.event.menu.mutation); + module.debug('Setting up mutation observer', selectObserver, menuObserver); + module.observe.select(); + module.observe.menu(); + } + }, + + disconnect: { + menuObserver: function() { + if(menuObserver) { + menuObserver.disconnect(); + } + }, + selectObserver: function() { + if(selectObserver) { + selectObserver.disconnect(); + } + } + }, + observe: { + select: function() { + if(module.has.input()) { + selectObserver.observe($module[0], { + childList : true, + subtree : true + }); + } + }, + menu: function() { + if(module.has.menu()) { + menuObserver.observe($menu[0], { + childList : true, + subtree : true + }); + } + } + }, + + create: { + id: function() { + id = (Math.random().toString(16) + '000000000').substr(2, 8); + elementNamespace = '.' + id; + module.verbose('Creating unique id for element', id); + }, + userChoice: function(values) { + var + $userChoices, + $userChoice, + isUserValue, + html + ; + values = values || module.get.userValues(); + if(!values) { + return false; + } + values = $.isArray(values) + ? values + : [values] + ; + $.each(values, function(index, value) { + if(module.get.item(value) === false) { + html = settings.templates.addition( module.add.variables(message.addResult, value) ); + $userChoice = $('

') + .html(html) + .attr('data-' + metadata.value, value) + .attr('data-' + metadata.text, value) + .addClass(className.addition) + .addClass(className.item) + ; + if(settings.hideAdditions) { + $userChoice.addClass(className.hidden); + } + $userChoices = ($userChoices === undefined) + ? $userChoice + : $userChoices.add($userChoice) + ; + module.verbose('Creating user choices for value', value, $userChoice); + } + }); + return $userChoices; + }, + userLabels: function(value) { + var + userValues = module.get.userValues() + ; + if(userValues) { + module.debug('Adding user labels', userValues); + $.each(userValues, function(index, value) { + module.verbose('Adding custom user value'); + module.add.label(value, value); + }); + } + }, + menu: function() { + $menu = $('

') + .addClass(className.menu) + .appendTo($module) + ; + }, + sizer: function() { + $sizer = $('') + .addClass(className.sizer) + .insertAfter($search) + ; + } + }, + + search: function(query) { + query = (query !== undefined) + ? query + : module.get.query() + ; + module.verbose('Searching for query', query); + if(module.has.minCharacters(query)) { + module.filter(query); + } + else { + module.hide(); + } + }, + + select: { + firstUnfiltered: function() { + module.verbose('Selecting first non-filtered element'); + module.remove.selectedItem(); + $item + .not(selector.unselectable) + .not(selector.addition + selector.hidden) + .eq(0) + .addClass(className.selected) + ; + }, + nextAvailable: function($selected) { + $selected = $selected.eq(0); + var + $nextAvailable = $selected.nextAll(selector.item).not(selector.unselectable).eq(0), + $prevAvailable = $selected.prevAll(selector.item).not(selector.unselectable).eq(0), + hasNext = ($nextAvailable.length > 0) + ; + if(hasNext) { + module.verbose('Moving selection to', $nextAvailable); + $nextAvailable.addClass(className.selected); + } + else { + module.verbose('Moving selection to', $prevAvailable); + $prevAvailable.addClass(className.selected); + } + } + }, + + setup: { + api: function() { + var + apiSettings = { + debug : settings.debug, + urlData : { + value : module.get.value(), + query : module.get.query() + }, + on : false + } + ; + module.verbose('First request, initializing API'); + $module + .api(apiSettings) + ; + }, + layout: function() { + if( $module.is('select') ) { + module.setup.select(); + module.setup.returnedObject(); + } + if( !module.has.menu() ) { + module.create.menu(); + } + if( module.is.search() && !module.has.search() ) { + module.verbose('Adding search input'); + $search = $('') + .addClass(className.search) + .prop('autocomplete', 'off') + .insertBefore($text) + ; + } + if( module.is.multiple() && module.is.searchSelection() && !module.has.sizer()) { + module.create.sizer(); + } + if(settings.allowTab) { + module.set.tabbable(); + } + }, + select: function() { + var + selectValues = module.get.selectValues() + ; + module.debug('Dropdown initialized on a select', selectValues); + if( $module.is('select') ) { + $input = $module; + } + // see if select is placed correctly already + if($input.parent(selector.dropdown).length > 0) { + module.debug('UI dropdown already exists. Creating dropdown menu only'); + $module = $input.closest(selector.dropdown); + if( !module.has.menu() ) { + module.create.menu(); + } + $menu = $module.children(selector.menu); + module.setup.menu(selectValues); + } + else { + module.debug('Creating entire dropdown from select'); + $module = $('

') + .attr('class', $input.attr('class') ) + .addClass(className.selection) + .addClass(className.dropdown) + .html( templates.dropdown(selectValues) ) + .insertBefore($input) + ; + if($input.hasClass(className.multiple) && $input.prop('multiple') === false) { + module.error(error.missingMultiple); + $input.prop('multiple', true); + } + if($input.is('[multiple]')) { + module.set.multiple(); + } + if ($input.prop('disabled')) { + module.debug('Disabling dropdown'); + $module.addClass(className.disabled); + } + $input + .removeAttr('class') + .detach() + .prependTo($module) + ; + } + module.refresh(); + }, + menu: function(values) { + $menu.html( templates.menu(values, fields)); + $item = $menu.find(selector.item); + }, + reference: function() { + module.debug('Dropdown behavior was called on select, replacing with closest dropdown'); + // replace module reference + $module = $module.parent(selector.dropdown); + instance = $module.data(moduleNamespace); + element = $module.get(0); + module.refresh(); + module.setup.returnedObject(); + }, + returnedObject: function() { + var + $firstModules = $allModules.slice(0, elementIndex), + $lastModules = $allModules.slice(elementIndex + 1) + ; + // adjust all modules to use correct reference + $allModules = $firstModules.add($module).add($lastModules); + } + }, + + refresh: function() { + module.refreshSelectors(); + module.refreshData(); + }, + + refreshItems: function() { + $item = $menu.find(selector.item); + }, + + refreshSelectors: function() { + module.verbose('Refreshing selector cache'); + $text = $module.find(selector.text); + $search = $module.find(selector.search); + $input = $module.find(selector.input); + $icon = $module.find(selector.icon); + $combo = ($module.prev().find(selector.text).length > 0) + ? $module.prev().find(selector.text) + : $module.prev() + ; + $menu = $module.children(selector.menu); + $item = $menu.find(selector.item); + }, + + refreshData: function() { + module.verbose('Refreshing cached metadata'); + $item + .removeData(metadata.text) + .removeData(metadata.value) + ; + }, + + clearData: function() { + module.verbose('Clearing metadata'); + $item + .removeData(metadata.text) + .removeData(metadata.value) + ; + $module + .removeData(metadata.defaultText) + .removeData(metadata.defaultValue) + .removeData(metadata.placeholderText) + ; + }, + + toggle: function() { + module.verbose('Toggling menu visibility'); + if( !module.is.active() ) { + module.show(); + } + else { + module.hide(); + } + }, + + show: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if(!module.can.show() && module.is.remote()) { + module.debug('No API results retrieved, searching before show'); + module.queryRemote(module.get.query(), module.show); + } + if( module.can.show() && !module.is.active() ) { + module.debug('Showing dropdown'); + if(module.has.message() && !(module.has.maxSelections() || module.has.allResultsFiltered()) ) { + module.remove.message(); + } + if(module.is.allFiltered()) { + return true; + } + if(settings.onShow.call(element) !== false) { + module.animate.show(function() { + if( module.can.click() ) { + module.bind.intent(); + } + if(module.has.menuSearch()) { + module.focusSearch(); + } + module.set.visible(); + callback.call(element); + }); + } + } + }, + + hide: function(callback) { + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.active() && !module.is.animatingOutward() ) { + module.debug('Hiding dropdown'); + if(settings.onHide.call(element) !== false) { + module.animate.hide(function() { + module.remove.visible(); + callback.call(element); + }); + } + } + }, + + hideOthers: function() { + module.verbose('Finding other dropdowns to hide'); + $allModules + .not($module) + .has(selector.menu + '.' + className.visible) + .dropdown('hide') + ; + }, + + hideMenu: function() { + module.verbose('Hiding menu instantaneously'); + module.remove.active(); + module.remove.visible(); + $menu.transition('hide'); + }, + + hideSubMenus: function() { + var + $subMenus = $menu.children(selector.item).find(selector.menu) + ; + module.verbose('Hiding sub menus', $subMenus); + $subMenus.transition('hide'); + }, + + bind: { + events: function() { + if(hasTouch) { + module.bind.touchEvents(); + } + module.bind.keyboardEvents(); + module.bind.inputEvents(); + module.bind.mouseEvents(); + }, + touchEvents: function() { + module.debug('Touch device detected binding additional touch events'); + if( module.is.searchSelection() ) { + // do nothing special yet + } + else if( module.is.single() ) { + $module + .on('touchstart' + eventNamespace, module.event.test.toggle) + ; + } + $menu + .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter) + ; + }, + keyboardEvents: function() { + module.verbose('Binding keyboard events'); + $module + .on('keydown' + eventNamespace, module.event.keydown) + ; + if( module.has.search() ) { + $module + .on(module.get.inputEvent() + eventNamespace, selector.search, module.event.input) + ; + } + if( module.is.multiple() ) { + $document + .on('keydown' + elementNamespace, module.event.document.keydown) + ; + } + }, + inputEvents: function() { + module.verbose('Binding input change events'); + $module + .on('change' + eventNamespace, selector.input, module.event.change) + ; + }, + mouseEvents: function() { + module.verbose('Binding mouse events'); + if(module.is.multiple()) { + $module + .on('click' + eventNamespace, selector.label, module.event.label.click) + .on('click' + eventNamespace, selector.remove, module.event.remove.click) + ; + } + if( module.is.searchSelection() ) { + $module + .on('mousedown' + eventNamespace, module.event.mousedown) + .on('mouseup' + eventNamespace, module.event.mouseup) + .on('mousedown' + eventNamespace, selector.menu, module.event.menu.mousedown) + .on('mouseup' + eventNamespace, selector.menu, module.event.menu.mouseup) + .on('click' + eventNamespace, selector.icon, module.event.icon.click) + .on('focus' + eventNamespace, selector.search, module.event.search.focus) + .on('click' + eventNamespace, selector.search, module.event.search.focus) + .on('blur' + eventNamespace, selector.search, module.event.search.blur) + .on('click' + eventNamespace, selector.text, module.event.text.focus) + ; + if(module.is.multiple()) { + $module + .on('click' + eventNamespace, module.event.click) + ; + } + } + else { + if(settings.on == 'click') { + $module + .on('click' + eventNamespace, module.event.test.toggle) + ; + } + else if(settings.on == 'hover') { + $module + .on('mouseenter' + eventNamespace, module.delay.show) + .on('mouseleave' + eventNamespace, module.delay.hide) + ; + } + else { + $module + .on(settings.on + eventNamespace, module.toggle) + ; + } + $module + .on('click' + eventNamespace, selector.icon, module.event.icon.click) + .on('mousedown' + eventNamespace, module.event.mousedown) + .on('mouseup' + eventNamespace, module.event.mouseup) + .on('focus' + eventNamespace, module.event.focus) + ; + if(module.has.menuSearch() ) { + $module + .on('blur' + eventNamespace, selector.search, module.event.search.blur) + ; + } + else { + $module + .on('blur' + eventNamespace, module.event.blur) + ; + } + } + $menu + .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter) + .on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave) + .on('click' + eventNamespace, selector.item, module.event.item.click) + ; + }, + intent: function() { + module.verbose('Binding hide intent event to document'); + if(hasTouch) { + $document + .on('touchstart' + elementNamespace, module.event.test.touch) + .on('touchmove' + elementNamespace, module.event.test.touch) + ; + } + $document + .on('click' + elementNamespace, module.event.test.hide) + ; + } + }, + + unbind: { + intent: function() { + module.verbose('Removing hide intent event from document'); + if(hasTouch) { + $document + .off('touchstart' + elementNamespace) + .off('touchmove' + elementNamespace) + ; + } + $document + .off('click' + elementNamespace) + ; + } + }, + + filter: function(query) { + var + searchTerm = (query !== undefined) + ? query + : module.get.query(), + afterFiltered = function() { + if(module.is.multiple()) { + module.filterActive(); + } + if(query || (!query && module.get.activeItem().length == 0)) { + module.select.firstUnfiltered(); + } + if( module.has.allResultsFiltered() ) { + if( settings.onNoResults.call(element, searchTerm) ) { + if(settings.allowAdditions) { + if(settings.hideAdditions) { + module.verbose('User addition with no menu, setting empty style'); + module.set.empty(); + module.hideMenu(); + } + } + else { + module.verbose('All items filtered, showing message', searchTerm); + module.add.message(message.noResults); + } + } + else { + module.verbose('All items filtered, hiding dropdown', searchTerm); + module.hideMenu(); + } + } + else { + module.remove.empty(); + module.remove.message(); + } + if(settings.allowAdditions) { + module.add.userSuggestion(query); + } + if(module.is.searchSelection() && module.can.show() && module.is.focusedOnSearch() ) { + module.show(); + } + } + ; + if(settings.useLabels && module.has.maxSelections()) { + return; + } + if(settings.apiSettings) { + if( module.can.useAPI() ) { + module.queryRemote(searchTerm, function() { + if(settings.filterRemoteData) { + module.filterItems(searchTerm); + } + afterFiltered(); + }); + } + else { + module.error(error.noAPI); + } + } + else { + module.filterItems(searchTerm); + afterFiltered(); + } + }, + + queryRemote: function(query, callback) { + var + apiSettings = { + errorDuration : false, + cache : 'local', + throttle : settings.throttle, + urlData : { + query: query + }, + onError: function() { + module.add.message(message.serverError); + callback(); + }, + onFailure: function() { + module.add.message(message.serverError); + callback(); + }, + onSuccess : function(response) { + var + values = response[fields.remoteValues], + hasRemoteValues = ($.isArray(values) && values.length > 0) + ; + if(hasRemoteValues) { + module.remove.message(); + module.setup.menu({ + values: response[fields.remoteValues] + }); + } + else { + module.add.message(message.noResults); + } + callback(); + } + } + ; + if( !$module.api('get request') ) { + module.setup.api(); + } + apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings); + $module + .api('setting', apiSettings) + .api('query') + ; + }, + + filterItems: function(query) { + var + searchTerm = (query !== undefined) + ? query + : module.get.query(), + results = null, + escapedTerm = module.escape.string(searchTerm), + beginsWithRegExp = new RegExp('^' + escapedTerm, 'igm') + ; + // avoid loop if we're matching nothing + if( module.has.query() ) { + results = []; + + module.verbose('Searching for matching values', searchTerm); + $item + .each(function(){ + var + $choice = $(this), + text, + value + ; + if(settings.match == 'both' || settings.match == 'text') { + text = String(module.get.choiceText($choice, false)); + if(text.search(beginsWithRegExp) !== -1) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, text)) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, text)) { + results.push(this); + return true; + } + } + if(settings.match == 'both' || settings.match == 'value') { + value = String(module.get.choiceValue($choice, text)); + if(value.search(beginsWithRegExp) !== -1) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === 'exact' && module.exactSearch(searchTerm, value)) { + results.push(this); + return true; + } + else if (settings.fullTextSearch === true && module.fuzzySearch(searchTerm, value)) { + results.push(this); + return true; + } + } + }) + ; + } + module.debug('Showing only matched items', searchTerm); + module.remove.filteredItem(); + if(results) { + $item + .not(results) + .addClass(className.filtered) + ; + } + }, + + fuzzySearch: function(query, term) { + var + termLength = term.length, + queryLength = query.length + ; + query = query.toLowerCase(); + term = term.toLowerCase(); + if(queryLength > termLength) { + return false; + } + if(queryLength === termLength) { + return (query === term); + } + search: for (var characterIndex = 0, nextCharacterIndex = 0; characterIndex < queryLength; characterIndex++) { + var + queryCharacter = query.charCodeAt(characterIndex) + ; + while(nextCharacterIndex < termLength) { + if(term.charCodeAt(nextCharacterIndex++) === queryCharacter) { + continue search; + } + } + return false; + } + return true; + }, + exactSearch: function (query, term) { + query = query.toLowerCase(); + term = term.toLowerCase(); + if(term.indexOf(query) > -1) { + return true; + } + return false; + }, + filterActive: function() { + if(settings.useLabels) { + $item.filter('.' + className.active) + .addClass(className.filtered) + ; + } + }, + + focusSearch: function(skipHandler) { + if( module.has.search() && !module.is.focusedOnSearch() ) { + if(skipHandler) { + $module.off('focus' + eventNamespace, selector.search); + $search.focus(); + $module.on('focus' + eventNamespace, selector.search, module.event.search.focus); + } + else { + $search.focus(); + } + } + }, + + forceSelection: function() { + var + $currentlySelected = $item.not(className.filtered).filter('.' + className.selected).eq(0), + $activeItem = $item.not(className.filtered).filter('.' + className.active).eq(0), + $selectedItem = ($currentlySelected.length > 0) + ? $currentlySelected + : $activeItem, + hasSelected = ($selectedItem.length > 0) + ; + if(hasSelected && !module.is.multiple()) { + module.debug('Forcing partial selection to selected item', $selectedItem); + module.event.item.click.call($selectedItem, {}, true); + return; + } + else { + if(settings.allowAdditions) { + module.set.selected(module.get.query()); + module.remove.searchTerm(); + } + else { + module.remove.searchTerm(); + } + } + }, + + change: { + values: function(values) { + if(!settings.allowAdditions) { + module.clear(); + } + module.debug('Creating dropdown with specified values', values); + module.setup.menu({values: values}); + $.each(values, function(index, item) { + if(item.selected == true) { + module.debug('Setting initial selection to', item.value); + module.set.selected(item.value); + return true; + } + }); + } + }, + + event: { + change: function() { + if(!internalChange) { + module.debug('Input changed, updating selection'); + module.set.selected(); + } + }, + focus: function() { + if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { + module.show(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(!activated && !pageLostFocus) { + module.remove.activeLabel(); + module.hide(); + } + }, + mousedown: function() { + if(module.is.searchSelection()) { + // prevent menu hiding on immediate re-focus + willRefocus = true; + } + else { + // prevents focus callback from occurring on mousedown + activated = true; + } + }, + mouseup: function() { + if(module.is.searchSelection()) { + // prevent menu hiding on immediate re-focus + willRefocus = false; + } + else { + activated = false; + } + }, + click: function(event) { + var + $target = $(event.target) + ; + // focus search + if($target.is($module)) { + if(!module.is.focusedOnSearch()) { + module.focusSearch(); + } + else { + module.show(); + } + } + }, + search: { + focus: function() { + activated = true; + if(module.is.multiple()) { + module.remove.activeLabel(); + } + if(settings.showOnFocus) { + module.search(); + } + }, + blur: function(event) { + pageLostFocus = (document.activeElement === this); + if(module.is.searchSelection() && !willRefocus) { + if(!itemActivated && !pageLostFocus) { + if(settings.forceSelection) { + module.forceSelection(); + } + module.hide(); + } + } + willRefocus = false; + } + }, + icon: { + click: function(event) { + if($icon.hasClass(className.clear)) { + module.clear(); + } + else if (module.can.click()) { + module.toggle(); + } + } + }, + text: { + focus: function(event) { + activated = true; + module.focusSearch(); + } + }, + input: function(event) { + if(module.is.multiple() || module.is.searchSelection()) { + module.set.filtered(); + } + clearTimeout(module.timer); + module.timer = setTimeout(module.search, settings.delay.search); + }, + label: { + click: function(event) { + var + $label = $(this), + $labels = $module.find(selector.label), + $activeLabels = $labels.filter('.' + className.active), + $nextActive = $label.nextAll('.' + className.active), + $prevActive = $label.prevAll('.' + className.active), + $range = ($nextActive.length > 0) + ? $label.nextUntil($nextActive).add($activeLabels).add($label) + : $label.prevUntil($prevActive).add($activeLabels).add($label) + ; + if(event.shiftKey) { + $activeLabels.removeClass(className.active); + $range.addClass(className.active); + } + else if(event.ctrlKey) { + $label.toggleClass(className.active); + } + else { + $activeLabels.removeClass(className.active); + $label.addClass(className.active); + } + settings.onLabelSelect.apply(this, $labels.filter('.' + className.active)); + } + }, + remove: { + click: function() { + var + $label = $(this).parent() + ; + if( $label.hasClass(className.active) ) { + // remove all selected labels + module.remove.activeLabels(); + } + else { + // remove this label only + module.remove.activeLabels( $label ); + } + } + }, + test: { + toggle: function(event) { + var + toggleBehavior = (module.is.multiple()) + ? module.show + : module.toggle + ; + if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) { + return; + } + if( module.determine.eventOnElement(event, toggleBehavior) ) { + event.preventDefault(); + } + }, + touch: function(event) { + module.determine.eventOnElement(event, function() { + if(event.type == 'touchstart') { + module.timer = setTimeout(function() { + module.hide(); + }, settings.delay.touch); + } + else if(event.type == 'touchmove') { + clearTimeout(module.timer); + } + }); + event.stopPropagation(); + }, + hide: function(event) { + module.determine.eventInModule(event, module.hide); + } + }, + select: { + mutation: function(mutations) { + module.debug(' removing selected option', removedValue); + newValue = module.remove.arrayValue(removedValue, values); + module.remove.optionValue(removedValue); + } + else { + module.verbose('Removing from delimited values', removedValue); + newValue = module.remove.arrayValue(removedValue, values); + newValue = newValue.join(settings.delimiter); + } + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.verbose('No callback on initial load', settings.onRemove); + } + else { + settings.onRemove.call(element, removedValue, removedText, $removedItem); + } + module.set.value(newValue, removedText, $removedItem); + module.check.maxSelections(); + }, + arrayValue: function(removedValue, values) { + if( !$.isArray(values) ) { + values = [values]; + } + values = $.grep(values, function(value){ + return (removedValue != value); + }); + module.verbose('Removed value from delimited string', removedValue, values); + return values; + }, + label: function(value, shouldAnimate) { + var + $labels = $module.find(selector.label), + $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(value) +'"]') + ; + module.verbose('Removing label', $removedLabel); + $removedLabel.remove(); + }, + activeLabels: function($activeLabels) { + $activeLabels = $activeLabels || $module.find(selector.label).filter('.' + className.active); + module.verbose('Removing active label selections', $activeLabels); + module.remove.labels($activeLabels); + }, + labels: function($labels) { + $labels = $labels || $module.find(selector.label); + module.verbose('Removing labels', $labels); + $labels + .each(function(){ + var + $label = $(this), + value = $label.data(metadata.value), + stringValue = (value !== undefined) + ? String(value) + : value, + isUserValue = module.is.userValue(stringValue) + ; + if(settings.onLabelRemove.call($label, value) === false) { + module.debug('Label remove callback cancelled removal'); + return; + } + module.remove.message(); + if(isUserValue) { + module.remove.value(stringValue); + module.remove.label(stringValue); + } + else { + // selected will also remove label + module.remove.selected(stringValue); + } + }) + ; + }, + tabbable: function() { + if( module.is.searchSelection() ) { + module.debug('Searchable dropdown initialized'); + $search + .removeAttr('tabindex') + ; + $menu + .removeAttr('tabindex') + ; + } + else { + module.debug('Simple selection dropdown initialized'); + $module + .removeAttr('tabindex') + ; + $menu + .removeAttr('tabindex') + ; + } + }, + clearable: function() { + $icon.removeClass(className.clear); + } + }, + + has: { + menuSearch: function() { + return (module.has.search() && $search.closest($menu).length > 0); + }, + search: function() { + return ($search.length > 0); + }, + sizer: function() { + return ($sizer.length > 0); + }, + selectInput: function() { + return ( $input.is('select') ); + }, + minCharacters: function(searchTerm) { + if(settings.minCharacters) { + searchTerm = (searchTerm !== undefined) + ? String(searchTerm) + : String(module.get.query()) + ; + return (searchTerm.length >= settings.minCharacters); + } + return true; + }, + firstLetter: function($item, letter) { + var + text, + firstLetter + ; + if(!$item || $item.length === 0 || typeof letter !== 'string') { + return false; + } + text = module.get.choiceText($item, false); + letter = letter.toLowerCase(); + firstLetter = String(text).charAt(0).toLowerCase(); + return (letter == firstLetter); + }, + input: function() { + return ($input.length > 0); + }, + items: function() { + return ($item.length > 0); + }, + menu: function() { + return ($menu.length > 0); + }, + message: function() { + return ($menu.children(selector.message).length !== 0); + }, + label: function(value) { + var + escapedValue = module.escape.value(value), + $labels = $module.find(selector.label) + ; + if(settings.ignoreCase) { + escapedValue = escapedValue.toLowerCase(); + } + return ($labels.filter('[data-' + metadata.value + '="' + module.escape.string(escapedValue) +'"]').length > 0); + }, + maxSelections: function() { + return (settings.maxSelections && module.get.selectionCount() >= settings.maxSelections); + }, + allResultsFiltered: function() { + var + $normalResults = $item.not(selector.addition) + ; + return ($normalResults.filter(selector.unselectable).length === $normalResults.length); + }, + userSuggestion: function() { + return ($menu.children(selector.addition).length > 0); + }, + query: function() { + return (module.get.query() !== ''); + }, + value: function(value) { + return (settings.ignoreCase) + ? module.has.valueIgnoringCase(value) + : module.has.valueMatchingCase(value) + ; + }, + valueMatchingCase: function(value) { + var + values = module.get.values(), + hasValue = $.isArray(values) + ? values && ($.inArray(value, values) !== -1) + : (values == value) + ; + return (hasValue) + ? true + : false + ; + }, + valueIgnoringCase: function(value) { + var + values = module.get.values(), + hasValue = false + ; + if(!$.isArray(values)) { + values = [values]; + } + $.each(values, function(index, existingValue) { + if(String(value).toLowerCase() == String(existingValue).toLowerCase()) { + hasValue = true; + return false; + } + }); + return hasValue; + } + }, + + is: { + active: function() { + return $module.hasClass(className.active); + }, + animatingInward: function() { + return $menu.transition('is inward'); + }, + animatingOutward: function() { + return $menu.transition('is outward'); + }, + bubbledLabelClick: function(event) { + return $(event.target).is('select, input') && $module.closest('label').length > 0; + }, + bubbledIconClick: function(event) { + return $(event.target).closest($icon).length > 0; + }, + alreadySetup: function() { + return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0); + }, + animating: function($subMenu) { + return ($subMenu) + ? $subMenu.transition && $subMenu.transition('is animating') + : $menu.transition && $menu.transition('is animating') + ; + }, + leftward: function($subMenu) { + var $selectedMenu = $subMenu || $menu; + return $selectedMenu.hasClass(className.leftward); + }, + disabled: function() { + return $module.hasClass(className.disabled); + }, + focused: function() { + return (document.activeElement === $module[0]); + }, + focusedOnSearch: function() { + return (document.activeElement === $search[0]); + }, + allFiltered: function() { + return( (module.is.multiple() || module.has.search()) && !(settings.hideAdditions == false && module.has.userSuggestion()) && !module.has.message() && module.has.allResultsFiltered() ); + }, + hidden: function($subMenu) { + return !module.is.visible($subMenu); + }, + initialLoad: function() { + return initialLoad; + }, + inObject: function(needle, object) { + var + found = false + ; + $.each(object, function(index, property) { + if(property == needle) { + found = true; + return true; + } + }); + return found; + }, + multiple: function() { + return $module.hasClass(className.multiple); + }, + remote: function() { + return settings.apiSettings && module.can.useAPI(); + }, + single: function() { + return !module.is.multiple(); + }, + selectMutation: function(mutations) { + var + selectChanged = false + ; + $.each(mutations, function(index, mutation) { + if(mutation.target && $(mutation.target).is('select')) { + selectChanged = true; + return true; + } + }); + return selectChanged; + }, + search: function() { + return $module.hasClass(className.search); + }, + searchSelection: function() { + return ( module.has.search() && $search.parent(selector.dropdown).length === 1 ); + }, + selection: function() { + return $module.hasClass(className.selection); + }, + userValue: function(value) { + return ($.inArray(value, module.get.userValues()) !== -1); + }, + upward: function($menu) { + var $element = $menu || $module; + return $element.hasClass(className.upward); + }, + visible: function($subMenu) { + return ($subMenu) + ? $subMenu.hasClass(className.visible) + : $menu.hasClass(className.visible) + ; + }, + verticallyScrollableContext: function() { + var + overflowY = ($context.get(0) !== window) + ? $context.css('overflow-y') + : false + ; + return (overflowY == 'auto' || overflowY == 'scroll'); + }, + horizontallyScrollableContext: function() { + var + overflowX = ($context.get(0) !== window) + ? $context.css('overflow-X') + : false + ; + return (overflowX == 'auto' || overflowX == 'scroll'); + } + }, + + can: { + activate: function($item) { + if(settings.useLabels) { + return true; + } + if(!module.has.maxSelections()) { + return true; + } + if(module.has.maxSelections() && $item.hasClass(className.active)) { + return true; + } + return false; + }, + openDownward: function($subMenu) { + var + $currentMenu = $subMenu || $menu, + canOpenDownward = true, + onScreen = {}, + calculations + ; + $currentMenu + .addClass(className.loading) + ; + calculations = { + context: { + offset : ($context.get(0) === window) + ? { top: 0, left: 0} + : $context.offset(), + scrollTop : $context.scrollTop(), + height : $context.outerHeight() + }, + menu : { + offset: $currentMenu.offset(), + height: $currentMenu.outerHeight() + } + }; + if(module.is.verticallyScrollableContext()) { + calculations.menu.offset.top += calculations.context.scrollTop; + } + onScreen = { + above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.context.offset.top - calculations.menu.height, + below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top - calculations.context.offset.top + calculations.menu.height + }; + if(onScreen.below) { + module.verbose('Dropdown can fit in context downward', onScreen); + canOpenDownward = true; + } + else if(!onScreen.below && !onScreen.above) { + module.verbose('Dropdown cannot fit in either direction, favoring downward', onScreen); + canOpenDownward = true; + } + else { + module.verbose('Dropdown cannot fit below, opening upward', onScreen); + canOpenDownward = false; + } + $currentMenu.removeClass(className.loading); + return canOpenDownward; + }, + openRightward: function($subMenu) { + var + $currentMenu = $subMenu || $menu, + canOpenRightward = true, + isOffscreenRight = false, + calculations + ; + $currentMenu + .addClass(className.loading) + ; + calculations = { + context: { + offset : ($context.get(0) === window) + ? { top: 0, left: 0} + : $context.offset(), + scrollLeft : $context.scrollLeft(), + width : $context.outerWidth() + }, + menu: { + offset : $currentMenu.offset(), + width : $currentMenu.outerWidth() + } + }; + if(module.is.horizontallyScrollableContext()) { + calculations.menu.offset.left += calculations.context.scrollLeft; + } + isOffscreenRight = (calculations.menu.offset.left - calculations.context.offset.left + calculations.menu.width >= calculations.context.scrollLeft + calculations.context.width); + if(isOffscreenRight) { + module.verbose('Dropdown cannot fit in context rightward', isOffscreenRight); + canOpenRightward = false; + } + $currentMenu.removeClass(className.loading); + return canOpenRightward; + }, + click: function() { + return (hasTouch || settings.on == 'click'); + }, + extendSelect: function() { + return settings.allowAdditions || settings.apiSettings; + }, + show: function() { + return !module.is.disabled() && (module.has.items() || module.has.message()); + }, + useAPI: function() { + return $.fn.api !== undefined; + } + }, + + animate: { + show: function(callback, $subMenu) { + var + $currentMenu = $subMenu || $menu, + start = ($subMenu) + ? function() {} + : function() { + module.hideSubMenus(); + module.hideOthers(); + module.set.active(); + }, + transition + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + module.verbose('Doing menu show animation', $currentMenu); + module.set.direction($subMenu); + transition = module.get.transition($subMenu); + if( module.is.selection() ) { + module.set.scrollPosition(module.get.selectedItem(), true); + } + if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) { + if(transition == 'none') { + start(); + $currentMenu.transition('show'); + callback.call(element); + } + else if($.fn.transition !== undefined && $module.transition('is supported')) { + $currentMenu + .transition({ + animation : transition + ' in', + debug : settings.debug, + verbose : settings.verbose, + duration : settings.duration, + queue : true, + onStart : start, + onComplete : function() { + callback.call(element); + } + }) + ; + } + else { + module.error(error.noTransition, transition); + } + } + }, + hide: function(callback, $subMenu) { + var + $currentMenu = $subMenu || $menu, + duration = ($subMenu) + ? (settings.duration * 0.9) + : settings.duration, + start = ($subMenu) + ? function() {} + : function() { + if( module.can.click() ) { + module.unbind.intent(); + } + module.remove.active(); + }, + transition = module.get.transition($subMenu) + ; + callback = $.isFunction(callback) + ? callback + : function(){} + ; + if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) { + module.verbose('Doing menu hide animation', $currentMenu); + + if(transition == 'none') { + start(); + $currentMenu.transition('hide'); + callback.call(element); + } + else if($.fn.transition !== undefined && $module.transition('is supported')) { + $currentMenu + .transition({ + animation : transition + ' out', + duration : settings.duration, + debug : settings.debug, + verbose : settings.verbose, + queue : false, + onStart : start, + onComplete : function() { + callback.call(element); + } + }) + ; + } + else { + module.error(error.transition); + } + } + } + }, + + hideAndClear: function() { + module.remove.searchTerm(); + if( module.has.maxSelections() ) { + return; + } + if(module.has.search()) { + module.hide(function() { + module.remove.filteredItem(); + }); + } + else { + module.hide(); + } + }, + + delay: { + show: function() { + module.verbose('Delaying show event to ensure user intent'); + clearTimeout(module.timer); + module.timer = setTimeout(module.show, settings.delay.show); + }, + hide: function() { + module.verbose('Delaying hide event to ensure user intent'); + clearTimeout(module.timer); + module.timer = setTimeout(module.hide, settings.delay.hide); + } + }, + + escape: { + value: function(value) { + var + multipleValues = $.isArray(value), + stringValue = (typeof value === 'string'), + isUnparsable = (!stringValue && !multipleValues), + hasQuotes = (stringValue && value.search(regExp.quote) !== -1), + values = [] + ; + if(isUnparsable || !hasQuotes) { + return value; + } + module.debug('Encoding quote values for use in select', value); + if(multipleValues) { + $.each(value, function(index, value){ + values.push(value.replace(regExp.quote, '"')); + }); + return values; + } + return value.replace(regExp.quote, '"'); + }, + string: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + + setting: function(name, value) { + module.debug('Changing setting', name, value); + if( $.isPlainObject(name) ) { + $.extend(true, settings, name); + } + else if(value !== undefined) { + if($.isPlainObject(settings[name])) { + $.extend(true, settings[name], value); + } + else { + 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.silent && 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.silent && 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() { + if(!settings.silent) { + 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({ + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Element' : element, + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 500); + }, + 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 { + module.error(error.method, query); + 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) { + instance.invoke('destroy'); + } + module.initialize(); + } + }) + ; + return (returnedValue !== undefined) + ? returnedValue + : $allModules + ; +}; + +$.fn.dropdown.settings = { + + silent : false, + debug : false, + verbose : false, + performance : true, + + on : 'click', // what event should show menu action on item selection + action : 'activate', // action on item selection (nothing, activate, select, combo, hide, function(){}) + + values : false, // specify values to use for dropdown + + clearable : false, // whether the value of the dropdown can be cleared + + apiSettings : false, + selectOnKeydown : true, // Whether selection should occur automatically when keyboard shortcuts used + minCharacters : 0, // Minimum characters required to trigger API call + + filterRemoteData : false, // Whether API results should be filtered after being returned for query term + saveRemoteData : true, // Whether remote name/value pairs should be stored in sessionStorage to allow remote data to be restored on page refresh + + throttle : 200, // How long to wait after last user input to search remotely + + context : window, // Context to use when determining if on screen + direction : 'auto', // Whether dropdown should always open in one direction + keepOnScreen : true, // Whether dropdown should check whether it is on screen before showing + + match : 'both', // what to match against with search selection (both, text, or label) + fullTextSearch : false, // search anywhere in value (set to 'exact' to require exact matches) + + placeholder : 'auto', // whether to convert blank the values will be delimited with this character + + showOnFocus : true, // show menu on focus + allowReselection : false, // whether current value should trigger callbacks when reselected + allowTab : true, // add tabindex to element + allowCategorySelection : false, // allow elements with sub-menus to be selected + + fireOnInit : false, // Whether callbacks should fire when initializing dropdown values + + transition : 'auto', // auto transition will slide down or up based on direction + duration : 200, // duration of transition + + glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width + + // label settings on multi-select + label: { + transition : 'scale', + duration : 200, + variation : false + }, + + // delay before event + delay : { + hide : 300, + show : 200, + search : 20, + touch : 50 + }, + + /* Callbacks */ + onChange : function(value, text, $selected){}, + onAdd : function(value, text, $selected){}, + onRemove : function(value, text, $selected){}, + + onLabelSelect : function($selectedLabels){}, + onLabelCreate : function(value, text) { return $(this); }, + onLabelRemove : function(value) { return true; }, + onNoResults : function(searchTerm) { return true; }, + onShow : function(){}, + onHide : function(){}, + + /* Component */ + name : 'Dropdown', + namespace : 'dropdown', + + message: { + addResult : 'Add {term}', + count : '{count} selected', + maxSelections : 'Max {maxCount} selections', + noResults : 'No results found.', + serverError : 'There was an error contacting the server' + }, + + error : { + action : 'You called a dropdown action that was not defined', + alreadySetup : 'Once a select has been initialized behaviors must be called on the created ui dropdown', + labels : 'Allowing user additions currently requires the use of labels.', + missingMultiple : ' */ +@selectBorder: 1px solid @borderColor; +@selectPadding: 0.5em; +@selectVisibility: visible; +@selectHeight: 38px; + +@selectionTextColor: @textColor; + +@selectionTextUnderlayIconOpacity: @disabledOpacity; +@selectionTextUnderlayColor: @inputPlaceholderFocusColor; + +@selectionBoxShadow: none; +@selectionBorderColor: @borderColor; +@selectionBorder: 1px solid @selectionBorderColor; +@selectionBorderRadius: @borderRadius; + +@selectionIconOpacity: 0.8; +@selectionIconZIndex: 3; +@selectionIconHitbox: @selectionVerticalPadding; +@selectionIconMargin: -@selectionIconHitbox; +@selectionIconPadding: @selectionIconHitbox / @dropdownIconSize; +@selectionIconTransition: opacity @defaultDuration @defaultEasing; + +@selectionMenuBorderRadius: 0em 0em @borderRadius @borderRadius; +@selectionMenuBoxShadow: @raisedShadow; +@selectionMenuItemBoxShadow: none; + +@selectionItemHorizontalPadding: @itemHorizontalPadding; +@selectionItemVerticalPadding: @itemVerticalPadding; +@selectionItemPadding: @selectionItemVerticalPadding @selectionItemHorizontalPadding; + +@selectionTransition: @transition; +@selectionMenuTransition: @menuTransition; + +/* Responsive */ +@selectionMobileMaxItems: 3; +@selectionTabletMaxItems: 4; +@selectionComputerMaxItems: 6; +@selectionWidescreenMaxItems: 8; + +/* Derived */ +@selectedBorderEMWidth: 0.1em; /* 1px / em size */ +@selectionItemHeight: (@selectionItemVerticalPadding * 2) + @itemLineHeight + @selectedBorderEMWidth; +@selectionMobileMaxMenuHeight: (@selectionItemHeight * @selectionMobileMaxItems); +@selectionTabletMaxMenuHeight: (@selectionItemHeight * @selectionTabletMaxItems); +@selectionComputerMaxMenuHeight: (@selectionItemHeight * @selectionComputerMaxItems); +@selectionWidescreenMaxMenuHeight: (@selectionItemHeight * @selectionWidescreenMaxItems); + +/* Hover */ +@selectionHoverBorderColor: @selectedBorderColor; +@selectionHoverBoxShadow: none; + +/* Focus */ +@selectionFocusBorderColor: @focusedFormMutedBorderColor; +@selectionFocusBoxShadow: none; +@selectionFocusMenuBoxShadow: @raisedShadow; + +/* Visible */ +@selectionVisibleTextFontWeight: @normal; +@selectionVisibleTextColor: @hoveredTextColor; + +@selectionVisibleBorderColor: @focusedFormMutedBorderColor; +@selectionVisibleBoxShadow: @raisedShadow; +@selectionVisibleMenuBoxShadow: @raisedShadow; + +/* Visible Hover */ +@selectionActiveHoverBorderColor: @focusedFormMutedBorderColor; +@selectionActiveHoverBoxShadow: @selectionVisibleBoxShadow; +@selectionActiveHoverMenuBoxShadow: @selectionVisibleMenuBoxShadow; + +@selectionVisibleConnectingBorder: 0em; +@selectionVisibleIconOpacity: ''; + +/*-------------- + Search +--------------*/ + +@searchMinWidth: ''; + +/* Search Selection */ +@searchSelectionLineHeight: @inputLineHeight; +@searchSelectionLineHeightOffset: ((@searchSelectionLineHeight - 1em) / 2); +@searchSelectionVerticalPadding: (@selectionVerticalPadding - @searchSelectionLineHeightOffset); +@searchSelectionHorizontalPadding: @selectionHorizontalPadding; +@searchSelectionInputPadding: @searchSelectionVerticalPadding @selectionIconDistance @searchSelectionVerticalPadding @searchSelectionHorizontalPadding; + +@searchMobileMaxMenuHeight: @selectionMobileMaxMenuHeight; +@searchTabletMaxMenuHeight: @selectionTabletMaxMenuHeight; +@searchComputerMaxMenuHeight: @selectionComputerMaxMenuHeight; +@searchWidescreenMaxMenuHeight: @selectionWidescreenMaxMenuHeight; + +/* Inline */ +@inlineIconMargin: 0em @relative3px 0em @relative3px; +@inlineTextColor: inherit; +@inlineTextFontWeight: @bold; +@inlineMenuDistance: @relative3px; +@inlineMenuBorderRadius: @borderRadius; + + +/*-------------- + Multiple +--------------*/ + +/* Split Actual Padding Between Child and Parent (allows for label spacing) */ +@multipleSelectionVerticalPadding: (@searchSelectionVerticalPadding * (1/3)); +@multipleSelectionLeftPadding: @relative5px; +@multipleSelectionRightPadding: @selectionIconDistance; +@multipleSelectionPadding: @multipleSelectionVerticalPadding @multipleSelectionRightPadding @multipleSelectionVerticalPadding @multipleSelectionLeftPadding; + +/* Child Elements */ +@multipleSelectionChildVerticalMargin: (@searchSelectionVerticalPadding * (2/3)); +@multipleSelectionChildLeftMargin: (@inputHorizontalPadding - @multipleSelectionLeftPadding); +@multipleSelectionChildMargin: @multipleSelectionChildVerticalMargin 0em @multipleSelectionChildVerticalMargin @multipleSelectionChildLeftMargin; +@multipleSelectionChildLineHeight: @relative17px; +@multipleSelectionSearchStartWidth: (@glyphWidth * 2); + +/* Dropdown Icon */ +@multipleSelectionDropdownIconMargin: ''; +@multipleSelectionDropdownIconPadding: ''; + +@multipleSelectionSearchAfterLabelDistance: @relative2px; + +/* Selection Label */ +@labelSize: @relativeMedium; +@labelHorizontalMargin: @4px; +@labelVerticalMargin: @2px; +@labelMargin: @labelVerticalMargin @labelHorizontalMargin @labelVerticalMargin 0em; +@labelBorderWidth: 1px; +@labelBoxShadow: 0px 0px 0px @labelBorderWidth @borderColor inset; + +@labelVerticalPadding: @relative5px; +@labelHorizontalPadding: @relativeMini; +@labelPadding: @labelVerticalPadding @labelHorizontalPadding; + +/*------------------- + States +--------------------*/ + +/* Hovered */ +@hoveredItemBackground: @transparentBlack; +@hoveredItemColor: @selectedTextColor; +@hoveredZIndex: @menuZIndex + 2; + +/* Default Text */ +@defaultTextColor: @inputPlaceholderColor; +@defaultTextFocusColor: @inputPlaceholderFocusColor; + +/* Loading */ +@loadingZIndex: -1; + +/* Active Menu Item */ +@activeItemZIndex: @menuZIndex + 1; +@activeItemBackground: transparent; +@activeItemBoxShadow: none; +@activeItemFontWeight: @bold; +@activeItemColor: @selectedTextColor; + +/* Selected */ +@selectedBackground: @subtleTransparentBlack; +@selectedColor: @selectedTextColor; + +/* Error */ +@errorLabelBackground: #EACBCB; +@errorLabelColor: @errorTextColor; + +@errorItemTextColor: @errorTextColor; +@errorItemHoverBackground: #FFF2F2; +@errorItemActiveBackground: #FDCFCF; + +/* Clearable */ +@clearableIconOpacity: 0.8; +@clearableIconActiveOpacity: 1; + +/*------------------- + Variations +--------------------*/ + +/* Scrolling */ +@scrollingMenuWidth: 100%; +@scrollingMenuItemBorder: none; +@scrollingMenuRightItemPadding: ~"calc("(@itemHorizontalPadding)~" + "(@scrollbarWidth)~")"; + +@scrollingMobileMaxItems: 4; +@scrollingTabletMaxItems: 6; +@scrollingComputerMaxItems: 8; +@scrollingWidescreenMaxItems: 12; + +@scrollingBorderEMWidth: 0em; /* 0px / em size */ +@scrollingItemHeight: (@itemVerticalPadding * 2) + @itemLineHeight + @scrollingBorderEMWidth; +@scrollingMobileMaxMenuHeight: (@scrollingItemHeight * @scrollingMobileMaxItems); +@scrollingTabletMaxMenuHeight: (@scrollingItemHeight * @scrollingTabletMaxItems); +@scrollingComputerMaxMenuHeight: (@scrollingItemHeight * @scrollingComputerMaxItems); +@scrollingWidescreenMaxMenuHeight: (@scrollingItemHeight * @selectionWidescreenMaxItems); + +/* Upward */ +@upwardSelectionVisibleBorderRadius: @selectionVisibleConnectingBorder @selectionVisibleConnectingBorder @borderRadius @borderRadius; +@upwardMenuBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); +@upwardSelectionMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); +@upwardMenuBorderRadius: @borderRadius @borderRadius 0em 0em; +@upwardSelectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05); +@upwardSelectionVisibleBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08); +@upwardSelectionActiveHoverBoxShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05); +@upwardSelectionActiveHoverMenuBoxShadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08); + +/* Flyout Direction */ +@leftMenuDropdownIconFloat: left; +@leftMenuDropdownIconMargin: @itemLineHeightOffset 0em 0em 0em; + +/* Left */ +@leftSubMenuBorderRadius: @borderRadius; +@leftSubMenuMargin: 0em @subMenuDistanceAway 0em 0em; + +/* Simple */ +@simpleTransitionDuration: @defaultDuration; +@simpleTransition: opacity @simpleTransitionDuration @defaultEasing; + +/* Floating */ +@floatingMenuDistance: 0.5em; +@floatingMenuBoxShadow: @floatingShadow; +@floatingMenuBorderRadius: @borderRadius; + +/* Pointing */ +@pointingArrowOffset: -(@pointingArrowSize / 2); +@pointingArrowDistanceFromEdge: 1em; + +@pointingArrowBackground: @white; +@pointingArrowZIndex: 2; +@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor; +@pointingArrowSize: @relative7px; + +@pointingMenuDistance: @mini; +@pointingMenuBorderRadius: @borderRadius; +@pointingArrowBoxShadow: -@menuBorderWidth -@menuBorderWidth 0px 0px @menuBorderColor; + +/* Pointing Upward */ +@pointingUpwardMenuBorderRadius: @borderRadius; +@pointingUpwardArrowBoxShadow: @menuBorderWidth @menuBorderWidth 0px 0px @menuBorderColor; diff --git a/static/semantic/src/themes/default/modules/embed.overrides b/static/semantic/src/themes/default/modules/embed.overrides new file mode 100755 index 0000000..3f14e70 --- /dev/null +++ b/static/semantic/src/themes/default/modules/embed.overrides @@ -0,0 +1,3 @@ +/******************************* + Video Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/embed.variables b/static/semantic/src/themes/default/modules/embed.variables new file mode 100755 index 0000000..355076d --- /dev/null +++ b/static/semantic/src/themes/default/modules/embed.variables @@ -0,0 +1,53 @@ +/******************************* + Video +*******************************/ + +/*------------------- + Element +--------------------*/ + +/* Simple */ +@background: @lightGrey; +@transitionDuration: 0.5s; +@transitionEasing: @defaultEasing; + +/* Placeholder */ +@placeholderUnderlay: @background; + +/* Placeholder Overlayed Background */ +@placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3)); +@placeholderBackgroundOpacity: 0.5; +@placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing; + +/* Icon */ +@iconBackground: @veryStrongTransparentBlack; +@iconSize: 6rem; +@iconTransition: + opacity @transitionDuration @transitionEasing, + color @transitionDuration @transitionEasing +; +@iconColor: @white; +@iconShadow: + 0px 2px 10px rgba(34, 36, 38, 0.2) +; +@iconZIndex: 10; + +/*------------------- + States +--------------------*/ + +/* Hover */ +@hoverPlaceholderBackground: @placeholderBackground; +@hoverPlaceholderBackgroundOpacity: 1; +@hoverIconColor: @white; + + +/*------------------- + Variations +--------------------*/ + +/* Aspect Ratios */ +@squareRatio: (1/1) * 100%; +@widescreenRatio: (9/16) * 100%; +@ultraWidescreenRatio: (9/21) * 100%; +@standardRatio: (3/4) * 100%; \ No newline at end of file diff --git a/static/semantic/src/themes/default/modules/modal.overrides b/static/semantic/src/themes/default/modules/modal.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/modal.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/modal.variables b/static/semantic/src/themes/default/modules/modal.variables new file mode 100755 index 0000000..7cf1db8 --- /dev/null +++ b/static/semantic/src/themes/default/modules/modal.variables @@ -0,0 +1,192 @@ +/******************************* + Modal +*******************************/ + +@background: @white; +@border: none; +@zIndex: 1001; +@borderRadius: @defaultBorderRadius; +@transformOrigin: 50% 25%; +@boxShadow: + 1px 3px 3px 0px rgba(0, 0, 0, 0.2), + 1px 3px 15px 2px rgba(0, 0, 0, 0.2) +; + +/* Close Icon */ +@closeOpacity: 0.8; +@closeSize: 1.25em; +@closeColor: @white; + +@closeHitbox: 2.25rem; +@closeDistance: 0.25rem; +@closeHitBoxOffset: (@closeHitbox - 1rem) / 2; +@closePadding: @closeHitBoxOffset 0rem 0rem 0rem; +@closeTop: -(@closeDistance + @closeHitbox); +@closeRight: -(@closeDistance + @closeHitbox); + +/* Header */ +@headerMargin: 0em; +@headerVerticalPadding: 1.25rem; +@headerHorizontalPadding: 1.5rem; +@headerPadding: @headerVerticalPadding @headerHorizontalPadding; +@headerBackground: @white; +@headerColor: @darkTextColor; +@headerFontSize: @huge; +@headerBoxShadow: none; +@headerFontWeight: @bold; +@headerFontFamily: @headerFont; +@headerBorder: 1px solid @borderColor; + +/* Content */ +@contentFontSize: 1em; +@contentPadding: 1.5rem; +@contentLineHeight: 1.4; +@contentBackground: #FFFFFF; + +/* Image / Description */ +@imageWidth: ''; +@imageIconSize: 8rem; +@imageVerticalAlign: top; + +@descriptionDistance: 2em; +@descriptionMinWidth: ''; +@descriptionWidth: auto; +@descriptionVerticalAlign: top; + +/* Modal Actions */ +@actionBorder: 1px solid @borderColor; +@actionBackground: @offWhite; +@actionPadding: 1rem 1rem; +@actionAlign: right; + +@buttonDistance: 0.75em; + +/* Inner Close Position (Tablet/Mobile) */ +@innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em)); +@innerCloseRight: 1rem; +@innerCloseColor: @textColor; + +/* Mobile Positions */ +@mobileHeaderPadding: 0.75rem 1rem; +@mobileContentPadding: 1rem; +@mobileImagePadding: 0rem 0rem 1rem; +@mobileDescriptionPadding: 1rem 0rem ; +@mobileButtonDistance: 1rem; +@mobileActionPadding: 1rem 1rem (1rem - @mobileButtonDistance); +@mobileImageIconSize: 5rem; +@mobileCloseTop: 0.5rem; +@mobileCloseRight: 0.5rem; + +/* Responsive Widths */ +@mobileWidth: 95%; +@tabletWidth: 88%; +@computerWidth: 850px; +@largeMonitorWidth: 900px; +@widescreenMonitorWidth: 950px; + +@mobileMargin: 0em 0em 0em 0em; +@tabletMargin: 0em 0em 0em 0em; +@computerMargin: 0em 0em 0em 0em; +@largeMonitorMargin: 0em 0em 0em 0em; +@widescreenMonitorMargin: 0em 0em 0em 0em; + +@fullScreenWidth: 95%; +@fullScreenOffset: 0em; +@fullScreenMargin: 1em auto; + +/* Coupling */ +@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); + +/*------------------- + States +--------------------*/ + +@loadingZIndex: -1; + +/*------------------- + Types +--------------------*/ + +/* Basic */ +@basicModalHeaderColor: @white; +@basicModalColor: @white; +@basicModalCloseTop: 1rem; +@basicModalCloseRight: 1.5rem; +@basicInnerCloseColor: @white; + +@basicInvertedModalColor: @textColor; +@basicInvertedModalHeaderColor: @darkTextColor; + +/* Top Aligned */ +@topAlignedMargin: 5vh; +@mobileTopAlignedMargin: 1rem; + +/* Scrolling Margin */ +@scrollingMargin: 1rem; +@mobileScrollingMargin: @mobileTopAlignedMargin; + +/* Scrolling Content */ +@scrollingContentMaxHeight: calc(80vh - 10em); + +/*------------------- + Variations +--------------------*/ + +/* Size Widths */ +@miniRatio: 0.4; +@tinyRatio: 0.6; +@smallRatio: 0.8; +@largeRatio: 1.2; + +/* Derived Responsive Sizes */ +@miniHeaderSize: 1.3em; +@miniMobileWidth: @mobileWidth; +@miniTabletWidth: (@tabletWidth * @miniRatio); +@miniComputerWidth: (@computerWidth * @miniRatio); +@miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio); +@miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio); + +@miniMobileMargin: 0em 0em 0em 0em; +@miniTabletMargin: 0em 0em 0em 0em; +@miniComputerMargin: 0em 0em 0em 0em; +@miniLargeMonitorMargin: 0em 0em 0em 0em; +@miniWidescreenMonitorMargin: 0em 0em 0em 0em; + +@tinyHeaderSize: 1.3em; +@tinyMobileWidth: @mobileWidth; +@tinyTabletWidth: (@tabletWidth * @tinyRatio); +@tinyComputerWidth: (@computerWidth * @tinyRatio); +@tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio); +@tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio); + +@tinyMobileMargin: 0em 0em 0em 0em; +@tinyTabletMargin: 0em 0em 0em 0em; +@tinyComputerMargin: 0em 0em 0em 0em; +@tinyLargeMonitorMargin: 0em 0em 0em 0em; +@tinyWidescreenMonitorMargin: 0em 0em 0em 0em; + +@smallHeaderSize: 1.3em; +@smallMobileWidth: @mobileWidth; +@smallTabletWidth: (@tabletWidth * @smallRatio); +@smallComputerWidth: (@computerWidth * @smallRatio); +@smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio); +@smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio); + +@smallMobileMargin: 0em 0em 0em 0em; +@smallTabletMargin: 0em 0em 0em 0em; +@smallComputerMargin: 0em 0em 0em 0em; +@smallLargeMonitorMargin: 0em 0em 0em 0em; +@smallWidescreenMonitorMargin: 0em 0em 0em 0em; + +@largeHeaderSize: 1.6em; +@largeMobileWidth: @mobileWidth; +@largeTabletWidth: @tabletWidth; +@largeComputerWidth: (@computerWidth * @largeRatio); +@largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio); +@largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio); + +@largeMobileMargin: 0em 0em 0em 0em; +@largeTabletMargin: 0em 0em 0em 0em; +@largeComputerMargin: 0em 0em 0em 0em; +@largeLargeMonitorMargin: 0em 0em 0em 0em; +@largeWidescreenMonitorMargin: 0em 0em 0em 0em; diff --git a/static/semantic/src/themes/default/modules/nag.overrides b/static/semantic/src/themes/default/modules/nag.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/nag.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/nag.variables b/static/semantic/src/themes/default/modules/nag.variables new file mode 100755 index 0000000..9b45789 --- /dev/null +++ b/static/semantic/src/themes/default/modules/nag.variables @@ -0,0 +1,74 @@ +/******************************* + Nag +*******************************/ + +/*-------------- + Collection +---------------*/ + +@position: relative; +@width: 100%; +@zIndex: 999; +@margin: 0em; + +@background: #555555; +@opacity: 0.95; +@minHeight: 0em; +@padding: 0.75em 1em; +@lineHeight: 1em; +@boxShadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); + +@fontSize: 1rem; +@textAlign: center; +@color: @textColor; + +@transition: 0.2s background ease; + + +/*-------------- + Elements +---------------*/ + +/* Title */ +@titleColor: @white; +@titleMargin: 0em 0.5em; + +@closeSize: 1em; +@closeMargin: (-@closeSize / 2) 0em 0em; +@closeTop: 50%; +@closeRight: 1em; +@closeColor: @white; +@closeTransition: opacity 0.2s ease; +@closeOpacity: 0.4; + + +/*-------------- + States +---------------*/ + +/* Hover */ +@nagHoverBackground: @background; +@nagHoverOpacity: 1; + +@closeHoverOpacity: 1; + +/*-------------- + Variations +---------------*/ + +/* Top / Bottom */ +@top: 0em; +@bottom: 0em; +@borderRadius: @defaultBorderRadius; +@topBorderRadius: 0em 0em @borderRadius @borderRadius; +@bottomBorderRadius: @borderRadius @borderRadius 0em 0em; + +/* Inverted */ +@invertedBackground: @darkWhite; + +/*-------------- + Plural +---------------*/ + +@groupedBorderRadius: 0em; + diff --git a/static/semantic/src/themes/default/modules/popup.overrides b/static/semantic/src/themes/default/modules/popup.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/popup.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/popup.variables b/static/semantic/src/themes/default/modules/popup.variables new file mode 100755 index 0000000..52b33da --- /dev/null +++ b/static/semantic/src/themes/default/modules/popup.variables @@ -0,0 +1,138 @@ +/******************************* + Popup +*******************************/ + +/*------------------- + Element +--------------------*/ + +@zIndex: 1900; +@background: @white; + +@maxWidth: 250px; +@borderColor: @solidBorderColor; +@borderWidth: 1px; +@boxShadow: @floatingShadow; +@color: @textColor; + +@verticalPadding: 0.833em; +@horizontalPadding: 1em; +@fontWeight: @normal; +@fontStyle: @normal; +@borderRadius: @defaultBorderRadius; + +/*------------------- + Parts +--------------------*/ + +/* Placement */ +@arrowSize: @relative10px; +@arrowWidth: 1em; +@arrowDistanceFromEdge: 1em; +@boxArrowOffset: 0em; +@popupDistanceAway: @arrowSize; + + +/* Header */ +@headerFontFamily: @headerFont; +@headerFontWeight: @bold; +@headerFontSize: @relativeLarge; +@headerDistance: @relative7px; +@headerLineHeight: 1.2; + +/* Content Border */ +@border: @borderWidth solid @borderColor; + +/* Arrow */ +@arrowBackground: @background; +@arrowZIndex: 2; +@arrowJitter: 0.05em; +@arrowOffset: -(@arrowSize / 2) + @arrowJitter; + +@arrowStroke: @borderWidth; +@arrowColor: darken(@borderColor, 10); + +/* Arrow color by position */ +@arrowTopBackground: @arrowBackground; +@arrowCenterBackground: @arrowBackground; +@arrowBottomBackground: @arrowBackground; + +@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor; +@leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor; +@rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor; +@bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor; + +/*------------------- + Types +--------------------*/ + +/* Tooltip */ +@tooltipBackground: @background; +@tooltipBorderRadius: @borderRadius; +@tooltipPadding: @verticalPadding @horizontalPadding; +@tooltipFontWeight: @fontWeight; +@tooltipFontStyle: @fontStyle; +@tooltipColor: @color; +@tooltipBorder: @border; +@tooltipBoxShadow: @boxShadow; +@tooltipMaxWidth: none; +@tooltipFontSize: @medium; +@tooltipLineHeight: @lineHeight; +@tooltipDistanceAway: @relative7px; +@tooltipZIndex: 1; +@tooltipDuration: @defaultDuration; +@tooltipEasing: @defaultEasing; + +/* Inverted */ +@tooltipInvertedBackground: @invertedBackground; +@tooltipInvertedColor: @invertedColor; +@tooltipInvertedBorder: @invertedBorder; +@tooltipInvertedBoxShadow: @invertedBoxShadow; +@tooltipInvertedHeaderBackground: @invertedHeaderBackground; +@tooltipInvertedHeaderColor: @invertedHeaderColor; + +/* Arrow */ +@tooltipArrowVerticalOffset: -@2px; +@tooltipArrowHorizontalOffset: -@1px; +@tooltipArrowBoxShadow: @arrowBoxShadow; +@tooltipArrowBackground: @arrowBackground; +@tooltipArrowTopBackground: @arrowTopBackground; +@tooltipArrowCenterBackground: @arrowCenterBackground; +@tooltipArrowBottomBackground: @arrowBottomBackground; + +/*------------------- + Coupling +--------------------*/ + +/* Grid Inside Popup */ +@nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */ +@nestedGridWidth: ~"calc(100% + 1.75rem)"; + +/*------------------- + States +--------------------*/ + +@loadingZIndex: -1; + +/*------------------- + Variations +--------------------*/ + +/* Wide */ +@wideWidth: 350px; +@veryWideWidth: 550px; + +/* Inverted */ +@invertedBackground: @black; +@invertedColor: @white; +@invertedBorder: none; +@invertedBoxShadow: none; + +@invertedHeaderBackground: none; +@invertedHeaderColor: @white; +@invertedArrowColor: @invertedBackground; + +/* Arrow color by position */ +@invertedArrowTopBackground: @invertedBackground; +@invertedArrowCenterBackground: @invertedBackground; +@invertedArrowBottomBackground: @invertedBackground; diff --git a/static/semantic/src/themes/default/modules/progress.overrides b/static/semantic/src/themes/default/modules/progress.overrides new file mode 100755 index 0000000..cdba171 --- /dev/null +++ b/static/semantic/src/themes/default/modules/progress.overrides @@ -0,0 +1,3 @@ +/******************************* + Progress +*******************************/ diff --git a/static/semantic/src/themes/default/modules/progress.variables b/static/semantic/src/themes/default/modules/progress.variables new file mode 100755 index 0000000..9adb87a --- /dev/null +++ b/static/semantic/src/themes/default/modules/progress.variables @@ -0,0 +1,113 @@ +/******************************* + Progress +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalSpacing: 1em; +@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing); +@firstMargin: 0em 0em (@labelHeight + @verticalSpacing); +@lastMargin: 0em 0em (@labelHeight); + +@background: @strongTransparentBlack; +@border: none; +@boxShadow: none; +@padding: 0em; +@borderRadius: @defaultBorderRadius; + +/* Bar */ +@barPosition: relative; +@barHeight: 1.75em; +@barBackground: #888888; +@barBorderRadius: @borderRadius; +@barTransitionEasing: @defaultEasing; +@barTransitionDuration: @defaultDuration; +@barTransition: + width @barTransitionDuration @barTransitionEasing, + background-color @barTransitionDuration @barTransitionEasing +; +@barInitialWidth: 0%; +@barMinWidth: 2em; + +/* Progress Bar Label */ +@progressWidth: auto; +@progressSize: @relativeSmall; +@progressPosition: absolute; +@progressTop: 50%; +@progressRight: 0.5em; +@progressLeft: auto; +@progressBottom: auto; +@progressOffset: -0.5em; +@progressColor: @invertedLightTextColor; +@progressTextShadow: none; +@progressFontWeight: @bold; +@progressTextAlign: left; + +/* Label */ +@labelWidth: 100%; +@labelHeight: 1.5em; +@labelSize: 1em; +@labelPosition: absolute; +@labelTop: 100%; +@labelLeft: 0%; +@labelRight: auto; +@labelBottom: auto; +@labelOffset: (@labelHeight - 1.3em); +@labelColor: @textColor; +@labelTextShadow: none; +@labelFontWeight: @bold; +@labelTextAlign: center; +@labelTransition: color 0.4s @defaultEasing; + +/*------------------- + Types +--------------------*/ + +@indicatingFirstColor: #D95C5C; +@indicatingSecondColor: #EFBC72; +@indicatingThirdColor: #E6BB48; +@indicatingFourthColor: #DDC928; +@indicatingFifthColor: #B4D95C; +@indicatingSixthColor: #66DA81; + +@indicatingFirstLabelColor: @textColor; +@indicatingSecondLabelColor: @textColor; +@indicatingThirdLabelColor: @textColor; +@indicatingFourthLabelColor: @textColor; +@indicatingFifthLabelColor: @textColor; +@indicatingSixthLabelColor: @textColor; + +/*------------------- + States +--------------------*/ + +/* Active */ +@activePulseColor: @white; +@activePulseMaxOpacity: 0.3; +@activePulseDuration: 2s; +@activeMinWidth: @barMinWidth; + + +/*------------------- + Variations +--------------------*/ + +/* Attached */ +@attachedBackground: transparent; +@attachedHeight: 0.2rem; +@attachedBorderRadius: @borderRadius; + +/* Inverted */ +@invertedBackground: @transparentWhite; +@invertedBorder: none; +@invertedBarBackground: @barBackground; +@invertedProgressColor: @offWhite; +@invertedLabelColor: @white; + +/* Sizing */ +@tinyBarHeight: 0.5em; +@smallBarHeight: 1em; +@largeBarHeight: 2.5em; +@bigBarHeight: 3.5em; diff --git a/static/semantic/src/themes/default/modules/rating.overrides b/static/semantic/src/themes/default/modules/rating.overrides new file mode 100755 index 0000000..37ce3b6 --- /dev/null +++ b/static/semantic/src/themes/default/modules/rating.overrides @@ -0,0 +1,68 @@ +/******************************* + Theme Overrides +*******************************/ + +@font-face { + font-family: 'Rating'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjCBsAAAC8AAAAYGNtYXCj2pm8AAABHAAAAKRnYXNwAAAAEAAAAcAAAAAIZ2x5ZlJbXMYAAAHIAAARnGhlYWQBGAe5AAATZAAAADZoaGVhA+IB/QAAE5wAAAAkaG10eCzgAEMAABPAAAAAcGxvY2EwXCxOAAAUMAAAADptYXhwACIAnAAAFGwAAAAgbmFtZfC1n04AABSMAAABPHBvc3QAAwAAAAAVyAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADxZQHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAJAAAAAgACAABAAAAAEAIOYF8AbwDfAj8C7wbvBw8Irwl/Cc8SPxZf/9//8AAAAAACDmAPAE8AzwI/Au8G7wcPCH8JfwnPEj8WT//f//AAH/4xoEEAYQAQ/sD+IPow+iD4wPgA98DvYOtgADAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAP/tAgAB0wAKABUAAAEvAQ8BFwc3Fyc3BQc3Jz8BHwEHFycCALFPT7GAHp6eHoD/AHAWW304OH1bFnABGRqgoBp8sFNTsHyyOnxYEnFxElh8OgAAAAACAAD/7QIAAdMACgASAAABLwEPARcHNxcnNwUxER8BBxcnAgCxT0+xgB6enh6A/wA4fVsWcAEZGqCgGnywU1OwfLIBHXESWHw6AAAAAQAA/+0CAAHTAAoAAAEvAQ8BFwc3Fyc3AgCxT0+xgB6enh6AARkaoKAafLBTU7B8AAAAAAEAAAAAAgABwAArAAABFA4CBzEHDgMjIi4CLwEuAzU0PgIzMh4CFz4DMzIeAhUCAAcMEgugBgwMDAYGDAwMBqALEgwHFyg2HhAfGxkKChkbHxAeNigXAS0QHxsZCqAGCwkGBQkLBqAKGRsfEB42KBcHDBILCxIMBxcoNh4AAAAAAgAAAAACAAHAACsAWAAAATQuAiMiDgIHLgMjIg4CFRQeAhcxFx4DMzI+Aj8BPgM1DwEiFCIGMTAmIjQjJy4DNTQ+AjMyHgIfATc+AzMyHgIVFA4CBwIAFyg2HhAfGxkKChkbHxAeNigXBwwSC6AGDAwMBgYMDAwGoAsSDAdbogEBAQEBAaIGCgcEDRceEQkREA4GLy8GDhARCREeFw0EBwoGAS0eNigXBwwSCwsSDAcXKDYeEB8bGQqgBgsJBgUJCwagChkbHxA+ogEBAQGiBg4QEQkRHhcNBAcKBjQ0BgoHBA0XHhEJERAOBgABAAAAAAIAAcAAMQAAARQOAgcxBw4DIyIuAi8BLgM1ND4CMzIeAhcHFwc3Jzc+AzMyHgIVAgAHDBILoAYMDAwGBgwMDAagCxIMBxcoNh4KFRMSCC9wQLBwJwUJCgkFHjYoFwEtEB8bGQqgBgsJBgUJCwagChkbHxAeNigXAwUIBUtAoMBAOwECAQEXKDYeAAABAAAAAAIAAbcAKgAAEzQ3NjMyFxYXFhcWFzY3Njc2NzYzMhcWFRQPAQYjIi8BJicmJyYnJicmNQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGBwExPyMkBgYLCgkKCgoKCQoLBgYkIz8/QawFBawCBgUNDg4OFRQTAAAAAQAAAA0B2wHSACYAABM0PwI2FzYfAhYVFA8BFxQVFAcGByYvAQcGByYnJjU0PwEnJjUAEI9BBQkIBkCPEAdoGQMDBgUGgIEGBQYDAwEYaAcBIwsCFoEMAQEMgRYCCwYIZJABBQUFAwEBAkVFAgEBAwUFAwOQZAkFAAAAAAIAAAANAdsB0gAkAC4AABM0PwI2FzYfAhYVFA8BFxQVFAcmLwEHBgcmJyY1ND8BJyY1HwEHNxcnNy8BBwAQj0EFCQgGQI8QB2gZDAUGgIEGBQYDAwEYaAc/WBVsaxRXeDY2ASMLAhaBDAEBDIEWAgsGCGSQAQUNAQECRUUCAQEDBQUDA5BkCQURVXg4OHhVEW5uAAABACMAKQHdAXwAGgAANzQ/ATYXNh8BNzYXNh8BFhUUDwEGByYvASY1IwgmCAwLCFS8CAsMCCYICPUIDAsIjgjSCwkmCQEBCVS7CQEBCSYJCg0H9gcBAQePBwwAAAEAHwAfAXMBcwAsAAA3ND8BJyY1ND8BNjMyHwE3NjMyHwEWFRQPARcWFRQPAQYjIi8BBwYjIi8BJjUfCFRUCAgnCAwLCFRUCAwLCCcICFRUCAgnCAsMCFRUCAsMCCcIYgsIVFQIDAsIJwgIVFQICCcICwwIVFQICwwIJwgIVFQICCcIDAAAAAACAAAAJQFJAbcAHwArAAA3NTQ3NjsBNTQ3NjMyFxYdATMyFxYdARQHBiMhIicmNTczNTQnJiMiBwYdAQAICAsKJSY1NCYmCQsICAgIC/7tCwgIW5MWFR4fFRZApQsICDc0JiYmJjQ3CAgLpQsICAgIC8A3HhYVFRYeNwAAAQAAAAcBbgG3ACEAADcRNDc2NzYzITIXFhcWFREUBwYHBiMiLwEHBiMiJyYnJjUABgUKBgYBLAYGCgUGBgUKBQcOCn5+Cg4GBgoFBicBcAoICAMDAwMICAr+kAoICAQCCXl5CQIECAgKAAAAAwAAACUCAAFuABgAMQBKAAA3NDc2NzYzMhcWFxYVFAcGBwYjIicmJyY1MxYXFjMyNzY3JicWFRQHBiMiJyY1NDcGBzcUFxYzMjc2NTQ3NjMyNzY1NCcmIyIHBhUABihDREtLREMoBgYoQ0RLS0RDKAYlJjk5Q0M5OSYrQREmJTU1JSYRQSuEBAQGBgQEEREZBgQEBAQGJBkayQoKQSgoKChBCgoKCkEoJycoQQoKOiMjIyM6RCEeIjUmJSUmNSIeIUQlBgQEBAQGGBIRBAQGBgQEGhojAAAABQAAAAkCAAGJACwAOABRAGgAcAAANzQ3Njc2MzIXNzYzMhcWFxYXFhcWFxYVFDEGBwYPAQYjIicmNTQ3JicmJyY1MxYXNyYnJjU0NwYHNxQXFjMyNzY1NDc2MzI3NjU0JyYjIgcGFRc3Njc2NyYnNxYXFhcWFRQHBgcGBwYjPwEWFRQHBgcABitBQU0ZGhADBQEEBAUFBAUEBQEEHjw8Hg4DBQQiBQ0pIyIZBiUvSxYZDg4RQSuEBAQGBgQEEREZBgQEBAQGJBkaVxU9MzQiIDASGxkZEAYGCxQrODk/LlACFxYlyQsJQycnBRwEAgEDAwIDAwIBAwUCNmxsNhkFFAMFBBUTHh8nCQtKISgSHBsfIh4hRCUGBAQEBAYYEhEEBAYGBAQaGiPJJQUiIjYzISASGhkbCgoKChIXMRsbUZANCyghIA8AAAMAAAAAAbcB2wA5AEoAlAAANzU0NzY7ATY3Njc2NzY3Njc2MzIXFhcWFRQHMzIXFhUUBxYVFAcUFRQHFgcGKwEiJyYnJisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzMyFxYXFhcWFxYXFhcWOwEyNTQnNjc2NTQnNjU0JyYnNjc2NTQnJisBNDc2NTQnJiMGBwYHBgcGBwYHBgcGBwYHBgcGBwYrARUACwoQTgodEQ4GBAMFBgwLDxgTEwoKDjMdFhYOAgoRARkZKCUbGxsjIQZSEAoLJQUFCAcGBQUGBwgFBUkJBAUFBAQHBwMDBwcCPCUjNwIJBQUFDwMDBAkGBgsLDmUODgoJGwgDAwYFDAYQAQUGAwQGBgYFBgUGBgQJSbcPCwsGJhUPCBERExMMCgkJFBQhGxwWFR4ZFQoKFhMGBh0WKBcXBgcMDAoLDxIHBQYGBQcIBQYGBQgSAQEBAQICAQEDAgEULwgIBQoLCgsJDhQHCQkEAQ0NCg8LCxAdHREcDQ4IEBETEw0GFAEHBwUECAgFBQUFAgO3AAADAAD/2wG3AbcAPABNAJkAADc1NDc2OwEyNzY3NjsBMhcWBxUWFRQVFhUUBxYVFAcGKwEWFRQHBgcGIyInJicmJyYnJicmJyYnIyInJjU3FBcWMzI3NjU0JyYjIgcGFRczMhcWFxYXFhcWFxYXFhcWFxYXFhcWFzI3NjU0JyY1MzI3NjU0JyYjNjc2NTQnNjU0JyYnNjU0JyYrASIHIgcGBwYHBgcGIwYrARUACwoQUgYhJRsbHiAoGRkBEQoCDhYWHTMOCgoTExgPCwoFBgIBBAMFDhEdCk4QCgslBQUIBwYFBQYHCAUFSQkEBgYFBgUGBgYEAwYFARAGDAUGAwMIGwkKDg5lDgsLBgYJBAMDDwUFBQkCDg4ZJSU8AgcHAwMHBwQEBQUECbe3DwsKDAwHBhcWJwIWHQYGExYKChUZHhYVHRoiExQJCgsJDg4MDAwNBg4WJQcLCw+kBwUGBgUHCAUGBgUIpAMCBQYFBQcIBAUHBwITBwwTExERBw0OHBEdHRALCw8KDQ0FCQkHFA4JCwoLCgUICBgMCxUDAgEBAgMBAQG3AAAAAQAAAA0A7gHSABQAABM0PwI2FxEHBgcmJyY1ND8BJyY1ABCPQQUJgQYFBgMDARhoBwEjCwIWgQwB/oNFAgEBAwUFAwOQZAkFAAAAAAIAAAAAAgABtwAqAFkAABM0NzYzMhcWFxYXFhc2NzY3Njc2MzIXFhUUDwEGIyIvASYnJicmJyYnJjUzFB8BNzY1NCcmJyYnJicmIyIHBgcGBwYHBiMiJyYnJicmJyYjIgcGBwYHBgcGFQAkJUARExIQEAsMCgoMCxAQEhMRQCUkQbIGBwcGsgMFBQsKCQkGByU1pqY1BgYJCg4NDg0PDhIRDg8KCgcFCQkFBwoKDw4REg4PDQ4NDgoJBgYBMT8jJAYGCwoJCgoKCgkKCwYGJCM/P0GsBQWsAgYFDQ4ODhUUEzA1oJ82MBcSEgoLBgcCAgcHCwsKCQgHBwgJCgsLBwcCAgcGCwoSEhcAAAACAAAABwFuAbcAIQAoAAA3ETQ3Njc2MyEyFxYXFhURFAcGBwYjIi8BBwYjIicmJyY1PwEfAREhEQAGBQoGBgEsBgYKBQYGBQoFBw4Kfn4KDgYGCgUGJZIZef7cJwFwCggIAwMDAwgICv6QCggIBAIJeXkJAgQICAoIjRl0AWP+nQAAAAABAAAAJQHbAbcAMgAANzU0NzY7ATU0NzYzMhcWHQEUBwYrASInJj0BNCcmIyIHBh0BMzIXFh0BFAcGIyEiJyY1AAgIC8AmJjQ1JiUFBQgSCAUFFhUfHhUWHAsICAgIC/7tCwgIQKULCAg3NSUmJiU1SQgFBgYFCEkeFhUVFh43CAgLpQsICAgICwAAAAIAAQANAdsB0gAiAC0AABM2PwI2MzIfAhYXFg8BFxYHBiMiLwEHBiMiJyY/AScmNx8CLwE/AS8CEwEDDJBABggJBUGODgIDCmcYAgQCCAMIf4IFBgYEAgEZaQgC7hBbEgINSnkILgEBJggCFYILC4IVAggICWWPCgUFA0REAwUFCo9lCQipCTBmEw1HEhFc/u0AAAADAAAAAAHJAbcAFAAlAHkAADc1NDc2OwEyFxYdARQHBisBIicmNTcUFxYzMjc2NTQnJiMiBwYVFzU0NzYzNjc2NzY3Njc2NzY3Njc2NzY3NjMyFxYXFhcWFxYXFhUUFRQHBgcGBxQHBgcGBzMyFxYVFAcWFRYHFgcGBxYHBgcjIicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQFBQgGDw8OFAkFBAQBAQMCAQIEBAYFBw4KCgcHBQQCAwEBAgMDAgYCAgIBAU8XEBAQBQEOBQUECwMREiYlExYXDAwWJAoHBQY3twcGBQUGB7cIBQUFBQgkBwYFBQYHCAUGBgUIJLcHBQYBEBATGQkFCQgGBQwLBgcICQUGAwMFBAcHBgYICQQEBwsLCwYGCgIDBAMCBBEQFhkSDAoVEhAREAsgFBUBBAUEBAcMAQUFCAAAAAADAAD/2wHJAZIAFAAlAHkAADcUFxYXNxY3Nj0BNCcmBycGBwYdATc0NzY3FhcWFRQHBicGJyY1FzU0NzY3Fjc2NzY3NjcXNhcWBxYXFgcWBxQHFhUUBwYHJxYXFhcWFRYXFhcWFRQVFAcGBwYHBgcGBwYnBicmJyYnJicmJyYnJicmJyYnJiciJyY1AAUGB1MHBQYGBQdTBwYFJQUFCAcGBQUGBwgFBWQGBQcKJBYMDBcWEyUmEhEDCwQFBQ4BBRAQEBdPAQECAgIGAgMDAgEBAwIEBQcHCgoOBwUGBAQCAQIDAQEEBAUJFA4PDwYIBQWlBwYFAQEBBwQJtQkEBwEBAQUGB7eTBwYEAQEEBgcJBAYBAQYECZS4BwYEAgENBwUCBgMBAQEXEyEJEhAREBcIDhAaFhEPAQEFAgQCBQELBQcKDAkIBAUHCgUGBwgDBgIEAQEHBQkIBwUMCwcECgcGCRoREQ8CBgQIAAAAAQAAAAEAAJth57dfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAAAAAAoAFAAeAEoAcACKAMoBQAGIAcwCCgJUAoICxgMEAzoDpgRKBRgF7AYSBpgG2gcgB2oIGAjOAAAAAQAAABwAmgAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AABcUAAoAAAAAFswAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAEuEAABLho6TvIE9TLzIAABPYAAAAYAAAAGAIIwgbY21hcAAAFDgAAACkAAAApKPambxnYXNwAAAU3AAAAAgAAAAIAAAAEGhlYWQAABTkAAAANgAAADYBGAe5aGhlYQAAFRwAAAAkAAAAJAPiAf1obXR4AAAVQAAAAHAAAABwLOAAQ21heHAAABWwAAAABgAAAAYAHFAAbmFtZQAAFbgAAAE8AAABPPC1n05wb3N0AAAW9AAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLZviU+HQFHQAAAP0PHQAAAQIRHQAAAAkdAAAS2BIAHQEBBw0PERQZHiMoLTI3PEFGS1BVWl9kaW5zeH2Ch4xyYXRpbmdyYXRpbmd1MHUxdTIwdUU2MDB1RTYwMXVFNjAydUU2MDN1RTYwNHVFNjA1dUYwMDR1RjAwNXVGMDA2dUYwMEN1RjAwRHVGMDIzdUYwMkV1RjA2RXVGMDcwdUYwODd1RjA4OHVGMDg5dUYwOEF1RjA5N3VGMDlDdUYxMjN1RjE2NHVGMTY1AAACAYkAGgAcAgABAAQABwAKAA0AVgCWAL0BAgGMAeQCbwLwA4cD5QR0BQMFdgZgB8MJkQtxC7oM2Q1jDggOmRAYEZr8lA78lA78lA77lA74lPetFftFpTz3NDz7NPtFcfcU+xBt+0T3Mt73Mjht90T3FPcQBfuU+0YV+wRRofcQMOP3EZ3D9wXD+wX3EXkwM6H7EPsExQUO+JT3rRX7RaU89zQ8+zT7RXH3FPsQbftE9zLe9zI4bfdE9xT3EAX7lPtGFYuLi/exw/sF9xF5MDOh+xD7BMUFDviU960V+0WlPPc0PPs0+0Vx9xT7EG37RPcy3vcyOG33RPcU9xAFDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iu2i7J4pm6mqLKetovci81JizoIDviU98EVi9xJzTqLYItkeHBucKhknmCLOotJSYs6i2CeZKhwCIuL9zT7NAWbe5t7m4ubi5ubm5sI9zT3NAWopp6yi7YIME0V+zb7NgWKioqKiouKi4qMiowI+zb3NgV6m4Ghi6OLubCwuYuji6GBm3oIule6vwWbnKGVo4u5i7Bmi12Lc4F1ensIDviU98EVi2B4ZG5wCIuL+zT7NAV7e3t7e4t7i3ube5sI+zT3NAVupniyi7aL3M3N3Iuni6WDoX4IXED3BEtL+zT3RPdU+wTLssYFl46YjZiL3IvNSYs6CA6L98UVi7WXrKOio6Otl7aLlouXiZiHl4eWhZaEloSUhZKFk4SShZKEkpKSkZOSkpGUkZaSCJaSlpGXj5iPl42Wi7aLrX+jc6N0l2qLYYthdWBgYAj7RvtABYeIh4mGi4aLh42Hjgj7RvdABYmNiY2Hj4iOhpGDlISUhZWFlIWVhpaHmYaYiZiLmAgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuHioiJiImIiIqHi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOZ4v3txWLkpCPlo0I9yOgzPcWBY6SkI+Ri5CLkIePhAjL+xb3I3YFlomQh4uEi4aJh4aGCCMmpPsjBYuKi4mLiIuCh4aDi4iLh4yHjQj7FM/7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwjKeRXjN3b7DfcAxPZSd/cN4t/7DJ1V9wFV+wEFDq73ZhWLk42RkZEIsbIFkZCRjpOLkouSiJCGCN8291D3UAWQkJKOkouTi5GIkYYIsWQFkYaNhIuEi4OJhYWFCPuJ+4kFhYWFiYOLhIuEjYaRCPsi9yIFhZCJkouSCA77AartFYuSjpKQkAjf3zffBYaQiJKLk4uSjpKQkAiysgWRkJGOk4uSi5KIkIYI3zff3wWQkJKOk4uSi5KIkIYIsmQFkIaOhIuEi4OIhIaGCDc33zcFkIaOhIuEi4OIhYaFCGRkBYaGhIiEi4OLhI6GkAg33zc3BYaGhIiEi4OLhY6FkAhksgWGkYiRi5MIDvtLi8sVi/c5BYuSjpKQkJCQko6SiwiVi4vCBYuul6mkpKSkqpiui66LqX6kcqRymG2LaAiLVJSLBZKLkoiQhpCGjoSLhAiL+zkFi4OIhYaGhoWEiYSLCPuniwWEi4SNhpGGkIiRi5MI5vdUFfcni4vCBYufhJx8mn2ZepJ3i3aLeoR9fX18g3qLdwiLVAUO+yaLshWL+AQFi5GNkY+RjpCQj5KNj42PjI+LCPfAiwWPi4+Kj4mRiZCHj4aPhY2Fi4UIi/wEBYuEiYWHhoeGhoeFiIiKhoqHi4GLhI6EkQj7EvcN+xL7DQWEhYOIgouHi4eLh42EjoaPiJCHkImRi5IIDov3XRWLko2Rj5Kltq+vuKW4pbuZvYu9i7t9uHG4ca9npWCPhI2Fi4SLhYmEh4RxYGdoXnAIXnFbflmLWYtbmF6lXqZnrnG2h5KJkouRCLCLFaRkq2yxdLF0tH+4i7iLtJexorGiq6qksm64Z61goZZ3kXaLdItnfm1ycnJybX9oiwhoi22XcqRypH6pi6+LopGglp9gdWdpbl4I9xiwFYuHjIiOiI6IjoqPi4+LjoyOjo2OjY6Lj4ubkJmXl5eWmZGbi4+LjoyOjo2OjY6LjwiLj4mOiY6IjYiNh4tzi3eCenp6eoJ3i3MIDov3XRWLko2Sj5GouK+utqW3pbqYvouci5yJnIgIm6cFjY6NjI+LjIuNi42JjYqOio+JjomOiY6KjomOiY6JjoqNioyKjomMiYuHi4qLiouLCHdnbVVjQ2NDbVV3Zwh9cgWJiIiJiIuJi36SdJiIjYmOi46LjY+UlJlvl3KcdJ90oHeie6WHkYmSi5IIsIsVqlq0Z711CKGzBXqXfpqCnoKdhp6LoIuikaCWn2B1Z2luXgj3GLAVi4eMiI6IjoiOio+Lj4uOjI6OjY6NjouPi5uQmZeXl5aZkZuLj4uOjI6OjY6NjouPCIuPiY6JjoiNiI2Hi3OLd4J6enp6gneLcwji+10VoLAFtI+wmK2hrqKnqKKvdq1wp2uhCJ2rBZ1/nHycepx6mHqWeY+EjYWLhIuEiYWHhIR/gH1+fG9qaXJmeWV5Y4Jhiwi53BXb9yQFjIKMg4uEi3CDc3x1fHV3fHOBCA6L1BWL90sFi5WPlJKSkpKTj5aLCNmLBZKPmJqepJaZlZeVlY+Qj5ONl42WjpeOmI+YkZWTk5OSk46Vi5uLmYiYhZiFlIGSfgiSfo55i3WLeYd5gXgIvosFn4uchJl8mn2Seot3i3qGfIJ9jYSLhYuEi3yIfoR+i4eLh4uHi3eGen99i3CDdnt8CHt8dYNwiwhmiwV5i3mNeY95kHeRc5N1k36Ph4sIOYsFgIuDjoSShJKHlIuVCLCdFYuGjIePiI+Hj4mQi5CLj42Pj46OjY+LkIuQiZCIjoePh42Gi4aLh4mHh4eIioaLhgjUeRWUiwWNi46Lj4qOi4+KjYqOi4+Kj4mQio6KjYqNio+Kj4mQio6KjIqzfquEpIsIrosFr4uemouri5CKkYqQkY6QkI6SjpKNkouSi5KJkoiRlZWQlouYi5CKkImRiZGJj4iOCJGMkI+PlI+UjZKLkouViJODk4SSgo+CiwgmiwWLlpCalJ6UnpCbi5aLnoiYhJSFlH+QeYuGhoeDiYCJf4h/h3+IfoWBg4KHh4SCgH4Ii4qIiYiGh4aIh4mIiIiIh4eGh4aHh4eHiIiHiIeHiIiHiIeKh4mIioiLCIKLi/tLBQ6L90sVi/dLBYuVj5OSk5KSk46WiwjdiwWPi5iPoZOkk6CRnZCdj56Nn4sIq4sFpougg5x8m3yTd4txCIuJBZd8kHuLd4uHi4eLh5J+jn6LfIuEi4SJhZR9kHyLeot3hHp8fH19eoR3iwhYiwWVeI95i3mLdIh6hH6EfoKBfoV+hX2He4uBi4OPg5KFkYaTh5SHlYiTipOKk4qTiJMIiZSIkYiPgZSBl4CaeKR+moSPCD2LBYCLg4+EkoSSh5SLlQiw9zgVi4aMh4+Ij4ePiZCLkIuPjY+Pjo6Nj4uQi5CJkIiOh4+HjYaLhouHiYeHh4iKhouGCNT7OBWUiwWOi46Kj4mPio+IjoiPh4+IjoePiI+Hj4aPho6HjoiNiI6Hj4aOho6Ii4qWfpKDj4YIk4ORgY5+j36OgI1/jYCPg5CGnYuXj5GUkpSOmYuei5aGmoKfgp6GmouWCPCLBZSLlI+SkpOTjpOLlYuSiZKHlIeUho+Fi46PjY+NkY2RjJCLkIuYhpaBlY6RjZKLkgiLkomSiJKIkoaQhY6MkIyRi5CLm4aXgpOBkn6Pe4sIZosFcotrhGN9iouIioaJh4qHiomKiYqIioaKh4mHioiKiYuHioiLh4qIi4mLCIKLi/tLBQ77lIv3txWLkpCPlo0I9yOgzPcWBY6SkI+RiwiL/BL7FUcFh4mHioiLh4uIjImOiY6KjouPi4yLjYyOCKP3IyPwBYaQiZCLjwgOi/fFFYu1l6yjoqOjrZe2i5aLl4mYh5eHloWWhJaElIWShZOEkoWShJKSkpGTkpKRlJGWkgiWkpaRl4+Yj5eNlou2i61/o3OjdJdqi2GLYXVgYGAI+0b7QAWHiIeJhouGi4eNh44I+0b3QAWJjYmNh4+IjoaRg5SElIWVhZSFlYaWh5mGmImYi5gIsIsVi2ucaa9oCPc6+zT3OvczBa+vnK2Lq4ubiZiHl4eXhpSFkoSSg5GCj4KQgo2CjYONgYuBi4KLgIl/hoCGgIWChAiBg4OFhISEhYaFhoaIhoaJhYuFi4aNiJCGkIaRhJGEkoORgZOCkoCRgJB/kICNgosIgYuBi4OJgomCiYKGgoeDhYSEhYSGgod/h3+Jfot7CA77JouyFYv4BAWLkY2Rj5GOkJCPko2PjY+Mj4sI98CLBY+Lj4qPiZGJkIePho+FjYWLhQiL/AQFi4SJhYeGh4aGh4WIiIqGioeLgYuEjoSRCPsS9w37EvsNBYSFg4iCi4eLh4uHjYSOho+IkIeQiZGLkgiwkxX3JvchpHL3DfsIi/f3+7iLi/v3BQ5ni8sVi/c5BYuSjpKQkJCQko6Siwj3VIuLwgWLrpippKSkpKmYrouvi6l+pHKkcpdti2gIi0IFi4aKhoeIh4eHiYaLCHmLBYaLh42Hj4eOipCLkAiL1AWLn4OcfZp9mXqSdot3i3qEfX18fIR6i3cIi1SniwWSi5KIkIaQho6Ei4QIi/s5BYuDiIWGhoaFhImEiwj7p4sFhIuEjYaRhpCIkYuTCA5njPe6FYyQkI6UjQj3I6DM9xYFj5KPj5GLkIuQh4+ECMv7FvcjdgWUiZCIjYaNhoiFhYUIIyak+yMFjIWKhomHiYiIiYaLiIuHjIeNCPsUz/sVRwWHiYeKiIuHi4eNiY6Jj4uQjJEIo/cjI/AFhZGJkY2QCPeB+z0VnILlW3rxiJ6ZmNTS+wydgpxe54v7pwUOZ4vCFYv3SwWLkI2Pjo+Pjo+NkIsI3osFkIuPiY6Ij4eNh4uGCIv7SwWLhomHh4eIh4eKhosIOIsFhouHjIePiI+Jj4uQCLCvFYuGjIePh46IkImQi5CLj42Pjo6PjY+LkIuQiZCIjoePh42Gi4aLhomIh4eIioaLhgjvZxWL90sFi5CNj46Oj4+PjZCLj4ySkJWWlZaVl5SXmJuVl5GRjo6OkI6RjZCNkIyPjI6MkY2TCIySjJGMj4yPjZCOkY6RjpCPjo6Pj42Qi5SLk4qSiZKJkYiPiJCIjoiPho6GjYeMhwiNh4yGjIaMhYuHi4iLiIuHi4eLg4uEiYSJhImFiYeJh4mFh4WLioqJiomJiIqJiokIi4qKiIqJCNqLBZqLmIWWgJaAkH+LfIt6hn2Af46DjYSLhIt9h36Cf4+Bi3+HgImAhYKEhI12hnmAfgh/fXiDcosIZosFfot+jHyOfI5/joOOg41/j32Qc5N8j4SMhouHjYiOh4+Jj4uQCA5ni/c5FYuGjYaOiI+Hj4mQiwjeiwWQi4+Njo+Pjo2Qi5AIi/dKBYuQiZCHjoiPh42Giwg4iwWGi4eJh4eIiImGi4YIi/tKBbD3JhWLkIyPj4+OjpCNkIuQi4+Jj4iOh42Hi4aLhomHiIeHh4eKhouGi4aMiI+Hj4qPi5AI7/snFYv3SwWLkI2Qj46Oj4+NkIuSi5qPo5OZkJePk46TjZeOmo6ajpiMmIsIsIsFpIueg5d9ln6Qeol1koSRgo2Aj4CLgIeAlH+Pfot9i4WJhIiCloCQfIt7i3yFfoGACICAfoZ8iwg8iwWMiIyJi4mMiYyJjYmMiIyKi4mPhI2GjYeNh42GjYOMhIyEi4SLhouHi4iLiYuGioYIioWKhomHioeJh4iGh4eIh4aIh4iFiISJhImDioKLhouHjYiPh4+Ij4iRiJGJkIqPCIqPipGKkomTipGKj4qOiZCJkYiQiJCIjoWSgZZ+nIKXgZaBloGWhJGHi4aLh42HjwiIjomQi48IDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAPFlAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAkAAAACAAIAAEAAAAAQAg5gXwBvAN8CPwLvBu8HDwivCX8JzxI/Fl//3//wAAAAAAIOYA8ATwDPAj8C7wbvBw8Ifwl/Cc8SPxZP/9//8AAf/jGgQQBhABD+wP4g+jD6IPjA+AD3wO9g62AAMAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAAJrVlLJfDzz1AAsCAAAAAADP/GODAAAAAM/8Y4MAAP/bAgAB2wAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAACAAABAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAEAAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAAAACAAAAAdwAAAHcAAACAAAjAZMAHwFJAAABbgAAAgAAAAIAAAACAAAAAgAAAAEAAAACAAAAAW4AAAHcAAAB3AABAdwAAAHcAAAAAFAAABwAAAAAAA4ArgABAAAAAAABAAwAAAABAAAAAAACAA4AQAABAAAAAAADAAwAIgABAAAAAAAEAAwATgABAAAAAAAFABYADAABAAAAAAAGAAYALgABAAAAAAAKADQAWgADAAEECQABAAwAAAADAAEECQACAA4AQAADAAEECQADAAwAIgADAAEECQAEAAwATgADAAEECQAFABYADAADAAEECQAGAAwANAADAAEECQAKADQAWgByAGEAdABpAG4AZwBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAHQAaQBuAGdyYXRpbmcAcgBhAHQAaQBuAGcAUgBlAGcAdQBsAGEAcgByAGEAdABpAG4AZwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('woff') + ; + font-weight: normal; + font-style: normal; +} +.ui.rating .icon { + font-family: 'Rating'; + line-height: 1; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +/* Empty Star */ +.ui.rating .icon:before { + content: '\f005'; +} +/* Active Star */ +.ui.rating .active.icon:before { + content: '\f005'; +} + +/*------------------- + Star +--------------------*/ + +/* Unfilled Star */ +.ui.star.rating .icon:before { + content: '\f005'; +} +/* Active Star */ +.ui.star.rating .active.icon:before { + content: '\f005'; +} + +/* Partial */ +.ui.star.rating .partial.icon:before { + content: '\f006'; +} +.ui.star.rating .partial.icon { + content: '\f005'; +} + +/*------------------- + Heart +--------------------*/ + +/* Empty Heart +.ui.heart.rating .icon:before { + content: '\f08a'; +} +*/ +.ui.heart.rating .icon:before { + content: '\f004'; +} +/* Active */ +.ui.heart.rating .active.icon:before { + content: '\f004'; +} diff --git a/static/semantic/src/themes/default/modules/rating.variables b/static/semantic/src/themes/default/modules/rating.variables new file mode 100755 index 0000000..0f42f0d --- /dev/null +++ b/static/semantic/src/themes/default/modules/rating.variables @@ -0,0 +1,103 @@ +/******************************* + Rating +*******************************/ + +@margin: 0em @relativeMini; +@whiteSpace: nowrap; +@verticalAlign: baseline; + +@iconCursor: pointer; +@iconWidth: 1.25em; +@iconHeight: auto; +@iconTransition: + opacity @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing, + text-shadow @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing +; + + +/*------------------- + Types +--------------------*/ + +/* Standard */ +@inactiveBackground: transparent; +@inactiveColor: rgba(0, 0, 0, 0.15); + +@selectedBackground: @inactiveBackground; +@selectedColor: @textColor; + +@activeBackground: @inactiveBackground; +@activeColor: @darkTextColor; + +/* Star */ +@starIconWidth: @iconWidth; +@starIconHeight: @iconHeight; +@starShadowWidth: 1px; + +@starInactiveBackground: @inactiveBackground; +@starInactiveColor: @inactiveColor; +@starInactiveTextShadow: none; + +@starActiveBackground: @activeBackground; +@starActiveColor: #FFE623; +@starActiveShadowColor: #DDC507; +@starActiveTextShadow: + 0px -@starShadowWidth 0px @starActiveShadowColor, + -@starShadowWidth 0px 0px @starActiveShadowColor, + 0px @starShadowWidth 0px @starActiveShadowColor, + @starShadowWidth 0px 0px @starActiveShadowColor +; + +@starSelectedBackground: @selectedBackground; +@starSelectedColor: #FFCC00; +@starSelectedShadowColor: #E6A200; +@starSelectedTextShadow: + 0px -@starShadowWidth 0px @starSelectedShadowColor, + -@starShadowWidth 0px 0px @starSelectedShadowColor, + 0px @starShadowWidth 0px @starSelectedShadowColor, + @starShadowWidth 0px 0px @starSelectedShadowColor +; + +/* Heart */ +@heartIconWidth: 1.4em; +@heartIconHeight: @iconHeight; +@heartShadowWidth: 1px; + +@heartInactiveBackground: @inactiveBackground; +@heartInactiveColor: @inactiveColor; +@heartInactiveTextShadow: none; + +@heartActiveBackground: @activeBackground; +@heartActiveColor: #FF6D75; +@heartActiveShadowColor: #CD0707; +@heartActiveTextShadow: + 0px -@heartShadowWidth 0px @heartActiveShadowColor, + -@heartShadowWidth 0px 0px @heartActiveShadowColor, + 0px @heartShadowWidth 0px @heartActiveShadowColor, + @heartShadowWidth 0px 0px @heartActiveShadowColor +; + +@heartSelectedBackground: @selectedBackground; +@heartSelectedColor: #FF3000; +@heartSelectedShadowColor: #AA0101; +@heartSelectedTextShadow: + 0px -@heartShadowWidth 0px @heartSelectedShadowColor, + -@heartShadowWidth 0px 0px @heartSelectedShadowColor, + 0px @heartShadowWidth 0px @heartSelectedShadowColor, + @heartShadowWidth 0px 0px @heartSelectedShadowColor +; + +/*------------------- + States +--------------------*/ + +@interactiveActiveIconOpacity: 1; +@interactiveSelectedIconOpacity: 1; + +/*------------------- + Variations +--------------------*/ + +@massive: 2rem; \ No newline at end of file diff --git a/static/semantic/src/themes/default/modules/search.overrides b/static/semantic/src/themes/default/modules/search.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/search.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/search.variables b/static/semantic/src/themes/default/modules/search.variables new file mode 100755 index 0000000..362bc13 --- /dev/null +++ b/static/semantic/src/themes/default/modules/search.variables @@ -0,0 +1,161 @@ +/******************************* + Search +*******************************/ + +/* Search Prompt */ +@promptBackground: @inputBackground; +@promptVerticalPadding: @inputVerticalPadding; +@promptHorizontalPadding: @inputHorizontalPadding; +@promptLineHeight: @inputLineHeight; +@promptFontSize: @relativeMedium; +@promptPadding: (@promptVerticalPadding + ((1em - @promptLineHeight) / 2)) @promptHorizontalPadding; +@promptBorder: 1px solid @borderColor; +@promptBorderRadius: @circularRadius; +@promptColor: @textColor; +@promptTransition: + background-color @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; +@promptBoxShadow: 0em 0em 0em 0em transparent inset; + +/* Mobile */ +@mobileMaxWidth: ~"calc(100vw - 2rem)"; + +/* Result Box */ +@resultsWidth: 18em; +@resultsBackground: #FFFFFF; +@resultsDistance: 0.5em; +@resultsBorderRadius: @defaultBorderRadius; +@resultsBorder: 1px solid @solidBorderColor; +@resultsBoxShadow: @floatingShadow; + +/* Result */ +@resultFontSize: 1em; +@resultVerticalPadding: @relativeTiny; +@resultHorizontalPadding: @relativeLarge; +@resultPadding: @resultVerticalPadding @resultHorizontalPadding; +@resultTextColor: @textColor; +@resultLineHeight: 1.33; +@resultDivider: 1px solid @internalBorderColor; +@resultLastDivider: none; + +/* Result Image */ +@resultImageFloat: right; +@resultImageBackground: none; +@resultImageWidth: 5em; +@resultImageHeight: 3em; +@resultImageBorderRadius: 0.25em; +@resultImageMargin: 0em 6em 0em 0em; + +/* Result Content */ +@resultTitleFont: @headerFont; +@resultTitleMargin: -@headerLineHeightOffset 0em 0em; +@resultTitleFontWeight: @bold; +@resultTitleFontSize: @relativeMedium; +@resultTitleColor: @darkTextColor; + +/* Description */ +@resultDescriptionFontSize: @relativeSmall; +@resultDescriptionDistance: 0; +@resultDescriptionColor: @lightTextColor; + +/* Price */ +@resultPriceFloat: right; +@resultPriceColor: @green; + +/* Special Message */ +@messageVerticalPadding: 1em; +@messageHorizontalPadding: 1em; +@messageHeaderFontSize: @medium; +@messageHeaderFontWeight: @bold; +@messageHeaderColor: @textColor; +@messageDescriptionDistance: 0.25rem; +@messageDescriptionFontSize: 1em; +@messageDescriptionColor: @textColor; + +/* All Results Link */ +@actionBorder: none; +@actionBackground: @darkWhite; +@actionPadding: @relativeSmall @relativeMedium; +@actionColor: @textColor; +@actionFontWeight: @bold; +@actionAlign: center; + + +/******************************* + States +*******************************/ + +/* Focus */ +@promptFocusBackground: @promptBackground; +@promptFocusBorderColor: @selectedBorderColor; +@promptFocusColor: @selectedTextColor; + +/* Hover */ +@resultHoverBackground: @offWhite; +@actionHoverBackground: #E0E0E0; + +/* Loading */ +@invertedLoaderFillColor: rgba(0, 0, 0, 0.15); + +/* Active Category */ +@categoryActiveBackground: @darkWhite; +@categoryNameActiveColor: @textColor; + +/* Active Result */ +@resultActiveBorderLeft: @internalBorderColor; +@resultActiveBackground: @darkWhite; +@resultActiveBoxShadow: none; +@resultActiveTitleColor: @darkTextColor; +@resultActiveDescriptionColor: @darkTextColor; +@resultsZIndex: 998; + + +/******************************* + Types +*******************************/ + +/* Selection */ +@selectionPromptBorderRadius: @defaultBorderRadius; + +@selectionCloseTop: 0em; +@selectionCloseTransition: + color @defaultDuration @defaultEasing, + opacity @defaultDuration @defaultEasing +; +@selectionCloseRight: 0em; +@selectionCloseIconOpacity: 0.8; +@selectionCloseIconColor: ''; +@selectionCloseIconHoverOpacity: 1; +@selectionCloseIconHoverColor: @red; + +@selectionCloseIconInputRight: 1.85714em; + +/* Category */ +@categoryBackground: @darkWhite; +@categoryBoxShadow: none; +@categoryDivider: 1px solid @internalBorderColor; +@categoryTransition: + background @defaultDuration @defaultEasing, + border-color @defaultDuration @defaultEasing +; + +@categoryResultsWidth: 28em; + +@categoryResultBackground: @white; +@categoryResultLeftBorder: 1px solid @borderColor; +@categoryResultDivider: @resultDivider; +@categoryResultLastDivider: none; +@categoryResultPadding: @resultPadding; +@categoryResultTransition: @categoryTransition; + +@categoryNameWidth: 100px; +@categoryNameBackground: transparent; +@categoryNameFont: @pageFont; +@categoryNameFontSize: 1em; +@categoryNameWhitespace: nowrap; +@categoryNamePadding: 0.4em 1em; +@categoryNameFontWeight: @bold; +@categoryNameColor: @lightTextColor; diff --git a/static/semantic/src/themes/default/modules/shape.overrides b/static/semantic/src/themes/default/modules/shape.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/shape.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/shape.variables b/static/semantic/src/themes/default/modules/shape.variables new file mode 100755 index 0000000..332c685 --- /dev/null +++ b/static/semantic/src/themes/default/modules/shape.variables @@ -0,0 +1,40 @@ +/******************************* + Shape +*******************************/ + +@display: inline-block; + +/* Animating */ +@perspective: 2000px; + +@duration: 0.6s; +@easing: ease-in-out; + +@hiddenSideOpacity: 0.6; +@animatingZIndex: 100; + +@transition: + transform @duration @easing, + left @duration @easing, + width @duration @easing, + height @duration @easing +; +@sideTransition: opacity @duration @easing; +@backfaceVisibility: hidden; + +/* Side */ +@sideMargin: 0em; + +/*-------------- + Types +---------------*/ + +/* Cube */ +@cubeSize: 15em; +@cubeBackground: #E6E6E6; +@cubePadding: 2em; +@cubeTextColor: @textColor; +@cubeBoxShadow: 0px 0px 2px rgba(0, 0, 0, 0.3); + +@cubeTextAlign: center; +@cubeFontSize: 2em; diff --git a/static/semantic/src/themes/default/modules/sidebar.overrides b/static/semantic/src/themes/default/modules/sidebar.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/sidebar.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/sidebar.variables b/static/semantic/src/themes/default/modules/sidebar.variables new file mode 100755 index 0000000..e38f70e --- /dev/null +++ b/static/semantic/src/themes/default/modules/sidebar.variables @@ -0,0 +1,45 @@ +/******************************* + Sidebar +*******************************/ + +/*------------------- + Content +--------------------*/ + +/* Animation */ +@perspective: 1500px; +@duration: 500ms; +@easing: @defaultEasing; + +/* Dimmer */ +@dimmerColor: rgba(0, 0, 0, 0.4); +@dimmerTransition: opacity @duration; + +/* Color below page */ +@canvasBackground: @lightBlack; + +/* Shadow */ +@boxShadow: 0px 0px 20px @borderColor; +@horizontalBoxShadow: @boxShadow; +@verticalBoxShadow: @boxShadow; + +/* Layering */ +@bottomLayer: 1; +@middleLayer: 2; +@fixedLayer: 101; +@topLayer: 102; +@dimmerLayer: 1000; + +/*------------------- + Variations +--------------------*/ + +/* Width */ +@veryThinWidth: 60px; +@thinWidth: 150px; +@width: 260px; +@wideWidth: 350px; +@veryWideWidth: 475px; + +/* Height */ +@height: 36px; diff --git a/static/semantic/src/themes/default/modules/sticky.overrides b/static/semantic/src/themes/default/modules/sticky.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/modules/sticky.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/sticky.variables b/static/semantic/src/themes/default/modules/sticky.variables new file mode 100755 index 0000000..083c364 --- /dev/null +++ b/static/semantic/src/themes/default/modules/sticky.variables @@ -0,0 +1,7 @@ +/******************************* + Sticky +*******************************/ + +@transitionDuration: @defaultDuration; +@transition: none; +@zIndex: 800; \ No newline at end of file diff --git a/static/semantic/src/themes/default/modules/tab.overrides b/static/semantic/src/themes/default/modules/tab.overrides new file mode 100755 index 0000000..354d6f9 --- /dev/null +++ b/static/semantic/src/themes/default/modules/tab.overrides @@ -0,0 +1,3 @@ +/******************************* + Tab Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/modules/tab.variables b/static/semantic/src/themes/default/modules/tab.variables new file mode 100755 index 0000000..7d0a5c6 --- /dev/null +++ b/static/semantic/src/themes/default/modules/tab.variables @@ -0,0 +1,11 @@ +/******************************* + Tab +*******************************/ + +/* Loading */ +@loadingMinHeight: 250px; +@loadingContentPosition: relative; +@loadingContentOffset: -10000px; + +@loaderDistanceFromTop: 100px; +@loaderSize: 2.5em; \ No newline at end of file diff --git a/static/semantic/src/themes/default/modules/transition.overrides b/static/semantic/src/themes/default/modules/transition.overrides new file mode 100755 index 0000000..f691c3b --- /dev/null +++ b/static/semantic/src/themes/default/modules/transition.overrides @@ -0,0 +1,962 @@ +/******************************* + Transitions +*******************************/ + +/* + Some transitions adapted from Animate CSS + https://github.com/daneden/animate.css + + Additional transitions adapted from Glide + by Nick Pettit - https://github.com/nickpettit/glide +*/ + +/*-------------- + Browse +---------------*/ + +.transition.browse { + animation-duration: 500ms; +} +.transition.browse.in { + animation-name: browseIn; +} +.transition.browse.out, +.transition.browse.left.out { + animation-name: browseOutLeft; +} +.transition.browse.right.out { + animation-name: browseOutRight; +} + +/* In */ +@keyframes browseIn { + 0% { + transform: scale(0.8) translateZ(0px); + z-index: -1; + } + 10% { + transform: scale(0.8) translateZ(0px); + z-index: -1; + opacity: 0.7; + } + 80% { + transform: scale(1.05) translateZ(0px); + opacity: 1; + z-index: 999; + } + 100% { + transform: scale(1) translateZ(0px); + z-index: 999; + } +} + +/* Out */ +@keyframes browseOutLeft { + 0% { + z-index: 999; + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: -1; + transform: translateX(-105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: -1; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} +@keyframes browseOutRight { + 0% { + z-index: 999; + transform: translateX(0%) rotateY(0deg) rotateX(0deg); + } + 50% { + z-index: 1; + transform: translateX(105%) rotateY(35deg) rotateX(10deg) translateZ(-10px); + } + 80% { + opacity: 1; + } + 100% { + z-index: 1; + transform: translateX(0%) rotateY(0deg) rotateX(0deg) translateZ(-10px); + opacity: 0; + } +} + + +/*-------------- + Drop +---------------*/ + +.drop.transition { + transform-origin: top center; + animation-duration: 400ms; + animation-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1); +} +.drop.transition.in { + animation-name: dropIn; +} +.drop.transition.out { + animation-name: dropOut; +} + +/* Drop */ +@keyframes dropIn { + 0% { + opacity: 0; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes dropOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0); + } +} + +/*-------------- + Fade +---------------*/ + +.transition.fade.in { + animation-name: fadeIn; +} +.transition[class*="fade up"].in { + animation-name: fadeInUp; +} +.transition[class*="fade down"].in { + animation-name: fadeInDown; +} +.transition[class*="fade left"].in { + animation-name: fadeInLeft; +} +.transition[class*="fade right"].in { + animation-name: fadeInRight; +} + +.transition.fade.out { + animation-name: fadeOut; +} +.transition[class*="fade up"].out { + animation-name: fadeOutUp; +} +.transition[class*="fade down"].out { + animation-name: fadeOutDown; +} +.transition[class*="fade left"].out { + animation-name: fadeOutLeft; +} +.transition[class*="fade right"].out { + animation-name: fadeOutRight; +} + +/* In */ +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadeInUp { + 0% { + opacity: 0; + transform: translateY(10%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} +@keyframes fadeInDown { + 0% { + opacity: 0; + transform: translateY(-10%); + } + 100% { + opacity: 1; + transform: translateY(0%); + } +} +@keyframes fadeInLeft { + 0% { + opacity: 0; + transform: translateX(10%); + } + 100% { + opacity: 1; + transform: translateX(0%); + } +} +@keyframes fadeInRight { + 0% { + opacity: 0; + transform: translateX(-10%); + } + 100% { + opacity: 1; + transform: translateX(0%); + } +} + +/* Out */ +@keyframes fadeOut { + 0% { + opacity: 1; + } + 100% { + opacity: 0; + } +} +@keyframes fadeOutUp { + 0% { + opacity: 1; + transform: translateY(0%); + } + 100% { + opacity: 0; + transform: translateY(5%); + } +} +@keyframes fadeOutDown { + 0% { + opacity: 1; + transform: translateY(0%); + } + 100% { + opacity: 0; + transform: translateY(-5%); + } +} +@keyframes fadeOutLeft { + 0% { + opacity: 1; + transform: translateX(0%); + } + 100% { + opacity: 0; + transform: translateX(5%); + } +} +@keyframes fadeOutRight { + 0% { + opacity: 1; + transform: translateX(0%); + } + 100% { + opacity: 0; + transform: translateX(-5%); + } +} + +/*-------------- + Flips +---------------*/ + +.flip.transition.in, +.flip.transition.out { + animation-duration: 600ms; +} +.horizontal.flip.transition.in { + animation-name: horizontalFlipIn; +} +.horizontal.flip.transition.out { + animation-name: horizontalFlipOut; +} +.vertical.flip.transition.in { + animation-name: verticalFlipIn; +} +.vertical.flip.transition.out { + animation-name: verticalFlipOut; +} + +/* In */ +@keyframes horizontalFlipIn { + 0% { + transform: perspective(2000px) rotateY(-90deg); + opacity: 0; + } + 100% { + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } +} +@keyframes verticalFlipIn { + 0% { + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } + 100% { + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } +} + +/* Out */ +@keyframes horizontalFlipOut { + 0% { + transform: perspective(2000px) rotateY(0deg); + opacity: 1; + } + 100% { + transform: perspective(2000px) rotateY(90deg); + opacity: 0; + } +} +@keyframes verticalFlipOut { + 0% { + transform: perspective(2000px) rotateX(0deg); + opacity: 1; + } + 100% { + transform: perspective(2000px) rotateX(-90deg); + opacity: 0; + } +} + +/*-------------- + Scale +---------------*/ + +.scale.transition.in { + animation-name: scaleIn; +} +.scale.transition.out { + animation-name: scaleOut; +} + +@keyframes scaleIn { + 0% { + opacity: 0; + transform: scale(0.8); + } + 100% { + opacity: 1; + transform: scale(1); + } +} + +/* Out */ +@keyframes scaleOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0; + transform: scale(0.9); + } +} + + +/*-------------- + Fly +---------------*/ + +/* Inward */ +.transition.fly { + animation-duration: 0.6s; + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); +} +.transition.fly.in { + animation-name: flyIn; +} +.transition[class*="fly up"].in { + animation-name: flyInUp; +} +.transition[class*="fly down"].in { + animation-name: flyInDown; +} +.transition[class*="fly left"].in { + animation-name: flyInLeft; +} +.transition[class*="fly right"].in { + animation-name: flyInRight; +} + +/* Outward */ +.transition.fly.out { + animation-name: flyOut; +} +.transition[class*="fly up"].out { + animation-name: flyOutUp; +} +.transition[class*="fly down"].out { + animation-name: flyOutDown; +} +.transition[class*="fly left"].out { + animation-name: flyOutLeft; +} +.transition[class*="fly right"].out { + animation-name: flyOutRight; +} + +/* In */ +@keyframes flyIn { + 0% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + 20% { + transform: scale3d(1.1, 1.1, 1.1); + } + 40% { + transform: scale3d(.9, .9, .9); + } + 60% { + opacity: 1; + transform: scale3d(1.03, 1.03, 1.03); + } + 80% { + transform: scale3d(.97, .97, .97); + } + 100% { + opacity: 1; + transform: scale3d(1, 1, 1); + } +} +@keyframes flyInUp { + 0% { + opacity: 0; + transform: translate3d(0, 1500px, 0); + } + 60% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + 75% { + transform: translate3d(0, 10px, 0); + } + 90% { + transform: translate3d(0, -5px, 0); + } + 100% { + transform: translate3d(0, 0, 0); + } +} +@keyframes flyInDown { + 0% { + opacity: 0; + transform: translate3d(0, -1500px, 0); + } + 60% { + opacity: 1; + transform: translate3d(0, 25px, 0); + } + 75% { + transform: translate3d(0, -10px, 0); + } + 90% { + transform: translate3d(0, 5px, 0); + } + 100% { + transform: none; + } +} +@keyframes flyInLeft { + 0% { + opacity: 0; + transform: translate3d(1500px, 0, 0); + } + 60% { + opacity: 1; + transform: translate3d(-25px, 0, 0); + } + 75% { + transform: translate3d(10px, 0, 0); + } + 90% { + transform: translate3d(-5px, 0, 0); + } + 100% { + transform: none; + } +} +@keyframes flyInRight { + 0% { + opacity: 0; + transform: translate3d(-1500px, 0, 0); + } + 60% { + opacity: 1; + transform: translate3d(25px, 0, 0); + } + 75% { + transform: translate3d(-10px, 0, 0); + } + 90% { + transform: translate3d(5px, 0, 0); + } + 100% { + transform: none; + } +} + +/* Out */ +@keyframes flyOut { + 20% { + transform: scale3d(.9, .9, .9); + } + 50%, 55% { + opacity: 1; + transform: scale3d(1.1, 1.1, 1.1); + } + 100% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } +} +@keyframes flyOutUp { + 20% { + transform: translate3d(0, 10px, 0); + } + 40%, 45% { + opacity: 1; + transform: translate3d(0, -20px, 0); + } + 100% { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } +} +@keyframes flyOutDown { + 20% { + transform: translate3d(0, -10px, 0); + } + 40%, 45% { + opacity: 1; + transform: translate3d(0, 20px, 0); + } + 100% { + opacity: 0; + transform: translate3d(0, -2000px, 0); + } +} +@keyframes flyOutRight { + 20% { + opacity: 1; + transform: translate3d(20px, 0, 0); + } + 100% { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} +@keyframes flyOutLeft { + 20% { + opacity: 1; + transform: translate3d(-20px, 0, 0); + } + 100% { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} + +/*-------------- + Slide +---------------*/ + +.transition.slide.in, +.transition[class*="slide down"].in { + animation-name: slideInY; + transform-origin: top center; +} +.transition[class*="slide up"].in { + animation-name: slideInY; + transform-origin: bottom center; +} +.transition[class*="slide left"].in { + animation-name: slideInX; + transform-origin: center right; +} +.transition[class*="slide right"].in { + animation-name: slideInX; + transform-origin: center left; +} + +.transition.slide.out, +.transition[class*="slide down"].out { + animation-name: slideOutY; + transform-origin: top center; +} +.transition[class*="slide up"].out { + animation-name: slideOutY; + transform-origin: bottom center; +} +.transition[class*="slide left"].out { + animation-name: slideOutX; + transform-origin: center right; +} +.transition[class*="slide right"].out { + animation-name: slideOutX; + transform-origin: center left; +} + +/* In */ +@keyframes slideInY { + 0% { + opacity: 0; + transform: scaleY(0); + } + 100% { + opacity: 1; + transform: scaleY(1); + } +} +@keyframes slideInX { + 0% { + opacity: 0; + transform: scaleX(0); + } + 100% { + opacity: 1; + transform: scaleX(1); + } +} + +/* Out */ +@keyframes slideOutY { + 0% { + opacity: 1; + transform: scaleY(1); + } + 100% { + opacity: 0; + transform: scaleY(0); + } +} +@keyframes slideOutX { + 0% { + opacity: 1; + transform: scaleX(1); + } + 100% { + opacity: 0; + transform: scaleX(0); + } +} + + +/*-------------- + Swing +---------------*/ + +.transition.swing { + animation-duration: 800ms; +} + +.transition[class*="swing down"].in { + animation-name: swingInX; + transform-origin: top center; +} +.transition[class*="swing up"].in { + animation-name: swingInX; + transform-origin: bottom center; +} +.transition[class*="swing left"].in { + animation-name: swingInY; + transform-origin: center right; +} +.transition[class*="swing right"].in { + animation-name: swingInY; + transform-origin: center left; +} + +.transition.swing.out, +.transition[class*="swing down"].out { + animation-name: swingOutX; + transform-origin: top center; +} +.transition[class*="swing up"].out { + animation-name: swingOutX; + transform-origin: bottom center; +} +.transition[class*="swing left"].out { + animation-name: swingOutY; + transform-origin: center right; +} +.transition[class*="swing right"].out { + animation-name: swingOutY; + transform-origin: center left; +} + +/* In */ +@keyframes swingInX { + 0% { + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } + 40% { + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 60% { + transform: perspective(1000px) rotateX(15deg); + } + 80% { + transform: perspective(1000px) rotateX(-7.5deg); + } + 100% { + transform: perspective(1000px) rotateX(0deg); + } +} +@keyframes swingInY { + 0% { + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } + 40% { + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 60% { + transform: perspective(1000px) rotateY(-17.5deg); + } + 80% { + transform: perspective(1000px) rotateY(7.5deg); + } + 100% { + transform: perspective(1000px) rotateY(0deg); + } +} + +/* Out */ +@keyframes swingOutX { + 0% { + transform: perspective(1000px) rotateX(0deg); + } + 40% { + transform: perspective(1000px) rotateX(-7.5deg); + } + 60% { + transform: perspective(1000px) rotateX(17.5deg); + } + 80% { + transform: perspective(1000px) rotateX(-30deg); + opacity: 1; + } + 100% { + transform: perspective(1000px) rotateX(90deg); + opacity: 0; + } +} +@keyframes swingOutY { + 0% { + transform: perspective(1000px) rotateY(0deg); + } + 40% { + transform: perspective(1000px) rotateY(7.5deg); + } + 60% { + transform: perspective(1000px) rotateY(-10deg); + } + 80% { + transform: perspective(1000px) rotateY(30deg); + opacity: 1; + } + 100% { + transform: perspective(1000px) rotateY(-90deg); + opacity: 0; + } +} + + +/*-------------- + Zoom +---------------*/ + +.transition.zoom.in { + animation-name: zoomIn; +} +.transition.zoom.out { + animation-name: zoomOut; +} +@keyframes zoomIn { + 0% { + opacity: 1; + transform: scale(0); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes zoomOut { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 1; + transform: scale(0); + } +} + + +/******************************* + Static Animations +*******************************/ + +/*-------------- + Emphasis +---------------*/ + + +.flash.transition { + animation-duration: 750ms; + animation-name: flash; +} +.shake.transition { + animation-duration: 750ms; + animation-name: shake; +} +.bounce.transition { + animation-duration: 750ms; + animation-name: bounce; +} +.tada.transition { + animation-duration: 750ms; + animation-name: tada; +} +.pulse.transition { + animation-duration: 500ms; + animation-name: pulse; +} +.jiggle.transition { + animation-duration: 750ms; + animation-name: jiggle; +} +.transition.glow { + animation-duration: 2000ms; + animation-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); +} +.transition.glow { + animation-name: glow; +} + + +/* Flash */ +@keyframes flash { + 0%, 50%, 100% { + opacity: 1; + } + 25%, 75% { + opacity: 0; + } +} + +/* Shake */ +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-10px); + } + 20%, 40%, 60%, 80% { + transform: translateX(10px); + } +} + +/* Bounce */ +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} + +/* Tada */ +@keyframes tada { + 0% { + transform: scale(1); + } + 10%, 20% { + transform: scale(0.9) rotate(-3deg); + } + 30%, 50%, 70%, 90% { + transform: scale(1.1) rotate(3deg); + } + 40%, 60%, 80% { + transform: scale(1.1) rotate(-3deg); + } + 100% { + transform: scale(1) rotate(0); + } +} + +/* Pulse */ +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(0.9); + opacity: 0.7; + } + 100% { + transform: scale(1); + opacity: 1; + } + +} + +/* Jiggle */ +@keyframes jiggle { + 0% { + transform: scale3d(1, 1, 1); + } + 30% { + transform: scale3d(1.25, 0.75, 1); + } + 40% { + transform: scale3d(0.75, 1.25, 1); + } + 50% { + transform: scale3d(1.15, 0.85, 1); + } + 65% { + transform: scale3d(.95, 1.05, 1); + } + 75% { + transform: scale3d(1.05, .95, 1); + } + 100% { + transform: scale3d(1, 1, 1); + } +} + +/* Glow */ +@keyframes glow { + 0% { + background-color: #FCFCFD; + } + 30% { + background-color: #FFF6CD; + } + 100% { + background-color: #FCFCFD; + } +} + diff --git a/static/semantic/src/themes/default/modules/transition.variables b/static/semantic/src/themes/default/modules/transition.variables new file mode 100755 index 0000000..d8b7d37 --- /dev/null +++ b/static/semantic/src/themes/default/modules/transition.variables @@ -0,0 +1,10 @@ +/******************************* + Transition +*******************************/ + +@transitionDefaultEasing: @defaultEasing; +@transitionDefaultFill: both; +@transitionDefaultDuration: 300ms; + +@use3DAcceleration: translateZ(0); +@backfaceVisibility: hidden; \ No newline at end of file diff --git a/static/semantic/src/themes/default/views/ad.overrides b/static/semantic/src/themes/default/views/ad.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/ad.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/ad.variables b/static/semantic/src/themes/default/views/ad.variables new file mode 100755 index 0000000..85c6691 --- /dev/null +++ b/static/semantic/src/themes/default/views/ad.variables @@ -0,0 +1,13 @@ +/******************************* + Advertisement +*******************************/ + +@margin: 1em 0em; +@overflow: hidden; + +@testBackground: @lightBlack; +@testColor: @white; +@testFontWeight: @bold; +@testText: 'Ad'; +@testFontSize: @relativeMedium; +@testMobileFontSize: @relativeTiny; diff --git a/static/semantic/src/themes/default/views/card.overrides b/static/semantic/src/themes/default/views/card.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/card.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/card.variables b/static/semantic/src/themes/default/views/card.variables new file mode 100755 index 0000000..c3303ce --- /dev/null +++ b/static/semantic/src/themes/default/views/card.variables @@ -0,0 +1,220 @@ +/******************************* + Card +*******************************/ + +/*------------------- + View +--------------------*/ + +/* Shadow */ +@shadowDistance: 1px; +@shadowBoxShadow: 0px @shadowDistance 3px 0px @solidBorderColor; + +/* Card */ +@fontFamily: @pageFont; +@display: flex; +@background: @white; +@borderRadius: @defaultBorderRadius; +@margin: 1em 0em; +@minHeight: 0px; +@padding: 0em; +@width: 290px; +@borderWidth: 1px; +@borderShadow: 0px 0px 0px @borderWidth @solidBorderColor; +@boxShadow: + @shadowBoxShadow, + @borderShadow +; +@border: none; +@zIndex: ''; +@transition: + box-shadow @defaultDuration @defaultEasing, + transform @defaultDuration @defaultEasing +; + +/* Card Group */ +@horizontalSpacing: 1em; +@rowSpacing: 1.75em; + +@groupMargin: -(@rowSpacing / 2) -(@horizontalSpacing / 2); +@groupDisplay: flex; + +@groupCardFloat: none; +@groupCardDisplay: flex; +@groupCardMargin: (@rowSpacing / 2) (@horizontalSpacing / 2); + +/* Consecutive Cards */ +@consecutiveGroupDistance: (@rowSpacing / 2); + +/*------------------- + Content +--------------------*/ + + +/* Image */ +@imageBackground: @transparentBlack; +@imagePadding: 0em; +@imageBorder: none; +@imageBoxShadow: none; +@imageBorder: none; + +/* Content */ +@contentDivider: @borderWidth solid @internalBorderColor; +@contentMargin: 0em; +@contentBackground: none; +@contentPadding: 1em 1em; +@contentFontSize: 1em; +@contentBorderRadius: 0em; +@contentBoxShadow: none; +@contentBorder: none; + + +/* Header */ +@headerMargin: ''; +@headerFontWeight: @bold; +@headerFontSize: @relativeBig; +@headerLineHeightOffset: -(@lineHeight - 1em) / 2; +@headerColor: @darkTextColor; + +/* Metadata */ +@metaFontSize: @relativeMedium; +@metaSpacing: 0.3em; +@metaColor: @lightTextColor; + +/* Icons */ +@actionOpacity: 0.75; +@actionHoverOpacity: 1; +@actionTransition: color @defaultDuration @defaultEasing; + +@starColor: #FFB70A; +@starActiveColor: #FFE623; + +@likeColor: #FF2733; +@likeActiveColor: #FF2733; + +/* Links */ +@contentLinkColor: ''; +@contentLinkHoverColor: ''; +@contentLinkTransition: color @defaultDuration @defaultEasing; + +@headerLinkColor: @headerColor; +@headerLinkHoverColor: @linkHoverColor; + +@metaLinkColor: @lightTextColor; +@metaLinkHoverColor: @textColor; + +/* Description */ +@descriptionDistance: 0.5em; +@descriptionColor: rgba(0, 0, 0, 0.68); + +/* Content Image */ +@contentImageWidth: ''; +@contentImageVerticalAlign: middle; + +/* Avatar Image */ +@avatarSize: 2em; +@avatarBorderRadius: @circularRadius; + +/* Paragraph */ +@paragraphDistance: 0.5em; + +/* Dimmer */ +@dimmerZIndex: 10; +@dimmerColor: ''; + +/* Additional Content */ +@extraDivider: 1px solid rgba(0, 0, 0, 0.05); +@extraBackground: none; +@extraPosition: static; +@extraWidth: auto; +@extraTop: 0em; +@extraLeft: 0em; +@extraMargin: 0em 0em; +@extraPadding: 0.75em 1em; +@extraBoxShadow: none; +@extraColor: @lightTextColor; +@extraTransition: color @defaultDuration @defaultEasing; + +/* Extra Links */ +@extraLinkColor: @unselectedTextColor; +@extraLinkHoverColor: @linkHoverColor; + +/* Buttons */ +@buttonMargin: 0px -@borderWidth; +@buttonWidth: ~"calc(100% + "(@borderWidth * 2)~")"; + +/*------------------- + Variations +--------------------*/ + +/* Link */ +@linkHoverBackground: @white; +@linkHoverBorder: @border; +@linkHoverZIndex: 5; +@linkHoverRaiseDistance: 3px; +@linkHoverTransform: translateY(-@linkHoverRaiseDistance); + +@shadowHoverBoxShadow: 0px @shadowDistance @linkHoverRaiseDistance 0px @solidSelectedBorderColor; +@linkHoverBoxShadow: + @shadowHoverBoxShadow, + @borderShadow +; + + +/* Raised */ +@raisedShadow: + @borderShadow, + @floatingShadow +; +@raisedShadowHover: + @borderShadow, + @floatingShadowHover +; + +/* Card Count */ +@wideCardSpacing: 1em; +@cardSpacing: 0.75em; +@smallCardSpacing: 0.5em; + +@oneCardSpacing: 0em; +@twoCardSpacing: @wideCardSpacing; +@threeCardSpacing: @wideCardSpacing; +@fourCardSpacing: @cardSpacing; +@fiveCardSpacing: @cardSpacing; +@sixCardSpacing: @cardSpacing; +@sevenCardSpacing: @smallCardSpacing; +@eightCardSpacing: @smallCardSpacing; +@nineCardSpacing: @smallCardSpacing; +@tenCardSpacing: @smallCardSpacing; + +@oneCard: @oneColumn; +@oneCardOffset: 0em; +@twoCard: ~"calc("@twoColumn~" - "(@twoCardSpacing * 2)~")"; +@twoCardOffset: -@twoCardSpacing; +@threeCard: ~"calc("@threeColumn~" - "(@threeCardSpacing * 2)~")"; +@threeCardOffset: -@threeCardSpacing; +@fourCard: ~"calc("@fourColumn~" - "(@fourCardSpacing * 2)~")"; +@fourCardOffset: -@fourCardSpacing; +@fiveCard: ~"calc("@fiveColumn~" - "(@fiveCardSpacing * 2)~")"; +@fiveCardOffset: -@fiveCardSpacing; +@sixCard: ~"calc("@sixColumn~" - "(@sixCardSpacing * 2)~")"; +@sixCardOffset: -@sixCardSpacing; +@sevenCard: ~"calc("@sevenColumn~" - "(@sevenCardSpacing * 2)~")"; +@sevenCardOffset: -@sevenCardSpacing; +@eightCard: ~"calc("@eightColumn~" - "(@sevenCardSpacing * 2)~")"; +@eightCardOffset: -@sevenCardSpacing; +@nineCard: ~"calc("@nineColumn~" - "(@nineCardSpacing * 2)~")"; +@nineCardOffset: -@nineCardSpacing; +@tenCard: ~"calc("@tenColumn~" - "(@tenCardSpacing * 2)~")"; +@tenCardOffset: -@tenCardSpacing; + +/* Stackable */ +@stackableRowSpacing: 1em; +@stackableCardSpacing: 1em; +@stackableMargin: ~"calc("@oneColumn~" - "(@stackableCardSpacing * 2)~")"; + +/* Sizes */ +@medium: 1em; + +/* Colored */ +@coloredShadowDistance: 2px; diff --git a/static/semantic/src/themes/default/views/comment.overrides b/static/semantic/src/themes/default/views/comment.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/comment.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/comment.variables b/static/semantic/src/themes/default/views/comment.variables new file mode 100755 index 0000000..3c3aad0 --- /dev/null +++ b/static/semantic/src/themes/default/views/comment.variables @@ -0,0 +1,98 @@ +/******************************* + Comments +*******************************/ + + +/*------------------- + View +--------------------*/ + +@maxWidth: 650px; +@margin: 1.5em 0em; + +/*------------------- + Elements +--------------------*/ + +/* Comment */ +@commentBackground: none; +@commentMargin: 0.5em 0em 0em; +@commentPadding: 0.5em 0em 0em; +@commentDivider: none; +@commentBorder: none; +@commentLineHeight: 1.2; +@firstCommentMargin: 0em; +@firstCommentPadding: 0em; + +/* Nested Comment */ +@nestedCommentsMargin: 0em 0em 0.5em 0.5em; +@nestedCommentsPadding: 1em 0em 1em 1em; + +@nestedCommentDivider: none; +@nestedCommentBorder: none; +@nestedCommentBackground: none; + +/* Avatar */ +@avatarDisplay: block; +@avatarFloat: left; +@avatarWidth: 2.5em; +@avatarHeight: auto; +@avatarSpacing: 1em; +@avatarMargin: (@commentLineHeight - 1em) 0em 0em; +@avatarBorderRadius: 0.25rem; + +/* Content */ +@contentMargin: @avatarWidth + @avatarSpacing; + +/* Author */ +@authorFontSize: 1em; +@authorColor: @textColor; +@authorHoverColor: @linkHoverColor; +@authorFontWeight: @bold; + +/* Metadata */ +@metadataDisplay: inline-block; +@metadataFontSize: 0.875em; +@metadataSpacing: 0.5em; +@metadataContentSpacing: 0.5em; +@metadataColor: @lightTextColor; + +/* Text */ +@textFontSize: 1em; +@textMargin: 0.25em 0em 0.5em; +@textWordWrap: break-word; +@textLineHeight: 1.3; + +/* Actions */ +@actionFontSize: 0.875em; +@actionContentDistance: 0.75em; +@actionLinkColor: @unselectedTextColor; +@actionLinkHoverColor: @hoveredTextColor; + +/* Reply */ +@replyDistance: 1em; +@replyHeight: 12em; +@replyFontSize: 1em; + +@commentReplyDistance: @replyDistance; + +/*------------------- + Variations +--------------------*/ + +/* Threaded */ +@threadedCommentMargin: -1.5em 0 -1em (@avatarWidth / 2); +@threadedCommentPadding: 3em 0em 2em 2.25em; +@threadedCommentBoxShadow: -1px 0px 0px @borderColor; + + +/* Minimal */ +@minimalActionPosition: absolute; +@minimalActionTop: 0px; +@minimalActionRight: 0px; +@minimalActionLeft: auto; + +@minimalTransitionDelay: 0.1s; +@minimalEasing: @defaultEasing; +@minimalDuration: 0.2s; +@minimalTransition: opacity @minimalDuration @minimalEasing; diff --git a/static/semantic/src/themes/default/views/feed.overrides b/static/semantic/src/themes/default/views/feed.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/feed.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/feed.variables b/static/semantic/src/themes/default/views/feed.variables new file mode 100755 index 0000000..3c8d072 --- /dev/null +++ b/static/semantic/src/themes/default/views/feed.variables @@ -0,0 +1,141 @@ +/******************************* + Feed +*******************************/ + +/*------------------- + Feed +--------------------*/ + +@margin: 1em 0em; + +/*------------------- + Elements +--------------------*/ + +/* Event */ +@eventWidth: 100%; +@eventPadding: @3px 0em; +@eventMargin: 0em; +@eventBackground: none; +@eventDivider: none; + +/* Event Label */ +@labelWidth: 2.5em; +@labelHeight: auto; +@labelAlignSelf: stretch; +@labelTextAlign: left; + +/* Icon Label */ +@iconLabelOpacity: 1; +@iconLabelWidth: 100%; +@iconLabelSize: 1.5em; +@iconLabelPadding: 0.25em; +@iconLabelBackground: none; +@iconLabelBorderRadius: none; +@iconLabelBorder: none; +@iconLabelColor: rgba(0, 0, 0, 0.6); + +/* Image Label */ +@imageLabelWidth: 100%; +@imageLabelHeight: auto; +@imageLabelBorderRadius: @circularRadius; + +/* Content w/ Label */ +@labeledContentMargin: 0.5em 0em @relative5px @relativeLarge; +@lastLabeledContentPadding: 0em; + +/* Content */ +@contentAlignSelf: stretch; +@contentTextAlign: left; +@contentWordWrap: break-word; + +/* Date */ +@dateMargin: -0.5rem 0em 0em; +@datePadding: 0em; +@dateColor: @lightTextColor; +@dateFontSize: @relativeMedium; +@dateFontWeight: @normal; +@dateFontStyle: @normal; + +/* Summary */ +@summaryMargin: 0em; +@summaryFontSize: @relativeMedium; +@summaryFontWeight: @bold; +@summaryColor: @textColor; + +/* Summary Image */ +@summaryImageWidth: auto; +@summaryImageHeight: 10em; +@summaryImageMargin: -0.25em 0.25em 0em 0em; +@summaryImageVerticalAlign: middle; +@summaryImageBorderRadius: 0.25em; + +/* Summary Date */ +@summaryDateDisplay: inline-block; +@summaryDateFloat: none; +@summaryDateMargin: 0em 0em 0em 0.5em; +@summaryDatePadding: 0em; +@summaryDateFontSize: @relativeTiny; +@summaryDateFontWeight: @dateFontWeight; +@summaryDateFontStyle: @dateFontStyle; +@summaryDateColor: @dateColor; + +/* User */ +@userFontWeight: @bold; +@userDistance: 0em; +@userImageWidth: @summaryImageWidth; +@userImageHeight: @summaryImageHeight; +@userImageMargin: @summaryImageMargin; +@userImageVerticalAlign: @summaryImageVerticalAlign; + +/* Extra Summary Data */ +@extraMargin: 0.5em 0em 0em; +@extraBackground: none; +@extraPadding: 0em; +@extraColor: @textColor; + +/* Extra Images */ +@extraImageMargin: 0em 0.25em 0em 0em; +@extraImageWidth: 6em; + +/* Extra Text */ +@extraTextPadding: 0em; +@extraTextPointer: none; +@extraTextFontSize: @relativeMedium; +@extraTextLineHeight: @lineHeight; +@extraTextMaxWidth: 500px; + +/* Metadata Group */ +@metadataDisplay: inline-block; +@metadataFontSize: @relativeTiny; +@metadataMargin: 0.5em 0em 0em; +@metadataBackground: none; +@metadataBorder: none; +@metadataBorderRadius: 0; +@metadataBoxShadow: none; +@metadataPadding: 0em; +@metadataColor: rgba(0, 0, 0, 0.6); + +@metadataElementSpacing: 0.75em; + +/* Like */ +@likeColor: ''; +@likeHoverColor: #FF2733; +@likeActiveColor: #EF404A; +@likeTransition: 0.2s color ease; + +/* Metadata Divider */ +@metadataDivider: ''; +@metadataDividerColor: rgba(0, 0, 0, 0.2); +@metadataDividerOffset: -1em; + +@metadataActionCursor: pointer; +@metadataActionOpacity: 1; +@metadataActionColor: rgba(0, 0, 0, 0.5); +@metadataActionTransition: color @defaultDuration @defaultEasing; + +@metadataActionHoverColor: @selectedTextColor; + +/*------------------- + Variations +--------------------*/ diff --git a/static/semantic/src/themes/default/views/item.overrides b/static/semantic/src/themes/default/views/item.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/item.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/item.variables b/static/semantic/src/themes/default/views/item.variables new file mode 100755 index 0000000..18dbaf3 --- /dev/null +++ b/static/semantic/src/themes/default/views/item.variables @@ -0,0 +1,157 @@ +/******************************* + Item +*******************************/ + +/*------------------- + View +--------------------*/ + +/* Group */ +@groupMargin: 1.5em 0em; + +/* Item */ +@display: flex; +@background: transparent; +@borderRadius: 0rem; +@minHeight: 0px; +@padding: 0em; +@width: 100%; +@boxShadow: none; +@border: none; +@zIndex: ''; +@transition: box-shadow @defaultDuration @defaultEasing; + +/* Responsive */ +@itemSpacing: 1em; +@imageWidth: 175px; +@contentImageDistance: 1.5em; + +@tabletItemSpacing: 1em; +@tabletImageWidth: 150px; +@tabletContentImageDistance: 1em; + +@mobileItemSpacing: 2em; +@mobileImageWidth: auto; +@mobileImageMaxHeight: 250px; +@mobileContentImageDistance: 1.5em; + + +/*------------------- + Content +--------------------*/ + +/* Image */ +@imageDisplay: block; +@imageFloat: none; +@imageMaxHeight: ''; +@imageVerticalAlign: top; +@imageMargin: 0em; +@imagePadding: 0em; +@imageBorder: none; +@imageBorderRadius: 0.125rem; +@imageBoxShadow: none; +@imageBorder: none; + +/* Content */ +@contentDisplay: block; +@contentVerticalAlign: top; + +@contentWidth: auto; +@contentOffset: 0em; +@contentBackground: none; +@contentMargin: 0em; +@contentPadding: 0em; +@contentFontSize: 1em; +@contentBorder: none; +@contentBorderRadius: 0em; +@contentBoxShadow: none; + +/* Header */ +@headerMargin: -@lineHeightOffset 0em 0em; +@headerFontWeight: @bold; +@headerFontSize: @relativeBig; +@headerColor: @darkTextColor; + +/* Metadata */ +@metaMargin: 0.5em 0em 0.5em; +@metaFontSize: 1em; +@metaLineHeight: 1em; +@metaSpacing: 0.3em; +@metaColor: rgba(0, 0, 0, 0.6); + +/* Icons */ +@actionOpacity: 0.75; +@actionHoverOpacity: 1; +@actionTransition: color @defaultDuration @defaultEasing; + +/* Actions */ +@favoriteColor: #FFB70A; +@favoriteActiveColor: #FFE623; +@likeColor: #FF2733; +@likeActiveColor: #FF2733; + +/* Links */ +@headerLinkColor: @headerColor; +@headerLinkHoverColor: @linkHoverColor; +@metaLinkColor: @lightTextColor; +@metaLinkHoverColor: @textColor; +@contentLinkColor: ''; +@contentLinkHoverColor: ''; +@contentLinkTransition: color @defaultDuration @defaultEasing; + + +/* Description */ +@descriptionDistance: 0.6em; +@descriptionMaxWidth: auto; +@descriptionFontSize: 1em; +@descriptionLineHeight: @lineHeight; +@descriptionColor: @textColor; + +/* Content Image */ +@contentImageWidth: ''; +@contentImageVerticalAlign: middle; + +/* Avatar Image */ +@avatarSize: @contentImageWidth; +@avatarBorderRadius: @circularRadius; + +/* Paragraph */ +@paragraphDistance: 0.5em; + +/* Additional Content */ +@extraDivider: none; +@extraHorizontalSpacing: 0.5rem; +@extraRowSpacing: 0.5rem; + +@extraBackground: none; +@extraDisplay: block; +@extraPosition: relative; +@extraMargin: (1rem - @extraRowSpacing) 0em 0em; +@extraTop: 0em; +@extraLeft: 0em; +@extraWidth: 100%; +@extraPadding: 0em 0em 0em; +@extraBoxShadow: none; +@extraColor: @lightTextColor; +@extraTransition: color @defaultDuration @defaultEasing; + +/*------------------- + Variations +--------------------*/ + +/* Relaxed */ +@relaxedItemSpacing: 1.5em; +@veryRelaxedItemSpacing: 2em; + +/* Divided */ +@dividedBorder: 1px solid @borderColor; +@dividedMargin: 0em; +@dividedPadding: 1em 0em; + +@dividedFirstLastMargin: 0em; +@dividedFirstLastPadding: 0em; + + +/* Unstackable */ +@unstackableMobileImageWidth: 125px; + diff --git a/static/semantic/src/themes/default/views/statistic.overrides b/static/semantic/src/themes/default/views/statistic.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/default/views/statistic.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/default/views/statistic.variables b/static/semantic/src/themes/default/views/statistic.variables new file mode 100755 index 0000000..27f3bba --- /dev/null +++ b/static/semantic/src/themes/default/views/statistic.variables @@ -0,0 +1,99 @@ +/******************************* + Statistic +*******************************/ + +/*------------------- + View +--------------------*/ + +@verticalMargin: 1em; +@margin: @verticalMargin 0em; +@textAlign: center; +@maxWidth: auto; + +/* Group */ +@horizontalSpacing: 1.5em; +@rowSpacing: 1em; +@groupMargin: @verticalMargin -@horizontalSpacing -@rowSpacing; + +/* Group Element */ +@elementMargin: 0em @horizontalSpacing @rowSpacing; +@elementMaxWidth: @maxWidth; + +/*------------------- + Content +--------------------*/ + +/* Value */ +@valueFont: @pageFont; +@valueFontWeight: @normal; +@valueLineHeight: 1em; +@valueColor: @black; +@valueTextTransform: uppercase; + +/* Label */ +@labelSize: @relativeMedium; +@topLabelDistance: 0rem; +@bottomLabelDistance: 0rem; +@labelFont: @headerFont; +@labelFontWeight: @bold; +@labelColor: @textColor; +@labelLineHeight: @relativeLarge; +@labelTextTransform: uppercase; + +/* Text */ +@textValueLineHeight: 1em; +@textValueMinHeight: 2em; +@textValueFontWeight: @bold; + +/* Label Image */ +@imageHeight: 3rem; +@imageVerticalAlign: baseline; + +/*------------------- + Types +--------------------*/ + +@horizontalGroupElementMargin: 1em 0em; +@horizontalLabelDistance: 0.75em; + +/*------------------- + Variations +--------------------*/ + +/* Floated */ +@leftFloatedMargin: 0em 2em 1em 0em; +@rightFloatedMargin: 0em 0em 1em 2em; + +/* Inverted */ +@invertedValueColor: @white; +@invertedLabelColor: @invertedTextColor; + +/* Item Width */ +@itemGroupMargin: 0em 0em -@rowSpacing; +@itemMargin: 0em 0em @rowSpacing; + +/* Size */ +@miniTextValueSize: 1rem; +@miniValueSize: 1.5rem; +@miniHorizontalValueSize: 1.5rem; + +@tinyTextValueSize: 1rem; +@tinyValueSize: 2rem; +@tinyHorizontalValueSize: 2rem; + +@smallTextValueSize: 1rem; +@smallValueSize: 3rem; +@smallHorizontalValueSize: 2rem; + +@textValueSize: 2rem; +@valueSize: 4rem; +@horizontalValueSize: 3rem; + +@largeTextValueSize: 2.5rem; +@largeValueSize: 5rem; +@largeHorizontalValueSize: 4rem; + +@hugeTextValueSize: 2.5rem; +@hugeValueSize: 6rem; +@hugeHorizontalValueSize: 5rem; diff --git a/static/semantic/src/themes/duo/elements/loader.overrides b/static/semantic/src/themes/duo/elements/loader.overrides new file mode 100755 index 0000000..14fb0da --- /dev/null +++ b/static/semantic/src/themes/duo/elements/loader.overrides @@ -0,0 +1,3 @@ +/******************************* + Theme Overrides +*******************************/ diff --git a/static/semantic/src/themes/duo/elements/loader.variables b/static/semantic/src/themes/duo/elements/loader.variables new file mode 100755 index 0000000..0608cfd --- /dev/null +++ b/static/semantic/src/themes/duo/elements/loader.variables @@ -0,0 +1,6 @@ +/******************************* + Loader +*******************************/ + +@shapeBorderColor: @primaryColor @primaryColor @secondaryColor @secondaryColor; +@invertedShapeBorderColor: @lightPrimaryColor @lightPrimaryColor @lightSecondaryColor @lightSecondaryColor; \ No newline at end of file diff --git a/static/semantic/src/themes/fixed-width/collections/grid.overrides b/static/semantic/src/themes/fixed-width/collections/grid.overrides new file mode 100755 index 0000000..c5c5336 --- /dev/null +++ b/static/semantic/src/themes/fixed-width/collections/grid.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/static/semantic/src/themes/fixed-width/collections/grid.variables b/static/semantic/src/themes/fixed-width/collections/grid.variables new file mode 100755 index 0000000..d27f1d2 --- /dev/null +++ b/static/semantic/src/themes/fixed-width/collections/grid.variables @@ -0,0 +1,23 @@ +/* Fixed Page Grid */ + +@mobileWidth: auto; +@mobileMargin: 0em; +@mobileGutter: 0em; + +@tabletWidth: auto; +@tabletMargin: 0em; +@tabletGutter: 8%; + +@computerWidth: 960px; +@computerMargin: auto; +@computerGutter: 0; + +@largeMonitorWidth: 1180px; +@largeMonitorMargin: auto; +@largeMonitorGutter: 0; + +@widescreenMonitorWidth: 1300px; +@widescreenMargin: auto; +@widescreenMonitorGutter: 0; + +@tableWidth: ''; \ No newline at end of file diff --git a/static/semantic/src/themes/fixed-width/modules/modal.overrides b/static/semantic/src/themes/fixed-width/modules/modal.overrides new file mode 100755 index 0000000..c5c5336 --- /dev/null +++ b/static/semantic/src/themes/fixed-width/modules/modal.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/static/semantic/src/themes/fixed-width/modules/modal.variables b/static/semantic/src/themes/fixed-width/modules/modal.variables new file mode 100755 index 0000000..16579af --- /dev/null +++ b/static/semantic/src/themes/fixed-width/modules/modal.variables @@ -0,0 +1,37 @@ + +/* Responsive Widths */ +@modalComputerWidth: 700px; +@modalLargeMonitorWidth: 800px; +@modalWidescreenMonitorWidth: 850px; + +@modalComputerMargin: 0em 0em 0em -(@modalComputerWidth / 2); +@modalLargeMonitorMargin: 0em 0em 0em -(@modalLargeMonitorWidth / 2); +@modalWidescreenMonitorMargin: 0em 0em 0em -(@modalWidescreenMonitorWidth / 2); + + +/*------------------- + Variations +--------------------*/ + +/* Sizes */ +@modalSmallRatio: 0.6; +@modalLargeRatio: 1.2; + +/* Derived Responsive Sizes */ +@modalSmallHeaderSize: 1.3em; +@modalSmallComputerWidth: (@modalComputerWidth * @modalSmallRatio); +@modalSmallLargeMonitorWidth: (@modalLargeMonitorWidth * @modalSmallRatio); +@modalSmallWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalSmallRatio); + +@modalSmallComputerMargin: 0em 0em 0em -(@modalSmallComputerWidth / 2); +@modalSmallLargeMonitorMargin: 0em 0em 0em -(@modalSmallLargeMonitorWidth / 2); +@modalSmallWidescreenMonitorMargin: 0em 0em 0em -(@modalSmallWidescreenMonitorWidth / 2); + +@modalLargeHeaderSize: 1.3em; +@modalLargeComputerWidth: (@modalComputerWidth * @modalLargeRatio); +@modalLargeLargeMonitorWidth: (@modalLargeMonitorWidth * @modalLargeRatio); +@modalLargeWidescreenMonitorWidth: (@modalWidescreenMonitorWidth * @modalLargeRatio); + +@modalLargeComputerMargin: 0em 0em 0em -(@modalLargeComputerWidth / 2); +@modalLargeLargeMonitorMargin: 0em 0em 0em -(@modalLargeLargeMonitorWidth / 2); +@modalLargeWidescreenMonitorMargin: 0em 0em 0em -(@modalLargeWidescreenMonitorWidth / 2); \ No newline at end of file diff --git a/static/semantic/src/themes/flat/collections/form.overrides b/static/semantic/src/themes/flat/collections/form.overrides new file mode 100755 index 0000000..68f40fe --- /dev/null +++ b/static/semantic/src/themes/flat/collections/form.overrides @@ -0,0 +1,28 @@ +/******************************* + Overrides +*******************************/ + +.ui.form input[type="text"], +.ui.form input[type="email"], +.ui.form input[type="date"], +.ui.form input[type="password"], +.ui.form input[type="number"], +.ui.form input[type="url"], +.ui.form input[type="tel"] { + border-bottom: 1px solid #DDDDDD; +} + +.ui.form .selection.dropdown { + border: none; + box-shadow: none !important; + border-bottom: 1px solid #DDDDDD; + border-radius: 0em !important; +} +.ui.form .selection.dropdown > .menu { + border-top-width: 1px !important; + border-radius: @defaultBorderRadius !important; +} + +.ui.form .ui.icon.input > .icon { + width: 1em; +} \ No newline at end of file diff --git a/static/semantic/src/themes/flat/collections/form.variables b/static/semantic/src/themes/flat/collections/form.variables new file mode 100755 index 0000000..d649997 --- /dev/null +++ b/static/semantic/src/themes/flat/collections/form.variables @@ -0,0 +1,74 @@ +/******************************* + Form +*******************************/ + +/*------------------- + Elements +--------------------*/ + + +/* Text */ +@paragraphMargin: 1em 0em; + +/* Field */ +@fieldMargin: 0em 0em 1em; + +/* Form Label */ +@labelFontSize: @relative11px; +@labelTextTransform: uppercase; + +@groupedLabelTextTransform: none; + +/* Input */ +@inputHorizontalPadding: 0.5em; +@inputBackground: transparent; +@inputBorder: none; +@inputBorderRadius: 0em; +@inputBoxShadow: none; +@invertedInputColor: @invertedTextColor; + +@textAreaPadding: 1em; +@textAreaBackground: transparent; +@textAreaFocusBackground: #EEEEEE; +@textAreaBorder: 1px solid #DDDDDD; + +/* Divider */ +@dividerMargin: 1em 0em; + +/* Validation Prompt */ +@validationMargin: 0em 0em 0em 1em; +@validationArrowOffset: -0.3em; + +/*------------------- + States +--------------------*/ + +/* Disabled */ + +/* Focus */ +@inputFocusPointerSize: 0px; +@inputErrorPointerSize: 0px; + +/* Dropdown Error */ +@dropdownErrorHoverBackground: #FFF2F2; +@dropdownErrorActiveBackground: #FDCFCF; + +/* Focused Error */ +@inputErrorFocusBackground: @negativeBackgroundColor; +@inputErrorFocusColor: @negativeColorHover; +@inputErrorFocusBorder: @negativeBorderColor; +@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset; + +/* Placeholder */ +@inputPlaceholderColor: lighten(@inputColor, 55); +@inputPlaceholderFocusColor: lighten(@inputColor, 35); +@inputErrorPlaceholderColor: lighten(@formErrorColor, 10); +@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5); + +/* Loading */ +@formLoaderDimmerColor: rgba(255, 255, 255, 0.6); +@formLoaderPath: "@{imagePath}/loader-large.gif"; +@formLoaderPosition: 50% 50%; + +/* (x) Wide Field */ +@gutterWidth: 1.5em; diff --git a/static/semantic/src/themes/flat/globals/site.overrides b/static/semantic/src/themes/flat/globals/site.overrides new file mode 100755 index 0000000..c5c5336 --- /dev/null +++ b/static/semantic/src/themes/flat/globals/site.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/static/semantic/src/themes/flat/globals/site.variables b/static/semantic/src/themes/flat/globals/site.variables new file mode 100755 index 0000000..90e7c87 --- /dev/null +++ b/static/semantic/src/themes/flat/globals/site.variables @@ -0,0 +1,107 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Paths +--------------------*/ + +@imagePath : "../../themes/default/assets/images"; +@fontPath : "../../themes/default/assets/fonts"; + +/*------------------- + Fonts +--------------------*/ + +@headerFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@pageFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; +@fontSmoothing : antialiased; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@blue : #0074D9; +@green : #2ECC40; +@orange : #FF851B; +@pink : #D9499A; +@purple : #A24096; +@red : #FF4136; +@teal : #39CCCC; +@yellow : #FFCB08; + +@black : #191919; +@grey : #CCCCCC; +@white : #FFFFFF; + +/*--- Light Colors ---*/ +@lightBlue : #54C8FF; +@lightGreen : #2ECC40; +@lightOrange : #FF851B; +@lightPink : #FF8EDF; +@lightPurple : #CDC6FF; +@lightRed : #FF695E; +@lightTeal : #6DFFFF; +@lightYellow : #FFE21F; + +@primaryColor : @blue; +@secondaryColor : @black; + + +/*------------------- + Page +--------------------*/ + +@bodyBackground : #FCFCFC; +@fontSize : 14px; +@textColor : rgba(0, 0, 0, 0.8); + +@headerMargin : 1em 0em 1rem; +@paragraphMargin : 0em 0em 1em; + +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten( @linkColor, 5); +@linkHoverUnderline : @linkUnderline; + +@highlightBackground : #FFFFCC; +@highlightColor : @textColor; + + + +/*------------------- + Background Colors +--------------------*/ + +@subtleTransparentBlack : rgba(0, 0, 0, 0.03); +@transparentBlack : rgba(0, 0, 0, 0.05); +@strongTransparentBlack : rgba(0, 0, 0, 0.10); + +@subtleTransparentWhite : rgba(255, 255, 255, 0.01); +@transparentWhite : rgba(255, 255, 255, 0.05); +@strongTransparentWhite : rgba(255, 255, 255, 0.01); + +/* Used for differentiating neutrals */ +@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); + +/* Used for differentiating layers */ +@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05); + + +/*------------------- + Grid +--------------------*/ + +@columnCount: 16; + +/*------------------- + Breakpoints +--------------------*/ + +@mobileBreakpoint : 320px; +@tabletBreakpoint : 768px; +@computerBreakpoint : 992px; +@largeMonitorBreakpoint : 1400px; +@widescreenMonitorBreakpoint : 1900px; + diff --git a/static/semantic/src/themes/github/assets/fonts/octicons-local.ttf b/static/semantic/src/themes/github/assets/fonts/octicons-local.ttf new file mode 100755 index 0000000..d5f4e2e Binary files /dev/null and b/static/semantic/src/themes/github/assets/fonts/octicons-local.ttf differ diff --git a/static/semantic/src/themes/github/assets/fonts/octicons.svg b/static/semantic/src/themes/github/assets/fonts/octicons.svg new file mode 100755 index 0000000..d3116a6 --- /dev/null +++ b/static/semantic/src/themes/github/assets/fonts/octicons.svg @@ -0,0 +1,200 @@ + + + diff --git a/static/semantic/src/themes/github/assets/fonts/octicons.ttf b/static/semantic/src/themes/github/assets/fonts/octicons.ttf new file mode 100755 index 0000000..9e09105 Binary files /dev/null and b/static/semantic/src/themes/github/assets/fonts/octicons.ttf differ diff --git a/static/semantic/src/themes/github/assets/fonts/octicons.woff b/static/semantic/src/themes/github/assets/fonts/octicons.woff new file mode 100755 index 0000000..cc3c19f Binary files /dev/null and b/static/semantic/src/themes/github/assets/fonts/octicons.woff differ diff --git a/static/semantic/src/themes/github/collections/breadcrumb.variables b/static/semantic/src/themes/github/collections/breadcrumb.variables new file mode 100755 index 0000000..e22050c --- /dev/null +++ b/static/semantic/src/themes/github/collections/breadcrumb.variables @@ -0,0 +1,11 @@ +/******************************* + Site Overrides +*******************************/ + +@dividerOpacity: 1; +@dividerSpacing: 0; +@dividerSize: @big; +@dividerColor: inherit; + +@huge: 1.5384em; + diff --git a/static/semantic/src/themes/github/collections/form.overrides b/static/semantic/src/themes/github/collections/form.overrides new file mode 100755 index 0000000..89df9c0 --- /dev/null +++ b/static/semantic/src/themes/github/collections/form.overrides @@ -0,0 +1,16 @@ +/******************************* + Overrides +*******************************/ + +.ui.selection.dropdown { + background-color: #FAFAFA; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; + border-color: #CCCCCC; +} + +.ui.selection.dropdown:focus { + box-shadow: + 0px 1px 2px rgba(0, 0, 0, 0.075) inset, + 0px 0px 5px rgba(81, 167, 232, 0.5) + ; +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/collections/form.variables b/static/semantic/src/themes/github/collections/form.variables new file mode 100755 index 0000000..e08c868 --- /dev/null +++ b/static/semantic/src/themes/github/collections/form.variables @@ -0,0 +1,40 @@ +/******************************* + Form +*******************************/ + +/*------------------- + Elements +--------------------*/ + +@inputBackground: #FAFAFA; +@inputBorder: 1px solid #CCCCCC; +@inputBoxShadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; +@inputBorderRadius: 3px; + +@labelFontWeight: bold; +@labelDistance: 6px; + +/*------------------- + States +--------------------*/ + +@inputFocusBackground: #FFFFFF; +@inputFocusBoxShadow: + 0px 1px 2px rgba(0, 0, 0, 0.075) inset, + 0px 0px 5px rgba(81, 167, 232, 0.5) +; +@inputFocusBorderColor: #51A7E8; +@inputFocusBorderRadius: @inputBorderRadius; + +/*------------------- + Types +--------------------*/ + + +/*------------------- + Variations +--------------------*/ + +/*------------------- + Groups +--------------------*/ diff --git a/static/semantic/src/themes/github/collections/grid.variables b/static/semantic/src/themes/github/collections/grid.variables new file mode 100755 index 0000000..7b08138 --- /dev/null +++ b/static/semantic/src/themes/github/collections/grid.variables @@ -0,0 +1,2 @@ + +@gutterWidth: 1.538rem; \ No newline at end of file diff --git a/static/semantic/src/themes/github/collections/menu.overrides b/static/semantic/src/themes/github/collections/menu.overrides new file mode 100755 index 0000000..06d7827 --- /dev/null +++ b/static/semantic/src/themes/github/collections/menu.overrides @@ -0,0 +1,7 @@ +/******************************* + Overrides +*******************************/ + +.ui.menu .item > .label { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/collections/menu.variables b/static/semantic/src/themes/github/collections/menu.variables new file mode 100755 index 0000000..1479320 --- /dev/null +++ b/static/semantic/src/themes/github/collections/menu.variables @@ -0,0 +1,61 @@ +/*------------------- + Collection +--------------------*/ + +@itemVerticalPadding: 1em; +@itemHorizontalPadding: 1.25em; + +@background: #FFFFFF linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05)); +@fontWeight: normal; + +@activeBorderSize: 0em; + +@hoverBackground: rgba(0, 0, 0, 0.02); +@downBackground: rgba(0, 0, 0, 0.06); + +@activeBackground: rgba(0, 0, 0, 0.04); +@activeHoverBackground: rgba(0, 0, 0, 0.04); + + +@headerBackground: rgba(0, 0, 0, 0.08); + +@subMenuMargin: 0.5em -0.6em 0; +@subMenuHorizontalPadding: 0.7em; + +@arrowHoverColor: #EEEEEE; +@arrowActiveColor: #EEEEEE; +@arrowVerticalHoverColor: #F4F4F4; +@arrowVerticalActiveColor: #F4F4F4; + +@dividerBackground: #E8E8E8; +@verticalDividerBackground: #E8E8E8; + +/*------------------- + Elements +--------------------*/ + +@buttonOffset: -0.15em; +@buttonVerticalPadding: 0.75em; + +/*------------------- + Types +--------------------*/ + +@paginationMinWidth: 3.5em; + +@tieredActiveItemBackground: #F5F5F5; +@tieredActiveMenuBackground: #F5F5F5; + +/*------------------- + Variations +--------------------*/ + +@verticalBackground: #FFFFFF; +@verticalItemBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)); + +@invertedBackground: @black linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.0)); +@invertedBoxShadow : + 0px 1px 2px 0px rgba(0, 0, 0, 0.15), + 0px 0px 0px 1px rgba(255, 255, 255, 0.15) +; +@secondaryVerticalPadding: 0.75em; \ No newline at end of file diff --git a/static/semantic/src/themes/github/collections/message.overrides b/static/semantic/src/themes/github/collections/message.overrides new file mode 100755 index 0000000..01519ed --- /dev/null +++ b/static/semantic/src/themes/github/collections/message.overrides @@ -0,0 +1,11 @@ +.ui.info.message { + background: linear-gradient(#D8EBF8, #D0E3EF); +} +.ui.error.message { + background: linear-gradient(#F8D8D8, #EFD0D0); +} +.ui.warning.message { + background: linear-gradient(#FFE3C8, #F5DAC0); +} +.ui.success.message { +} diff --git a/static/semantic/src/themes/github/collections/message.variables b/static/semantic/src/themes/github/collections/message.variables new file mode 100755 index 0000000..165eef6 --- /dev/null +++ b/static/semantic/src/themes/github/collections/message.variables @@ -0,0 +1,29 @@ +@background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05)) #FEFEFE; +@boxShadow: + 0px 0px 0px 1px rgba(255, 255, 255, 0.3) inset, + 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset +; +@verticalPadding: 15px; +@horizontalPadding: 15px; + +@headerFontSize: 1.15em; + +@infoTextColor: #264C72; +@warningTextColor: #613A00; +@errorTextColor: #991111; + +@floatingBoxShadow: + 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset, + 0px 2px 3px 0px rgba(0, 0, 0, 0.1), + 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset +; + +@infoBorderColor: #97C1DA; +@errorBorderColor: #DA9797; +@warningBorderColor: #DCA874; + +@small: 12px; +@medium: 13px; +@large: 14px; +@huge: 16px; +@massive: 18px; diff --git a/static/semantic/src/themes/github/collections/table.variables b/static/semantic/src/themes/github/collections/table.variables new file mode 100755 index 0000000..0387ce6 --- /dev/null +++ b/static/semantic/src/themes/github/collections/table.variables @@ -0,0 +1,8 @@ +/******************************* + User Variable Overrides +*******************************/ + +@background: #F8F8F8; + +@cellVerticalPadding: @relative6px; +@cellHorizontalPadding: @relative8px; \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/button.overrides b/static/semantic/src/themes/github/elements/button.overrides new file mode 100755 index 0000000..6273007 --- /dev/null +++ b/static/semantic/src/themes/github/elements/button.overrides @@ -0,0 +1,4 @@ +/******************************* + Overrides +*******************************/ + diff --git a/static/semantic/src/themes/github/elements/button.variables b/static/semantic/src/themes/github/elements/button.variables new file mode 100755 index 0000000..3967fa5 --- /dev/null +++ b/static/semantic/src/themes/github/elements/button.variables @@ -0,0 +1,77 @@ +/*------------------- + Button Variables +--------------------*/ + +/* Button Variables */ +@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; +@textTransform: none; +@fontWeight: bold; +@textColor: #333333; + +@textShadow: 0px 1px 0px rgba(255, 255, 255, 0.9); +@invertedTextShadow: 0px -1px 0px rgba(0, 0, 0, 0.25); + +@borderRadius: @relativeBorderRadius; + +@verticalPadding: 0.75em; +@horizontalPadding: 1.15em; + +@backgroundColor: #FAFAFA; +@backgroundImage: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1)); +@boxShadow: + 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, + 0 0 0 1px rgba(0, 0, 0, 0.13) inset, + 0 1px 3px rgba(0, 0, 0, 0.05) +; + +@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); +@coloredBoxShadow: + 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, + 0 0 0 1px rgba(0, 0, 0, 0.1) inset, + 0 1px 3px rgba(0, 0, 0, 0.05) +; + +@hoverBackgroundColor: #E0E0E0; +@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); +@hoverBoxShadow: @boxShadow; + +@downBackgroundColor: ''; +@downBackgroundImage: ''; +@downBoxShadow: + 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, + 0 0 0 1px rgba(0, 0, 0, 0.13) inset, + 0 3px 5px rgba(0, 0, 0, 0.15) inset !important +; +@activeBackgroundColor: #DFDFDF; +@activeBackgroundImage: none; +@activeBoxShadow: + 0 -1px 0 0 rgba(0, 0, 0, 0.05) inset, + 0 0 0 1px rgba(0, 0, 0, 0.13) inset, + 0 3px 5px rgba(0, 0, 0, 0.1) inset !important +; + +@labeledIconBackgroundColor: transparent; +@labeledIconBorder: transparent; +@labeledIconPadding: (@horizontalPadding + 2.25em); + +@basicFontWeight: bold; +@basicTextColor: @linkColor; +@basicHoverTextColor: @linkHoverColor; + +@basicHoverBackground: #E0E0E0; + +@blue: #3072B3; +@green: #60B044; +@black: #5D5D5D; + +@primaryColor: @blue; +@secondaryColor: @black; + +@mini: 0.6rem; +@tiny: 0.7rem; +@small: 0.85rem; +@medium: 0.92rem; +@large: 1rem; +@big: 1.125rem; +@huge: 1.25rem; +@massive: 1.3rem; diff --git a/static/semantic/src/themes/github/elements/header.variables b/static/semantic/src/themes/github/elements/header.variables new file mode 100755 index 0000000..ae1da01 --- /dev/null +++ b/static/semantic/src/themes/github/elements/header.variables @@ -0,0 +1,9 @@ +/******************************* + Header +*******************************/ + +/*------------------- + Element +--------------------*/ + +@iconMargin: @4px; diff --git a/static/semantic/src/themes/github/elements/icon.overrides b/static/semantic/src/themes/github/elements/icon.overrides new file mode 100755 index 0000000..c86b7ed --- /dev/null +++ b/static/semantic/src/themes/github/elements/icon.overrides @@ -0,0 +1,208 @@ +/* Octicons */ + +.icon.alert:before { content: '\f02d'} /*  */ +.icon.alignment.align:before { content: '\f08a'} /*  */ +.icon.alignment.aligned.to:before { content: '\f08e'} /*  */ +.icon.alignment.unalign:before { content: '\f08b'} /*  */ +.icon.arrow.down:before { content: '\f03f'} /*  */ +.icon.arrow.left:before { content: '\f040'} /*  */ +.icon.arrow.right:before { content: '\f03e'} /*  */ +.icon.arrow.small.down:before { content: '\f0a0'} /*  */ +.icon.arrow.small.left:before { content: '\f0a1'} /*  */ +.icon.arrow.small.right:before { content: '\f071'} /*  */ +.icon.arrow.small.up:before { content: '\f09f'} /*  */ +.icon.arrow.up:before { content: '\f03d'} /*  */ +.icon.beer:before { content: '\f069'} /*  */ +.icon.book:before { content: '\f007'} /*  */ +.icon.bookmark:before { content: '\f07b'} /*  */ +.icon.briefcase:before { content: '\f0d3'} /*  */ +.icon.broadcast:before { content: '\f048'} /*  */ +.icon.browser:before { content: '\f0c5'} /*  */ +.icon.bug:before { content: '\f091'} /*  */ +.icon.calendar:before { content: '\f068'} /*  */ +.icon.check:before { content: '\f03a'} /*  */ +.icon.checklist:before { content: '\f076'} /*  */ +.icon.chevron.down:before { content: '\f0a3'} /*  */ +.icon.chevron.left:before { content: '\f0a4'} /*  */ +.icon.chevron.right:before { content: '\f078'} /*  */ +.icon.chevron.up:before { content: '\f0a2'} /*  */ +.icon.circle.slash:before { content: '\f084'} /*  */ +.icon.circuit.board:before { content: '\f0d6'} /*  */ +.icon.clippy:before { content: '\f035'} /*  */ +.icon.clock:before { content: '\f046'} /*  */ +.icon.cloud.download:before { content: '\f00b'} /*  */ +.icon.cloud.upload:before { content: '\f00c'} /*  */ +.icon.code:before { content: '\f05f'} /*  */ +.icon.color.mode:before { content: '\f065'} /*  */ +.icon.comment.add:before, +.icon.comment:before { content: '\f02b'} /*  */ +.icon.comment.discussion:before { content: '\f04f'} /*  */ +.icon.credit.card:before { content: '\f045'} /*  */ +.icon.dash:before { content: '\f0ca'} /*  */ +.icon.dashboard:before { content: '\f07d'} /*  */ +.icon.database:before { content: '\f096'} /*  */ +.icon.device.camera:before { content: '\f056'} /*  */ +.icon.device.camera.video:before { content: '\f057'} /*  */ +.icon.device.desktop:before { content: '\f27c'} /*  */ +.icon.device.mobile:before { content: '\f038'} /*  */ +.icon.diff:before { content: '\f04d'} /*  */ +.icon.diff.added:before { content: '\f06b'} /*  */ +.icon.diff.ignored:before { content: '\f099'} /*  */ +.icon.diff.modified:before { content: '\f06d'} /*  */ +.icon.diff.removed:before { content: '\f06c'} /*  */ +.icon.diff.renamed:before { content: '\f06e'} /*  */ +.icon.ellipsis:before { content: '\f09a'} /*  */ +.icon.eye.unwatch:before, +.icon.eye.watch:before, +.icon.eye:before { content: '\f04e'} /*  */ +.icon.file.binary:before { content: '\f094'} /*  */ +.icon.file.code:before { content: '\f010'} /*  */ +.icon.file.directory:before { content: '\f016'} /*  */ +.icon.file.media:before { content: '\f012'} /*  */ +.icon.file.pdf:before { content: '\f014'} /*  */ +.icon.file.submodule:before { content: '\f017'} /*  */ +.icon.file.symlink.directory:before { content: '\f0b1'} /*  */ +.icon.file.symlink.file:before { content: '\f0b0'} /*  */ +.icon.file.text:before { content: '\f011'} /*  */ +.icon.file.zip:before { content: '\f013'} /*  */ +.icon.flame:before { content: '\f0d2'} /*  */ +.icon.fold:before { content: '\f0cc'} /*  */ +.icon.gear:before { content: '\f02f'} /*  */ +.icon.gift:before { content: '\f042'} /*  */ +.icon.gist:before { content: '\f00e'} /*  */ +.icon.gist.secret:before { content: '\f08c'} /*  */ +.icon.git.branch.create:before, +.icon.git.branch.delete:before, +.icon.git.branch:before { content: '\f020'} /*  */ +.icon.git.commit:before { content: '\f01f'} /*  */ +.icon.git.compare:before { content: '\f0ac'} /*  */ +.icon.git.merge:before { content: '\f023'} /*  */ +.icon.git.pull.request.abandoned:before, +.icon.git.pull.request:before { content: '\f009'} /*  */ +.icon.globe:before { content: '\f0b6'} /*  */ +.icon.graph:before { content: '\f043'} /*  */ +.icon.heart:before { content: '\2665'} /* ♥ */ +.icon.history:before { content: '\f07e'} /*  */ +.icon.home:before { content: '\f08d'} /*  */ +.icon.horizontal.rule:before { content: '\f070'} /*  */ +.icon.hourglass:before { content: '\f09e'} /*  */ +.icon.hubot:before { content: '\f09d'} /*  */ +.icon.inbox:before { content: '\f0cf'} /*  */ +.icon.info:before { content: '\f059'} /*  */ +.icon.issue.closed:before { content: '\f028'} /*  */ +.icon.issue.opened:before { content: '\f026'} /*  */ +.icon.issue.reopened:before { content: '\f027'} /*  */ +.icon.jersey:before { content: '\f019'} /*  */ +.icon.jump.down:before { content: '\f072'} /*  */ +.icon.jump.left:before { content: '\f0a5'} /*  */ +.icon.jump.right:before { content: '\f0a6'} /*  */ +.icon.jump.up:before { content: '\f073'} /*  */ +.icon.key:before { content: '\f049'} /*  */ +.icon.keyboard:before { content: '\f00d'} /*  */ +.icon.law:before { content: '\f0d8'} /*  */ +.icon.light.bulb:before { content: '\f000'} /*  */ +.icon.linkify:before { content: '\f05c'} /*  */ +.icon.linkify.external:before { content: '\f07f'} /*  */ +.icon.list.ordered:before { content: '\f062'} /*  */ +.icon.list.unordered:before { content: '\f061'} /*  */ +.icon.location:before { content: '\f060'} /*  */ +.icon.gist.private:before, +.icon.mirror.private:before, +.icon.git.fork.private:before, +.icon.lock:before { content: '\f06a'} /*  */ +.icon.logo.github:before { content: '\f092'} /*  */ +.icon.mail:before { content: '\f03b'} /*  */ +.icon.mail.read:before { content: '\f03c'} /*  */ +.icon.mail.reply:before { content: '\f051'} /*  */ +.icon.mark.github:before { content: '\f00a'} /*  */ +.icon.markdown:before { content: '\f0c9'} /*  */ +.icon.megaphone:before { content: '\f077'} /*  */ +.icon.mention:before { content: '\f0be'} /*  */ +.icon.microscope:before { content: '\f089'} /*  */ +.icon.milestone:before { content: '\f075'} /*  */ +.icon.mirror.public:before, +.icon.mirror:before { content: '\f024'} /*  */ +.icon.mortar.board:before { content: '\f0d7'} /*  */ +.icon.move.down:before { content: '\f0a8'} /*  */ +.icon.move.left:before { content: '\f074'} /*  */ +.icon.move.right:before { content: '\f0a9'} /*  */ +.icon.move.up:before { content: '\f0a7'} /*  */ +.icon.mute:before { content: '\f080'} /*  */ +.icon.no.newline:before { content: '\f09c'} /*  */ +.icon.octoface:before { content: '\f008'} /*  */ +.icon.organization:before { content: '\f037'} /*  */ +.icon.package:before { content: '\f0c4'} /*  */ +.icon.paintcan:before { content: '\f0d1'} /*  */ +.icon.pencil:before { content: '\f058'} /*  */ +.icon.person.add:before, +.icon.person.follow:before, +.icon.person:before { content: '\f018'} /*  */ +.icon.pin:before { content: '\f041'} /*  */ +.icon.playback.fast.forward:before { content: '\f0bd'} /*  */ +.icon.playback.pause:before { content: '\f0bb'} /*  */ +.icon.playback.play:before { content: '\f0bf'} /*  */ +.icon.playback.rewind:before { content: '\f0bc'} /*  */ +.icon.plug:before { content: '\f0d4'} /*  */ +.icon.repo.create:before, +.icon.gist.new:before, +.icon.file.directory.create:before, +.icon.file.add:before, +.icon.plus:before { content: '\f05d'} /*  */ +.icon.podium:before { content: '\f0af'} /*  */ +.icon.primitive.dot:before { content: '\f052'} /*  */ +.icon.primitive.square:before { content: '\f053'} /*  */ +.icon.pulse:before { content: '\f085'} /*  */ +.icon.puzzle:before { content: '\f0c0'} /*  */ +.icon.question:before { content: '\f02c'} /*  */ +.icon.quote:before { content: '\f063'} /*  */ +.icon.radio.tower:before { content: '\f030'} /*  */ +.icon.repo.delete:before, +.icon.repo:before { content: '\f001'} /*  */ +.icon.repo.clone:before { content: '\f04c'} /*  */ +.icon.repo.force.push:before { content: '\f04a'} /*  */ +.icon.gist.fork:before, +.icon.repo.forked:before { content: '\f002'} /*  */ +.icon.repo.pull:before { content: '\f006'} /*  */ +.icon.repo.push:before { content: '\f005'} /*  */ +.icon.rocket:before { content: '\f033'} /*  */ +.icon.rss:before { content: '\f034'} /*  */ +.icon.ruby:before { content: '\f047'} /*  */ +.icon.screen.full:before { content: '\f066'} /*  */ +.icon.screen.normal:before { content: '\f067'} /*  */ +.icon.search.save:before, +.icon.search:before { content: '\f02e'} /*  */ +.icon.server:before { content: '\f097'} /*  */ +.icon.settings:before { content: '\f07c'} /*  */ +.icon.log.in:before, +.icon.sign.in:before { content: '\f036'} /*  */ +.icon.log.out:before, +.icon.sign.out:before { content: '\f032'} /*  */ +.icon.split:before { content: '\f0c6'} /*  */ +.icon.squirrel:before { content: '\f0b2'} /*  */ +.icon.star.add:before, +.icon.star.delete:before, +.icon.star:before { content: '\f02a'} /*  */ +.icon.steps:before { content: '\f0c7'} /*  */ +.icon.stop:before { content: '\f08f'} /*  */ +.icon.repo.sync:before, +.icon.sync:before { content: '\f087'} /*  */ +.icon.tag.remove:before, +.icon.tag.add:before, +.icon.tag:before { content: '\f015'} /*  */ +.icon.telescope:before { content: '\f088'} /*  */ +.icon.terminal:before { content: '\f0c8'} /*  */ +.icon.three.bars:before { content: '\f05e'} /*  */ +.icon.thumbsdown:before { content: '\f0db'} /*  */ +.icon.thumbsup:before { content: '\f0da'} /*  */ +.icon.tools:before { content: '\f031'} /*  */ +.icon.trashcan:before { content: '\f0d0'} /*  */ +.icon.triangle.down:before { content: '\f05b'} /*  */ +.icon.triangle.left:before { content: '\f044'} /*  */ +.icon.triangle.right:before { content: '\f05a'} /*  */ +.icon.triangle.up:before { content: '\f0aa'} /*  */ +.icon.unfold:before { content: '\f039'} /*  */ +.icon.unmute:before { content: '\f0ba'} /*  */ +.icon.versions:before { content: '\f064'} /*  */ +.icon.remove.close:before, +.icon.x:before { content: '\f081'} /*  */ +.icon.zap:before { content: '\26A1'} /* ⚡ */ diff --git a/static/semantic/src/themes/github/elements/icon.variables b/static/semantic/src/themes/github/elements/icon.variables new file mode 100755 index 0000000..3ff3802 --- /dev/null +++ b/static/semantic/src/themes/github/elements/icon.variables @@ -0,0 +1,13 @@ +@fontPath: '../../themes/github/assets/fonts'; +@fontName: 'octicons'; +@fallbackSRC: ''; + +@width: 1em; +@height: 1em; + +@small: 13px; +@medium: 16px; +@large: 18px; +@big : 20px; +@huge: 28px; +@massive: 32px; \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/image.variables b/static/semantic/src/themes/github/elements/image.variables new file mode 100755 index 0000000..2480c17 --- /dev/null +++ b/static/semantic/src/themes/github/elements/image.variables @@ -0,0 +1,5 @@ +/******************************* + User Variable Overrides +*******************************/ + +@miniWidth: 20px; \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/input.overrides b/static/semantic/src/themes/github/elements/input.overrides new file mode 100755 index 0000000..d19fea9 --- /dev/null +++ b/static/semantic/src/themes/github/elements/input.overrides @@ -0,0 +1,32 @@ +/******************************* + Input +*******************************/ + +/* Labeled Input has padding */ +.ui.labeled.input { + background-color: @white; + border: @borderWidth solid @borderColor; + border-radius: @borderRadius !important; +} +.ui.labeled.input input { + box-shadow: none !important; + border: none !important; +} +.ui.labeled.input .label { + font-weight: normal; + align-self: center; + font-size: 12px; + margin: @2px; + border-radius: @borderRadius !important; + padding: @relative5px @relative8px !important; +} + +/* GitHub Uses Focus Group with class name added */ +.ui.labeled.input.focused { + border-color: @focusBorderColor; + box-shadow: @focusBoxShadow; +} +.ui.labeled.input.focused .label { + background-color: #E1EAF5; + color: #4078C0; +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/input.variables b/static/semantic/src/themes/github/elements/input.variables new file mode 100755 index 0000000..7bb9354 --- /dev/null +++ b/static/semantic/src/themes/github/elements/input.variables @@ -0,0 +1,16 @@ +/******************************* + Input +*******************************/ + +@boxShadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset; + +@verticalPadding: @relative7px; +@horizontalPadding: @relative8px; + +@borderColor: #CCCCCC; + +@focusBorderColor: #51A7E8; +@focusBoxShadow: + 0 1px 2px rgba(0, 0, 0, 0.075) inset, + 0 0 5px rgba(81, 167, 232, 0.5) +; \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/label.overrides b/static/semantic/src/themes/github/elements/label.overrides new file mode 100755 index 0000000..5826cb2 --- /dev/null +++ b/static/semantic/src/themes/github/elements/label.overrides @@ -0,0 +1,9 @@ +/******************************* + Site Overrides +*******************************/ + +/* Notification Label on GitHub */ +.ui.floating.blue.label { + border: 2px solid #f3f3f3 !important; + background-image: linear-gradient(#7aa1d3, #4078c0) !important; +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/label.variables b/static/semantic/src/themes/github/elements/label.variables new file mode 100755 index 0000000..8a1e13f --- /dev/null +++ b/static/semantic/src/themes/github/elements/label.variables @@ -0,0 +1,4 @@ +/******************************* + User Variable Overrides +*******************************/ + diff --git a/static/semantic/src/themes/github/elements/segment.overrides b/static/semantic/src/themes/github/elements/segment.overrides new file mode 100755 index 0000000..c5c5336 --- /dev/null +++ b/static/semantic/src/themes/github/elements/segment.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/static/semantic/src/themes/github/elements/segment.variables b/static/semantic/src/themes/github/elements/segment.variables new file mode 100755 index 0000000..4c53f05 --- /dev/null +++ b/static/semantic/src/themes/github/elements/segment.variables @@ -0,0 +1,40 @@ +/******************************* + Standard +*******************************/ + +/*------------------- + Segment +--------------------*/ + +@segmentBorderWidth: 1px; +@border: 1px solid #D8DEE2; +@boxShadow: 0px 1px 3px rgba(0, 0, 0, 0.075); + +@verticalPadding: 20px; +@horizontalPadding: 20px; + +@borderRadius: 4px; + +/******************************* + Variations +*******************************/ + + +/* Raised */ +@raisedBoxShadow: 0px 1px 3px rgba(0, 0, 0, 0.075); + +/* Colors */ +@coloredBorderSize: 0.5em; + +/* Ordinality */ +@secondaryBackground: #F9F9F9; +@secondaryColor: @textColor; + +@tertiaryBackground: #F0F0F0; +@tertiaryColor: @textColor; + +@secondaryInvertedBackground: #555555; +@secondaryInvertedColor: @textColor; + +@tertiaryInvertedBackground: #333333; +@tertiaryInvertedColor: @textColor; diff --git a/static/semantic/src/themes/github/elements/step.overrides b/static/semantic/src/themes/github/elements/step.overrides new file mode 100755 index 0000000..f4c076d --- /dev/null +++ b/static/semantic/src/themes/github/elements/step.overrides @@ -0,0 +1,26 @@ +/******************************* + Overrides +*******************************/ + +.ui.steps .step:after { + display: none; +} +.ui.steps .completed.step:before { + opacity: 0.5; +} + +.ui.steps .step.active:after { + display: block; + border: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-left: 1px solid rgba(0, 0, 0, 0.2); +} +.ui.vertical.steps .step.active:after { + display: block; + border: none; + top: 50%; + right: 0%; + border-left: none; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + border-right: 1px solid rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/elements/step.variables b/static/semantic/src/themes/github/elements/step.variables new file mode 100755 index 0000000..ff8dad8 --- /dev/null +++ b/static/semantic/src/themes/github/elements/step.variables @@ -0,0 +1,26 @@ +/*------------------- + Step Variables +--------------------*/ + +/* Step */ +@background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.07)); +@verticalPadding: 1em; + +@arrowDisplay: none; +@lastArrowDisplay: none; +@activeArrowDisplay: block; +@activeLastArrowDisplay: block; + +/* Group */ +@stepsBackground: #FFFFFF; +@stepsBoxShadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.15); + +/* States */ +@activeBackground: #FFFFFF; +@activeIconColor: @darkTextColor; + +/* Arrow */ +@arrowTopOffset: 100%; +@arrowRightOffset: 50%; +@arrowBorderColor: rgba(0, 0, 0, 0.2); +@arrowBorderWidth: 0px 0px @borderWidth @borderWidth; diff --git a/static/semantic/src/themes/github/globals/site.variables b/static/semantic/src/themes/github/globals/site.variables new file mode 100755 index 0000000..b5879ee --- /dev/null +++ b/static/semantic/src/themes/github/globals/site.variables @@ -0,0 +1,47 @@ +/******************************* + User Global Variables +*******************************/ + +@pageMinWidth : 1049px; +@pageOverflowX : visible; + +@emSize: 13px; +@fontSize : 13px; +@fontName : 'Arial'; +@importGoogleFonts : false; + +@h1: 2.25em; + +@defaultBorderRadius: 0.2307em; + +@disabledOpacity: 0.3; + +/* Colors */ +@blue: #80A6CD; +@green: #78CB5B; +@orange: #D26911; +@black: #333333; +@primaryColor: @green; +@secondaryColor: @black; + +/* Links */ +@linkColor: #4078C0; +@linkHoverColor: @linkColor; +@linkHoverUnderline: underline; + +/* Borders */ +@borderColor: rgba(0, 0, 0, 0.13); +@solidBorderColor: #DDDDDD; +@internalBorderColor: rgba(0, 0, 0, 0.06); +@selectedBorderColor: #51A7E8; + +/* Breakpoints */ +@largeMonitorBreakpoint: 1049px; +@computerBreakpoint: @largeMonitorBreakpoint; +@tabletBreakpoint: @largeMonitorBreakpoint; + +@infoBackgroundColor: #E6F1F6; + +@infoTextColor: #4E575B; +@warningTextColor: #613A00; +@errorTextColor: #991111; \ No newline at end of file diff --git a/static/semantic/src/themes/github/modules/dropdown.overrides b/static/semantic/src/themes/github/modules/dropdown.overrides new file mode 100755 index 0000000..7a1043d --- /dev/null +++ b/static/semantic/src/themes/github/modules/dropdown.overrides @@ -0,0 +1,53 @@ +/******************************* + User Overrides +*******************************/ + +/* Smaller Icon */ +.ui.dropdown > .dropdown.icon { + font-size: 12px; +} + + +/* Dropdown Carets */ +@font-face { + font-family: 'Dropdown'; + src: + url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff') + ; + font-weight: normal; + font-style: normal; +} + +.ui.dropdown > .dropdown.icon { + font-family: 'Dropdown'; + line-height: 1; + height: 1em; + width: 1.23em; + backface-visibility: hidden; + font-weight: normal; + font-style: normal; + text-align: center; +} + +.ui.dropdown > .dropdown.icon { + width: auto; +} +.ui.dropdown > .dropdown.icon:before { + content: '\f0d7'; +} + +/* Sub Menu */ +.ui.dropdown .menu .item .dropdown.icon:before { + content: '\f0da'/*rtl:'\f0d9'*/; +} + +.ui.dropdown .item .left.dropdown.icon:before, +.ui.dropdown .left.menu .item .dropdown.icon:before { + content: "\f0d9"/*rtl:"\f0da"*/; +} + +/* Vertical Menu Dropdown */ +.ui.vertical.menu .dropdown.item > .dropdown.icon:before { + content: "\f0da"/*rtl:"\f0d9"*/; +} \ No newline at end of file diff --git a/static/semantic/src/themes/github/modules/dropdown.variables b/static/semantic/src/themes/github/modules/dropdown.variables new file mode 100755 index 0000000..d4ee8c0 --- /dev/null +++ b/static/semantic/src/themes/github/modules/dropdown.variables @@ -0,0 +1,35 @@ +/******************************* + User Variable Overrides +*******************************/ + +@transition: + width @defaultDuration @defaultEasing +; + +@menuPadding: 0px; + +@itemVerticalPadding: @relative8px; +@itemHorizontalPadding: @relative14px; + +@dropdownIconMargin: 0em 0em 0em 2px; + +@raisedBoxShadow: 0px 3px 12px rgba(0, 0, 0, 0.15); + +@menuPadding: @relative5px 0px; + +@menuHeaderMargin: 0em; +@menuHeaderPadding: @relative6px @itemHorizontalPadding; +@menuHeaderFontSize: @relative12px; +@menuHeaderTextTransform: none; +@menuHeaderFontWeight: normal; +@menuHeaderColor: #767676; + +@menuDividerMargin: @relative8px 0em; + +@disabledOpacity: 0.6; + +/* States */ +@hoveredItemBackground: #4078C0; +@hoveredItemColor: @white; + +@pointingArrowSize: @relative9px; diff --git a/static/semantic/src/themes/github/modules/popup.variables b/static/semantic/src/themes/github/modules/popup.variables new file mode 100755 index 0000000..81a8173 --- /dev/null +++ b/static/semantic/src/themes/github/modules/popup.variables @@ -0,0 +1,12 @@ +/******************************* + Popup +*******************************/ + + +@small: @relative10px; +@medium: @relative11px; +@large: @relative13px; + +@verticalPadding: @relative7px; +@horizontalPadding: @relative11px; + diff --git a/static/semantic/src/themes/gmail/collections/message.overrides b/static/semantic/src/themes/gmail/collections/message.overrides new file mode 100755 index 0000000..e69de29 diff --git a/static/semantic/src/themes/gmail/collections/message.variables b/static/semantic/src/themes/gmail/collections/message.variables new file mode 100755 index 0000000..16902bc --- /dev/null +++ b/static/semantic/src/themes/gmail/collections/message.variables @@ -0,0 +1,15 @@ +@background: #F3F3F3; + +@boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; +@borderRadius: 4px; +@verticalPadding: 7px; +@horizontalPadding: 15px; + +@headerFontSize: 1em; + +@floatingBoxShadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + +@iconSize: 1.5em; +@iconDistance: 1em; + +@warningBackgroundColor: #F9EDBE; diff --git a/static/semantic/src/themes/instagram/views/card.overrides b/static/semantic/src/themes/instagram/views/card.overrides new file mode 100755 index 0000000..1429216 --- /dev/null +++ b/static/semantic/src/themes/instagram/views/card.overrides @@ -0,0 +1,12 @@ +/******************************* + Overrides +*******************************/ + + +@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400); + +.ui.cards > .card, +.ui.card { + font-family: 'Montserrat'; + font-size-adjust: 0.5; +} \ No newline at end of file diff --git a/static/semantic/src/themes/instagram/views/card.variables b/static/semantic/src/themes/instagram/views/card.variables new file mode 100755 index 0000000..94e63b1 --- /dev/null +++ b/static/semantic/src/themes/instagram/views/card.variables @@ -0,0 +1,23 @@ +/******************************* + Card +*******************************/ + +/*------------------- + View +--------------------*/ + +@borderBoxShadow: none; +@shadowBoxShadow: none; +@boxShadow: none; + + +@internalBorderColor: #EDEDEE; +@border: 1px solid #EDEDEE; + +@contentPadding: 14px 20px; + +@metaColor: #A5A7AA; + +@linkHoverRaiseDistance: 0px; +@linkHoverBoxShadow: none; +@linkHoverBorder: 1px solid #D0D0D8; \ No newline at end of file diff --git a/static/semantic/src/themes/material/assets/fonts/icons.eot b/static/semantic/src/themes/material/assets/fonts/icons.eot new file mode 100755 index 0000000..70508eb Binary files /dev/null and b/static/semantic/src/themes/material/assets/fonts/icons.eot differ diff --git a/static/semantic/src/themes/material/assets/fonts/icons.svg b/static/semantic/src/themes/material/assets/fonts/icons.svg new file mode 100755 index 0000000..a449327 --- /dev/null +++ b/static/semantic/src/themes/material/assets/fonts/icons.svg @@ -0,0 +1,2373 @@ + + + + diff --git a/static/semantic/src/themes/material/assets/fonts/icons.ttf b/static/semantic/src/themes/material/assets/fonts/icons.ttf new file mode 100755 index 0000000..7015564 Binary files /dev/null and b/static/semantic/src/themes/material/assets/fonts/icons.ttf differ diff --git a/static/semantic/src/themes/material/assets/fonts/icons.woff b/static/semantic/src/themes/material/assets/fonts/icons.woff new file mode 100755 index 0000000..b648a3e Binary files /dev/null and b/static/semantic/src/themes/material/assets/fonts/icons.woff differ diff --git a/static/semantic/src/themes/material/assets/fonts/icons.woff2 b/static/semantic/src/themes/material/assets/fonts/icons.woff2 new file mode 100755 index 0000000..9fa2112 Binary files /dev/null and b/static/semantic/src/themes/material/assets/fonts/icons.woff2 differ diff --git a/static/semantic/src/themes/material/collections/menu.overrides b/static/semantic/src/themes/material/collections/menu.overrides new file mode 100755 index 0000000..fef5b1f --- /dev/null +++ b/static/semantic/src/themes/material/collections/menu.overrides @@ -0,0 +1 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); diff --git a/static/semantic/src/themes/material/collections/menu.variables b/static/semantic/src/themes/material/collections/menu.variables new file mode 100755 index 0000000..ccc1345 --- /dev/null +++ b/static/semantic/src/themes/material/collections/menu.variables @@ -0,0 +1,10 @@ +/******************************* + Menu +*******************************/ + +@fontFamily: 'Roboto', Arial, sans-serif; +@boxShadow: 0px 1px 6px rgba(0, 0, 0, 0.2); +@dividerSize: 0px; + +@itemVerticalPadding: @relativeLarge; +@itemHorizontalPadding: @relativeLarge; \ No newline at end of file diff --git a/static/semantic/src/themes/material/elements/button.overrides b/static/semantic/src/themes/material/elements/button.overrides new file mode 100755 index 0000000..dc6f50e --- /dev/null +++ b/static/semantic/src/themes/material/elements/button.overrides @@ -0,0 +1,15 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); + +.ui.primary.button:hover { + box-shadow: + 0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset, + 0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important + ; +} + +.ui.secondary.button:hover { + box-shadow: + 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset, + 0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important + ; +} diff --git a/static/semantic/src/themes/material/elements/button.variables b/static/semantic/src/themes/material/elements/button.variables new file mode 100755 index 0000000..da7dcbd --- /dev/null +++ b/static/semantic/src/themes/material/elements/button.variables @@ -0,0 +1,97 @@ +/******************************* + Button +*******************************/ + +/*------------------- + Element +--------------------*/ + +@googleFontName : 'Roboto'; +@pageFont : 'Roboto', Arial, sans-serif; + +@medium: 13px; + +@verticalPadding : 0.8em; +@horizontalPadding : 0.8em; +@borderRadius : @relative3px; +@color : #222222; +@fontWeight : normal; +@textTransform : none; + +@backgroundColor : @white; +@backgroundImage : linear-gradient(transparent, rgba(0, 0, 0, 0.02)); + +@solidBorderColor: #DDDDDD; + +@borderBoxShadowColor: @solidBorderColor; +@borderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset; +@shadowBoxShadow: 0px 0px 0px 0px transparent; + +@transition: + opacity 0.3s @defaultEasing, + background-color 0.3s @defaultEasing, + color 0.3s @defaultEasing, + box-shadow 0.3s @defaultEasing, + background 0.3s @defaultEasing +; +/*------------------- + State +--------------------*/ + +@hoverBackgroundColor: @white; +@hoverBoxShadow: + @borderBoxShadow, + 0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important +; + +@downBackgroundColor: @white; +@downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04)); +@downTextColor: #222222; +@downBoxShadow: @borderBoxShadow; + +@activeBackgroundColor: #F0F0F0; +@activeBoxShadow: 0px 0px 0px 1px #DDDDDD; + +/*------------------- + Variations +--------------------*/ + +/* Basic */ +@basicBorderSize: 0px; +@basicBorderRadius: 4px; +@basicColoredBorderSize: 1px; +@basicHoverBackground: @white; +@basicHoverBoxShadow: @hoverBoxShadow; +@basicDownBackground: @white; +@basicDownBoxShadow: @downBoxShadow; + +@basicActiveBackground: #FFFFFF; +@basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + +/* Labeled */ +@labeledIconBackgroundColor: transparent; +@labeledIconWidth: 2em; + +@labeledLabelBorderOffset: 0px; + +/* Colored */ +@coloredBackgroundImage : @subtleGradient; +@coloredBoxShadow : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset; + +/* Primary */ +@primaryColor : #4184F3; +@primaryBoxShadow : 0px 0px 0px 1px #0157E4 inset; + +/* Secondary */ +@secondaryColor : #EEEEEE; +@secondaryBackgroundImage : @backgroundImage; +@secondaryTextColor : @textColor; +@secondaryBoxShadow : @borderBoxShadow; + +/* Emotive */ +@positiveColor: #3D9400; +@negativeColor: #D34836; + +/* Inverted */ +@invertedBorderSize: 1px; + diff --git a/static/semantic/src/themes/material/elements/header.overrides b/static/semantic/src/themes/material/elements/header.overrides new file mode 100755 index 0000000..52bf25c --- /dev/null +++ b/static/semantic/src/themes/material/elements/header.overrides @@ -0,0 +1,15 @@ +/******************************* + Overrides +*******************************/ + +@import url(https://fonts.googleapis.com/css?family=Roboto); + +h1.ui.header, +.ui.huge.header { + font-weight: normal; +} + +h2.ui.header, +.ui.large.header { + font-weight: normal; +} diff --git a/static/semantic/src/themes/material/elements/header.variables b/static/semantic/src/themes/material/elements/header.variables new file mode 100755 index 0000000..6764f01 --- /dev/null +++ b/static/semantic/src/themes/material/elements/header.variables @@ -0,0 +1,21 @@ +/*------------------- + Header +--------------------*/ + +@headerFont : 'Roboto', Arial, sans-serif; +@fontWeight: normal; + +@iconSize: 2em; +@iconOffset: 0.2em; +@iconAlignment: top; + +@subHeaderFontSize: 1rem; + + +/* HTML Headings */ +@h1 : 2.25rem; +@h2 : 2rem; +@h3 : 1.75rem; +@h4 : 1.5rem; +@h5 : 1.25rem; + diff --git a/static/semantic/src/themes/material/elements/icon.overrides b/static/semantic/src/themes/material/elements/icon.overrides new file mode 100755 index 0000000..f42203c --- /dev/null +++ b/static/semantic/src/themes/material/elements/icon.overrides @@ -0,0 +1,934 @@ +/* Material Design Icons */ + +i.icon.threed.rotation:before { content: '\e84d'} +i.icon.ac.unit:before { content: '\eb3b'} +i.icon.access.alarm:before { content: '\e190'} +i.icon.access.alarms:before { content: '\e191'} +i.icon.access.time:before { content: '\e192'} +i.icon.accessibility:before { content: '\e84e'} +i.icon.accessible:before { content: '\e914'} +i.icon.account.balance:before { content: '\e84f'} +i.icon.account.balance.wallet:before { content: '\e850'} +i.icon.account.box:before { content: '\e851'} +i.icon.account.circle:before { content: '\e853'} +i.icon.adb:before { content: '\e60e'} +i.icon.add:before { content: '\e145'} +i.icon.add.a.photo:before { content: '\e439'} +i.icon.add.alarm:before { content: '\e193'} +i.icon.add.alert:before { content: '\e003'} +i.icon.add.box:before { content: '\e146'} +i.icon.add.circle:before { content: '\e147'} +i.icon.add.circle.outline:before { content: '\e148'} +i.icon.add.location:before { content: '\e567'} +i.icon.add.shopping.cart:before { content: '\e854'} +i.icon.add.to.photos:before { content: '\e39d'} +i.icon.add.to.queue:before { content: '\e05c'} +i.icon.adjust:before { content: '\e39e'} +i.icon.airline.seat.flat:before { content: '\e630'} +i.icon.airline.seat.flat.angled:before { content: '\e631'} +i.icon.airline.seat.individual.suite:before { content: '\e632'} +i.icon.airline.seat.legroom.extra:before { content: '\e633'} +i.icon.airline.seat.legroom.normal:before { content: '\e634'} +i.icon.airline.seat.legroom.reduced:before { content: '\e635'} +i.icon.airline.seat.recline.extra:before { content: '\e636'} +i.icon.airline.seat.recline.normal:before { content: '\e637'} +i.icon.airplanemode.active:before { content: '\e195'} +i.icon.airplanemode.inactive:before { content: '\e194'} +i.icon.airplay:before { content: '\e055'} +i.icon.airport.shuttle:before { content: '\eb3c'} +i.icon.alarm:before { content: '\e855'} +i.icon.alarm.add:before { content: '\e856'} +i.icon.alarm.off:before { content: '\e857'} +i.icon.alarm.on:before { content: '\e858'} +i.icon.album:before { content: '\e019'} +i.icon.all.inclusive:before { content: '\eb3d'} +i.icon.all.out:before { content: '\e90b'} +i.icon.android:before { content: '\e859'} +i.icon.announcement:before { content: '\e85a'} +i.icon.apps:before { content: '\e5c3'} +i.icon.archive:before { content: '\e149'} +i.icon.arrow.back:before { content: '\e5c4'} +i.icon.arrow.downward:before { content: '\e5db'} +i.icon.arrow.drop.down:before { content: '\e5c5'} +i.icon.arrow.drop.down.circle:before { content: '\e5c6'} +i.icon.arrow.drop.up:before { content: '\e5c7'} +i.icon.arrow.forward:before { content: '\e5c8'} +i.icon.arrow.upward:before { content: '\e5d8'} +i.icon.art.track:before { content: '\e060'} +i.icon.aspect.ratio:before { content: '\e85b'} +i.icon.assessment:before { content: '\e85c'} +i.icon.assignment:before { content: '\e85d'} +i.icon.assignment.ind:before { content: '\e85e'} +i.icon.assignment.late:before { content: '\e85f'} +i.icon.assignment.return:before { content: '\e860'} +i.icon.assignment.returned:before { content: '\e861'} +i.icon.assignment.turned.in:before { content: '\e862'} +i.icon.assistant:before { content: '\e39f'} +i.icon.assistant.photo:before { content: '\e3a0'} +i.icon.attach.file:before { content: '\e226'} +i.icon.attach.money:before { content: '\e227'} +i.icon.attachment:before { content: '\e2bc'} +i.icon.audiotrack:before { content: '\e3a1'} +i.icon.autorenew:before { content: '\e863'} +i.icon.av.timer:before { content: '\e01b'} +i.icon.backspace:before { content: '\e14a'} +i.icon.backup:before { content: '\e864'} +i.icon.battery.alert:before { content: '\e19c'} +i.icon.battery.charging.full:before { content: '\e1a3'} +i.icon.battery.full:before { content: '\e1a4'} +i.icon.battery.std:before { content: '\e1a5'} +i.icon.battery.unknown:before { content: '\e1a6'} +i.icon.beach.access:before { content: '\eb3e'} +i.icon.beenhere:before { content: '\e52d'} +i.icon.block:before { content: '\e14b'} +i.icon.bluetooth:before { content: '\e1a7'} +i.icon.bluetooth.audio:before { content: '\e60f'} +i.icon.bluetooth.connected:before { content: '\e1a8'} +i.icon.bluetooth.disabled:before { content: '\e1a9'} +i.icon.bluetooth.searching:before { content: '\e1aa'} +i.icon.blur.circular:before { content: '\e3a2'} +i.icon.blur.linear:before { content: '\e3a3'} +i.icon.blur.off:before { content: '\e3a4'} +i.icon.blur.on:before { content: '\e3a5'} +i.icon.book:before { content: '\e865'} +i.icon.bookmark:before { content: '\e866'} +i.icon.bookmark.border:before { content: '\e867'} +i.icon.border.all:before { content: '\e228'} +i.icon.border.bottom:before { content: '\e229'} +i.icon.border.clear:before { content: '\e22a'} +i.icon.border.color:before { content: '\e22b'} +i.icon.border.horizontal:before { content: '\e22c'} +i.icon.border.inner:before { content: '\e22d'} +i.icon.border.left:before { content: '\e22e'} +i.icon.border.outer:before { content: '\e22f'} +i.icon.border.right:before { content: '\e230'} +i.icon.border.style:before { content: '\e231'} +i.icon.border.top:before { content: '\e232'} +i.icon.border.vertical:before { content: '\e233'} +i.icon.branding.watermark:before { content: '\e06b'} +i.icon.brightness.one:before { content: '\e3a6'} +i.icon.brightness.two:before { content: '\e3a7'} +i.icon.brightness.three:before { content: '\e3a8'} +i.icon.brightness.four:before { content: '\e3a9'} +i.icon.brightness.five:before { content: '\e3aa'} +i.icon.brightness.six:before { content: '\e3ab'} +i.icon.brightness.seven:before { content: '\e3ac'} +i.icon.brightness.auto:before { content: '\e1ab'} +i.icon.brightness.high:before { content: '\e1ac'} +i.icon.brightness.low:before { content: '\e1ad'} +i.icon.brightness.medium:before { content: '\e1ae'} +i.icon.broken.image:before { content: '\e3ad'} +i.icon.brush:before { content: '\e3ae'} +i.icon.bubble.chart:before { content: '\e6dd'} +i.icon.bug.report:before { content: '\e868'} +i.icon.build:before { content: '\e869'} +i.icon.burst.mode:before { content: '\e43c'} +i.icon.business:before { content: '\e0af'} +i.icon.business.center:before { content: '\eb3f'} +i.icon.cached:before { content: '\e86a'} +i.icon.cake:before { content: '\e7e9'} +i.icon.call:before { content: '\e0b0'} +i.icon.call.end:before { content: '\e0b1'} +i.icon.call.made:before { content: '\e0b2'} +i.icon.call.merge:before { content: '\e0b3'} +i.icon.call.missed:before { content: '\e0b4'} +i.icon.call.missed.outgoing:before { content: '\e0e4'} +i.icon.call.received:before { content: '\e0b5'} +i.icon.call.split:before { content: '\e0b6'} +i.icon.call.to.action:before { content: '\e06c'} +i.icon.camera:before { content: '\e3af'} +i.icon.camera.alt:before { content: '\e3b0'} +i.icon.camera.enhance:before { content: '\e8fc'} +i.icon.camera.front:before { content: '\e3b1'} +i.icon.camera.rear:before { content: '\e3b2'} +i.icon.camera.roll:before { content: '\e3b3'} +i.icon.cancel:before { content: '\e5c9'} +i.icon.card.giftcard:before { content: '\e8f6'} +i.icon.card.membership:before { content: '\e8f7'} +i.icon.card.travel:before { content: '\e8f8'} +i.icon.casino:before { content: '\eb40'} +i.icon.cast:before { content: '\e307'} +i.icon.cast.connected:before { content: '\e308'} +i.icon.center.focus.strong:before { content: '\e3b4'} +i.icon.center.focus.weak:before { content: '\e3b5'} +i.icon.change.history:before { content: '\e86b'} +i.icon.chat:before { content: '\e0b7'} +i.icon.chat.bubble:before { content: '\e0ca'} +i.icon.chat.bubble.outline:before { content: '\e0cb'} +i.icon.check:before { content: '\e5ca'} +i.icon.check.box:before { content: '\e834'} +i.icon.check.box.outline.blank:before { content: '\e835'} +i.icon.check.circle:before { content: '\e86c'} +i.icon.chevron.left:before { content: '\e5cb'} +i.icon.chevron.right:before { content: '\e5cc'} +i.icon.child.care:before { content: '\eb41'} +i.icon.child.friendly:before { content: '\eb42'} +i.icon.chrome.reader.mode:before { content: '\e86d'} +i.icon.class:before { content: '\e86e'} +i.icon.clear:before { content: '\e14c'} +i.icon.clear.all:before { content: '\e0b8'} +i.icon.close:before { content: '\e5cd'} +i.icon.closed.caption:before { content: '\e01c'} +i.icon.cloud:before { content: '\e2bd'} +i.icon.cloud.circle:before { content: '\e2be'} +i.icon.cloud.done:before { content: '\e2bf'} +i.icon.cloud.download:before { content: '\e2c0'} +i.icon.cloud.off:before { content: '\e2c1'} +i.icon.cloud.queue:before { content: '\e2c2'} +i.icon.cloud.upload:before { content: '\e2c3'} +i.icon.code:before { content: '\e86f'} +i.icon.collections:before { content: '\e3b6'} +i.icon.collections.bookmark:before { content: '\e431'} +i.icon.color.lens:before { content: '\e3b7'} +i.icon.colorize:before { content: '\e3b8'} +i.icon.comment:before { content: '\e0b9'} +i.icon.compare:before { content: '\e3b9'} +i.icon.compare.arrows:before { content: '\e915'} +i.icon.computer:before { content: '\e30a'} +i.icon.confirmation.number:before { content: '\e638'} +i.icon.contact.mail:before { content: '\e0d0'} +i.icon.contact.phone:before { content: '\e0cf'} +i.icon.contacts:before { content: '\e0ba'} +i.icon.content.copy:before { content: '\e14d'} +i.icon.content.cut:before { content: '\e14e'} +i.icon.content.paste:before { content: '\e14f'} +i.icon.control.point:before { content: '\e3ba'} +i.icon.control.point.duplicate:before { content: '\e3bb'} +i.icon.copyright:before { content: '\e90c'} +i.icon.create:before { content: '\e150'} +i.icon.create.new.folder:before { content: '\e2cc'} +i.icon.credit.card:before { content: '\e870'} +i.icon.crop:before { content: '\e3be'} +i.icon.crop.sixteen.nine:before { content: '\e3bc'} +i.icon.crop.three.two:before { content: '\e3bd'} +i.icon.crop.five.four:before { content: '\e3bf'} +i.icon.crop.seven.five:before { content: '\e3c0'} +i.icon.crop.din:before { content: '\e3c1'} +i.icon.crop.free:before { content: '\e3c2'} +i.icon.crop.landscape:before { content: '\e3c3'} +i.icon.crop.original:before { content: '\e3c4'} +i.icon.crop.portrait:before { content: '\e3c5'} +i.icon.crop.rotate:before { content: '\e437'} +i.icon.crop.square:before { content: '\e3c6'} +i.icon.dashboard:before { content: '\e871'} +i.icon.data.usage:before { content: '\e1af'} +i.icon.date.range:before { content: '\e916'} +i.icon.dehaze:before { content: '\e3c7'} +i.icon.delete:before { content: '\e872'} +i.icon.delete.forever:before { content: '\e92b'} +i.icon.delete.sweep:before { content: '\e16c'} +i.icon.description:before { content: '\e873'} +i.icon.desktop.mac:before { content: '\e30b'} +i.icon.desktop.windows:before { content: '\e30c'} +i.icon.details:before { content: '\e3c8'} +i.icon.developer.board:before { content: '\e30d'} +i.icon.developer.mode:before { content: '\e1b0'} +i.icon.device.hub:before { content: '\e335'} +i.icon.devices:before { content: '\e1b1'} +i.icon.devices.other:before { content: '\e337'} +i.icon.dialer.sip:before { content: '\e0bb'} +i.icon.dialpad:before { content: '\e0bc'} +i.icon.directions:before { content: '\e52e'} +i.icon.directions.bike:before { content: '\e52f'} +i.icon.directions.boat:before { content: '\e532'} +i.icon.directions.bus:before { content: '\e530'} +i.icon.directions.car:before { content: '\e531'} +i.icon.directions.railway:before { content: '\e534'} +i.icon.directions.run:before { content: '\e566'} +i.icon.directions.subway:before { content: '\e533'} +i.icon.directions.transit:before { content: '\e535'} +i.icon.directions.walk:before { content: '\e536'} +i.icon.disc.full:before { content: '\e610'} +i.icon.dns:before { content: '\e875'} +i.icon.do.not.disturb:before { content: '\e612'} +i.icon.do.not.disturb.alt:before { content: '\e611'} +i.icon.do.not.disturb.off:before { content: '\e643'} +i.icon.do.not.disturb.on:before { content: '\e644'} +i.icon.dock:before { content: '\e30e'} +i.icon.domain:before { content: '\e7ee'} +i.icon.done:before { content: '\e876'} +i.icon.done.all:before { content: '\e877'} +i.icon.donut.large:before { content: '\e917'} +i.icon.donut.small:before { content: '\e918'} +i.icon.drafts:before { content: '\e151'} +i.icon.drag.handle:before { content: '\e25d'} +i.icon.drive.eta:before { content: '\e613'} +i.icon.dvr:before { content: '\e1b2'} +i.icon.edit:before { content: '\e3c9'} +i.icon.edit.location:before { content: '\e568'} +i.icon.eject:before { content: '\e8fb'} +i.icon.email:before { content: '\e0be'} +i.icon.enhanced.encryption:before { content: '\e63f'} +i.icon.equalizer:before { content: '\e01d'} +i.icon.error:before { content: '\e000'} +i.icon.error.outline:before { content: '\e001'} +i.icon.euro.symbol:before { content: '\e926'} +i.icon.ev.station:before { content: '\e56d'} +i.icon.event:before { content: '\e878'} +i.icon.event.available:before { content: '\e614'} +i.icon.event.busy:before { content: '\e615'} +i.icon.event.note:before { content: '\e616'} +i.icon.event.seat:before { content: '\e903'} +i.icon.exit.to.app:before { content: '\e879'} +i.icon.expand.less:before { content: '\e5ce'} +i.icon.expand.more:before { content: '\e5cf'} +i.icon.explicit:before { content: '\e01e'} +i.icon.explore:before { content: '\e87a'} +i.icon.exposure:before { content: '\e3ca'} +i.icon.exposure.neg.1:before { content: '\e3cb'} +i.icon.exposure.neg.2:before { content: '\e3cc'} +i.icon.exposure.plus.1:before { content: '\e3cd'} +i.icon.exposure.plus.2:before { content: '\e3ce'} +i.icon.exposure.zero:before { content: '\e3cf'} +i.icon.extension:before { content: '\e87b'} +i.icon.face:before { content: '\e87c'} +i.icon.fast.forward:before { content: '\e01f'} +i.icon.fast.rewind:before { content: '\e020'} +i.icon.favorite:before { content: '\e87d'} +i.icon.favorite.border:before { content: '\e87e'} +i.icon.featured.play.list:before { content: '\e06d'} +i.icon.featured.video:before { content: '\e06e'} +i.icon.feedback:before { content: '\e87f'} +i.icon.fiber.dvr:before { content: '\e05d'} +i.icon.fiber.manual.record:before { content: '\e061'} +i.icon.fiber.new:before { content: '\e05e'} +i.icon.fiber.pin:before { content: '\e06a'} +i.icon.fiber.smart.record:before { content: '\e062'} +i.icon.file.download:before { content: '\e2c4'} +i.icon.file.upload:before { content: '\e2c6'} +i.icon.filter:before { content: '\e3d3'} +i.icon.filter.1:before { content: '\e3d0'} +i.icon.filter.2:before { content: '\e3d1'} +i.icon.filter.3:before { content: '\e3d2'} +i.icon.filter.4:before { content: '\e3d4'} +i.icon.filter.5:before { content: '\e3d5'} +i.icon.filter.6:before { content: '\e3d6'} +i.icon.filter.7:before { content: '\e3d7'} +i.icon.filter.8:before { content: '\e3d8'} +i.icon.filter.9:before { content: '\e3d9'} +i.icon.filter.9.plus:before { content: '\e3da'} +i.icon.filter.b.and.w:before { content: '\e3db'} +i.icon.filter.center.focus:before { content: '\e3dc'} +i.icon.filter.drama:before { content: '\e3dd'} +i.icon.filter.frames:before { content: '\e3de'} +i.icon.filter.hdr:before { content: '\e3df'} +i.icon.filter.list:before { content: '\e152'} +i.icon.filter.none:before { content: '\e3e0'} +i.icon.filter.tilt.shift:before { content: '\e3e2'} +i.icon.filter.vintage:before { content: '\e3e3'} +i.icon.find.in.page:before { content: '\e880'} +i.icon.find.replace:before { content: '\e881'} +i.icon.fingerprint:before { content: '\e90d'} +i.icon.first.page:before { content: '\e5dc'} +i.icon.fitness.center:before { content: '\eb43'} +i.icon.flag:before { content: '\e153'} +i.icon.flare:before { content: '\e3e4'} +i.icon.flash.auto:before { content: '\e3e5'} +i.icon.flash.off:before { content: '\e3e6'} +i.icon.flash.on:before { content: '\e3e7'} +i.icon.flight:before { content: '\e539'} +i.icon.flight.land:before { content: '\e904'} +i.icon.flight.takeoff:before { content: '\e905'} +i.icon.flip:before { content: '\e3e8'} +i.icon.flip.to.back:before { content: '\e882'} +i.icon.flip.to.front:before { content: '\e883'} +i.icon.folder:before { content: '\e2c7'} +i.icon.folder.open:before { content: '\e2c8'} +i.icon.folder.shared:before { content: '\e2c9'} +i.icon.folder.special:before { content: '\e617'} +i.icon.font.download:before { content: '\e167'} +i.icon.format.align.center:before { content: '\e234'} +i.icon.format.align.justify:before { content: '\e235'} +i.icon.format.align.left:before { content: '\e236'} +i.icon.format.align.right:before { content: '\e237'} +i.icon.format.bold:before { content: '\e238'} +i.icon.format.clear:before { content: '\e239'} +i.icon.format.color.fill:before { content: '\e23a'} +i.icon.format.color.reset:before { content: '\e23b'} +i.icon.format.color.text:before { content: '\e23c'} +i.icon.format.indent.decrease:before { content: '\e23d'} +i.icon.format.indent.increase:before { content: '\e23e'} +i.icon.format.italic:before { content: '\e23f'} +i.icon.format.line.spacing:before { content: '\e240'} +i.icon.format.list.bulleted:before { content: '\e241'} +i.icon.format.list.numbered:before { content: '\e242'} +i.icon.format.paint:before { content: '\e243'} +i.icon.format.quote:before { content: '\e244'} +i.icon.format.shapes:before { content: '\e25e'} +i.icon.format.size:before { content: '\e245'} +i.icon.format.strikethrough:before { content: '\e246'} +i.icon.format.textdirection.l.to.r:before { content: '\e247'} +i.icon.format.textdirection.r.to.l:before { content: '\e248'} +i.icon.format.underlined:before { content: '\e249'} +i.icon.forum:before { content: '\e0bf'} +i.icon.forward:before { content: '\e154'} +i.icon.forward.ten:before { content: '\e056'} +i.icon.forward.thirty:before { content: '\e057'} +i.icon.forward.five:before { content: '\e058'} +i.icon.free.breakfast:before { content: '\eb44'} +i.icon.fullscreen:before { content: '\e5d0'} +i.icon.fullscreen.exit:before { content: '\e5d1'} +i.icon.functions:before { content: '\e24a'} +i.icon.g.translate:before { content: '\e927'} +i.icon.gamepad:before { content: '\e30f'} +i.icon.games:before { content: '\e021'} +i.icon.gavel:before { content: '\e90e'} +i.icon.gesture:before { content: '\e155'} +i.icon.get.app:before { content: '\e884'} +i.icon.gif:before { content: '\e908'} +i.icon.golf.course:before { content: '\eb45'} +i.icon.gps.fixed:before { content: '\e1b3'} +i.icon.gps.not.fixed:before { content: '\e1b4'} +i.icon.gps.off:before { content: '\e1b5'} +i.icon.grade:before { content: '\e885'} +i.icon.gradient:before { content: '\e3e9'} +i.icon.grain:before { content: '\e3ea'} +i.icon.graphic.eq:before { content: '\e1b8'} +i.icon.grid.off:before { content: '\e3eb'} +i.icon.grid.on:before { content: '\e3ec'} +i.icon.group:before { content: '\e7ef'} +i.icon.group.add:before { content: '\e7f0'} +i.icon.group.work:before { content: '\e886'} +i.icon.hd:before { content: '\e052'} +i.icon.hdr.off:before { content: '\e3ed'} +i.icon.hdr.on:before { content: '\e3ee'} +i.icon.hdr.strong:before { content: '\e3f1'} +i.icon.hdr.weak:before { content: '\e3f2'} +i.icon.headset:before { content: '\e310'} +i.icon.headset.mic:before { content: '\e311'} +i.icon.healing:before { content: '\e3f3'} +i.icon.hearing:before { content: '\e023'} +i.icon.help:before { content: '\e887'} +i.icon.help.outline:before { content: '\e8fd'} +i.icon.high.quality:before { content: '\e024'} +i.icon.highlight:before { content: '\e25f'} +i.icon.highlight.off:before { content: '\e888'} +i.icon.history:before { content: '\e889'} +i.icon.home:before { content: '\e88a'} +i.icon.hot.tub:before { content: '\eb46'} +i.icon.hotel:before { content: '\e53a'} +i.icon.hourglass.empty:before { content: '\e88b'} +i.icon.hourglass.full:before { content: '\e88c'} +i.icon.http:before { content: '\e902'} +i.icon.https:before { content: '\e88d'} +i.icon.image:before { content: '\e3f4'} +i.icon.image.aspect.ratio:before { content: '\e3f5'} +i.icon.import.contacts:before { content: '\e0e0'} +i.icon.import.export:before { content: '\e0c3'} +i.icon.important.devices:before { content: '\e912'} +i.icon.inbox:before { content: '\e156'} +i.icon.indeterminate.check.box:before { content: '\e909'} +i.icon.info:before { content: '\e88e'} +i.icon.info.outline:before { content: '\e88f'} +i.icon.input:before { content: '\e890'} +i.icon.insert.chart:before { content: '\e24b'} +i.icon.insert.comment:before { content: '\e24c'} +i.icon.insert.drive.file:before { content: '\e24d'} +i.icon.insert.emoticon:before { content: '\e24e'} +i.icon.insert.invitation:before { content: '\e24f'} +i.icon.insert.link:before { content: '\e250'} +i.icon.insert.photo:before { content: '\e251'} +i.icon.invert.colors:before { content: '\e891'} +i.icon.invert.colors.off:before { content: '\e0c4'} +i.icon.iso:before { content: '\e3f6'} +i.icon.keyboard:before { content: '\e312'} +i.icon.keyboard.arrow.down:before { content: '\e313'} +i.icon.keyboard.arrow.left:before { content: '\e314'} +i.icon.keyboard.arrow.right:before { content: '\e315'} +i.icon.keyboard.arrow.up:before { content: '\e316'} +i.icon.keyboard.backspace:before { content: '\e317'} +i.icon.keyboard.capslock:before { content: '\e318'} +i.icon.keyboard.hide:before { content: '\e31a'} +i.icon.keyboard.return:before { content: '\e31b'} +i.icon.keyboard.tab:before { content: '\e31c'} +i.icon.keyboard.voice:before { content: '\e31d'} +i.icon.kitchen:before { content: '\eb47'} +i.icon.label:before { content: '\e892'} +i.icon.label.outline:before { content: '\e893'} +i.icon.landscape:before { content: '\e3f7'} +i.icon.language:before { content: '\e894'} +i.icon.laptop:before { content: '\e31e'} +i.icon.laptop.chromebook:before { content: '\e31f'} +i.icon.laptop.mac:before { content: '\e320'} +i.icon.laptop.windows:before { content: '\e321'} +i.icon.last.page:before { content: '\e5dd'} +i.icon.launch:before { content: '\e895'} +i.icon.layers:before { content: '\e53b'} +i.icon.layers.clear:before { content: '\e53c'} +i.icon.leak.add:before { content: '\e3f8'} +i.icon.leak.remove:before { content: '\e3f9'} +i.icon.lens:before { content: '\e3fa'} +i.icon.library.add:before { content: '\e02e'} +i.icon.library.books:before { content: '\e02f'} +i.icon.library.music:before { content: '\e030'} +i.icon.lightbulb.outline:before { content: '\e90f'} +i.icon.line.style:before { content: '\e919'} +i.icon.line.weight:before { content: '\e91a'} +i.icon.linear.scale:before { content: '\e260'} +i.icon.link:before { content: '\e157'} +i.icon.linked.camera:before { content: '\e438'} +i.icon.list:before { content: '\e896'} +i.icon.live.help:before { content: '\e0c6'} +i.icon.live.tv:before { content: '\e639'} +i.icon.local.activity:before { content: '\e53f'} +i.icon.local.airport:before { content: '\e53d'} +i.icon.local.atm:before { content: '\e53e'} +i.icon.local.bar:before { content: '\e540'} +i.icon.local.cafe:before { content: '\e541'} +i.icon.local.car.wash:before { content: '\e542'} +i.icon.local.convenience.store:before { content: '\e543'} +i.icon.local.dining:before { content: '\e556'} +i.icon.local.drink:before { content: '\e544'} +i.icon.local.florist:before { content: '\e545'} +i.icon.local.gas.station:before { content: '\e546'} +i.icon.local.grocery.store:before { content: '\e547'} +i.icon.local.hospital:before { content: '\e548'} +i.icon.local.hotel:before { content: '\e549'} +i.icon.local.laundry.service:before { content: '\e54a'} +i.icon.local.library:before { content: '\e54b'} +i.icon.local.mall:before { content: '\e54c'} +i.icon.local.movies:before { content: '\e54d'} +i.icon.local.offer:before { content: '\e54e'} +i.icon.local.parking:before { content: '\e54f'} +i.icon.local.pharmacy:before { content: '\e550'} +i.icon.local.phone:before { content: '\e551'} +i.icon.local.pizza:before { content: '\e552'} +i.icon.local.play:before { content: '\e553'} +i.icon.local.post.office:before { content: '\e554'} +i.icon.local.printshop:before { content: '\e555'} +i.icon.local.see:before { content: '\e557'} +i.icon.local.shipping:before { content: '\e558'} +i.icon.local.taxi:before { content: '\e559'} +i.icon.location.city:before { content: '\e7f1'} +i.icon.location.disabled:before { content: '\e1b6'} +i.icon.location.off:before { content: '\e0c7'} +i.icon.location.on:before { content: '\e0c8'} +i.icon.location.searching:before { content: '\e1b7'} +i.icon.lock:before { content: '\e897'} +i.icon.lock.open:before { content: '\e898'} +i.icon.lock.outline:before { content: '\e899'} +i.icon.looks:before { content: '\e3fc'} +i.icon.looks.3:before { content: '\e3fb'} +i.icon.looks.4:before { content: '\e3fd'} +i.icon.looks.5:before { content: '\e3fe'} +i.icon.looks.6:before { content: '\e3ff'} +i.icon.looks.one:before { content: '\e400'} +i.icon.looks.two:before { content: '\e401'} +i.icon.loop:before { content: '\e028'} +i.icon.loupe:before { content: '\e402'} +i.icon.low.priority:before { content: '\e16d'} +i.icon.loyalty:before { content: '\e89a'} +i.icon.mail:before { content: '\e158'} +i.icon.mail.outline:before { content: '\e0e1'} +i.icon.map:before { content: '\e55b'} +i.icon.markunread:before { content: '\e159'} +i.icon.markunread.mailbox:before { content: '\e89b'} +i.icon.memory:before { content: '\e322'} +i.icon.menu:before { content: '\e5d2'} +i.icon.merge.type:before { content: '\e252'} +i.icon.message:before { content: '\e0c9'} +i.icon.mic:before { content: '\e029'} +i.icon.mic.none:before { content: '\e02a'} +i.icon.mic.off:before { content: '\e02b'} +i.icon.mms:before { content: '\e618'} +i.icon.mode.comment:before { content: '\e253'} +i.icon.mode.edit:before { content: '\e254'} +i.icon.monetization.on:before { content: '\e263'} +i.icon.money.off:before { content: '\e25c'} +i.icon.monochrome.photos:before { content: '\e403'} +i.icon.mood:before { content: '\e7f2'} +i.icon.mood.bad:before { content: '\e7f3'} +i.icon.more:before { content: '\e619'} +i.icon.more.horiz:before { content: '\e5d3'} +i.icon.more.vert:before { content: '\e5d4'} +i.icon.motorcycle:before { content: '\e91b'} +i.icon.mouse:before { content: '\e323'} +i.icon.move.to.inbox:before { content: '\e168'} +i.icon.movie:before { content: '\e02c'} +i.icon.movie.creation:before { content: '\e404'} +i.icon.movie.filter:before { content: '\e43a'} +i.icon.multiline.chart:before { content: '\e6df'} +i.icon.music.note:before { content: '\e405'} +i.icon.music.video:before { content: '\e063'} +i.icon.my.location:before { content: '\e55c'} +i.icon.nature:before { content: '\e406'} +i.icon.nature.people:before { content: '\e407'} +i.icon.navigate.before:before { content: '\e408'} +i.icon.navigate.next:before { content: '\e409'} +i.icon.navigation:before { content: '\e55d'} +i.icon.near.me:before { content: '\e569'} +i.icon.network.cell:before { content: '\e1b9'} +i.icon.network.check:before { content: '\e640'} +i.icon.network.locked:before { content: '\e61a'} +i.icon.network.wifi:before { content: '\e1ba'} +i.icon.new.releases:before { content: '\e031'} +i.icon.next.week:before { content: '\e16a'} +i.icon.nfc:before { content: '\e1bb'} +i.icon.no.encryption:before { content: '\e641'} +i.icon.no.sim:before { content: '\e0cc'} +i.icon.not.interested:before { content: '\e033'} +i.icon.note:before { content: '\e06f'} +i.icon.note.add:before { content: '\e89c'} +i.icon.notifications:before { content: '\e7f4'} +i.icon.notifications.active:before { content: '\e7f7'} +i.icon.notifications.none:before { content: '\e7f5'} +i.icon.notifications.off:before { content: '\e7f6'} +i.icon.notifications.paused:before { content: '\e7f8'} +i.icon.offline.pin:before { content: '\e90a'} +i.icon.ondemand.video:before { content: '\e63a'} +i.icon.opacity:before { content: '\e91c'} +i.icon.open.in.browser:before { content: '\e89d'} +i.icon.open.in.new:before { content: '\e89e'} +i.icon.open.with:before { content: '\e89f'} +i.icon.pages:before { content: '\e7f9'} +i.icon.pageview:before { content: '\e8a0'} +i.icon.palette:before { content: '\e40a'} +i.icon.pan.tool:before { content: '\e925'} +i.icon.panorama:before { content: '\e40b'} +i.icon.panorama.fish.eye:before { content: '\e40c'} +i.icon.panorama.horizontal:before { content: '\e40d'} +i.icon.panorama.vertical:before { content: '\e40e'} +i.icon.panorama.wide.angle:before { content: '\e40f'} +i.icon.party.mode:before { content: '\e7fa'} +i.icon.pause:before { content: '\e034'} +i.icon.pause.circle.filled:before { content: '\e035'} +i.icon.pause.circle.outline:before { content: '\e036'} +i.icon.payment:before { content: '\e8a1'} +i.icon.people:before { content: '\e7fb'} +i.icon.people.outline:before { content: '\e7fc'} +i.icon.perm.camera.mic:before { content: '\e8a2'} +i.icon.perm.contact.calendar:before { content: '\e8a3'} +i.icon.perm.data.setting:before { content: '\e8a4'} +i.icon.perm.device.information:before { content: '\e8a5'} +i.icon.perm.identity:before { content: '\e8a6'} +i.icon.perm.media:before { content: '\e8a7'} +i.icon.perm.phone.msg:before { content: '\e8a8'} +i.icon.perm.scan.wifi:before { content: '\e8a9'} +i.icon.person:before { content: '\e7fd'} +i.icon.person.add:before { content: '\e7fe'} +i.icon.person.outline:before { content: '\e7ff'} +i.icon.person.pin:before { content: '\e55a'} +i.icon.person.pin.circle:before { content: '\e56a'} +i.icon.personal.video:before { content: '\e63b'} +i.icon.pets:before { content: '\e91d'} +i.icon.phone:before { content: '\e0cd'} +i.icon.phone.android:before { content: '\e324'} +i.icon.phone.bluetooth.speaker:before { content: '\e61b'} +i.icon.phone.forwarded:before { content: '\e61c'} +i.icon.phone.in.talk:before { content: '\e61d'} +i.icon.phone.iphone:before { content: '\e325'} +i.icon.phone.locked:before { content: '\e61e'} +i.icon.phone.missed:before { content: '\e61f'} +i.icon.phone.paused:before { content: '\e620'} +i.icon.phonelink:before { content: '\e326'} +i.icon.phonelink.erase:before { content: '\e0db'} +i.icon.phonelink.lock:before { content: '\e0dc'} +i.icon.phonelink.off:before { content: '\e327'} +i.icon.phonelink.ring:before { content: '\e0dd'} +i.icon.phonelink.setup:before { content: '\e0de'} +i.icon.photo:before { content: '\e410'} +i.icon.photo.album:before { content: '\e411'} +i.icon.photo.camera:before { content: '\e412'} +i.icon.photo.filter:before { content: '\e43b'} +i.icon.photo.library:before { content: '\e413'} +i.icon.photo.size.select.actual:before { content: '\e432'} +i.icon.photo.size.select.large:before { content: '\e433'} +i.icon.photo.size.select.small:before { content: '\e434'} +i.icon.picture.as.pdf:before { content: '\e415'} +i.icon.picture.in.picture:before { content: '\e8aa'} +i.icon.picture.in.picture.alt:before { content: '\e911'} +i.icon.pie.chart:before { content: '\e6c4'} +i.icon.pie.chart.outlined:before { content: '\e6c5'} +i.icon.pin.drop:before { content: '\e55e'} +i.icon.place:before { content: '\e55f'} +i.icon.play.arrow:before { content: '\e037'} +i.icon.play.circle.filled:before { content: '\e038'} +i.icon.play.circle.outline:before { content: '\e039'} +i.icon.play.for.work:before { content: '\e906'} +i.icon.playlist.add:before { content: '\e03b'} +i.icon.playlist.add.check:before { content: '\e065'} +i.icon.playlist.play:before { content: '\e05f'} +i.icon.plus.one:before { content: '\e800'} +i.icon.poll:before { content: '\e801'} +i.icon.polymer:before { content: '\e8ab'} +i.icon.pool:before { content: '\eb48'} +i.icon.portable.wifi.off:before { content: '\e0ce'} +i.icon.portrait:before { content: '\e416'} +i.icon.power:before { content: '\e63c'} +i.icon.power.input:before { content: '\e336'} +i.icon.power.settings.new:before { content: '\e8ac'} +i.icon.pregnant.woman:before { content: '\e91e'} +i.icon.present.to.all:before { content: '\e0df'} +i.icon.print:before { content: '\e8ad'} +i.icon.priority.high:before { content: '\e645'} +i.icon.public:before { content: '\e80b'} +i.icon.publish:before { content: '\e255'} +i.icon.query.builder:before { content: '\e8ae'} +i.icon.question.answer:before { content: '\e8af'} +i.icon.queue:before { content: '\e03c'} +i.icon.queue.music:before { content: '\e03d'} +i.icon.queue.play.next:before { content: '\e066'} +i.icon.radio:before { content: '\e03e'} +i.icon.radio.button.checked:before { content: '\e837'} +i.icon.radio.button.unchecked:before { content: '\e836'} +i.icon.rate.review:before { content: '\e560'} +i.icon.receipt:before { content: '\e8b0'} +i.icon.recent.actors:before { content: '\e03f'} +i.icon.record.voice.over:before { content: '\e91f'} +i.icon.redeem:before { content: '\e8b1'} +i.icon.redo:before { content: '\e15a'} +i.icon.refresh:before { content: '\e5d5'} +i.icon.remove:before { content: '\e15b'} +i.icon.remove.circle:before { content: '\e15c'} +i.icon.remove.circle.outline:before { content: '\e15d'} +i.icon.remove.from.queue:before { content: '\e067'} +i.icon.remove.red.eye:before { content: '\e417'} +i.icon.remove.shopping.cart:before { content: '\e928'} +i.icon.reorder:before { content: '\e8fe'} +i.icon.repeat:before { content: '\e040'} +i.icon.repeat.one:before { content: '\e041'} +i.icon.replay:before { content: '\e042'} +i.icon.replay.ten:before { content: '\e059'} +i.icon.replay.thirty:before { content: '\e05a'} +i.icon.replay.five:before { content: '\e05b'} +i.icon.reply:before { content: '\e15e'} +i.icon.reply.all:before { content: '\e15f'} +i.icon.report:before { content: '\e160'} +i.icon.report.problem:before { content: '\e8b2'} +i.icon.restaurant:before { content: '\e56c'} +i.icon.restaurant.menu:before { content: '\e561'} +i.icon.restore:before { content: '\e8b3'} +i.icon.restore.page:before { content: '\e929'} +i.icon.ring.volume:before { content: '\e0d1'} +i.icon.room:before { content: '\e8b4'} +i.icon.room.service:before { content: '\eb49'} +i.icon.rotate.ninety.degrees.ccw:before { content: '\e418'} +i.icon.rotate.left:before { content: '\e419'} +i.icon.rotate.right:before { content: '\e41a'} +i.icon.rounded.corner:before { content: '\e920'} +i.icon.router:before { content: '\e328'} +i.icon.rowing:before { content: '\e921'} +i.icon.rss.feed:before { content: '\e0e5'} +i.icon.rv.hookup:before { content: '\e642'} +i.icon.satellite:before { content: '\e562'} +i.icon.save:before { content: '\e161'} +i.icon.scanner:before { content: '\e329'} +i.icon.schedule:before { content: '\e8b5'} +i.icon.school:before { content: '\e80c'} +i.icon.screen.lock.landscape:before { content: '\e1be'} +i.icon.screen.lock.portrait:before { content: '\e1bf'} +i.icon.screen.lock.rotation:before { content: '\e1c0'} +i.icon.screen.rotation:before { content: '\e1c1'} +i.icon.screen.share:before { content: '\e0e2'} +i.icon.sd.card:before { content: '\e623'} +i.icon.sd.storage:before { content: '\e1c2'} +i.icon.search:before { content: '\e8b6'} +i.icon.security:before { content: '\e32a'} +i.icon.select.all:before { content: '\e162'} +i.icon.send:before { content: '\e163'} +i.icon.sentiment.dissatisfied:before { content: '\e811'} +i.icon.sentiment.neutral:before { content: '\e812'} +i.icon.sentiment.satisfied:before { content: '\e813'} +i.icon.sentiment.very.dissatisfied:before { content: '\e814'} +i.icon.sentiment.very.satisfied:before { content: '\e815'} +i.icon.settings:before { content: '\e8b8'} +i.icon.settings.applications:before { content: '\e8b9'} +i.icon.settings.backup.restore:before { content: '\e8ba'} +i.icon.settings.bluetooth:before { content: '\e8bb'} +i.icon.settings.brightness:before { content: '\e8bd'} +i.icon.settings.cell:before { content: '\e8bc'} +i.icon.settings.ethernet:before { content: '\e8be'} +i.icon.settings.input.antenna:before { content: '\e8bf'} +i.icon.settings.input.component:before { content: '\e8c0'} +i.icon.settings.input.composite:before { content: '\e8c1'} +i.icon.settings.input.hdmi:before { content: '\e8c2'} +i.icon.settings.input.svideo:before { content: '\e8c3'} +i.icon.settings.overscan:before { content: '\e8c4'} +i.icon.settings.phone:before { content: '\e8c5'} +i.icon.settings.power:before { content: '\e8c6'} +i.icon.settings.remote:before { content: '\e8c7'} +i.icon.settings.system.daydream:before { content: '\e1c3'} +i.icon.settings.voice:before { content: '\e8c8'} +i.icon.share:before { content: '\e80d'} +i.icon.shop:before { content: '\e8c9'} +i.icon.shop.two:before { content: '\e8ca'} +i.icon.shopping.basket:before { content: '\e8cb'} +i.icon.shopping.cart:before { content: '\e8cc'} +i.icon.short.text:before { content: '\e261'} +i.icon.show.chart:before { content: '\e6e1'} +i.icon.shuffle:before { content: '\e043'} +i.icon.signal.cellular.four.bar:before { content: '\e1c8'} +i.icon.signal.cellular.connected.no.internet.4.bar:before { content: '\e1cd'} +i.icon.signal.cellular.no.sim:before { content: '\e1ce'} +i.icon.signal.cellular.null:before { content: '\e1cf'} +i.icon.signal.cellular.off:before { content: '\e1d0'} +i.icon.signal.wifi.four.bar:before { content: '\e1d8'} +i.icon.signal.wifi.four.bar.lock:before { content: '\e1d9'} +i.icon.signal.wifi.off:before { content: '\e1da'} +i.icon.sim.card:before { content: '\e32b'} +i.icon.sim.card.alert:before { content: '\e624'} +i.icon.skip.next:before { content: '\e044'} +i.icon.skip.previous:before { content: '\e045'} +i.icon.slideshow:before { content: '\e41b'} +i.icon.slow.motion.video:before { content: '\e068'} +i.icon.smartphone:before { content: '\e32c'} +i.icon.smoke.free:before { content: '\eb4a'} +i.icon.smoking.rooms:before { content: '\eb4b'} +i.icon.sms:before { content: '\e625'} +i.icon.sms.failed:before { content: '\e626'} +i.icon.snooze:before { content: '\e046'} +i.icon.sort:before { content: '\e164'} +i.icon.sort.by.alpha:before { content: '\e053'} +i.icon.spa:before { content: '\eb4c'} +i.icon.space.bar:before { content: '\e256'} +i.icon.speaker:before { content: '\e32d'} +i.icon.speaker.group:before { content: '\e32e'} +i.icon.speaker.notes:before { content: '\e8cd'} +i.icon.speaker.notes.off:before { content: '\e92a'} +i.icon.speaker.phone:before { content: '\e0d2'} +i.icon.spellcheck:before { content: '\e8ce'} +i.icon.star:before { content: '\e838'} +i.icon.star.border:before { content: '\e83a'} +i.icon.star.half:before { content: '\e839'} +i.icon.stars:before { content: '\e8d0'} +i.icon.stay.current.landscape:before { content: '\e0d3'} +i.icon.stay.current.portrait:before { content: '\e0d4'} +i.icon.stay.primary.landscape:before { content: '\e0d5'} +i.icon.stay.primary.portrait:before { content: '\e0d6'} +i.icon.stop:before { content: '\e047'} +i.icon.stop.screen.share:before { content: '\e0e3'} +i.icon.storage:before { content: '\e1db'} +i.icon.store:before { content: '\e8d1'} +i.icon.store.mall.directory:before { content: '\e563'} +i.icon.straighten:before { content: '\e41c'} +i.icon.streetview:before { content: '\e56e'} +i.icon.strikethrough.s:before { content: '\e257'} +i.icon.style:before { content: '\e41d'} +i.icon.subdirectory.arrow.left:before { content: '\e5d9'} +i.icon.subdirectory.arrow.right:before { content: '\e5da'} +i.icon.subject:before { content: '\e8d2'} +i.icon.subscriptions:before { content: '\e064'} +i.icon.subtitles:before { content: '\e048'} +i.icon.subway:before { content: '\e56f'} +i.icon.supervisor.account:before { content: '\e8d3'} +i.icon.surround.sound:before { content: '\e049'} +i.icon.swap.calls:before { content: '\e0d7'} +i.icon.swap.horiz:before { content: '\e8d4'} +i.icon.swap.vert:before { content: '\e8d5'} +i.icon.swap.vertical.circle:before { content: '\e8d6'} +i.icon.switch.camera:before { content: '\e41e'} +i.icon.switch.video:before { content: '\e41f'} +i.icon.sync:before { content: '\e627'} +i.icon.sync.disabled:before { content: '\e628'} +i.icon.sync.problem:before { content: '\e629'} +i.icon.system.update:before { content: '\e62a'} +i.icon.system.update.alt:before { content: '\e8d7'} +i.icon.tab:before { content: '\e8d8'} +i.icon.tab.unselected:before { content: '\e8d9'} +i.icon.tablet:before { content: '\e32f'} +i.icon.tablet.android:before { content: '\e330'} +i.icon.tablet.mac:before { content: '\e331'} +i.icon.tag.faces:before { content: '\e420'} +i.icon.tap.and.play:before { content: '\e62b'} +i.icon.terrain:before { content: '\e564'} +i.icon.text.fields:before { content: '\e262'} +i.icon.text.format:before { content: '\e165'} +i.icon.textsms:before { content: '\e0d8'} +i.icon.texture:before { content: '\e421'} +i.icon.theaters:before { content: '\e8da'} +i.icon.thumb.down:before { content: '\e8db'} +i.icon.thumb.up:before { content: '\e8dc'} +i.icon.thumbs.up.down:before { content: '\e8dd'} +i.icon.time.to.leave:before { content: '\e62c'} +i.icon.timelapse:before { content: '\e422'} +i.icon.timeline:before { content: '\e922'} +i.icon.timer:before { content: '\e425'} +i.icon.timer.ten:before { content: '\e423'} +i.icon.timer.three:before { content: '\e424'} +i.icon.timer.off:before { content: '\e426'} +i.icon.title:before { content: '\e264'} +i.icon.toc:before { content: '\e8de'} +i.icon.today:before { content: '\e8df'} +i.icon.toll:before { content: '\e8e0'} +i.icon.tonality:before { content: '\e427'} +i.icon.touch.app:before { content: '\e913'} +i.icon.toys:before { content: '\e332'} +i.icon.track.changes:before { content: '\e8e1'} +i.icon.traffic:before { content: '\e565'} +i.icon.train:before { content: '\e570'} +i.icon.tram:before { content: '\e571'} +i.icon.transfer.within.a.station:before { content: '\e572'} +i.icon.transform:before { content: '\e428'} +i.icon.translate:before { content: '\e8e2'} +i.icon.trending.down:before { content: '\e8e3'} +i.icon.trending.flat:before { content: '\e8e4'} +i.icon.trending.up:before { content: '\e8e5'} +i.icon.tune:before { content: '\e429'} +i.icon.turned.in:before { content: '\e8e6'} +i.icon.turned.in.not:before { content: '\e8e7'} +i.icon.tv:before { content: '\e333'} +i.icon.unarchive:before { content: '\e169'} +i.icon.undo:before { content: '\e166'} +i.icon.unfold.less:before { content: '\e5d6'} +i.icon.unfold.more:before { content: '\e5d7'} +i.icon.update:before { content: '\e923'} +i.icon.usb:before { content: '\e1e0'} +i.icon.verified.user:before { content: '\e8e8'} +i.icon.vertical.align.bottom:before { content: '\e258'} +i.icon.vertical.align.center:before { content: '\e259'} +i.icon.vertical.align.top:before { content: '\e25a'} +i.icon.vibration:before { content: '\e62d'} +i.icon.video.call:before { content: '\e070'} +i.icon.video.label:before { content: '\e071'} +i.icon.video.library:before { content: '\e04a'} +i.icon.videocam:before { content: '\e04b'} +i.icon.videocam.off:before { content: '\e04c'} +i.icon.videogame.asset:before { content: '\e338'} +i.icon.view.agenda:before { content: '\e8e9'} +i.icon.view.array:before { content: '\e8ea'} +i.icon.view.carousel:before { content: '\e8eb'} +i.icon.view.column:before { content: '\e8ec'} +i.icon.view.comfy:before { content: '\e42a'} +i.icon.view.compact:before { content: '\e42b'} +i.icon.view.day:before { content: '\e8ed'} +i.icon.view.headline:before { content: '\e8ee'} +i.icon.view.list:before { content: '\e8ef'} +i.icon.view.module:before { content: '\e8f0'} +i.icon.view.quilt:before { content: '\e8f1'} +i.icon.view.stream:before { content: '\e8f2'} +i.icon.view.week:before { content: '\e8f3'} +i.icon.vignette:before { content: '\e435'} +i.icon.visibility:before { content: '\e8f4'} +i.icon.visibility.off:before { content: '\e8f5'} +i.icon.voice.chat:before { content: '\e62e'} +i.icon.voicemail:before { content: '\e0d9'} +i.icon.volume.down:before { content: '\e04d'} +i.icon.volume.mute:before { content: '\e04e'} +i.icon.volume.off:before { content: '\e04f'} +i.icon.volume.up:before { content: '\e050'} +i.icon.vpn.key:before { content: '\e0da'} +i.icon.vpn.lock:before { content: '\e62f'} +i.icon.wallpaper:before { content: '\e1bc'} +i.icon.warning:before { content: '\e002'} +i.icon.watch:before { content: '\e334'} +i.icon.watch.later:before { content: '\e924'} +i.icon.wb.auto:before { content: '\e42c'} +i.icon.wb.cloudy:before { content: '\e42d'} +i.icon.wb.incandescent:before { content: '\e42e'} +i.icon.wb.iridescent:before { content: '\e436'} +i.icon.wb.sunny:before { content: '\e430'} +i.icon.wc:before { content: '\e63d'} +i.icon.web:before { content: '\e051'} +i.icon.web.asset:before { content: '\e069'} +i.icon.weekend:before { content: '\e16b'} +i.icon.whatshot:before { content: '\e80e'} +i.icon.widgets:before { content: '\e1bd'} +i.icon.wifi:before { content: '\e63e'} +i.icon.wifi.lock:before { content: '\e1e1'} +i.icon.wifi.tethering:before { content: '\e1e2'} +i.icon.work:before { content: '\e8f9'} +i.icon.wrap.text:before { content: '\e25b'} +i.icon.youtube.searched.for:before { content: '\e8fa'} +i.icon.zoom.in:before { content: '\e8ff'} +i.icon.zoom.out:before { content: '\e900'} +i.icon.zoom.out.map:before { content: '\e56b'} diff --git a/static/semantic/src/themes/material/elements/icon.variables b/static/semantic/src/themes/material/elements/icon.variables new file mode 100755 index 0000000..68e9887 --- /dev/null +++ b/static/semantic/src/themes/material/elements/icon.variables @@ -0,0 +1,11 @@ +@fontPath : '../../themes/material/assets/fonts'; + +@width: 1em; +@height: 1em; + +@small: 13px; +@medium: 16px; +@large: 18px; +@big : 20px; +@huge: 28px; +@massive: 32px; diff --git a/static/semantic/src/themes/material/globals/site.overrides b/static/semantic/src/themes/material/globals/site.overrides new file mode 100755 index 0000000..e69de29 diff --git a/static/semantic/src/themes/material/globals/site.variables b/static/semantic/src/themes/material/globals/site.variables new file mode 100755 index 0000000..d1a6802 --- /dev/null +++ b/static/semantic/src/themes/material/globals/site.variables @@ -0,0 +1,128 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Fonts +--------------------*/ + +@headerFont : 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; +@pageFont : 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; +@googleFontName : 'Roboto'; + +/*------------------- + Base Sizes +--------------------*/ + +@emSize : 14px; +@fontSize : 13px; + +/*-------------- + Page +---------------*/ + +@pageBackground : #F9F9F9; +@lineHeight : 1.33; +@textColor : #212121; + +/*-------------- + Page Heading +---------------*/ + +@headerLineHeight : 1.33em; +@headerFontWeight : 400; + +@h1 : 2.25rem; +@h2 : 2rem; +@h3 : 1.75rem; +@h4 : 1.5rem; +@h5 : 1.25rem; + + +/*------------------- + Paths +--------------------*/ + +@imagePath : '../../themes/material/assets/images'; +@fontPath : '../../themes/material/assets/fonts'; + +/*-------------- + Paragraphs +---------------*/ + +@paragraphLineHeight: 1.7em; + +/*------------------- + Site Colors +--------------------*/ + +/*--- Colors ---*/ +@black : #1B1C1D; +@blue : #2196F3; +@green : #4CAF50; +@grey : #9E9E9E; +@orange : #FF9800; +@pink : #E91E63; +@purple : #9C27B0; +@red : #F44336; +@teal : #1de9b6; +@yellow : #FFEB3B; + +/*--- Light Colors ---*/ +@lightBlack : #333333; +@lightBlue : #2979FF; +@lightGreen : #00E676; +@lightOrange : #FF9100; +@lightPink : #F50057; +@lightPurple : #D500F9; +@lightRed : #FF1744; +@lightTeal : #1DE9B6; +@lightYellow : #FFEA00; + +/*--- Neutrals ---*/ +@fullBlack : #000000; +@darkGrey : #AAAAAA; +@lightGrey : #DCDDDE; +@offWhite : #FAFAFA; +@darkWhite : #F0F0F0; +@white : #FFFFFF; + +/*------------------- + Brand Colors +--------------------*/ + +@primaryColor : @blue; +@secondaryColor : @grey; + +@lightPrimaryColor : @lightBlue; +@lightSecondaryColor : @lightGrey; + +/*------------------- + Paragraph +--------------------*/ + +@paragraphMargin : 0em 0em 1.53em; + +/*------------------- + Links +--------------------*/ + +@linkColor : #009FDA; +@linkUnderline : none; +@linkHoverColor : lighten(@linkColor, 5); +@linkHoverUnderline : @linkUnderline; + +/*------------------- + Highlighted Text +--------------------*/ + +@highlightBackground : #009FDA; +@highlightColor : @white; + +/*------------------- + Accents +--------------------*/ + +/* 4px @ default em */ +@relativeBorderRadius: @relative4px; +@absoluteBorderRadius: 4px; diff --git a/static/semantic/src/themes/material/modules/dropdown.overrides b/static/semantic/src/themes/material/modules/dropdown.overrides new file mode 100755 index 0000000..c66958b --- /dev/null +++ b/static/semantic/src/themes/material/modules/dropdown.overrides @@ -0,0 +1,5 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto:400,700); + +.ui.dropdown { + font-family: 'Roboto'; +} diff --git a/static/semantic/src/themes/material/modules/dropdown.variables b/static/semantic/src/themes/material/modules/dropdown.variables new file mode 100755 index 0000000..5ed6e1a --- /dev/null +++ b/static/semantic/src/themes/material/modules/dropdown.variables @@ -0,0 +1,20 @@ +/******************************* + Menu +*******************************/ + +@menuBorderRadius: @borderRadius; +@menuBorderColor: #DADADA; +@menuBoxShadow: 0px 2px 4px rgba(0, 0, 0, 0.2); + +@menuPadding: @relative8px 0em; +@itemVerticalPadding: 1em; +@itemHorizontalPadding: 1.5em; + +@menuHeaderFontSize: @small; +@menuHeaderFontWeight: bold; +@menuHeaderTextTransform: none; + +@selectionBorderEmWidth: 0em; +@selectionItemDivider: none; + +@labelBoxShadow: none; \ No newline at end of file diff --git a/static/semantic/src/themes/material/modules/modal.overrides b/static/semantic/src/themes/material/modules/modal.overrides new file mode 100755 index 0000000..0eff4c1 --- /dev/null +++ b/static/semantic/src/themes/material/modules/modal.overrides @@ -0,0 +1,6 @@ +@import url(https://fonts.googleapis.com/css?family=Roboto); + +.ui.modal .header { + font-family: "Roboto", Arial, Sans-serif !important; + font-weight: 400 !important; +} diff --git a/static/semantic/src/themes/material/modules/modal.variables b/static/semantic/src/themes/material/modules/modal.variables new file mode 100755 index 0000000..5629729 --- /dev/null +++ b/static/semantic/src/themes/material/modules/modal.variables @@ -0,0 +1,15 @@ +@boxShadow: 0px 10px 18px rgba(0, 0, 0, 0.22); +@borderRadius: 0em; + + +@headerBackground: @white; +@headerVerticalPadding: 1.7142rem; +@headerHorizontalPadding: 1.7142rem; +@headerFontWeight: 400; +@headerFontFamily: 'Roboto', "Helvetica Neue", Arial, sans-serif; +@headerBorder: none; + +@contentPadding: 1rem 2rem 2rem; + +@actionBorder: none; +@actionBackground: @white; \ No newline at end of file diff --git a/static/semantic/src/themes/pulsar/elements/loader.overrides b/static/semantic/src/themes/pulsar/elements/loader.overrides new file mode 100755 index 0000000..5ddd401 --- /dev/null +++ b/static/semantic/src/themes/pulsar/elements/loader.overrides @@ -0,0 +1,70 @@ +/******************************* + Theme Overrides +*******************************/ + +.ui.loader:after { + -webkit-animation: loader-pulsar 2s infinite linear; + animation: loader-pulsar 2s infinite linear; +} + +@-webkit-keyframes loader-pulsar { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 0; + } + 20% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + 40% { + -webkit-transform: rotate(740deg); + transform: rotate(740deg); + opacity: 1; + } + 60% { + -webkit-transform: rotate(1120deg); + transform: rotate(1120deg); + opacity: 1; + } + 80% { + -webkit-transform: rotate(1440deg); + transform: rotate(1440deg); + } + 100% { + -webkit-transform: rotate(1800deg); + transform: rotate(1800deg); + opacity: 0; + } +} + +@keyframes loader-pulsar { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + opacity: 0; + } + 20% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } + 40% { + -webkit-transform: rotate(740deg); + transform: rotate(740deg); + opacity: 1; + } + 60% { + -webkit-transform: rotate(1120deg); + transform: rotate(1120deg); + opacity: 1; + } + 80% { + -webkit-transform: rotate(1440deg); + transform: rotate(1440deg); + } + 100% { + -webkit-transform: rotate(1800deg); + transform: rotate(1800deg); + opacity: 0; + } +} \ No newline at end of file diff --git a/static/semantic/src/themes/pulsar/elements/loader.variables b/static/semantic/src/themes/pulsar/elements/loader.variables new file mode 100755 index 0000000..29ab5cf --- /dev/null +++ b/static/semantic/src/themes/pulsar/elements/loader.variables @@ -0,0 +1,7 @@ +/******************************* + Loader +*******************************/ + +@loaderSpeed: 2s; +@loaderLineColor: @primaryColor; +@invertedLoaderLineColor: @lightPrimaryColor; diff --git a/static/semantic/src/themes/raised/elements/button.overrides b/static/semantic/src/themes/raised/elements/button.overrides new file mode 100755 index 0000000..c5c5336 --- /dev/null +++ b/static/semantic/src/themes/raised/elements/button.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/static/semantic/src/themes/raised/elements/button.variables b/static/semantic/src/themes/raised/elements/button.variables new file mode 100755 index 0000000..eced62f --- /dev/null +++ b/static/semantic/src/themes/raised/elements/button.variables @@ -0,0 +1,27 @@ +/******************************* + Button +*******************************/ + +/*------------------- + Element +--------------------*/ + +@backgroundColor: #F8F8F8; +@backgroundImage: linear-gradient(transparent, rgba(0, 0, 0, 0.05)); +@verticalAlign: middle; +@borderRadius: 0.4em; +@borderBoxShadowColor: @borderColor; + +/* Shadow */ +@shadowDistance: 0.3em; +@verticalPadding: 1em; +@horizontalPadding: 2em; + +/* transition box shadow as well */ +@transition: + opacity @defaultDuration @defaultEasing, + background-color @defaultDuration @defaultEasing, + box-shadow @defaultDuration @defaultEasing, + color @defaultDuration @defaultEasing, + background @defaultDuration @defaultEasing +; \ No newline at end of file diff --git a/static/semantic/src/themes/resetcss/globals/reset.overrides b/static/semantic/src/themes/resetcss/globals/reset.overrides new file mode 100755 index 0000000..3377df5 --- /dev/null +++ b/static/semantic/src/themes/resetcss/globals/reset.overrides @@ -0,0 +1,52 @@ +/******************************* + Overrides +*******************************/ + +/** + * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) + * http://cssreset.com + */ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/static/semantic/src/themes/resetcss/globals/reset.variables b/static/semantic/src/themes/resetcss/globals/reset.variables new file mode 100755 index 0000000..0eedf27 --- /dev/null +++ b/static/semantic/src/themes/resetcss/globals/reset.variables @@ -0,0 +1,3 @@ +/******************************* + Reset +*******************************/ \ No newline at end of file diff --git a/static/semantic/src/themes/round/elements/button.overrides b/static/semantic/src/themes/round/elements/button.overrides new file mode 100755 index 0000000..e69de29 diff --git a/static/semantic/src/themes/round/elements/button.variables b/static/semantic/src/themes/round/elements/button.variables new file mode 100755 index 0000000..9261206 --- /dev/null +++ b/static/semantic/src/themes/round/elements/button.variables @@ -0,0 +1,138 @@ +/******************************* + Button +*******************************/ + +/*------------------- + Element +--------------------*/ +@borderRadius: @circularRadius; +@textTransform: uppercase; +@backgroundColor: #FFFFFF; +@backgroundImage: none; +@fontWeight: bold; +@textColor: rgba(0, 0, 0, 0.6); +@boxShadow: + 0px 0px 0px 2px rgba(0, 0, 0, 0.2) inset +; + +/* Padding */ +@verticalPadding: 1.25em; +@horizontalPadding: 3em; + +/* Icon */ +@iconOpacity: 0.8; +@iconDistance: 0.4em; +@iconTransition: opacity @defaultDuration @defaultEasing; +@iconMargin: 0em @iconDistance 0em -(@iconDistance / 2); +@iconVerticalAlign: top; + +/*------------------- + Group +--------------------*/ + +@verticalBoxShadow: 0px 0px 0px 1px @borderColor inset; + + +/*------------------- + States +--------------------*/ + +@hoverBackgroundColor: #FAFAFA; +@hoverBackgroundImage: none; +@hoverBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset; + +@downBackgroundColor: #F0F0F0; +@downBackgroundImage: none; +@downBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.35) inset !important; + +@activeBackgroundColor: #DDDDDD; +@activeBackgroundImage: none; +@activeBoxShadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.3) inset !important; + +@loadingBackgroundColor: #FFFFFF; + +/*------------------- + Types +--------------------*/ + +/* Labeled Icon */ +@labeledIconWidth: 1em + (@verticalPadding * 2); +@labeledIconBackgroundColor: transparent; +@labeledIconPadding: (@horizontalPadding + 1em); +@labeledIconBorder: rgba(0, 0, 0, 0.05); +@labeledIconColor: ''; + +@labeledIconLeftShadow: none; +@labeledIconRightShadow: none; + +/* Basic */ +@basicBoxShadow: 0px 0px 0px 1px @borderColor; +@iconOffset: 0.05em; +@basicLoadingColor: #FFFFFF; + +@basicHoverBackground: #FAFAFA; +@basicHoverBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15); + +@basicDownBackground: rgba(0, 0, 0, 0.02); +@basicDownBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); + +@basicActiveBackground: @transparentBlack; +@basicActiveColor: @selectedTextColor; + +/* Basic Inverted */ +@basicInvertedBackground: transparent; +@basicInvertedHoverBackground: transparent; +@basicInvertedDownBackground: @transparentWhite; +@basicInvertedActiveBackground: @transparentWhite; + +@basicInvertedBoxShadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5); +@basicInvertedHoverBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; +@basicInvertedDownBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; +@basicInvertedActiveBoxShadow: 0px 0px 0px 2px @selectedWhiteBorderColor; + +@basicInvertedColor: @darkWhite; +@basicInvertedHoverColor: @darkWhiteHover; +@basicInvertedDownColor: @darkWhiteActive; +@basicInvertedActiveColor: @invertedTextColor; + + +/* Basic Group */ +@basicGroupBorder: 1px solid @borderColor; +@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor; + +/*------------------- + Variations +--------------------*/ + +/* Colors */ +@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.1)); +@coloredBoxShadow: @shadowBoxShadow; + +/* Compact */ +@compactVerticalPadding: (@verticalPadding * 0.75); +@compactHorizontalPadding: (@horizontalPadding * 0.75); + +/* Attached */ +@attachedOffset: -1px; +@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); +@attachedHorizontalPadding: 0.75em; + +/* Floated */ +@floatedMargin: 0.25em; + +/* Animated */ +@animationDuration: 0.3s; +@animationEasing: ease; +@fadeScaleHigh: 1.5; +@fadeScaleLow: 0.75; + +/* Sizing */ +@mini: 0.7rem; +@tiny: 0.8rem; +@small: 0.875rem; +@medium: 1rem; +@large: 1.125rem; +@big: 1.25rem; +@huge: 1.375rem; +@massive: 1.5rem; + diff --git a/static/semantic/src/themes/rtl/globals/site.overrides b/static/semantic/src/themes/rtl/globals/site.overrides new file mode 100755 index 0000000..b0a9f7d --- /dev/null +++ b/static/semantic/src/themes/rtl/globals/site.overrides @@ -0,0 +1,6 @@ +/******************************* + Global Overrides +*******************************/ + +/* Import Droid Arabic Kufi */ +@import 'https://fonts.googleapis.com/earlyaccess/droidarabickufi.css'; diff --git a/static/semantic/src/themes/rtl/globals/site.variables b/static/semantic/src/themes/rtl/globals/site.variables new file mode 100755 index 0000000..898d724 --- /dev/null +++ b/static/semantic/src/themes/rtl/globals/site.variables @@ -0,0 +1,14 @@ +/******************************* + Site Settings +*******************************/ + +/*------------------- + Fonts +--------------------*/ + +@googleFontName : 'Droid Sans'; + +/* Kufi imported in site.overrides */ +@headerFont : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; +@pageFont : 'Droid Arabic Kufi', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; + diff --git a/static/semantic/src/themes/striped/modules/progress.overrides b/static/semantic/src/themes/striped/modules/progress.overrides new file mode 100755 index 0000000..606cfe4 --- /dev/null +++ b/static/semantic/src/themes/striped/modules/progress.overrides @@ -0,0 +1,29 @@ +/******************************* + Progress +*******************************/ + +.ui.progress .bar { + background-size: 30px 30px; + background-image: + linear-gradient( + 135deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%, + transparent 50%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.08) 75%, + transparent 75%, transparent + ) + ; +} + +.ui.progress.active .bar:after { + animation: none; +} +.ui.progress.active .bar { + animation: progress-striped 3s linear infinite; +} +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} diff --git a/static/semantic/src/themes/striped/modules/progress.variables b/static/semantic/src/themes/striped/modules/progress.variables new file mode 100755 index 0000000..cdba171 --- /dev/null +++ b/static/semantic/src/themes/striped/modules/progress.variables @@ -0,0 +1,3 @@ +/******************************* + Progress +*******************************/ diff --git a/static/semantic/src/themes/timeline/views/feed.overrides b/static/semantic/src/themes/timeline/views/feed.overrides new file mode 100755 index 0000000..4b51e34 --- /dev/null +++ b/static/semantic/src/themes/timeline/views/feed.overrides @@ -0,0 +1,27 @@ +/******************************* + User Variable Overrides +*******************************/ + +.ui.feed > .event .label { + border-left: 3px solid #DDDDDD; +} +.ui.feed > .event:last-child .label { + border-left-color: transparent; +} + +.ui.feed > .event > .label { + margin-left: 1.6em; +} + +.ui.feed > .event > .label > img, +.ui.feed > .event > .label > .icon { + background-color: #009FDA; + border-radius: 500rem; + color: #FFFFFF; + width: 3rem; + height: 3rem; + line-height: 1.5; + left: -1.6rem; + opacity: 1; + position: relative; +} diff --git a/static/semantic/src/themes/timeline/views/feed.variables b/static/semantic/src/themes/timeline/views/feed.variables new file mode 100755 index 0000000..d1345e8 --- /dev/null +++ b/static/semantic/src/themes/timeline/views/feed.variables @@ -0,0 +1,36 @@ +/******************************* + Feed +*******************************/ + +/*------------------- + Elements +--------------------*/ + +@eventMargin: 0em; +@eventDivider: none; +@eventPadding: 0em; + +/* Event Label */ +@labelWidth: 3em; +@labelHeight: auto; + +@labeledContentMargin: 0.75em 0em 2em 0.75em; + +/* Icon */ +@iconLabelBackground: @primaryColor; +@iconLabelBorderRadius: @circularRadius; +@iconLabelColor: @white; + +/* Metadata Group */ +@metadataDisplay: inline-block; +@metadataMargin: 1em 0em 0em; +@metadataBackground: @white @subtleGradient; +@metadataBorder: 1px solid @solidBorderColor; +@metadataBorderRadius: 0.25em; +@metadataBoxShadow: 0 1px 1px rgba(0, 0, 0, 0.05); +@metadataPadding: 0.5em 1em; +@metadataColor: rgba(0, 0, 0, 0.6); + +/*------------------- + Variations +--------------------*/ diff --git a/static/semantic/src/themes/twitter/elements/button.overrides b/static/semantic/src/themes/twitter/elements/button.overrides new file mode 100755 index 0000000..44a0f45 --- /dev/null +++ b/static/semantic/src/themes/twitter/elements/button.overrides @@ -0,0 +1,13 @@ +/******************************* + Overrides +*******************************/ + +.ui.primary.button { + box-shadow: + 0px 0px 0px 1px #3B88C3 inset, + 0 2px 0 rgba(255, 255, 255, 0.15) inset + ; +} +.ui.primary.button > .icon { + color: #FFFFFF; +} diff --git a/static/semantic/src/themes/twitter/elements/button.variables b/static/semantic/src/themes/twitter/elements/button.variables new file mode 100755 index 0000000..1a8ecc3 --- /dev/null +++ b/static/semantic/src/themes/twitter/elements/button.variables @@ -0,0 +1,44 @@ +/*------------------- + Global Variables +--------------------*/ + +@pageFont: Helvetica Neue, Helvetica, Arial, sans-serif; +@textColor: #66757F; +@blue: #55ACEE; + +/*------------------- + Button Variables +--------------------*/ + +@backgroundColor: #F5F8FA; +@backgroundImage: linear-gradient(@white, @backgroundColor); +@color: #66757F; +@borderBoxShadowColor: #E1E8ED; + +@textTransform: none; +@fontWeight: bold; +@textColor: #333333; + +@horizontalPadding: 1.284em; +@verticalPadding: 0.8571em; + +@activeBackgroundColor: rgba(0, 0, 0, 0.1); + +@primaryColor: @blue; +@coloredBackgroundImage: @subtleGradient; + + +/*------------------- + States +--------------------*/ + +@hoverBackgroundColor: #E1E8ED; +@hoverBackgroundImage: linear-gradient(@white, @hoverBackgroundColor); +@hoverColor: #292F33; + +@downBackgroundColor: #E1E8ED; +@downColor: #292F33; +@downPressedShadow: 0px 1px 4px rgba(0, 0, 0, 0.2) inset; + +@labeledIconBackgroundColor: rgba(85, 172, 238, 0.05); +@labeledIconBorder: rgba(0, 0, 0, 0.1); diff --git a/static/semantic/tasks/README.md b/static/semantic/tasks/README.md new file mode 100755 index 0000000..c602e22 --- /dev/null +++ b/static/semantic/tasks/README.md @@ -0,0 +1,17 @@ +## Tasks + +* Watch - Compile only changed files from source +* Build - Build all files from source +* Version - Output version number +* Install - Run Installer to Set-up Paths + +## How to use + +These tasks can be imported into your own gulpfile allowing you to avoid using Semantic's build tools + +```javascript +var + watch = require('path/to/semantic/tasks/watch') +; +gulp.task('watch ui', watch); +``` diff --git a/static/semantic/tasks/admin/components/create.js b/static/semantic/tasks/admin/components/create.js new file mode 100755 index 0000000..311b179 --- /dev/null +++ b/static/semantic/tasks/admin/components/create.js @@ -0,0 +1,331 @@ +/******************************* + Create Component Repos +*******************************/ + +/* + This will create individual component repositories for each SUI component + + * copy component files from release + * create commonjs files as index.js for NPM release + * create release notes that filter only items related to component + * custom package.json file from template + * create bower.json from template + * create README from template + * create meteor.js file +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + del = require('del'), + fs = require('fs'), + path = require('path'), + runSequence = require('run-sequence'), + + // admin dependencies + concatFileNames = require('gulp-concat-filenames'), + debug = require('gulp-debug'), + flatten = require('gulp-flatten'), + git = require('gulp-git'), + jsonEditor = require('gulp-json-editor'), + plumber = require('gulp-plumber'), + rename = require('gulp-rename'), + replace = require('gulp-replace'), + tap = require('gulp-tap'), + + // config + config = require('../../config/user'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + // shorthand + version = project.version, + output = config.paths.output + +; + + +module.exports = function(callback) { + var + stream, + index, + tasks = [] + ; + + for(index in release.components) { + + var + component = release.components[index] + ; + + // streams... designed to save time and make coding fun... + (function(component) { + + var + outputDirectory = path.join(release.outputRoot, component), + isJavascript = fs.existsSync(output.compressed + component + '.js'), + isCSS = fs.existsSync(output.compressed + component + '.css'), + capitalizedComponent = component.charAt(0).toUpperCase() + component.slice(1), + packageName = release.packageRoot + component, + repoName = release.componentRepoRoot + capitalizedComponent, + gitURL = 'https://github.com/' + release.org + '/' + repoName + '.git', + repoURL = 'https://github.com/' + release.org + '/' + repoName + '/', + concatSettings = { + newline : '', + root : outputDirectory, + prepend : " '", + append : "'," + }, + regExp = { + match : { + // templated values + name : '{component}', + titleName : '{Component}', + version : '{version}', + files : '{files}', + // release notes + spacedVersions : /(###.*\n)\n+(?=###)/gm, + spacedLists : /(^- .*\n)\n+(?=^-)/gm, + trim : /^\s+|\s+$/g, + unrelatedNotes : new RegExp('^((?!(^.*(' + component + ').*$|###.*)).)*$', 'gmi'), + whitespace : /\n\s*\n\s*\n/gm, + // npm + componentExport : /(.*)\$\.fn\.\w+\s*=\s*function$([^$]*)\)\s*{/g, + componentReference: '$.fn.' + component, + settingsExport : /\$\.fn\.\w+\.settings\s*=/g, + settingsReference : /\$\.fn\.\w+\.settings/g, + trailingComma : /,(?=[^,]*$)/, + jQuery : /jQuery/g, + }, + replace : { + // readme + name : component, + titleName : capitalizedComponent, + // release notes + spacedVersions : '', + spacedLists : '$1', + trim : '', + unrelatedNotes : '', + whitespace : '\n\n', + // npm + componentExport : 'var _module = module;\n$1module.exports = function($2) {', + componentReference: '_module.exports', + settingsExport : 'module.exports.settings =', + settingsReference : '_module.exports.settings', + jQuery : 'require("jquery")' + } + }, + task = { + all : component + ' creating', + repo : component + ' create repo', + bower : component + ' create bower.json', + readme : component + ' create README', + npm : component + ' create NPM Module', + notes : component + ' create release notes', + composer : component + ' create composer.json', + package : component + ' create package.json', + meteor : component + ' create meteor package.js', + }, + // paths to includable assets + manifest = { + assets : outputDirectory + '/assets/**/' + component + '?(s).*', + component : outputDirectory + '/' + component + '+(.js|.css)' + } + ; + + // copy dist files into output folder adjusting asset paths + gulp.task(task.repo, false, function() { + return gulp.src(release.source + component + '.*') + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(release.paths.source, release.paths.output)) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // create npm module + gulp.task(task.npm, false, function() { + return gulp.src(release.source + component + '!(*.min|*.map).js') + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(regExp.match.componentExport, regExp.replace.componentExport)) + .pipe(replace(regExp.match.componentReference, regExp.replace.componentReference)) + .pipe(replace(regExp.match.settingsExport, regExp.replace.settingsExport)) + .pipe(replace(regExp.match.settingsReference, regExp.replace.settingsReference)) + .pipe(replace(regExp.match.jQuery, regExp.replace.jQuery)) + .pipe(rename('index.js')) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // create readme + gulp.task(task.readme, false, function() { + return gulp.src(release.templates.readme) + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(regExp.match.name, regExp.replace.name)) + .pipe(replace(regExp.match.titleName, regExp.replace.titleName)) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // extend bower.json + gulp.task(task.bower, false, function() { + return gulp.src(release.templates.bower) + .pipe(plumber()) + .pipe(flatten()) + .pipe(jsonEditor(function(bower) { + bower.name = packageName; + bower.description = capitalizedComponent + ' - Semantic UI'; + if(isJavascript) { + if(isCSS) { + bower.main = [ + component + '.js', + component + '.css' + ]; + } + else { + bower.main = [ + component + '.js' + ]; + } + bower.dependencies = { + jquery: '>=1.8' + }; + } + else { + bower.main = [ + component + '.css' + ]; + } + return bower; + })) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // extend package.json + gulp.task(task.package, false, function() { + return gulp.src(release.templates.package) + .pipe(plumber()) + .pipe(flatten()) + .pipe(jsonEditor(function(npm) { + if(isJavascript) { + npm.dependencies = { + jquery: 'x.x.x' + }; + npm.main = 'index.js'; + } + npm.name = packageName; + if(version) { + npm.version = version; + } + npm.title = 'Semantic UI - ' + capitalizedComponent; + npm.description = 'Single component release of ' + component; + npm.repository = { + type : 'git', + url : gitURL + }; + return npm; + })) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // extend composer.json + gulp.task(task.composer, false, function() { + return gulp.src(release.templates.composer) + .pipe(plumber()) + .pipe(flatten()) + .pipe(jsonEditor(function(composer) { + if(isJavascript) { + composer.dependencies = { + jquery: 'x.x.x' + }; + composer.main = component + '.js'; + } + composer.name = 'semantic/' + component; + if(version) { + composer.version = version; + } + composer.description = 'Single component release of ' + component; + return composer; + })) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // create release notes + gulp.task(task.notes, false, function() { + return gulp.src(release.templates.notes) + .pipe(plumber()) + .pipe(flatten()) + // Remove release notes for lines not mentioning component + .pipe(replace(regExp.match.unrelatedNotes, regExp.replace.unrelatedNotes)) + .pipe(replace(regExp.match.whitespace, regExp.replace.whitespace)) + .pipe(replace(regExp.match.spacedVersions, regExp.replace.spacedVersions)) + .pipe(replace(regExp.match.spacedLists, regExp.replace.spacedLists)) + .pipe(replace(regExp.match.trim, regExp.replace.trim)) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + // Creates meteor package.js + gulp.task(task.meteor, function() { + var + filenames = '' + ; + return gulp.src(manifest.component) + .pipe(concatFileNames('empty.txt', concatSettings)) + .pipe(tap(function(file) { + filenames += file.contents; + })) + .on('end', function() { + gulp.src(manifest.assets) + .pipe(concatFileNames('empty.txt', concatSettings)) + .pipe(tap(function(file) { + filenames += file.contents; + })) + .on('end', function() { + // remove trailing slash + filenames = filenames.replace(regExp.match.trailingComma, '').trim(); + gulp.src(release.templates.meteor.component) + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(regExp.match.name, regExp.replace.name)) + .pipe(replace(regExp.match.titleName, regExp.replace.titleName)) + .pipe(replace(regExp.match.version, version)) + .pipe(replace(regExp.match.files, filenames)) + .pipe(rename(release.files.meteor)) + .pipe(gulp.dest(outputDirectory)) + ; + }) + ; + }) + ; + }); + + + // synchronous tasks in orchestrator? I think not + gulp.task(task.all, false, function(callback) { + runSequence([ + task.repo, + task.npm, + task.bower, + task.readme, + task.package, + task.composer, + task.notes, + task.meteor + ], callback); + }); + + tasks.push(task.all); + + })(component); + } + + runSequence(tasks, callback); +}; diff --git a/static/semantic/tasks/admin/components/init.js b/static/semantic/tasks/admin/components/init.js new file mode 100755 index 0000000..168f8df --- /dev/null +++ b/static/semantic/tasks/admin/components/init.js @@ -0,0 +1,170 @@ +/******************************* + Init Repos +*******************************/ + +/* + + This task pulls the latest version of each component from GitHub + + * Creates new repo if doesnt exist (locally & GitHub) + * Adds remote it doesnt exists + * Pulls latest changes from repo + +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + del = require('del'), + fs = require('fs'), + path = require('path'), + git = require('gulp-git'), + githubAPI = require('github'), + mkdirp = require('mkdirp'), + + // admin files + github = require('../../config/admin/github.js'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + + // oAuth configuration for GitHub + oAuth = fs.existsSync(__dirname + '/../../config/admin/oauth.js') + ? require('../../config/admin/oauth') + : false, + + // shorthand + version = project.version +; + +module.exports = function(callback) { + + var + index = -1, + total = release.components.length, + timer, + stream, + stepRepo + ; + + if(!oAuth) { + console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); + return; + } + + // Do Git commands synchronously per component, to avoid issues + stepRepo = function() { + + index = index + 1; + + if(index >= total) { + callback(); + return; + } + + var + component = release.components[index], + outputDirectory = path.resolve(release.outputRoot + component), + capitalizedComponent = component.charAt(0).toUpperCase() + component.slice(1), + repoName = release.componentRepoRoot + capitalizedComponent, + + gitOptions = { cwd: outputDirectory }, + pullOptions = { args: '-q', cwd: outputDirectory, quiet: true }, + resetOptions = { args: '-q --hard', cwd: outputDirectory, quiet: true }, + + gitURL = 'git@github.com:' + release.org + '/' + repoName + '.git', + repoURL = 'https://github.com/' + release.org + '/' + repoName + '/', + localRepoSetup = fs.existsSync(path.join(outputDirectory, '.git')) + ; + + console.log('Processing repository: ' + outputDirectory); + + // create folder if doesn't exist + if( !fs.existsSync(outputDirectory) ) { + mkdirp.sync(outputDirectory); + } + + // clean folder + if(release.outputRoot.search('../repos') == 0) { + console.info('Cleaning dir', outputDirectory); + del.sync([outputDirectory + '**/*'], {silent: true, force: true}); + } + + // set-up local repo + function setupRepo() { + if(localRepoSetup) { + addRemote(); + } + else { + initRepo(); + } + } + + function initRepo() { + console.info('Initializing repository for ' + component); + git.init(gitOptions, function(error) { + if(error) { + console.error('Error initializing repo', error); + } + addRemote(); + }); + } + + function createRepo() { + console.info('Creating GitHub repo ' + repoURL); + github.repos.createFromOrg({ + org : release.org, + name : repoName, + homepage : release.homepage + }, function() { + setupRepo(); + }); + } + + function addRemote() { + console.info('Adding remote origin as ' + gitURL); + git.addRemote('origin', gitURL, gitOptions, function(){ + pullFiles(); + }); + } + + function pullFiles() { + console.info('Pulling ' + component + ' files'); + git.pull('origin', 'master', pullOptions, function(error) { + resetFiles(); + }); + } + + function resetFiles() { + console.info('Resetting files to head'); + git.reset('HEAD', resetOptions, function(error) { + nextRepo(); + }); + } + + function nextRepo() { + //console.log('Sleeping for 1 second...'); + // avoid rate throttling + global.clearTimeout(timer); + timer = global.setTimeout(function() { + stepRepo() + }, 0); + } + + + if(localRepoSetup) { + pullFiles(); + } + else { + setupRepo(); + // createRepo() only use to create remote repo (easier to do manually) + } + + }; + + stepRepo(); + + +}; diff --git a/static/semantic/tasks/admin/components/update.js b/static/semantic/tasks/admin/components/update.js new file mode 100755 index 0000000..d69501b --- /dev/null +++ b/static/semantic/tasks/admin/components/update.js @@ -0,0 +1,184 @@ +/******************************* + Update Repos +*******************************/ + +/* + + This task update all SUI individual component repos with new versions of components + + * Commits changes from create repo + * Pushes changes to GitHub + * Tag new releases if version changed in main repo + +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + path = require('path'), + git = require('gulp-git'), + githubAPI = require('github'), + requireDotFile = require('require-dot-file'), + + // admin files + github = require('../../config/admin/github.js'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + + // oAuth configuration for GitHub + oAuth = fs.existsSync(__dirname + '/../../config/admin/oauth.js') + ? require('../../config/admin/oauth') + : false, + + // shorthand + version = project.version +; + +module.exports = function(callback) { + + var + index = -1, + total = release.components.length, + timer, + stream, + stepRepo + ; + + if(!oAuth) { + console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); + return; + } + + // Do Git commands synchronously per component, to avoid issues + stepRepo = function() { + + index = index + 1; + if(index >= total) { + callback(); + return; + } + + var + component = release.components[index], + outputDirectory = path.resolve(path.join(release.outputRoot, component)), + capitalizedComponent = component.charAt(0).toUpperCase() + component.slice(1), + repoName = release.componentRepoRoot + capitalizedComponent, + + gitURL = 'https://github.com/' + release.org + '/' + repoName + '.git', + repoURL = 'https://github.com/' + release.org + '/' + repoName + '/', + + commitArgs = (oAuth.name !== undefined && oAuth.email !== undefined) + ? '--author "' + oAuth.name + ' <' + oAuth.email + '>"' + : '', + + componentPackage = fs.existsSync(outputDirectory + 'package.json' ) + ? require(outputDirectory + 'package.json') + : false, + + isNewVersion = (version && componentPackage.version != version), + + commitMessage = (isNewVersion) + ? 'Updated component to version ' + version + : 'Updated files from main repo', + + gitOptions = { cwd: outputDirectory }, + commitOptions = { args: commitArgs, cwd: outputDirectory }, + releaseOptions = { tag_name: version, owner: release.org, repo: repoName }, + + fileModeOptions = { args : 'config core.fileMode false', cwd: outputDirectory }, + usernameOptions = { args : 'config user.name "' + oAuth.name + '"', cwd: outputDirectory }, + emailOptions = { args : 'config user.email "' + oAuth.email + '"', cwd: outputDirectory }, + versionOptions = { args : 'rev-parse --verify HEAD', cwd: outputDirectory }, + + localRepoSetup = fs.existsSync(path.join(outputDirectory, '.git')), + canProceed = true + ; + + + console.info('Processing repository:' + outputDirectory); + + function setConfig() { + git.exec(fileModeOptions, function() { + git.exec(usernameOptions, function () { + git.exec(emailOptions, function () { + commitFiles(); + }); + }); + }); + } + + + // standard path + function commitFiles() { + // commit files + console.info('Committing ' + component + ' files', commitArgs); + gulp.src('./', gitOptions) + .pipe(git.add(gitOptions)) + .pipe(git.commit(commitMessage, commitOptions)) + .on('error', function(error) { + // canProceed = false; bug in git commit + }) + .on('finish', function(callback) { + if(canProceed) { + pushFiles(); + } + else { + console.info('Nothing new to commit'); + nextRepo(); + } + }) + ; + } + + // push changes to remote + function pushFiles() { + console.info('Pushing files for ' + component); + git.push('origin', 'master', { args: '', cwd: outputDirectory }, function(error) { + console.info('Push completed successfully'); + getSHA(); + }); + } + + // gets SHA of last commit + function getSHA() { + git.exec(versionOptions, function(error, version) { + version = version.trim(); + createRelease(version); + }); + } + + // create release on GitHub.com + function createRelease(version) { + if(version) { + releaseOptions.target_commitish = version; + } + github.repos.createRelease(releaseOptions, function() { + nextRepo(); + }); + } + + // Steps to next repository + function nextRepo() { + console.log('Sleeping for 1 second...'); + // avoid rate throttling + global.clearTimeout(timer); + timer = global.setTimeout(stepRepo, 100); + } + + + if(localRepoSetup) { + setConfig(); + } + else { + console.error('Repository must be setup before running update components'); + } + + }; + + stepRepo(); + +}; diff --git a/static/semantic/tasks/admin/distributions/create.js b/static/semantic/tasks/admin/distributions/create.js new file mode 100755 index 0000000..732707f --- /dev/null +++ b/static/semantic/tasks/admin/distributions/create.js @@ -0,0 +1,219 @@ +/******************************* + Create Distributions +*******************************/ + +/* + This will create individual distribution repositories for each SUI distribution + + * copy distribution files to release + * update package.json file +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + del = require('del'), + fs = require('fs'), + path = require('path'), + runSequence = require('run-sequence'), + mergeStream = require('merge-stream'), + + // admin dependencies + concatFileNames = require('gulp-concat-filenames'), + debug = require('gulp-debug'), + flatten = require('gulp-flatten'), + git = require('gulp-git'), + jsonEditor = require('gulp-json-editor'), + plumber = require('gulp-plumber'), + rename = require('gulp-rename'), + replace = require('gulp-replace'), + tap = require('gulp-tap'), + + // config + config = require('../../config/user'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + // shorthand + version = project.version, + output = config.paths.output + +; + + +module.exports = function(callback) { + var + stream, + index, + tasks = [] + ; + + for(index in release.distributions) { + + var + distribution = release.distributions[index] + ; + + // streams... designed to save time and make coding fun... + (function(distribution) { + + var + distLowerCase = distribution.toLowerCase(), + outputDirectory = path.join(release.outputRoot, distLowerCase), + packageFile = path.join(outputDirectory, release.files.npm), + repoName = release.distRepoRoot + distribution, + regExp = { + match : { + files : '{files}', + version : '{version}' + } + }, + task = { + all : distribution + ' copying files', + repo : distribution + ' create repo', + meteor : distribution + ' create meteor package.js', + package : distribution + ' create package.json' + }, + gatherFiles, + createList + ; + + // get files for meteor + gatherFiles = function(dir) { + var + dir = dir || path.resolve('.'), + list = fs.readdirSync(dir), + omitted = [ + '.git', + 'node_modules', + 'package.js', + 'LICENSE', + 'README.md', + 'package.json', + 'bower.json', + '.gitignore' + ], + files = [] + ; + list.forEach(function(file) { + var + isOmitted = (omitted.indexOf(file) > -1), + filePath = path.join(dir, file), + stat = fs.statSync(filePath) + ; + if(!isOmitted) { + if(stat && stat.isDirectory()) { + files = files.concat(gatherFiles(filePath)); + } + else { + files.push(filePath.replace(outputDirectory + path.sep, '')); + } + } + }); + return files; + }; + + // spaces out list correctly + createList = function(files) { + var filenames = ''; + for(var file in files) { + if(file == (files.length - 1) ) { + filenames += "'" + files[file] + "'"; + } + else { + filenames += "'" + files[file] + "',\n "; + } + } + return filenames; + }; + + + gulp.task(task.meteor, function() { + var + files = gatherFiles(outputDirectory), + filenames = createList(files) + ; + gulp.src(release.templates.meteor[distLowerCase]) + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(regExp.match.version, version)) + .pipe(replace(regExp.match.files, filenames)) + .pipe(rename(release.files.meteor)) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + if(distribution == 'CSS') { + gulp.task(task.repo, function() { + var + themes, + components, + releases + ; + themes = gulp.src('dist/themes/default/**/*', { base: 'dist/' }) + .pipe(gulp.dest(outputDirectory)) + ; + components = gulp.src('dist/components/*', { base: 'dist/' }) + .pipe(gulp.dest(outputDirectory)) + ; + releases = gulp.src('dist/*', { base: 'dist/' }) + .pipe(gulp.dest(outputDirectory)) + ; + return mergeStream(themes, components, releases); + }); + } + else if(distribution == 'LESS') { + gulp.task(task.repo, function() { + var + definitions, + themeImport, + themeConfig, + siteTheme, + themes + ; + definitions = gulp.src('src/definitions/**/*', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + themeImport = gulp.src('src/semantic.less', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + themeImport = gulp.src('src/theme.less', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + themeConfig = gulp.src('src/theme.config.example', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + siteTheme = gulp.src('src/_site/**/*', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + themes = gulp.src('src/themes/**/*', { base: 'src/' }) + .pipe(gulp.dest(outputDirectory)) + ; + return mergeStream(definitions, themeImport, themeConfig, siteTheme, themes); + }); + } + + // extend package.json + gulp.task(task.package, function() { + return gulp.src(packageFile) + .pipe(plumber()) + .pipe(jsonEditor(function(package) { + if(version) { + package.version = version; + } + return package; + })) + .pipe(gulp.dest(outputDirectory)) + ; + }); + + tasks.push(task.meteor); + tasks.push(task.repo); + tasks.push(task.package); + + })(distribution); + } + runSequence(tasks, callback); +}; \ No newline at end of file diff --git a/static/semantic/tasks/admin/distributions/init.js b/static/semantic/tasks/admin/distributions/init.js new file mode 100755 index 0000000..8ed75a0 --- /dev/null +++ b/static/semantic/tasks/admin/distributions/init.js @@ -0,0 +1,169 @@ +/******************************* + Init Dist Repos +*******************************/ + +/* + + This task pulls the latest version of distribution from GitHub + + * Creates new repo if doesnt exist (locally & GitHub) + * Adds remote it doesnt exists + * Pulls latest changes from repo + +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + del = require('del'), + fs = require('fs'), + path = require('path'), + git = require('gulp-git'), + githubAPI = require('github'), + mkdirp = require('mkdirp'), + + // admin files + github = require('../../config/admin/github.js'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + + // oAuth configuration for GitHub + oAuth = fs.existsSync(__dirname + '/../../config/admin/oauth.js') + ? require('../../config/admin/oauth') + : false, + + // shorthand + version = project.version +; + +module.exports = function(callback) { + + var + index = -1, + total = release.distributions.length, + timer, + stream, + stepRepo + ; + + if(!oAuth) { + console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); + return; + } + + // Do Git commands synchronously per component, to avoid issues + stepRepo = function() { + + index = index + 1; + + if(index >= total) { + callback(); + return; + } + + var + component = release.distributions[index], + lowerCaseComponent = component.toLowerCase(), + outputDirectory = path.resolve(release.outputRoot + lowerCaseComponent), + repoName = release.distRepoRoot + component, + + gitOptions = { cwd: outputDirectory }, + pullOptions = { args: '-q', cwd: outputDirectory, quiet: true }, + resetOptions = { args: '-q --hard', cwd: outputDirectory, quiet: true }, + gitURL = 'git@github.com:' + release.org + '/' + repoName + '.git', + repoURL = 'https://github.com/' + release.org + '/' + repoName + '/', + localRepoSetup = fs.existsSync(path.join(outputDirectory, '.git')) + ; + + console.log('Processing repository: ' + outputDirectory); + + // create folder if doesn't exist + if( !fs.existsSync(outputDirectory) ) { + mkdirp.sync(outputDirectory); + } + + // clean folder + if(release.outputRoot.search('../repos') == 0) { + console.info('Cleaning dir', outputDirectory); + del.sync([outputDirectory + '**/*'], {silent: true, force: true}); + } + + // set-up local repo + function setupRepo() { + if(localRepoSetup) { + addRemote(); + } + else { + initRepo(); + } + } + + function initRepo() { + console.info('Initializing repository for ' + component); + git.init(gitOptions, function(error) { + if(error) { + console.error('Error initializing repo', error); + } + addRemote(); + }); + } + + function createRepo() { + console.info('Creating GitHub repo ' + repoURL); + github.repos.createFromOrg({ + org : release.org, + name : repoName, + homepage : release.homepage + }, function() { + setupRepo(); + }); + } + + function addRemote() { + console.info('Adding remote origin as ' + gitURL); + git.addRemote('origin', gitURL, gitOptions, function(){ + pullFiles(); + }); + } + + function pullFiles() { + console.info('Pulling ' + component + ' files'); + git.pull('origin', 'master', pullOptions, function(error) { + resetFiles(); + }); + } + + function resetFiles() { + console.info('Resetting files to head'); + git.reset('HEAD', resetOptions, function(error) { + nextRepo(); + }); + } + + function nextRepo() { + //console.log('Sleeping for 1 second...'); + // avoid rate throttling + global.clearTimeout(timer); + timer = global.setTimeout(function() { + stepRepo() + }, 0); + } + + + if(localRepoSetup) { + pullFiles(); + } + else { + setupRepo(); + // createRepo() only use to create remote repo (easier to do manually) + } + + }; + + stepRepo(); + + +}; diff --git a/static/semantic/tasks/admin/distributions/update.js b/static/semantic/tasks/admin/distributions/update.js new file mode 100755 index 0000000..1fce7d2 --- /dev/null +++ b/static/semantic/tasks/admin/distributions/update.js @@ -0,0 +1,179 @@ +/******************************* + Update Repos +*******************************/ + +/* + + This task update all SUI individual distribution repos with new versions of distributions + + * Commits changes from create repo + * Pushes changes to GitHub + * Tag new releases if version changed in main repo + +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + path = require('path'), + git = require('gulp-git'), + githubAPI = require('github'), + requireDotFile = require('require-dot-file'), + + // admin files + github = require('../../config/admin/github.js'), + release = require('../../config/admin/release'), + project = require('../../config/project/release'), + + + // oAuth configuration for GitHub + oAuth = fs.existsSync(__dirname + '/../../config/admin/oauth.js') + ? require('../../config/admin/oauth') + : false, + + // shorthand + version = project.version +; + +module.exports = function(callback) { + + var + index = -1, + total = release.distributions.length, + timer, + stream, + stepRepo + ; + + if(!oAuth) { + console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); + return; + } + + // Do Git commands synchronously per distribution, to avoid issues + stepRepo = function() { + + index = index + 1; + if(index >= total) { + callback(); + return; + } + + var + distribution = release.distributions[index], + outputDirectory = path.resolve(path.join(release.outputRoot, distribution.toLowerCase() )), + repoName = release.distRepoRoot + distribution, + + commitArgs = (oAuth.name !== undefined && oAuth.email !== undefined) + ? '--author "' + oAuth.name + ' <' + oAuth.email + '>"' + : '', + + distributionPackage = fs.existsSync(outputDirectory + 'package.json' ) + ? require(outputDirectory + 'package.json') + : false, + + isNewVersion = (version && distributionPackage.version != version), + + commitMessage = (isNewVersion) + ? 'Updated distribution to version ' + version + : 'Updated files from main repo', + + gitOptions = { cwd: outputDirectory }, + commitOptions = { args: commitArgs, cwd: outputDirectory }, + releaseOptions = { tag_name: version, owner: release.org, repo: repoName }, + + fileModeOptions = { args : 'config core.fileMode false', cwd: outputDirectory }, + usernameOptions = { args : 'config user.name "' + oAuth.name + '"', cwd: outputDirectory }, + emailOptions = { args : 'config user.email "' + oAuth.email + '"', cwd: outputDirectory }, + versionOptions = { args : 'rev-parse --verify HEAD', cwd: outputDirectory }, + + localRepoSetup = fs.existsSync(path.join(outputDirectory, '.git')), + canProceed = true + ; + + + console.info('Processing repository:' + outputDirectory); + + function setConfig() { + git.exec(fileModeOptions, function() { + git.exec(usernameOptions, function () { + git.exec(emailOptions, function () { + commitFiles(); + }); + }); + }); + } + + // standard path + function commitFiles() { + // commit files + console.info('Committing ' + distribution + ' files', commitArgs); + gulp.src('./', gitOptions) + .pipe(git.add(gitOptions)) + .pipe(git.commit(commitMessage, commitOptions)) + .on('error', function(error) { + // canProceed = false; bug in git commit + }) + .on('finish', function(callback) { + if(canProceed) { + pushFiles(); + } + else { + console.info('Nothing new to commit'); + nextRepo(); + } + }) + ; + } + + // push changes to remote + function pushFiles() { + console.info('Pushing files for ' + distribution); + git.push('origin', 'master', { args: '', cwd: outputDirectory }, function(error) { + console.info('Push completed successfully'); + getSHA(); + }); + } + + // gets SHA of last commit + function getSHA() { + git.exec(versionOptions, function(error, version) { + version = version.trim(); + createRelease(version); + }); + } + + // create release on GitHub.com + function createRelease(version) { + if(version) { + releaseOptions.target_commitish = version; + } + github.repos.createRelease(releaseOptions, function() { + nextRepo(); + }); + } + + // Steps to next repository + function nextRepo() { + console.log('Sleeping for 1 second...'); + // avoid rate throttling + global.clearTimeout(timer); + timer = global.setTimeout(stepRepo, 100); + } + + + if(localRepoSetup) { + setConfig(); + } + else { + console.error('Repository must be setup before running update distributions'); + } + + }; + + stepRepo(); + +}; diff --git a/static/semantic/tasks/admin/publish.js b/static/semantic/tasks/admin/publish.js new file mode 100755 index 0000000..e80c86a --- /dev/null +++ b/static/semantic/tasks/admin/publish.js @@ -0,0 +1,25 @@ +/******************************* + Release All +*******************************/ + +/* + This task update all SUI individual component repos with new versions of components + + * Commits changes from create components to GitHub and Tags + +*/ + +var + runSequence = require('run-sequence') +; + +/* Release All */ +module.exports = function(callback) { + + runSequence( + 'update distributions', // commit less/css versions to github + 'update components', // commit components to github + callback + ); + +}; \ No newline at end of file diff --git a/static/semantic/tasks/admin/register.js b/static/semantic/tasks/admin/register.js new file mode 100755 index 0000000..d45dd29 --- /dev/null +++ b/static/semantic/tasks/admin/register.js @@ -0,0 +1,55 @@ +/******************************* + Register PM +*******************************/ + +/* + Task to register component repos with Package Managers + * Registers component with bower + * Registers component with NPM +*/ + +var + // node dependencies + process = require('child_process'), + + // config + release = require('../config/admin/release'), + + // register components and distributions + repos = release.distributions.concat(release.components), + total = repos.length, + index = -1, + + stream, + stepRepo +; + +module.exports = function(callback) { + + console.log('Registering repos with package managers'); + + // Do Git commands synchronously per component, to avoid issues + stepRepo = function() { + index = index + 1; + if(index >= total) { + callback(); + return; + } + var + repo = repos[index].toLowerCase(), + outputDirectory = release.outputRoot + repo + '/', + exec = process.exec, + execSettings = {cwd: outputDirectory}, + updateNPM = 'npm publish;meteor publish;' + ; + + /* Register with NPM */ + exec(updateNPM, execSettings, function(err, stdout, stderr) { + console.log(err, stdout, stderr); + stepRepo(); + }); + + }; + stepRepo(); +}; + diff --git a/static/semantic/tasks/admin/release.js b/static/semantic/tasks/admin/release.js new file mode 100755 index 0000000..a247e8b --- /dev/null +++ b/static/semantic/tasks/admin/release.js @@ -0,0 +1,29 @@ +/******************************* + Release +*******************************/ + +/* + This task update all SUI individual component repos with new versions of components + + * Initializes repositories with current versions + * Creates local files at ../distributions/ with each repo for release + +*/ + +var + runSequence = require('run-sequence') +; + +/* Release All */ +module.exports = function(callback) { + + runSequence( + //'build', // build Semantic + 'init distributions', // sync with current github version + 'create distributions', // update each repo with changes from master repo + 'init components', // sync with current github version + 'create components', // update each repo + callback + ); + +}; \ No newline at end of file diff --git a/static/semantic/tasks/build.js b/static/semantic/tasks/build.js new file mode 100755 index 0000000..56ea879 --- /dev/null +++ b/static/semantic/tasks/build.js @@ -0,0 +1,50 @@ +/******************************* + Build Task +*******************************/ + +var + // dependencies + gulp = require('gulp-help')(require('gulp')), + runSequence = require('run-sequence'), + + // config + config = require('./config/user'), + install = require('./config/project/install'), + + // task sequence + tasks = [] +; + + +// sub-tasks +if(config.rtl) { + require('./collections/rtl')(gulp); +} +require('./collections/build')(gulp); + + +module.exports = function(callback) { + + console.info('Building Semantic'); + + if( !install.isSetup() ) { + console.error('Cannot find semantic.json. Run "gulp install" to set-up Semantic'); + return 1; + } + + // check for right-to-left (RTL) language + if(config.rtl === true || config.rtl === 'Yes') { + gulp.start('build-rtl'); + return; + } + + if(config.rtl == 'both') { + tasks.push('build-rtl'); + } + + tasks.push('build-javascript'); + tasks.push('build-css'); + tasks.push('build-assets'); + + runSequence(tasks, callback); +}; diff --git a/static/semantic/tasks/build/assets.js b/static/semantic/tasks/build/assets.js new file mode 100755 index 0000000..bc37ad9 --- /dev/null +++ b/static/semantic/tasks/build/assets.js @@ -0,0 +1,35 @@ +/******************************* + Build Task +*******************************/ + +var + gulp = require('gulp'), + + // gulp dependencies + chmod = require('gulp-chmod'), + gulpif = require('gulp-if'), + + // config + config = require('../config/user'), + tasks = require('../config/tasks'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + log = tasks.log +; + +module.exports = function(callback) { + + console.info('Building assets'); + + // copy assets + return gulp.src(source.themes + '/**/assets/**/*.*') + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + ; + +}; \ No newline at end of file diff --git a/static/semantic/tasks/build/css.js b/static/semantic/tasks/build/css.js new file mode 100755 index 0000000..839aea3 --- /dev/null +++ b/static/semantic/tasks/build/css.js @@ -0,0 +1,113 @@ +/******************************* + Build Task +*******************************/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + + // gulp dependencies + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + flatten = require('gulp-flatten'), + gulpif = require('gulp-if'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + runSequence = require('run-sequence'), + + // config + config = require('../config/user'), + tasks = require('../config/tasks'), + install = require('../config/project/install'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings +; + +// add internal tasks (concat release) +require('../collections/internal')(gulp); + +module.exports = function(callback) { + + var + tasksCompleted = 0, + maybeCallback = function() { + tasksCompleted++; + if(tasksCompleted === 2) { + callback(); + } + }, + + stream, + compressedStream, + uncompressedStream + ; + + console.info('Building CSS'); + + if( !install.isSetup() ) { + console.error('Cannot build files. Run "gulp install" to set-up Semantic'); + return; + } + + // unified css stream + stream = gulp.src(source.definitions + '/**/' + globs.components + '.less') + .pipe(plumber(settings.plumber.less)) + .pipe(less(settings.less)) + .pipe(autoprefixer(settings.prefix)) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(flatten()) + ; + + // two concurrent streams from same source to concat release + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + // uncompressed component css + uncompressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + runSequence('package uncompressed css', maybeCallback); + }) + ; + + // compressed component css + compressedStream + .pipe(plumber()) + .pipe(clone()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.minCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + runSequence('package compressed css', maybeCallback); + }) + ; + +}; diff --git a/static/semantic/tasks/build/javascript.js b/static/semantic/tasks/build/javascript.js new file mode 100755 index 0000000..6dc3951 --- /dev/null +++ b/static/semantic/tasks/build/javascript.js @@ -0,0 +1,77 @@ +/******************************* + Build Task +*******************************/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + + // gulp dependencies + chmod = require('gulp-chmod'), + flatten = require('gulp-flatten'), + gulpif = require('gulp-if'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + uglify = require('gulp-uglify'), + + // config + config = require('../config/user'), + tasks = require('../config/tasks'), + install = require('../config/project/install'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings +; + +// add internal tasks (concat release) +require('../collections/internal')(gulp); + +module.exports = function(callback) { + + var + stream, + compressedStream, + uncompressedStream + ; + + console.info('Building Javascript'); + + if( !install.isSetup() ) { + console.error('Cannot build files. Run "gulp install" to set-up Semantic'); + return; + } + + // copy source javascript + gulp.src(source.definitions + '/**/' + globs.components + '.js') + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(gulp.dest(output.uncompressed)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(gulp.dest(output.compressed)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed js'); + gulp.start('package uncompressed js'); + callback(); + }) + ; + +}; diff --git a/static/semantic/tasks/check-install.js b/static/semantic/tasks/check-install.js new file mode 100755 index 0000000..9bab87e --- /dev/null +++ b/static/semantic/tasks/check-install.js @@ -0,0 +1,28 @@ +/******************************* + Check Install +*******************************/ + +var + // node dependencies + gulp = require('gulp'), + fs = require('fs'), + console = require('better-console'), + install = require('./config/project/install') +; + +// export task +module.exports = function() { + + setTimeout(function() { + if( !install.isSetup() ) { + console.log('Starting install...'); + gulp.start('install'); + return; + } + else { + gulp.start('watch'); + } + }, 50); // Delay to allow console.clear to remove messages from check event + + +}; \ No newline at end of file diff --git a/static/semantic/tasks/clean.js b/static/semantic/tasks/clean.js new file mode 100755 index 0000000..f435b4e --- /dev/null +++ b/static/semantic/tasks/clean.js @@ -0,0 +1,14 @@ +/******************************* + Clean Task +*******************************/ + +var + del = require('del'), + config = require('./config/user'), + tasks = require('./config/tasks') +; + +// cleans distribution files +module.exports = function(callback) { + return del([config.paths.clean], tasks.settings.del, callback); +}; \ No newline at end of file diff --git a/static/semantic/tasks/collections/README.md b/static/semantic/tasks/collections/README.md new file mode 100755 index 0000000..1cae511 --- /dev/null +++ b/static/semantic/tasks/collections/README.md @@ -0,0 +1,16 @@ +## How to use + +These are collections of tasks that are imported together. + +To import them into gulp: +```javascript +var + gulp = require('gulp'), + // modified to point to semantic folder + install = require('tasks/collections/install') +; +gulp = install(gulp); + +// tasks are now injected and ready to be used +gulp.start('install'); +``` \ No newline at end of file diff --git a/static/semantic/tasks/collections/admin.js b/static/semantic/tasks/collections/admin.js new file mode 100755 index 0000000..a384d1f --- /dev/null +++ b/static/semantic/tasks/collections/admin.js @@ -0,0 +1,49 @@ +/******************************* + Admin Task Collection +*******************************/ + +/* + This are tasks to be run by project maintainers + - Creating Component Repos + - Syncing with GitHub via APIs + - Modifying package files +*/ + +/******************************* + Tasks +*******************************/ + + +module.exports = function(gulp) { + var + // less/css distributions + initComponents = require('../admin/components/init'), + createComponents = require('../admin/components/create'), + updateComponents = require('../admin/components/update'), + + // single component releases + initDistributions = require('../admin/distributions/init'), + createDistributions = require('../admin/distributions/create'), + updateDistributions = require('../admin/distributions/update'), + + release = require('../admin/release'), + publish = require('../admin/publish'), + register = require('../admin/register') + ; + + /* Release */ + gulp.task('init distributions', 'Grabs each component from GitHub', initDistributions); + gulp.task('create distributions', 'Updates files in each repo', createDistributions); + gulp.task('init components', 'Grabs each component from GitHub', initComponents); + gulp.task('create components', 'Updates files in each repo', createComponents); + + /* Publish */ + gulp.task('update distributions', 'Commits component updates from create to GitHub', updateDistributions); + gulp.task('update components', 'Commits component updates from create to GitHub', updateComponents); + + /* Tasks */ + gulp.task('release', 'Stages changes in GitHub repos for all distributions', release); + gulp.task('publish', 'Publishes all releases (components, package)', publish); + gulp.task('register', 'Registers all packages with NPM', register); + +}; \ No newline at end of file diff --git a/static/semantic/tasks/collections/build.js b/static/semantic/tasks/collections/build.js new file mode 100755 index 0000000..f7ea287 --- /dev/null +++ b/static/semantic/tasks/collections/build.js @@ -0,0 +1,19 @@ +/******************************* + Define Sub-Tasks +*******************************/ + +module.exports = function(gulp) { + + var + // build sub-tasks + buildJS = require('./../build/javascript'), + buildCSS = require('./../build/css'), + buildAssets = require('./../build/assets') + ; + + // in case these tasks are undefined during import, less make sure these are available in scope + gulp.task('build-javascript', 'Builds all javascript from source', buildJS); + gulp.task('build-css', 'Builds all css from source', buildCSS); + gulp.task('build-assets', 'Copies all assets from source', buildAssets); + +}; diff --git a/static/semantic/tasks/collections/internal.js b/static/semantic/tasks/collections/internal.js new file mode 100755 index 0000000..d5dc217 --- /dev/null +++ b/static/semantic/tasks/collections/internal.js @@ -0,0 +1,227 @@ +/******************************* + Internal Task Collection +*******************************/ + +/* These tasks create packaged files from **dist** components + Not intended to be called directly by a user because + these do not build fresh from **src** +*/ + +module.exports = function(gulp) { + + var + // node dependencies + fs = require('fs'), + chmod = require('gulp-chmod'), + concat = require('gulp-concat'), + concatCSS = require('gulp-concat-css'), + clone = require('gulp-clone'), + dedupe = require('gulp-dedupe'), + gulpif = require('gulp-if'), + header = require('gulp-header'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + uglify = require('gulp-uglify'), + + // user config + config = require('./../config/user'), + docsConfig = require('./../config/docs'), + + // install config + tasks = require('./../config/tasks'), + release = require('./../config/project/release'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + + banner = tasks.banner, + filenames = tasks.filenames, + log = tasks.log, + settings = tasks.settings + ; + + /*-------------- + Packaged + ---------------*/ + + gulp.task('package uncompressed css', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(plumber()) + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed css', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(plumber()) + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedMinifiedCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(minifyCSS(settings.concatMinify)) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package uncompressed js', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.js') + .pipe(plumber()) + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concat(filenames.concatenatedJS)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed js', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.js') + .pipe(plumber()) + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concat(filenames.concatenatedMinifiedJS)) + .pipe(uglify(settings.concatUglify)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + /*-------------- + RTL + ---------------*/ + + if(config.rtl) { + + gulp.task('package uncompressed rtl css', function () { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignoredRTL + '.rtl.css') + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedRTLCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed rtl css', function () { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignoredRTL + '.rtl.css') + .pipe(dedupe()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedMinifiedRTLCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(minifyCSS(settings.concatMinify)) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package uncompressed docs css', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed docs css', function() { + return gulp.src(output.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedMinifiedCSS, settings.concatCSS)) + .pipe(minifyCSS(settings.concatMinify)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.packaged)) + .pipe(print(log.created)) + ; + }); + + } + + /*-------------- + Docs + ---------------*/ + + var + docsOutput = docsConfig.paths.output + ; + + gulp.task('package uncompressed docs css', function() { + return gulp.src(docsOutput.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedCSS, settings.concatCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(docsOutput.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed docs css', function() { + return gulp.src(docsOutput.uncompressed + '/**/' + globs.components + globs.ignored + '.css') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concatCSS(filenames.concatenatedMinifiedCSS, settings.concatCSS)) + .pipe(minifyCSS(settings.concatMinify)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(docsOutput.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package uncompressed docs js', function() { + return gulp.src(docsOutput.uncompressed + '/**/' + globs.components + globs.ignored + '.js') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concat(filenames.concatenatedJS)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(docsOutput.packaged)) + .pipe(print(log.created)) + ; + }); + + gulp.task('package compressed docs js', function() { + return gulp.src(docsOutput.uncompressed + '/**/' + globs.components + globs.ignored + '.js') + .pipe(dedupe()) + .pipe(plumber()) + .pipe(replace(assets.uncompressed, assets.packaged)) + .pipe(concat(filenames.concatenatedMinifiedJS)) + .pipe(uglify(settings.concatUglify)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(docsOutput.packaged)) + .pipe(print(log.created)) + ; + }); + +}; diff --git a/static/semantic/tasks/collections/rtl.js b/static/semantic/tasks/collections/rtl.js new file mode 100755 index 0000000..4c8e70a --- /dev/null +++ b/static/semantic/tasks/collections/rtl.js @@ -0,0 +1,16 @@ +/******************************* + Define Sub-Tasks +*******************************/ + +module.exports = function(gulp) { + + var + // rtl + buildRTL = require('./../rtl/build'), + watchRTL = require('./../rtl/watch') + ; + + gulp.task('watch-rtl', 'Build all files as RTL', watchRTL); + gulp.task('build-rtl', 'Watch files as RTL ', buildRTL); + +}; diff --git a/static/semantic/tasks/config/admin/github.js b/static/semantic/tasks/config/admin/github.js new file mode 100755 index 0000000..6f0f4c2 --- /dev/null +++ b/static/semantic/tasks/config/admin/github.js @@ -0,0 +1,37 @@ +/******************************* + GitHub Login +*******************************/ +/* + Logs into GitHub using OAuth +*/ + +var + fs = require('fs'), + path = require('path'), + githubAPI = require('github'), + + // stores oauth info for GitHub API + oAuthConfig = path.join(__dirname, 'oauth.js'), + oAuth = fs.existsSync(oAuthConfig) + ? require(oAuthConfig) + : false, + github +; + +if(!oAuth) { + console.error('Must add oauth token for GitHub in tasks/config/admin/oauth.js'); +} + +github = new githubAPI({ + version : '3.0.0', + debug : true, + protocol : 'https', + timeout : 5000 +}); + +github.authenticate({ + type: 'oauth', + token: oAuth.token +}); + +module.exports = github; diff --git a/static/semantic/tasks/config/admin/oauth.example.js b/static/semantic/tasks/config/admin/oauth.example.js new file mode 100755 index 0000000..c4d864a --- /dev/null +++ b/static/semantic/tasks/config/admin/oauth.example.js @@ -0,0 +1,11 @@ +/* + Used to import GitHub Auth Token + To Automate GitHub Updates +*/ + +module.exports = { + token : 'AN-OAUTH2-TOKEN', + username : 'github-username', + name : 'Your Name', + email : 'user@email.com' +}; \ No newline at end of file diff --git a/static/semantic/tasks/config/admin/release.js b/static/semantic/tasks/config/admin/release.js new file mode 100755 index 0000000..def1f59 --- /dev/null +++ b/static/semantic/tasks/config/admin/release.js @@ -0,0 +1,112 @@ +/******************************* + Release Settings +*******************************/ + +// release settings +module.exports = { + + // path to components for repos + source : './dist/components/', + + // modified asset paths for component repos + paths: { + source : '../themes/default/assets/', + output : 'assets/' + }, + + templates: { + bower : './tasks/config/admin/templates/bower.json', + composer : './tasks/config/admin/templates/composer.json', + package : './tasks/config/admin/templates/package.json', + meteor : { + css : './tasks/config/admin/templates/css-package.js', + component : './tasks/config/admin/templates/component-package.js', + less : './tasks/config/admin/templates/less-package.js', + }, + readme : './tasks/config/admin/templates/README.md', + notes : './RELEASE-NOTES.md' + }, + + org : 'Semantic-Org', + repo : 'Semantic-UI', + + // files created for package managers + files: { + composer : 'composer.json', + config : 'semantic.json', + npm : 'package.json', + meteor : 'package.js' + }, + + // root name for distribution repos + distRepoRoot : 'Semantic-UI-', + + // root name for single component repos + componentRepoRoot : 'UI-', + + // root name for package managers + packageRoot : 'semantic-ui-', + + // root path to repos + outputRoot : '../repos/', + + homepage : 'http://www.semantic-ui.com', + + // distributions that get separate repos + distributions: [ + 'LESS', + 'CSS' + ], + + // components that get separate repositories for bower/npm + components : [ + 'accordion', + 'ad', + 'api', + 'breadcrumb', + 'button', + 'card', + 'checkbox', + 'comment', + 'container', + 'dimmer', + 'divider', + 'dropdown', + 'embed', + 'feed', + 'flag', + 'form', + 'grid', + 'header', + 'icon', + 'image', + 'input', + 'item', + 'label', + 'list', + 'loader', + 'placeholder', + 'menu', + 'message', + 'modal', + 'nag', + 'popup', + 'progress', + 'rail', + 'rating', + 'reset', + 'reveal', + 'search', + 'segment', + 'shape', + 'sidebar', + 'site', + 'statistic', + 'step', + 'sticky', + 'tab', + 'table', + 'transition', + 'visibility' + ] +}; diff --git a/static/semantic/tasks/config/admin/templates/README.md b/static/semantic/tasks/config/admin/templates/README.md new file mode 100755 index 0000000..ec1d4eb --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/README.md @@ -0,0 +1,32 @@ +# Semantic {Component} + +This repository contains pre-compiled {component} files using the default themes. This is intended for use in projects that do not need all the bells and whistles of Semantic UI, and want to keep file size to a minimum. + +For the latest changes please see the [Release Notes](https://github.com/Semantic-Org/UI-{Component}/blob/master/RELEASE-NOTES.md) + +**Special Note** +An update in `2.0.8` has fixed an issue which may have prevented some single component modules from working correctly. Please see notes in [this pull request](https://github.com/Semantic-Org/Semantic-UI/pull/2816). + +If you're looking for the full version of Semantic including all components and build tools [check out the main project repository](https://github.com/Semantic-Org/Semantic-UI/tree/1.0) + +#### To install with Bower +``` +bower install semantic-ui-{component} +``` + +#### To install with NPM +``` +npm install semantic-ui-{component} +``` + +#### To install with Meteor +``` +meteor add semantic:ui-{component} +``` + + +## Addendum + +This element's definitions (required class names, html structures) are available in the [UI Docs](http://www.semantic-ui.com) + +Please consider checking out [all the benefits to theming](http://www.learnsemantic.com/guide/expert.html) before using these stand-alone releases. diff --git a/static/semantic/tasks/config/admin/templates/bower.json b/static/semantic/tasks/config/admin/templates/bower.json new file mode 100755 index 0000000..ab4951a --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/bower.json @@ -0,0 +1,29 @@ +{ + "name" : "Component", + "description" : "Component distribution", + "homepage" : "http://www.semantic-ui.com", + "author": { + "name" : "Jack Lukic", + "web" : "http://www.jacklukic.com" + }, + "ignore": [ + "./index.js" + ], + "keywords": [ + "semantic", + "ui", + "css3", + "framework" + ], + "license" : [ + "http://semantic-ui.mit-license.org/" + ], + "ignore": [ + "docs", + "node", + "server", + "spec", + "src", + "test" + ] +} diff --git a/static/semantic/tasks/config/admin/templates/component-package.js b/static/semantic/tasks/config/admin/templates/component-package.js new file mode 100755 index 0000000..74cd51b --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/component-package.js @@ -0,0 +1,14 @@ + +Package.describe({ + name : 'semantic:ui-{component}', + summary : 'Semantic UI - {Component}: Single component release', + version : '{version}', + git : 'git://github.com/Semantic-Org/UI-{Component}.git', +}); + +Package.onUse(function(api) { + api.versionsFrom('1.0'); + api.addFiles([ + {files} + ], 'client'); +}); diff --git a/static/semantic/tasks/config/admin/templates/composer.json b/static/semantic/tasks/config/admin/templates/composer.json new file mode 100755 index 0000000..b47d2e1 --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/composer.json @@ -0,0 +1,20 @@ +{ + "name" : "semantic/ui", + "description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.", + "homepage" : "http://www.semantic-ui.com", + "authors": [ + { + "name" : "Jack Lukic", + "email": "jacklukic@gmail.com", + "web" : "http://www.jacklukic.com", + "role" : "Creator" + } + ], + "keywords": [ + "semantic", + "ui", + "css", + "framework" + ], + "license" : "MIT" +} \ No newline at end of file diff --git a/static/semantic/tasks/config/admin/templates/css-package.js b/static/semantic/tasks/config/admin/templates/css-package.js new file mode 100755 index 0000000..0949ce3 --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/css-package.js @@ -0,0 +1,34 @@ +var + where = 'client' // Adds files only to the client +; + +Package.describe({ + name : 'semantic:ui-css', + summary : 'Semantic UI - CSS Release of Semantic UI', + version : '{version}', + git : 'git://github.com/Semantic-Org/Semantic-UI-CSS.git', +}); + +Package.onUse(function(api) { + + api.versionsFrom('1.0'); + + api.use('jquery', 'client'); + + api.addFiles([ + // icons + 'themes/default/assets/fonts/icons.eot', + 'themes/default/assets/fonts/icons.svg', + 'themes/default/assets/fonts/icons.ttf', + 'themes/default/assets/fonts/icons.woff', + 'themes/default/assets/fonts/icons.woff2', + + // flags + 'themes/default/assets/images/flags.png', + + // release + 'semantic.css', + 'semantic.js' + ], 'client'); + +}); diff --git a/static/semantic/tasks/config/admin/templates/less-package.js b/static/semantic/tasks/config/admin/templates/less-package.js new file mode 100755 index 0000000..e2f8a25 --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/less-package.js @@ -0,0 +1,21 @@ +var + where = 'client' // Adds files only to the client +; + +Package.describe({ + name : 'semantic:ui', + summary : 'Semantic UI - LESS Release of Semantic UI', + version : '{version}', + git : 'git://github.com/Semantic-Org/Semantic-UI-LESS.git', +}); + +Package.onUse(function(api) { + + api.versionsFrom('1.0'); + api.use('less', 'client'); + + api.addFiles([ + {files} + ], 'client'); + +}); diff --git a/static/semantic/tasks/config/admin/templates/package.json b/static/semantic/tasks/config/admin/templates/package.json new file mode 100755 index 0000000..5d96785 --- /dev/null +++ b/static/semantic/tasks/config/admin/templates/package.json @@ -0,0 +1,17 @@ +{ + "name": "semantic", + "version": "1.0.0", + "title": "Semantic UI", + "description": "Semantic empowers designers and developers by creating a shared vocabulary for UI.", + "homepage": "http://www.semantic-ui.com", + "author": "Jack Lukic ", + "license": "MIT", + "repository": { + "type": "git", + "url": "git://github.com/Semantic-Org/Semantic-UI.git" + }, + "bugs": { + "url": "https://github.com/Semantic-Org/Semantic-UI/issues" + }, + "devDependencies": {} +} diff --git a/static/semantic/tasks/config/defaults.js b/static/semantic/tasks/config/defaults.js new file mode 100755 index 0000000..0f3e228 --- /dev/null +++ b/static/semantic/tasks/config/defaults.js @@ -0,0 +1,118 @@ +/******************************* + Default Paths +*******************************/ + +module.exports = { + + // base path added to all other paths + base : '', + + // base path when installed with npm + pmRoot: 'semantic/', + + // octal permission for output files, i.e. 644 (false does not adjust) + permission : 744, + + // whether to generate rtl files + rtl : false, + + // file paths + files: { + config : 'semantic.json', + site : 'src/site', + theme : 'src/theme.config' + }, + + // folder paths + paths: { + source: { + config : 'src/theme.config', + definitions : 'src/definitions/', + site : 'src/site/', + themes : 'src/themes/' + }, + output: { + packaged : 'dist/', + uncompressed : 'dist/components/', + compressed : 'dist/components/', + themes : 'dist/themes/' + }, + clean : 'dist/' + }, + + // components to include in package + components: [ + + // global + 'reset', + 'site', + + // elements + 'button', + 'container', + 'divider', + 'flag', + 'header', + 'icon', + 'image', + 'input', + 'label', + 'list', + 'loader', + 'placeholder', + 'rail', + 'reveal', + 'segment', + 'step', + + // collections + 'breadcrumb', + 'form', + 'grid', + 'menu', + 'message', + 'table', + + // views + 'ad', + 'card', + 'comment', + 'feed', + 'item', + 'statistic', + + // modules + 'accordion', + 'checkbox', + 'dimmer', + 'dropdown', + 'embed', + 'modal', + 'nag', + 'popup', + 'progress', + 'rating', + 'search', + 'shape', + 'sidebar', + 'sticky', + 'tab', + 'transition', + + // behaviors + 'api', + 'form', + 'state', + 'visibility' + ], + + // whether to load admin tasks + admin: false, + + // globs used for matching file patterns + globs : { + ignored : '!(*.min|*.map|*.rtl)', + ignoredRTL : '!(*.min|*.map)' + } + +}; diff --git a/static/semantic/tasks/config/docs.js b/static/semantic/tasks/config/docs.js new file mode 100755 index 0000000..d04b095 --- /dev/null +++ b/static/semantic/tasks/config/docs.js @@ -0,0 +1,32 @@ +/******************************* + Docs +*******************************/ + +/* Paths used for "serve-docs" and "build-docs" tasks */ +module.exports = { + base: '', + globs: { + eco: '**/*.html.eco' + }, + paths: { + clean: '../docs/out/dist/', + source: { + config : 'src/theme.config', + definitions : 'src/definitions/', + site : 'src/site/', + themes : 'src/themes/' + }, + output: { + examples : '../docs/out/examples/', + less : '../docs/out/src/', + metadata : '../docs/out/', + packaged : '../docs/out/dist/', + uncompressed : '../docs/out/dist/components/', + compressed : '../docs/out/dist/components/', + themes : '../docs/out/dist/themes/' + }, + template: { + eco: '../docs/server/documents/' + }, + } +}; diff --git a/static/semantic/tasks/config/npm/gulpfile.js b/static/semantic/tasks/config/npm/gulpfile.js new file mode 100755 index 0000000..bde1960 --- /dev/null +++ b/static/semantic/tasks/config/npm/gulpfile.js @@ -0,0 +1,72 @@ +/******************************* + Set-up +*******************************/ + +var + gulp = require('gulp-help')(require('gulp')), + + // read user config to know what task to load + config = require('./tasks/config/user'), + + // watch changes + watch = require('./tasks/watch'), + + // build all files + build = require('./tasks/build'), + buildJS = require('./tasks/build/javascript'), + buildCSS = require('./tasks/build/css'), + buildAssets = require('./tasks/build/assets'), + + // utility + clean = require('./tasks/clean'), + version = require('./tasks/version'), + + // docs tasks + serveDocs = require('./tasks/docs/serve'), + buildDocs = require('./tasks/docs/build'), + + // rtl + buildRTL = require('./tasks/rtl/build'), + watchRTL = require('./tasks/rtl/watch') +; + + +/******************************* + Tasks +*******************************/ + +gulp.task('default', false, [ + 'watch' +]); + +gulp.task('watch', 'Watch for site/theme changes', watch); + +gulp.task('build', 'Builds all files from source', build); +gulp.task('build-javascript', 'Builds all javascript from source', buildJS); +gulp.task('build-css', 'Builds all css from source', buildCSS); +gulp.task('build-assets', 'Copies all assets from source', buildAssets); + +gulp.task('clean', 'Clean dist folder', clean); +gulp.task('version', 'Displays current version of Semantic', version); + +/*-------------- + Docs +---------------*/ + +/* + Lets you serve files to a local documentation instance + https://github.com/Semantic-Org/Semantic-UI-Docs/ +*/ + +gulp.task('serve-docs', 'Serve file changes to SUI Docs', serveDocs); +gulp.task('build-docs', 'Build all files and add to SUI Docs', buildDocs); + + +/*-------------- + RTL +---------------*/ + +if(config.rtl) { + gulp.task('watch-rtl', 'Watch files as RTL', watchRTL); + gulp.task('build-rtl', 'Build all files as RTL', buildRTL); +} diff --git a/static/semantic/tasks/config/project/config.js b/static/semantic/tasks/config/project/config.js new file mode 100755 index 0000000..e71a9e5 --- /dev/null +++ b/static/semantic/tasks/config/project/config.js @@ -0,0 +1,141 @@ +/******************************* + Set-up +*******************************/ + +var + extend = require('extend'), + fs = require('fs'), + path = require('path'), + + defaults = require('../defaults') +; + + +/******************************* + Exports +*******************************/ + +module.exports = { + + getPath: function(file, directory) { + var + configPath, + walk = function(directory) { + var + nextDirectory = path.resolve( path.join(directory, path.sep, '..') ), + currentPath = path.normalize( path.join(directory, file) ) + ; + if( fs.existsSync(currentPath) ) { + // found file + configPath = path.normalize(directory); + return; + } + else { + // reached file system root, let's stop + if(nextDirectory == directory) { + return; + } + // otherwise recurse + walk(nextDirectory, file); + } + } + ; + + // start walk from outside require-dot-files directory + file = file || defaults.files.config; + directory = directory || path.join(__dirname, path.sep, '..'); + walk(directory); + return configPath || ''; + }, + + // adds additional derived values to a config object + addDerivedValues: function(config) { + + config = config || extend(false, {}, defaults); + + /*-------------- + File Paths + ---------------*/ + + var + configPath = this.getPath(), + sourcePaths = {}, + outputPaths = {}, + folder + ; + + // resolve paths (config location + base + path) + for(folder in config.paths.source) { + if(config.paths.source.hasOwnProperty(folder)) { + sourcePaths[folder] = path.resolve(path.join(configPath, config.base, config.paths.source[folder])); + } + } + for(folder in config.paths.output) { + if(config.paths.output.hasOwnProperty(folder)) { + outputPaths[folder] = path.resolve(path.join(configPath, config.base, config.paths.output[folder])); + } + } + + // set config paths to full paths + config.paths.source = sourcePaths; + config.paths.output = outputPaths; + + // resolve "clean" command path + config.paths.clean = path.resolve( path.join(configPath, config.base, config.paths.clean) ); + + /*-------------- + CSS URLs + ---------------*/ + + // determine asset paths in css by finding relative path between themes and output + // force forward slashes + + config.paths.assets = { + source : '../../themes', // source asset path is always the same + uncompressed : './' + path.relative(config.paths.output.uncompressed, config.paths.output.themes).replace(/\\/g, '/'), + compressed : './' + path.relative(config.paths.output.compressed, config.paths.output.themes).replace(/\\/g, '/'), + packaged : './' + path.relative(config.paths.output.packaged, config.paths.output.themes).replace(/\\/g, '/') + }; + + /*-------------- + Permission + ---------------*/ + + if(config.permission) { + config.hasPermissions = true; + } + else { + // pass blank object to avoid causing errors + config.permission = {}; + config.hasPermissions = false; + } + + /*-------------- + Globs + ---------------*/ + + if(!config.globs) { + config.globs = {}; + } + + // remove duplicates from component array + if(config.components instanceof Array) { + config.components = config.components.filter(function(component, index) { + return config.components.indexOf(component) == index; + }); + } + + // takes component object and creates file glob matching selected components + config.globs.components = (typeof config.components == 'object') + ? (config.components.length > 1) + ? '{' + config.components.join(',') + '}' + : config.components[0] + : '{' + defaults.components.join(',') + '}' + ; + + return config; + + } + +}; + diff --git a/static/semantic/tasks/config/project/install.js b/static/semantic/tasks/config/project/install.js new file mode 100755 index 0000000..2d0f984 --- /dev/null +++ b/static/semantic/tasks/config/project/install.js @@ -0,0 +1,758 @@ +/******************************* + Set-up +*******************************/ + +var + fs = require('fs'), + path = require('path'), + defaults = require('../defaults'), + release = require('./release'), + + requireDotFile = require('require-dot-file') +; + +/******************************* + When to Ask +*******************************/ + +/* Preconditions for install questions */ + +var when = { + + // path + changeRoot: function(questions) { + return (questions.useRoot !== undefined && questions.useRoot !== true); + }, + + // permissions + changePermissions: function(questions) { + return (questions.changePermissions && questions.changePermissions === true); + }, + + // install + hasConfig: function() { + return requireDotFile('semantic.json', process.cwd()); + }, + + allowOverwrite: function(questions) { + return (questions.overwrite === undefined || questions.overwrite == 'yes'); + }, + notAuto: function(questions) { + return (questions.install !== 'auto' && (questions.overwrite === undefined || questions.overwrite == 'yes')); + }, + custom: function(questions) { + return (questions.install === 'custom' && (questions.overwrite === undefined || questions.overwrite == 'yes')); + }, + express: function(questions) { + return (questions.install === 'express' && (questions.overwrite === undefined || questions.overwrite == 'yes')); + }, + + // customize + customize: function(questions) { + return (questions.customize === true); + }, + primaryColor: function(questions) { + return (questions.primaryColor); + }, + secondaryColor: function(questions) { + return (questions.secondaryColor); + } +}; + +/******************************* + Response Filters +*******************************/ + +/* Filters to user input from install questions */ + +var filter = { + removeTrailingSlash: function(path) { + return path.replace(/(\/$|\\$)+/mg, ''); + } +}; + +/******************************* + Configuration +*******************************/ + +module.exports = { + + // check whether install is setup + isSetup: function() { + return when.hasConfig(); + }, + + // detect whether there is a semantic.json configuration and that the auto-install option is set to true + shouldAutoInstall: function() { + var + config = when.hasConfig() + ; + return config['autoInstall']; + }, + + // checks if files are in a PM directory + getPackageManager: function(directory) { + var + // returns last matching result (avoid sub-module detection) + walk = function(directory) { + var + pathArray = directory.split(path.sep), + folder = pathArray[pathArray.length - 1], + nextDirectory = path.join(directory, path.sep, '..') + ; + if( folder == 'bower_components') { + return { + name: 'Bower', + root: nextDirectory + }; + } + else if(folder == 'node_modules') { + return { + name: 'NPM', + root: nextDirectory + }; + } + else if(folder == 'composer') { + return { + name: 'Composer', + root: nextDirectory + }; + } + if(path.resolve(directory) == path.resolve(nextDirectory)) { + return false; + } + // recurse downward + return walk(nextDirectory); + } + ; + // start walk from current directory if none specified + directory = directory || (__dirname + path.sep); + return walk(directory); + }, + + // checks if files is PMed submodule + isSubModule: function(directory) { + var + moduleFolders = 0, + walk = function(directory) { + var + pathArray = directory.split(path.sep), + folder = pathArray[pathArray.length - 2], + nextDirectory = path.join(directory, path.sep, '..') + ; + if( folder == 'bower_components') { + moduleFolders++; + } + else if(folder == 'node_modules') { + moduleFolders++; + } + else if(folder == 'composer') { + moduleFolders++; + } + if(path.resolve(directory) == path.resolve(nextDirectory)) { + return (moduleFolders > 1); + } + // recurse downward + return walk(nextDirectory); + } + ; + // start walk from current directory if none specified + directory = directory || (__dirname + path.sep); + return walk(directory); + }, + + + createJSON: function(answers) { + var + json = { + paths: { + source: {}, + output: {} + } + } + ; + + // add components + if(answers.components) { + json.components = answers.components; + } + + // add rtl choice + if(answers.rtl) { + json.rtl = answers.rtl; + } + + // add permissions + if(answers.permission) { + json.permission = answers.permission; + } + + // add path to semantic + if(answers.semanticRoot) { + json.base = path.normalize(answers.semanticRoot); + } + + // record version number to avoid re-installing on same version + json.version = release.version; + + // add dist folder paths + if(answers.dist) { + answers.dist = path.normalize(answers.dist); + + json.paths.output = { + packaged : path.normalize(answers.dist + '/'), + uncompressed : path.normalize(answers.dist + '/components/'), + compressed : path.normalize(answers.dist + '/components/'), + themes : path.normalize(answers.dist + '/themes/') + }; + } + + // add site path + if(answers.site) { + json.paths.source.site = path.normalize(answers.site + '/'); + } + if(answers.packaged) { + json.paths.output.packaged = path.normalize(answers.packaged + '/'); + } + if(answers.compressed) { + json.paths.output.compressed = path.normalize(answers.compressed + '/'); + } + if(answers.uncompressed) { + json.paths.output.uncompressed = path.normalize(answers.uncompressed + '/'); + } + return json; + }, + + // files cleaned up after install + setupFiles: [ + './src/theme.config.example', + './semantic.json.example', + './src/_site' + ], + + regExp: { + // used to match siteFolder variable in theme.less + siteVariable: /@siteFolder .*\'(.*)/mg + }, + + // source paths (when installing) + source: { + config : './semantic.json.example', + definitions : './src/definitions', + gulpFile : './gulpfile.js', + lessImport : './src/semantic.less', + site : './src/_site', + tasks : './tasks', + themeConfig : './src/theme.config.example', + themeImport : './src/theme.less', + themes : './src/themes', + defaultTheme : './src/themes/default', + userGulpFile : './tasks/config/npm/gulpfile.js' + }, + + // expected final filenames + files: { + config : 'semantic.json', + lessImport : 'src/semantic.less', + site : 'src/site', + themeConfig : 'src/theme.config', + themeImport : 'src/theme.less' + }, + + // folder paths to files relative to root + folders: { + config : './', + definitions : 'src/definitions/', + lessImport : 'src/', + modules : 'node_modules/', + site : 'src/site/', + tasks : 'tasks/', + themeConfig : 'src/', + themeImport : 'src/', + themes : 'src/themes/', + + defaultTheme : 'default/' // only path that is relative to another directory and not root + }, + + // questions asked during install + questions: { + + root: [ + { + type : 'list', + name : 'useRoot', + message : + '{packageMessage} Is this your project folder? {root}', + choices: [ + { + name : 'Yes', + value : true + }, + { + name : 'No, let me specify', + value : false + } + ] + }, + { + type : 'input', + name : 'customRoot', + message : 'Please enter the absolute path to your project root', + default : '/my/project/path', + when : when.changeRoot + }, + { + type : 'input', + name : 'semanticRoot', + message : 'Where should we put Semantic UI inside your project?', + default : 'semantic/' + } + ], + + setup: [ + { + type: 'list', + name: 'overwrite', + message: 'It looks like you have a semantic.json file already.', + when: when.hasConfig, + choices: [ + { + name: 'Yes, extend my current settings.', + value: 'yes' + }, + { + name: 'Skip install', + value: 'no' + } + ] + }, + { + type: 'list', + name: 'install', + message: 'Set-up Semantic UI', + when: when.allowOverwrite, + choices: [ + { + name: 'Automatic (Use default locations and all components)', + value: 'auto' + }, + { + name: 'Express (Set components and output folder)', + value: 'express' + }, + { + name: 'Custom (Customize all src/dist values)', + value: 'custom' + } + ] + }, + { + type: 'checkbox', + name: 'components', + message: 'What components should we include in the package?', + + // duplicated manually from tasks/defaults.js with additional property + choices: [ + { name: "reset", checked: true }, + { name: "site", checked: true }, + { name: "button", checked: true }, + { name: "container", checked: true }, + { name: "divider", checked: true }, + { name: "flag", checked: true }, + { name: "header", checked: true }, + { name: "icon", checked: true }, + { name: "image", checked: true }, + { name: "input", checked: true }, + { name: "label", checked: true }, + { name: "list", checked: true }, + { name: "loader", checked: true }, + { name: "placeholder", checked: true }, + { name: "rail", checked: true }, + { name: "reveal", checked: true }, + { name: "segment", checked: true }, + { name: "step", checked: true }, + { name: "breadcrumb", checked: true }, + { name: "form", checked: true }, + { name: "grid", checked: true }, + { name: "menu", checked: true }, + { name: "message", checked: true }, + { name: "table", checked: true }, + { name: "ad", checked: true }, + { name: "card", checked: true }, + { name: "comment", checked: true }, + { name: "feed", checked: true }, + { name: "item", checked: true }, + { name: "statistic", checked: true }, + { name: "accordion", checked: true }, + { name: "checkbox", checked: true }, + { name: "dimmer", checked: true }, + { name: "dropdown", checked: true }, + { name: "embed", checked: true }, + { name: "modal", checked: true }, + { name: "nag", checked: true }, + { name: "popup", checked: true }, + { name: "progress", checked: true }, + { name: "rating", checked: true }, + { name: "search", checked: true }, + { name: "shape", checked: true }, + { name: "sidebar", checked: true }, + { name: "sticky", checked: true }, + { name: "tab", checked: true }, + { name: "transition", checked: true }, + { name: "api", checked: true }, + { name: "form", checked: true }, + { name: "state", checked: true }, + { name: "visibility", checked: true } + ], + when: when.notAuto + }, + { + type: 'list', + name: 'changePermissions', + when: when.notAuto, + message: 'Should we set permissions on outputted files?', + choices: [ + { + name: 'No', + value: false + }, + { + name: 'Yes', + value: true + } + ] + }, + { + type: 'input', + name: 'permission', + message: 'What octal file permission should outputted files receive?', + default: defaults.permission, + when: when.changePermissions + }, + { + type: 'list', + name: 'rtl', + message: 'Do you use a RTL (Right-To-Left) language?', + when: when.notAuto, + choices: [ + { + name: 'No', + value: false + }, + { + name: 'Yes', + value: true + }, + { + name: 'Build Both', + value: 'both' + } + ] + }, + { + type: 'input', + name: 'dist', + message: 'Where should we output Semantic UI?', + default: defaults.paths.output.packaged, + filter: filter.removeTrailingSlash, + when: when.express + }, + { + type: 'input', + name: 'site', + message: 'Where should we put your site folder?', + default: defaults.paths.source.site, + filter: filter.removeTrailingSlash, + when: when.custom + }, + { + type: 'input', + name: 'packaged', + message: 'Where should we output a packaged version?', + default: defaults.paths.output.packaged, + filter: filter.removeTrailingSlash, + when: when.custom + }, + { + type: 'input', + name: 'compressed', + message: 'Where should we output compressed components?', + default: defaults.paths.output.compressed, + filter: filter.removeTrailingSlash, + when: when.custom + }, + { + type: 'input', + name: 'uncompressed', + message: 'Where should we output uncompressed components?', + default: defaults.paths.output.uncompressed, + filter: filter.removeTrailingSlash, + when: when.custom + } + ], + + + cleanup: [ + { + type: 'list', + name: 'cleanup', + message: 'Should we remove set-up files?', + choices: [ + { + name: 'Yes (re-install will require redownloading semantic).', + value: 'yes' + }, + { + name: 'No Thanks', + value: 'no' + } + ] + }, + { + type: 'list', + name: 'build', + message: 'Do you want to build Semantic now?', + choices: [ + { + name: 'Yes', + value: 'yes' + }, + { + name: 'No', + value: 'no' + } + ] + }, + ], + site: [ + { + type: 'list', + name: 'customize', + message: 'You have not yet customized your site, can we help you do that?', + choices: [ + { + name: 'Yes, ask me a few questions', + value: true + }, + { + name: 'No I\'ll do it myself', + value: false + } + ] + }, + { + type: 'list', + name: 'headerFont', + message: 'Select your header font', + choices: [ + { + name: 'Helvetica Neue, Arial, sans-serif', + value: 'Helvetica Neue, Arial, sans-serif;' + }, + { + name: 'Lato (Google Fonts)', + value: 'Lato' + }, + { + name: 'Open Sans (Google Fonts)', + value: 'Open Sans' + }, + { + name: 'Source Sans Pro (Google Fonts)', + value: 'Source Sans Pro' + }, + { + name: 'Droid (Google Fonts)', + value: 'Droid' + }, + { + name: 'I\'ll choose on my own', + value: false + } + ], + when: when.customize + }, + { + type: 'list', + name: 'pageFont', + message: 'Select your page font', + choices: [ + { + name: 'Helvetica Neue, Arial, sans-serif', + value: 'Helvetica Neue, Arial, sans-serif;' + }, + { + name: 'Lato (Import from Google Fonts)', + value: 'Lato' + }, + { + name: 'Open Sans (Import from Google Fonts)', + value: 'Open Sans' + }, + { + name: 'Source Sans Pro (Import from Google Fonts)', + value: 'Source Sans Pro' + }, + { + name: 'Droid (Google Fonts)', + value: 'Droid' + }, + { + name: 'I\'ll choose on my own', + value: false + } + ], + when: when.customize + }, + { + type: 'list', + name: 'fontSize', + message: 'Select your base font size', + default: '14px', + choices: [ + { + name: '12px', + }, + { + name: '13px', + }, + { + name: '14px (Recommended)', + value: '14px' + }, + { + name: '15px', + }, + { + name: '16px', + }, + { + name: 'I\'ll choose on my own', + value: false + } + ], + when: when.customize + }, + { + type: 'list', + name: 'primaryColor', + message: 'Select the closest name for your primary brand color', + default: '14px', + choices: [ + { + name: 'Blue' + }, + { + name: 'Green' + }, + { + name: 'Orange' + }, + { + name: 'Pink' + }, + { + name: 'Purple' + }, + { + name: 'Red' + }, + { + name: 'Teal' + }, + { + name: 'Yellow' + }, + { + name: 'Black' + }, + { + name: 'I\'ll choose on my own', + value: false + } + ], + when: when.customize + }, + { + type: 'input', + name: 'PrimaryHex', + message: 'Enter a hexcode for your primary brand color', + when: when.primaryColor + }, + { + type: 'list', + name: 'secondaryColor', + message: 'Select the closest name for your secondary brand color', + default: '14px', + choices: [ + { + name: 'Blue' + }, + { + name: 'Green' + }, + { + name: 'Orange' + }, + { + name: 'Pink' + }, + { + name: 'Purple' + }, + { + name: 'Red' + }, + { + name: 'Teal' + }, + { + name: 'Yellow' + }, + { + name: 'Black' + }, + { + name: 'I\'ll choose on my own', + value: false + } + ], + when: when.customize + }, + { + type: 'input', + name: 'secondaryHex', + message: 'Enter a hexcode for your secondary brand color', + when: when.secondaryColor + } + ] + + }, + + settings: { + + /* Rename Files */ + rename: { + json : { extname : '.json' } + }, + + /* Copy Install Folders */ + wrench: { + + // overwrite existing files update & install (default theme / definition) + overwrite: { + forceDelete : true, + excludeHiddenUnix : true, + preserveFiles : false + }, + + // only create files that don't exist (site theme update) + merge: { + forceDelete : false, + excludeHiddenUnix : true, + preserveFiles : true + } + + } + } +}; diff --git a/static/semantic/tasks/config/project/release.js b/static/semantic/tasks/config/project/release.js new file mode 100755 index 0000000..865811d --- /dev/null +++ b/static/semantic/tasks/config/project/release.js @@ -0,0 +1,65 @@ +/******************************* + Release Config +*******************************/ + +var + requireDotFile = require('require-dot-file'), + config, + npmPackage, + version +; + + +/******************************* + Derived Values +*******************************/ + +try { + config = requireDotFile('semantic.json'); +} +catch(error) {} + + +try { + npmPackage = require('../../../package.json'); +} +catch(error) { + // generate fake package + npmPackage = { + name: 'Unknown', + version: 'x.x' + }; +} + +// looks for version in config or package.json (whichever is available) +version = (npmPackage && npmPackage.version !== undefined && npmPackage.name == 'semantic-ui') + ? npmPackage.version + : config.version +; + + +/******************************* + Export +*******************************/ + +module.exports = { + + title : 'Semantic UI', + repository : 'https://github.com/Semantic-Org/Semantic-UI', + url : 'http://www.semantic-ui.com/', + + banner: '' + + ' /*' + '\n' + + ' * # <%= title %> - <%= version %>' + '\n' + + ' * <%= repository %>' + '\n' + + ' * <%= url %>' + '\n' + + ' *' + '\n' + + ' * Copyright 2014 Contributors' + '\n' + + ' * Released under the MIT license' + '\n' + + ' * http://opensource.org/licenses/MIT' + '\n' + + ' *' + '\n' + + ' */' + '\n', + + version : version + +}; diff --git a/static/semantic/tasks/config/tasks.js b/static/semantic/tasks/config/tasks.js new file mode 100755 index 0000000..f9db191 --- /dev/null +++ b/static/semantic/tasks/config/tasks.js @@ -0,0 +1,170 @@ +var + console = require('better-console'), + config = require('./user'), + release = require('./project/release') +; + + +module.exports = { + + banner : release.banner, + + log: { + created: function(file) { + return 'Created: ' + file; + }, + modified: function(file) { + return 'Modified: ' + file; + } + }, + + filenames: { + concatenatedCSS : 'semantic.css', + concatenatedJS : 'semantic.js', + concatenatedMinifiedCSS : 'semantic.min.css', + concatenatedMinifiedJS : 'semantic.min.js', + concatenatedRTLCSS : 'semantic.rtl.css', + concatenatedMinifiedRTLCSS : 'semantic.rtl.min.css' + }, + + regExp: { + + comments: { + + // remove all comments from config files (.variable) + variables : { + in : /(\/\*[\s\S]+?\*\/+)[\s\S]+?\/\* End Config \*\//, + out : '$1', + }, + + // add version to first comment + license: { + in : /(^\/\*[\s\S]+)(# Semantic UI )([\s\S]+?\*\/)/, + out : '$1$2' + release.version + ' $3' + }, + + // adds uniform spacing around comments + large: { + in : /(\/\*\*\*\*[\s\S]+?\*\/)/mg, + out : '\n\n$1\n' + }, + small: { + in : /(\/\*---[\s\S]+?\*\/)/mg, + out : '\n$1\n' + }, + tiny: { + in : /(\/\* [\s\S]+? \*\/)/mg, + out : '\n$1' + } + }, + + theme: /.*(\/|\\)themes(\/|\\).*?(?=(\/|\\))/mg + + }, + + settings: { + + /* Remove Files in Clean */ + del: { + silent : true + }, + + concatCSS: { + rebaseUrls: false + }, + + /* Comment Banners */ + header: { + title : release.title, + version : release.version, + repository : release.repository, + url : release.url + }, + + plumber: { + less: { + errorHandler: function(error) { + var + regExp = { + variable : /@(\S.*?)\s/, + theme : /themes[\/\\]+(.*?)[\/\\].*/, + element : /[\/\\]([^\/\\*]*)\.overrides/ + }, + theme, + element + ; + if(error.filename.match(/theme.less/)) { + if(error.line == 5) { + element = regExp.variable.exec(error.message)[1]; + if(element) { + console.error('Missing theme.config value for ', element); + } + console.error('Most likely new UI was added in an update. You will need to add missing elements from theme.config.example'); + } + if(error.line == 46) { + element = regExp.element.exec(error.message)[1]; + theme = regExp.theme.exec(error.message)[1]; + console.error(theme + ' is not an available theme for ' + element); + } + } + else { + console.log(error); + } + this.emit('end'); + } + } + }, + + /* What Browsers to Prefix */ + prefix: { + browsers: [ + 'last 2 versions', + '> 1%', + 'opera 12.1', + 'bb 10', + 'android 4' + ] + }, + + /* File Renames */ + rename: { + minJS : { extname : '.min.js' }, + minCSS : { extname : '.min.css' }, + rtlCSS : { extname : '.rtl.css' }, + rtlMinCSS : { extname : '.rtl.min.css' } + }, + + /* Minified CSS Concat */ + minify: { + processImport : false, + restructuring : false, + keepSpecialComments : 1, + roundingPrecision : -1, + }, + + /* Minified JS Settings */ + uglify: { + mangle : true, + output: { + comments: 'some' + } + }, + + /* Minified Concat CSS Settings */ + concatMinify: { + processImport : false, + restructuring : false, + keepSpecialComments : false, + roundingPrecision : -1, + }, + + /* Minified Concat JS */ + concatUglify: { + mangle : true, + output: { + comments: 'some' + } + } + + } +}; diff --git a/static/semantic/tasks/config/user.js b/static/semantic/tasks/config/user.js new file mode 100755 index 0000000..7b7c16d --- /dev/null +++ b/static/semantic/tasks/config/user.js @@ -0,0 +1,58 @@ +/******************************* + Set-up +*******************************/ + +var + // npm dependencies + extend = require('extend'), + fs = require('fs'), + path = require('path'), + requireDotFile = require('require-dot-file'), + + // semantic.json defaults + defaults = require('./defaults'), + config = require('./project/config'), + + // Final config object + gulpConfig = {}, + + // semantic.json settings + userConfig + +; + + +/******************************* + User Config +*******************************/ + +try { + // looks for config file across all parent directories + userConfig = requireDotFile('semantic.json'); +} +catch(error) { + if(error.code === 'MODULE_NOT_FOUND') { + console.error('No semantic.json config found'); + } +} + +// extend user config with defaults +gulpConfig = (!userConfig) + ? extend(true, {}, defaults) + : extend(false, {}, defaults, userConfig) +; + +/******************************* + Add Derived Values +*******************************/ + +// adds calculated values +config.addDerivedValues(gulpConfig); + + +/******************************* + Export +*******************************/ + +module.exports = gulpConfig; + diff --git a/static/semantic/tasks/docs/build.js b/static/semantic/tasks/docs/build.js new file mode 100755 index 0000000..8d401b5 --- /dev/null +++ b/static/semantic/tasks/docs/build.js @@ -0,0 +1,189 @@ +/******************************* + Build Docs +*******************************/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + map = require('map-stream'), + + // gulp dependencies + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + flatten = require('gulp-flatten'), + gulpif = require('gulp-if'), + header = require('gulp-header'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + uglify = require('gulp-uglify'), + + // user config + config = require('../config/docs'), + + // install config + tasks = require('../config/tasks'), + configSetup = require('../config/project/config'), + install = require('../config/project/install'), + + // metadata parsing + metadata = require('./metadata'), + + // shorthand + globs, + assets, + output, + source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings +; + +// add internal tasks (concat release) +require('../collections/internal')(gulp); + +module.exports = function(callback) { + + var + stream, + compressedStream, + uncompressedStream + ; + + // use a different config + config = configSetup.addDerivedValues(config); + + // shorthand + globs = config.globs; + assets = config.paths.assets; + output = config.paths.output; + source = config.paths.source; + + /*-------------- + Parse metadata + ---------------*/ + + // parse all *.html.eco in docs repo, data will end up in + // metadata.result object. Note this assumes that the docs + // repository is present and in proper directory location as + // specified by docs.json. + console.info('Building Metadata'); + gulp.src(config.paths.template.eco + globs.eco) + .pipe(map(metadata.parser)) + .on('end', function() { + fs.writeFile(output.metadata + '/metadata.json', JSON.stringify(metadata.result, null, 2)); + }) + ; + + /*-------------- + Copy Examples + ---------------*/ + + console.info('Copying examples'); + // copy src/ to server + gulp.src('examples/**/*.*') + .pipe(gulp.dest(output.examples)) + .pipe(print(log.created)) + ; + + /*-------------- + Copy Source + ---------------*/ + + console.info('Copying LESS source'); + // copy src/ to server + gulp.src('src/**/*.*') + .pipe(gulp.dest(output.less)) + .pipe(print(log.created)) + ; + + /*-------------- + Build + ---------------*/ + + console.info('Building Semantic for docs'); + + if( !install.isSetup() ) { + console.error('Cannot build files. Run "gulp install" to set-up Semantic'); + return; + } + + // unified css stream + stream = gulp.src(source.definitions + '/**/' + globs.components + '.less') + .pipe(plumber()) + .pipe(less(settings.less)) + .pipe(autoprefixer(settings.prefix)) + .pipe(flatten()) + ; + + // two concurrent streams from same source to concat release + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + uncompressedStream + .pipe(plumber()) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package uncompressed docs css'); + }) + ; + + compressedStream + .pipe(plumber()) + .pipe(clone()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.minCSS)) + .pipe(header(banner, settings.header)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + callback(); + gulp.start('package compressed docs css'); + }) + ; + + // copy assets + gulp.src(source.themes + '/**/assets/**/*.*') + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + ; + + // copy source javascript + gulp.src(source.definitions + '/**/' + globs.components + '.js') + .pipe(plumber()) + .pipe(flatten()) + .pipe(gulp.dest(output.uncompressed)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.compressed)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed docs js'); + gulp.start('package uncompressed docs js'); + }) + ; + +}; diff --git a/static/semantic/tasks/docs/metadata.js b/static/semantic/tasks/docs/metadata.js new file mode 100755 index 0000000..bfc8630 --- /dev/null +++ b/static/semantic/tasks/docs/metadata.js @@ -0,0 +1,138 @@ + +/******************************* + Summarize Docs +*******************************/ + +var + // node dependencies + console = require('better-console'), + fs = require('fs'), + YAML = require('yamljs') +; + +var data = {}; + +/** + * Test for prefix in string. + * @param {string} str + * @param {string} prefix + * @return {boolean} + */ +function startsWith(str, prefix) { + return str.indexOf(prefix) === 0; +}; + +function inArray(needle, haystack) { + var length = haystack.length; + for(var i = 0; i < length; i++) { + if(haystack[i] == needle) return true; + } + return false; +} + +/** + * Parses a file for metadata and stores result in data object. + * @param {File} file - object provided by map-stream. + * @param {function(?,File)} - callback provided by map-stream to + * reply when done. + */ +function parser(file, callback) { + // file exit conditions + if(file.isNull()) { + return callback(null, file); // pass along + } + + if(file.isStream()) { + return callback(new Error('Streaming not supported')); + } + + try { + + var + /** @type {string} */ + text = String(file.contents.toString('utf8')), + lines = text.split('\n'), + filename = file.path.substring(0, file.path.length - 4), + key = 'server/documents', + position = filename.indexOf(key) + ; + + // exit conditions + if(!lines) { + return; + } + if(position < 0) { + return callback(null, file); + } + + filename = filename.substring(position + key.length + 1, filename.length); + + var + lineCount = lines.length, + active = false, + yaml = [], + categories = [ + 'UI Element', + 'UI Global', + 'UI Collection', + 'UI View', + 'UI Module', + 'UI Behavior' + ], + index, + meta, + line + ; + + for(index = 0; index < lineCount; index++) { + + line = lines[index]; + + // Wait for metadata block to begin + if(!active) { + if(startsWith(line, '---')) { + active = true; + } + continue; + } + // End of metadata block, stop parsing. + if(startsWith(line, '---')) { + break; + } + yaml.push(line); + } + + + // Parse yaml. + meta = YAML.parse(yaml.join('\n')); + if(meta && meta.type && meta.title && inArray(meta.type, categories) ) { + meta.category = meta.type; + meta.filename = filename; + meta.url = '/' + filename; + meta.title = meta.title; + // Primary key will by filepath + data[meta.element] = meta; + } + else { + // skip + // console.log(meta); + } + + + } + + catch(error) { + console.log(error, filename); + } + + callback(null, file); + +} + +/** + * Export function expected by map-stream. + */ +module.exports = { + result : data, + parser : parser +}; diff --git a/static/semantic/tasks/docs/serve.js b/static/semantic/tasks/docs/serve.js new file mode 100755 index 0000000..6cfd3d7 --- /dev/null +++ b/static/semantic/tasks/docs/serve.js @@ -0,0 +1,255 @@ +/******************************* + Serve Docs +*******************************/ +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + + // gulp dependencies + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + gulpif = require('gulp-if'), + header = require('gulp-header'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + uglify = require('gulp-uglify'), + replaceExt = require('replace-ext'), + watch = require('gulp-watch'), + + // user config + config = require('../config/docs'), + + // task config + tasks = require('../config/tasks'), + configSetup = require('../config/project/config'), + install = require('../config/project/install'), + + // shorthand + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings, + + globs, + assets, + output, + source +; + +require('../collections/internal')(gulp); + +module.exports = function () { + + // use a different config + config = configSetup.addDerivedValues(config); + + // shorthand + globs = config.globs; + assets = config.paths.assets; + output = config.paths.output; + source = config.paths.source; + + + /*-------------- + Copy Source + ---------------*/ + + gulp + .watch([ + 'src/**/*.*' + ], function(file) { + console.clear(); + return gulp.src(file.path, { + base: 'src/' + }) + .pipe(gulp.dest(output.less)) + .pipe(print(log.created)) + ; + }) + ; + + /*-------------- + Copy Examples + ---------------*/ + + gulp + .watch([ + 'examples/**/*.*' + ], function(file) { + console.clear(); + return gulp.src(file.path, { + base: 'examples/' + }) + .pipe(gulp.dest(output.examples)) + .pipe(print(log.created)) + ; + }) + ; + + /*-------------- + Watch CSS + ---------------*/ + + gulp + .watch([ + source.config, + source.definitions + '/**/*.less', + source.site + '/**/*.{overrides,variables}', + source.themes + '/**/*.{overrides,variables}' + ], function(file) { + + var + lessPath, + + stream, + compressedStream, + uncompressedStream, + + isDefinition, + isPackagedTheme, + isSiteTheme, + isConfig + ; + + // log modified file + gulp.src(file.path) + .pipe(print(log.modified)) + ; + + /*-------------- + Find Source + ---------------*/ + + // recompile on *.override , *.variable change + isConfig = (file.path.indexOf('theme.config') !== -1 || file.path.indexOf('site.variables') !== -1); + isPackagedTheme = (file.path.indexOf(source.themes) !== -1); + isSiteTheme = (file.path.indexOf(source.site) !== -1); + isDefinition = (file.path.indexOf(source.definitions) !== -1); + + if(isConfig) { + // console.info('Rebuilding all files'); + // cant rebuild paths are wrong + // gulp.start('build-docs'); + return; + } + else if(isPackagedTheme) { + console.log('Change detected in packaged theme'); + lessPath = replaceExt(file.path, '.less'); + lessPath = lessPath.replace(tasks.regExp.theme, source.definitions); + } + else if(isSiteTheme) { + console.log('Change detected in site theme'); + lessPath = replaceExt(file.path, '.less'); + lessPath = lessPath.replace(source.site, source.definitions); + } + else { + console.log('Change detected in definition'); + lessPath = file.path; + } + + /*-------------- + Create CSS + ---------------*/ + + if( fs.existsSync(lessPath) ) { + + // unified css stream + stream = gulp.src(lessPath) + .pipe(plumber()) + .pipe(less(settings.less)) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(autoprefixer(settings.prefix)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + ; + + // use 2 concurrent streams from same pipe + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + uncompressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package uncompressed docs css'); + }) + ; + + compressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.minCSS)) + .pipe(header(banner, settings.header)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed docs css'); + }) + ; + + } + else { + console.log('Cannot find UI definition at path', lessPath); + } + }) + ; + + /*-------------- + Watch JS + ---------------*/ + + gulp + .watch([ + source.definitions + '/**/*.js' + ], function(file) { + gulp.src(file.path) + .pipe(plumber()) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed docs js'); + gulp.start('package uncompressed docs js'); + }) + ; + }) + ; + + /*-------------- + Watch Assets + ---------------*/ + + // only copy assets that match component names (or their plural) + gulp + .watch([ + source.themes + '/**/assets/**/' + globs.components + '?(s).*' + ], function(file) { + // copy assets + gulp.src(file.path, { base: source.themes }) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + .pipe(print(log.created)) + ; + }) + ; + + +}; diff --git a/static/semantic/tasks/install.js b/static/semantic/tasks/install.js new file mode 100755 index 0000000..ca05625 --- /dev/null +++ b/static/semantic/tasks/install.js @@ -0,0 +1,459 @@ +/******************************* + Install Task +*******************************/ + +/* + Install tasks + + For more notes + + * Runs automatically after npm update (hooks) + * (NPM) Install - Will ask for where to put semantic (outside pm folder) + * (NPM) Upgrade - Will look for semantic install, copy over files and update if new version + * Standard installer runs asking for paths to site files etc + +*/ + +var + gulp = require('gulp'), + + // node dependencies + console = require('better-console'), + extend = require('extend'), + fs = require('fs'), + mkdirp = require('mkdirp'), + path = require('path'), + runSequence = require('run-sequence'), + + // gulp dependencies + chmod = require('gulp-chmod'), + del = require('del'), + jsonEditor = require('gulp-json-editor'), + plumber = require('gulp-plumber'), + prompt = require('prompt-sui'), + rename = require('gulp-rename'), + replace = require('gulp-replace'), + requireDotFile = require('require-dot-file'), + wrench = require('wrench-sui'), + + // install config + install = require('./config/project/install'), + + // user config + config = require('./config/user'), + + // release config (name/title/etc) + release = require('./config/project/release'), + + // shorthand + questions = install.questions, + files = install.files, + folders = install.folders, + regExp = install.regExp, + settings = install.settings, + source = install.source +; + +// Export install task +module.exports = function (callback) { + +var + currentConfig = requireDotFile('semantic.json'), + manager = install.getPackageManager(), + rootQuestions = questions.root, + installFolder = false, + answers +; + +console.clear(); + +/* Test NPM install +manager = { + name : 'NPM', + root : path.normalize(__dirname + '/../') +}; +*/ + + +/* Don't do end user config if SUI is a sub-module */ +if( install.isSubModule() ) { + console.info('SUI is a sub-module, skipping end-user install'); + return; +} + +/*----------------- + Update SUI +-----------------*/ + +// run update scripts if semantic.json exists +if(currentConfig && manager.name === 'NPM') { + + var + updateFolder = path.join(manager.root, currentConfig.base), + updatePaths = { + config : path.join(manager.root, files.config), + tasks : path.join(updateFolder, folders.tasks), + themeImport : path.join(updateFolder, folders.themeImport), + definition : path.join(currentConfig.paths.source.definitions), + site : path.join(currentConfig.paths.source.site), + theme : path.join(currentConfig.paths.source.themes), + defaultTheme : path.join(currentConfig.paths.source.themes, folders.defaultTheme) + } + ; + + // duck-type if there is a project installed + if( fs.existsSync(updatePaths.definition) ) { + + // perform update if new version + if(currentConfig.version !== release.version) { + console.log('Updating Semantic UI from ' + currentConfig.version + ' to ' + release.version); + + console.info('Updating ui definitions...'); + wrench.copyDirSyncRecursive(source.definitions, updatePaths.definition, settings.wrench.overwrite); + + console.info('Updating default theme...'); + wrench.copyDirSyncRecursive(source.themes, updatePaths.theme, settings.wrench.merge); + wrench.copyDirSyncRecursive(source.defaultTheme, updatePaths.defaultTheme, settings.wrench.overwrite); + + console.info('Updating tasks...'); + wrench.copyDirSyncRecursive(source.tasks, updatePaths.tasks, settings.wrench.overwrite); + + console.info('Updating gulpfile.js'); + gulp.src(source.userGulpFile) + .pipe(plumber()) + .pipe(gulp.dest(updateFolder)) + ; + + // copy theme import + console.info('Updating theme import file'); + gulp.src(source.themeImport) + .pipe(plumber()) + .pipe(gulp.dest(updatePaths.themeImport)) + ; + + console.info('Adding new site theme files...'); + wrench.copyDirSyncRecursive(source.site, updatePaths.site, settings.wrench.merge); + + console.info('Updating version...'); + + // update version number in semantic.json + gulp.src(updatePaths.config) + .pipe(plumber()) + .pipe(rename(settings.rename.json)) // preserve file extension + .pipe(jsonEditor({ + version: release.version + })) + .pipe(gulp.dest(manager.root)) + ; + + console.info('Update complete! Run "\x1b[92mgulp build\x1b[0m" to rebuild dist/ files.'); + + return; + } + else { + console.log('Current version of Semantic UI already installed'); + return; + } + + } + else { + console.error('Cannot locate files to update at path: ', updatePaths.definition); + console.log('Running installer'); + } + +} + +/*-------------- + Determine Root +---------------*/ + +// PM that supports Build Tools (NPM Only Now) +if(manager.name == 'NPM') { + rootQuestions[0].message = rootQuestions[0].message + .replace('{packageMessage}', 'We detected you are using ' + manager.name + ' Nice!') + .replace('{root}', manager.root) + ; + // set default path to detected PM root + rootQuestions[0].default = manager.root; + rootQuestions[1].default = manager.root; + + // insert PM questions after "Install Type" question + Array.prototype.splice.apply(questions.setup, [2, 0].concat(rootQuestions)); + + // omit cleanup questions for managed install + questions.cleanup = []; +} + + +/*-------------- + Create SUI +---------------*/ + +gulp.task('run setup', function() { + + // If auto-install is switched on, we skip the configuration section and simply reuse the configuration from semantic.json + if(install.shouldAutoInstall()) { + answers = { + overwrite : 'yes', + install : 'auto', + useRoot : true, + semanticRoot : currentConfig.base + }; + } + else { + return gulp + .src('gulpfile.js') + .pipe(prompt.prompt(questions.setup, function(setupAnswers) { + // hoist + answers = setupAnswers; + })) + ; + } +}); + +gulp.task('create install files', function(callback) { + + /*-------------- + Exit Conditions + ---------------*/ + + // if config exists and user specifies not to proceed + if(answers.overwrite !== undefined && answers.overwrite == 'no') { + return; + } + console.clear(); + if(install.shouldAutoInstall()) { + console.log('Auto-Installing (Without User Interaction)'); + } + else { + console.log('Installing'); + } + console.log('------------------------------'); + + + /*-------------- + Paths + ---------------*/ + + var + installPaths = { + config : files.config, + configFolder : folders.config, + site : answers.site || folders.site, + themeConfig : files.themeConfig, + themeConfigFolder : folders.themeConfig + } + ; + + /*-------------- + NPM Install + ---------------*/ + + // Check if PM install + if(manager && (answers.useRoot || answers.customRoot)) { + + // Set root to custom root path if set + if(answers.customRoot) { + if(answers.customRoot === '') { + console.log('Unable to proceed, invalid project root'); + return; + } + manager.root = answers.customRoot; + } + + // special install paths only for PM install + installPaths = extend(false, {}, installPaths, { + definition : folders.definitions, + lessImport : folders.lessImport, + tasks : folders.tasks, + theme : folders.themes, + defaultTheme : path.join(folders.themes, folders.defaultTheme), + themeImport : folders.themeImport + }); + + // add project root to semantic root + installFolder = path.join(manager.root, answers.semanticRoot); + + // add install folder to all output paths + for(var destination in installPaths) { + if( installPaths.hasOwnProperty(destination) ) { + // config goes in project root, rest in install folder + installPaths[destination] = (destination == 'config' || destination == 'configFolder') + ? path.normalize( path.join(manager.root, installPaths[destination]) ) + : path.normalize( path.join(installFolder, installPaths[destination]) ) + ; + } + } + + // create project folders + try { + mkdirp.sync(installFolder); + mkdirp.sync(installPaths.definition); + mkdirp.sync(installPaths.theme); + mkdirp.sync(installPaths.tasks); + } + catch(error) { + console.error('NPM does not have permissions to create folders at your specified path. Adjust your folders permissions and run "npm install" again'); + } + + console.log('Installing to \x1b[92m' + answers.semanticRoot + '\x1b[0m'); + + console.info('Copying UI definitions'); + wrench.copyDirSyncRecursive(source.definitions, installPaths.definition, settings.wrench.overwrite); + + console.info('Copying UI themes'); + wrench.copyDirSyncRecursive(source.themes, installPaths.theme, settings.wrench.merge); + wrench.copyDirSyncRecursive(source.defaultTheme, installPaths.defaultTheme, settings.wrench.overwrite); + + console.info('Copying gulp tasks'); + wrench.copyDirSyncRecursive(source.tasks, installPaths.tasks, settings.wrench.overwrite); + + // copy theme import + console.info('Adding theme files'); + gulp.src(source.themeImport) + .pipe(plumber()) + .pipe(gulp.dest(installPaths.themeImport)) + ; + gulp.src(source.lessImport) + .pipe(plumber()) + .pipe(gulp.dest(installPaths.lessImport)) + ; + + // create gulp file + console.info('Creating gulpfile.js'); + gulp.src(source.userGulpFile) + .pipe(plumber()) + .pipe(gulp.dest(installFolder)) + ; + + } + + + /*-------------- + Site Theme + ---------------*/ + + // Copy _site templates folder to destination + if( fs.existsSync(installPaths.site) ) { + console.info('Site folder exists, merging files (no overwrite)', installPaths.site); + } + else { + console.info('Creating site theme folder', installPaths.site); + } + wrench.copyDirSyncRecursive(source.site, installPaths.site, settings.wrench.merge); + + /*-------------- + Theme Config + ---------------*/ + + gulp.task('create theme.config', function() { + var + // determine path to site theme folder from theme config + // force CSS path variable to use forward slashes for paths + pathToSite = path.relative(path.resolve(installPaths.themeConfigFolder), path.resolve(installPaths.site)).replace(/\\/g,'/'), + siteVariable = "@siteFolder : '" + pathToSite + "/';" + ; + + // rewrite site variable in theme.less + console.info('Adjusting @siteFolder to: ', pathToSite + '/'); + + if(fs.existsSync(installPaths.themeConfig)) { + console.info('Modifying src/theme.config (LESS config)', installPaths.themeConfig); + return gulp.src(installPaths.themeConfig) + .pipe(plumber()) + .pipe(replace(regExp.siteVariable, siteVariable)) + .pipe(gulp.dest(installPaths.themeConfigFolder)) + ; + } + else { + console.info('Creating src/theme.config (LESS config)', installPaths.themeConfig); + return gulp.src(source.themeConfig) + .pipe(plumber()) + .pipe(rename({ extname : '' })) + .pipe(replace(regExp.siteVariable, siteVariable)) + .pipe(gulp.dest(installPaths.themeConfigFolder)) + ; + } + }); + + /*-------------- + Semantic.json + ---------------*/ + + gulp.task('create semantic.json', function() { + + var + jsonConfig = install.createJSON(answers) + ; + + // adjust variables in theme.less + if( fs.existsSync(installPaths.config) ) { + console.info('Extending config file (semantic.json)', installPaths.config); + return gulp.src(installPaths.config) + .pipe(plumber()) + .pipe(rename(settings.rename.json)) // preserve file extension + .pipe(jsonEditor(jsonConfig)) + .pipe(gulp.dest(installPaths.configFolder)) + ; + } + else { + console.info('Creating config file (semantic.json)', installPaths.config); + return gulp.src(source.config) + .pipe(plumber()) + .pipe(rename({ extname : '' })) // remove .template from ext + .pipe(jsonEditor(jsonConfig)) + .pipe(gulp.dest(installPaths.configFolder)) + ; + } + + }); + + runSequence( + 'create theme.config', + 'create semantic.json', + callback + ); + +}); + +gulp.task('clean up install', function() { + + // Completion Message + if(installFolder && !install.shouldAutoInstall()) { + console.log('\n Setup Complete! \n Installing Peer Dependencies. \x1b[0;31mPlease refrain from ctrl + c\x1b[0m... \n After completion navigate to \x1b[92m' + answers.semanticRoot + '\x1b[0m and run "\x1b[92mgulp build\x1b[0m" to build'); + process.exit(0); + } + else { + console.log(''); + console.log(''); + } + + // If auto-install is switched on, we skip the configuration section and simply build the dependencies + if(install.shouldAutoInstall()) { + return gulp.start('build'); + } + else { + return gulp + .src('gulpfile.js') + .pipe(prompt.prompt(questions.cleanup, function(answers) { + if(answers.cleanup == 'yes') { + del(install.setupFiles); + } + if(answers.build == 'yes') { + gulp.start('build'); + } + })) + ; + } + + +}); + +runSequence( + 'run setup', + 'create install files', + 'clean up install', + callback +); + +}; diff --git a/static/semantic/tasks/rtl/build.js b/static/semantic/tasks/rtl/build.js new file mode 100755 index 0000000..aaa563b --- /dev/null +++ b/static/semantic/tasks/rtl/build.js @@ -0,0 +1,132 @@ +/******************************* + Build Task +*******************************/ + +var + gulp = require('gulp'), + + // node dependencies + fs = require('fs'), + + // gulp dependencies + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + flatten = require('gulp-flatten'), + gulpif = require('gulp-if'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + rtlcss = require('gulp-rtlcss'), + uglify = require('gulp-uglify'), + + // user config + config = require('../config/user'), + + // install config + tasks = require('../config/tasks'), + install = require('../config/project/install'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings +; + +// add internal tasks (concat release) +require('../collections/internal')(gulp); + +module.exports = function(callback) { + + var + stream, + compressedStream, + uncompressedStream + ; + + console.info('Building Semantic'); + + if( !install.isSetup() ) { + console.error('Cannot build files. Run "gulp install" to set-up Semantic'); + return; + } + + // unified css stream + stream = gulp.src(source.definitions + '/**/' + globs.components + '.less') + .pipe(plumber()) + .pipe(less(settings.less)) + .pipe(autoprefixer(settings.prefix)) + .pipe(rtlcss()) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(flatten()) + ; + + // two concurrent streams from same source to concat release + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + uncompressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(rename(settings.rename.rtlCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package uncompressed rtl css'); + }) + ; + + compressedStream + .pipe(plumber()) + .pipe(clone()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.rtlMinCSS)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + callback(); + gulp.start('package compressed rtl css'); + }) + ; + + // copy assets + gulp.src(source.themes + '/**/assets/**/' + globs.components + '?(s).*') + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + ; + + // copy source javascript + gulp.src(source.definitions + '/**/' + globs.components + '.js') + .pipe(plumber()) + .pipe(flatten()) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed js'); + gulp.start('package uncompressed js'); + }) + ; + +}; diff --git a/static/semantic/tasks/rtl/watch.js b/static/semantic/tasks/rtl/watch.js new file mode 100755 index 0000000..157ba6e --- /dev/null +++ b/static/semantic/tasks/rtl/watch.js @@ -0,0 +1,221 @@ +/******************************* + Watch Task +*******************************/ + +var + gulp = require('gulp'), + + // node deps + console = require('better-console'), + fs = require('fs'), + + // gulp deps + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + gulpif = require('gulp-if'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + rtlcss = require('gulp-rtlcss'), + uglify = require('gulp-uglify'), + replaceExt = require('replace-ext'), + watch = require('gulp-watch'), + + // user config + config = require('../config/user'), + + // task config + tasks = require('../config/tasks'), + install = require('../config/project/install'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings + +; + +// add internal tasks (concat release) +require('../collections/internal')(gulp); + +module.exports = function(callback) { + + if( !install.isSetup() ) { + console.error('Cannot watch files. Run "gulp install" to set-up Semantic'); + return; + } + + console.clear(); + console.log('Watching source files for changes'); + + /*-------------- + Watch CSS + ---------------*/ + + gulp + .watch([ + source.config, + source.definitions + '/**/*.less', + source.site + '/**/*.{overrides,variables}', + source.themes + '/**/*.{overrides,variables}' + ], function(file) { + + var + lessPath, + + stream, + compressedStream, + uncompressedStream, + + isDefinition, + isPackagedTheme, + isSiteTheme, + isConfig + ; + + // log modified file + gulp.src(file.path) + .pipe(print(log.modified)) + ; + + /*-------------- + Find Source + ---------------*/ + + // recompile on *.override , *.variable change + isConfig = (file.path.indexOf('.config') !== -1); + isPackagedTheme = (file.path.indexOf(source.themes) !== -1); + isSiteTheme = (file.path.indexOf(source.site) !== -1); + isDefinition = (file.path.indexOf(source.definitions) !== -1); + + + if(isConfig) { + console.log('Change detected in theme config'); + // cant tell which theme was changed in theme.config, rebuild all + gulp.start('build'); + } + else if(isPackagedTheme) { + console.log('Change detected in packaged theme'); + lessPath = lessPath.replace(tasks.regExp.theme, source.definitions); + lessPath = replaceExt(file.path, '.less'); + } + else if(isSiteTheme) { + console.log('Change detected in site theme'); + lessPath = lessPath.replace(source.site, source.definitions); + lessPath = replaceExt(file.path, '.less'); + } + else if(isDefinition) { + console.log('Change detected in definition'); + lessPath = replaceExt(file.path, '.less'); + } + + /*-------------- + Create CSS + ---------------*/ + + if( fs.existsSync(lessPath) ) { + + // unified css stream + stream = gulp.src(lessPath) + .pipe(plumber()) + .pipe(less(settings.less)) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(autoprefixer(settings.prefix)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(rtlcss()) + ; + + // use 2 concurrent streams from same pipe + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + uncompressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(rename(settings.rename.rtlCSS)) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package uncompressed rtl css'); + }) + ; + + compressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.minCSS)) + .pipe(rename(settings.rename.rtlMinCSS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed rtl css'); + }) + ; + + } + else { + console.log('Cannot find UI definition at path', lessPath); + } + }) + ; + + /*-------------- + Watch JS + ---------------*/ + + gulp + .watch([ + source.definitions + '/**/*.js' + ], function(file) { + gulp.src(file.path) + .pipe(plumber()) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed js'); + gulp.start('package uncompressed js'); + }) + ; + }) + ; + + /*-------------- + Watch Assets + ---------------*/ + + // only copy assets that match component names (or their plural) + gulp + .watch([ + source.themes + '/**/assets/**/' + globs.components + '?(s).*' + ], function(file) { + // copy assets + gulp.src(file.path, { base: source.themes }) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + .pipe(print(log.created)) + ; + }) + ; + +}; diff --git a/static/semantic/tasks/version.js b/static/semantic/tasks/version.js new file mode 100755 index 0000000..df49f55 --- /dev/null +++ b/static/semantic/tasks/version.js @@ -0,0 +1,11 @@ +/******************************* + Version Task +*******************************/ + +var + release = require('./config/project/release') +; + +module.exports = function(callback) { + console.log(release.title + ' ' + release.version); +}; \ No newline at end of file diff --git a/static/semantic/tasks/watch.js b/static/semantic/tasks/watch.js new file mode 100755 index 0000000..168de11 --- /dev/null +++ b/static/semantic/tasks/watch.js @@ -0,0 +1,231 @@ +/******************************* + Watch Task +*******************************/ + +var + gulp = require('gulp-help')(require('gulp')), + + // node dependencies + console = require('better-console'), + fs = require('fs'), + + // gulp dependencies + autoprefixer = require('gulp-autoprefixer'), + chmod = require('gulp-chmod'), + clone = require('gulp-clone'), + gulpif = require('gulp-if'), + less = require('gulp-less'), + minifyCSS = require('gulp-clean-css'), + plumber = require('gulp-plumber'), + print = require('gulp-print').default, + rename = require('gulp-rename'), + replace = require('gulp-replace'), + uglify = require('gulp-uglify'), + replaceExt = require('replace-ext'), + watch = require('gulp-watch'), + + // user config + config = require('./config/user'), + + // task config + tasks = require('./config/tasks'), + install = require('./config/project/install'), + + // shorthand + globs = config.globs, + assets = config.paths.assets, + output = config.paths.output, + source = config.paths.source, + + banner = tasks.banner, + comments = tasks.regExp.comments, + log = tasks.log, + settings = tasks.settings + +; + +// add tasks referenced using gulp.run (sub-tasks) +if(config.rtl) { + require('./collections/rtl')(gulp); +} +require('./collections/internal')(gulp); + + +// export task +module.exports = function(callback) { + + if( !install.isSetup() ) { + console.error('Cannot watch files. Run "gulp install" to set-up Semantic'); + return; + } + + // check for right-to-left (RTL) language + if(config.rtl == 'both') { + gulp.start('watch-rtl'); + } + if(config.rtl === true || config.rtl === 'Yes') { + gulp.start('watch-rtl'); + return; + } + + //console.clear(); + console.log('Watching source files for changes'); + + /*-------------- + Watch CSS + ---------------*/ + + gulp + .watch([ + source.config, + source.definitions + '/**/*.less', + source.site + '/**/*.{overrides,variables}', + source.themes + '/**/*.{overrides,variables}' + ], function(file) { + + var + lessPath, + + stream, + compressedStream, + uncompressedStream, + + isDefinition, + isPackagedTheme, + isSiteTheme, + isConfig + ; + + // log modified file + gulp.src(file.path) + .pipe(print(log.modified)) + ; + + /*-------------- + Find Source + ---------------*/ + + // recompile on *.override , *.variable change + isConfig = (file.path.indexOf('theme.config') !== -1 || file.path.indexOf('site.variables') !== -1); + isPackagedTheme = (file.path.indexOf(source.themes) !== -1); + isSiteTheme = (file.path.indexOf(source.site) !== -1); + isDefinition = (file.path.indexOf(source.definitions) !== -1); + + if(isConfig) { + console.info('Rebuilding all UI'); + // impossible to tell which file was updated in theme.config, rebuild all + gulp.start('build-css'); + return; + } + else if(isPackagedTheme) { + console.log('Change detected in packaged theme'); + lessPath = replaceExt(file.path, '.less'); + lessPath = lessPath.replace(tasks.regExp.theme, source.definitions); + } + else if(isSiteTheme) { + console.log('Change detected in site theme'); + lessPath = replaceExt(file.path, '.less'); + lessPath = lessPath.replace(source.site, source.definitions); + } + else { + console.log('Change detected in definition'); + lessPath = file.path; + } + + /*-------------- + Create CSS + ---------------*/ + + if( fs.existsSync(lessPath) ) { + + // unified css stream + stream = gulp.src(lessPath) + .pipe(plumber(settings.plumber.less)) + .pipe(less(settings.less)) + .pipe(print(log.created)) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) + .pipe(autoprefixer(settings.prefix)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + ; + + // use 2 concurrent streams from same pipe + uncompressedStream = stream.pipe(clone()); + compressedStream = stream.pipe(clone()); + + uncompressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.uncompressed)) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package uncompressed css'); + }) + ; + + compressedStream + .pipe(plumber()) + .pipe(replace(assets.source, assets.compressed)) + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.rename.minCSS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed css'); + }) + ; + } + else { + console.log('Cannot find UI definition at path', lessPath); + } + }) + ; + + /*-------------- + Watch JS + ---------------*/ + + gulp + .watch([ + source.definitions + '/**/*.js' + ], function(file) { + gulp.src(file.path) + .pipe(plumber()) + .pipe(replace(comments.license.in, comments.license.out)) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.uncompressed)) + .pipe(print(log.created)) + .pipe(uglify(settings.uglify)) + .pipe(rename(settings.rename.minJS)) + .pipe(gulp.dest(output.compressed)) + .pipe(print(log.created)) + .on('end', function() { + gulp.start('package compressed js'); + gulp.start('package uncompressed js'); + }) + ; + }) + ; + + /*-------------- + Watch Assets + ---------------*/ + + // only copy assets that match component names (or their plural) + gulp + .watch([ + source.themes + '/**/assets/**/*.*' + ], function(file) { + // copy assets + gulp.src(file.path, { base: source.themes }) + .pipe(gulpif(config.hasPermission, chmod(config.permission))) + .pipe(gulp.dest(output.themes)) + .pipe(print(log.created)) + ; + }) + ; + +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100755 index 0000000..2444026 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,74 @@ +{ + "compilerOptions": { + /* Basic Options */ + // "incremental": true, /* Enable incremental compilation */ + "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */ + "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */ + // "lib": [], /* Specify library files to be included in the compilation. */ + "allowJs": true, /* Allow javascript files to be compiled. */ + "skipLibCheck": true, + // "checkJs": true, /* Report errors in .js files. */ + // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ + // "declaration": true, /* Generates corresponding '.d.ts' file. */ + // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ + // "sourceMap": true, /* Generates corresponding '.map' file. */ + // "outFile": "./dist/index.js", /* Concatenate and emit output to single file. */ + "outDir": "./dist/", /* Redirect output structure to the directory. */ + "rootDir": "./src/", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ + // "composite": true, /* Enable project compilation */ + // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ + // "removeComments": true, /* Do not emit comments to output. */ + // "noEmit": true, /* Do not emit outputs. */ + // "importHelpers": true, /* Import emit helpers from 'tslib'. */ + // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ + // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ + + /* Strict Type-Checking Options */ + "strict": true, /* Enable all strict type-checking options. */ + "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* Enable strict null checks. */ + // "strictFunctionTypes": true, /* Enable strict checking of function types. */ + // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ + // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ + // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ + // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ + + /* Additional Checks */ + // "noUnusedLocals": true, /* Report errors on unused locals. */ + // "noUnusedParameters": true, /* Report errors on unused parameters. */ + // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ + // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ + + /* Module Resolution Options */ + "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ + // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ + // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ + // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ + // "typeRoots": [], /* List of folders to include type definitions from. */ + // "types": [], /* Type declaration files to be included in compilation. */ + "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ + "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ + // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + "resolveJsonModule": true, + + /* Source Map Options */ + "sourceRoot": "./src/", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ + // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ + + /* Experimental Options */ + // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ + // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ + + /* Advanced Options */ + "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ + }, + "exclude": [ + "static", + "views", + "node_modules", + "dist" + ] +} diff --git a/views/index.ejs b/views/index.ejs new file mode 100755 index 0000000..4ada67d --- /dev/null +++ b/views/index.ejs @@ -0,0 +1,53 @@ + + + + + + + Login + + + + +

+ + +

+ Login successful! +

+ + View saved games + +

+ Log out +

+ + + + + diff --git a/views/login.ejs b/views/login.ejs new file mode 100755 index 0000000..80dee13 --- /dev/null +++ b/views/login.ejs @@ -0,0 +1,50 @@ + + + + + + + Login to K A D I + + + + +

+ + <% if (messages.error) { %> +

<%= messages.error %>

+ <% } %> +

+ +

+ No account yet? Click here to sign up! +

+ + + + + diff --git a/views/register.ejs b/views/register.ejs new file mode 100755 index 0000000..315e7a7 --- /dev/null +++ b/views/register.ejs @@ -0,0 +1,58 @@ + + + + + + + Register a K A D I account + + + + +

+ + <% if (messages.errors) { %> + <% for (error in messages.errors) { %> +

+ <%= messages.errors[error] %> +

+ <% } %> + <% } %> +

+ +

+ Already have an account? Log in here! +

+ + + + +