jlukic
11 years ago
333 changed files with 0 additions and 107452 deletions
@ -1,733 +0,0 @@ |
|||
/* |
|||
* # Semantic - API |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.api = $.fn.api = function(parameters) { |
|||
|
|||
var |
|||
// use window context if none specified
|
|||
$allModules = $.isFunction(this) |
|||
? $(window) |
|||
: $(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.api.settings, parameters), |
|||
|
|||
// internal aliases
|
|||
namespace = settings.namespace, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
className = settings.className, |
|||
|
|||
// define namespaces for modules
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
// element that creates request
|
|||
$module = $(this), |
|||
$form = $module.closest(selector.form), |
|||
|
|||
// context used for state
|
|||
$context = (settings.stateContext) |
|||
? $(settings.stateContext) |
|||
: $module, |
|||
|
|||
// request details
|
|||
ajaxSettings, |
|||
requestSettings, |
|||
url, |
|||
data, |
|||
|
|||
// standard module
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
var |
|||
triggerEvent = module.get.event() |
|||
; |
|||
if(!methodInvoked) { |
|||
if( triggerEvent ) { |
|||
module.debug('Attaching API events to element', triggerEvent); |
|||
$module |
|||
.on(triggerEvent + eventNamespace, module.query) |
|||
; |
|||
} |
|||
else { |
|||
module.query(); |
|||
} |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module for', element); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
query: function() { |
|||
|
|||
if(module.is.disabled()) { |
|||
module.debug('Element is disabled API request aborted'); |
|||
return; |
|||
} |
|||
// determine if an api event already occurred
|
|||
if(module.is.loading() && !settings.allowMultiple) { |
|||
module.debug('Request cancelled previous request is still pending'); |
|||
return; |
|||
} |
|||
|
|||
// pass element metadata to url (value, text)
|
|||
if(settings.defaultData) { |
|||
$.extend(true, settings.urlData, module.get.defaultData()); |
|||
} |
|||
|
|||
// Add form content
|
|||
if(settings.serializeForm) { |
|||
$.extend(true, settings.data, module.get.formData()); |
|||
} |
|||
|
|||
// call beforesend and get any settings changes
|
|||
requestSettings = module.get.settings(); |
|||
|
|||
// check if beforesend cancelled request
|
|||
if(requestSettings === false) { |
|||
module.error(error.beforeSend); |
|||
return; |
|||
} |
|||
|
|||
if(settings.url) { |
|||
// override with url if specified
|
|||
module.debug('Using specified url', url); |
|||
url = module.add.urlData( settings.url ); |
|||
} |
|||
else { |
|||
// otherwise find url from api endpoints
|
|||
url = module.add.urlData( module.get.templateURL() ); |
|||
module.debug('API url resolved to', url); |
|||
} |
|||
|
|||
// exit conditions reached, missing url parameters
|
|||
if( !url ) { |
|||
module.error(error.missingURL); |
|||
return; |
|||
} |
|||
|
|||
// add loading state
|
|||
module.set.loading(); |
|||
|
|||
// look for jQuery ajax parameters in settings
|
|||
ajaxSettings = $.extend(true, {}, settings, { |
|||
type : settings.method || settings.type, |
|||
data : data, |
|||
url : url, |
|||
beforeSend : settings.beforeXHR, |
|||
success : function() {}, |
|||
failure : function() {}, |
|||
complete : function() {} |
|||
}); |
|||
|
|||
module.verbose('Creating AJAX request with settings', ajaxSettings); |
|||
|
|||
// request provides a wrapper around xhr
|
|||
module.request = module.create.request(); |
|||
module.xhr = module.create.xhr(); |
|||
|
|||
}, |
|||
|
|||
|
|||
is: { |
|||
disabled: function() { |
|||
return ($module.filter(settings.filter).size() > 0); |
|||
}, |
|||
loading: function() { |
|||
return (module.request && module.request.state() == 'pending'); |
|||
} |
|||
}, |
|||
|
|||
was: { |
|||
succesful: function() { |
|||
return (module.request && module.request.state() == 'resolved'); |
|||
}, |
|||
failure: function() { |
|||
return (module.request && module.request.state() == 'rejected'); |
|||
}, |
|||
complete: function() { |
|||
return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') ); |
|||
} |
|||
}, |
|||
|
|||
add: { |
|||
urlData: function(url, urlData) { |
|||
var |
|||
urlVariables |
|||
; |
|||
if(url) { |
|||
urlVariables = url.match(settings.regExpTemplate); |
|||
urlData = urlData || settings.urlData; |
|||
|
|||
if(urlVariables) { |
|||
module.debug('Looking for URL variables', urlVariables); |
|||
$.each(urlVariables, function(index, templateValue){ |
|||
var |
|||
term = templateValue.substr( 2, templateValue.length - 3), |
|||
termValue = ($.isPlainObject(urlData) && urlData[term] !== undefined) |
|||
? urlData[term] |
|||
: ($module.data(term) !== undefined) |
|||
? $module.data(term) |
|||
: ($context.data(term) !== undefined) |
|||
? $context.data(term) |
|||
: urlData[term] |
|||
; |
|||
module.verbose('Looking for variable', term); |
|||
// remove optional value
|
|||
if(termValue === false) { |
|||
module.debug('Removing variable from URL', urlVariables); |
|||
url = url.replace('/' + templateValue, ''); |
|||
} |
|||
// undefined condition
|
|||
else if(termValue === undefined || !termValue) { |
|||
module.error(error.missingParameter, term, url); |
|||
url = false; |
|||
return false; |
|||
} |
|||
else { |
|||
url = url.replace(templateValue, termValue); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
return url; |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
xhr: { |
|||
always: function() { |
|||
// calculate if loading time was below minimum threshold
|
|||
}, |
|||
done: function(response) { |
|||
var |
|||
context = this, |
|||
elapsedTime = (new Date().getTime() - time), |
|||
loadingDelay = (settings.loadingDuration - elapsedTime >= 0) |
|||
? settings.loadingDuration - elapsedTime |
|||
: 0 |
|||
; |
|||
setTimeout(function(){ |
|||
module.request.resolveWith(context, [response]); |
|||
}, loadingDelay); |
|||
}, |
|||
fail: function(xhr, status, httpMessage) { |
|||
var |
|||
context = this, |
|||
elapsedTime = (new Date().getTime() - time), |
|||
loadingDelay = (settings.loadingDuration - elapsedTime >= 0) |
|||
? settings.loadingDuration - elapsedTime |
|||
: 0 |
|||
; |
|||
// page triggers abort on navigation, dont show error
|
|||
if(status !== 'abort') { |
|||
setTimeout(function(){ |
|||
module.request.rejectWith(context, [xhr, status, httpMessage]); |
|||
}, settings.loadingDelay); |
|||
} |
|||
else { |
|||
module.reset(); |
|||
} |
|||
} |
|||
}, |
|||
request: { |
|||
complete: function() { |
|||
module.remove.loading(); |
|||
$.proxy(settings.complete, $context)(); |
|||
}, |
|||
done: function(response) { |
|||
module.debug('API request received', response); |
|||
if(settings.dataType == 'json') { |
|||
if( $.isFunction(settings.successTest) ) { |
|||
module.debug('Checking JSON', settings.successTest, response); |
|||
if( settings.success(response) ) { |
|||
$.proxy(settings.success, $context)(response, $module); |
|||
} |
|||
else { |
|||
module.debug('JSON test specified by user and response failed', response); |
|||
$.proxy(settings.failure, $context)(response, $module); |
|||
} |
|||
} |
|||
else { |
|||
$.proxy(settings.success, $context)(response, $module); |
|||
} |
|||
} |
|||
else { |
|||
$.proxy(settings.success, $context)(response, $module); |
|||
} |
|||
}, |
|||
error: function(xhr, status, httpMessage) { |
|||
var |
|||
errorMessage = (settings.error[status] !== undefined) |
|||
? settings.error[status] |
|||
: httpMessage, |
|||
response |
|||
; |
|||
// let em know unless request aborted
|
|||
if(xhr !== undefined) { |
|||
// readyState 4 = done, anything less is not really sent
|
|||
if(xhr.readyState !== undefined && xhr.readyState == 4) { |
|||
|
|||
// if http status code returned and json returned error, look for it
|
|||
if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { |
|||
module.error(error.statusMessage + httpMessage); |
|||
} |
|||
else { |
|||
if(status == 'error' && settings.dataType == 'json') { |
|||
try { |
|||
response = $.parseJSON(xhr.responseText); |
|||
if(response && response.error !== undefined) { |
|||
errorMessage = response.error; |
|||
} |
|||
} |
|||
catch(er) { |
|||
module.error(error.JSONParse); |
|||
} |
|||
} |
|||
} |
|||
module.remove.loading(); |
|||
module.set.error(); |
|||
// show error state only for duration specified in settings
|
|||
if(settings.errorDuration) { |
|||
setTimeout(module.remove.error, settings.errorDuration); |
|||
} |
|||
module.debug('API Request error:', errorMessage); |
|||
$.proxy(settings.failure, $context)(errorMessage, this); |
|||
} |
|||
else { |
|||
module.debug('Request Aborted (Most likely caused by page change)'); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
create: { |
|||
request: function() { |
|||
return $.Deferred() |
|||
.always(module.event.request.complete) |
|||
.done(module.event.request.done) |
|||
.fail(module.event.request.error) |
|||
; |
|||
}, |
|||
xhr: function() { |
|||
$.ajax(ajaxSettings) |
|||
.always(module.event.xhr.always) |
|||
.done(module.event.xhr.done) |
|||
.fail(module.event.xhr.fail) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
error: function() { |
|||
module.verbose('Adding error state to element', $context); |
|||
$context.addClass(className.error); |
|||
}, |
|||
loading: function() { |
|||
module.verbose('Adding loading state to element', $context); |
|||
$context.addClass(className.loading); |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
error: function() { |
|||
module.verbose('Removing error state from element', $context); |
|||
$context.removeClass(className.error); |
|||
}, |
|||
loading: function() { |
|||
module.verbose('Removing loading state from element', $context); |
|||
$context.removeClass(className.loading); |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
request: function() { |
|||
return module.request || false; |
|||
}, |
|||
xhr: function() { |
|||
return module.xhr || false; |
|||
}, |
|||
settings: function() { |
|||
return $.proxy(settings.beforeSend, $module)(settings); |
|||
}, |
|||
defaultData: function() { |
|||
var |
|||
data = {} |
|||
; |
|||
if( !$.isWindow(element) ) { |
|||
if( $module.is('input') ) { |
|||
data.value = $module.val(); |
|||
} |
|||
else { |
|||
data.text = $module.text(); |
|||
} |
|||
} |
|||
return data; |
|||
}, |
|||
event: function() { |
|||
if( $.isWindow(element) || settings.on == 'now' ) { |
|||
module.debug('API called without element, no events attached'); |
|||
return false; |
|||
} |
|||
else if(settings.on == 'auto') { |
|||
if( $module.is('input') ) { |
|||
return (element.oninput !== undefined) |
|||
? 'input' |
|||
: (element.onpropertychange !== undefined) |
|||
? 'propertychange' |
|||
: 'keyup' |
|||
; |
|||
} |
|||
else { |
|||
return 'click'; |
|||
} |
|||
} |
|||
else { |
|||
return settings.on; |
|||
} |
|||
}, |
|||
formData: function() { |
|||
var |
|||
formData |
|||
; |
|||
if(settings.serializeForm == 'json') { |
|||
if($(this).toJSON === undefined ) { |
|||
module.error(error.missingSerialize); |
|||
return; |
|||
} |
|||
formData = $form.toJSON(); |
|||
} |
|||
else { |
|||
formData = $form.serialize(); |
|||
} |
|||
module.debug('Retrieving form data', formData); |
|||
return formData; |
|||
}, |
|||
templateURL: function(action) { |
|||
var |
|||
url |
|||
; |
|||
action = action || $module.data(settings.metadata.action) || settings.action || false; |
|||
if(action) { |
|||
module.debug('Looking up url for action', action); |
|||
if(settings.api[action] !== undefined) { |
|||
url = settings.api[action]; |
|||
module.debug('Found template url', url); |
|||
} |
|||
else { |
|||
module.error(error.missingAction, settings.action); |
|||
} |
|||
} |
|||
return url; |
|||
} |
|||
}, |
|||
|
|||
// reset state
|
|||
reset: function() { |
|||
module.remove.error(); |
|||
module.remove.loading(); |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== 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( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( $.isPlainObject( instance[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
instance = instance[camelCaseValue]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
return false; |
|||
} |
|||
else if( instance[camelCaseValue] !== undefined ) { |
|||
found = instance[camelCaseValue]; |
|||
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 |
|||
; |
|||
}; |
|||
|
|||
$.api.settings = { |
|||
|
|||
name : 'API', |
|||
namespace : 'api', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
// event binding
|
|||
on : 'auto', |
|||
filter : '.disabled, .loading', |
|||
context : false, |
|||
stateContext : false, |
|||
|
|||
// templating
|
|||
action : false, |
|||
regExpTemplate : /\{\$([A-z]+)\}/g, |
|||
|
|||
// data
|
|||
url : false, |
|||
urlData : false, |
|||
serializeForm : false, |
|||
|
|||
// ui
|
|||
defaultData : true, |
|||
throttle : 100, |
|||
allowMultiple : false, |
|||
|
|||
// state
|
|||
loadingDuration : 500, |
|||
errorDuration : 2000, |
|||
|
|||
// jQ ajax
|
|||
method : 'get', |
|||
data : {}, |
|||
dataType : 'json', |
|||
cache : true, |
|||
|
|||
// callbacks
|
|||
beforeSend : function(settings) { return settings; }, |
|||
beforeXHR : function(xhr) {}, |
|||
|
|||
success : function(response) {}, |
|||
successText : function(response) { return true; }, |
|||
complete : function(response) {}, |
|||
failure : function(response) {}, |
|||
|
|||
// errors
|
|||
error : { |
|||
beforeSend : 'The before send function has aborted the request', |
|||
error : 'There was an error with your request', |
|||
exitConditions : 'API Request Aborted. Exit conditions met', |
|||
JSONParse : 'JSON could not be parsed during error handling', |
|||
missingSerialize : 'Serializing a Form requires toJSON to be included', |
|||
missingAction : 'API action used but no url was defined', |
|||
missingParameter : 'Missing an essential URL parameter: ', |
|||
missingURL : 'No URL specified for api event', |
|||
parseError : 'There was an error parsing your request', |
|||
statusMessage : 'Server gave an error: ', |
|||
timeout : 'Your request timed out' |
|||
}, |
|||
|
|||
className: { |
|||
loading : 'loading', |
|||
error : 'error' |
|||
}, |
|||
|
|||
selector: { |
|||
form: 'form' |
|||
}, |
|||
|
|||
metadata: { |
|||
action : 'action', |
|||
request : 'request', |
|||
xhr : 'xhr' |
|||
} |
|||
}; |
|||
|
|||
|
|||
$.api.settings.api = {}; |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,270 +0,0 @@ |
|||
/* |
|||
* # Semantic - Colorize |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.colorize = function(parameters) { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.colorize.settings, parameters), |
|||
// hoist arguments
|
|||
moduleArguments = arguments || false |
|||
; |
|||
$(this) |
|||
.each(function(instanceIndex) { |
|||
|
|||
var |
|||
$module = $(this), |
|||
|
|||
mainCanvas = $('<canvas />')[0], |
|||
imageCanvas = $('<canvas />')[0], |
|||
overlayCanvas = $('<canvas />')[0], |
|||
|
|||
backgroundImage = new Image(), |
|||
|
|||
// defs
|
|||
mainContext, |
|||
imageContext, |
|||
overlayContext, |
|||
|
|||
image, |
|||
imageName, |
|||
|
|||
width, |
|||
height, |
|||
|
|||
// shortucts
|
|||
colors = settings.colors, |
|||
paths = settings.paths, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
// boilerplate
|
|||
instance = $module.data('module-' + namespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
checkPreconditions: function() { |
|||
module.debug('Checking pre-conditions'); |
|||
|
|||
if( !$.isPlainObject(colors) || $.isEmptyObject(colors) ) { |
|||
module.error(error.undefinedColors); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
async: function(callback) { |
|||
if(settings.async) { |
|||
setTimeout(callback, 0); |
|||
} |
|||
else { |
|||
callback(); |
|||
} |
|||
}, |
|||
|
|||
getMetadata: function() { |
|||
module.debug('Grabbing metadata'); |
|||
image = $module.data('image') || settings.image || undefined; |
|||
imageName = $module.data('name') || settings.name || instanceIndex; |
|||
width = settings.width || $module.width(); |
|||
height = settings.height || $module.height(); |
|||
if(width === 0 || height === 0) { |
|||
module.error(error.undefinedSize); |
|||
} |
|||
}, |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing with colors', colors); |
|||
if( module.checkPreconditions() ) { |
|||
|
|||
module.async(function() { |
|||
module.getMetadata(); |
|||
module.canvas.create(); |
|||
|
|||
module.draw.image(function() { |
|||
module.draw.colors(); |
|||
module.canvas.merge(); |
|||
}); |
|||
$module |
|||
.data('module-' + namespace, module) |
|||
; |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
redraw: function() { |
|||
module.debug('Redrawing image'); |
|||
module.async(function() { |
|||
module.canvas.clear(); |
|||
module.draw.colors(); |
|||
module.canvas.merge(); |
|||
}); |
|||
}, |
|||
|
|||
change: { |
|||
color: function(colorName, color) { |
|||
module.debug('Changing color', colorName); |
|||
if(colors[colorName] === undefined) { |
|||
module.error(error.missingColor); |
|||
return false; |
|||
} |
|||
colors[colorName] = color; |
|||
module.redraw(); |
|||
} |
|||
}, |
|||
|
|||
canvas: { |
|||
create: function() { |
|||
module.debug('Creating canvases'); |
|||
|
|||
mainCanvas.width = width; |
|||
mainCanvas.height = height; |
|||
imageCanvas.width = width; |
|||
imageCanvas.height = height; |
|||
overlayCanvas.width = width; |
|||
overlayCanvas.height = height; |
|||
|
|||
mainContext = mainCanvas.getContext('2d'); |
|||
imageContext = imageCanvas.getContext('2d'); |
|||
overlayContext = overlayCanvas.getContext('2d'); |
|||
|
|||
$module |
|||
.append( mainCanvas ) |
|||
; |
|||
mainContext = $module.children('canvas')[0].getContext('2d'); |
|||
}, |
|||
clear: function(context) { |
|||
module.debug('Clearing canvas'); |
|||
overlayContext.fillStyle = '#FFFFFF'; |
|||
overlayContext.fillRect(0, 0, width, height); |
|||
}, |
|||
merge: function() { |
|||
if( !$.isFunction(mainContext.blendOnto) ) { |
|||
module.error(error.missingPlugin); |
|||
return; |
|||
} |
|||
mainContext.putImageData( imageContext.getImageData(0, 0, width, height), 0, 0); |
|||
overlayContext.blendOnto(mainContext, 'multiply'); |
|||
} |
|||
}, |
|||
|
|||
draw: { |
|||
|
|||
image: function(callback) { |
|||
module.debug('Drawing image'); |
|||
callback = callback || function(){}; |
|||
if(image) { |
|||
backgroundImage.src = image; |
|||
backgroundImage.onload = function() { |
|||
imageContext.drawImage(backgroundImage, 0, 0); |
|||
callback(); |
|||
}; |
|||
} |
|||
else { |
|||
module.error(error.noImage); |
|||
callback(); |
|||
} |
|||
}, |
|||
|
|||
colors: function() { |
|||
module.debug('Drawing color overlays', colors); |
|||
$.each(colors, function(colorName, color) { |
|||
settings.onDraw(overlayContext, imageName, colorName, color); |
|||
}); |
|||
} |
|||
|
|||
}, |
|||
|
|||
debug: function(message, variableName) { |
|||
if(settings.debug) { |
|||
if(variableName !== undefined) { |
|||
console.info(settings.name + ': ' + message, variableName); |
|||
} |
|||
else { |
|||
console.info(settings.name + ': ' + message); |
|||
} |
|||
} |
|||
}, |
|||
error: function(errorMessage) { |
|||
console.warn(settings.name + ': ' + errorMessage); |
|||
}, |
|||
invoke: function(methodName, context, methodArguments) { |
|||
var |
|||
method |
|||
; |
|||
methodArguments = methodArguments || Array.prototype.slice.call( arguments, 2 ); |
|||
|
|||
if(typeof methodName == 'string' && instance !== undefined) { |
|||
methodName = methodName.split('.'); |
|||
$.each(methodName, function(index, name) { |
|||
if( $.isPlainObject( instance[name] ) ) { |
|||
instance = instance[name]; |
|||
return true; |
|||
} |
|||
else if( $.isFunction( instance[name] ) ) { |
|||
method = instance[name]; |
|||
return true; |
|||
} |
|||
module.error(settings.error.method); |
|||
return false; |
|||
}); |
|||
} |
|||
return ( $.isFunction( method ) ) |
|||
? method.apply(context, methodArguments) |
|||
: false |
|||
; |
|||
} |
|||
|
|||
}; |
|||
if(instance !== undefined && moduleArguments) { |
|||
// simpler than invoke realizing to invoke itself (and losing scope due prototype.call()
|
|||
if(moduleArguments[0] == 'invoke') { |
|||
moduleArguments = Array.prototype.slice.call( moduleArguments, 1 ); |
|||
} |
|||
return module.invoke(moduleArguments[0], this, Array.prototype.slice.call( moduleArguments, 1 ) ); |
|||
} |
|||
// initializing
|
|||
module.initialize(); |
|||
}) |
|||
; |
|||
return this; |
|||
}; |
|||
|
|||
$.fn.colorize.settings = { |
|||
name : 'Image Colorizer', |
|||
debug : true, |
|||
namespace : 'colorize', |
|||
|
|||
onDraw : function(overlayContext, imageName, colorName, color) {}, |
|||
|
|||
// whether to block execution while updating canvas
|
|||
async : true, |
|||
// object containing names and default values of color regions
|
|||
colors : {}, |
|||
|
|||
metadata: { |
|||
image : 'image', |
|||
name : 'name' |
|||
}, |
|||
|
|||
error: { |
|||
noImage : 'No tracing image specified', |
|||
undefinedColors : 'No default colors specified.', |
|||
missingColor : 'Attempted to change color that does not exist', |
|||
missingPlugin : 'Blend onto plug-in must be included', |
|||
undefinedHeight : 'The width or height of image canvas could not be automatically determined. Please specify a height.' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,739 +0,0 @@ |
|||
/* |
|||
* # Semantic - Form Validation |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.form = function(fields, parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
|
|||
settings = $.extend(true, {}, $.fn.form.settings, parameters), |
|||
validation = $.extend({}, $.fn.form.settings.defaults, fields), |
|||
|
|||
namespace = settings.namespace, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
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 |
|||
$module = $(this), |
|||
$field = $(this).find(selector.field), |
|||
$group = $(this).find(selector.group), |
|||
$message = $(this).find(selector.message), |
|||
$prompt = $(this).find(selector.prompt), |
|||
$submit = $(this).find(selector.submit), |
|||
|
|||
formErrors = [], |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing form validation', $module, validation, settings); |
|||
module.bindEvents(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module', instance); |
|||
module.removeEvents(); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache'); |
|||
$field = $module.find(selector.field); |
|||
}, |
|||
|
|||
submit: function() { |
|||
module.verbose('Submitting form', $module); |
|||
$module |
|||
.submit() |
|||
; |
|||
}, |
|||
|
|||
bindEvents: function() { |
|||
if(settings.keyboardShortcuts) { |
|||
$field |
|||
.on('keydown' + eventNamespace, module.event.field.keydown) |
|||
; |
|||
} |
|||
$module |
|||
.on('submit' + eventNamespace, module.validate.form) |
|||
; |
|||
$field |
|||
.on('blur' + eventNamespace, module.event.field.blur) |
|||
; |
|||
$submit |
|||
.on('click' + eventNamespace, module.submit) |
|||
; |
|||
$field |
|||
.each(function() { |
|||
var |
|||
type = $(this).prop('type'), |
|||
inputEvent = module.get.changeEvent(type) |
|||
; |
|||
$(this) |
|||
.on(inputEvent + eventNamespace, module.event.field.change) |
|||
; |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
removeEvents: function() { |
|||
$module |
|||
.off(eventNamespace) |
|||
; |
|||
$field |
|||
.off(eventNamespace) |
|||
; |
|||
$submit |
|||
.off(eventNamespace) |
|||
; |
|||
$field |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
field: { |
|||
keydown: function(event) { |
|||
var |
|||
$field = $(this), |
|||
key = event.which, |
|||
keyCode = { |
|||
enter : 13, |
|||
escape : 27 |
|||
} |
|||
; |
|||
if( key == keyCode.escape) { |
|||
module.verbose('Escape key pressed blurring field'); |
|||
$field |
|||
.blur() |
|||
; |
|||
} |
|||
if(!event.ctrlKey && key == keyCode.enter && $field.is(selector.input) && $field.not(selector.checkbox).size() > 0 ) { |
|||
module.debug('Enter key pressed, submitting form'); |
|||
$submit |
|||
.addClass(className.down) |
|||
; |
|||
$field |
|||
.one('keyup' + eventNamespace, module.event.field.keyup) |
|||
; |
|||
event.preventDefault(); |
|||
return false; |
|||
} |
|||
}, |
|||
keyup: function() { |
|||
module.verbose('Doing keyboard shortcut form submit'); |
|||
$submit.removeClass(className.down); |
|||
module.submit(); |
|||
}, |
|||
blur: function() { |
|||
var |
|||
$field = $(this), |
|||
$fieldGroup = $field.closest($group) |
|||
; |
|||
if( $fieldGroup.hasClass(className.error) ) { |
|||
module.debug('Revalidating field', $field, module.get.validation($field)); |
|||
module.validate.field( module.get.validation($field) ); |
|||
} |
|||
else if(settings.on == 'blur' || settings.on == 'change') { |
|||
module.validate.field( module.get.validation($field) ); |
|||
} |
|||
}, |
|||
change: function() { |
|||
var |
|||
$field = $(this), |
|||
$fieldGroup = $field.closest($group) |
|||
; |
|||
if(settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) ) { |
|||
clearTimeout(module.timer); |
|||
module.timer = setTimeout(function() { |
|||
module.debug('Revalidating field', $field, module.get.validation($field)); |
|||
module.validate.field( module.get.validation($field) ); |
|||
}, settings.delay); |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
get: { |
|||
changeEvent: function(type) { |
|||
if(type == 'checkbox' || type == 'radio') { |
|||
return 'change'; |
|||
} |
|||
else { |
|||
return (document.createElement('input').oninput !== undefined) |
|||
? 'input' |
|||
: (document.createElement('input').onpropertychange !== undefined) |
|||
? 'propertychange' |
|||
: 'keyup' |
|||
; |
|||
} |
|||
}, |
|||
field: function(identifier) { |
|||
module.verbose('Finding field with identifier', identifier); |
|||
if( $field.filter('#' + identifier).size() > 0 ) { |
|||
return $field.filter('#' + identifier); |
|||
} |
|||
else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { |
|||
return $field.filter('[name="' + identifier +'"]'); |
|||
} |
|||
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { |
|||
return $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]'); |
|||
} |
|||
return $('<input/>'); |
|||
}, |
|||
validation: function($field) { |
|||
var |
|||
rules |
|||
; |
|||
$.each(validation, function(fieldName, field) { |
|||
if( module.get.field(field.identifier).get(0) == $field.get(0) ) { |
|||
rules = field; |
|||
} |
|||
}); |
|||
return rules || false; |
|||
} |
|||
}, |
|||
|
|||
has: { |
|||
|
|||
field: function(identifier) { |
|||
module.verbose('Checking for existence of a field with identifier', identifier); |
|||
if( $field.filter('#' + identifier).size() > 0 ) { |
|||
return true; |
|||
} |
|||
else if( $field.filter('[name="' + identifier +'"]').size() > 0 ) { |
|||
return true; |
|||
} |
|||
else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').size() > 0 ) { |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
}, |
|||
|
|||
add: { |
|||
prompt: function(identifier, errors) { |
|||
var |
|||
$field = module.get.field(identifier), |
|||
$fieldGroup = $field.closest($group), |
|||
$prompt = $fieldGroup.find(selector.prompt), |
|||
promptExists = ($prompt.size() !== 0) |
|||
; |
|||
errors = (typeof errors == 'string') |
|||
? [errors] |
|||
: errors |
|||
; |
|||
module.verbose('Adding field error state', identifier); |
|||
$fieldGroup |
|||
.addClass(className.error) |
|||
; |
|||
if(settings.inline) { |
|||
if(!promptExists) { |
|||
$prompt = settings.templates.prompt(errors); |
|||
$prompt |
|||
.appendTo($fieldGroup) |
|||
; |
|||
} |
|||
$prompt |
|||
.html(errors[0]) |
|||
; |
|||
if(!promptExists) { |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
module.verbose('Displaying error with css transition', settings.transition); |
|||
$prompt.transition(settings.transition + ' in', settings.duration); |
|||
} |
|||
else { |
|||
module.verbose('Displaying error with fallback javascript animation'); |
|||
$prompt |
|||
.fadeIn(settings.duration) |
|||
; |
|||
} |
|||
} |
|||
else { |
|||
module.verbose('Inline errors are disabled, no inline error added', identifier); |
|||
} |
|||
} |
|||
}, |
|||
errors: function(errors) { |
|||
module.debug('Adding form error messages', errors); |
|||
$message |
|||
.html( settings.templates.error(errors) ) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
prompt: function(field) { |
|||
var |
|||
$field = module.get.field(field.identifier), |
|||
$fieldGroup = $field.closest($group), |
|||
$prompt = $fieldGroup.find(selector.prompt) |
|||
; |
|||
$fieldGroup |
|||
.removeClass(className.error) |
|||
; |
|||
if(settings.inline && $prompt.is(':visible')) { |
|||
module.verbose('Removing prompt for field', field); |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$prompt.transition(settings.transition + ' out', settings.duration, function() { |
|||
$prompt.remove(); |
|||
}); |
|||
} |
|||
else { |
|||
$prompt |
|||
.fadeOut(settings.duration, function(){ |
|||
$prompt.remove(); |
|||
}) |
|||
; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
validate: { |
|||
|
|||
form: function(event) { |
|||
var |
|||
allValid = true |
|||
; |
|||
// reset errors
|
|||
formErrors = []; |
|||
$.each(validation, function(fieldName, field) { |
|||
if( !( module.validate.field(field) ) ) { |
|||
allValid = false; |
|||
} |
|||
}); |
|||
if(allValid) { |
|||
module.debug('Form has no validation errors, submitting'); |
|||
$module |
|||
.removeClass(className.error) |
|||
.addClass(className.success) |
|||
; |
|||
return $.proxy(settings.onSuccess, this)(event); |
|||
} |
|||
else { |
|||
module.debug('Form has errors'); |
|||
$module.addClass(className.error); |
|||
if(!settings.inline) { |
|||
module.add.errors(formErrors); |
|||
} |
|||
return $.proxy(settings.onFailure, this)(formErrors); |
|||
} |
|||
}, |
|||
|
|||
// takes a validation object and returns whether field passes validation
|
|||
field: function(field) { |
|||
var |
|||
$field = module.get.field(field.identifier), |
|||
fieldValid = true, |
|||
fieldErrors = [] |
|||
; |
|||
if(field.rules !== undefined) { |
|||
$.each(field.rules, function(index, rule) { |
|||
if( module.has.field(field.identifier) && !( module.validate.rule(field, rule) ) ) { |
|||
module.debug('Field is invalid', field.identifier, rule.type); |
|||
fieldErrors.push(rule.prompt); |
|||
fieldValid = false; |
|||
} |
|||
}); |
|||
} |
|||
if(fieldValid) { |
|||
module.remove.prompt(field, fieldErrors); |
|||
$.proxy(settings.onValid, $field)(); |
|||
} |
|||
else { |
|||
formErrors = formErrors.concat(fieldErrors); |
|||
module.add.prompt(field.identifier, fieldErrors); |
|||
$.proxy(settings.onInvalid, $field)(fieldErrors); |
|||
return false; |
|||
} |
|||
return true; |
|||
}, |
|||
|
|||
// takes validation rule and returns whether field passes rule
|
|||
rule: function(field, validation) { |
|||
var |
|||
$field = module.get.field(field.identifier), |
|||
type = validation.type, |
|||
value = $.trim($field.val() + ''), |
|||
|
|||
bracketRegExp = /\[(.*)\]/i, |
|||
bracket = bracketRegExp.exec(type), |
|||
isValid = true, |
|||
ancillary, |
|||
functionType |
|||
; |
|||
// if bracket notation is used, pass in extra parameters
|
|||
if(bracket !== undefined && bracket !== null) { |
|||
ancillary = '' + bracket[1]; |
|||
functionType = type.replace(bracket[0], ''); |
|||
isValid = $.proxy(settings.rules[functionType], $module)(value, ancillary); |
|||
} |
|||
// normal notation
|
|||
else { |
|||
isValid = $.proxy(settings.rules[type], $field)(value); |
|||
} |
|||
return isValid; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
|
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.form.settings = { |
|||
|
|||
name : 'Form', |
|||
namespace : 'form', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
|
|||
keyboardShortcuts : true, |
|||
on : 'submit', |
|||
inline : false, |
|||
|
|||
delay : 200, |
|||
revalidate : true, |
|||
|
|||
transition : 'scale', |
|||
duration : 150, |
|||
|
|||
|
|||
onValid : function() {}, |
|||
onInvalid : function() {}, |
|||
onSuccess : function() { return true; }, |
|||
onFailure : function() { return false; }, |
|||
|
|||
metadata : { |
|||
validate: 'validate' |
|||
}, |
|||
|
|||
selector : { |
|||
message : '.error.message', |
|||
field : 'input, textarea, select', |
|||
group : '.field', |
|||
checkbox: 'input[type="checkbox"], input[type="radio"]', |
|||
input : 'input', |
|||
prompt : '.prompt', |
|||
submit : '.submit' |
|||
}, |
|||
|
|||
className : { |
|||
error : 'error', |
|||
success : 'success', |
|||
down : 'down', |
|||
label : 'ui label prompt' |
|||
}, |
|||
|
|||
// errors
|
|||
error: { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
|
|||
templates: { |
|||
error: function(errors) { |
|||
var |
|||
html = '<ul class="list">' |
|||
; |
|||
$.each(errors, function(index, value) { |
|||
html += '<li>' + value + '</li>'; |
|||
}); |
|||
html += '</ul>'; |
|||
return $(html); |
|||
}, |
|||
prompt: function(errors) { |
|||
return $('<div/>') |
|||
.addClass('ui red pointing prompt label') |
|||
.html(errors[0]) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
rules: { |
|||
checked: function() { |
|||
return ($(this).filter(':checked').size() > 0); |
|||
}, |
|||
empty: function(value) { |
|||
return !(value === undefined || '' === value); |
|||
}, |
|||
email: function(value){ |
|||
var |
|||
emailRegExp = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", "i") |
|||
; |
|||
return emailRegExp.test(value); |
|||
}, |
|||
length: function(value, requiredLength) { |
|||
return (value !== undefined) |
|||
? (value.length >= requiredLength) |
|||
: false |
|||
; |
|||
}, |
|||
not: function(value, notValue) { |
|||
return (value != notValue); |
|||
}, |
|||
contains: function(value, text) { |
|||
text = text.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); |
|||
return (value.search(text) !== -1); |
|||
}, |
|||
is: function(value, text) { |
|||
return (value == text); |
|||
}, |
|||
maxLength: function(value, maxLength) { |
|||
return (value !== undefined) |
|||
? (value.length <= maxLength) |
|||
: false |
|||
; |
|||
}, |
|||
match: function(value, fieldIdentifier) { |
|||
// use either id or name of field
|
|||
var |
|||
$form = $(this), |
|||
matchingValue |
|||
; |
|||
if($form.find('#' + fieldIdentifier).size() > 0) { |
|||
matchingValue = $form.find('#' + fieldIdentifier).val(); |
|||
} |
|||
else if($form.find('[name=' + fieldIdentifier +']').size() > 0) { |
|||
matchingValue = $form.find('[name=' + fieldIdentifier + ']').val(); |
|||
} |
|||
else if( $form.find('[data-validate="'+ fieldIdentifier +'"]').size() > 0 ) { |
|||
matchingValue = $form.find('[data-validate="'+ fieldIdentifier +'"]').val(); |
|||
} |
|||
return (matchingValue !== undefined) |
|||
? ( value.toString() == matchingValue.toString() ) |
|||
: false |
|||
; |
|||
}, |
|||
url: function(value) { |
|||
var |
|||
urlRegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/ |
|||
; |
|||
return urlRegExp.test(value); |
|||
} |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,674 +0,0 @@ |
|||
/* |
|||
* # Semantic - State |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.state = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
settings = $.extend(true, {}, $.fn.state.settings, parameters), |
|||
|
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
// shortcuts
|
|||
error = settings.error, |
|||
metadata = settings.metadata, |
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
states = settings.states, |
|||
text = settings.text, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = namespace + '-module', |
|||
|
|||
|
|||
returnedValue |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
module |
|||
; |
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing module'); |
|||
|
|||
// allow module to guess desired state based on element
|
|||
if(settings.automatic) { |
|||
module.add.defaults(); |
|||
} |
|||
|
|||
// bind events with delegated events
|
|||
if(settings.context && moduleSelector !== '') { |
|||
$(settings.context) |
|||
.on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text) |
|||
.on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text) |
|||
.on(moduleSelector, 'click' + eventNamespace, module.toggle.state) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.on('mouseenter' + eventNamespace, module.change.text) |
|||
.on('mouseleave' + eventNamespace, module.reset.text) |
|||
.on('click' + eventNamespace, module.toggle.state) |
|||
; |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module', instance); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache'); |
|||
$module = $(element); |
|||
}, |
|||
|
|||
add: { |
|||
defaults: function() { |
|||
var |
|||
userStates = parameters && $.isPlainObject(parameters.states) |
|||
? parameters.states |
|||
: {} |
|||
; |
|||
$.each(settings.defaults, function(type, typeStates) { |
|||
if( module.is[type] !== undefined && module.is[type]() ) { |
|||
module.verbose('Adding default states', type, element); |
|||
$.extend(settings.states, typeStates, userStates); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
|
|||
active: function() { |
|||
return $module.hasClass(className.active); |
|||
}, |
|||
loading: function() { |
|||
return $module.hasClass(className.loading); |
|||
}, |
|||
inactive: function() { |
|||
return !( $module.hasClass(className.active) ); |
|||
}, |
|||
|
|||
enabled: function() { |
|||
return !( $module.is(settings.filter.active) ); |
|||
}, |
|||
disabled: function() { |
|||
return ( $module.is(settings.filter.active) ); |
|||
}, |
|||
textEnabled: function() { |
|||
return !( $module.is(settings.filter.text) ); |
|||
}, |
|||
|
|||
// definitions for automatic type detection
|
|||
button: function() { |
|||
return $module.is('.button:not(a, .submit)'); |
|||
}, |
|||
input: function() { |
|||
return $module.is('input'); |
|||
} |
|||
}, |
|||
|
|||
allow: function(state) { |
|||
module.debug('Now allowing state', state); |
|||
states[state] = true; |
|||
}, |
|||
disallow: function(state) { |
|||
module.debug('No longer allowing', state); |
|||
states[state] = false; |
|||
}, |
|||
|
|||
allows: function(state) { |
|||
return states[state] || false; |
|||
}, |
|||
|
|||
enable: function() { |
|||
$module.removeClass(className.disabled); |
|||
}, |
|||
|
|||
disable: function() { |
|||
$module.addClass(className.disabled); |
|||
}, |
|||
|
|||
enableState: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.addClass( className[state] ); |
|||
} |
|||
}, |
|||
|
|||
disableState: function(state) { |
|||
if(module.allows(state)) { |
|||
$module.removeClass( className[state] ); |
|||
} |
|||
}, |
|||
|
|||
toggle: { |
|||
state: function() { |
|||
var |
|||
apiRequest |
|||
; |
|||
if( module.allows('active') && module.is.enabled() ) { |
|||
module.refresh(); |
|||
if($.fn.api !== undefined) { |
|||
apiRequest = $module.api('get request'); |
|||
if(apiRequest) { |
|||
module.listenTo(apiRequest); |
|||
return; |
|||
} |
|||
} |
|||
module.change.state(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
listenTo: function(apiRequest) { |
|||
module.debug('API request detected, waiting for state signal', apiRequest); |
|||
if(apiRequest) { |
|||
if(text.loading) { |
|||
module.update.text(text.loading); |
|||
} |
|||
$.when(apiRequest) |
|||
.then(function() { |
|||
if(apiRequest.state() == 'resolved') { |
|||
module.debug('API request succeeded'); |
|||
settings.activateTest = function(){ return true; }; |
|||
settings.deactivateTest = function(){ return true; }; |
|||
} |
|||
else { |
|||
module.debug('API request failed'); |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
module.change.state(); |
|||
}) |
|||
; |
|||
} |
|||
// xhr exists but set to false, beforeSend killed the xhr
|
|||
else { |
|||
settings.activateTest = function(){ return false; }; |
|||
settings.deactivateTest = function(){ return false; }; |
|||
} |
|||
}, |
|||
|
|||
// checks whether active/inactive state can be given
|
|||
change: { |
|||
|
|||
state: function() { |
|||
module.debug('Determining state change direction'); |
|||
// inactive to active change
|
|||
if( module.is.inactive() ) { |
|||
module.activate(); |
|||
} |
|||
else { |
|||
module.deactivate(); |
|||
} |
|||
if(settings.sync) { |
|||
module.sync(); |
|||
} |
|||
$.proxy(settings.onChange, element)(); |
|||
}, |
|||
|
|||
text: function() { |
|||
if( module.is.textEnabled() ) { |
|||
if(module.is.disabled() ) { |
|||
module.verbose('Changing text to disabled text', text.hover); |
|||
module.update.text(text.disabled); |
|||
} |
|||
else if( module.is.active() ) { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.hover); |
|||
module.update.text(text.hover); |
|||
} |
|||
else if(text.disable) { |
|||
module.verbose('Changing text to disable text', text.disable); |
|||
module.update.text(text.disable); |
|||
} |
|||
} |
|||
else { |
|||
if(text.hover) { |
|||
module.verbose('Changing text to hover text', text.disable); |
|||
module.update.text(text.hover); |
|||
} |
|||
else if(text.enable){ |
|||
module.verbose('Changing text to enable text', text.enable); |
|||
module.update.text(text.enable); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
activate: function() { |
|||
if( $.proxy(settings.activateTest, element)() ) { |
|||
module.debug('Setting state to active'); |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
module.update.text(text.active); |
|||
} |
|||
$.proxy(settings.onActivate, element)(); |
|||
}, |
|||
|
|||
deactivate: function() { |
|||
if($.proxy(settings.deactivateTest, element)() ) { |
|||
module.debug('Setting state to inactive'); |
|||
$module |
|||
.removeClass(className.active) |
|||
; |
|||
module.update.text(text.inactive); |
|||
} |
|||
$.proxy(settings.onDeactivate, element)(); |
|||
}, |
|||
|
|||
sync: function() { |
|||
module.verbose('Syncing other buttons to current state'); |
|||
if( module.is.active() ) { |
|||
$allModules |
|||
.not($module) |
|||
.state('activate'); |
|||
} |
|||
else { |
|||
$allModules |
|||
.not($module) |
|||
.state('deactivate') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
text: function() { |
|||
return (settings.selector.text) |
|||
? $module.find(settings.selector.text).text() |
|||
: $module.html() |
|||
; |
|||
}, |
|||
textFor: function(state) { |
|||
return text[state] || false; |
|||
} |
|||
}, |
|||
|
|||
flash: { |
|||
text: function(text, duration, callback) { |
|||
var |
|||
previousText = module.get.text() |
|||
; |
|||
module.debug('Flashing text message', text, duration); |
|||
text = text || settings.text.flash; |
|||
duration = duration || settings.flashDuration; |
|||
callback = callback || function() {}; |
|||
module.update.text(text); |
|||
setTimeout(function(){ |
|||
module.update.text(previousText); |
|||
$.proxy(callback, element)(); |
|||
}, duration); |
|||
} |
|||
}, |
|||
|
|||
reset: { |
|||
// on mouseout sets text to previous value
|
|||
text: function() { |
|||
var |
|||
activeText = text.active || $module.data(metadata.storedText), |
|||
inactiveText = text.inactive || $module.data(metadata.storedText) |
|||
; |
|||
if( module.is.textEnabled() ) { |
|||
if( module.is.active() && activeText) { |
|||
module.verbose('Resetting active text', activeText); |
|||
module.update.text(activeText); |
|||
} |
|||
else if(inactiveText) { |
|||
module.verbose('Resetting inactive text', activeText); |
|||
module.update.text(inactiveText); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
update: { |
|||
text: function(text) { |
|||
var |
|||
currentText = module.get.text() |
|||
; |
|||
if(text && text !== currentText) { |
|||
module.debug('Updating text', text); |
|||
if(settings.selector.text) { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.find(settings.selector.text) |
|||
.text(text) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.data(metadata.storedText, text) |
|||
.html(text) |
|||
; |
|||
} |
|||
} |
|||
else { |
|||
module.debug('Text is already sane, ignoring update', text); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
module.debug('Changing setting', name, value); |
|||
if(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
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.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
|
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.state.settings = { |
|||
|
|||
// module info
|
|||
name : 'State', |
|||
|
|||
// debug output
|
|||
debug : true, |
|||
|
|||
// verbose debug output
|
|||
verbose : true, |
|||
|
|||
// namespace for events
|
|||
namespace : 'state', |
|||
|
|||
// debug data includes performance
|
|||
performance: true, |
|||
|
|||
// callback occurs on state change
|
|||
onActivate : function() {}, |
|||
onDeactivate : function() {}, |
|||
onChange : function() {}, |
|||
|
|||
// state test functions
|
|||
activateTest : function() { return true; }, |
|||
deactivateTest : function() { return true; }, |
|||
|
|||
// whether to automatically map default states
|
|||
automatic : true, |
|||
|
|||
// activate / deactivate changes all elements instantiated at same time
|
|||
sync : false, |
|||
|
|||
// default flash text duration, used for temporarily changing text of an element
|
|||
flashDuration : 3000, |
|||
|
|||
// selector filter
|
|||
filter : { |
|||
text : '.loading, .disabled', |
|||
active : '.disabled' |
|||
}, |
|||
|
|||
context : false, |
|||
|
|||
// error
|
|||
error: { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
// metadata
|
|||
metadata: { |
|||
promise : 'promise', |
|||
storedText : 'stored-text' |
|||
}, |
|||
|
|||
// change class on state
|
|||
className: { |
|||
active : 'active', |
|||
disabled : 'disabled', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector: { |
|||
// selector for text node
|
|||
text: false |
|||
}, |
|||
|
|||
defaults : { |
|||
input: { |
|||
disabled : true, |
|||
loading : true, |
|||
active : true |
|||
}, |
|||
button: { |
|||
disabled : true, |
|||
loading : true, |
|||
active : true |
|||
} |
|||
}, |
|||
|
|||
states : { |
|||
disabled: true, |
|||
loading : true, |
|||
active : true |
|||
}, |
|||
|
|||
text : { |
|||
disabled : false, |
|||
flash : false, |
|||
hover : false, |
|||
active : false, |
|||
inactive : false, |
|||
enable : false, |
|||
disable : false |
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,621 +0,0 @@ |
|||
/* |
|||
* # Semantic - Visibility |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.visibility = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.visibility.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$window = $(window), |
|||
$container = $module.offsetParent(), |
|||
$context, |
|||
|
|||
selector = $module.selector || '', |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); }, |
|||
|
|||
element = this, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing visibility', settings); |
|||
|
|||
module.reset(); |
|||
module.save.position(); |
|||
module.bindEvents(); |
|||
module.instantiate(); |
|||
|
|||
setTimeout(module.checkVisibility, settings.loadWait); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module'); |
|||
$window |
|||
.off(eventNamespace) |
|||
; |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
bindEvents: function() { |
|||
$window |
|||
.on('resize', module.event.refresh) |
|||
.on('scroll', module.event.scroll) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
refresh: function() { |
|||
requestAnimationFrame(module.refresh); |
|||
}, |
|||
scroll: function() { |
|||
requestAnimationFrame(module.checkVisibility); |
|||
} |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.save.position(); |
|||
module.checkVisibility(); |
|||
$.proxy(settings.onRefresh, element)(); |
|||
}, |
|||
|
|||
reset: function() { |
|||
module.cache = { |
|||
screen : {}, |
|||
element : {} |
|||
}; |
|||
}, |
|||
|
|||
checkVisibility: function() { |
|||
module.verbose('Updating visibility of element', module.cache.element); |
|||
module.save.scroll(); |
|||
module.save.direction(); |
|||
module.save.screenCalculations(); |
|||
module.save.elementCalculations(); |
|||
|
|||
module.passed(); |
|||
module.passing(); |
|||
module.topVisible(); |
|||
module.bottomVisible(); |
|||
module.topPassed(); |
|||
module.bottomPassed(); |
|||
}, |
|||
|
|||
passing: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations(), |
|||
callback = newCallback || settings.onPassing |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for passing', newCallback); |
|||
settings.onPassing = newCallback; |
|||
} |
|||
if(callback && calculations.passing) { |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else { |
|||
return calculations.passing; |
|||
} |
|||
}, |
|||
|
|||
passed: function(amount, newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
amountInPixels |
|||
; |
|||
// assign callback
|
|||
if(amount !== undefined && newCallback !== undefined) { |
|||
settings.onPassed[amount] = newCallback; |
|||
} |
|||
else if(amount !== undefined) { |
|||
return (module.get.pixelsPassed(amount) > calculations.pixelsPassed); |
|||
} |
|||
else if(calculations.passing) { |
|||
$.each(settings.onPassed, function(amount, callback) { |
|||
if(calculations.bottomVisible || calculations.pixelsPassed > module.get.pixelsPassed(amount)) { |
|||
callback(); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
topVisible: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations(), |
|||
callback = newCallback || settings.onTopVisible |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top visible', newCallback); |
|||
settings.onTopVisible = newCallback; |
|||
} |
|||
if(callback && calculations.topVisible) { |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else { |
|||
return calculations.topVisible; |
|||
} |
|||
}, |
|||
|
|||
bottomVisible: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations(), |
|||
callback = newCallback || settings.onBottomVisible |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom visible', newCallback); |
|||
settings.onBottomVisible = newCallback; |
|||
} |
|||
if(callback && calculations.bottomVisible) { |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else { |
|||
return calculations.bottomVisible; |
|||
} |
|||
}, |
|||
|
|||
topPassed: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations(), |
|||
callback = newCallback || settings.onTopPassed |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for top passed', newCallback); |
|||
settings.onTopPassed = newCallback; |
|||
} |
|||
if(callback && calculations.topPassed) { |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else { |
|||
return calculations.topPassed; |
|||
} |
|||
}, |
|||
|
|||
bottomPassed: function(newCallback) { |
|||
var |
|||
calculations = module.get.elementCalculations(), |
|||
screen = module.get.screenCalculations(), |
|||
callback = newCallback || settings.onBottomPassed |
|||
; |
|||
if(newCallback) { |
|||
module.debug('Adding callback for bottom passed', newCallback); |
|||
settings.bottomPassed = newCallback; |
|||
} |
|||
if(callback && calculations.bottomPassed) { |
|||
$.proxy(callback, element)(calculations, screen); |
|||
} |
|||
else { |
|||
return calculations.bottomPassed; |
|||
} |
|||
}, |
|||
|
|||
save: { |
|||
scroll: function() { |
|||
module.cache.scroll = $window.scrollTop() + settings.offset; |
|||
}, |
|||
direction: function() { |
|||
var |
|||
scroll = module.get.scroll(), |
|||
lastScroll = module.get.lastScroll(), |
|||
direction |
|||
; |
|||
if(scroll > lastScroll && lastScroll) { |
|||
direction = 'down'; |
|||
} |
|||
else if(scroll < lastScroll && lastScroll) { |
|||
direction = 'up'; |
|||
} |
|||
else { |
|||
direction = 'static'; |
|||
} |
|||
module.cache.direction = direction; |
|||
return module.cache.direction; |
|||
}, |
|||
elementPosition: function() { |
|||
var |
|||
screen = module.get.screenSize() |
|||
; |
|||
module.verbose('Saving element position'); |
|||
$.extend(module.cache.element, { |
|||
margin : { |
|||
top : parseInt($module.css('margin-top'), 10), |
|||
bottom : parseInt($module.css('margin-bottom'), 10) |
|||
}, |
|||
fits : (element.height < screen.height), |
|||
offset : $module.offset(), |
|||
width : $module.outerWidth(), |
|||
height : $module.outerHeight() |
|||
}); |
|||
return module.cache.element; |
|||
}, |
|||
elementCalculations: function() { |
|||
var |
|||
screen = module.get.screenCalculations(), |
|||
element = module.get.elementPosition() |
|||
; |
|||
// offset
|
|||
if(settings.includeMargin) { |
|||
$.extend(module.cache.element, { |
|||
top : element.offset.top - element.margin.top, |
|||
bottom : element.offset.top + element.height + element.margin.bottom |
|||
}); |
|||
} |
|||
else { |
|||
$.extend(module.cache.element, { |
|||
top : element.offset.top, |
|||
bottom : element.offset.top + element.height |
|||
}); |
|||
} |
|||
// visibility
|
|||
$.extend(module.cache.element, { |
|||
topVisible : (screen.bottom > element.top), |
|||
topPassed : (screen.top > element.top), |
|||
bottomVisible : (screen.bottom > element.bottom), |
|||
bottomPassed : (screen.top > element.bottom), |
|||
pixelsPassed : 0, |
|||
percentagePassed : 0 |
|||
}); |
|||
// meta calculations
|
|||
$.extend(module.cache.element, { |
|||
visible : (module.cache.element.topVisible || module.cache.element.bottomVisible), |
|||
passing : (module.cache.element.topPassed && !module.cache.element.bottomPassed), |
|||
hidden : (!module.cache.element.topVisible && !module.cache.element.bottomVisible) |
|||
}); |
|||
if(module.cache.element.passing) { |
|||
module.cache.element.pixelsPassed = (screen.top - element.top); |
|||
module.cache.element.percentagePassed = (screen.top - element.top) / element.height; |
|||
} |
|||
module.verbose('Updated element calculations', module.cache.element); |
|||
}, |
|||
screenCalculations: function() { |
|||
var |
|||
scroll = $window.scrollTop() |
|||
; |
|||
if(module.cache.scroll === undefined) { |
|||
module.cache.scroll = $window.scrollTop(); |
|||
} |
|||
module.save.direction(); |
|||
$.extend(module.cache.screen, { |
|||
top : scroll + settings.offset, |
|||
bottom : scroll + settings.offset + module.cache.screen.height |
|||
}); |
|||
return module.cache.screen; |
|||
}, |
|||
screenSize: function() { |
|||
module.verbose('Saving window position'); |
|||
module.cache.screen = { |
|||
height: $window.height() |
|||
}; |
|||
}, |
|||
position: function() { |
|||
module.save.screenSize(); |
|||
module.save.elementPosition(); |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
pixelsPassed: function(amount) { |
|||
var |
|||
element = module.get.elementCalculations() |
|||
; |
|||
if(amount.search('%') > -1) { |
|||
return ( element.height * (parseInt(amount, 10) / 100) ); |
|||
} |
|||
return parseInt(amount, 10); |
|||
}, |
|||
direction: function() { |
|||
if(module.cache.direction === undefined) { |
|||
module.save.direction(); |
|||
} |
|||
return module.cache.direction; |
|||
}, |
|||
elementPosition: function() { |
|||
if(module.cache.element === undefined) { |
|||
module.save.elementPosition(); |
|||
} |
|||
return module.cache.element; |
|||
}, |
|||
elementCalculations: function() { |
|||
if(module.cache.element === undefined) { |
|||
module.save.elementCalculations(); |
|||
} |
|||
return module.cache.element; |
|||
}, |
|||
screenCalculations: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.save.screenCalculations(); |
|||
} |
|||
return module.cache.screen; |
|||
}, |
|||
screenSize: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.save.screenSize(); |
|||
} |
|||
return module.cache.screen; |
|||
}, |
|||
scroll: function() { |
|||
if(module.cache.scroll === undefined) { |
|||
module.save.scroll(); |
|||
} |
|||
return module.cache.scroll; |
|||
}, |
|||
lastScroll: function() { |
|||
if(module.cache.screen === undefined) { |
|||
module.debug('First scroll event, no last scroll could be found'); |
|||
return false; |
|||
} |
|||
return module.cache.screen.top; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.visibility.settings = { |
|||
|
|||
name : 'Visibility', |
|||
namespace : 'visibility', |
|||
|
|||
verbose : false, |
|||
debug : false, |
|||
performance : true, |
|||
|
|||
loadWait : 1000, |
|||
|
|||
watch : true, |
|||
offset : 0, |
|||
includeMargin : false, |
|||
|
|||
// array of callbacks
|
|||
onPassed : {}, |
|||
|
|||
// standard callbacks
|
|||
onPassing : false, |
|||
onTopVisible : false, |
|||
onBottomVisible : false, |
|||
onTopPassed : false, |
|||
onBottomPassed : false, |
|||
|
|||
// utility callbacks
|
|||
onRefresh : function(){}, |
|||
onScroll : function(){}, |
|||
|
|||
watchedProperties : [ |
|||
'offsetWidth', |
|||
'offsetHeight', |
|||
'top', |
|||
'left' |
|||
], |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,77 +0,0 @@ |
|||
/* |
|||
* # Semantic - Breadcrumb |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Breadcrumb |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb { |
|||
margin: 1em 0em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.breadcrumb:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.breadcrumb:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .divider { |
|||
display: inline-block; |
|||
opacity: 0.5; |
|||
margin: 0em 0.15em 0em; |
|||
|
|||
font-size: 1em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.ui.breadcrumb a.section { |
|||
cursor: pointer; |
|||
} |
|||
.ui.breadcrumb .section { |
|||
display: inline-block; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
/* Loose Coupling */ |
|||
.ui.breadcrumb.segment { |
|||
display: inline-block; |
|||
padding: 0.5em 1em; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.breadcrumb .active.section { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.breadcrumb { |
|||
font-size: 0.75em; |
|||
} |
|||
.ui.large.breadcrumb { |
|||
font-size: 1.1em; |
|||
} |
|||
.ui.huge.breadcrumb { |
|||
font-size: 1.3em; |
|||
} |
|||
@ -1,618 +0,0 @@ |
|||
/* |
|||
* # Semantic - Form |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'collection'; |
|||
@element : 'form'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Form |
|||
---------------------*/ |
|||
|
|||
.ui.form { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Content |
|||
---------------------*/ |
|||
|
|||
.ui.form > p { |
|||
margin: @paragraphMargin; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field |
|||
---------------------*/ |
|||
|
|||
.ui.form .field { |
|||
clear: both; |
|||
margin: @fieldMargin; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labels |
|||
---------------------*/ |
|||
|
|||
.ui.form .field > label { |
|||
margin: 0em 0em @labelMargin 0em; |
|||
display: block; |
|||
|
|||
color: @labelColor; |
|||
font-size: @labelFontSize; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Standard Inputs |
|||
---------------------*/ |
|||
|
|||
|
|||
.ui.form textarea, |
|||
.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"], |
|||
.ui.form .ui.input { |
|||
width: 100%; |
|||
} |
|||
|
|||
.ui.form textarea, |
|||
.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"] { |
|||
margin: 0em; |
|||
padding: @inputVerticalPadding @inputHorizontalPadding; |
|||
font-size: @inputFontSize; |
|||
|
|||
background: @inputBackground; |
|||
border: @inputBorder; |
|||
outline: none; |
|||
|
|||
color: rgba(0, 0, 0, 0.7); |
|||
border-radius: 0.3125em; |
|||
box-shadow: @inputBoxShadow; |
|||
|
|||
-webkit-appearance: none; |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
box-sizing: border-box; |
|||
transition: @inputTransition; |
|||
} |
|||
|
|||
.ui.textarea, |
|||
.ui.form textarea { |
|||
font-size: @textAreaFontSize; |
|||
|
|||
height: @textAreaHeight; |
|||
min-height: @textAreaMinHeight; |
|||
max-height: @textAreaMaxHeight; |
|||
line-height: @textAreaLineHeight; |
|||
resize: @textAreaResize; |
|||
} |
|||
|
|||
.ui.form textarea, |
|||
.ui.form input[type="checkbox"] { |
|||
vertical-align: @checkboxVerticalAlign; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Dropdown |
|||
---------------------*/ |
|||
|
|||
.ui.form .field > .selection.dropdown { |
|||
width: 100%; |
|||
} |
|||
.ui.form .field > .selection.dropdown > .dropdown.icon { |
|||
float: right; |
|||
} |
|||
|
|||
.ui.form .inline.field > .selection.dropdown { |
|||
width: auto; |
|||
} |
|||
.ui.form .inline.field > .selection.dropdown > .dropdown.icon { |
|||
float: none; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Dividers |
|||
---------------------*/ |
|||
|
|||
.ui.form .divider { |
|||
clear: both; |
|||
margin: @dividerMargin; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Types of Messages |
|||
---------------------*/ |
|||
|
|||
.ui.form .info.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: nowrap; |
|||
} |
|||
.ui.form .inline.field .prompt { |
|||
margin: @validationMargin; |
|||
} |
|||
.ui.form .inline.field .prompt:before { |
|||
margin-top: @validationArrowOffset; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Placeholder |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.form ::-webkit-input-placeholder { |
|||
color: @inputPlaceholderColor; |
|||
} |
|||
.ui.form ::-moz-placeholder { |
|||
color: @inputPlaceholderColor; |
|||
} |
|||
.ui.form :focus::-webkit-input-placeholder { |
|||
color: @inputPlaceholderFocusColor; |
|||
} |
|||
.ui.form :focus::-moz-placeholder { |
|||
color: @inputPlaceholderFocusColor; |
|||
} |
|||
|
|||
/* Error Placeholder */ |
|||
.ui.form .error ::-webkit-input-placeholder { |
|||
color: @inputErrorPlaceholderColor; |
|||
} |
|||
.ui.form .error ::-moz-placeholder { |
|||
color: @inputErrorPlaceholderColor; |
|||
} |
|||
.ui.form .error :focus::-webkit-input-placeholder { |
|||
color: @inputErrorPlaceholderFocusColor; |
|||
} |
|||
.ui.form .error :focus::-moz-placeholder { |
|||
color: @inputErrorPlaceholderFocusColor; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.form input[type="text"]:focus, |
|||
.ui.form input[type="email"]:focus, |
|||
.ui.form input[type="date"]:focus, |
|||
.ui.form input[type="password"]:focus, |
|||
.ui.form input[type="number"]:focus, |
|||
.ui.form input[type="url"]:focus, |
|||
.ui.form input[type="tel"]:focus, |
|||
.ui.form textarea:focus{ |
|||
color: @inputFocusColor; |
|||
border-color: @inputFocusBorderColor; |
|||
border-radius: @inputFocusBorderRadius; |
|||
background: @inputFocusBackground; |
|||
box-shadow: @inputFocusBoxShadow; |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.warning .warning.message { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Warning |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.error .error.message { |
|||
display: block; |
|||
} |
|||
|
|||
/* 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 input[type="text"], |
|||
.ui.form .fields.error .field input[type="email"], |
|||
.ui.form .fields.error .field input[type="date"], |
|||
.ui.form .fields.error .field input[type="password"], |
|||
.ui.form .fields.error .field input[type="number"], |
|||
.ui.form .fields.error .field input[type="url"], |
|||
.ui.form .fields.error .field input[type="tel"], |
|||
.ui.form .field.error textarea, |
|||
.ui.form .field.error input[type="text"], |
|||
.ui.form .field.error input[type="email"], |
|||
.ui.form .field.error input[type="date"], |
|||
.ui.form .field.error input[type="password"], |
|||
.ui.form .field.error input[type="number"], |
|||
.ui.form .field.error input[type="url"], |
|||
.ui.form .field.error input[type="tel"] { |
|||
background: @formErrorBackground; |
|||
border-color: @formErrorBorder; |
|||
color: @formErrorColor; |
|||
border-radius: @inputErrorBorderRadius; |
|||
box-shadow: @inputErrorBoxShadow; |
|||
} |
|||
.ui.form .field.error textarea:focus, |
|||
.ui.form .field.error input[type="text"]:focus, |
|||
.ui.form .field.error input[type="email"]:focus, |
|||
.ui.form .field.error input[type="date"]:focus, |
|||
.ui.form .field.error input[type="password"]:focus, |
|||
.ui.form .field.error input[type="number"]:focus, |
|||
.ui.form .field.error input[type="url"]:focus, |
|||
.ui.form .field.error input[type="tel"]:focus{ |
|||
border-color: @formErrorFocusBorder; |
|||
color: @formErrorFocusColor; |
|||
|
|||
-webkit-appearance: none; |
|||
box-shadow: @inputErrorFocusBoxShadow; |
|||
} |
|||
/*------------------ |
|||
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 { |
|||
box-shadow: 0px 0px 0px 1px @formErrorBorder !important; |
|||
} |
|||
.ui.form .fields.error .field .ui.dropdown:hover, |
|||
.ui.form .field.error .ui.dropdown:hover { |
|||
box-shadow: 0px 0px 0px 1px @formErrorBorder !important; |
|||
} |
|||
.ui.form .fields.error .field .ui.dropdown:hover .menu, |
|||
.ui.form .field.error .ui.dropdown:hover .menu { |
|||
box-shadow: 0px 1px 0px 1px @formErrorBorder; |
|||
} |
|||
/* Hover */ |
|||
.ui.form .fields.error .field .ui.dropdown .menu .item:hover, |
|||
.ui.form .field.error .ui.dropdown .menu .item:hover { |
|||
background-color: @dropdownErrorHoverBackground; |
|||
} |
|||
/* 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 .field :disabled, |
|||
.ui.form .field.disabled { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled label { |
|||
opacity: 0.5; |
|||
} |
|||
.ui.form .field.disabled :disabled { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Loading State |
|||
---------------------*/ |
|||
|
|||
/* On Form */ |
|||
.ui.form.loading { |
|||
position: relative; |
|||
} |
|||
.ui.form.loading:after { |
|||
position: absolute; |
|||
top: 0%; |
|||
left: 0%; |
|||
content: ''; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
background: @formLoaderDimmerColor @formLoaderPath no-repeat @formLoaderPosition; |
|||
visibility: visible; |
|||
} |
|||
|
|||
/******************************* |
|||
Element Types |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Required Field |
|||
---------------------*/ |
|||
|
|||
.ui.form .required.field > label:after, |
|||
.ui.form .required.field > .checkbox:after { |
|||
margin: -0.2em 0em 0em 0.2em; |
|||
vertical-align: top; |
|||
content: '*'; |
|||
color: @requiredColor; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Date Input |
|||
---------------------*/ |
|||
|
|||
.ui.form .date.field > label { |
|||
position: relative; |
|||
} |
|||
.ui.form .date.field > label:after { |
|||
position: absolute; |
|||
top: 2em; |
|||
right: 0.5em; |
|||
font-family: 'Icons'; |
|||
content: '\f133'; |
|||
font-size: 1.2em; |
|||
font-weight: normal; |
|||
color: #CCCCCC; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------------------- |
|||
Input w/ attached Button |
|||
---------------------------*/ |
|||
|
|||
.ui.form input.attached { |
|||
width: auto; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inverted Colors |
|||
---------------------*/ |
|||
.ui.inverted.form label { |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.form .field.error textarea, |
|||
.ui.inverted.form .field.error input[type="text"], |
|||
.ui.inverted.form .field.error input[type="email"], |
|||
.ui.inverted.form .field.error input[type="date"], |
|||
.ui.inverted.form .field.error input[type="password"], |
|||
.ui.inverted.form .field.error input[type="number"], |
|||
.ui.inverted.form .field.error input[type="url"], |
|||
.ui.inverted.form .field.error input[type="tel"]{ |
|||
background-color: #FFCCCC; |
|||
} |
|||
|
|||
.ui.inverted.form .ui.checkbox label { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
.ui.inverted.form .ui.checkbox label:hover, |
|||
.ui.inverted.form .ui.checkbox .box:hover { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Field Groups |
|||
---------------------*/ |
|||
|
|||
/* Grouped Vertically */ |
|||
.ui.form .grouped.fields { |
|||
margin: 0em 0em 1em; |
|||
} |
|||
.ui.form .grouped.fields .field { |
|||
display: block; |
|||
float: none; |
|||
margin: 0.5em 0em; |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Fields |
|||
---------------------*/ |
|||
|
|||
/* Split fields */ |
|||
.ui.form .fields { |
|||
clear: both; |
|||
} |
|||
.ui.form .fields:after { |
|||
content: ' '; |
|||
display: block; |
|||
clear: both; |
|||
visibility: hidden; |
|||
line-height: 0; |
|||
height: 0; |
|||
} |
|||
.ui.form .fields > .field { |
|||
clear: none; |
|||
float: left; |
|||
box-sizing: border-box; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.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: 50%; |
|||
} |
|||
.ui.form .three.fields > .fields, |
|||
.ui.form .three.fields > .field { |
|||
width: 33.333%; |
|||
} |
|||
.ui.form .four.fields > .fields, |
|||
.ui.form .four.fields > .field { |
|||
width: 25%; |
|||
} |
|||
.ui.form .five.fields > .fields, |
|||
.ui.form .five.fields > .field { |
|||
width: 20%; |
|||
} |
|||
|
|||
/* Swap to full width on mobile */ |
|||
@media only screen and (max-width : 767px) { |
|||
.ui.form .two.fields > .fields, |
|||
.ui.form .two.fields > .field, |
|||
.ui.form .three.fields > .fields, |
|||
.ui.form .three.fields > .field, |
|||
.ui.form .four.fields > .fields, |
|||
.ui.form .four.fields > .field, |
|||
.ui.form .five.fields > .fields, |
|||
.ui.form .five.fields > .field { |
|||
width: 100%; |
|||
padding-left: 0%; |
|||
padding-right: 0%; |
|||
} |
|||
} |
|||
|
|||
.ui.form .fields .field:first-child { |
|||
padding-left: 0%; |
|||
} |
|||
.ui.form .fields .field:last-child { |
|||
padding-right: 0%; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Inline Fields |
|||
---------------------*/ |
|||
|
|||
.ui.form .inline.fields .field { |
|||
margin: @inlineFieldsMargin; |
|||
} |
|||
.ui.form .inline.fields .field > label, |
|||
.ui.form .inline.fields .field > p, |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.field > label, |
|||
.ui.form .inline.field > p, |
|||
.ui.form .inline.field > input { |
|||
|
|||
display: inline-block; |
|||
width: auto; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
vertical-align: middle; |
|||
font-size: 1em; |
|||
} |
|||
.ui.form .inline.fields .field > input, |
|||
.ui.form .inline.field > input { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Label */ |
|||
.ui.form .inline.fields .field > :first-child, |
|||
.ui.form .inline.field > :first-child { |
|||
margin: 0em @labelMargin 0em 0em; |
|||
} |
|||
.ui.form .inline.fields .field > :only-child, |
|||
.ui.form .inline.field > :only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.small.form { |
|||
font-size: @small; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.form { |
|||
font-size: @large; |
|||
} |
|||
|
|||
@ -1,882 +0,0 @@ |
|||
/* |
|||
* # Semantic - Grid |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'collection'; |
|||
@element : 'grid'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
.ui.grid { |
|||
display: block; |
|||
text-align: left; |
|||
|
|||
font-size: 0em; |
|||
margin: 0%; |
|||
padding: 0%; |
|||
|
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
body > .ui.grid { |
|||
margin-left: 0% !important; |
|||
margin-right: 0% !important; |
|||
} |
|||
|
|||
.ui.grid:after, |
|||
.ui.row:after { |
|||
content: "."; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*------------------- |
|||
Columns |
|||
--------------------*/ |
|||
|
|||
/* Standard 16 column */ |
|||
.ui.grid > .column, |
|||
.ui.grid > .row > .column { |
|||
|
|||
display: inline-block; |
|||
text-align: left; |
|||
font-size: 1rem; |
|||
|
|||
width: @oneWide; |
|||
padding-left: @gutterWidth; |
|||
padding-right: @gutterWidth; |
|||
|
|||
box-sizing: border-box; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/*------------------- |
|||
Rows |
|||
--------------------*/ |
|||
|
|||
.ui.grid > .row { |
|||
display: block; |
|||
width: 100% !important; |
|||
margin-top: (@rowSpacing / 2); |
|||
padding: (@rowSpacing / 2) 0% 0%; |
|||
font-size: 0rem; |
|||
} |
|||
.ui.grid > .row:first-child { |
|||
padding-top: @firstRowSpacing; |
|||
margin-top: @firstRowSpacing; |
|||
} |
|||
|
|||
/*------------------- |
|||
Columns |
|||
--------------------*/ |
|||
|
|||
|
|||
/* Vertical padding when no rows */ |
|||
.ui.grid > .column { |
|||
margin-top: @rowSpacing; |
|||
margin-bottom: @rowSpacing; |
|||
} |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
|
|||
.ui.grid > .row > img, |
|||
.ui.grid > .row > .column > img { |
|||
max-width: @columnMaxImageWidth; |
|||
} |
|||
.ui.grid .column > .ui.segment:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*----------------------- |
|||
Page Grid (Responsive) |
|||
-------------------------*/ |
|||
|
|||
.ui.page.grid { |
|||
min-width: @minWidth; |
|||
padding-left: 0%; |
|||
padding-right: 0%; |
|||
margin-left: @computerGutter; |
|||
margin-right: @computerGutter; |
|||
} |
|||
|
|||
@media only screen and (max-width : (@tabletBreakpoint - 1)) { |
|||
.ui.page.grid { |
|||
margin-left: @mobileGutter; |
|||
margin-right: @mobileGutter; |
|||
} |
|||
} |
|||
@media only screen and (min-width : @tabletBreakpoint) { |
|||
.ui.page.grid { |
|||
margin-left: @tabletGutter; |
|||
margin-right: @tabletGutter; |
|||
} |
|||
} |
|||
@media only screen and (min-width : @computerBreakpoint) { |
|||
.ui.page.grid { |
|||
margin-left: @computerGutter; |
|||
margin-right: @computerGutter; |
|||
} |
|||
} |
|||
@media only screen and (min-width : @largeMonitorBreakpoint) { |
|||
.ui.page.grid { |
|||
margin-left: @largeMonitorGutter; |
|||
margin-right: @largeMonitorGutter; |
|||
} |
|||
} |
|||
@media only screen and (min-width : @widescreenMonitorBreakpoint) { |
|||
.ui.page.grid { |
|||
margin-left: @widescreenMonitorGutter; |
|||
margin-right: @widescreenMonitorGutter; |
|||
} |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Width |
|||
--------------------*/ |
|||
|
|||
/* Sizing Combinations */ |
|||
.ui.grid > .row > .one.wide.column, |
|||
.ui.grid > .column.row > .one.wide.column, |
|||
.ui.grid > .one.wide.column, |
|||
.ui.column.grid > .one.wide.column { |
|||
width: @oneWide !important; |
|||
} |
|||
.ui.grid > .row > .two.wide.column, |
|||
.ui.grid > .column.row > .two.wide.column, |
|||
.ui.grid > .two.wide.column, |
|||
.ui.column.grid > .two.wide.column { |
|||
width: @twoWide !important; |
|||
} |
|||
.ui.grid > .row > .three.wide.column, |
|||
.ui.grid > .column.row > .three.wide.column, |
|||
.ui.grid > .three.wide.column, |
|||
.ui.column.grid > .three.wide.column { |
|||
width: @threeWide !important; |
|||
} |
|||
.ui.grid > .row > .four.wide.column, |
|||
.ui.grid > .column.row > .four.wide.column, |
|||
.ui.grid > .four.wide.column, |
|||
.ui.column.grid > .four.wide.column { |
|||
width: @fourWide !important; |
|||
} |
|||
.ui.grid > .row > .five.wide.column, |
|||
.ui.grid > .column.row > .five.wide.column, |
|||
.ui.grid > .five.wide.column, |
|||
.ui.column.grid > .five.wide.column { |
|||
width: @fiveWide !important; |
|||
} |
|||
.ui.grid > .row > .six.wide.column, |
|||
.ui.grid > .column.row > .six.wide.column, |
|||
.ui.grid > .six.wide.column, |
|||
.ui.column.grid > .six.wide.column { |
|||
width: @sixWide !important; |
|||
} |
|||
.ui.grid > .row > .seven.wide.column, |
|||
.ui.grid > .column.row > .seven.wide.column, |
|||
.ui.grid > .seven.wide.column, |
|||
.ui.column.grid > .seven.wide.column { |
|||
width: @sevenWide !important; |
|||
} |
|||
.ui.grid > .row > .eight.wide.column, |
|||
.ui.grid > .column.row > .eight.wide.column, |
|||
.ui.grid > .eight.wide.column, |
|||
.ui.column.grid > .eight.wide.column { |
|||
width: @eightWide !important; |
|||
} |
|||
.ui.grid > .row > .nine.wide.column, |
|||
.ui.grid > .column.row > .nine.wide.column, |
|||
.ui.grid > .nine.wide.column, |
|||
.ui.column.grid > .nine.wide.column { |
|||
width: @nineWide !important; |
|||
} |
|||
.ui.grid > .row > .ten.wide.column, |
|||
.ui.grid > .column.row > .ten.wide.column, |
|||
.ui.grid > .ten.wide.column, |
|||
.ui.column.grid > .ten.wide.column { |
|||
width: @tenWide !important; |
|||
} |
|||
.ui.grid > .row > .eleven.wide.column, |
|||
.ui.grid > .column.row > .eleven.wide.column, |
|||
.ui.grid > .eleven.wide.column, |
|||
.ui.column.grid > .eleven.wide.column { |
|||
width: @elevenWide !important; |
|||
} |
|||
.ui.grid > .row > .twelve.wide.column, |
|||
.ui.grid > .column.row > .twelve.wide.column, |
|||
.ui.grid > .twelve.wide.column, |
|||
.ui.column.grid > .twelve.wide.column { |
|||
width: @twelveWide !important; |
|||
} |
|||
.ui.grid > .row > .thirteen.wide.column, |
|||
.ui.grid > .column.row > .thirteen.wide.column, |
|||
.ui.grid > .thirteen.wide.column, |
|||
.ui.column.grid > .thirteen.wide.column { |
|||
width: @thirteenWide !important; |
|||
} |
|||
.ui.grid > .row > .fourteen.wide.column, |
|||
.ui.grid > .column.row > .fourteen.wide.column, |
|||
.ui.grid > .fourteen.wide.column, |
|||
.ui.column.grid > .fourteen.wide.column { |
|||
width: @fourteenWide !important; |
|||
} |
|||
.ui.grid > .row > .fifteen.wide.column, |
|||
.ui.grid > .column.row > .fifteen.wide.column, |
|||
.ui.grid > .fifteen.wide.column, |
|||
.ui.column.grid > .fifteen.wide.column { |
|||
width: @fifteenWide !important; |
|||
} |
|||
.ui.grid > .row > .sixteen.wide.column, |
|||
.ui.grid > .column.row > .sixteen.wide.column, |
|||
.ui.grid > .sixteen.wide.column, |
|||
.ui.column.grid > .sixteen.wide.column { |
|||
width: @sixteenWide !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Column Count |
|||
--------------------*/ |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.one.column.grid > .row > .column, |
|||
.ui.one.column.grid > .column, |
|||
.ui.grid > .one.column.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.two.column.grid > .row > .column, |
|||
.ui.two.column.grid > .column, |
|||
.ui.grid > .two.column.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.three.column.grid > .row > .column, |
|||
.ui.three.column.grid > .column, |
|||
.ui.grid > .three.column.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.four.column.grid > .row > .column, |
|||
.ui.four.column.grid > .column, |
|||
.ui.grid > .four.column.row > .column { |
|||
width: @fourColumn; |
|||
} |
|||
.ui.five.column.grid > .row > .column, |
|||
.ui.five.column.grid > .column, |
|||
.ui.grid > .five.column.row > .column { |
|||
width: @fiveColumn; |
|||
} |
|||
.ui.six.column.grid > .row > .column, |
|||
.ui.six.column.grid > .column, |
|||
.ui.grid > .six.column.row > .column { |
|||
width: @sixColumn; |
|||
} |
|||
.ui.seven.column.grid > .row > .column, |
|||
.ui.seven.column.grid > .column, |
|||
.ui.grid > .seven.column.row > .column { |
|||
width: @sevenColumn; |
|||
} |
|||
.ui.eight.column.grid > .row > .column, |
|||
.ui.eight.column.grid > .column, |
|||
.ui.grid > .eight.column.row > .column { |
|||
width: @eightColumn; |
|||
} |
|||
.ui.nine.column.grid > .row > .column, |
|||
.ui.nine.column.grid > .column, |
|||
.ui.grid > .nine.column.row > .column { |
|||
width: @nineColumn; |
|||
} |
|||
.ui.ten.column.grid > .row > .column, |
|||
.ui.ten.column.grid > .column, |
|||
.ui.grid > .ten.column.row > .column { |
|||
width: @tenColumn; |
|||
} |
|||
.ui.eleven.column.grid > .row > .column, |
|||
.ui.eleven.column.grid > .column, |
|||
.ui.grid > .eleven.column.row > .column { |
|||
width: @elevenColumn; |
|||
} |
|||
.ui.twelve.column.grid > .row > .column, |
|||
.ui.twelve.column.grid > .column, |
|||
.ui.grid > .twelve.column.row > .column { |
|||
width: @twelveColumn; |
|||
} |
|||
.ui.thirteen.column.grid > .row > .column, |
|||
.ui.thirteen.column.grid > .column, |
|||
.ui.grid > .thirteen.column.row > .column { |
|||
width: @thirteenColumn; |
|||
} |
|||
.ui.fourteen.column.grid > .row > .column, |
|||
.ui.fourteen.column.grid > .column, |
|||
.ui.grid > .fourteen.column.row > .column { |
|||
width: @fourteenColumn; |
|||
} |
|||
.ui.fifteen.column.grid > .row > .column, |
|||
.ui.fifteen.column.grid > .column, |
|||
.ui.grid > .fifteen.column.row > .column { |
|||
width: @fifteenColumn; |
|||
} |
|||
.ui.sixteen.column.grid > .row > .column, |
|||
.ui.sixteen.column.grid > .column, |
|||
.ui.grid > .sixteen.column.row > .column { |
|||
width: @sixteenColumn; |
|||
} |
|||
|
|||
/* Assume full width with one column */ |
|||
.ui.grid > .column:only-child, |
|||
.ui.grid > .row > .column:only-child { |
|||
width: @oneColumn; |
|||
} |
|||
|
|||
|
|||
|
|||
/*---------------------- |
|||
Relaxed |
|||
-----------------------*/ |
|||
|
|||
.ui.relaxed.grid > .column, |
|||
.ui.relaxed.grid > .row > .column { |
|||
padding-left: @relaxedGutterWidth; |
|||
padding-right: @relaxedGutterWidth; |
|||
} |
|||
|
|||
.ui.very.relaxed.grid > .column, |
|||
.ui.very.relaxed.grid > .row > .column { |
|||
padding-left: @veryRelaxedGutterWidth; |
|||
padding-right: @veryRelaxedGutterWidth; |
|||
} |
|||
|
|||
.ui.vertically.divided.grid > .row:before { |
|||
margin-left: @relaxedGutterWidth; |
|||
margin-right: @relaxedGutterWidth; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Fitted |
|||
-----------------------*/ |
|||
|
|||
.ui.fitted.grid { |
|||
margin-left: -@gutterWidth; |
|||
margin-right: -@gutterWidth; |
|||
} |
|||
|
|||
.ui.relaxed.fitted.grid { |
|||
margin-left: -@relaxedGutterWidth; |
|||
margin-right: -@relaxedGutterWidth; |
|||
} |
|||
|
|||
.ui.vertically.divided.fitted.grid > .row:before { |
|||
margin-left: 0%; |
|||
margin-right: 0%; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
"Floated" |
|||
-----------------------*/ |
|||
|
|||
.ui.grid .left.floated.column { |
|||
float: left; |
|||
} |
|||
.ui.grid .right.floated.column { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Divided |
|||
-----------------------*/ |
|||
|
|||
.ui.divided.grid:not(.vertically), |
|||
.ui.divided.grid:not(.vertically) > .row { |
|||
display: table; |
|||
max-width: 100%; |
|||
} |
|||
.ui.divided.grid:not(.vertically) > .column:not(.row), |
|||
.ui.divided.grid:not(.vertically) > .row > .column { |
|||
display: table-cell; |
|||
box-shadow: @dividedBorder; |
|||
} |
|||
.ui.divided.grid:not(.vertically) > .column.row { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.divided.grid:not(.vertically) > .column:first-child, |
|||
.ui.divided.grid:not(.vertically) > .row > .column:first-child { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Divided Row */ |
|||
.ui.grid > .divided.row { |
|||
display: table; |
|||
} |
|||
.ui.grid > .divided.row > .column { |
|||
display: table-cell; |
|||
box-shadow: @dividedBorder; |
|||
} |
|||
.ui.grid > .divided.row > .column:first-child { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Vertically Divided */ |
|||
.ui.vertically.divided.grid > .row { |
|||
position: relative; |
|||
} |
|||
.ui.vertically.divided.grid > .row:before { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 0px; |
|||
left: 0px; |
|||
|
|||
width: 100%; |
|||
height: 1px; |
|||
|
|||
margin: 0% @gutterWidth; |
|||
box-shadow: @verticallyDividedBorder; |
|||
} |
|||
.ui.vertically.divided.grid > .row:first-child:before { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/* Inverted Divided */ |
|||
.ui.inverted.divided.grid > .row { |
|||
box-shadow: @dividedInvertedBorder; |
|||
} |
|||
.ui.inverted.vertically.divided.grid > .row { |
|||
box-shadow: @verticallyDividedInvertedBorder; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Celled |
|||
-----------------------*/ |
|||
|
|||
.ui.celled.grid { |
|||
display: table; |
|||
max-width: 100%; |
|||
box-shadow: 0px 0px 0px @celledWidth @celledBorderColor; |
|||
} |
|||
.ui.celled.grid > .row, |
|||
.ui.celled.grid > .column.row, |
|||
.ui.celled.grid > .column.row:first-child { |
|||
display: table; |
|||
width: 100%; |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
box-shadow: 0px (-@celledWidth) 0px 0px @celledBorderColor; |
|||
} |
|||
.ui.celled.grid > .column:not(.row), |
|||
.ui.celled.grid > .row > .column { |
|||
display: table-cell; |
|||
padding: 0.75em; |
|||
box-shadow: (-@celledWidth) 0px 0px 0px @celledBorderColor; |
|||
} |
|||
.ui.celled.grid > .column:first-child, |
|||
.ui.celled.grid > .row > .column:first-child { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.ui.celled.page.grid { |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
|
|||
/*---------------------- |
|||
Horizontally Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.left.aligned.grid, |
|||
.ui.left.aligned.grid > .row > .column, |
|||
.ui.left.aligned.grid > .column, |
|||
.ui.grid .left.aligned.column, |
|||
.ui.grid > .left.aligned.row > .column { |
|||
text-align: left; |
|||
} |
|||
.ui.center.aligned.grid, |
|||
.ui.center.aligned.grid > .row > .column, |
|||
.ui.center.aligned.grid > .column, |
|||
.ui.grid .center.aligned.column, |
|||
.ui.grid > .center.aligned.row > .column { |
|||
text-align: center; |
|||
} |
|||
.ui.right.aligned.grid, |
|||
.ui.right.aligned.grid > .row > .column, |
|||
.ui.right.aligned.grid > .column, |
|||
.ui.grid .right.aligned.column, |
|||
.ui.grid > .right.aligned.row > .column { |
|||
text-align: right; |
|||
} |
|||
|
|||
.ui.justified.grid, |
|||
.ui.justified.grid > .row > .column, |
|||
.ui.justified.grid > .column, |
|||
.ui.grid .justified.column, |
|||
.ui.grid > .justified.row > .column { |
|||
text-align: justify; |
|||
hyphens: auto; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Vertically Centered |
|||
-----------------------*/ |
|||
|
|||
/* Vertical Centered */ |
|||
.ui.top.aligned.grid, |
|||
.ui.top.aligned.grid > .row > .column, |
|||
.ui.top.aligned.grid > .column, |
|||
.ui.grid .top.aligned.column, |
|||
.ui.grid > .top.aligned.row > .column { |
|||
vertical-align: top; |
|||
} |
|||
.ui.middle.aligned.grid, |
|||
.ui.middle.aligned.grid > .row > .column, |
|||
.ui.middle.aligned.grid > .column, |
|||
.ui.grid .middle.aligned.column, |
|||
.ui.grid > .middle.aligned.row > .column { |
|||
vertical-align: middle; |
|||
} |
|||
.ui.bottom.aligned.grid, |
|||
.ui.bottom.aligned.grid > .row > .column, |
|||
.ui.bottom.aligned.grid > .column, |
|||
.ui.grid .bottom.aligned.column, |
|||
.ui.grid > .bottom.aligned.row > .column { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*---------------------- |
|||
Equal Height Columns |
|||
-----------------------*/ |
|||
|
|||
.ui.grid > .equal.height.row { |
|||
display: table; |
|||
max-width: 100%; |
|||
} |
|||
.ui.grid > .equal.height.row > .column { |
|||
display: table-cell; |
|||
} |
|||
|
|||
|
|||
/*---------------------- |
|||
Only (Device) |
|||
-----------------------*/ |
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width : (@tabletBreakpoint - 1px)) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.mobile.only.grid, |
|||
.ui.celled.mobile.only.grid, |
|||
.ui.divided.mobile.only.grid .row, |
|||
.ui.celled.mobile.only.grid .row, |
|||
.ui.divided.grid .mobile.only.row, |
|||
.ui.celled.grid .mobile.only.row, |
|||
.ui.grid .mobile.only.equal.height.row, |
|||
.ui.mobile.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .mobile.only.column, |
|||
.ui.celled.grid > .row > .mobile.only.column, |
|||
.ui.divided.mobile.only.grid > .row > .column, |
|||
.ui.celled.mobile.only.grid > .row > .column, |
|||
.ui.divided.mobile.only.grid > .column, |
|||
.ui.celled.mobile.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (min-width : @tabletBreakpoint) { |
|||
.ui.mobile.only.grid, |
|||
.ui.grid > .mobile.only.row, |
|||
.ui.grid > .mobile.only.column, |
|||
.ui.grid > .row > .mobile.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Tablet Only */ |
|||
@media only screen and (min-width : @tabletBreakpoint) and (max-width : (@computerBreakpoint - 1px)) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.tablet.only.grid, |
|||
.ui.celled.tablet.only.grid, |
|||
.ui.divided.tablet.only.grid .row, |
|||
.ui.celled.tablet.only.grid .row, |
|||
.ui.divided.grid .tablet.only.row, |
|||
.ui.celled.grid .tablet.only.row, |
|||
.ui.grid .tablet.only.equal.height.row, |
|||
.ui.tablet.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .tablet.only.column, |
|||
.ui.celled.grid > .row > .tablet.only.column, |
|||
.ui.divided.tablet.only.grid > .row > .column, |
|||
.ui.celled.tablet.only.grid > .row > .column, |
|||
.ui.divided.tablet.only.grid > .column, |
|||
.ui.celled.tablet.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : (@tabletBreakpoint - 1px)), (min-width: @computerBreakpoint) { |
|||
.ui.tablet.only.grid, |
|||
.ui.grid > .tablet.only.row, |
|||
.ui.grid > .tablet.only.column, |
|||
.ui.grid > .row > .tablet.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
/* Computer Only */ |
|||
@media only screen and (min-width : @computerBreakpoint) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row { |
|||
display: block !important; |
|||
} |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: inline-block !important; |
|||
} |
|||
.ui.divided.computer.only.grid, |
|||
.ui.celled.computer.only.grid, |
|||
.ui.divided.computer.only.grid .row, |
|||
.ui.celled.computer.only.grid .row, |
|||
.ui.divided.grid .computer.only.row, |
|||
.ui.celled.grid .computer.only.row, |
|||
.ui.grid .computer.only.equal.height.row, |
|||
.ui.computer.only.grid .equal.height.row { |
|||
display: table !important; |
|||
} |
|||
.ui.divided.grid > .row > .computer.only.column, |
|||
.ui.celled.grid > .row > .computer.only.column, |
|||
.ui.divided.computer.only.grid > .row > .column, |
|||
.ui.celled.computer.only.grid > .row > .column, |
|||
.ui.divided.computer.only.grid > .column, |
|||
.ui.celled.computer.only.grid > .column { |
|||
display: table-cell !important; |
|||
} |
|||
} |
|||
@media only screen and (max-width : (@computerBreakpoint - 1px)) { |
|||
.ui.computer.only.grid, |
|||
.ui.grid > .computer.only.row, |
|||
.ui.grid > .computer.only.column, |
|||
.ui.grid > .row > .computer.only.column { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Doubling |
|||
--------------------*/ |
|||
|
|||
/* Mobily Only */ |
|||
@media only screen and (max-width : (@tabletBreakpoint - 1px)) { |
|||
.ui.two.column.doubling.grid > .row > .column, |
|||
.ui.two.column.doubling.grid > .column, |
|||
.ui.grid > .two.column.doubling.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.three.column.doubling.grid > .row > .column, |
|||
.ui.three.column.doubling.grid > .column, |
|||
.ui.grid > .three.column.doubling.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.four.column.doubling.grid > .row > .column, |
|||
.ui.four.column.doubling.grid > .column, |
|||
.ui.grid > .four.column.doubling.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.five.column.doubling.grid > .row > .column, |
|||
.ui.five.column.doubling.grid > .column, |
|||
.ui.grid > .five.column.doubling.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.six.column.doubling.grid > .row > .column, |
|||
.ui.six.column.doubling.grid > .column, |
|||
.ui.grid > .six.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.seven.column.doubling.grid > .row > .column, |
|||
.ui.seven.column.doubling.grid > .column, |
|||
.ui.grid > .seven.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.eight.column.doubling.grid > .row > .column, |
|||
.ui.eight.column.doubling.grid > .column, |
|||
.ui.grid > .eight.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.nine.column.doubling.grid > .row > .column, |
|||
.ui.nine.column.doubling.grid > .column, |
|||
.ui.grid > .nine.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.ten.column.doubling.grid > .row > .column, |
|||
.ui.ten.column.doubling.grid > .column, |
|||
.ui.grid > .ten.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.twelve.column.doubling.grid > .row > .column, |
|||
.ui.twelve.column.doubling.grid > .column, |
|||
.ui.grid > .twelve.column.doubling.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.fourteen.column.doubling.grid > .row > .column, |
|||
.ui.fourteen.column.doubling.grid > .column, |
|||
.ui.grid > .fourteen.column.doubling.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.sixteen.column.doubling.grid > .row > .column, |
|||
.ui.sixteen.column.doubling.grid > .column, |
|||
.ui.grid > .sixteen.column.doubling.row > .column { |
|||
width: @fourColumn; |
|||
} |
|||
} |
|||
|
|||
/* Tablet Only */ |
|||
@media only screen and (min-width : @tabletBreakpoint) and (max-width : (@computerBreakpoint - 1px)) { |
|||
.ui.two.column.doubling.grid > .row > .column, |
|||
.ui.two.column.doubling.grid > .column, |
|||
.ui.grid > .two.column.doubling.row > .column { |
|||
width: @oneColumn; |
|||
} |
|||
.ui.three.column.doubling.grid > .row > .column, |
|||
.ui.three.column.doubling.grid > .column, |
|||
.ui.grid > .three.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.four.column.doubling.grid > .row > .column, |
|||
.ui.four.column.doubling.grid > .column, |
|||
.ui.grid > .four.column.doubling.row > .column { |
|||
width: @twoColumn; |
|||
} |
|||
.ui.five.column.doubling.grid > .row > .column, |
|||
.ui.five.column.doubling.grid > .column, |
|||
.ui.grid > .five.column.doubling.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.six.column.doubling.grid > .row > .column, |
|||
.ui.six.column.doubling.grid > .column, |
|||
.ui.grid > .six.column.doubling.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.eight.column.doubling.grid > .row > .column, |
|||
.ui.eight.column.doubling.grid > .column, |
|||
.ui.grid > .eight.column.doubling.row > .column { |
|||
width: @threeColumn; |
|||
} |
|||
.ui.eight.column.doubling.grid > .row > .column, |
|||
.ui.eight.column.doubling.grid > .column, |
|||
.ui.grid > .eight.column.doubling.row > .column { |
|||
width: @fourColumn; |
|||
} |
|||
.ui.nine.column.doubling.grid > .row > .column, |
|||
.ui.nine.column.doubling.grid > .column, |
|||
.ui.grid > .nine.column.doubling.row > .column { |
|||
width: @fourColumn; |
|||
} |
|||
.ui.ten.column.doubling.grid > .row > .column, |
|||
.ui.ten.column.doubling.grid > .column, |
|||
.ui.grid > .ten.column.doubling.row > .column { |
|||
width: @fiveColumn; |
|||
} |
|||
.ui.twelve.column.doubling.grid > .row > .column, |
|||
.ui.twelve.column.doubling.grid > .column, |
|||
.ui.grid > .twelve.column.doubling.row > .column { |
|||
width: @sixColumn; |
|||
} |
|||
.ui.fourteen.column.doubling.grid > .row > .column, |
|||
.ui.fourteen.column.doubling.grid > .column, |
|||
.ui.grid > .fourteen.column.doubling.row > .column { |
|||
width: @sevenColumn; |
|||
} |
|||
.ui.sixteen.column.doubling.grid > .row > .column, |
|||
.ui.sixteen.column.doubling.grid > .column, |
|||
.ui.grid > .sixteen.column.doubling.row > .column { |
|||
width: @eightColumn; |
|||
} |
|||
} |
|||
|
|||
/*------------------- |
|||
Stackable |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : (@tabletBreakpoint - 1px)) { |
|||
.ui.stackable.grid { |
|||
display: block !important; |
|||
padding: 0em; |
|||
margin: 0em; |
|||
} |
|||
.ui.stackable.grid > .row > .wide.column, |
|||
.ui.stackable.grid > .wide.column, |
|||
.ui.stackable.grid > .row > .column, |
|||
.ui.stackable.grid > .column { |
|||
display: block !important; |
|||
width: auto !important; |
|||
|
|||
margin: (@stackableRowMargin / 2) 0em 0em !important; |
|||
padding: (@stackableRowMargin / 2) 0em 0em !important; |
|||
|
|||
box-shadow: none !important; |
|||
} |
|||
.ui.stackable.divided.grid > .column, |
|||
.ui.stackable.celled.grid > .row > .column { |
|||
border-top: @stackableMobileBorder; |
|||
} |
|||
.ui.stackable.grid > .row:first-child > .column:first-child, |
|||
.ui.stackable.grid > .column:first-child { |
|||
margin-top: 0em !important; |
|||
padding-top: 0em !important; |
|||
} |
|||
.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:first-child, |
|||
.ui.stackable.celled.grid > .column:first-child { |
|||
border-top: none !important; |
|||
} |
|||
|
|||
.ui.stackable.page.grid > .row > .column, |
|||
.ui.stackable.page.grid > .column { |
|||
padding-left: @stackableGutterWidth !important; |
|||
padding-right: @stackableGutterWidth !important; |
|||
} |
|||
|
|||
|
|||
/* Remove pointers from vertical menus */ |
|||
.ui.stackable.grid .vertical.pointing.menu .item:after { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
File diff suppressed because it is too large
@ -1,357 +0,0 @@ |
|||
/* |
|||
* # Semantic - Message |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Message |
|||
*******************************/ |
|||
|
|||
.ui.message { |
|||
position: relative; |
|||
min-height: 18px; |
|||
margin: 1em 0em; |
|||
|
|||
height: auto; |
|||
background-color: #EFEFEF; |
|||
padding: 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
background 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
-moz-border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
border-radius: 0.325em 0.325em 0.325em 0.325em; |
|||
} |
|||
|
|||
.ui.message:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* block with headers */ |
|||
.ui.message .header { |
|||
margin: 0em; |
|||
font-size: 1.33em; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/* block with paragraphs */ |
|||
.ui.message p { |
|||
opacity: 0.85; |
|||
margin: 1em 0em; |
|||
} |
|||
.ui.message p:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.message .header + p { |
|||
margin-top: 0.3em; |
|||
} |
|||
.ui.message > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.message > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/* block with child list */ |
|||
.ui.message ul.list { |
|||
opacity: 0.85; |
|||
list-style-position: inside; |
|||
margin: 0.2em 0em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li { |
|||
position: relative; |
|||
list-style-type: none; |
|||
margin: 0em 0em 0.3em 1em; |
|||
padding: 0em; |
|||
} |
|||
.ui.message ul.list li:before { |
|||
position: absolute; |
|||
content: '\2022'; |
|||
top: -0.05em; |
|||
left: -0.8em; |
|||
|
|||
height: 100%; |
|||
vertical-align: baseline; |
|||
opacity: 0.5; |
|||
} |
|||
.ui.message ul.list li:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* dismissable block */ |
|||
.ui.message > .close.icon { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 1em; |
|||
right: 0.5em; |
|||
opacity: 0.7; |
|||
|
|||
-webkit-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s linear |
|||
; |
|||
transition: |
|||
opacity 0.1s linear |
|||
; |
|||
} |
|||
.ui.message > .close.icon:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.message.visible, |
|||
.ui.header.visible { |
|||
display: block !important; |
|||
} |
|||
.ui.message.hidden, |
|||
.ui.header.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Compact |
|||
---------------*/ |
|||
|
|||
.ui.compact.message { |
|||
display: inline-block; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
.ui.attached.message { |
|||
margin-left: -1px; |
|||
margin-right: -1px; |
|||
margin-bottom: -1px; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0em 0em; |
|||
-moz-border-radius: 0.325em 0.325em 0em 0em; |
|||
border-radius: 0.325em 0.325em 0em 0em; |
|||
|
|||
-webkit-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.attached + .ui.attached.message:not(.top):not(.bottom) { |
|||
margin-top: -1px; |
|||
border-radius: 0em; |
|||
} |
|||
.ui.bottom.attached.message { |
|||
margin-top: -1px; |
|||
|
|||
-webkit-border-radius: 0em 0em 0.325em 0.325em; |
|||
-moz-border-radius: 0em 0em 0.325em 0.325em; |
|||
border-radius: 0em 0em 0.325em 0.325em; |
|||
} |
|||
.ui.bottom.attached.message:not(:last-child) { |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.attached.icon.message { |
|||
display: block; |
|||
width: auto; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.icon.message { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.icon.message > .icon:not(.close) { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
font-size: 3.8em; |
|||
opacity: 0.5; |
|||
} |
|||
.ui.icon.message > .icon + .content { |
|||
padding-left: 1em; |
|||
} |
|||
.ui.icon.message > .content { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.message { |
|||
background-color: rgba(255, 255, 255, 0.05); |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.message { |
|||
-webkit-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
box-shadow: |
|||
0px 1px 3px 0px rgba(0, 0, 0, 0.1), |
|||
0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset |
|||
; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.black.message { |
|||
background-color: #333333; |
|||
color: rgba(255, 255, 255, 0.95); |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Types |
|||
---------------*/ |
|||
.ui.blue.message, |
|||
.ui.info.message { |
|||
background-color: #E6F4F9; |
|||
color: #4D8796; |
|||
} |
|||
|
|||
/* Green Text Block */ |
|||
.ui.green.message { |
|||
background-color: #DEFCD5; |
|||
color: #52A954; |
|||
} |
|||
|
|||
/* Yellow Text Block */ |
|||
.ui.yellow.message, |
|||
.ui.warning.message { |
|||
background-color: #F6F3D5; |
|||
color: #96904D; |
|||
} |
|||
/* Red Text Block */ |
|||
.ui.red.message { |
|||
background-color: #F1D7D7; |
|||
color: #A95252; |
|||
} |
|||
|
|||
/* Success Text Block */ |
|||
.ui.success.message, |
|||
.ui.positive.message { |
|||
background-color: #DEFCD5; |
|||
color: #52A954; |
|||
} |
|||
/* Error Text Block */ |
|||
.ui.error.message, |
|||
.ui.negative.message { |
|||
background-color: #F1D7D7; |
|||
color: #A95252; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.message { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.message { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.message { |
|||
font-size: 1.125em; |
|||
} |
|||
.ui.huge.message { |
|||
font-size: 1.5em; |
|||
} |
|||
.ui.massive.message { |
|||
font-size: 2em; |
|||
} |
|||
@ -1,580 +0,0 @@ |
|||
/* |
|||
* # Semantic - Table |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Table |
|||
*******************************/ |
|||
|
|||
/* Prototype */ |
|||
.ui.table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
/* Table Content */ |
|||
.ui.table th, |
|||
.ui.table tr, |
|||
.ui.table td { |
|||
border-collapse: collapse; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-transition: all 0.1s ease-out; |
|||
-moz-transition: all 0.1s ease-out; |
|||
-o-transition: all 0.1s ease-out; |
|||
-ms-transition: all 0.1s ease-out; |
|||
transition: all 0.1s ease-out; |
|||
} |
|||
|
|||
/* Headers */ |
|||
.ui.table thead { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table tfoot th { |
|||
background-color: rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table th { |
|||
cursor: auto; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
text-align: left; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
padding: 0.5em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.table thead th:first-child { |
|||
border-radius: 5px 0px 0px 0px; |
|||
} |
|||
.ui.table thead th:last-child { |
|||
border-radius: 0px 5px 0px 0px; |
|||
} |
|||
.ui.table tfoot th:first-child { |
|||
border-radius: 0px 0px 0px 5px; |
|||
} |
|||
.ui.table tfoot th:last-child { |
|||
border-radius: 0px 0px 5px 0px; |
|||
} |
|||
|
|||
/* Table Cells */ |
|||
.ui.table td { |
|||
padding: 0.40em 0.7em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* Footer */ |
|||
.ui.table tfoot { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.table tfoot th { |
|||
font-weight: normal; |
|||
font-style: italic; |
|||
} |
|||
|
|||
/* Table Striping */ |
|||
.ui.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(0, 0, 50, 0.02); |
|||
} |
|||
|
|||
/* Icons */ |
|||
.ui.table > .icon { |
|||
vertical-align: baseline; |
|||
} |
|||
.ui.table > .icon:only-child { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* Table Segment */ |
|||
.ui.table.segment:after { |
|||
display: none; |
|||
} |
|||
.ui.table.segment.stacked:after { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/* Responsive */ |
|||
|
|||
@media only screen and (max-width : 768px) { |
|||
.ui.table { |
|||
display: block; |
|||
padding: 0em; |
|||
} |
|||
.ui.table thead, |
|||
.ui.table tfoot { |
|||
display: none; |
|||
} |
|||
.ui.table tbody { |
|||
display: block; |
|||
} |
|||
.ui.table tr { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.table tr > td { |
|||
width: 100% !important; |
|||
display: block; |
|||
border: none !important; |
|||
padding: 0.25em 0.75em; |
|||
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05) !important; |
|||
} |
|||
.ui.table td:first-child { |
|||
font-weight: bold; |
|||
padding-top: 1em; |
|||
} |
|||
.ui.table td:last-child { |
|||
box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1) inset !important; |
|||
padding-bottom: 1em; |
|||
} |
|||
|
|||
/* Clear BG Colors */ |
|||
.ui.table tr > td.warning, |
|||
.ui.table tr > td.error, |
|||
.ui.table tr > td.active, |
|||
.ui.table tr > td.positive, |
|||
.ui.table tr > td.negative { |
|||
background-color: transparent !important; |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
/* Sortable */ |
|||
.ui.sortable.table th.disabled:hover { |
|||
cursor: auto; |
|||
text-align: left; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.sortable.table thead th:hover { |
|||
background-color: rgba(0, 0, 0, 0.13); |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/* Inverted Sortable */ |
|||
.ui.inverted.sortable.table thead th:hover { |
|||
background-color: rgba(255, 255, 255, 0.13); |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Positive |
|||
---------------*/ |
|||
|
|||
.ui.table tr.positive, |
|||
.ui.table td.positive { |
|||
-webkit-box-shadow: 2px 0px 0px #119000 inset; |
|||
-moz-box-shadow: 2px 0px 0px #119000 inset; |
|||
box-shadow: 2px 0px 0px #119000 inset; |
|||
} |
|||
.ui.table tr.positive td, |
|||
.ui.table td.positive { |
|||
background-color: #F2F8F0 !important; |
|||
color: #119000 !important; |
|||
} |
|||
.ui.celled.table tr.positive:hover td, |
|||
.ui.celled.table tr:hover td.positive, |
|||
.ui.table tr.positive:hover td, |
|||
.ui.table td:hover.positive, |
|||
.ui.table th:hover.positive { |
|||
background-color: #ECF5E9 !important; |
|||
color: #119000 !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Negative |
|||
---------------*/ |
|||
|
|||
.ui.table tr.negative, |
|||
.ui.table td.negative { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.negative td, |
|||
.ui.table td.negative { |
|||
background-color: #F9F4F4; |
|||
color: #CD2929 !important; |
|||
} |
|||
.ui.celled.table tr.negative:hover td, |
|||
.ui.celled.table tr:hover td.negative, |
|||
.ui.table tr.negative:hover td, |
|||
.ui.table td:hover.negative, |
|||
.ui.table th:hover.negative { |
|||
background-color: #F2E8E8; |
|||
color: #CD2929; |
|||
} |
|||
|
|||
/*-------------- |
|||
Error |
|||
---------------*/ |
|||
|
|||
.ui.table tr.error, |
|||
.ui.table td.error { |
|||
-webkit-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
-moz-box-shadow: 2px 0px 0px #CD2929 inset; |
|||
box-shadow: 2px 0px 0px #CD2929 inset; |
|||
} |
|||
.ui.table tr.error td, |
|||
.ui.table td.error, |
|||
.ui.table th.error { |
|||
background-color: #F9F4F4; |
|||
color: #CD2929; |
|||
} |
|||
.ui.celled.table tr.error:hover td, |
|||
.ui.celled.table tr:hover td.error, |
|||
.ui.table tr.error:hover td, |
|||
.ui.table td:hover.error, |
|||
.ui.table th:hover.error { |
|||
background-color: #F2E8E8; |
|||
color: #CD2929; |
|||
} |
|||
|
|||
/*-------------- |
|||
Warning |
|||
---------------*/ |
|||
|
|||
.ui.table tr.warning, |
|||
.ui.table td.warning { |
|||
-webkit-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
-moz-box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
box-shadow: 2px 0px 0px #7D6C00 inset; |
|||
} |
|||
.ui.table tr.warning td, |
|||
.ui.table td.warning, |
|||
.ui.table th.warning { |
|||
background-color: #FBF6E9; |
|||
color: #7D6C00; |
|||
} |
|||
.ui.celled.table tr.warning:hover td, |
|||
.ui.celled.table tr:hover td.warning, |
|||
.ui.table tr.warning:hover td, |
|||
.ui.table td:hover.warning, |
|||
.ui.table th:hover.warning { |
|||
background-color: #F3EDDC; |
|||
color: #7D6C00; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.table tr.active, |
|||
.ui.table td.active { |
|||
-webkit-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
-moz-box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
box-shadow: 2px 0px 0px rgba(50, 50, 50, 0.9) inset; |
|||
} |
|||
|
|||
.ui.table tr.active td, |
|||
.ui.table tr td.active { |
|||
background-color: #E0E0E0; |
|||
color: rgba(50, 50, 50, 0.9); |
|||
/* border-color: rgba(0, 0, 0, 0.15) !important; */ |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.table tr.disabled td, |
|||
.ui.table tr td.disabled, |
|||
.ui.table tr.disabled:hover td, |
|||
.ui.table tr:hover td.disabled { |
|||
color: rgba(150, 150, 150, 0.3); |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Column Count |
|||
---------------*/ |
|||
|
|||
.ui.two.column.table td { |
|||
width: 50%; |
|||
} |
|||
.ui.three.column.table td { |
|||
width: 33.3333%; |
|||
} |
|||
.ui.four.column.table td { |
|||
width: 25%; |
|||
} |
|||
.ui.five.column.table td { |
|||
width: 20%; |
|||
} |
|||
.ui.six.column.table td { |
|||
width: 16.66667%; |
|||
} |
|||
.ui.seven.column.table td { |
|||
width: 14.2857%; |
|||
} |
|||
.ui.eight.column.table td { |
|||
width: 12.5%; |
|||
} |
|||
.ui.nine.column.table td { |
|||
width: 11.1111%; |
|||
} |
|||
.ui.ten.column.table td { |
|||
width: 10%; |
|||
} |
|||
.ui.eleven.column.table td { |
|||
width: 9.0909%; |
|||
} |
|||
.ui.twelve.column.table td { |
|||
width: 8.3333%; |
|||
} |
|||
.ui.thirteen.column.table td { |
|||
width: 7.6923%; |
|||
} |
|||
.ui.fourteen.column.table td { |
|||
width: 7.1428%; |
|||
} |
|||
.ui.fifteen.column.table td { |
|||
width: 6.6666%; |
|||
} |
|||
.ui.sixteen.column.table td { |
|||
width: 6.25%; |
|||
} |
|||
|
|||
/* Column Width */ |
|||
.ui.table th.one.wide, |
|||
.ui.table td.one.wide { |
|||
width: 6.25%; |
|||
} |
|||
.ui.table th.two.wide, |
|||
.ui.table td.two.wide { |
|||
width: 12.5%; |
|||
} |
|||
.ui.table th.three.wide, |
|||
.ui.table td.three.wide { |
|||
width: 18.75%; |
|||
} |
|||
.ui.table th.four.wide, |
|||
.ui.table td.four.wide { |
|||
width: 25%; |
|||
} |
|||
.ui.table th.five.wide, |
|||
.ui.table td.five.wide { |
|||
width: 31.25%; |
|||
} |
|||
.ui.table th.six.wide, |
|||
.ui.table td.six.wide { |
|||
width: 37.5%; |
|||
} |
|||
.ui.table th.seven.wide, |
|||
.ui.table td.seven.wide { |
|||
width: 43.75%; |
|||
} |
|||
.ui.table th.eight.wide, |
|||
.ui.table td.eight.wide { |
|||
width: 50%; |
|||
} |
|||
.ui.table th.nine.wide, |
|||
.ui.table td.nine.wide { |
|||
width: 56.25%; |
|||
} |
|||
.ui.table th.ten.wide, |
|||
.ui.table td.ten.wide { |
|||
width: 62.5%; |
|||
} |
|||
.ui.table th.eleven.wide, |
|||
.ui.table td.eleven.wide { |
|||
width: 68.75%; |
|||
} |
|||
.ui.table th.twelve.wide, |
|||
.ui.table td.twelve.wide { |
|||
width: 75%; |
|||
} |
|||
.ui.table th.thirteen.wide, |
|||
.ui.table td.thirteen.wide { |
|||
width: 81.25%; |
|||
} |
|||
.ui.table th.fourteen.wide, |
|||
.ui.table td.fourteen.wide { |
|||
width: 87.5%; |
|||
} |
|||
.ui.table th.fifteen.wide, |
|||
.ui.table td.fifteen.wide { |
|||
width: 93.75%; |
|||
} |
|||
.ui.table th.sixteen.wide, |
|||
.ui.table td.sixteen.wide { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Celled |
|||
---------------*/ |
|||
|
|||
.ui.celled.table { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.celled.table tbody tr, |
|||
.ui.celled.table tfoot tr { |
|||
border: none; |
|||
} |
|||
.ui.celled.table th, |
|||
.ui.celled.table td { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Coupling with segment */ |
|||
.ui.celled.table.segment th:first-child, |
|||
.ui.celled.table.segment td:first-child { |
|||
border-left: none; |
|||
} |
|||
.ui.celled.table.segment th:last-child, |
|||
.ui.celled.table.segment td:last-child { |
|||
border-right: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sortable |
|||
---------------*/ |
|||
|
|||
.ui.sortable.table thead th { |
|||
cursor: pointer; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.sortable.table thead th.sorted, |
|||
.ui.sortable.table thead th.sorted:hover { |
|||
-webkit-user-select: none; |
|||
-moz-user-select: none; |
|||
-ms-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.ui.sortable.table thead th:after { |
|||
display: inline-block; |
|||
content: ''; |
|||
width: 1em; |
|||
opacity: 0.8; |
|||
|
|||
margin: 0em 0em 0em 0.5em; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
} |
|||
.ui.sortable.table thead th.ascending:after { |
|||
content: '\25b4'; |
|||
} |
|||
.ui.sortable.table thead th.descending:after { |
|||
content: '\25be'; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
/* Text Color */ |
|||
.ui.inverted.table td { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.inverted.table th { |
|||
background-color: rgba(0, 0, 0, 0.15); |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
|
|||
/* Stripes */ |
|||
.ui.inverted.table tbody tr:nth-child(2n) { |
|||
background-color: rgba(255, 255, 255, 0.06); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Definition |
|||
---------------*/ |
|||
|
|||
.ui.definition.table td:first-child { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Collapsing |
|||
---------------*/ |
|||
|
|||
.ui.collapsing.table { |
|||
width: auto; |
|||
} |
|||
|
|||
/*-------------- |
|||
Basic |
|||
---------------*/ |
|||
|
|||
.ui.basic.table th { |
|||
background-color: transparent; |
|||
padding: 0.5em; |
|||
} |
|||
.ui.basic.table tbody tr { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.03); |
|||
} |
|||
.ui.basic.table td { |
|||
padding: 0.8em 0.5em; |
|||
} |
|||
.ui.basic.table tbody tr:nth-child(2n) { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Padded |
|||
---------------*/ |
|||
|
|||
.ui.padded.table th, |
|||
.ui.padded.table td { |
|||
padding: 0.8em 1em; |
|||
} |
|||
|
|||
.ui.compact.table th { |
|||
padding: 0.3em 0.5em; |
|||
} |
|||
.ui.compact.table td { |
|||
padding: 0.2em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
/* Small */ |
|||
.ui.small.table { |
|||
font-size: 0.875em; |
|||
} |
|||
|
|||
/* Standard */ |
|||
.ui.table { |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/* Large */ |
|||
.ui.large.table { |
|||
font-size: 1.1em; |
|||
} |
|||
File diff suppressed because it is too large
@ -1,207 +0,0 @@ |
|||
/* |
|||
* # Semantic - Divider |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'divider'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Divider |
|||
*******************************/ |
|||
|
|||
.ui.divider { |
|||
margin: @dividerMargin 0rem; |
|||
|
|||
border-top: @shadowWidth solid @shadowColor; |
|||
border-bottom: @highlightWidth solid @highlightColor; |
|||
|
|||
line-height: 1; |
|||
height: 0em; |
|||
|
|||
box-sizing: border-box; |
|||
|
|||
user-select: none; |
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.ui.vertical.divider, |
|||
.ui.horizontal.divider { |
|||
position: absolute; |
|||
|
|||
border: none; |
|||
height: 0em; |
|||
margin: 0em; |
|||
background-color: transparent; |
|||
|
|||
font-size: @medium; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
text-transform: @dividerTextTransform; |
|||
|
|||
color: @dividerTextColor; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Vertical |
|||
---------------*/ |
|||
|
|||
.ui.vertical.divider { |
|||
position: absolute; |
|||
z-index: 2; |
|||
top: 50%; |
|||
left: 50%; |
|||
|
|||
margin: 0% 0% 0% (@verticalDividerWidth / 2); |
|||
|
|||
width: @verticalDividerWidth; |
|||
height: 50%; |
|||
|
|||
line-height: 0; |
|||
padding: 0em; |
|||
} |
|||
|
|||
.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: 80%; |
|||
} |
|||
|
|||
.ui.vertical.divider:before { |
|||
top: -100%; |
|||
} |
|||
.ui.vertical.divider:after { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Horizontal |
|||
---------------*/ |
|||
|
|||
.ui.horizontal.divider { |
|||
position: relative; |
|||
top: 0%; |
|||
left: 0%; |
|||
|
|||
margin: @horizontalDividerVerticalMargin 0em; |
|||
height: auto; |
|||
padding: 0em; |
|||
|
|||
line-height: 1; |
|||
} |
|||
|
|||
.ui.horizontal.divider:before, |
|||
.ui.horizontal.divider:after { |
|||
position: absolute; |
|||
top: 50%; |
|||
content: ''; |
|||
z-index: 3; |
|||
|
|||
width: @horizontalDividerWidth; |
|||
top: 50%; |
|||
height: 0%; |
|||
|
|||
border-top: @shadowWidth solid @shadowColor; |
|||
border-bottom: @highlightWidth solid @highlightColor; |
|||
} |
|||
|
|||
.ui.horizontal.divider:before { |
|||
left: 0%; |
|||
} |
|||
.ui.horizontal.divider:after { |
|||
left: auto; |
|||
right: 0%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.divider > .icon { |
|||
margin: @dividerIconMargin; |
|||
font-size: @dividerIconSize; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hidden |
|||
---------------*/ |
|||
|
|||
.ui.hidden.divider { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.divider.inverted { |
|||
color: @invertedTextColor; |
|||
} |
|||
.ui.vertical.inverted.divider, |
|||
.ui.horizontal.inverted.divider { |
|||
color: @directionalTextColor; |
|||
} |
|||
.ui.divider.inverted, |
|||
.ui.divider.inverted:after, |
|||
.ui.divider.inverted:before { |
|||
border-top-color: @invertedShadowColor; |
|||
border-bottom-color: @invertedHighlightColor; |
|||
|
|||
border-left-color: @invertedShadowColor; |
|||
border-right-color: @invertedHighlightColor; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fitted |
|||
---------------*/ |
|||
|
|||
.ui.fitted.divider { |
|||
margin: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Clearing |
|||
---------------*/ |
|||
|
|||
.ui.clearing.divider { |
|||
clear: both; |
|||
} |
|||
|
|||
/*-------------- |
|||
Section |
|||
---------------*/ |
|||
|
|||
.ui.section.divider { |
|||
margin-top: @sectionMargin; |
|||
margin-bottom: @sectionMargin; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,367 +0,0 @@ |
|||
/* |
|||
* # Semantic - Header |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'header'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
/******************************* |
|||
Header |
|||
*******************************/ |
|||
|
|||
/* Standard */ |
|||
.ui.header { |
|||
border: none; |
|||
font-family: @pageFont; |
|||
margin: @topMargin 0em @bottomMargin; |
|||
padding: @verticalPadding @horizontalPadding; |
|||
font-weight: @fontWeight; |
|||
line-height: @lineHeight; |
|||
text-transform: @textTransform; |
|||
color: @textColor; |
|||
} |
|||
|
|||
.ui.header .sub.header { |
|||
font-size: @subHeaderFontSize; |
|||
font-weight: normal; |
|||
margin: 0em; |
|||
padding: 0em; |
|||
|
|||
line-height: @subHeaderLineHeight; |
|||
color: @subHeaderColor; |
|||
} |
|||
|
|||
/* Icon and Content Together */ |
|||
.ui.header > .icon { |
|||
display: table-cell; |
|||
font-size: @iconSize; |
|||
padding-top: @iconOffset; |
|||
|
|||
vertical-align: @iconAlignment; |
|||
padding-right: (@iconMargin / 2); |
|||
} |
|||
.ui.header > .icon + .content { |
|||
padding-left: (@iconMargin / 2); |
|||
display: table-cell; |
|||
} |
|||
|
|||
/* Only One */ |
|||
.ui.header .icon:only-child { |
|||
display: inline-block; |
|||
padding: 0em; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.header .content { |
|||
display: inline-block; |
|||
vertical-align: @contentAlignment; |
|||
} |
|||
|
|||
/* Positioning */ |
|||
.ui.header:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.header:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.header + p { |
|||
margin-top: @precedingParagraphMargin; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Page Heading |
|||
---------------*/ |
|||
|
|||
h1.ui.header { |
|||
min-height: 1rem; |
|||
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; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content Heading |
|||
---------------*/ |
|||
|
|||
.ui.tiny.header { |
|||
font-size: @tiny; |
|||
} |
|||
.ui.small.header { |
|||
font-size: @small; |
|||
} |
|||
.ui.medium.header { |
|||
font-size: @medium; |
|||
} |
|||
.ui.large.header { |
|||
font-size: @large; |
|||
} |
|||
.ui.huge.header { |
|||
min-height: 1em; |
|||
font-size: @huge; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Icon |
|||
--------------------*/ |
|||
|
|||
.ui.icon.header { |
|||
display: inline-block; |
|||
text-align: center; |
|||
} |
|||
.ui.icon.header .icon { |
|||
float: none; |
|||
display: block; |
|||
font-size: @iconHeaderSize; |
|||
margin: 0em auto @iconHeaderMargin; |
|||
padding: 0em; |
|||
} |
|||
.ui.icon.header .content { |
|||
display: block; |
|||
} |
|||
.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 |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.blue.header { |
|||
color: @blue !important; |
|||
} |
|||
.ui.black.header { |
|||
color: @black !important; |
|||
} |
|||
.ui.green.header { |
|||
color: @green !important; |
|||
} |
|||
.ui.red.header { |
|||
color: @red !important; |
|||
} |
|||
.ui.purple.header { |
|||
color: @purple !important; |
|||
} |
|||
.ui.teal.header { |
|||
color: @teal !important; |
|||
} |
|||
|
|||
.ui.blue.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @blue; |
|||
} |
|||
.ui.black.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @black; |
|||
} |
|||
.ui.green.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @green; |
|||
} |
|||
.ui.red.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @red; |
|||
} |
|||
.ui.purple.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @purple; |
|||
} |
|||
.ui.teal.dividing.header { |
|||
border-bottom: @dividedColoredBorderWidth solid @teal; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.header { |
|||
color: @invertedColor; |
|||
} |
|||
.ui.inverted.header .sub.header { |
|||
color: @invertedSubHeaderColor; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.black.header { |
|||
background-color: @black !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.blue.header { |
|||
background-color: @blue !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.green.header { |
|||
background-color: @green !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.red.header { |
|||
background-color: @red !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.purple.header { |
|||
background-color: @purple !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.teal.header { |
|||
background-color: @teal !important; |
|||
color: @white !important; |
|||
} |
|||
|
|||
.ui.inverted.block.header { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.header { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.header { |
|||
text-align: right; |
|||
} |
|||
.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.left.floated.header { |
|||
float: left; |
|||
margin-top: 0em; |
|||
margin-right: @floatedMargin; |
|||
} |
|||
.ui.right.floated.header { |
|||
float: right; |
|||
margin-top: 0em; |
|||
margin-left: @floatedMargin; |
|||
} |
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.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; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Block |
|||
--------------------*/ |
|||
|
|||
.ui.block.header { |
|||
background: @blockBackground; |
|||
padding: @blockVerticalPadding @blockHorizontalPadding; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.attached.header { |
|||
background: @attachedBackground; |
|||
margin: 0em; |
|||
padding: @attachedVerticalPadding @attachedVerticalPadding; |
|||
box-shadow: @attachedBoxShadow; |
|||
} |
|||
.ui.attached:not(.top, .bottom) { |
|||
margin: 0em; |
|||
} |
|||
.ui.top.attached.header { |
|||
margin-bottom: 0em; |
|||
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; |
|||
} |
|||
.ui.bottom.attached.header { |
|||
margin-top: 0em; |
|||
border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizing |
|||
--------------------*/ |
|||
|
|||
.ui.header { |
|||
font-size: @medium; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,310 +0,0 @@ |
|||
/* |
|||
* # Semantic - Icon |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/*! |
|||
* Font Awesome 3.2.1 |
|||
* the iconic font designed for Bootstrap |
|||
* ------------------------------------------------------------------------------ |
|||
* The full suite of pictographic icons, examples, and documentation can be |
|||
* found at http://fon.io. Stay up to date on Twitter at |
|||
* http://twitter.com/fon. |
|||
* |
|||
* License |
|||
* ------------------------------------------------------------------------------ |
|||
* - The Font Awesome font is licensed under SIL OFL 1.1 - |
|||
* http://scripts.sil.org/OFL |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'icon'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
/******************************* |
|||
Icon |
|||
*******************************/ |
|||
|
|||
@font-face { |
|||
font-family: 'Icons'; |
|||
src: url("@{fontPath}/@{fontName}.eot"); |
|||
src: |
|||
url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'), |
|||
url("@{fontPath}/@{fontName}.svg#icons") format('svg'), |
|||
url("@{fontPath}/@{fontName}.woff") format('woff'), |
|||
url("@{fontPath}/@{fontName}.ttf") format('truetype') |
|||
; |
|||
|
|||
font-style: normal; |
|||
font-weight: normal; |
|||
font-variant: normal; |
|||
text-decoration: inherit; |
|||
text-transform: none; |
|||
} |
|||
|
|||
i.icon { |
|||
display: inline-block; |
|||
opacity: @opacity; |
|||
|
|||
margin: 0em @margin 0em 0em; |
|||
|
|||
width: @width; |
|||
height: @height; |
|||
|
|||
font-family: 'Icons'; |
|||
font-style: normal; |
|||
line-height: 1; |
|||
font-weight: normal; |
|||
text-decoration: inherit; |
|||
text-align: center; |
|||
|
|||
speak: none; |
|||
box-sizing: border-box; |
|||
font-smoothing: antialiased; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Loading |
|||
---------------*/ |
|||
|
|||
i.icon.loading { |
|||
animation: icon-loading @loadingDuration linear infinite; |
|||
} |
|||
@keyframes icon-loading { |
|||
from { |
|||
transform: rotate(0deg); |
|||
} |
|||
to { |
|||
transform: rotate(360deg); |
|||
} |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
i.icon.hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.active { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.emphasized.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
i.icon.disabled { |
|||
opacity: @disabledOpacity; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
i.link.icon { |
|||
cursor: pointer; |
|||
opacity: @opacity; |
|||
transition: opacity @transitionDuration @transitionEasing; |
|||
} |
|||
i.link.icon:hover { |
|||
opacity: 1 !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
i.circular.icon { |
|||
border-radius: 500em !important; |
|||
|
|||
padding: @circularPadding !important; |
|||
|
|||
box-shadow: @circularShadow; |
|||
|
|||
line-height: 1 !important; |
|||
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); |
|||
} |
|||
|
|||
/*------------------- |
|||
Square |
|||
--------------------*/ |
|||
|
|||
i.square.icon { |
|||
width: @squareSize; |
|||
height: @squareSize; |
|||
|
|||
padding: @squareSize !important; |
|||
box-shadow: @squareShadow; |
|||
|
|||
vertical-align: baseline; |
|||
} |
|||
i.square.inverted.icon { |
|||
border: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
i.inverted.icon { |
|||
background-color: #222222; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
i.black.icon { |
|||
color: @black !important; |
|||
} |
|||
i.blue.icon { |
|||
color: @blue !important; |
|||
} |
|||
i.green.icon { |
|||
color: @green !important; |
|||
} |
|||
i.orange.icon { |
|||
color: @orange !important; |
|||
} |
|||
i.pink.icon { |
|||
color: @pink !important; |
|||
} |
|||
i.purple.icon { |
|||
color: @purple !important; |
|||
} |
|||
i.red.icon { |
|||
color: @red !important; |
|||
} |
|||
i.teal.icon { |
|||
color: @teal !important; |
|||
} |
|||
i.yellow.icon { |
|||
color: @yellow !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
i.black.icon { |
|||
background-color: @black !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.blue.icon { |
|||
background-color: @blue !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.green.icon { |
|||
background-color: @green !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.orange.icon { |
|||
background-color: @orange !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.pink.icon { |
|||
background-color: @pink !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.purple.icon { |
|||
background-color: @purple !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.red.icon { |
|||
background-color: @red !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.teal.icon { |
|||
background-color: @teal !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
i.yellow.icon { |
|||
background-color: @yellow !important; |
|||
color: #FFFFFF !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
i.small.icon { |
|||
font-size: @small; |
|||
} |
|||
i.icon { |
|||
font-size: @medium; |
|||
} |
|||
i.large.icon { |
|||
font-size: @large; |
|||
vertical-align: middle; |
|||
} |
|||
i.big.icon { |
|||
font-size: @big; |
|||
vertical-align: middle; |
|||
} |
|||
i.huge.icon { |
|||
font-size: @huge; |
|||
vertical-align: middle; |
|||
} |
|||
i.massive.icon { |
|||
font-size: @massive; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,204 +0,0 @@ |
|||
/* |
|||
* # Semantic - Image |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'image'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Image |
|||
*******************************/ |
|||
|
|||
.ui.image { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
max-width: 100%; |
|||
background-color: @placeholderColor; |
|||
} |
|||
img.ui.image { |
|||
display: block; |
|||
background: none; |
|||
} |
|||
.ui.image img { |
|||
display: block; |
|||
max-width: 100%; |
|||
height: auto; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
.ui.disabled.image { |
|||
cursor: default; |
|||
opacity: @disabledOpacity; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Rounded |
|||
---------------*/ |
|||
|
|||
.ui.rounded.images .image, |
|||
.ui.rounded.images img, |
|||
.ui.rounded.image img, |
|||
.ui.rounded.image { |
|||
border-radius: @roundedBorderRadius; |
|||
} |
|||
|
|||
/*-------------- |
|||
Circular |
|||
---------------*/ |
|||
|
|||
.ui.circular.images .image, |
|||
.ui.circular.images img, |
|||
.ui.circular.image img, |
|||
.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.image img { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Avatar |
|||
---------------*/ |
|||
|
|||
.ui.avatar.images .image, |
|||
.ui.avatar.images img, |
|||
.ui.avatar.image img, |
|||
.ui.avatar.image { |
|||
margin-right: @avatarMargin; |
|||
|
|||
display: inline-block; |
|||
width: @avatarSize; |
|||
height: @avatarSize; |
|||
|
|||
-webkit-border-radius: @circularRadius; |
|||
-moz-border-radius: @circularRadius; |
|||
border-radius: @circularRadius; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
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-bottom: @floatedVerticalMargin; |
|||
margin-left: @floatedHorizontalMargin; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.mini.images .image, |
|||
.ui.mini.images img, |
|||
.ui.mini.image { |
|||
width: @miniWidth; |
|||
font-size: @mini; |
|||
} |
|||
.ui.tiny.images .image, |
|||
.ui.tiny.images img, |
|||
.ui.tiny.image { |
|||
width: @tinyWidth; |
|||
font-size: @tiny; |
|||
} |
|||
.ui.small.images .image, |
|||
.ui.small.images img, |
|||
.ui.small.image { |
|||
width: @smallWidth; |
|||
font-size: @small; |
|||
} |
|||
.ui.medium.images .image, |
|||
.ui.medium.images img, |
|||
.ui.medium.image { |
|||
width: @mediumWidth; |
|||
font-size: @medium; |
|||
} |
|||
.ui.large.images .image, |
|||
.ui.large.images img, |
|||
.ui.large.image { |
|||
width: @largeWidth; |
|||
font-size: @large; |
|||
} |
|||
.ui.big.images .image, |
|||
.ui.big.images img, |
|||
.ui.big.image { |
|||
width: @bigWidth; |
|||
font-size: @big; |
|||
} |
|||
.ui.huge.images .image, |
|||
.ui.huge.images img, |
|||
.ui.huge.image { |
|||
width: @hugeWidth; |
|||
font-size: @huge; |
|||
} |
|||
.ui.massive.images .image, |
|||
.ui.massive.images img, |
|||
.ui.massive.image { |
|||
width: @massiveWidth; |
|||
font-size: @massive; |
|||
} |
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.images { |
|||
font-size: 0em; |
|||
margin: 0em -@imageHorizontalMargin 0rem; |
|||
} |
|||
|
|||
.ui.images .image, |
|||
.ui.images img { |
|||
display: inline-block; |
|||
margin: 0em @imageHorizontalMargin @imageVerticalMargin; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,307 +0,0 @@ |
|||
/* |
|||
* # Semantic - Input |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'input'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------------- |
|||
Inputs |
|||
---------------------*/ |
|||
|
|||
.ui.input { |
|||
display: inline-block; |
|||
position: relative; |
|||
color: @inputColor; |
|||
} |
|||
.ui.input input { |
|||
width: 100%; |
|||
font-family: @pageFont; |
|||
|
|||
margin: 0em; |
|||
padding: @verticalPadding @horizontalPadding; |
|||
|
|||
background: @background; |
|||
border: @border; |
|||
outline: none; |
|||
color: @inputColor; |
|||
border-radius: @borderRadius; |
|||
transition: @transition; |
|||
|
|||
box-shadow: @boxShadow; |
|||
box-sizing: border-box; |
|||
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Placeholder |
|||
---------------------*/ |
|||
|
|||
/* browsers require these rules separate */ |
|||
.ui.input input::-webkit-input-placeholder { |
|||
color: @placeholderColor; |
|||
} |
|||
.ui.input input::-moz-placeholder { |
|||
color: @placeholderColor; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Active |
|||
---------------------*/ |
|||
|
|||
.ui.input input:active, |
|||
.ui.input.down input { |
|||
border-color: @downBorderColor; |
|||
background: @downBackground; |
|||
color: @downColor; |
|||
box-shadow: @downBoxShadow; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.loading.input > .icon { |
|||
background: url(@loadingImage) no-repeat 50% 50%; |
|||
} |
|||
.ui.loading.input > .icon:before, |
|||
.ui.loading.input > .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Focus |
|||
---------------------*/ |
|||
|
|||
.ui.input.focus input, |
|||
.ui.input input:focus { |
|||
border-color: @focusBorderColor; |
|||
background: @focusBackground; |
|||
color: @focusColor; |
|||
box-shadow: @focusBoxShadow; |
|||
} |
|||
.ui.input.focus input input::-webkit-input-placeholder, |
|||
.ui.input input:focus input::-webkit-input-placeholder { |
|||
color: @placeholderFocusColor; |
|||
} |
|||
.ui.input.focus input input::-moz-placeholder, |
|||
.ui.input input:focus input::-moz-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; |
|||
} |
|||
|
|||
/* Focused Error Placeholder */ |
|||
.ui.input.error input :focus::-webkit-input-placeholder { |
|||
color: @placeholderErrorFocusColor; |
|||
} |
|||
.ui.input.error input :focus::-moz-placeholder { |
|||
color: @placeholderErrorFocusColor; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Transparent |
|||
---------------------*/ |
|||
|
|||
.ui.transparent.input input { |
|||
border: none; |
|||
background-color: transparent; |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Icon |
|||
---------------------*/ |
|||
|
|||
.ui.icon.input > .icon { |
|||
cursor: default; |
|||
position: absolute; |
|||
opacity: @iconOpacity; |
|||
top: 0px; |
|||
right: 0px; |
|||
|
|||
margin: 0em; |
|||
width: @inputHeight; |
|||
height: 100%; |
|||
padding-top: @iconOffset; |
|||
|
|||
text-align: center; |
|||
|
|||
border-radius: 0em @borderRadius @borderRadius 0em; |
|||
box-sizing: border-box; |
|||
transition: @iconTransition; |
|||
} |
|||
.ui.icon.input > .link.icon { |
|||
cursor: pointer; |
|||
} |
|||
.ui.icon.input input { |
|||
padding-right: @iconMargin !important; |
|||
} |
|||
.ui.icon.input > .circular.icon { |
|||
top: @circularIconVerticalOffset; |
|||
right: @circularIconHorizontalOffset; |
|||
} |
|||
|
|||
/* Left Icon Input */ |
|||
.ui.left.icon.input > .icon { |
|||
right: auto; |
|||
left: @borderWidth; |
|||
border-radius: @borderRadius 0em 0em @borderRadius; |
|||
} |
|||
.ui.left.icon.input > .circular.icon { |
|||
right: auto; |
|||
left: @circularIconHorizontalOffset; |
|||
} |
|||
.ui.left.icon.input > input { |
|||
padding-left: @iconMargin !important; |
|||
padding-right: @horizontalPadding !important; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.icon.input > input:focus ~ .icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Labeled |
|||
---------------------*/ |
|||
|
|||
.ui.labeled.input .corner.label { |
|||
top: @borderWidth; |
|||
right: @borderWidth; |
|||
font-size: @labelSize; |
|||
border-top-right-radius: @borderRadius; |
|||
} |
|||
.ui.labeled.input input { |
|||
padding-right: @labeledMargin !important; |
|||
} |
|||
|
|||
/* Spacing with corner label */ |
|||
.ui.labeled.icon.input:not(.left) > input { |
|||
padding-right: @labeledIconInputMargin !important; |
|||
} |
|||
.ui.labeled.icon.input:not(.left) > .icon { |
|||
margin-right: @labeledIconMargin; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Action |
|||
---------------------*/ |
|||
|
|||
.ui.action.input { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.action.input > input { |
|||
display: table-cell; |
|||
border-top-right-radius: 0px !important; |
|||
border-bottom-right-radius: 0px !important; |
|||
border-right: none; |
|||
} |
|||
.ui.action.input > .button, |
|||
.ui.action.input > .buttons { |
|||
display: table-cell; |
|||
|
|||
border-top-left-radius: 0px; |
|||
border-bottom-left-radius: 0px; |
|||
white-space: nowrap; |
|||
} |
|||
.ui.action.input > .button > .icon, |
|||
.ui.action.input > .buttons > .button > .icon { |
|||
display: inline; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.ui.fluid.action.input { |
|||
display: table; |
|||
width: 100%; |
|||
} |
|||
.ui.fluid.action.input > .button { |
|||
width: 0.01%; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Fluid |
|||
---------------------*/ |
|||
|
|||
.ui.fluid.input { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/*-------------------- |
|||
Size |
|||
---------------------*/ |
|||
|
|||
.ui.mini.input { |
|||
font-size: 0.8125em; |
|||
} |
|||
.ui.small.input { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.input { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.input { |
|||
font-size: 1.125em; |
|||
} |
|||
.ui.big.input { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.huge.input { |
|||
font-size: 1.375em; |
|||
} |
|||
.ui.massive.input { |
|||
font-size: 1.5rem; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,912 +0,0 @@ |
|||
/* |
|||
* # Semantic - Label |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'label'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Label |
|||
*******************************/ |
|||
|
|||
.ui.label { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1; |
|||
|
|||
margin: @verticalMargin @horizontalMargin; |
|||
|
|||
background-color: @backgroundColor; |
|||
border-color: @backgroundColor; |
|||
|
|||
background-image: @backgroundImage; |
|||
|
|||
padding: @verticalPadding @horizontalPadding; |
|||
color: @labelTextColor; |
|||
|
|||
text-transform: @textTransform; |
|||
font-weight: @fontWeight; |
|||
|
|||
border-radius: @borderRadius; |
|||
box-sizing: border-box; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
.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: 0.2s opacity ease; |
|||
} |
|||
.ui.label a:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Detail */ |
|||
.ui.label .detail { |
|||
display: inline-block; |
|||
margin-left: @detailMargin; |
|||
font-weight: bold; |
|||
opacity: @detailOpacity; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.label .icon { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Removable label */ |
|||
.ui.label .delete.icon { |
|||
cursor: pointer; |
|||
margin-right: 0em; |
|||
margin-left: @deleteMargin; |
|||
opacity: @linkOpacity; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
.ui.label .delete.icon:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*------------------- |
|||
Group |
|||
--------------------*/ |
|||
|
|||
.ui.labels .label { |
|||
margin: 0em @groupHorizontalMargin @groupVerticalMargin 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Coupling |
|||
--------------------*/ |
|||
|
|||
/* Padding on next content after a label */ |
|||
.ui.segment > .attached.label:first-child + * { |
|||
margin-top: @attachedSegmentPadding; |
|||
} |
|||
.ui.segment > .bottom.attached.label:first-child ~ :last-child { |
|||
margin-top: 0em; |
|||
margin-bottom: @attachedSegmentPadding; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.image.label { |
|||
background-color: @imageLabelBackgroundColor; |
|||
width: auto !important; |
|||
margin-top: 0em; |
|||
margin-bottom: 0em; |
|||
|
|||
padding-top: @verticalPadding; |
|||
padding-bottom: @verticalPadding; |
|||
|
|||
vertical-align: baseline; |
|||
text-transform: none; |
|||
|
|||
box-shadow: @imageLabelBoxShadow; |
|||
} |
|||
.ui.image.label img { |
|||
display: inline-block; |
|||
height: @imageLabelImageHeight; |
|||
margin: -@verticalPadding @horizontalPadding -@verticalPadding -@horizontalPadding; |
|||
vertical-align: top; |
|||
border-radius: @borderRadius 0em 0em @borderRadius; |
|||
} |
|||
|
|||
/******************************* |
|||
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 { |
|||
background-color: @labelHoverBackgroundColor; |
|||
background-image: @labelHoverBackgroundImage; |
|||
color: @labelHoverTextColor; |
|||
} |
|||
|
|||
/*------------------- |
|||
Visible |
|||
--------------------*/ |
|||
|
|||
.ui.labels.visible .label, |
|||
.ui.label.visible { |
|||
display: inline-block !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Hidden |
|||
--------------------*/ |
|||
|
|||
.ui.labels.hidden .label, |
|||
.ui.label.hidden { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
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; |
|||
} |
|||
.ui.tag.labels .label:before, |
|||
.ui.tag.label:before { |
|||
position: absolute; |
|||
top: @tagTriangleTopOffset; |
|||
left: @tagTriangleLeftOffset; |
|||
content: ''; |
|||
|
|||
background-color: @backgroundColor; |
|||
background-image: @backgroundImage; |
|||
|
|||
width: @tagTriangleSize; |
|||
height: @tagTriangleSize; |
|||
|
|||
transform: rotate(45deg); |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
|
|||
|
|||
.ui.tag.labels .label:after, |
|||
.ui.tag.label:after { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 50%; |
|||
left: -(@tagCircleSize / 2); |
|||
|
|||
margin-top: -(@tagCircleSize / 2); |
|||
background-color: @tagCircleColor; |
|||
width: @tagCircleSize; |
|||
height: @tagCircleSize; |
|||
|
|||
box-shadow: @tagCircleBoxShadow; |
|||
border-radius: @circularRadius; |
|||
} |
|||
/*------------------- |
|||
Ribbon |
|||
--------------------*/ |
|||
|
|||
.ui.ribbon.label { |
|||
position: relative; |
|||
margin: 0em; |
|||
left: -@ribbonDistance; |
|||
padding-left: @ribbonDistance; |
|||
|
|||
border-radius: 0em @borderRadius @borderRadius 0em; |
|||
|
|||
border-color: @ribbonShadowColor; |
|||
} |
|||
|
|||
.ui.ribbon.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
|
|||
top: 100%; |
|||
left: 0%; |
|||
|
|||
border-top: 0em solid transparent; |
|||
border-right-width: @ribbonTriangleSize; |
|||
border-right-color: inherit; |
|||
border-right-style: solid; |
|||
border-bottom: @ribbonTriangleSize solid transparent; |
|||
border-left: 0em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.top.attached.label, |
|||
.ui.attached.label { |
|||
width: 100%; |
|||
position: absolute; |
|||
margin: 0em; |
|||
top: 0em; |
|||
left: 0em; |
|||
|
|||
padding: @attachedVerticalPadding @attachedHorizontalPadding; |
|||
|
|||
border-radius: @borderRadius @borderRadius 0em 0em; |
|||
} |
|||
.ui.bottom.attached.label { |
|||
top: auto; |
|||
bottom: 0em; |
|||
border-radius: 0em 0em @borderRadius @borderRadius; |
|||
} |
|||
|
|||
.ui.top.left.attached.label { |
|||
width: auto; |
|||
margin-top: 0em !important; |
|||
border-radius: @borderRadius 0em @borderRadius 0em; |
|||
} |
|||
|
|||
.ui.top.right.attached.label { |
|||
width: auto; |
|||
left: auto; |
|||
right: 0em; |
|||
border-radius: 0em @borderRadius 0em @borderRadius; |
|||
} |
|||
.ui.bottom.left.attached.label { |
|||
width: auto; |
|||
top: auto; |
|||
bottom: 0em; |
|||
|
|||
border-radius: @borderRadius 0em 0em @borderRadius; |
|||
} |
|||
.ui.bottom.right.attached.label { |
|||
top: auto; |
|||
bottom: 0em; |
|||
left: auto; |
|||
right: 0em; |
|||
width: auto; |
|||
border-radius: @borderRadius 0em @borderRadius 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Corner Label |
|||
--------------------*/ |
|||
|
|||
.ui.corner.label { |
|||
background-color: transparent; |
|||
position: absolute; |
|||
top: 0em; |
|||
right: 0em; |
|||
z-index: 10; |
|||
margin: 0em; |
|||
|
|||
width: @cornerTriangleSize; |
|||
height: @cornerTriangleSize; |
|||
padding: 0em; |
|||
|
|||
text-align: center; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.corner.label:after { |
|||
position: absolute; |
|||
content: ""; |
|||
right: 0em; |
|||
top: 0em; |
|||
z-index: -1; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
|
|||
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: border-color 0.2s ease; |
|||
} |
|||
|
|||
.ui.corner.label .icon { |
|||
position: relative; |
|||
top: @cornerTopOffset; |
|||
left: @cornerLeftOffset; |
|||
|
|||
font-size: @cornerIconSize; |
|||
margin: 0em; |
|||
} |
|||
.ui.corner.label .text { |
|||
display: inline-block; |
|||
|
|||
position: relative; |
|||
top: @cornerTopOffset; |
|||
left: @cornerLeftOffset; |
|||
|
|||
margin: 0em; |
|||
width: @cornerTextWidth; |
|||
font-size: @cornerTextSize; |
|||
font-weight: bold; |
|||
|
|||
text-align: center; |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
/* 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: -@cornerLeftOffset; |
|||
} |
|||
.ui.left.corner.label .text { |
|||
left: -@cornerLeftOffset; |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
/* Coupling */ |
|||
.ui.rounded.image > .ui.corner.label, |
|||
.ui.input > .ui.corner.label, |
|||
.ui.segment > .ui.corner.label { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* Corner Segment Label */ |
|||
.ui.segment > .ui.corner.label { |
|||
top: -1px; |
|||
right: -1px; |
|||
} |
|||
.ui.segment > .ui.left.corner.label { |
|||
right: auto; |
|||
left: -1px; |
|||
} |
|||
|
|||
/* Corner Input Label */ |
|||
.ui.input > .ui.corner.label{ |
|||
top: 1px; |
|||
right: 1px; |
|||
} |
|||
.ui.input > .ui.right.corner.label { |
|||
right: auto; |
|||
left: 1px; |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.corner.label:hover { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
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; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
/*--- Black ---*/ |
|||
.ui.black.labels .label, |
|||
.ui.black.label { |
|||
background-color: @black !important; |
|||
border-color: @black !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .black.label:before, |
|||
.ui.black.labels .label:before, |
|||
.ui.black.label:before { |
|||
background-color: @black !important; |
|||
} |
|||
a.ui.black.labels .label:hover, |
|||
a.ui.black.label:hover { |
|||
background-color: @blackHover !important; |
|||
border-color: @blackHover !important; |
|||
} |
|||
.ui.labels a.black.label:hover:before, |
|||
.ui.black.labels a.label:hover:before, |
|||
a.ui.black.label:hover:before { |
|||
background-color: @blackHover !important; |
|||
} |
|||
.ui.black.corner.label, |
|||
.ui.black.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.black.ribbon.label { |
|||
border-color: @blackHover !important; |
|||
} |
|||
|
|||
/*--- Blue ---*/ |
|||
.ui.blue.labels .label, |
|||
.ui.blue.label { |
|||
background-color: @blue !important; |
|||
border-color: @blue !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .blue.label:before, |
|||
.ui.blue.labels .label:before, |
|||
.ui.blue.label:before { |
|||
background-color: @blue !important; |
|||
} |
|||
a.ui.blue.labels .label:hover, |
|||
.ui.blue.labels a.label:hover, |
|||
a.ui.blue.label:hover { |
|||
background-color: @blueHover !important; |
|||
border-color: @blueHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.blue.label:hover:before, |
|||
.ui.blue.labels a.label:hover:before, |
|||
a.ui.blue.label:hover:before { |
|||
background-color: @blueHover !important; |
|||
} |
|||
.ui.blue.corner.label, |
|||
.ui.blue.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.blue.ribbon.label { |
|||
border-color: @blueHover !important; |
|||
} |
|||
|
|||
/*--- Green ---*/ |
|||
.ui.green.labels .label, |
|||
.ui.green.label { |
|||
background-color: @green !important; |
|||
border-color: @green !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .green.label:before, |
|||
.ui.green.labels .label:before, |
|||
.ui.green.label:before { |
|||
background-color: @green !important; |
|||
} |
|||
|
|||
a.ui.green.labels .label:hover, |
|||
a.ui.green.label:hover { |
|||
background-color: @greenHover !important; |
|||
border-color: @greenHover !important; |
|||
} |
|||
.ui.labels a.green.label:hover:before, |
|||
.ui.green.labels a.label:hover:before, |
|||
a.ui.green.label:hover:before { |
|||
background-color: @greenHover !important; |
|||
} |
|||
|
|||
.ui.green.corner.label, |
|||
.ui.green.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.green.ribbon.label { |
|||
border-color: @greenHover !important; |
|||
} |
|||
|
|||
/*--- Orange ---*/ |
|||
.ui.orange.labels .label, |
|||
.ui.orange.label { |
|||
background-color: @orange !important; |
|||
border-color: @orange !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .orange.label:before, |
|||
.ui.orange.labels .label:before, |
|||
.ui.orange.label:before { |
|||
background-color: @orange !important; |
|||
} |
|||
a.ui.orange.labels .label:hover, |
|||
.ui.orange.labels a.label:hover, |
|||
a.ui.orange.label:hover { |
|||
background-color: @orangeHover !important; |
|||
border-color: @orangeHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.orange.label:hover:before, |
|||
.ui.orange.labels a.label:hover:before, |
|||
a.ui.orange.label:hover:before { |
|||
background-color: @orangeHover !important; |
|||
} |
|||
.ui.orange.corner.label, |
|||
.ui.orange.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.orange.ribbon.label { |
|||
border-color: @orangeHover !important; |
|||
} |
|||
|
|||
/*--- Pink ---*/ |
|||
.ui.pink.labels .label, |
|||
.ui.pink.label { |
|||
background-color: @pink !important; |
|||
border-color: @pink !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .pink.label:before, |
|||
.ui.pink.labels .label:before, |
|||
.ui.pink.label:before { |
|||
background-color: @pink !important; |
|||
} |
|||
a.ui.pink.labels .label:hover, |
|||
.ui.pink.labels a.label:hover, |
|||
a.ui.pink.label:hover { |
|||
background-color: @pinkHover !important; |
|||
border-color: @pinkHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.pink.label:hover:before, |
|||
.ui.pink.labels a.label:hover:before, |
|||
a.ui.pink.label:hover:before { |
|||
background-color: @pinkHover !important; |
|||
} |
|||
.ui.pink.corner.label, |
|||
.ui.pink.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.pink.ribbon.label { |
|||
border-color: @pinkHover !important; |
|||
} |
|||
|
|||
/*--- Purple ---*/ |
|||
.ui.purple.labels .label, |
|||
.ui.purple.label { |
|||
background-color: @purple !important; |
|||
border-color: @purple !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .purple.label:before, |
|||
.ui.purple.labels .label:before, |
|||
.ui.purple.label:before { |
|||
background-color: @purple !important; |
|||
} |
|||
a.ui.purple.labels .label:hover, |
|||
.ui.purple.labels a.label:hover, |
|||
a.ui.purple.label:hover { |
|||
background-color: @purpleHover !important; |
|||
border-color: @purpleHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.purple.label:hover:before, |
|||
.ui.purple.labels a.label:hover:before, |
|||
a.ui.purple.label:hover:before { |
|||
background-color: @purpleHover !important; |
|||
} |
|||
.ui.purple.corner.label, |
|||
.ui.purple.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.purple.ribbon.label { |
|||
border-color: @purpleHover !important; |
|||
} |
|||
|
|||
/*--- Red ---*/ |
|||
.ui.red.labels .label, |
|||
.ui.red.label { |
|||
background-color: @red !important; |
|||
border-color: @red !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .red.label:before, |
|||
.ui.red.labels .label:before, |
|||
.ui.red.label:before { |
|||
background-color: @red !important; |
|||
} |
|||
.ui.red.corner.label, |
|||
.ui.red.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
|
|||
a.ui.red.labels .label:hover, |
|||
a.ui.red.label:hover{ |
|||
background-color: @redHover !important; |
|||
border-color: @redHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.red.label:hover:before, |
|||
.ui.red.labels a.label:hover:before, |
|||
a.ui.red.label:hover:before { |
|||
background-color: @redHover !important; |
|||
} |
|||
.ui.red.ribbon.label { |
|||
border-color: @redHover !important; |
|||
} |
|||
|
|||
/*--- Teal ---*/ |
|||
.ui.teal.labels .label, |
|||
.ui.teal.label { |
|||
background-color: @teal !important; |
|||
border-color: @teal !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .teal.label:before, |
|||
.ui.teal.labels .label:before, |
|||
.ui.teal.label:before { |
|||
background-color: @teal !important; |
|||
} |
|||
a.ui.teal.labels .label:hover, |
|||
.ui.teal.labels a.label:hover, |
|||
a.ui.teal.label:hover { |
|||
background-color: @tealHover !important; |
|||
border-color: @tealHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.teal.label:hover:before, |
|||
.ui.teal.labels a.label:hover:before, |
|||
a.ui.teal.label:hover:before { |
|||
background-color: @tealHover !important; |
|||
} |
|||
.ui.teal.corner.label, |
|||
.ui.teal.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.teal.ribbon.label { |
|||
border-color: @tealHover !important; |
|||
} |
|||
|
|||
/*--- Yellow ---*/ |
|||
.ui.yellow.labels .label, |
|||
.ui.yellow.label { |
|||
background-color: @yellow !important; |
|||
border-color: @yellow !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels .yellow.label:before, |
|||
.ui.yellow.labels .label:before, |
|||
.ui.yellow.label:before { |
|||
background-color: @yellow !important; |
|||
} |
|||
a.ui.yellow.labels .label:hover, |
|||
.ui.yellow.labels a.label:hover, |
|||
a.ui.yellow.label:hover { |
|||
background-color: @yellowHover !important; |
|||
border-color: @yellowHover !important; |
|||
color: @invertedTextColor !important; |
|||
} |
|||
.ui.labels a.yellow.label:hover:before, |
|||
.ui.yellow.labels a.label:hover:before, |
|||
a.ui.yellow.label:hover:before { |
|||
background-color: @yellowHover !important; |
|||
} |
|||
.ui.yellow.corner.label, |
|||
.ui.yellow.corner.label:hover { |
|||
background-color: transparent !important; |
|||
} |
|||
.ui.yellow.ribbon.label { |
|||
border-color: @tealHover !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: 0.5em; |
|||
min-height: 0.5em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/*------------------- |
|||
Pointing |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.label { |
|||
position: relative; |
|||
} |
|||
.ui.attached.pointing.label { |
|||
position: absolute; |
|||
} |
|||
|
|||
.ui.pointing.label:before { |
|||
position: absolute; |
|||
content: ''; |
|||
|
|||
width: @pointingTriangleSize; |
|||
height: @pointingTriangleSize; |
|||
|
|||
background-image: none; |
|||
|
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
transition: |
|||
background 0.1s linear |
|||
; |
|||
} |
|||
/*--- Above ---*/ |
|||
.ui.pointing.label:before { |
|||
background-color: @backgroundColor; |
|||
background-image: @backgroundImage; |
|||
} |
|||
.ui.pointing.label, |
|||
.ui.pointing.above.label { |
|||
margin-top: 1em; |
|||
} |
|||
.ui.pointing.label:before, |
|||
.ui.pointing.above.label:before { |
|||
margin-left: -@pointingTriangleOffset; |
|||
top: -@pointingTriangleOffset; |
|||
left: 50%; |
|||
} |
|||
/*--- Below ---*/ |
|||
.ui.pointing.below.label { |
|||
margin-top: 0em; |
|||
margin-bottom: 1em; |
|||
} |
|||
.ui.pointing.below.label:before { |
|||
margin-left: -@pointingTriangleOffset; |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -@pointingTriangleOffset; |
|||
left: 50%; |
|||
} |
|||
/*--- Left ---*/ |
|||
.ui.pointing.left.label { |
|||
margin-top: 0em; |
|||
margin-left: 1em; |
|||
} |
|||
.ui.pointing.left.label:before { |
|||
margin-top: -@pointingTriangleOffset; |
|||
bottom: auto; |
|||
right: auto; |
|||
top: 50%; |
|||
left: 0em; |
|||
} |
|||
/*--- Right ---*/ |
|||
.ui.pointing.right.label { |
|||
margin-top: 0em; |
|||
margin-right: 1em; |
|||
} |
|||
.ui.pointing.right.label:before { |
|||
margin-top: -@pointingTriangleOffset; |
|||
right: -@pointingTriangleOffset; |
|||
top: 50%; |
|||
bottom: auto; |
|||
left: auto; |
|||
} |
|||
|
|||
/*------------------ |
|||
Floating Label |
|||
-------------------*/ |
|||
|
|||
.ui.floating.label { |
|||
position: absolute; |
|||
z-index: 100; |
|||
top: @floatingTopOffset; |
|||
left: 100%; |
|||
margin: 0em 0em 0em @floatingLeftOffset !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.small.labels .label, |
|||
.ui.small.label { |
|||
font-size: @small; |
|||
} |
|||
.ui.label { |
|||
font-size: @medium; |
|||
} |
|||
.ui.large.labels .label, |
|||
.ui.large.label { |
|||
font-size: @large; |
|||
} |
|||
.ui.huge.labels .label, |
|||
.ui.huge.label { |
|||
font-size: @huge; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,260 +0,0 @@ |
|||
/* |
|||
* # Semantic - Loader |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'loader'; |
|||
|
|||
@import '../../semantic.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%); |
|||
} |
|||
|
|||
.ui.dimmer .loader { |
|||
display: block; |
|||
} |
|||
|
|||
.ui.dimmer .ui.loader, |
|||
.ui.inverted.loader { |
|||
color: @loaderTextColor |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
CSS |
|||
---------------*/ |
|||
|
|||
/* Flipping */ |
|||
.ui.flipping.loader { |
|||
width: auto; |
|||
height: auto; |
|||
background-image: none !important; |
|||
} |
|||
.ui.flipping.loader .shape { |
|||
position: relative; |
|||
margin: 0em auto 1em; |
|||
color: transparent; |
|||
box-shadow: 0px 0px 0px 1px; |
|||
animation: loaderFlipping 1s infinite ease-in-out; |
|||
margin-bottom: 1em; |
|||
transform-style: preserve-3d; |
|||
} |
|||
.ui.flipping.loader .shape:before, |
|||
.ui.flipping.loader .shape:after { |
|||
position: absolute; |
|||
content: ''; |
|||
top: 0px; |
|||
left: 0px; |
|||
box-shadow: 0px 0px 0px 1px; |
|||
backface-visibility: hidden; |
|||
} |
|||
.ui.flipping.loader .shape:before { |
|||
background-color: @blue; |
|||
transform: rotateY(0deg); |
|||
z-index: 2; |
|||
} |
|||
.ui.flipping.loader .shape:after { |
|||
background-color: @red; |
|||
transform: rotateY(180deg); |
|||
} |
|||
|
|||
/* Circular */ |
|||
.ui.flipping.circular.loader .shape, |
|||
.ui.flipping.circular.loader .shape:before, |
|||
.ui.flipping.circular.loader .shape:after { |
|||
border-radius: @circularRadius; |
|||
} |
|||
|
|||
/* Sizes */ |
|||
.ui.mini.flipping.loader .shape, |
|||
.ui.mini.flipping.loader .shape:before, |
|||
.ui.mini.flipping.loader .shape:after { |
|||
width: @miniSize; |
|||
height: @miniSize; |
|||
} |
|||
.ui.flipping.loader .shape, |
|||
.ui.flipping.loader .shape:before, |
|||
.ui.flipping.loader .shape:after { |
|||
width: @mediumSize; |
|||
height: @mediumSize; |
|||
} |
|||
|
|||
|
|||
@keyframes loaderFlipping { |
|||
0% { |
|||
transform: perspective(6em) rotateX(0deg) rotateY(0deg); |
|||
} |
|||
50% { |
|||
transform: perspective(6em) rotateX(-180deg) rotateY(0deg); |
|||
} |
|||
100% { |
|||
transform: perspective(6em) rotateX(-180deg) rotateY(-180deg); |
|||
} |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Text |
|||
--------------------*/ |
|||
|
|||
.ui.text.loader { |
|||
width: auto !important; |
|||
height: auto !important; |
|||
text-align: center; |
|||
font-style: normal; |
|||
} |
|||
|
|||
.ui.mini.text.loader { |
|||
min-width: @miniSize; |
|||
padding-top: (@miniSize + @textDistance); |
|||
} |
|||
.ui.small.text.loader { |
|||
min-width: @smallSize; |
|||
padding-top: (@smallSize + @textDistance); |
|||
} |
|||
.ui.text.loader { |
|||
min-width: @mediumSize; |
|||
padding-top: (@mediumSize + @textDistance); |
|||
} |
|||
.ui.large.text.loader { |
|||
min-width: @largeSize; |
|||
padding-top: (@largeSize + @textDistance); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.loader.active, |
|||
.ui.loader.visible { |
|||
display: block; |
|||
} |
|||
.ui.loader.disabled, |
|||
.ui.loader.hidden { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
/* Tiny Size */ |
|||
.ui.inverted.dimmer .ui.mini.loader, |
|||
.ui.mini.loader { |
|||
width: @miniSize; |
|||
height: @miniSize; |
|||
font-size: @miniFontSize; |
|||
background-image: url(@miniLoaderPath); |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.inverted.dimmer .ui.small.loader, |
|||
.ui.small.loader { |
|||
width: @smallSize; |
|||
height: @smallSize; |
|||
font-size: @smallFontSize; |
|||
background-image: url(@smallLoaderPath); |
|||
} |
|||
|
|||
.ui.inverted.dimmer .ui.loader, |
|||
.ui.loader { |
|||
width: @mediumSize; |
|||
height: @mediumSize; |
|||
font-size: @mediumFontSize; |
|||
background: url(@mediumLoaderPath) no-repeat; |
|||
background-position: 50% 0px; |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.inverted.dimmer .ui.loader.large, |
|||
.ui.loader.large { |
|||
width: @largeSize; |
|||
height: @largeSize; |
|||
font-size: @largeFontSize; |
|||
background-image: url(@largeLoaderPath); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.dimmer .ui.loader { |
|||
color: @invertedLoaderTextColor; |
|||
} |
|||
|
|||
/* Tiny Size */ |
|||
.ui.dimmer .mini.ui.loader, |
|||
.ui.inverted .mini.ui.loader { |
|||
background-image: url(@miniInvertedLoaderPath); |
|||
} |
|||
|
|||
/* Small Size */ |
|||
.ui.dimmer .small.ui.loader, |
|||
.ui.inverted .small.ui.loader { |
|||
background-image: url(@smallInvertedLoaderPath); |
|||
} |
|||
|
|||
/* Standard Size */ |
|||
.ui.dimmer .ui.loader, |
|||
.ui.inverted.loader { |
|||
background-image: url(@mediumInvertedLoaderPath); |
|||
} |
|||
|
|||
/* Large Size */ |
|||
.ui.dimmer .large.ui.loader, |
|||
.ui.inverted .large.ui.loader { |
|||
background-image: url(@largeInvertedLoaderPath); |
|||
} |
|||
|
|||
/*------------------- |
|||
Inline |
|||
--------------------*/ |
|||
|
|||
.ui.inline.loader { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin: 0em; |
|||
transform: none; |
|||
} |
|||
|
|||
.ui.inline.loader.active, |
|||
.ui.inline.loader.visible { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,362 +0,0 @@ |
|||
/* |
|||
* # Semantic - Progress Bar |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Progress Bar |
|||
*******************************/ |
|||
|
|||
.ui.progress { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
width: 100%; |
|||
height: 35px; |
|||
|
|||
background-color: #FAFAFA; |
|||
padding: 5px; |
|||
|
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.progress .bar { |
|||
display: inline-block; |
|||
height: 100%; |
|||
|
|||
background-color: #CCCCCC; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-moz-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-ms-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
-o-transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
transition: |
|||
width 1s ease-in-out, |
|||
background-color 1s ease-out |
|||
; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Successful |
|||
---------------*/ |
|||
|
|||
.ui.successful.progress .bar { |
|||
background-color: #73E064 !important; |
|||
} |
|||
.ui.successful.progress .bar, |
|||
.ui.successful.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
.ui.warning.progress .bar { |
|||
background-color: #E96633 !important; |
|||
} |
|||
.ui.warning.progress .bar, |
|||
.ui.warning.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Failed |
|||
---------------*/ |
|||
|
|||
.ui.failed.progress .bar { |
|||
background-color: #DF9BA4 !important; |
|||
} |
|||
.ui.failed.progress .bar, |
|||
.ui.failed.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.active.progress .bar { |
|||
position: relative; |
|||
} |
|||
.ui.active.progress .bar::after { |
|||
content: ''; |
|||
opacity: 0; |
|||
|
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
right: 0px; |
|||
bottom: 0px; |
|||
background: #FFFFFF; |
|||
|
|||
-moz-border-radius: 3px; |
|||
-webkit-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-animation: progress-active 2s ease-out infinite; |
|||
-moz-animation: progress-active 2s ease-out infinite; |
|||
animation: progress-active 2s ease-out infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 95%; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
@keyframes progress-active { |
|||
0% { |
|||
opacity: 0; |
|||
width: 0; |
|||
} |
|||
50% { |
|||
opacity: 0.3; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.disabled.progress { |
|||
opacity: 0.35; |
|||
} |
|||
.ui.disabled.progress .bar, |
|||
.ui.disabled.progress .bar::after { |
|||
-webkit-animation: none !important; |
|||
-moz-animation: none !important; |
|||
animation: none !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Attached |
|||
---------------*/ |
|||
|
|||
/* bottom attached */ |
|||
.ui.progress.attached { |
|||
position: relative; |
|||
border: none; |
|||
} |
|||
.ui.progress.attached, |
|||
.ui.progress.attached .bar { |
|||
display: block; |
|||
height: 3px; |
|||
padding: 0px; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 0em 0em 0.3125em 0.3125em; |
|||
-moz-border-radius: 0em 0em 0.3125em 0.3125em; |
|||
border-radius: 0em 0em 0.3125em 0.3125em; |
|||
} |
|||
.ui.progress.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
/* top attached */ |
|||
.ui.progress.top.attached, |
|||
.ui.progress.top.attached .bar { |
|||
top: -2px; |
|||
-webkit-border-radius: 0.3125em 0.3125em 0em 0em; |
|||
-moz-border-radius: 0.3125em 0.3125em 0em 0em; |
|||
border-radius: 0.3125em 0.3125em 0em 0em; |
|||
} |
|||
.ui.progress.top.attached .bar { |
|||
-webkit-border-radius: 0em; |
|||
-moz-border-radius: 0em; |
|||
border-radius: 0em; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
.ui.blue.progress .bar { |
|||
background-color: #6ECFF5; |
|||
} |
|||
.ui.black.progress .bar { |
|||
background-color: #5C6166; |
|||
} |
|||
.ui.green.progress .bar { |
|||
background-color: #A1CF64; |
|||
} |
|||
.ui.red.progress .bar { |
|||
background-color: #EF4D6D; |
|||
} |
|||
.ui.purple.progress .bar { |
|||
background-color: #564F8A; |
|||
} |
|||
.ui.teal.progress .bar { |
|||
background-color: #00B5AD; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Striped |
|||
---------------*/ |
|||
|
|||
.ui.progress.striped .bar { |
|||
-webkit-background-size: 30px 30px; |
|||
-moz-background-size: 30px 30px; |
|||
background-size: 30px 30px; |
|||
background-image: |
|||
-webkit-gradient(linear, left top, right bottom, |
|||
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), |
|||
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), |
|||
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), |
|||
to(transparent) |
|||
) |
|||
; |
|||
background-image: |
|||
-webkit-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-moz-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-ms-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
-o-linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
background-image: |
|||
linear-gradient( |
|||
135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, |
|||
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, |
|||
transparent 75%, transparent |
|||
) |
|||
; |
|||
} |
|||
|
|||
.ui.progress.active.striped .bar:after { |
|||
-webkit-animation: none; |
|||
-moz-animation: none; |
|||
-ms-animation: none; |
|||
-o-animation: none; |
|||
animation: none; |
|||
} |
|||
.ui.progress.active.striped .bar { |
|||
-webkit-animation: progress-striped 3s linear infinite; |
|||
-moz-animation: progress-striped 3s linear infinite; |
|||
animation: progress-striped 3s linear infinite; |
|||
} |
|||
|
|||
@-webkit-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@-moz-keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
@keyframes progress-striped { |
|||
0% { |
|||
background-position: 0px 0; |
|||
} |
|||
100% { |
|||
background-position: 60px 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.small.progress .bar { |
|||
height: 14px; |
|||
} |
|||
@ -1,365 +0,0 @@ |
|||
/* |
|||
* # Semantic - Reveal |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Reveal |
|||
*******************************/ |
|||
|
|||
.ui.reveal { |
|||
display: inline-block; |
|||
position: relative !important; |
|||
z-index: 2 !important; |
|||
font-size: 0em !important; |
|||
} |
|||
|
|||
.ui.reveal > .content { |
|||
font-size: 1rem !important; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
|
|||
.ui.reveal > .visible.content { |
|||
position: absolute !important; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
z-index: 4 !important; |
|||
-webkit-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
all 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.reveal > .hidden.content { |
|||
position: relative !important; |
|||
z-index: 3 !important; |
|||
} |
|||
|
|||
/*------------------ |
|||
Loose Coupling |
|||
-------------------*/ |
|||
|
|||
.ui.reveal.button { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.reveal { |
|||
position: relative !important; |
|||
display: block; |
|||
overflow: hidden !important; |
|||
|
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.ui.slide.reveal > .content { |
|||
display: block; |
|||
float: left; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
-webkit-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-moz-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
-ms-transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
transition: |
|||
top 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
left 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
right 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s, |
|||
bottom 0.8s cubic-bezier(0.175, 0.885, 0.320, 1) 0.15s |
|||
; |
|||
} |
|||
.ui.slide.reveal > .visible.content { |
|||
position: relative !important; |
|||
} |
|||
.ui.slide.reveal > .hidden.content { |
|||
position: absolute !important; |
|||
left: 100% !important; |
|||
width: 100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .visible.content { |
|||
left: -100% !important; |
|||
} |
|||
.ui.slide.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.right.slide.reveal > .visible.content { |
|||
left: 0%; |
|||
} |
|||
.ui.right.slide.reveal > .hidden.content { |
|||
left: auto !important; |
|||
right: 100% !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
right: auto !important; |
|||
} |
|||
.ui.right.slide.reveal:hover > .hidden.content { |
|||
left: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
|
|||
.ui.up.slide.reveal > .visible.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.up.slide.reveal > .hidden.content { |
|||
top: 100% !important; |
|||
left: 0% !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .visible.content { |
|||
top: -100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.up.reveal:hover > .hidden.content { |
|||
top: 0% !important; |
|||
left: 0% !important; |
|||
} |
|||
|
|||
.ui.down.slide.reveal > .visible.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: auto !important; |
|||
bottom: 0% !important; |
|||
} |
|||
.ui.down.slide.reveal > .hidden.content { |
|||
top: auto !important; |
|||
right: auto !important; |
|||
bottom: 100% !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .visible.content { |
|||
left: 0% !important; |
|||
bottom: -100% !important; |
|||
} |
|||
.ui.slide.down.reveal:hover > .hidden.content { |
|||
left: 0% !important; |
|||
bottom: 0% !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Fade |
|||
---------------*/ |
|||
|
|||
.ui.fade.reveal > .visible.content { |
|||
opacity: 1; |
|||
} |
|||
.ui.fade.reveal:hover > .visible.content { |
|||
opacity: 0; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Move |
|||
---------------*/ |
|||
|
|||
.ui.move.reveal > .visible.content, |
|||
.ui.move.left.reveal > .visible.content { |
|||
left: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
right: 0% !important; |
|||
} |
|||
.ui.move.reveal:hover > .visible.content, |
|||
.ui.move.left.reveal:hover > .visible.content { |
|||
right: 100% !important; |
|||
} |
|||
|
|||
.ui.move.right.reveal > .visible.content { |
|||
right: auto !important; |
|||
top: auto !important; |
|||
bottom: auto !important; |
|||
left: 0% !important; |
|||
} |
|||
.ui.move.right.reveal:hover > .visible.content { |
|||
left: 100% !important; |
|||
} |
|||
|
|||
.ui.move.up.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
top: auto !important; |
|||
|
|||
bottom: 0% !important; |
|||
} |
|||
.ui.move.up.reveal:hover > .visible.content { |
|||
bottom: 100% !important; |
|||
} |
|||
|
|||
.ui.move.down.reveal > .visible.content { |
|||
right: auto !important; |
|||
left: auto !important; |
|||
bottom: auto !important; |
|||
|
|||
top: 0% !important; |
|||
bottom: auto !important; |
|||
} |
|||
.ui.move.down.reveal:hover > .visible.content { |
|||
top: 100% !important; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Rotate |
|||
---------------*/ |
|||
|
|||
.ui.rotate.reveal > .visible.content { |
|||
-webkit-transition-duration: 0.8s; |
|||
-moz-transition-duration: 0.8s; |
|||
-o-transition-duration: 0.8s; |
|||
-ms-transition-duration: 0.8s; |
|||
transition-duration: 0.8s; |
|||
|
|||
-webkit-transform: rotate(0deg); |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-ms-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
.ui.rotate.reveal > .visible.content, |
|||
.ui.rotate.right.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom right; |
|||
-moz-transform-origin: bottom right; |
|||
-o-transform-origin: bottom right; |
|||
-ms-transform-origin: bottom right; |
|||
transform-origin: bottom right; |
|||
} |
|||
.ui.rotate.reveal:hover > .visible.content, |
|||
.ui.rotate.right.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(110deg); |
|||
-moz-transform: rotate(110deg); |
|||
-o-transform: rotate(110deg); |
|||
-ms-transform: rotate(110deg); |
|||
transform: rotate(110deg); |
|||
} |
|||
|
|||
.ui.rotate.left.reveal > .visible.content { |
|||
-webkit-transform-origin: bottom left; |
|||
-moz-transform-origin: bottom left; |
|||
-o-transform-origin: bottom left; |
|||
-ms-transform-origin: bottom left; |
|||
transform-origin: bottom left; |
|||
} |
|||
.ui.rotate.left.reveal:hover > .visible.content { |
|||
-webkit-transform: rotate(-110deg); |
|||
-moz-transform: rotate(-110deg); |
|||
-o-transform: rotate(-110deg); |
|||
-ms-transform: rotate(-110deg); |
|||
transform: rotate(-110deg); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.reveal { |
|||
opacity: 1 !important; |
|||
} |
|||
.ui.disabled.reveal > .content { |
|||
-webkit-transition: none !important; |
|||
-moz-transition: none !important; |
|||
-o-transition: none !important; |
|||
-ms-transition: none !important; |
|||
transition: none !important; |
|||
} |
|||
.ui.disabled.reveal:hover > .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.content { |
|||
display: none !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Masked |
|||
---------------*/ |
|||
|
|||
.ui.masked.reveal { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Instant |
|||
---------------*/ |
|||
|
|||
.ui.instant.reveal > .content { |
|||
-webkit-transition-delay: 0s !important; |
|||
-moz-transition-delay: 0s !important; |
|||
-o-transition-delay: 0s !important; |
|||
-ms-transition-delay: 0s !important; |
|||
transition-delay: 0s !important; |
|||
} |
|||
@ -1,437 +0,0 @@ |
|||
/* |
|||
* # Semantic - Segment |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'segment'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Segment |
|||
*******************************/ |
|||
|
|||
.ui.segment { |
|||
position: relative; |
|||
background-color: @white; |
|||
|
|||
box-shadow: @boxShadow; |
|||
|
|||
margin: @margin 0em; |
|||
padding: @verticalPadding @horizontalPadding; |
|||
|
|||
border-radius: @borderRadius; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
|
|||
.ui.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.ui.segment:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0px; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.vertical.segment { |
|||
margin: 0em; |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
|
|||
background-color: transparent; |
|||
border-radius: 0px; |
|||
box-shadow: 0px 1px 0px @borderColor; |
|||
} |
|||
.ui.vertical.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
.ui.horizontal.segment { |
|||
margin: 0em; |
|||
padding-top: 0em; |
|||
padding-bottom: 0em; |
|||
|
|||
background-color: transparent; |
|||
border-radius: 0px; |
|||
box-shadow: 1px 0px 0px @borderColor; |
|||
} |
|||
.ui.horizontal.segment:first-child { |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Loose Coupling |
|||
--------------------*/ |
|||
|
|||
.ui.pointing.menu + .ui.attached.segment { |
|||
top: 1px; |
|||
} |
|||
|
|||
.ui.page.grid.segment, |
|||
.ui.grid .ui.segment.column { |
|||
padding-top: @pageGridMargin; |
|||
padding-bottom: @pageGridMargin; |
|||
} |
|||
.ui.grid.segment, |
|||
.ui.grid .ui.segment.row, |
|||
.ui.grid .ui.segment.column { |
|||
border-radius: 0em; |
|||
box-shadow: none; |
|||
border: none; |
|||
} |
|||
|
|||
/* No padding on edge content */ |
|||
.ui.segment > :first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.segment > :last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Piled |
|||
--------------------*/ |
|||
|
|||
.ui.piled.segment { |
|||
margin: @piledMargin 0em; |
|||
box-shadow: @piledBoxShadow |
|||
} |
|||
.ui.piled.segment:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.piled.segment:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
.ui.piled.segment:after, |
|||
.ui.piled.segment:before { |
|||
background-color: @white; |
|||
visibility: visible; |
|||
content: ""; |
|||
display: block; |
|||
height: 100%; |
|||
left: -1px; |
|||
position: absolute; |
|||
width: 100%; |
|||
box-shadow: @piledBoxShadow |
|||
} |
|||
.ui.piled.segment:after { |
|||
transform: rotate(@piledDegrees); |
|||
top: 0; |
|||
z-index: -1; |
|||
} |
|||
.ui.piled.segment:before { |
|||
transform: rotate(-@piledDegrees); |
|||
top: 0; |
|||
z-index: -2; |
|||
} |
|||
|
|||
/*------------------- |
|||
Stacked |
|||
--------------------*/ |
|||
|
|||
.ui.stacked.segment { |
|||
padding-bottom: @stackedPadding; |
|||
} |
|||
.ui.stacked.segment:after, |
|||
.ui.stacked.segment:before { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: -3px; |
|||
left: 0%; |
|||
|
|||
border-top: 1px solid @borderColor; |
|||
background-color: @subtleTransparentBlack; |
|||
|
|||
width: 100%; |
|||
height: @stackedHeight; |
|||
visibility: visible; |
|||
} |
|||
.ui.stacked.segment:before { |
|||
bottom: 0px; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.stacked.inverted.segment:after, |
|||
.ui.stacked.inverted.segment:before { |
|||
background-color: @subtleTransparentBlack; |
|||
border-top: 1px solid @selectedBorderColor; |
|||
} |
|||
|
|||
/*------------------- |
|||
Circular |
|||
--------------------*/ |
|||
|
|||
.ui.circular.segment { |
|||
display: table-cell; |
|||
padding: @circularPadding; |
|||
text-align: center; |
|||
vertical-align: middle; |
|||
border-radius: 500em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Raised |
|||
--------------------*/ |
|||
|
|||
.ui.raised.segment { |
|||
box-shadow: @raisedBoxShadow; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.disabled.segment { |
|||
opacity: @disabledOpacity; |
|||
color: @disabledTextColor; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Basic |
|||
--------------------*/ |
|||
|
|||
.ui.basic.segment { |
|||
position: relative; |
|||
background-color: transparent; |
|||
box-shadow: none; |
|||
|
|||
border-radius: 0px; |
|||
} |
|||
.ui.basic.segment:first-child { |
|||
padding-top: 0em; |
|||
} |
|||
.ui.basic.segment:last-child { |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Fittted |
|||
--------------------*/ |
|||
|
|||
.ui.fitted.segment { |
|||
padding: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Colors |
|||
--------------------*/ |
|||
|
|||
.ui.black.segment { |
|||
border-top: @coloredBorderSize solid @black; |
|||
} |
|||
.ui.blue.segment { |
|||
border-top: @coloredBorderSize solid @blue; |
|||
} |
|||
.ui.green.segment { |
|||
border-top: @coloredBorderSize solid @green; |
|||
} |
|||
.ui.orange.segment { |
|||
border-top: @coloredBorderSize solid @orange; |
|||
} |
|||
.ui.pink.segment { |
|||
border-top: @coloredBorderSize solid @pink; |
|||
} |
|||
.ui.purple.segment { |
|||
border-top: @coloredBorderSize solid @purple; |
|||
} |
|||
.ui.red.segment { |
|||
border-top: @coloredBorderSize solid @red; |
|||
} |
|||
.ui.teal.segment { |
|||
border-top: @coloredBorderSize solid @teal; |
|||
} |
|||
.ui.yellow.segment { |
|||
border-top: @coloredBorderSize solid @yellow; |
|||
} |
|||
|
|||
/*------------------- |
|||
Inverted Colors |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.segment, |
|||
.ui.inverted.black.segment { |
|||
background-color: @black !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.blue.segment { |
|||
background-color: @blue !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.green.segment { |
|||
background-color: @green !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.orange.segment { |
|||
background-color: @orange !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.pink.segment { |
|||
background-color: @pink !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.purple.segment { |
|||
background-color: @purple !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.red.segment { |
|||
background-color: @red !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.teal.segment { |
|||
background-color: @teal !important; |
|||
color: @white !important; |
|||
} |
|||
.ui.inverted.yellow.segment { |
|||
background-color: @yellow !important; |
|||
color: @white !important; |
|||
} |
|||
|
|||
/*------------------- |
|||
Aligned |
|||
--------------------*/ |
|||
|
|||
.ui.left.aligned.segment { |
|||
text-align: left; |
|||
} |
|||
.ui.right.aligned.segment { |
|||
text-align: right; |
|||
} |
|||
.ui.center.aligned.segment { |
|||
text-align: center; |
|||
} |
|||
.ui.justified.segment { |
|||
text-align: justify; |
|||
hyphens: auto; |
|||
} |
|||
|
|||
/*------------------- |
|||
Floated |
|||
--------------------*/ |
|||
|
|||
.ui.floated.segment, |
|||
.ui.left.floated.segment { |
|||
float: left; |
|||
} |
|||
.ui.right.floated.segment { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.segment { |
|||
border: none; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.segment .segment { |
|||
color: @textColor; |
|||
} |
|||
.ui.inverted.segment .inverted.segment { |
|||
color: @white; |
|||
} |
|||
.ui.inverted.segment, |
|||
.ui.primary.inverted.segment { |
|||
background-color: @black; |
|||
color: @white; |
|||
} |
|||
|
|||
/*------------------- |
|||
Ordinality |
|||
--------------------*/ |
|||
|
|||
.ui.secondary.segment { |
|||
background-color: @secondaryBackground; |
|||
color: @textColor; |
|||
} |
|||
|
|||
.ui.tertiary.segment { |
|||
background-color: @tertiaryBackground; |
|||
color: @lightTextColor; |
|||
} |
|||
|
|||
.ui.secondary.inverted.segment { |
|||
background-color: @black; |
|||
background-image: @secondaryInvertedBackground; |
|||
color: @secondaryInvertedColor; |
|||
} |
|||
.ui.tertiary.inverted.segment { |
|||
background-color: @black; |
|||
background-image: @tertiaryInvertedColor; |
|||
color: @tertiaryInvertedColor; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Attached |
|||
--------------------*/ |
|||
|
|||
.ui.segment.attached { |
|||
top: -1px; |
|||
bottom: -1px; |
|||
margin: 0em; |
|||
border-radius: 0px; |
|||
box-shadow: 0px 0px 0px 1px @solidBorderColor; |
|||
} |
|||
|
|||
.ui.top.attached.segment { |
|||
top: 0px; |
|||
bottom: -1px; |
|||
|
|||
margin-top: @margin; |
|||
margin-bottom: 0em; |
|||
border-radius: @borderRadius @borderRadius 0em 0em; |
|||
} |
|||
.ui.segment.top.attached:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
.ui.segment.bottom.attached { |
|||
top: -1px; |
|||
bottom: 0px; |
|||
|
|||
margin-top: 0em; |
|||
margin-bottom: @margin; |
|||
|
|||
border-radius: 0px 0px @borderRadius @borderRadius; |
|||
} |
|||
.ui.segment.bottom.attached:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,334 +0,0 @@ |
|||
/* |
|||
* # Semantic - Steps |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Step |
|||
*******************************/ |
|||
|
|||
.ui.step, |
|||
.ui.steps .step { |
|||
display: inline-block; |
|||
position: relative; |
|||
padding: 1em 2em 1em 3em; |
|||
|
|||
vertical-align: top; |
|||
background-color: #FFFFFF; |
|||
color: #888888; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.step:after, |
|||
.ui.steps .step:after { |
|||
position: absolute; |
|||
z-index: 2; |
|||
content: ''; |
|||
top: 0em; |
|||
right: -1.45em; |
|||
|
|||
border-bottom: 1.5em solid transparent; |
|||
border-left: 1.5em solid #FFFFFF; |
|||
border-top: 1.5em solid transparent; |
|||
|
|||
width: 0em; |
|||
height: 0em; |
|||
} |
|||
|
|||
.ui.step, |
|||
.ui.steps .step, |
|||
.ui.steps .step:after { |
|||
-webkit-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-moz-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-o-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
-ms-transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
transition: |
|||
opacity 0.1s ease, |
|||
color 0.1s ease, |
|||
box-shadow 0.1s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.vertical.steps { |
|||
overflow: visible; |
|||
} |
|||
|
|||
.ui.vertical.steps .step { |
|||
display: block; |
|||
border-radius: 0em; |
|||
padding: 1em 2em; |
|||
} |
|||
|
|||
.ui.vertical.steps .step:first-child { |
|||
padding: 1em 2em; |
|||
border-top-left-radius: 0.3125rem; |
|||
border-top-right-radius: 0.3125rem; |
|||
} |
|||
|
|||
.ui.vertical.steps .step:last-child { |
|||
border-bottom-left-radius: 0.3125rem; |
|||
border-bottom-right-radius: 0.3125rem; |
|||
} |
|||
|
|||
/* Arrow */ |
|||
|
|||
.ui.vertical.steps .step:after { |
|||
display: none; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
|
|||
.ui.vertical.steps .disabled.step:after { |
|||
padding: 1em 2em; |
|||
} |
|||
|
|||
/* Active Arrow */ |
|||
|
|||
.ui.vertical.steps .active.step:after { |
|||
display: block; |
|||
} |
|||
|
|||
/******************************* |
|||
Group |
|||
*******************************/ |
|||
|
|||
.ui.steps { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
overflow: hidden; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-moz-border-radius: 0.3125rem; |
|||
-webkit-border-radius: 0.3125rem; |
|||
border-radius: 0.3125rem; |
|||
} |
|||
|
|||
.ui.steps .step:first-child { |
|||
padding-left: 1.35em; |
|||
-webkit-border-radius: 0.3125em 0em 0em 0.3125em; |
|||
-moz-border-radius: 0.3125em 0em 0em 0.3125em; |
|||
border-radius: 0.3125em 0em 0em 0.3125em; |
|||
} |
|||
.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0.3125em 0em; |
|||
border-radius: 0em 0.3125em 0.3125em 0em; |
|||
} |
|||
.ui.steps .step:only-child { |
|||
-webkit-border-radius: 0.3125em; |
|||
-moz-border-radius: 0.3125em; |
|||
border-radius: 0.3125em; |
|||
} |
|||
|
|||
.ui.steps .step:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
.ui.steps .step:last-child:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.step:hover, |
|||
.ui.step.hover { |
|||
background-color: #F7F7F7; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.steps .step.hover:after, |
|||
.ui.steps .step:hover:after, |
|||
.ui.step:hover, |
|||
.ui.step.hover::after { |
|||
border-left-color: #F7F7F7; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.steps .step.down, |
|||
.ui.steps .step:active, |
|||
.ui.step.down, |
|||
.ui.step:active { |
|||
background-color: #F0F0F0; |
|||
} |
|||
.ui.steps .step.down:after, |
|||
.ui.steps .step:active:after, |
|||
.ui.steps.down::after, |
|||
.ui.steps:active::after { |
|||
border-left-color: #F0F0F0; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.steps .step.active, |
|||
.ui.active.step { |
|||
cursor: auto; |
|||
background-color: #555555; |
|||
|
|||
color: #FFFFFF; |
|||
font-weight: bold; |
|||
} |
|||
.ui.steps .step.active:after, |
|||
.ui.active.steps:after { |
|||
border-left-color: #555555; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.steps .disabled.step, |
|||
.ui.disabled.step { |
|||
cursor: auto; |
|||
background-color: #FFFFFF; |
|||
color: #CBCBCB; |
|||
} |
|||
.ui.disabled.step:after { |
|||
border: none; |
|||
background-color: #FFFFFF; |
|||
top: 0.42em; |
|||
right: -1em; |
|||
|
|||
width: 2.15em; |
|||
height: 2.15em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
-o-transform: rotate(-45deg); |
|||
-ms-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
|
|||
-webkit-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: -1px -1px 0px 0px rgba(0, 0, 0, 0.1) inset; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* Attached */ |
|||
.attached.ui.steps { |
|||
margin: 0em; |
|||
-webkit-border-radius: 0.3125em 0.3125em 0em 0em; |
|||
-moz-border-radius: 0.3125em 0.3125em 0em 0em; |
|||
border-radius: 0.3125em 0.3125em 0em 0em; |
|||
} |
|||
.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0.3125em 0em 0em 0em; |
|||
-moz-border-radius: 0.3125em 0em 0em 0em; |
|||
border-radius: 0.3125em 0em 0em 0em; |
|||
} |
|||
.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0.3125em 0em 0em; |
|||
-moz-border-radius: 0em 0.3125em 0em 0em; |
|||
border-radius: 0em 0.3125em 0em 0em; |
|||
} |
|||
|
|||
/* Bottom Side */ |
|||
.bottom.attached.ui.steps { |
|||
margin-top: -1px; |
|||
-webkit-border-radius: 0em 0em 0.3125em 0.3125em; |
|||
-moz-border-radius: 0em 0em 0.3125em 0.3125em; |
|||
border-radius: 0em 0em 0.3125em 0.3125em; |
|||
} |
|||
.bottom.attached.ui.steps .step:first-child { |
|||
-webkit-border-radius: 0em 0em 0em 0.3125em; |
|||
-moz-border-radius: 0em 0em 0em 0.3125em; |
|||
border-radius: 0em 0em 0em 0.3125em; |
|||
} |
|||
.bottom.attached.ui.steps .step:last-child { |
|||
-webkit-border-radius: 0em 0em 0.3125em 0em; |
|||
-moz-border-radius: 0em 0em 0.3125em 0em; |
|||
border-radius: 0em 0em 0.3125em 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 { |
|||
display: block; |
|||
} |
|||
.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.small.step, |
|||
.ui.small.steps .step { |
|||
font-size: 0.8rem; |
|||
} |
|||
.ui.step, |
|||
.ui.steps .step { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.step, |
|||
.ui.large.steps .step { |
|||
font-size: 1.25rem; |
|||
} |
|||
@ -1,403 +0,0 @@ |
|||
/* |
|||
* # Semantic - Reset |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'global'; |
|||
@element : 'reset'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Reset |
|||
*******************************/ |
|||
|
|||
/** |
|||
* Correct `block` display not defined in IE 8/9. |
|||
*/ |
|||
|
|||
article, |
|||
aside, |
|||
details, |
|||
figcaption, |
|||
figure, |
|||
footer, |
|||
header, |
|||
hgroup, |
|||
main, |
|||
nav, |
|||
section, |
|||
summary { |
|||
display: block; |
|||
} |
|||
|
|||
/** |
|||
* Correct `inline-block` display not defined in IE 8/9. |
|||
*/ |
|||
|
|||
audio, |
|||
canvas, |
|||
video { |
|||
display: inline-block; |
|||
} |
|||
|
|||
/** |
|||
* Prevent modern browsers from displaying `audio` without controls. |
|||
* Remove excess height in iOS 5 devices. |
|||
*/ |
|||
|
|||
audio:not([controls]) { |
|||
display: none; |
|||
height: 0; |
|||
} |
|||
|
|||
/** |
|||
* Address `[hidden]` styling not present in IE 8/9. |
|||
* Hide the `template` element in IE, Safari, and Firefox < 22. |
|||
*/ |
|||
|
|||
[hidden], |
|||
template { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 1. Set default font family to sans-serif. |
|||
* 2. Prevent iOS text size adjust after orientation change, without disabling |
|||
* user zoom. |
|||
*/ |
|||
|
|||
html { |
|||
font-family: sans-serif; /* 1 */ |
|||
-ms-text-size-adjust: 100%; /* 2 */ |
|||
-webkit-text-size-adjust: 100%; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove default margin. |
|||
*/ |
|||
|
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* Remove the gray background color from active links in IE 10. |
|||
*/ |
|||
|
|||
a { |
|||
background: transparent; |
|||
} |
|||
|
|||
/** |
|||
* Address `outline` inconsistency between Chrome and other browsers. |
|||
*/ |
|||
|
|||
a:focus { |
|||
outline: thin dotted; |
|||
} |
|||
|
|||
/** |
|||
* Improve readability when focused and also mouse hovered in all browsers. |
|||
*/ |
|||
|
|||
a:active, |
|||
a:hover { |
|||
outline: 0; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* Address variable `h1` font-size and margin within `section` and `article` |
|||
* contexts in Firefox 4+, Safari 5, and Chrome. |
|||
*/ |
|||
|
|||
h1 { |
|||
font-size: 2em; |
|||
margin: 0.67em 0; |
|||
} |
|||
|
|||
/** |
|||
* Address styling not present in IE 8/9, Safari 5, and Chrome. |
|||
*/ |
|||
|
|||
abbr[title] { |
|||
border-bottom: 1px dotted; |
|||
} |
|||
|
|||
/** |
|||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. |
|||
*/ |
|||
|
|||
b, |
|||
strong { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/** |
|||
* Address styling not present in Safari 5 and Chrome. |
|||
*/ |
|||
|
|||
dfn { |
|||
font-style: italic; |
|||
} |
|||
|
|||
/** |
|||
* Address differences between Firefox and other browsers. |
|||
*/ |
|||
|
|||
hr { |
|||
-moz-box-sizing: content-box; |
|||
box-sizing: content-box; |
|||
height: 0; |
|||
} |
|||
|
|||
/** |
|||
* Address styling not present in IE 8/9. |
|||
*/ |
|||
|
|||
mark { |
|||
background: #ff0; |
|||
color: #000; |
|||
} |
|||
|
|||
/** |
|||
* Correct font family set oddly in Safari 5 and Chrome. |
|||
*/ |
|||
|
|||
code, |
|||
kbd, |
|||
pre, |
|||
samp { |
|||
font-family: monospace, serif; |
|||
font-size: 1em; |
|||
} |
|||
|
|||
/** |
|||
* Improve readability of pre-formatted text in all browsers. |
|||
*/ |
|||
|
|||
pre { |
|||
white-space: pre-wrap; |
|||
} |
|||
|
|||
/** |
|||
* Set consistent quote types. |
|||
*/ |
|||
|
|||
q { |
|||
quotes: "\201C" "\201D" "\2018" "\2019"; |
|||
} |
|||
|
|||
/** |
|||
* Address inconsistent and variable font size in all browsers. |
|||
*/ |
|||
|
|||
small { |
|||
font-size: 80%; |
|||
} |
|||
|
|||
/** |
|||
* Prevent `sub` and `sup` affecting `line-height` in all browsers. |
|||
*/ |
|||
|
|||
sub, |
|||
sup { |
|||
font-size: 75%; |
|||
line-height: 0; |
|||
position: relative; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
sup { |
|||
top: -0.5em; |
|||
} |
|||
|
|||
sub { |
|||
bottom: -0.25em; |
|||
} |
|||
|
|||
/** |
|||
* Remove border when inside `a` element in IE 8/9. |
|||
*/ |
|||
|
|||
img { |
|||
border: 0; |
|||
} |
|||
|
|||
/** |
|||
* Correct overflow displayed oddly in IE 9. |
|||
*/ |
|||
|
|||
svg:not(:root) { |
|||
overflow: hidden; |
|||
} |
|||
/** |
|||
* Address margin not present in IE 8/9 and Safari 5. |
|||
*/ |
|||
|
|||
figure { |
|||
margin: 0; |
|||
} |
|||
|
|||
/** |
|||
* Define consistent border, margin, and padding. |
|||
*/ |
|||
|
|||
fieldset { |
|||
border: 1px solid #c0c0c0; |
|||
margin: 0 2px; |
|||
padding: 0.35em 0.625em 0.75em; |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct `color` not being inherited in IE 8/9. |
|||
* 2. Remove padding so people aren't caught out if they zero out fieldsets. |
|||
*/ |
|||
|
|||
legend { |
|||
border: 0; /* 1 */ |
|||
padding: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Correct font family not being inherited in all browsers. |
|||
* 2. Correct font size not being inherited in all browsers. |
|||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. |
|||
*/ |
|||
|
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
font-family: inherit; /* 1 */ |
|||
font-size: 100%; /* 2 */ |
|||
margin: 0; /* 3 */ |
|||
} |
|||
|
|||
/** |
|||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in |
|||
* the UA stylesheet. |
|||
*/ |
|||
|
|||
button, |
|||
input { |
|||
line-height: normal; |
|||
} |
|||
|
|||
/** |
|||
* Address inconsistent `text-transform` inheritance for `button` and `select`. |
|||
* All other form control elements do not inherit `text-transform` values. |
|||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. |
|||
* Correct `select` style inheritance in Firefox 4+ and Opera. |
|||
*/ |
|||
|
|||
button, |
|||
select { |
|||
text-transform: none; |
|||
} |
|||
|
|||
/** |
|||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
|||
* and `video` controls. |
|||
* 2. Correct inability to style clickable `input` types in iOS. |
|||
* 3. Improve usability and consistency of cursor style between image-type |
|||
* `input` and others. |
|||
*/ |
|||
|
|||
button, |
|||
html input[type="button"], /* 1 */ |
|||
input[type="reset"], |
|||
input[type="submit"] { |
|||
-webkit-appearance: button; /* 2 */ |
|||
cursor: pointer; /* 3 */ |
|||
} |
|||
|
|||
/** |
|||
* Re-set default cursor for disabled elements. |
|||
*/ |
|||
|
|||
button[disabled], |
|||
html input[disabled] { |
|||
cursor: default; |
|||
} |
|||
|
|||
/** |
|||
* 1. Address box sizing set to `content-box` in IE 8/9/10. |
|||
* 2. Remove excess padding in IE 8/9/10. |
|||
*/ |
|||
|
|||
input[type="checkbox"], |
|||
input[type="radio"] { |
|||
box-sizing: border-box; /* 1 */ |
|||
padding: 0; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. |
|||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome |
|||
* (include `-moz` to future-proof). |
|||
*/ |
|||
|
|||
input[type="search"] { |
|||
-webkit-appearance: textfield; /* 1 */ |
|||
-moz-box-sizing: content-box; |
|||
-webkit-box-sizing: content-box; /* 2 */ |
|||
box-sizing: content-box; |
|||
} |
|||
|
|||
/** |
|||
* Remove inner padding and search cancel button in Safari 5 and Chrome |
|||
* on OS X. |
|||
*/ |
|||
|
|||
input[type="search"]::-webkit-search-cancel-button, |
|||
input[type="search"]::-webkit-search-decoration { |
|||
-webkit-appearance: none; |
|||
} |
|||
|
|||
/** |
|||
* Remove inner padding and border in Firefox 4+. |
|||
*/ |
|||
|
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
border: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
/** |
|||
* 1. Remove default vertical scrollbar in IE 8/9. |
|||
* 2. Improve readability and alignment in all browsers. |
|||
*/ |
|||
|
|||
textarea { |
|||
overflow: auto; /* 1 */ |
|||
vertical-align: top; /* 2 */ |
|||
} |
|||
|
|||
/** |
|||
* Remove most spacing between table cells. |
|||
*/ |
|||
|
|||
table { |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,102 +0,0 @@ |
|||
/* |
|||
* # Semantic - Site |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'global'; |
|||
@element : 'site'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
/******************************* |
|||
Page |
|||
*******************************/ |
|||
|
|||
/* UI requires Border-Box */ |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
html, |
|||
body { |
|||
font-size: @fontSize; |
|||
height: 100%; |
|||
} |
|||
|
|||
|
|||
body { |
|||
background: @bodyBackground; |
|||
font-family: @pageFont; |
|||
margin: 0px; |
|||
padding: 0px; |
|||
color: @textColor; |
|||
min-width: 320px; |
|||
} |
|||
|
|||
/******************************* |
|||
Text |
|||
*******************************/ |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5 { |
|||
margin: 1em 0em 1rem; |
|||
padding: 0em; |
|||
} |
|||
|
|||
p { |
|||
margin: @paragraphMargin; |
|||
} |
|||
p:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Links |
|||
--------------------*/ |
|||
|
|||
a { |
|||
color: @linkColor; |
|||
text-decoration: @linkUnderline; |
|||
} |
|||
a:hover { |
|||
color: @linkHoverColor; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Highlighting |
|||
*******************************/ |
|||
|
|||
::-webkit-selection { |
|||
background-color: @highlightBackground; |
|||
color: @highlightColor; |
|||
} |
|||
::-moz-selection { |
|||
background-color: @highlightBackground; |
|||
color: @highlightColor; |
|||
} |
|||
::selection { |
|||
background-color: @highlightBackground; |
|||
color: @highlightColor; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,428 +0,0 @@ |
|||
/* |
|||
* # Semantic - Accordion |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.accordion = 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.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), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing accordion with bound events', $module); |
|||
// initializing
|
|||
$title |
|||
.on('click' + eventNamespace, module.event.click) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.debug('Destroying previous accordion for', $module); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$title |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
click: function() { |
|||
module.verbose('Title clicked', this); |
|||
var |
|||
$activeTitle = $(this), |
|||
index = $title.index($activeTitle) |
|||
; |
|||
module.toggle(index); |
|||
}, |
|||
resetDisplay: function() { |
|||
$(this).css('display', ''); |
|||
if( $(this).attr('style') == '') { |
|||
$(this) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
} |
|||
}, |
|||
resetOpacity: function() { |
|||
$(this).css('opacity', ''); |
|||
if( $(this).attr('style') == '') { |
|||
$(this) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
toggle: function(index) { |
|||
module.debug('Toggling content content at index', index); |
|||
var |
|||
$activeTitle = $title.eq(index), |
|||
$activeContent = $activeTitle.next($content), |
|||
contentIsOpen = $activeContent.is(':visible') |
|||
; |
|||
if(contentIsOpen) { |
|||
if(settings.collapsible) { |
|||
module.close(index); |
|||
} |
|||
else { |
|||
module.debug('Cannot close accordion content collapsing is disabled'); |
|||
} |
|||
} |
|||
else { |
|||
module.open(index); |
|||
} |
|||
}, |
|||
|
|||
open: function(index) { |
|||
var |
|||
$activeTitle = $title.eq(index), |
|||
$activeContent = $activeTitle.next($content), |
|||
$previousTitle = $activeTitle.siblings(selector.title).filter('.' + className.active), |
|||
$previousContent = $previousTitle.next($title), |
|||
contentIsOpen = ($previousTitle.size() > 0) |
|||
; |
|||
if( !$activeContent.is(':animated') ) { |
|||
module.debug('Opening accordion content', $activeTitle); |
|||
if(settings.exclusive && contentIsOpen) { |
|||
$previousTitle |
|||
.removeClass(className.active) |
|||
; |
|||
$previousContent |
|||
.stop() |
|||
.children() |
|||
.stop() |
|||
.animate({ |
|||
opacity: 0 |
|||
}, settings.duration, module.event.resetOpacity) |
|||
.end() |
|||
.slideUp(settings.duration , settings.easing, function() { |
|||
$previousContent |
|||
.removeClass(className.active) |
|||
.children() |
|||
; |
|||
$.proxy(module.event.resetDisplay, this)(); |
|||
}) |
|||
; |
|||
} |
|||
$activeTitle |
|||
.addClass(className.active) |
|||
; |
|||
$activeContent |
|||
.stop() |
|||
.children() |
|||
.stop() |
|||
.animate({ |
|||
opacity: 1 |
|||
}, settings.duration) |
|||
.end() |
|||
.slideDown(settings.duration, settings.easing, function() { |
|||
$activeContent |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(module.event.resetDisplay, this)(); |
|||
$.proxy(settings.onOpen, $activeContent)(); |
|||
$.proxy(settings.onChange, $activeContent)(); |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
close: function(index) { |
|||
var |
|||
$activeTitle = $title.eq(index), |
|||
$activeContent = $activeTitle.next($content) |
|||
; |
|||
module.debug('Closing accordion content', $activeContent); |
|||
$activeTitle |
|||
.removeClass(className.active) |
|||
; |
|||
$activeContent |
|||
.removeClass(className.active) |
|||
.show() |
|||
.stop() |
|||
.children() |
|||
.stop() |
|||
.animate({ |
|||
opacity: 0 |
|||
}, settings.duration, module.event.resetOpacity) |
|||
.end() |
|||
.slideUp(settings.duration, settings.easing, function(){ |
|||
$.proxy(module.event.resetDisplay, this)(); |
|||
$.proxy(settings.onClose, $activeContent)(); |
|||
$.proxy(settings.onChange, $activeContent)(); |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
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) { |
|||
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.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.accordion.settings = { |
|||
name : 'Accordion', |
|||
namespace : 'accordion', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
exclusive : true, |
|||
collapsible : true, |
|||
|
|||
duration : 500, |
|||
easing : 'easeInOutQuint', |
|||
|
|||
onOpen : function(){}, |
|||
onClose : function(){}, |
|||
onChange : function(){}, |
|||
|
|||
error: { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active' |
|||
}, |
|||
|
|||
selector : { |
|||
title : '.title', |
|||
content : '.content' |
|||
} |
|||
|
|||
|
|||
}; |
|||
|
|||
// Adds easing
|
|||
$.extend( $.easing, { |
|||
easeInOutQuint: function (x, t, b, c, d) { |
|||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
|||
return c/2*((t-=2)*t*t*t*t + 2) + b; |
|||
} |
|||
}); |
|||
|
|||
})( jQuery, window , document ); |
|||
|
|||
@ -1,211 +0,0 @@ |
|||
/* |
|||
* # Semantic - Accordion |
|||
* http://github.com/jlukic/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Accordion |
|||
*******************************/ |
|||
|
|||
.ui.accordion, |
|||
.ui.accordion .accordion { |
|||
width: 600px; |
|||
max-width: 100%; |
|||
|
|||
font-size: 1rem; |
|||
border-radius: 0.3125em; |
|||
|
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.accordion .title, |
|||
.ui.accordion .accordion .title { |
|||
cursor: pointer; |
|||
|
|||
margin: 0em; |
|||
padding: 0.75em 1em; |
|||
|
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-moz-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-o-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
-ms-transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
transition: |
|||
background-color 0.2s ease-out |
|||
; |
|||
} |
|||
.ui.accordion .title:first-child, |
|||
.ui.accordion .accordion .title:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/* Content */ |
|||
.ui.accordion .content, |
|||
.ui.accordion .accordion .content { |
|||
display: none; |
|||
margin: 0em; |
|||
padding: 1.3em 1em; |
|||
} |
|||
|
|||
/* Arrow */ |
|||
.ui.accordion .title .dropdown.icon, |
|||
.ui.accordion .accordion .title .dropdown.icon { |
|||
display: inline-block; |
|||
float: none; |
|||
margin: 0em 0.5em 0em 0em; |
|||
|
|||
-webkit-transition: |
|||
-webkit-transform 0.2s ease, |
|||
opacity 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
-moz-transform 0.2s ease, |
|||
opacity 0.2s ease |
|||
; |
|||
-o-transition: |
|||
-o-transform 0.2s ease, |
|||
opacity 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
-ms-transform 0.2s ease, |
|||
opacity 0.2s ease |
|||
; |
|||
transition: |
|||
transform 0.2s ease, |
|||
opacity 0.2s ease |
|||
; |
|||
-webkit-transform: rotate(0deg); |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-ms-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
.ui.accordion .title .dropdown.icon:before, |
|||
.ui.accordion .accordion .title .dropdown.icon:before { |
|||
content: '\f0da'/*rtl:'\f0d9'*/; |
|||
} |
|||
|
|||
/*-------------- |
|||
Loose Coupling |
|||
---------------*/ |
|||
|
|||
.ui.basic.accordion.menu { |
|||
background-color: #FFFFFF; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.basic.accordion.menu .title, |
|||
.ui.basic.accordion.menu .content { |
|||
padding: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Basic |
|||
---------------*/ |
|||
|
|||
.ui.basic.accordion { |
|||
background-color: transparent; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.ui.basic.accordion .title, |
|||
.ui.basic.accordion .accordion .title { |
|||
background-color: transparent; |
|||
border-top: none; |
|||
padding-left: 0em; |
|||
padding-right: 0em; |
|||
} |
|||
|
|||
.ui.basic.accordion .content, |
|||
.ui.basic.accordion .accordion .content { |
|||
padding: 0.5em 0em; |
|||
} |
|||
|
|||
.ui.basic.accordion .active.title, |
|||
.ui.basic.accordion .accordion .active.title { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.accordion .title:hover, |
|||
.ui.accordion .active.title, |
|||
.ui.accordion .accordion .title:hover, |
|||
.ui.accordion .accordion .active.title { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.accordion .active.title, |
|||
.ui.accordion .accordion .active.title { |
|||
background-color: rgba(0, 0, 0, 0.1); |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.accordion .active.title .dropdown.icon, |
|||
.ui.accordion .accordion .active.title .dropdown.icon { |
|||
-webkit-transform: rotate(90deg); |
|||
-moz-transform: rotate(90deg); |
|||
-o-transform: rotate(90deg); |
|||
-ms-transform: rotate(90deg); |
|||
transform: rotate(90deg); |
|||
} |
|||
.ui.accordion .active.content, |
|||
.ui.accordion .accordion .active.content { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Fluid |
|||
---------------*/ |
|||
|
|||
.ui.fluid.accordion, |
|||
.ui.fluid.accordion .accordion { |
|||
width: 100%; |
|||
} |
|||
@ -1,773 +0,0 @@ |
|||
/* |
|||
* # Semantic - Chatroom |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.chatroom = 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 |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.chatroom.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
$module = $(this), |
|||
|
|||
$expandButton = $module.find(selector.expandButton), |
|||
$userListButton = $module.find(selector.userListButton), |
|||
|
|||
$userList = $module.find(selector.userList), |
|||
$room = $module.find(selector.room), |
|||
$userCount = $module.find(selector.userCount), |
|||
|
|||
$log = $module.find(selector.log), |
|||
$message = $module.find(selector.message), |
|||
|
|||
$messageInput = $module.find(selector.messageInput), |
|||
$messageButton = $module.find(selector.messageButton), |
|||
|
|||
instance = $module.data('module'), |
|||
element = this, |
|||
|
|||
html = '', |
|||
users = {}, |
|||
|
|||
channel, |
|||
loggedInUser, |
|||
|
|||
message, |
|||
count, |
|||
|
|||
height, |
|||
|
|||
pusher, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
width: { |
|||
log : $log.width(), |
|||
userList : $userList.outerWidth() |
|||
}, |
|||
|
|||
initialize: function() { |
|||
|
|||
// check error conditions
|
|||
if(Pusher === undefined) { |
|||
module.error(error.pusher); |
|||
} |
|||
if(settings.key === undefined || settings.channelName === undefined) { |
|||
module.error(error.key); |
|||
return false; |
|||
} |
|||
else if( !(settings.endpoint.message || settings.endpoint.authentication) ) { |
|||
module.error(error.endpoint); |
|||
return false; |
|||
} |
|||
|
|||
// define pusher
|
|||
pusher = new Pusher(settings.key); |
|||
Pusher.channel_auth_endpoint = settings.endpoint.authentication; |
|||
|
|||
channel = pusher.subscribe(settings.channelName); |
|||
|
|||
channel.bind('pusher:subscription_succeeded', module.user.list.create); |
|||
channel.bind('pusher:subscription_error', module.error); |
|||
channel.bind('pusher:member_added', module.user.joined); |
|||
channel.bind('pusher:member_removed', module.user.left); |
|||
channel.bind('update_messages', module.message.receive); |
|||
|
|||
$.each(settings.customEvents, function(label, value) { |
|||
channel.bind(label, value); |
|||
}); |
|||
|
|||
// bind module events
|
|||
$userListButton |
|||
.on('click.' + namespace, module.event.toggleUserList) |
|||
; |
|||
$expandButton |
|||
.on('click.' + namespace, module.event.toggleExpand) |
|||
; |
|||
$messageInput |
|||
.on('keydown.' + namespace, module.event.input.keydown) |
|||
.on('keyup.' + namespace, module.event.input.keyup) |
|||
; |
|||
$messageButton |
|||
.on('mouseenter.' + namespace, module.event.hover) |
|||
.on('mouseleave.' + namespace, module.event.hover) |
|||
.on('click.' + namespace, module.event.submit) |
|||
; |
|||
// scroll to bottom of chat log
|
|||
$log |
|||
.animate({ |
|||
scrollTop: $log.prop('scrollHeight') |
|||
}, 400) |
|||
; |
|||
$module |
|||
.data('module', module) |
|||
.addClass(className.loading) |
|||
; |
|||
|
|||
}, |
|||
|
|||
// refresh module
|
|||
refresh: function() { |
|||
// reset width calculations
|
|||
$userListButton |
|||
.removeClass(className.active) |
|||
; |
|||
module.width = { |
|||
log : $log.width(), |
|||
userList : $userList.outerWidth() |
|||
}; |
|||
if( $userListButton.hasClass(className.active) ) { |
|||
module.user.list.hide(); |
|||
} |
|||
$module.data('module', module); |
|||
}, |
|||
|
|||
user: { |
|||
|
|||
updateCount: function() { |
|||
if(settings.userCount) { |
|||
users = $module.data('users'); |
|||
count = 0; |
|||
$.each(users, function() { |
|||
count++; |
|||
}); |
|||
$userCount |
|||
.html( settings.templates.userCount(count) ) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
// add user to user list
|
|||
joined: function(member) { |
|||
users = $module.data('users'); |
|||
if(member.id != 'anonymous' && users[ member.id ] === undefined ) { |
|||
users[ member.id ] = member.info; |
|||
if(settings.randomColor && member.info.color === undefined) { |
|||
member.info.color = settings.templates.color(member.id); |
|||
} |
|||
html = settings.templates.userList(member.info); |
|||
if(member.info.isAdmin) { |
|||
$(html) |
|||
.prependTo($userList) |
|||
; |
|||
} |
|||
else { |
|||
$(html) |
|||
.appendTo($userList) |
|||
; |
|||
} |
|||
if(settings.partingMessages) { |
|||
$log |
|||
.append( settings.templates.joined(member.info) ) |
|||
; |
|||
module.message.scroll.test(); |
|||
} |
|||
module.user.updateCount(); |
|||
} |
|||
}, |
|||
|
|||
// remove user from user list
|
|||
left: function(member) { |
|||
users = $module.data('users'); |
|||
if(member !== undefined && member.id !== 'anonymous') { |
|||
delete users[ member.id ]; |
|||
$module |
|||
.data('users', users) |
|||
; |
|||
$userList |
|||
.find('[data-id='+ member.id + ']') |
|||
.remove() |
|||
; |
|||
if(settings.partingMessages) { |
|||
$log |
|||
.append( settings.templates.left(member.info) ) |
|||
; |
|||
module.message.scroll.test(); |
|||
} |
|||
module.user.updateCount(); |
|||
} |
|||
}, |
|||
|
|||
list: { |
|||
|
|||
// receives list of members and generates user list
|
|||
create: function(members) { |
|||
users = {}; |
|||
members.each(function(member) { |
|||
if(member.id !== 'anonymous' && member.id !== 'undefined') { |
|||
if(settings.randomColor && member.info.color === undefined) { |
|||
member.info.color = settings.templates.color(member.id); |
|||
} |
|||
// sort list with admin first
|
|||
html = (member.info.isAdmin) |
|||
? settings.templates.userList(member.info) + html |
|||
: html + settings.templates.userList(member.info) |
|||
; |
|||
users[ member.id ] = member.info; |
|||
} |
|||
}); |
|||
$module |
|||
.data('users', users) |
|||
.data('user', users[members.me.id] ) |
|||
.removeClass(className.loading) |
|||
; |
|||
$userList |
|||
.html(html) |
|||
; |
|||
module.user.updateCount(); |
|||
$.proxy(settings.onJoin, $userList.children())(); |
|||
}, |
|||
|
|||
// shows user list
|
|||
show: function() { |
|||
$log |
|||
.animate({ |
|||
width: (module.width.log - module.width.userList) |
|||
}, { |
|||
duration : settings.speed, |
|||
easing : settings.easing, |
|||
complete : module.message.scroll.move |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
// hides user list
|
|||
hide: function() { |
|||
$log |
|||
.stop() |
|||
.animate({ |
|||
width: (module.width.log) |
|||
}, { |
|||
duration : settings.speed, |
|||
easing : settings.easing, |
|||
complete : module.message.scroll.move |
|||
}) |
|||
; |
|||
} |
|||
|
|||
} |
|||
|
|||
}, |
|||
|
|||
message: { |
|||
|
|||
// handles scrolling of chat log
|
|||
scroll: { |
|||
test: function() { |
|||
height = $log.prop('scrollHeight') - $log.height(); |
|||
if( Math.abs($log.scrollTop() - height) < settings.scrollArea) { |
|||
module.message.scroll.move(); |
|||
} |
|||
}, |
|||
|
|||
move: function() { |
|||
height = $log.prop('scrollHeight') - $log.height(); |
|||
$log |
|||
.scrollTop(height) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
// sends chat message
|
|||
send: function(message) { |
|||
if( !module.utils.emptyString(message) ) { |
|||
$.api({ |
|||
url : settings.endpoint.message, |
|||
method : 'POST', |
|||
data : { |
|||
'message': { |
|||
content : message, |
|||
timestamp : new Date().getTime() |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
// receives chat response and processes
|
|||
receive: function(response) { |
|||
message = response.data; |
|||
users = $module.data('users'); |
|||
loggedInUser = $module.data('user'); |
|||
if(users[ message.userID] !== undefined) { |
|||
// logged in user's messages already pushed instantly
|
|||
if(loggedInUser === undefined || loggedInUser.id != message.userID) { |
|||
message.user = users[ message.userID ]; |
|||
module.message.display(message); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// displays message in chat log
|
|||
display: function(message) { |
|||
$log |
|||
.append( settings.templates.message(message) ) |
|||
; |
|||
module.message.scroll.test(); |
|||
$.proxy(settings.onMessage, $log.children().last() )(); |
|||
} |
|||
|
|||
}, |
|||
|
|||
expand: function() { |
|||
$module |
|||
.addClass(className.expand) |
|||
; |
|||
$.proxy(settings.onExpand, $module )(); |
|||
module.refresh(); |
|||
}, |
|||
|
|||
contract: function() { |
|||
$module |
|||
.removeClass(className.expand) |
|||
; |
|||
$.proxy(settings.onContract, $module )(); |
|||
module.refresh(); |
|||
}, |
|||
|
|||
event: { |
|||
|
|||
input: { |
|||
|
|||
keydown: function(event) { |
|||
if(event.which == 13) { |
|||
$messageButton |
|||
.addClass(className.down) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
keyup: function(event) { |
|||
if(event.which == 13) { |
|||
$messageButton |
|||
.removeClass(className.down) |
|||
; |
|||
module.event.submit(); |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
// handles message form submit
|
|||
submit: function() { |
|||
var |
|||
message = $messageInput.val(), |
|||
loggedInUser = $module.data('user') |
|||
; |
|||
if(loggedInUser !== undefined && !module.utils.emptyString(message)) { |
|||
module.message.send(message); |
|||
// display immediately
|
|||
module.message.display({ |
|||
user: loggedInUser, |
|||
text: message |
|||
}); |
|||
module.message.scroll.move(); |
|||
$messageInput |
|||
.val('') |
|||
; |
|||
|
|||
} |
|||
}, |
|||
|
|||
// handles button click on expand button
|
|||
toggleExpand: function() { |
|||
if( !$module.hasClass(className.expand) ) { |
|||
$expandButton |
|||
.addClass(className.active) |
|||
; |
|||
module.expand(); |
|||
} |
|||
else { |
|||
$expandButton |
|||
.removeClass(className.active) |
|||
; |
|||
module.contract(); |
|||
} |
|||
}, |
|||
|
|||
// handles button click on user list button
|
|||
toggleUserList: function() { |
|||
if( !$log.is(':animated') ) { |
|||
if( !$userListButton.hasClass(className.active) ) { |
|||
$userListButton |
|||
.addClass(className.active) |
|||
; |
|||
module.user.list.show(); |
|||
} |
|||
else { |
|||
$userListButton |
|||
.removeClass('active') |
|||
; |
|||
module.user.list.hide(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
|
|||
utils: { |
|||
|
|||
emptyString: function(string) { |
|||
if(typeof string == 'string') { |
|||
return (string.search(/\S/) == -1); |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if(value !== undefined) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
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.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
maxDepth, |
|||
found |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && instance !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
if( $.isPlainObject( instance[value] ) && (depth != maxDepth) ) { |
|||
instance = instance[value]; |
|||
} |
|||
else if( instance[value] !== undefined ) { |
|||
found = instance[value]; |
|||
} |
|||
else { |
|||
module.error(error.method, query); |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
return found.apply(context, passedArguments); |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.chatroom.settings = { |
|||
|
|||
name : 'Chat', |
|||
debug : false, |
|||
namespace : 'chat', |
|||
|
|||
channel : 'present-chat', |
|||
|
|||
onJoin : function(){}, |
|||
onMessage : function(){}, |
|||
onExpand : function(){}, |
|||
onContract : function(){}, |
|||
|
|||
customEvents : {}, |
|||
|
|||
partingMessages : false, |
|||
userCount : true, |
|||
randomColor : true, |
|||
|
|||
speed : 300, |
|||
easing : 'easeOutQuint', |
|||
|
|||
// pixels from bottom of chat log that should trigger auto scroll to bottom
|
|||
scrollArea : 9999, |
|||
|
|||
endpoint : { |
|||
message : false, |
|||
authentication : false |
|||
}, |
|||
|
|||
error: { |
|||
method : 'The method you called is not defined', |
|||
endpoint : 'Please define a message and authentication endpoint.', |
|||
key : 'You must specify a pusher key and channel.', |
|||
pusher : 'You must include the Pusher library.' |
|||
}, |
|||
|
|||
className : { |
|||
expand : 'expand', |
|||
active : 'active', |
|||
hover : 'hover', |
|||
down : 'down', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
userCount : '.actions .message', |
|||
userListButton : '.actions .list.button', |
|||
expandButton : '.actions .expand.button', |
|||
room : '.room', |
|||
userList : '.room .list', |
|||
log : '.room .log', |
|||
message : '.room .log .message', |
|||
author : '.room log .message .author', |
|||
messageInput : '.talk input', |
|||
messageButton : '.talk .send.button' |
|||
}, |
|||
|
|||
templates: { |
|||
|
|||
userCount: function(number) { |
|||
return number + ' users in chat'; |
|||
}, |
|||
|
|||
color: function(userID) { |
|||
var |
|||
colors = [ |
|||
'#000000', |
|||
'#333333', |
|||
'#666666', |
|||
'#999999', |
|||
'#CC9999', |
|||
'#CC6666', |
|||
'#CC3333', |
|||
'#993333', |
|||
'#663333', |
|||
'#CC6633', |
|||
'#CC9966', |
|||
'#CC9933', |
|||
'#999966', |
|||
'#CCCC66', |
|||
'#99CC66', |
|||
'#669933', |
|||
'#669966', |
|||
'#33A3CC', |
|||
'#336633', |
|||
'#33CCCC', |
|||
'#339999', |
|||
'#336666', |
|||
'#336699', |
|||
'#6666CC', |
|||
'#9966CC', |
|||
'#333399', |
|||
'#663366', |
|||
'#996699', |
|||
'#993366', |
|||
'#CC6699' |
|||
] |
|||
; |
|||
return colors[ Math.floor( Math.random() * colors.length) ]; |
|||
}, |
|||
|
|||
message: function(message) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(message.user.isAdmin) { |
|||
message.user.color = '#55356A'; |
|||
html += '<div class="admin message">'; |
|||
html += '<span class="quirky ui flag team"></span>'; |
|||
} |
|||
/* |
|||
else if(message.user.isPro) { |
|||
html += '<div class="indent message">'; |
|||
html += '<span class="quirky ui flag pro"></span>'; |
|||
} |
|||
*/ |
|||
else { |
|||
html += '<div class="message">'; |
|||
} |
|||
html += '<p>'; |
|||
if(message.user.color !== undefined) { |
|||
html += '<span class="author" style="color: ' + message.user.color + ';">' + message.user.name + '</span>: '; |
|||
} |
|||
else { |
|||
html += '<span class="author">' + message.user.name + '</span>: '; |
|||
} |
|||
html += '' |
|||
+ message.text |
|||
+ ' </p>' |
|||
+ '</div>' |
|||
; |
|||
return html; |
|||
}, |
|||
|
|||
joined: function(member) { |
|||
return (typeof member.name !== undefined) |
|||
? '<div class="status">' + member.name + ' has joined the chat.</div>' |
|||
: false |
|||
; |
|||
}, |
|||
left: function(member) { |
|||
return (typeof member.name !== undefined) |
|||
? '<div class="status">' + member.name + ' has left the chat.</div>' |
|||
: false |
|||
; |
|||
}, |
|||
|
|||
userList: function(member) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(member.isAdmin) { |
|||
member.color = '#55356A'; |
|||
} |
|||
html += '' |
|||
+ '<div class="user" data-id="' + member.id + '">' |
|||
+ ' <div class="image">' |
|||
+ ' <img src="' + member.avatarURL + '">' |
|||
+ ' </div>' |
|||
; |
|||
if(member.color !== undefined) { |
|||
html += ' <p><a href="/users/' + member.id + '" target="_blank" style="color: ' + member.color + ';">' + member.name + '</a></p>'; |
|||
} |
|||
else { |
|||
html += ' <p><a href="/users/' + member.id + '" target="_blank">' + member.name + '</a></p>'; |
|||
} |
|||
html += '</div>'; |
|||
return html; |
|||
} |
|||
|
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,281 +0,0 @@ |
|||
/* |
|||
* # Semantic - Chat Room |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Chat Room |
|||
*******************************/ |
|||
|
|||
.ui.chatroom { |
|||
background-color: #F8F8F8; |
|||
width: 330px; |
|||
height: 370px; |
|||
padding: 0px; |
|||
} |
|||
.ui.chatroom .room { |
|||
position: relative; |
|||
background-color: #FFFFFF; |
|||
overflow: hidden; |
|||
height: 286px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-top: none; |
|||
border-bottom: none; |
|||
} |
|||
.ui.chatroom .room .loader { |
|||
display: none; |
|||
margin: -25px 0px 0px -25px; |
|||
} |
|||
/* Chat Room Actions */ |
|||
.ui.chatroom .actions { |
|||
overflow: hidden; |
|||
background-color: #EEEEEE; |
|||
padding: 4px; |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.chatroom .actions .button { |
|||
float: right; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
/* Online User Count */ |
|||
.ui.chatroom .actions .message { |
|||
float: left; |
|||
margin-left: 6px; |
|||
font-size: 11px; |
|||
color: #AAAAAA; |
|||
text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8); |
|||
line-height: 28px; |
|||
} |
|||
.ui.chatroom .actions .message .loader { |
|||
display: inline-block; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
|
|||
/* Chat Room Text Log */ |
|||
.ui.chatroom .log { |
|||
float: left; |
|||
|
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
.ui.chatroom .log .message { |
|||
padding: 3px 0px; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .message:first-child { |
|||
border-top: none; |
|||
} |
|||
/* status event */ |
|||
.ui.chatroom .status { |
|||
padding: 5px 0px; |
|||
color: #AAAAAA; |
|||
|
|||
font-size: 12px; |
|||
font-style: italic; |
|||
line-height: 1.33; |
|||
border-top: 1px dotted #DADADA; |
|||
} |
|||
.ui.chatroom .log .status:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
|
|||
.ui.chatroom .log .flag { |
|||
float: left; |
|||
} |
|||
.ui.chatroom .log p { |
|||
margin-left: 0px; |
|||
} |
|||
.ui.chatroom .log .author { |
|||
font-weight: bold; |
|||
-webkit-transition: color 0.3s ease-out; |
|||
-moz-transition: color 0.3s ease-out; |
|||
-o-transition: color 0.3s ease-out; |
|||
-ms-transition: color 0.3s ease-out; |
|||
transition: color 0.3s ease-out; |
|||
} |
|||
.ui.chatroom .log a.author:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.ui.chatroom .log .message.admin p { |
|||
font-weight: bold; |
|||
margin: 1px 0px 0px 23px; |
|||
} |
|||
.ui.chatroom .log .divider { |
|||
margin: -1px 0px; |
|||
font-size: 11px; |
|||
padding: 10px 0px; |
|||
border-top: 1px solid #F8F8F8; |
|||
border-bottom: 1px solid #F8F8F8; |
|||
} |
|||
.ui.chatroom .log .divider .rule { |
|||
top: 50%; |
|||
width: 15%; |
|||
} |
|||
|
|||
.ui.chatroom .log .divider .label { |
|||
color: #777777; |
|||
margin: 0px; |
|||
} |
|||
|
|||
/* Chat Room User List */ |
|||
.ui.chatroom .room .list { |
|||
position: relative; |
|||
overflow: auto; |
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
float: left; |
|||
background-color: #EEEEEE; |
|||
border-left: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
display: table; |
|||
padding: 3px 7px; |
|||
border-bottom: 1px solid #DDDDDD; |
|||
} |
|||
.ui.chatroom .room .list .user:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.chatroom .room .list .image { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
width: 20px; |
|||
} |
|||
.ui.chatroom .room .list .image img { |
|||
width: 20px; |
|||
height: 20px; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.chatroom .room .list p { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
padding-left: 7px; |
|||
padding-right: 14px; |
|||
font-size: 11px; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
.ui.chatroom .room .list a:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
/* User List Loading */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
|
|||
/* Chat Room Talk Input */ |
|||
.ui.chatroom .talk { |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding: 5px 0px 0px; |
|||
|
|||
background-color: #EEEEEE; |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
} |
|||
.ui.chatroom .talk .avatar, |
|||
.ui.chatroom .talk input, |
|||
.ui.chatroom .talk .button { |
|||
float: left; |
|||
} |
|||
|
|||
.ui.chatroom .talk .avatar img { |
|||
display: block; |
|||
width: 30px; |
|||
height: 30px; |
|||
margin-right: 4px; |
|||
border-radius: 500rem; |
|||
} |
|||
.ui.chatroom .talk input { |
|||
border: 1px solid #CCCCCC; |
|||
margin: 0px; |
|||
width: 196px; |
|||
height: 14px; |
|||
padding: 8px 5px; |
|||
font-size: 12px; |
|||
color: #555555; |
|||
} |
|||
.ui.chatroom .talk input.focus { |
|||
border: 1px solid #AAAAAA; |
|||
} |
|||
.ui.chatroom .send { |
|||
width: 80px; |
|||
height: 32px; |
|||
|
|||
margin-left: -1px; |
|||
padding: 4px 12px; |
|||
font-size: 12px; |
|||
line-height: 23px; |
|||
|
|||
-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
-moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset; |
|||
|
|||
border-radius: 0 5px 5px 0; |
|||
} |
|||
.ui.chatroom .talk .log-in.button { |
|||
display: block; |
|||
float: none; |
|||
margin-top: -6px; |
|||
height: 22px; |
|||
border-radius: 0px 0px 4px 4px; |
|||
} |
|||
.ui.chatroom .talk .log-in.button i { |
|||
vertical-align: text-top; |
|||
} |
|||
|
|||
/* Quirky Flags */ |
|||
.ui.chatroom .log .team.flag { |
|||
width: 18px; |
|||
} |
|||
|
|||
/* Chat room Loaded */ |
|||
.ui.chatroom.loading .loader { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/* Standard Size */ |
|||
.ui.chatroom { |
|||
width: 330px; |
|||
height: 370px; |
|||
} |
|||
.ui.chatroom .room .container { |
|||
width: 3000px; |
|||
} |
|||
.ui.chatroom .log { |
|||
width: 314px; |
|||
height: 278px; |
|||
padding: 4px 7px; |
|||
} |
|||
.ui.chatroom .room .list { |
|||
width: 124px; |
|||
height: 278px; |
|||
padding: 4px 0px; |
|||
} |
|||
.ui.chatroom .room .list .user { |
|||
width: 110px; |
|||
} |
|||
.ui.chatroom .talk { |
|||
height: 40px; |
|||
} |
|||
@ -1,377 +0,0 @@ |
|||
/* |
|||
* # Semantic - Checkbox |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.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, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$label = $(this).next(settings.selector.label).first(), |
|||
$input = $(this).find(settings.selector.input), |
|||
|
|||
selector = $module.selector || '', |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
element = this, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing checkbox', settings); |
|||
if(settings.context && selector !== '') { |
|||
module.verbose('Adding delegated events'); |
|||
$(element, settings.context) |
|||
.on(selector, 'click' + eventNamespace, module.toggle) |
|||
.on(selector + ' + ' + settings.selector.label, 'click' + eventNamespace, module.toggle) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.on('click' + eventNamespace, module.toggle) |
|||
.data(moduleNamespace, module) |
|||
; |
|||
$input |
|||
.on('keydown' + eventNamespace, module.event.keydown) |
|||
; |
|||
$label |
|||
.on('click' + eventNamespace, module.toggle) |
|||
; |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module'); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$input |
|||
.off(eventNamespace, module.event.keydown) |
|||
; |
|||
$label |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
keydown: function(event) { |
|||
var |
|||
key = event.which, |
|||
keyCode = { |
|||
enter : 13, |
|||
escape : 27 |
|||
} |
|||
; |
|||
if( key == keyCode.escape) { |
|||
module.verbose('Escape key pressed blurring field'); |
|||
$module |
|||
.blur() |
|||
; |
|||
} |
|||
if(!event.ctrlKey && key == keyCode.enter) { |
|||
$.proxy(module.toggle, this)(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
radio: function() { |
|||
return $module.hasClass(className.radio); |
|||
}, |
|||
checked: function() { |
|||
return $input.prop('checked') !== undefined && $input.prop('checked'); |
|||
}, |
|||
unchecked: function() { |
|||
return !module.is.checked(); |
|||
} |
|||
}, |
|||
|
|||
can: { |
|||
uncheck: function() { |
|||
return (typeof settings.required === 'boolean') |
|||
? settings.required |
|||
: !module.is.radio() |
|||
; |
|||
} |
|||
}, |
|||
|
|||
check: function() { |
|||
module.debug('Enabling checkbox', $input); |
|||
$input |
|||
.prop('checked', true) |
|||
.trigger('change') |
|||
; |
|||
$.proxy(settings.onChange, $input.get())(); |
|||
$.proxy(settings.onChecked, $input.get())(); |
|||
}, |
|||
|
|||
uncheck: function() { |
|||
module.debug('Disabling checkbox'); |
|||
$input |
|||
.prop('checked', false) |
|||
.trigger('change') |
|||
; |
|||
$.proxy(settings.onChange, $input.get())(); |
|||
$.proxy(settings.onUnchecked, $input.get())(); |
|||
}, |
|||
|
|||
toggle: function(event) { |
|||
module.verbose('Determining new checkbox state'); |
|||
if( module.is.unchecked() ) { |
|||
module.check(); |
|||
} |
|||
else if( module.is.checked() && module.can.uncheck() ) { |
|||
module.uncheck(); |
|||
} |
|||
}, |
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.checkbox.settings = { |
|||
|
|||
name : 'Checkbox', |
|||
namespace : 'checkbox', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
// delegated event context
|
|||
context : false, |
|||
required : 'auto', |
|||
|
|||
onChange : function(){}, |
|||
onChecked : function(){}, |
|||
onUnchecked : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
selector : { |
|||
input : 'input[type=checkbox], input[type=radio]', |
|||
label : 'label' |
|||
}, |
|||
|
|||
className : { |
|||
radio : 'radio' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,385 +0,0 @@ |
|||
/* |
|||
* # Semantic - Checkbox |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'module'; |
|||
@element : 'checkbox'; |
|||
|
|||
@import '../../semantic.config'; |
|||
|
|||
|
|||
/******************************* |
|||
Checkbox |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.checkbox { |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
height: @checkboxHeight; |
|||
|
|||
min-width: 1em; |
|||
line-height: 1em; |
|||
|
|||
outline: none; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.checkbox input { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
opacity: 0; |
|||
outline: none; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Box |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.checkbox .box, |
|||
.ui.checkbox label { |
|||
cursor: pointer; |
|||
padding-left: @labelPadding; |
|||
outline: none; |
|||
} |
|||
|
|||
.ui.checkbox .box:before, |
|||
.ui.checkbox label:before { |
|||
position: absolute; |
|||
|
|||
line-height: 1; |
|||
width: 1.25em; |
|||
height: 1.25em; |
|||
top: @boxOffset; |
|||
left: @boxOffset; |
|||
content: ''; |
|||
|
|||
background: #FFFFFF; |
|||
border-radius: 0.25em; |
|||
|
|||
transition: |
|||
background-color 0.3s ease, |
|||
border 0.3s ease, |
|||
box-shadow 0.3s ease |
|||
; |
|||
border: @checkboxBorder; |
|||
} |
|||
|
|||
/*-------------- |
|||
Checkmark |
|||
---------------*/ |
|||
|
|||
.ui.checkbox .box:after, |
|||
.ui.checkbox label:after { |
|||
position: absolute; |
|||
top: 0em; |
|||
left: 0em; |
|||
|
|||
opacity: 0; |
|||
color: @checkboxColor; |
|||
transition: opacity 0.1s ease; |
|||
} |
|||
|
|||
/*-------------- |
|||
Label |
|||
---------------*/ |
|||
|
|||
/* Inside */ |
|||
.ui.checkbox label, |
|||
.ui.checkbox + label { |
|||
cursor: pointer; |
|||
color: @labelColor; |
|||
transition: color 0.2s ease; |
|||
user-select: none; |
|||
} |
|||
|
|||
/* Outside */ |
|||
.ui.checkbox + label { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.checkbox .box:hover::before, |
|||
.ui.checkbox label:hover::before { |
|||
border: 1px solid @selectedBorderColor; |
|||
} |
|||
.ui.checkbox label:hover, |
|||
.ui.checkbox + label:hover { |
|||
color: @labelHoverColor; |
|||
} |
|||
|
|||
/*-------------- |
|||
Down |
|||
---------------*/ |
|||
|
|||
.ui.checkbox .box:active::before, |
|||
.ui.checkbox label:active::before { |
|||
background-color: #F5F5F5; |
|||
} |
|||
|
|||
/*-------------- |
|||
Focus |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:focus + .box:before, |
|||
.ui.checkbox input:focus + label:before { |
|||
border: 1px solid @selectedBorderColor; |
|||
} |
|||
.ui.checkbox input:focus + label { |
|||
color: @labelSelectedColor; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.checkbox input:checked + .box:after, |
|||
.ui.checkbox input:checked + label:after { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Disabled |
|||
---------------*/ |
|||
|
|||
.ui.disabled.checkbox + .box:after, |
|||
.ui.checkbox input[disabled] + .box:after, |
|||
.ui.disabled.checkbox label, |
|||
.ui.checkbox input[disabled] + label { |
|||
opacity: 0.4; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Radio |
|||
---------------*/ |
|||
|
|||
/* Box */ |
|||
.ui.radio.checkbox .box:before, |
|||
.ui.radio.checkbox label:before { |
|||
border-radius: @circularRadius; |
|||
transform: none; |
|||
} |
|||
|
|||
/* Circle */ |
|||
.ui.radio.checkbox .box:after, |
|||
.ui.radio.checkbox label:after { |
|||
border: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Slider |
|||
---------------*/ |
|||
|
|||
.ui.slider.checkbox { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.slider.checkbox .box, |
|||
.ui.slider.checkbox label { |
|||
padding-left: @sliderLabelDistance; |
|||
} |
|||
|
|||
/* Line */ |
|||
.ui.slider.checkbox .box:before, |
|||
.ui.slider.checkbox label:before { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
top: @sliderLineVerticalOffset; |
|||
left: 0em; |
|||
z-index: 1; |
|||
border: none !important; |
|||
|
|||
background-color: @neutralCheckbox; |
|||
width: @sliderLineWidth; |
|||
height: @sliderLineHeight; |
|||
|
|||
transform: none; |
|||
border-radius: @circularRadius; |
|||
transition: |
|||
background 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/* Handle */ |
|||
.ui.slider.checkbox .box:after, |
|||
.ui.slider.checkbox label:after { |
|||
background: @handleBackground; |
|||
position: absolute; |
|||
content: ''; |
|||
opacity: 1; |
|||
z-index: 2; |
|||
|
|||
border: none; |
|||
box-shadow: @handleBoxShadow; |
|||
width: @handleSize; |
|||
height: @handleSize; |
|||
top: @sliderHandleOffset; |
|||
left: 0em; |
|||
|
|||
border-radius: @circularRadius; |
|||
transition: |
|||
left 0.3s ease 0s |
|||
; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.slider.checkbox input:focus + .box:before, |
|||
.ui.slider.checkbox input:focus + label:before { |
|||
background-color: @toggleFocusColor; |
|||
border: none; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.slider.checkbox input:checked + .box:before, |
|||
.ui.slider.checkbox input:checked + label:before { |
|||
background-color: @positiveCheckbox; |
|||
} |
|||
.ui.slider.checkbox input:checked + .box:after, |
|||
.ui.slider.checkbox input:checked + label:after { |
|||
left: @sliderTravelDistance; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Toggle |
|||
---------------*/ |
|||
|
|||
.ui.toggle.checkbox { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.toggle.checkbox .box, |
|||
.ui.toggle.checkbox label { |
|||
padding-left: 3em; |
|||
} |
|||
|
|||
/* Switch */ |
|||
.ui.toggle.checkbox .box:before, |
|||
.ui.toggle.checkbox label:before { |
|||
cursor: pointer; |
|||
display: block; |
|||
|
|||
position: absolute; |
|||
content: ''; |
|||
|
|||
top: @toggleSwitchVerticalOffset; |
|||
z-index: 1; |
|||
border: none; |
|||
|
|||
background-color: @neutralCheckbox; |
|||
width: @toggleSwitchWidth; |
|||
height: @toggleSwitchHeight; |
|||
border-radius: @circularRadius; |
|||
} |
|||
|
|||
/* Handle */ |
|||
.ui.toggle.checkbox .box:after, |
|||
.ui.toggle.checkbox label:after { |
|||
background: @handleBackground; |
|||
position: absolute; |
|||
content: ''; |
|||
opacity: 1; |
|||
z-index: 2; |
|||
|
|||
border: none; |
|||
box-shadow: @handleBoxShadow; |
|||
width: @handleSize; |
|||
height: @handleSize; |
|||
top: @sliderHandleOffset; |
|||
left: 0em; |
|||
|
|||
border-radius: @circularRadius; |
|||
transition: |
|||
background 0.3s ease 0s, |
|||
left 0.3s ease 0s |
|||
; |
|||
} |
|||
|
|||
/* Off */ |
|||
/* |
|||
.ui.toggle.checkbox input + .box:before, |
|||
.ui.toggle.checkbox input + label:before { |
|||
background-color: @negativeCheckbox; |
|||
} |
|||
*/ |
|||
.ui.toggle.checkbox input + .box:after, |
|||
.ui.toggle.checkbox input + label:after { |
|||
left: @toggleOffOffset; |
|||
} |
|||
|
|||
/* Focus */ |
|||
.ui.toggle.checkbox input:focus + .box:before, |
|||
.ui.toggle.checkbox input:focus + label:before { |
|||
background-color: @toggleFocusColor; |
|||
border: none; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.toggle.checkbox input:checked + .box, |
|||
.ui.toggle.checkbox input:checked + label { |
|||
color: @positiveCheckbox; |
|||
} |
|||
.ui.toggle.checkbox input:checked + .box:before, |
|||
.ui.toggle.checkbox input:checked + label:before { |
|||
background-color: @positiveCheckbox; |
|||
} |
|||
.ui.toggle.checkbox input:checked + .box:after, |
|||
.ui.toggle.checkbox input:checked + label:after { |
|||
left: @toggleOnOffset; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Sizes |
|||
---------------*/ |
|||
|
|||
.ui.checkbox { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.checkbox { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.huge.checkbox { |
|||
font-size: 1.5em; |
|||
} |
|||
|
|||
.loadUIOverrides(); |
|||
@ -1,593 +0,0 @@ |
|||
/* |
|||
* # Semantic - Dimmer |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.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() ) { |
|||
$dimmer = $dimmable.children(selector.dimmer).first(); |
|||
} |
|||
else { |
|||
$dimmer = module.create(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing dimmer', settings); |
|||
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(settings.closable) { |
|||
module.verbose('Adding dimmer close event', $dimmer); |
|||
$dimmer |
|||
.on(clickEvent + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
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 |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$dimmable |
|||
.off(eventNamespace) |
|||
; |
|||
$dimmer |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
|
|||
click: function(event) { |
|||
module.verbose('Determining if event occured on dimmer', event); |
|||
if( $dimmer.find(event.target).size() === 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() { |
|||
return $( settings.template.dimmer() ).appendTo($dimmable); |
|||
}, |
|||
|
|||
animate: { |
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.set.dimmed(); |
|||
if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { |
|||
$dimmer |
|||
.transition({ |
|||
animation : settings.transition + ' in', |
|||
queue : true, |
|||
duration : module.get.duration(), |
|||
complete : function() { |
|||
module.set.active(); |
|||
callback(); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.verbose('Showing dimmer animation with javascript'); |
|||
$dimmer |
|||
.stop() |
|||
.css({ |
|||
opacity : 0, |
|||
width : '100%', |
|||
height : '100%' |
|||
}) |
|||
.fadeTo(module.get.duration(), 1, function() { |
|||
$dimmer.removeAttr('style'); |
|||
module.set.active(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) { |
|||
module.verbose('Hiding dimmer with css'); |
|||
$dimmer |
|||
.transition({ |
|||
animation : settings.transition + ' out', |
|||
duration : module.get.duration(), |
|||
queue : true, |
|||
complete : function() { |
|||
module.remove.dimmed(); |
|||
module.remove.active(); |
|||
callback(); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.verbose('Hiding dimmer with javascript'); |
|||
$dimmer |
|||
.stop() |
|||
.fadeOut(module.get.duration(), function() { |
|||
$dimmer.removeAttr('style'); |
|||
module.remove.dimmed(); |
|||
module.remove.active(); |
|||
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() { |
|||
return ( $module.children(selector.dimmer).size() > 0 ); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
active: function() { |
|||
return $dimmer.hasClass(className.active); |
|||
}, |
|||
animating: function() { |
|||
return ( $dimmer.is(':animated') || $dimmer.hasClass(className.transition) ); |
|||
}, |
|||
dimmer: function() { |
|||
return $module.is(selector.dimmer); |
|||
}, |
|||
dimmable: function() { |
|||
return $module.is(selector.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: { |
|||
active: function() { |
|||
module.set.dimmed(); |
|||
$dimmer |
|||
.removeClass(className.transition) |
|||
.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); |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
active: function() { |
|||
$dimmer |
|||
.removeClass(className.transition) |
|||
.removeClass(className.active) |
|||
; |
|||
}, |
|||
dimmed: function() { |
|||
$dimmable.removeClass(className.dimmed); |
|||
}, |
|||
disabled: function() { |
|||
$dimmer.removeClass(className.disabled); |
|||
} |
|||
}, |
|||
|
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.debug('Showing dimmer', $dimmer, settings); |
|||
if( !module.is.active() && module.is.enabled() ) { |
|||
module.animate.show(callback); |
|||
$.proxy(settings.onShow, element)(); |
|||
$.proxy(settings.onChange, element)(); |
|||
} |
|||
else { |
|||
module.debug('Dimmer is already shown or disabled'); |
|||
} |
|||
}, |
|||
|
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( module.is.active() || module.is.animating() ) { |
|||
module.debug('Hiding dimmer', $dimmer); |
|||
module.animate.hide(callback); |
|||
$.proxy(settings.onHide, element)(); |
|||
$.proxy(settings.onChange, 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(); |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
module.preinitialize(); |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.dimmer.settings = { |
|||
|
|||
name : 'Dimmer', |
|||
namespace : 'dimmer', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
transition : 'fade', |
|||
useCSS : true, |
|||
on : false, |
|||
closable : true, |
|||
|
|||
duration : { |
|||
show : 500, |
|||
hide : 500 |
|||
}, |
|||
|
|||
onChange : function(){}, |
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
selector: { |
|||
dimmable : '.ui.dimmable', |
|||
dimmer : '.ui.dimmer', |
|||
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center' |
|||
}, |
|||
|
|||
template: { |
|||
dimmer: function() { |
|||
return $('<div />').attr('class', 'ui dimmer'); |
|||
} |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
dimmable : 'ui dimmable', |
|||
dimmed : 'dimmed', |
|||
disabled : 'disabled', |
|||
pageDimmer : 'page', |
|||
hide : 'hide', |
|||
show : 'show', |
|||
transition : 'transition' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,169 +0,0 @@ |
|||
/* |
|||
* # Semantic - Dimmer |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Dimmer |
|||
*******************************/ |
|||
|
|||
.ui.dimmable { |
|||
position: relative; |
|||
} |
|||
|
|||
.ui.dimmer { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0em !important; |
|||
left: 0em !important; |
|||
|
|||
width: 0%; |
|||
height: 0%; |
|||
|
|||
text-align: center; |
|||
vertical-align: middle; |
|||
|
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
opacity: 0; |
|||
line-height: 1; |
|||
|
|||
animation-fill-mode: both; |
|||
animation-duration: 0.5s; |
|||
|
|||
transition: |
|||
background-color 0.5s linear |
|||
; |
|||
|
|||
user-select: none; |
|||
box-sizing: border-box; |
|||
|
|||
z-index: 1000; |
|||
} |
|||
|
|||
/* Dimmer Content */ |
|||
.ui.dimmer > .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: table; |
|||
user-select: text; |
|||
} |
|||
.ui.dimmer > .content > div { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
/* Loose Coupling */ |
|||
.ui.segment > .ui.dimmer { |
|||
border-radius: 5px; |
|||
} |
|||
.ui.horizontal.segment > .ui.dimmer, |
|||
.ui.vertical.segment > .ui.dimmer { |
|||
border-radius: 5px; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.dimmed.dimmable:not(body) { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.ui.dimmed.dimmable > .ui.animating.dimmer, |
|||
.ui.dimmed.dimmable > .ui.visible.dimmer, |
|||
.ui.active.dimmer { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.disabled.dimmer { |
|||
width: 0em !important; |
|||
height: 0em !important; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Page |
|||
---------------*/ |
|||
|
|||
.ui.page.dimmer { |
|||
position: fixed; |
|||
|
|||
transform-style: preserve-3d; |
|||
perspective: 2000px; |
|||
transform-origin: center center; |
|||
} |
|||
|
|||
.ui.scrolling.dimmable > .dimmer, |
|||
.ui.scrolling.page.dimmer { |
|||
position: absolute; |
|||
} |
|||
|
|||
/* Blurred Background |
|||
body.ui.dimmed.dimmable > :not(.dimmer){ |
|||
filter: ~"blur(15px) grayscale(0.7)"; |
|||
} |
|||
*/ |
|||
|
|||
/*-------------- |
|||
Aligned |
|||
---------------*/ |
|||
|
|||
.ui.dimmer > .top.aligned.content > * { |
|||
vertical-align: top; |
|||
} |
|||
.ui.dimmer > .bottom.aligned.content > * { |
|||
vertical-align: bottom; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inverted |
|||
---------------*/ |
|||
|
|||
.ui.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85); |
|||
} |
|||
.ui.inverted.dimmer > .content > * { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dimmer { |
|||
display: block; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
z-index: -100; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.dimmer { |
|||
overflow: visible; |
|||
opacity: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(0, 0, 0, 0.85); |
|||
z-index: 1; |
|||
} |
|||
|
|||
.ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0); |
|||
} |
|||
.ui.dimmed.dimmable > .ui.simple.inverted.dimmer { |
|||
background-color: rgba(255, 255, 255, 0.85) |
|||
} |
|||
@ -1,948 +0,0 @@ |
|||
/* |
|||
* # Semantic - Dropdown |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.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() { |
|||
var |
|||
settings = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.dropdown.settings, parameters) |
|||
: $.extend({}, $.fn.dropdown.settings), |
|||
|
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$item = $module.find(selector.item), |
|||
$text = $module.find(selector.text), |
|||
$input = $module.find(selector.input), |
|||
|
|||
$combo = ($module.prev().find(selector.text).size() > 0) |
|||
? $module.prev().find(selector.text) |
|||
: $module.prev(), |
|||
|
|||
$menu = $module.children(selector.menu), |
|||
|
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing dropdown', settings); |
|||
|
|||
module.save.defaults(); |
|||
module.set.selected(); |
|||
|
|||
if(hasTouch) { |
|||
module.bind.touchEvents(); |
|||
} |
|||
module.bind.mouseEvents(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of dropdown', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous dropdown for', $module); |
|||
$item |
|||
.off(eventNamespace) |
|||
; |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
bind: { |
|||
touchEvents: function() { |
|||
module.debug('Touch device detected binding touch events'); |
|||
$module |
|||
.on('touchstart' + eventNamespace, module.event.test.toggle) |
|||
; |
|||
$item |
|||
.on('touchstart' + eventNamespace, module.event.item.mouseenter) |
|||
.on('touchstart' + eventNamespace, module.event.item.click) |
|||
; |
|||
}, |
|||
mouseEvents: function() { |
|||
module.verbose('Mouse detected binding mouse events'); |
|||
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) |
|||
; |
|||
} |
|||
$item |
|||
.on('mouseenter' + eventNamespace, module.event.item.mouseenter) |
|||
.on('mouseleave' + eventNamespace, module.event.item.mouseleave) |
|||
.on('click' + eventNamespace, module.event.item.click) |
|||
; |
|||
}, |
|||
intent: function() { |
|||
module.verbose('Binding hide intent event to document'); |
|||
if(hasTouch) { |
|||
$document |
|||
.on('touchstart' + eventNamespace, module.event.test.touch) |
|||
.on('touchmove' + eventNamespace, module.event.test.touch) |
|||
; |
|||
} |
|||
$document |
|||
.on('click' + eventNamespace, module.event.test.hide) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
unbind: { |
|||
intent: function() { |
|||
module.verbose('Removing hide intent event from document'); |
|||
if(hasTouch) { |
|||
$document |
|||
.off('touchstart' + eventNamespace) |
|||
.off('touchmove' + eventNamespace) |
|||
; |
|||
} |
|||
$document |
|||
.off('click' + eventNamespace) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
test: { |
|||
toggle: function(event) { |
|||
if( module.determine.intent(event, module.toggle) ) { |
|||
event.preventDefault(); |
|||
} |
|||
}, |
|||
touch: function(event) { |
|||
module.determine.intent(event, function() { |
|||
if(event.type == 'touchstart') { |
|||
module.timer = setTimeout(module.hide, settings.delay.touch); |
|||
} |
|||
else if(event.type == 'touchmove') { |
|||
clearTimeout(module.timer); |
|||
} |
|||
}); |
|||
event.stopPropagation(); |
|||
}, |
|||
hide: function(event) { |
|||
module.determine.intent(event, module.hide); |
|||
} |
|||
}, |
|||
|
|||
item: { |
|||
|
|||
mouseenter: function(event) { |
|||
var |
|||
$currentMenu = $(this).find(selector.menu), |
|||
$otherMenus = $(this).siblings(selector.item).children(selector.menu) |
|||
; |
|||
if( $currentMenu.size() > 0 ) { |
|||
clearTimeout(module.itemTimer); |
|||
module.itemTimer = setTimeout(function() { |
|||
module.animate.hide(false, $otherMenus); |
|||
module.verbose('Showing sub-menu', $currentMenu); |
|||
module.animate.show(false, $currentMenu); |
|||
}, settings.delay.show * 2); |
|||
event.preventDefault(); |
|||
} |
|||
}, |
|||
|
|||
mouseleave: function(event) { |
|||
var |
|||
$currentMenu = $(this).find(selector.menu) |
|||
; |
|||
if($currentMenu.size() > 0) { |
|||
clearTimeout(module.itemTimer); |
|||
module.itemTimer = setTimeout(function() { |
|||
module.verbose('Hiding sub-menu', $currentMenu); |
|||
module.animate.hide(false, $currentMenu); |
|||
}, settings.delay.hide); |
|||
} |
|||
}, |
|||
|
|||
click: function (event) { |
|||
var |
|||
$choice = $(this), |
|||
text = ( $choice.data(metadata.text) !== undefined ) |
|||
? $choice.data(metadata.text) |
|||
: $choice.text(), |
|||
value = ( $choice.data(metadata.value) !== undefined) |
|||
? $choice.data(metadata.value) |
|||
: text.toLowerCase(), |
|||
callback = function() { |
|||
module.determine.selectAction(text, value); |
|||
$.proxy(settings.onChange, element)(value, text); |
|||
} |
|||
; |
|||
if( $choice.find(selector.menu).size() === 0 ) { |
|||
if(event.type == 'touchstart') { |
|||
$choice.one('click', callback); |
|||
} |
|||
else { |
|||
callback(); |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
resetStyle: function() { |
|||
$(this).removeAttr('style'); |
|||
} |
|||
|
|||
}, |
|||
|
|||
determine: { |
|||
selectAction: function(text, value) { |
|||
module.verbose('Determining action', settings.action); |
|||
if( $.isFunction( module.action[settings.action] ) ) { |
|||
module.verbose('Triggering preset action', settings.action, text, value); |
|||
module.action[ settings.action ](text, value); |
|||
} |
|||
else if( $.isFunction(settings.action) ) { |
|||
module.verbose('Triggering user action', settings.action, text, value); |
|||
settings.action(text, value); |
|||
} |
|||
else { |
|||
module.error(error.action, settings.action); |
|||
} |
|||
}, |
|||
intent: function(event, callback) { |
|||
module.debug('Determining whether event occurred in dropdown', event.target); |
|||
callback = callback || function(){}; |
|||
if( $(event.target).closest($menu).size() === 0 ) { |
|||
module.verbose('Triggering event', callback); |
|||
callback(); |
|||
return true; |
|||
} |
|||
else { |
|||
module.verbose('Event occurred in dropdown, canceling callback'); |
|||
return false; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
action: { |
|||
|
|||
nothing: function() {}, |
|||
|
|||
hide: function() { |
|||
module.hide(); |
|||
}, |
|||
|
|||
select: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.set.value(value); |
|||
module.hide(); |
|||
}, |
|||
|
|||
activate: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.set.value(value); |
|||
module.hide(); |
|||
}, |
|||
|
|||
combo: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.set.value(value); |
|||
module.hide(); |
|||
}, |
|||
|
|||
/* Deprecated */ |
|||
auto: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.set.value(value); |
|||
module.hide(); |
|||
}, |
|||
|
|||
/* Deprecated */ |
|||
changeText: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.hide(); |
|||
}, |
|||
|
|||
/* Deprecated */ |
|||
updateForm: function(text, value) { |
|||
value = (value !== undefined) |
|||
? value |
|||
: text |
|||
; |
|||
module.set.selected(value); |
|||
module.set.value(value); |
|||
module.hide(); |
|||
} |
|||
|
|||
}, |
|||
|
|||
get: { |
|||
text: function() { |
|||
return $text.text(); |
|||
}, |
|||
value: function() { |
|||
return ($input.size() > 0) |
|||
? $input.val() |
|||
: $module.data(metadata.value) |
|||
; |
|||
}, |
|||
item: function(value) { |
|||
var |
|||
$selectedItem = false |
|||
; |
|||
value = (value !== undefined) |
|||
? value |
|||
: ( module.get.value() !== undefined) |
|||
? module.get.value() |
|||
: module.get.text() |
|||
; |
|||
if(value !== undefined) { |
|||
$item |
|||
.each(function() { |
|||
var |
|||
$choice = $(this), |
|||
optionText = ( $choice.data(metadata.text) !== undefined ) |
|||
? $choice.data(metadata.text) |
|||
: $choice.text(), |
|||
optionValue = ( $choice.data(metadata.value) !== undefined ) |
|||
? $choice.data(metadata.value) |
|||
: optionText.toLowerCase() |
|||
; |
|||
if( optionValue == value ) { |
|||
$selectedItem = $(this); |
|||
} |
|||
else if( !$selectedItem && optionText == value ) { |
|||
$selectedItem = $(this); |
|||
} |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
value = module.get.text(); |
|||
} |
|||
return $selectedItem || false; |
|||
} |
|||
}, |
|||
|
|||
restore: { |
|||
defaults: function() { |
|||
module.restore.defaultText(); |
|||
module.restore.defaultValue(); |
|||
}, |
|||
defaultText: function() { |
|||
var |
|||
defaultText = $module.data(metadata.defaultText) |
|||
; |
|||
module.debug('Restoring default text', defaultText); |
|||
module.set.text(defaultText); |
|||
}, |
|||
defaultValue: function() { |
|||
var |
|||
defaultValue = $module.data(metadata.defaultValue) |
|||
; |
|||
if(defaultValue !== undefined) { |
|||
module.debug('Restoring default value', defaultValue); |
|||
module.set.selected(defaultValue); |
|||
module.set.value(defaultValue); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
save: { |
|||
defaults: function() { |
|||
module.save.defaultText(); |
|||
module.save.defaultValue(); |
|||
}, |
|||
defaultValue: function() { |
|||
$module.data(metadata.defaultValue, module.get.value() ); |
|||
}, |
|||
defaultText: function() { |
|||
$module.data(metadata.defaultText, $text.text() ); |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
scrollPosition: function() { |
|||
var |
|||
$activeItem = module.get.item(), |
|||
activeOffset = ($activeItem.size() > 0) |
|||
? $activeItem.position().top |
|||
: false |
|||
; |
|||
if(activeOffset) { |
|||
module.debug('Scrolling to active item'); |
|||
$menu |
|||
.scrollTop(activeOffset) |
|||
; |
|||
} |
|||
}, |
|||
text: function(text) { |
|||
if(settings.action == 'combo') { |
|||
module.debug('Changing combo button text', text, $combo); |
|||
$combo |
|||
.text(text) |
|||
; |
|||
} |
|||
else if(settings.action !== 'select') { |
|||
module.debug('Changing text', text, $text); |
|||
$text.removeClass(className.placeholder); |
|||
$text.text(text); |
|||
} |
|||
}, |
|||
value: function(value) { |
|||
module.debug('Adding selected value to hidden input', value, $input); |
|||
if($input.size() > 0) { |
|||
$input.val(value); |
|||
} |
|||
else { |
|||
$module.data(metadata.value, value); |
|||
} |
|||
}, |
|||
active: function() { |
|||
$module.addClass(className.active); |
|||
}, |
|||
visible: function() { |
|||
$module.addClass(className.visible); |
|||
}, |
|||
selected: function(value) { |
|||
var |
|||
$selectedItem = module.get.item(value), |
|||
selectedText |
|||
; |
|||
if($selectedItem) { |
|||
module.debug('Setting selected menu item to', $selectedItem); |
|||
selectedText = ($selectedItem.data(metadata.text) !== undefined) |
|||
? $selectedItem.data(metadata.text) |
|||
: $selectedItem.text() |
|||
; |
|||
$item |
|||
.removeClass(className.active) |
|||
; |
|||
$selectedItem |
|||
.addClass(className.active) |
|||
; |
|||
module.set.text(selectedText); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
active: function() { |
|||
$module.removeClass(className.active); |
|||
}, |
|||
visible: function() { |
|||
$module.removeClass(className.visible); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
selection: function() { |
|||
return $module.hasClass(className.selection); |
|||
}, |
|||
animated: function($subMenu) { |
|||
return ($subMenu) |
|||
? $subMenu.is(':animated') || $subMenu.transition('is animating') |
|||
: $menu.is(':animated') || $menu.transition('is animating') |
|||
; |
|||
}, |
|||
visible: function($subMenu) { |
|||
return ($subMenu) |
|||
? $subMenu.is(':visible') |
|||
: $menu.is(':visible') |
|||
; |
|||
}, |
|||
hidden: function($subMenu) { |
|||
return ($subMenu) |
|||
? $subMenu.is(':not(:visible)') |
|||
: $menu.is(':not(:visible)') |
|||
; |
|||
} |
|||
}, |
|||
|
|||
can: { |
|||
click: function() { |
|||
return (hasTouch || settings.on == 'click'); |
|||
}, |
|||
show: function() { |
|||
return !$module.hasClass(className.disabled); |
|||
} |
|||
}, |
|||
|
|||
animate: { |
|||
show: function(callback, $subMenu) { |
|||
var |
|||
$currentMenu = $subMenu || $menu |
|||
; |
|||
callback = callback || function(){}; |
|||
if( module.is.hidden($currentMenu) ) { |
|||
module.verbose('Doing menu show animation', $currentMenu); |
|||
if(settings.transition == 'none') { |
|||
callback(); |
|||
} |
|||
else if($.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$currentMenu |
|||
.transition({ |
|||
animation : settings.transition + ' in', |
|||
duration : settings.duration, |
|||
complete : callback, |
|||
queue : false |
|||
}) |
|||
; |
|||
} |
|||
else if(settings.transition == 'slide down') { |
|||
$currentMenu |
|||
.hide() |
|||
.clearQueue() |
|||
.children() |
|||
.clearQueue() |
|||
.css('opacity', 0) |
|||
.delay(50) |
|||
.animate({ |
|||
opacity : 1 |
|||
}, settings.duration, 'easeOutQuad', module.event.resetStyle) |
|||
.end() |
|||
.slideDown(100, 'easeOutQuad', function() { |
|||
$.proxy(module.event.resetStyle, this)(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else if(settings.transition == 'fade') { |
|||
$currentMenu |
|||
.hide() |
|||
.clearQueue() |
|||
.fadeIn(settings.duration, function() { |
|||
$.proxy(module.event.resetStyle, this)(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.transition, settings.transition); |
|||
} |
|||
} |
|||
}, |
|||
hide: function(callback, $subMenu) { |
|||
var |
|||
$currentMenu = $subMenu || $menu |
|||
; |
|||
callback = callback || function(){}; |
|||
if(module.is.visible($currentMenu) ) { |
|||
module.verbose('Doing menu hide animation', $currentMenu); |
|||
if($.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$currentMenu |
|||
.transition({ |
|||
animation : settings.transition + ' out', |
|||
duration : settings.duration, |
|||
complete : callback, |
|||
queue : false |
|||
}) |
|||
; |
|||
} |
|||
else if(settings.transition == 'none') { |
|||
callback(); |
|||
} |
|||
else if(settings.transition == 'slide down') { |
|||
$currentMenu |
|||
.show() |
|||
.clearQueue() |
|||
.children() |
|||
.clearQueue() |
|||
.css('opacity', 1) |
|||
.animate({ |
|||
opacity : 0 |
|||
}, 100, 'easeOutQuad', module.event.resetStyle) |
|||
.end() |
|||
.delay(50) |
|||
.slideUp(100, 'easeOutQuad', function() { |
|||
$.proxy(module.event.resetStyle, this)(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else if(settings.transition == 'fade') { |
|||
$currentMenu |
|||
.show() |
|||
.clearQueue() |
|||
.fadeOut(150, function() { |
|||
$.proxy(module.event.resetStyle, this)(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.transition); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
show: function() { |
|||
module.debug('Checking if dropdown can show'); |
|||
if( module.is.hidden() ) { |
|||
module.hideOthers(); |
|||
module.set.active(); |
|||
module.animate.show(function() { |
|||
if( module.can.click() ) { |
|||
module.bind.intent(); |
|||
} |
|||
module.set.visible(); |
|||
}); |
|||
$.proxy(settings.onShow, element)(); |
|||
} |
|||
}, |
|||
|
|||
hide: function() { |
|||
if( !module.is.animated() && module.is.visible() ) { |
|||
module.debug('Hiding dropdown'); |
|||
if( module.can.click() ) { |
|||
module.unbind.intent(); |
|||
} |
|||
module.remove.active(); |
|||
module.animate.hide(module.remove.visible); |
|||
$.proxy(settings.onHide, element)(); |
|||
} |
|||
}, |
|||
|
|||
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); |
|||
} |
|||
}, |
|||
|
|||
hideOthers: function() { |
|||
module.verbose('Finding other dropdowns to hide'); |
|||
$allModules |
|||
.not($module) |
|||
.has(selector.menu + ':visible') |
|||
.dropdown('hide') |
|||
; |
|||
}, |
|||
|
|||
toggle: function() { |
|||
module.verbose('Toggling menu visibility'); |
|||
if( module.is.hidden() ) { |
|||
module.show(); |
|||
} |
|||
else { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
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) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.dropdown.settings = { |
|||
|
|||
name : 'Dropdown', |
|||
namespace : 'dropdown', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
on : 'click', |
|||
action : 'activate', |
|||
|
|||
delay: { |
|||
show : 200, |
|||
hide : 300, |
|||
touch : 50 |
|||
}, |
|||
|
|||
transition : 'slide down', |
|||
duration : 250, |
|||
|
|||
onChange : function(value, text){}, |
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
|
|||
error : { |
|||
action : 'You called a dropdown action that was not defined', |
|||
method : 'The method you called is not defined.', |
|||
transition : 'The requested transition was not found' |
|||
}, |
|||
|
|||
metadata: { |
|||
defaultText : 'defaultText', |
|||
defaultValue : 'defaultValue', |
|||
text : 'text', |
|||
value : 'value' |
|||
}, |
|||
|
|||
selector : { |
|||
menu : '.menu', |
|||
item : '.menu > .item', |
|||
text : '> .text', |
|||
input : '> input[type="hidden"]' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
placeholder : 'default', |
|||
disabled : 'disabled', |
|||
visible : 'visible', |
|||
selection : 'selection' |
|||
} |
|||
|
|||
}; |
|||
|
|||
// Adds easing
|
|||
$.extend( $.easing, { |
|||
easeOutQuad: function (x, t, b, c, d) { |
|||
return -c *(t/=d)*(t-2) + b; |
|||
}, |
|||
}); |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,610 +0,0 @@ |
|||
/* |
|||
* # Semantic - Dropdown |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Dropdown |
|||
*******************************/ |
|||
|
|||
.ui.dropdown { |
|||
cursor: pointer; |
|||
position: relative; |
|||
display: inline-block; |
|||
|
|||
line-height: 1; |
|||
|
|||
-webkit-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-moz-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-o-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
-ms-transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
transition: |
|||
border-radius 0.1s ease, |
|||
width 0.2s ease |
|||
; |
|||
|
|||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
-moz-tap-highlight-color: rgba(0, 0, 0, 0); |
|||
tap-highlight-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Menu |
|||
---------------*/ |
|||
|
|||
.ui.dropdown .menu { |
|||
cursor: auto; |
|||
position: absolute; |
|||
display: none; |
|||
top: 100%; |
|||
|
|||
margin: 0em; |
|||
background-color: #FFFFFF; |
|||
min-width: 100%; |
|||
|
|||
white-space: nowrap; |
|||
font-size: 0.875em; |
|||
text-shadow: none; |
|||
|
|||
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease; |
|||
-moz-transition: opacity 0.2s ease; |
|||
-o-transition: opacity 0.2s ease; |
|||
-ms-transition: opacity 0.2s ease; |
|||
transition: opacity 0.2s ease; |
|||
z-index: 11; |
|||
} |
|||
|
|||
/*-------------- |
|||
Icon |
|||
---------------*/ |
|||
|
|||
.ui.dropdown > .dropdown.icon { |
|||
width: auto; |
|||
margin: 0em 0em 0em 1em; |
|||
} |
|||
|
|||
.ui.dropdown > .dropdown.icon:before { |
|||
content: "\f0d7"; |
|||
} |
|||
.ui.dropdown .menu .item .dropdown.icon { |
|||
width: auto; |
|||
float: right; |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
.ui.dropdown .menu .item .dropdown.icon:before { |
|||
content: "\f0da"/*rtl:"\f0d9"*/; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Text |
|||
---------------*/ |
|||
|
|||
.ui.dropdown > .text { |
|||
display: inline-block; |
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Flyout Direction */ |
|||
.ui.dropdown .menu { |
|||
left: 0px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Sub Menu |
|||
---------------*/ |
|||
|
|||
.ui.dropdown .menu .menu { |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
margin: 0em !important; |
|||
border-radius: 0 0.325em 0.325em 0em !important; |
|||
} |
|||
.ui.dropdown .menu .menu:after { |
|||
display: none; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item { |
|||
cursor: pointer; |
|||
border: none; |
|||
border-top: 1px solid rgba(0, 0, 0, 0.05); |
|||
height: auto; |
|||
|
|||
font-size: 0.875em; |
|||
display: block; |
|||
color: rgba(0, 0, 0, 0.75); |
|||
|
|||
padding: 0.85em 1em !important; |
|||
font-size: 0.875rem; |
|||
text-transform: none; |
|||
font-weight: normal; |
|||
text-align: left; |
|||
|
|||
-webkit-touch-callout: none; |
|||
} |
|||
.ui.dropdown .menu .item:before { |
|||
display: none; |
|||
} |
|||
.ui.dropdown .menu .item .icon { |
|||
margin-right: 0.75em; |
|||
} |
|||
|
|||
.ui.dropdown .menu .item:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Coupling |
|||
*******************************/ |
|||
|
|||
/* Opposite on last menu on right */ |
|||
.ui.menu .right.menu .dropdown:last-child .menu, |
|||
.ui.buttons > .ui.dropdown:last-child .menu { |
|||
left: auto; |
|||
right: 0px; |
|||
} |
|||
.ui.vertical.menu .dropdown.item > .dropdown.icon:before { |
|||
content: "\f0da"/*rtl:"\f0d9"*/; |
|||
} |
|||
.ui.dropdown.icon.button > .dropdown.icon { |
|||
margin: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Dropdown Visible */ |
|||
.ui.visible.dropdown > .menu { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Hover |
|||
----------------------*/ |
|||
|
|||
/* Menu Item Hover */ |
|||
.ui.dropdown .menu .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
z-index: 12; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Active |
|||
----------------------*/ |
|||
|
|||
/* Menu Item Active */ |
|||
.ui.dropdown .menu .active.item { |
|||
box-shadow: none; |
|||
background-color: rgba(0, 0, 0, 0.06) !important; |
|||
border-left: none; |
|||
border-color: transparent !important; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-shadow: none; |
|||
box-shadow: none; |
|||
z-index: 12; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Default Text |
|||
----------------------*/ |
|||
|
|||
.ui.dropdown > .default.text, |
|||
.ui.default.dropdown > .text { |
|||
color: rgba(179, 179, 179, 0.7); |
|||
} |
|||
.ui.dropdown:hover > .default.text, |
|||
.ui.default.dropdown:hover > .text { |
|||
color: rgba(140, 140, 140, 0.7); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Error |
|||
----------------------*/ |
|||
|
|||
.ui.dropdown.error, |
|||
.ui.dropdown.error .item { |
|||
color: #D95C5C !important; |
|||
} |
|||
|
|||
.ui.selection.dropdown.error { |
|||
background-color: #FFFAFA; |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; |
|||
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; |
|||
} |
|||
|
|||
.ui.selection.dropdown.error:hover { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; |
|||
box-shadow: 0px 0px 0px 1px rgba(231, 190, 190, 1) !important; |
|||
} |
|||
|
|||
.ui.dropdown.error .menu { |
|||
-webkit-box-shadow: 0px 0px 1px 1px #E7BEBE !important; |
|||
box-shadow: 0px 0px 1px 1px #E7BEBE !important; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.dropdown.error .menu .item:hover { |
|||
background-color: #FFF2F2 !important; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.dropdown.error .menu .active.item { |
|||
background-color: #FDCFCF !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Simple |
|||
---------------*/ |
|||
/* Displays without javascript */ |
|||
|
|||
.ui.simple.dropdown .menu:before, |
|||
.ui.simple.dropdown .menu:after { |
|||
display: none; |
|||
} |
|||
.ui.simple.dropdown .menu { |
|||
display: block; |
|||
overflow: hidden; |
|||
top: -9999px !important; |
|||
position: absolute; |
|||
opacity: 0; |
|||
width: 0; |
|||
height: 0; |
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown, |
|||
.ui.simple.dropdown:hover { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
|
|||
.ui.simple.active.dropdown > .menu, |
|||
.ui.simple.dropdown:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.dropdown > .menu .item:active > .menu, |
|||
.ui.simple.dropdown:hover > .menu .item:hover > .menu { |
|||
overflow: visible; |
|||
width: auto; |
|||
height: auto; |
|||
top: 0% !important; |
|||
left: 100% !important; |
|||
opacity: 1; |
|||
} |
|||
.ui.simple.disabled.dropdown:hover .menu { |
|||
display: none; |
|||
height: 0px; |
|||
width: 0px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Selection |
|||
---------------*/ |
|||
/* Displays like a select box */ |
|||
|
|||
.ui.selection.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
|
|||
word-wrap: break-word; |
|||
white-space: normal; |
|||
|
|||
/* Matches selection dropdown height to input height */ |
|||
border-top: 1px solid transparent; |
|||
|
|||
background-color: #FFFFFF; |
|||
padding: 0.65em 1em; |
|||
|
|||
line-height: 1.33; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
|
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important; |
|||
|
|||
-webkit-border-radius: 0.3125em !important; |
|||
-moz-border-radius: 0.3125em !important; |
|||
border-radius: 0.3125em !important; |
|||
} |
|||
.ui.selection.dropdown select { |
|||
display: none; |
|||
} |
|||
.ui.selection.dropdown > .dropdown.icon { |
|||
opacity: 0.7; |
|||
margin: 0.2em 0em 0.2em 1.25em; |
|||
|
|||
-webkit-transition: opacity 0.2s ease-out; |
|||
-moz-transition: opacity 0.2s ease-out; |
|||
-o-transition: opacity 0.2s ease-out; |
|||
-ms-transition: opacity 0.2s ease-out; |
|||
transition: opacity 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown, |
|||
.ui.selection.dropdown .menu { |
|||
top: 100%; |
|||
-webkit-transition: box-shadow 0.2s ease-out; |
|||
-moz-transition: box-shadow 0.2s ease-out; |
|||
-o-transition: box-shadow 0.2s ease-out; |
|||
-ms-transition: box-shadow 0.2s ease-out; |
|||
transition: box-shadow 0.2s ease-out; |
|||
} |
|||
|
|||
.ui.selection.dropdown .menu { |
|||
max-height: 312px; |
|||
|
|||
overflow-x: hidden; |
|||
overflow-y: auto; |
|||
|
|||
-webkit-box-shadow: 0px 1px 0px 1px #E0E0E0; |
|||
-moz-box-shadow: 0px 1px 0px 1px #E0E0E0; |
|||
box-shadow: 0px 1px 0px 1px #E0E0E0; |
|||
|
|||
-moz-border-radius: 0px 0px 0.325em 0.325em; |
|||
-webkit-border-radius: 0px 0px 0.325em 0.325em; |
|||
border-radius: 0px 0px 0.325em 0.325em; |
|||
} |
|||
.ui.selection.dropdown .menu:after, |
|||
.ui.selection.dropdown .menu:before { |
|||
display: none; |
|||
} |
|||
.ui.selection.dropdown .menu img { |
|||
height: 2.5em; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-right: 0.5em; |
|||
} |
|||
|
|||
/* Hover */ |
|||
.ui.selection.dropdown:hover { |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important; |
|||
} |
|||
.ui.selection.dropdown:hover .menu { |
|||
-webkit-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
-moz-box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
box-shadow: 0px 1px 0px 1px #D3D3D3; |
|||
} |
|||
.ui.selection.dropdown:hover > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.visible.selection.dropdown { |
|||
border-bottom-left-radius: 0em !important; |
|||
border-bottom-right-radius: 0em !important; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.active.selection.dropdown { |
|||
|
|||
-webkit-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
-moz-border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
border-radius: 0.3125em 0.3125em 0em 0em !important; |
|||
} |
|||
.ui.active.selection.dropdown > .dropdown.icon { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fluid |
|||
---------------*/ |
|||
|
|||
.ui.fluid.dropdown { |
|||
display: block; |
|||
} |
|||
.ui.fluid.dropdown > .dropdown.icon { |
|||
float: right; |
|||
} |
|||
|
|||
/*-------------- |
|||
Inline |
|||
---------------*/ |
|||
|
|||
.ui.inline.dropdown { |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
color: inherit; |
|||
} |
|||
.ui.inline.dropdown .dropdown.icon { |
|||
margin: 0em 0.5em 0em 0.25em; |
|||
} |
|||
.ui.inline.dropdown .text { |
|||
font-weight: bold; |
|||
} |
|||
.ui.inline.dropdown .menu { |
|||
cursor: auto; |
|||
margin-top: 0.25em; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Floating |
|||
---------------*/ |
|||
|
|||
.ui.floating.dropdown .menu { |
|||
left: 0; |
|||
right: auto; |
|||
|
|||
margin-top: 0.5em !important; |
|||
|
|||
-webkit-border-radius: 0.325em; |
|||
-moz-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointing |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.pointing.dropdown .menu { |
|||
top: 100%; |
|||
margin-top: 0.75em; |
|||
-moz-border-radius: 0.325em; |
|||
-webkit-border-radius: 0.325em; |
|||
border-radius: 0.325em; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
display: block; |
|||
position: absolute; |
|||
pointer-events: none; |
|||
content: " "; |
|||
visibility: visible; |
|||
|
|||
width: 0.5em; |
|||
height: 0.5em; |
|||
|
|||
-moz-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
-webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05); |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
z-index: 2; |
|||
} |
|||
|
|||
.ui.pointing.dropdown .menu .active.item:first-child { |
|||
background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -o-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent -ms-linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03)); |
|||
} |
|||
|
|||
/* Directions */ |
|||
|
|||
.ui.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 50%; |
|||
margin: 0em 0em 0em -0.25em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
left: 0%; |
|||
right: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.left.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: 1.25em; |
|||
right: auto; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu { |
|||
top: 100%; |
|||
bottom: auto; |
|||
right: 0%; |
|||
left: auto; |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.top.right.pointing.dropdown .menu:after { |
|||
top: -0.25em; |
|||
left: auto; |
|||
right: 1.25em; |
|||
margin: 0em; |
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
} |
|||
|
|||
.ui.left.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: 100%; |
|||
right: auto; |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.left.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(-45deg); |
|||
-moz-transform: rotate(-45deg); |
|||
transform: rotate(-45deg); |
|||
} |
|||
|
|||
.ui.right.pointing.dropdown .menu { |
|||
top: 0%; |
|||
left: auto; |
|||
right: 100%; |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.right.pointing.dropdown .menu:after { |
|||
top: 1em; |
|||
left: auto; |
|||
right: -0.25em; |
|||
margin: 0em 0em 0em 0em; |
|||
|
|||
-webkit-transform: rotate(135deg); |
|||
-moz-transform: rotate(135deg); |
|||
transform: rotate(135deg); |
|||
} |
|||
@ -1,729 +0,0 @@ |
|||
/* |
|||
* # Semantic - Modal |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.modal = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
$window = $(window), |
|||
$document = $(document), |
|||
$body = $('body'), |
|||
|
|||
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.modal.settings, parameters) |
|||
: $.extend({}, $.fn.modal.settings), |
|||
|
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
$module = $(this), |
|||
$context = $(settings.context), |
|||
$close = $module.find(selector.close), |
|||
|
|||
$allModals, |
|||
$otherModals, |
|||
$focusedElement, |
|||
$dimmable, |
|||
$dimmer, |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing dimmer', $context); |
|||
|
|||
if($.fn.dimmer === undefined) { |
|||
module.error(error.dimmer); |
|||
return; |
|||
} |
|||
$dimmable = $context |
|||
.dimmer({ |
|||
closable : false, |
|||
useCSS : true, |
|||
duration : { |
|||
show : settings.duration * 0.9, |
|||
hide : settings.duration * 1.1 |
|||
} |
|||
}) |
|||
; |
|||
|
|||
if(settings.detachable) { |
|||
$dimmable.dimmer('add content', $module); |
|||
} |
|||
|
|||
$dimmer = $dimmable |
|||
.dimmer('get dimmer') |
|||
; |
|||
|
|||
$otherModals = $module.siblings(selector.modal); |
|||
$allModals = $otherModals.add($module); |
|||
|
|||
module.verbose('Attaching close events', $close); |
|||
$close |
|||
.on('click' + eventNamespace, module.event.close) |
|||
; |
|||
$window |
|||
.on('resize' + eventNamespace, module.event.resize) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of modal'); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous modal'); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
$close |
|||
.off(eventNamespace) |
|||
; |
|||
$context |
|||
.dimmer('destroy') |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.remove.scrolling(); |
|||
module.cacheSizes(); |
|||
module.set.screenHeight(); |
|||
module.set.type(); |
|||
module.set.position(); |
|||
}, |
|||
|
|||
attachEvents: function(selector, event) { |
|||
var |
|||
$toggle = $(selector) |
|||
; |
|||
event = $.isFunction(module[event]) |
|||
? module[event] |
|||
: module.toggle |
|||
; |
|||
if($toggle.size() > 0) { |
|||
module.debug('Attaching modal events to element', selector, event); |
|||
$toggle |
|||
.off(eventNamespace) |
|||
.on('click' + eventNamespace, event) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.notFound); |
|||
} |
|||
}, |
|||
|
|||
event: { |
|||
close: function() { |
|||
module.verbose('Closing element pressed'); |
|||
if( $(this).is(selector.approve) ) { |
|||
if($.proxy(settings.onApprove, element)() !== false) { |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.verbose('Approve callback returned false cancelling hide'); |
|||
} |
|||
} |
|||
else if( $(this).is(selector.deny) ) { |
|||
if($.proxy(settings.onDeny, element)() !== false) { |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.verbose('Deny callback returned false cancelling hide'); |
|||
} |
|||
} |
|||
else { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
click: function(event) { |
|||
if( $(event.target).closest(selector.modal).size() === 0 ) { |
|||
module.debug('Dimmer clicked, hiding all modals'); |
|||
if(settings.allowMultiple) { |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.hideAll(); |
|||
} |
|||
event.stopImmediatePropagation(); |
|||
} |
|||
}, |
|||
debounce: function(method, delay) { |
|||
clearTimeout(module.timer); |
|||
module.timer = setTimeout(method, delay); |
|||
}, |
|||
keyboard: function(event) { |
|||
var |
|||
keyCode = event.which, |
|||
escapeKey = 27 |
|||
; |
|||
if(keyCode == escapeKey) { |
|||
if(settings.closable) { |
|||
module.debug('Escape key pressed hiding modal'); |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.debug('Escape key pressed, but closable is set to false'); |
|||
} |
|||
event.preventDefault(); |
|||
} |
|||
}, |
|||
resize: function() { |
|||
if( $dimmable.dimmer('is active') ) { |
|||
requestAnimationFrame(module.refresh); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
toggle: function() { |
|||
if( module.is.active() ) { |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.show(); |
|||
} |
|||
}, |
|||
|
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.showDimmer(); |
|||
module.showModal(callback); |
|||
}, |
|||
|
|||
showModal: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( !module.is.active() ) { |
|||
module.cacheSizes(); |
|||
module.set.position(); |
|||
module.set.screenHeight(); |
|||
module.set.type(); |
|||
|
|||
if( $otherModals.filter(':visible').size() > 0 && !settings.allowMultiple) { |
|||
module.debug('Other modals visible, queueing show animation'); |
|||
module.hideOthers(module.showModal); |
|||
} |
|||
else { |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
module.debug('Showing modal with css animations'); |
|||
$module |
|||
.transition(settings.transition + ' in', settings.duration, function() { |
|||
module.set.active(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
module.debug('Showing modal with javascript'); |
|||
$module |
|||
.fadeIn(settings.duration, settings.easing, function() { |
|||
module.set.active(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
$.proxy(settings.onShow, element)(); |
|||
} |
|||
} |
|||
else { |
|||
module.debug('Modal is already visible'); |
|||
} |
|||
}, |
|||
|
|||
showDimmer: function() { |
|||
if( !$dimmable.dimmer('is active') ) { |
|||
module.debug('Showing dimmer'); |
|||
$dimmable.dimmer('show'); |
|||
} |
|||
else { |
|||
module.debug('Dimmer already visible'); |
|||
} |
|||
}, |
|||
|
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if($allModals.filter(':visible').size() <= 1) { |
|||
module.hideDimmer(); |
|||
} |
|||
module.hideModal(callback); |
|||
}, |
|||
|
|||
hideDimmer: function() { |
|||
if( !module.is.active() ) { |
|||
module.debug('Dimmer is not visible cannot hide'); |
|||
return; |
|||
} |
|||
module.debug('Hiding dimmer'); |
|||
if(settings.closable) { |
|||
$dimmer |
|||
.off('click' + eventNamespace) |
|||
; |
|||
} |
|||
$dimmable.dimmer('hide', function() { |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$module |
|||
.transition('reset') |
|||
; |
|||
module.remove.screenHeight(); |
|||
} |
|||
module.remove.active(); |
|||
}); |
|||
}, |
|||
|
|||
hideModal: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( !module.is.active() ) { |
|||
module.debug('Cannot hide modal it is not active'); |
|||
return; |
|||
} |
|||
module.debug('Hiding modal'); |
|||
module.remove.keyboardShortcuts(); |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$module |
|||
.transition(settings.transition + ' out', settings.duration, function() { |
|||
module.remove.active(); |
|||
module.restore.focus(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.fadeOut(settings.duration, settings.easing, function() { |
|||
module.remove.active(); |
|||
module.restore.focus(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
$.proxy(settings.onHide, element)(); |
|||
}, |
|||
|
|||
hideAll: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( $allModals.is(':visible') ) { |
|||
module.debug('Hiding all visible modals'); |
|||
module.hideDimmer(); |
|||
$allModals |
|||
.filter(':visible') |
|||
.modal('hide modal', callback) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
hideOthers: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
if( $otherModals.is(':visible') ) { |
|||
module.debug('Hiding other modals'); |
|||
$otherModals |
|||
.filter(':visible') |
|||
.modal('hide modal', callback) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
add: { |
|||
keyboardShortcuts: function() { |
|||
module.verbose('Adding keyboard shortcuts'); |
|||
$document |
|||
.on('keyup' + eventNamespace, module.event.keyboard) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
save: { |
|||
focus: function() { |
|||
$focusedElement = $(document.activeElement).blur(); |
|||
} |
|||
}, |
|||
|
|||
restore: { |
|||
focus: function() { |
|||
if($focusedElement && $focusedElement.size() > 0) { |
|||
$focusedElement.focus(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
active: function() { |
|||
$module.removeClass(className.active); |
|||
}, |
|||
screenHeight: function() { |
|||
if(module.cache.height > module.cache.pageHeight) { |
|||
module.debug('Removing page height'); |
|||
$body |
|||
.css('height', '') |
|||
; |
|||
} |
|||
}, |
|||
keyboardShortcuts: function() { |
|||
module.verbose('Removing keyboard shortcuts'); |
|||
$document |
|||
.off('keyup' + eventNamespace) |
|||
; |
|||
}, |
|||
scrolling: function() { |
|||
$dimmable.removeClass(className.scrolling); |
|||
$module.removeClass(className.scrolling); |
|||
} |
|||
}, |
|||
|
|||
cacheSizes: function() { |
|||
module.cache = { |
|||
pageHeight : $body.outerHeight(), |
|||
height : $module.outerHeight() + settings.offset, |
|||
contextHeight : (settings.context == 'body') |
|||
? $(window).height() |
|||
: $dimmable.height() |
|||
}; |
|||
module.debug('Caching modal and container sizes', module.cache); |
|||
}, |
|||
|
|||
can: { |
|||
fit: function() { |
|||
return (module.cache.height < module.cache.contextHeight); |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
active: function() { |
|||
return $module.hasClass(className.active); |
|||
}, |
|||
modernBrowser: function() { |
|||
// appName for IE11 reports 'Netscape' can no longer use
|
|||
return !(window.ActiveXObject || "ActiveXObject" in window); |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
screenHeight: function() { |
|||
if(module.cache.height > module.cache.pageHeight) { |
|||
module.debug('Modal is taller than page content, resizing page height'); |
|||
$body |
|||
.css('height', module.cache.height + settings.padding) |
|||
; |
|||
} |
|||
}, |
|||
active: function() { |
|||
module.add.keyboardShortcuts(); |
|||
module.save.focus(); |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
if(settings.closable) { |
|||
$dimmer |
|||
.off('click' + eventNamespace) |
|||
.on('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
}, |
|||
scrolling: function() { |
|||
$dimmable.addClass(className.scrolling); |
|||
$module.addClass(className.scrolling); |
|||
}, |
|||
type: function() { |
|||
if(module.can.fit()) { |
|||
module.verbose('Modal fits on screen'); |
|||
module.remove.scrolling(); |
|||
} |
|||
else { |
|||
module.verbose('Modal cannot fit on screen setting to scrolling'); |
|||
module.set.scrolling(); |
|||
} |
|||
}, |
|||
position: function() { |
|||
module.verbose('Centering modal on page', module.cache); |
|||
if(module.can.fit()) { |
|||
$module |
|||
.css({ |
|||
top: '', |
|||
marginTop: -(module.cache.height / 2) |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.css({ |
|||
marginTop : '1em', |
|||
top : $document.scrollTop() |
|||
}) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.modal.settings = { |
|||
|
|||
name : 'Modal', |
|||
namespace : 'modal', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
allowMultiple : true, |
|||
detachable : true, |
|||
closable : true, |
|||
context : 'body', |
|||
|
|||
duration : 500, |
|||
easing : 'easeOutExpo', |
|||
offset : 0, |
|||
transition : 'scale', |
|||
|
|||
padding : 30, |
|||
|
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
onApprove : function(){ return true; }, |
|||
onDeny : function(){ return true; }, |
|||
|
|||
selector : { |
|||
close : '.close, .actions .button', |
|||
approve : '.actions .positive, .actions .approve, .actions .ok', |
|||
deny : '.actions .negative, .actions .deny, .actions .cancel', |
|||
modal : '.ui.modal' |
|||
}, |
|||
error : { |
|||
dimmer : 'UI Dimmer, a required component is not included in this page', |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
className : { |
|||
active : 'active', |
|||
scrolling : 'scrolling' |
|||
} |
|||
}; |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,297 +0,0 @@ |
|||
/* |
|||
* # Semantic - Modal |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Modal |
|||
*******************************/ |
|||
|
|||
.ui.modal { |
|||
display: none; |
|||
position: fixed; |
|||
z-index: 1001; |
|||
|
|||
top: 50%; |
|||
left: 50%; |
|||
text-align: left; |
|||
|
|||
width: 90%; |
|||
margin-left: -45%; |
|||
|
|||
background-color: #FFFFFF; |
|||
border: 1px solid #DDDDDD; |
|||
|
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
|
|||
-webkit-user-select: text; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Close |
|||
---------------*/ |
|||
|
|||
.ui.modal > .close { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
z-index: 1; |
|||
|
|||
opacity: 0.8; |
|||
|
|||
font-size: 1.25em; |
|||
top: -1.75em; |
|||
right: -1.75em; |
|||
|
|||
color: #FFFFFF; |
|||
} |
|||
.ui.modal > .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------- |
|||
Header |
|||
---------------*/ |
|||
|
|||
.ui.modal > .header { |
|||
margin: 0em; |
|||
padding: 1.5rem 2rem; |
|||
|
|||
font-size: 1.6em; |
|||
font-weight: bold; |
|||
|
|||
-webkit-border-radius: 0.325em 0.325em 0px 0px; |
|||
-moz-border-radius: 0.325em 0.325em 0px 0px; |
|||
border-radius: 0.325em 0.325em 0px 0px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.modal > .content { |
|||
display: table; |
|||
width: 100%; |
|||
position: relative; |
|||
padding: 2em; |
|||
background-color: #F4F4F4; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
.ui.modal > .content > .left:not(.ui) { |
|||
display: table-cell; |
|||
padding-right: 1.5%; |
|||
min-width: 25%; |
|||
} |
|||
.ui.modal > .content > .right:not(.ui) { |
|||
display: table-cell; |
|||
padding-left: 1.5%; |
|||
vertical-align: top; |
|||
} |
|||
/*rtl:ignore*/ |
|||
.ui.modal > .content > .left:not(.ui) > i.icon { |
|||
font-size: 8em; |
|||
margin: 0em; |
|||
} |
|||
.ui.modal > .content p { |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
/*-------------- |
|||
Actions |
|||
---------------*/ |
|||
|
|||
.ui.modal .actions { |
|||
padding: 1rem 2rem; |
|||
text-align: right; |
|||
} |
|||
.ui.modal .actions > .button { |
|||
margin-left: 0.75em; |
|||
} |
|||
|
|||
/*------------------- |
|||
Sizing |
|||
--------------------*/ |
|||
|
|||
/* Mobile Only */ |
|||
@media only screen and (max-width : 768px) { |
|||
/*rtl:ignore*/ |
|||
.ui.modal .content > .left:not(.ui) { |
|||
display: block; |
|||
padding: 0em 0em 1em; |
|||
} |
|||
/*rtl:ignore*/ |
|||
.ui.modal .content > .right:not(.ui) { |
|||
display: block; |
|||
padding: 1em 0em 0em; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.modal .content .image { |
|||
width: auto !important; |
|||
max-width: 100%; |
|||
} |
|||
.ui.modal .actions { |
|||
padding-bottom: 0em |
|||
} |
|||
.ui.modal .actions > .buttons, |
|||
.ui.modal .actions > .button { |
|||
margin-bottom: 1em; |
|||
} |
|||
} |
|||
/* Tablet and Mobile */ |
|||
@media only screen and (max-width : 998px) { |
|||
.ui.modal { |
|||
width: 92%; |
|||
margin-left: -46%; |
|||
} |
|||
.ui.modal > .close { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
top: 1.5rem; |
|||
right: 1rem; |
|||
} |
|||
} |
|||
/* Computer / Responsive */ |
|||
@media only screen and (min-width : 998px) { |
|||
.ui.modal { |
|||
width: 74%; |
|||
margin-left: -37%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1500px) { |
|||
.ui.modal { |
|||
width: 56%; |
|||
margin-left: -28%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1750px) { |
|||
.ui.modal { |
|||
width: 42%; |
|||
margin-left: -21%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 2000px) { |
|||
.ui.modal { |
|||
width: 36%; |
|||
margin-left: -18%; |
|||
} |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.basic.modal { |
|||
background-color: transparent; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.basic.modal > .close { |
|||
top: 1.5rem; |
|||
right: 1rem; |
|||
} |
|||
.ui.basic.modal .content { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/* A modal that cannot fit on the page */ |
|||
.ui.modal.scrolling { |
|||
position: absolute; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.modal { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
/* Small */ |
|||
.ui.small.modal > .header { |
|||
font-size: 1.3em; |
|||
} |
|||
@media only screen and (min-width : 998px) { |
|||
.ui.small.modal { |
|||
width: 58%; |
|||
margin-left: -29%; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width : 1500px) { |
|||
.ui.small.modal { |
|||
width: 40%; |
|||
margin-left: -20%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1750px) { |
|||
.ui.small.modal { |
|||
width: 26%; |
|||
margin-left: -13%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 2000px) { |
|||
.ui.small.modal { |
|||
width: 20%; |
|||
margin-left: -10%; |
|||
} |
|||
} |
|||
|
|||
/* Large */ |
|||
@media only screen and (min-width : 998px) { |
|||
.ui.large.modal { |
|||
width: 74%; |
|||
margin-left: -37%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1500px) { |
|||
.ui.large.modal { |
|||
width: 64%; |
|||
margin-left: -32%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 1750px) { |
|||
.ui.large.modal { |
|||
width: 54%; |
|||
margin-left: -27%; |
|||
} |
|||
} |
|||
@media only screen and (min-width : 2000px) { |
|||
.ui.large.modal { |
|||
width: 44%; |
|||
margin-left: -22%; |
|||
} |
|||
} |
|||
@ -1,543 +0,0 @@ |
|||
/* |
|||
* # Semantic - Nag |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.nag = 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 |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.nag.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
namespace = settings.namespace, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = namespace + '-module', |
|||
|
|||
$module = $(this), |
|||
|
|||
$close = $module.find(selector.close), |
|||
$context = $(settings.context), |
|||
|
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
moduleOffset, |
|||
moduleHeight, |
|||
|
|||
contextWidth, |
|||
contextHeight, |
|||
contextOffset, |
|||
|
|||
yOffset, |
|||
yPosition, |
|||
|
|||
timer, |
|||
module, |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); } |
|||
; |
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing element'); |
|||
// calculate module offset once
|
|||
moduleOffset = $module.offset(); |
|||
moduleHeight = $module.outerHeight(); |
|||
contextWidth = $context.outerWidth(); |
|||
contextHeight = $context.outerHeight(); |
|||
contextOffset = $context.offset(); |
|||
|
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
$close |
|||
.on('click' + eventNamespace, module.dismiss) |
|||
; |
|||
// lets avoid javascript if we dont need to reposition
|
|||
if(settings.context == window && settings.position == 'fixed') { |
|||
$module |
|||
.addClass(className.fixed) |
|||
; |
|||
} |
|||
if(settings.sticky) { |
|||
module.verbose('Adding scroll events'); |
|||
// retrigger on scroll for absolute
|
|||
if(settings.position == 'absolute') { |
|||
$context |
|||
.on('scroll' + eventNamespace, module.event.scroll) |
|||
.on('resize' + eventNamespace, module.event.scroll) |
|||
; |
|||
} |
|||
// fixed is always relative to window
|
|||
else { |
|||
$(window) |
|||
.on('scroll' + eventNamespace, module.event.scroll) |
|||
.on('resize' + eventNamespace, module.event.scroll) |
|||
; |
|||
} |
|||
// fire once to position on init
|
|||
$.proxy(module.event.scroll, this)(); |
|||
} |
|||
|
|||
if(settings.displayTime > 0) { |
|||
setTimeout(module.hide, settings.displayTime); |
|||
} |
|||
if(module.should.show()) { |
|||
if( !$module.is(':visible') ) { |
|||
module.show(); |
|||
} |
|||
} |
|||
else { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying instance'); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
if(settings.sticky) { |
|||
$context |
|||
.off(eventNamespace) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.debug('Refreshing cached calculations'); |
|||
moduleOffset = $module.offset(); |
|||
moduleHeight = $module.outerHeight(); |
|||
contextWidth = $context.outerWidth(); |
|||
contextHeight = $context.outerHeight(); |
|||
contextOffset = $context.offset(); |
|||
}, |
|||
|
|||
show: function() { |
|||
module.debug('Showing nag', settings.animation.show); |
|||
if(settings.animation.show == 'fade') { |
|||
$module |
|||
.fadeIn(settings.duration, settings.easing) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.slideDown(settings.duration, settings.easing) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
hide: function() { |
|||
module.debug('Showing nag', settings.animation.hide); |
|||
if(settings.animation.show == 'fade') { |
|||
$module |
|||
.fadeIn(settings.duration, settings.easing) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.slideUp(settings.duration, settings.easing) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
onHide: function() { |
|||
module.debug('Removing nag', settings.animation.hide); |
|||
$module.remove(); |
|||
if (settings.onHide) { |
|||
settings.onHide(); |
|||
} |
|||
}, |
|||
|
|||
stick: function() { |
|||
module.refresh(); |
|||
|
|||
if(settings.position == 'fixed') { |
|||
var |
|||
windowScroll = $(window).prop('pageYOffset') || $(window).scrollTop(), |
|||
fixedOffset = ( $module.hasClass(className.bottom) ) |
|||
? contextOffset.top + (contextHeight - moduleHeight) - windowScroll |
|||
: contextOffset.top - windowScroll |
|||
; |
|||
$module |
|||
.css({ |
|||
position : 'fixed', |
|||
top : fixedOffset, |
|||
left : contextOffset.left, |
|||
width : contextWidth - settings.scrollBarWidth |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.css({ |
|||
top : yPosition |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
unStick: function() { |
|||
$module |
|||
.css({ |
|||
top : '' |
|||
}) |
|||
; |
|||
}, |
|||
dismiss: function(event) { |
|||
if(settings.storageMethod) { |
|||
module.storage.set(settings.storedKey, settings.storedValue); |
|||
} |
|||
module.hide(); |
|||
event.stopImmediatePropagation(); |
|||
event.preventDefault(); |
|||
}, |
|||
|
|||
should: { |
|||
show: function() { |
|||
if(settings.persist) { |
|||
module.debug('Persistent nag is set, can show nag'); |
|||
return true; |
|||
} |
|||
if(module.storage.get(settings.storedKey) != settings.storedValue) { |
|||
module.debug('Stored value is not set, can show nag', module.storage.get(settings.storedKey)); |
|||
return true; |
|||
} |
|||
module.debug('Stored value is set, cannot show nag', module.storage.get(settings.storedKey)); |
|||
return false; |
|||
}, |
|||
stick: function() { |
|||
yOffset = $context.prop('pageYOffset') || $context.scrollTop(); |
|||
yPosition = ( $module.hasClass(className.bottom) ) |
|||
? (contextHeight - $module.outerHeight() ) + yOffset |
|||
: yOffset |
|||
; |
|||
// absolute position calculated when y offset met
|
|||
if(yPosition > moduleOffset.top) { |
|||
return true; |
|||
} |
|||
else if(settings.position == 'fixed') { |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
}, |
|||
|
|||
storage: { |
|||
|
|||
set: function(key, value) { |
|||
module.debug('Setting stored value', key, value, settings.storageMethod); |
|||
if(settings.storageMethod == 'local' && window.store !== undefined) { |
|||
window.store.set(key, value); |
|||
} |
|||
// store by cookie
|
|||
else if($.cookie !== undefined) { |
|||
$.cookie(key, value); |
|||
} |
|||
else { |
|||
module.error(error.noStorage); |
|||
} |
|||
}, |
|||
get: function(key) { |
|||
module.debug('Getting stored value', key, settings.storageMethod); |
|||
if(settings.storageMethod == 'local' && window.store !== undefined) { |
|||
return window.store.get(key); |
|||
} |
|||
// get by cookie
|
|||
else if($.cookie !== undefined) { |
|||
return $.cookie(key); |
|||
} |
|||
else { |
|||
module.error(error.noStorage); |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
event: { |
|||
scroll: function() { |
|||
if(timer !== undefined) { |
|||
clearTimeout(timer); |
|||
} |
|||
timer = setTimeout(function() { |
|||
if(module.should.stick() ) { |
|||
requestAnimationFrame(module.stick); |
|||
} |
|||
else { |
|||
module.unStick(); |
|||
} |
|||
}, settings.lag); |
|||
} |
|||
}, |
|||
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) { |
|||
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.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
|
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.nag.settings = { |
|||
|
|||
name : 'Nag', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
namespace : 'Nag', |
|||
|
|||
// allows cookie to be overriden
|
|||
persist : false, |
|||
|
|||
// set to zero to manually dismiss, otherwise hides on its own
|
|||
displayTime : 0, |
|||
|
|||
animation : { |
|||
show: 'slide', |
|||
hide: 'slide' |
|||
}, |
|||
|
|||
// method of stickyness
|
|||
position : 'fixed', |
|||
scrollBarWidth : 18, |
|||
|
|||
// type of storage to use
|
|||
storageMethod : 'cookie', |
|||
|
|||
// value to store in dismissed localstorage/cookie
|
|||
storedKey : 'nag', |
|||
storedValue : 'dismiss', |
|||
|
|||
// need to calculate stickyness on scroll
|
|||
sticky : false, |
|||
|
|||
// how often to check scroll event
|
|||
lag : 0, |
|||
|
|||
// context for scroll event
|
|||
context : window, |
|||
|
|||
error: { |
|||
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state', |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
className : { |
|||
bottom : 'bottom', |
|||
fixed : 'fixed' |
|||
}, |
|||
|
|||
selector : { |
|||
close: '.icon.close' |
|||
}, |
|||
|
|||
speed : 500, |
|||
easing : 'easeOutQuad', |
|||
|
|||
onHide: function() {} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,173 +0,0 @@ |
|||
/* |
|||
* # Semantic - Nag |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Nag |
|||
*******************************/ |
|||
|
|||
.ui.nag { |
|||
display: none; |
|||
opacity: 0.95; |
|||
|
|||
position: relative; |
|||
top: 0px; |
|||
left: 0%; |
|||
z-index: 101; |
|||
|
|||
min-height: 0; |
|||
width: 100%; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
margin: 0em; |
|||
line-height: 3em; |
|||
padding: 0em 1em; |
|||
|
|||
background-color: #555555; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
-moz-box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
box-shadow: |
|||
0px 1px 2px 0px rgba(0, 0, 0, 0.2) |
|||
; |
|||
|
|||
font-size: 1em; |
|||
text-align: center; |
|||
color: rgba(255, 255, 255, 0.8); |
|||
|
|||
-webkit-border-radius: 0px 0px 5px 5px; |
|||
-moz-border-radius: 0px 0px 5px 5px; |
|||
border-radius: 0px 0px 5px 5px; |
|||
|
|||
-webkit-transition: 0.2s background; |
|||
-moz-transition: 0.2s background; |
|||
-o-transition: 0.2s background; |
|||
-ms-transition: 0.2s background; |
|||
transition: 0.2s background; |
|||
} |
|||
|
|||
a.ui.nag { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.nag > .title { |
|||
display: inline-block; |
|||
margin: 0em 0.5em; |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
.ui.nag > .close.icon { |
|||
cursor: pointer; |
|||
opacity: 0.4; |
|||
|
|||
position: absolute; |
|||
top: 50%; |
|||
right: 1em; |
|||
|
|||
margin-top: -0.5em; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-transition: 0.1s opacity; |
|||
-moz-transition: 0.1s opacity; |
|||
-o-transition: 0.1s opacity; |
|||
-ms-transition: 0.1s opacity; |
|||
transition: 0.1s opacity; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/* Hover */ |
|||
.ui.nag:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.ui.nag .close:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Static |
|||
---------------*/ |
|||
|
|||
.ui.overlay.nag { |
|||
position: absolute; |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fixed |
|||
---------------*/ |
|||
|
|||
.ui.fixed.nag { |
|||
position: fixed; |
|||
} |
|||
|
|||
/*-------------- |
|||
Bottom |
|||
---------------*/ |
|||
|
|||
.ui.bottom.nag { |
|||
-webkit-border-radius: 5px 5px 0px 0px; |
|||
-moz-border-radius: 5px 5px 0px 0px; |
|||
border-radius: 5px 5px 0px 0px; |
|||
} |
|||
.ui.fixed.bottom.nags, |
|||
.ui.fixed.bottom.nag { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
White |
|||
---------------*/ |
|||
|
|||
.ui.white.nags .nag, |
|||
.ui.white.nag { |
|||
background-color: #F1F1F1; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
color: #ACACAC; |
|||
} |
|||
.ui.white.nags .nag .close, |
|||
.ui.white.nags .nag .title, |
|||
.ui.white.nag .close, |
|||
.ui.white.nag .title { |
|||
color: #333333; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Groups |
|||
*******************************/ |
|||
|
|||
.ui.nags .nag { |
|||
-webkit-border-radius: 0px; |
|||
-moz-border-radius: 0px; |
|||
border-radius: 0px; |
|||
} |
|||
@ -1,862 +0,0 @@ |
|||
/* |
|||
* # Semantic - Popup |
|||
* http://github.com/jlukic/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.popup = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
$document = $(document), |
|||
|
|||
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 = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.popup.settings, parameters) |
|||
: $.extend({}, $.fn.popup.settings), |
|||
|
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
error = settings.error, |
|||
metadata = settings.metadata, |
|||
namespace = settings.namespace, |
|||
|
|||
eventNamespace = '.' + settings.namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$context = $(settings.context), |
|||
$target = (settings.target) |
|||
? $(settings.target) |
|||
: $module, |
|||
|
|||
$window = $(window), |
|||
|
|||
$offsetParent = (settings.inline) |
|||
? $target.offsetParent() |
|||
: $window, |
|||
$popup = (settings.inline) |
|||
? $target.next(settings.selector.popup) |
|||
: $window.children(settings.selector.popup).last(), |
|||
|
|||
searchDepth = 0, |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
// binds events
|
|||
initialize: function() { |
|||
module.debug('Initializing module', $module); |
|||
if(settings.on == 'click') { |
|||
$module |
|||
.on('click', module.toggle) |
|||
; |
|||
} |
|||
else { |
|||
$module |
|||
.on(module.get.startEvent() + eventNamespace, module.event.start) |
|||
.on(module.get.endEvent() + eventNamespace, module.event.end) |
|||
; |
|||
} |
|||
if(settings.target) { |
|||
module.debug('Target set to element', $target); |
|||
} |
|||
$window |
|||
.on('resize' + eventNamespace, module.event.resize) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
if(settings.inline) { |
|||
$popup = $target.next(selector.popup); |
|||
$offsetParent = $target.offsetParent(); |
|||
} |
|||
else { |
|||
$popup = $window.children(selector.popup).last(); |
|||
} |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.debug('Destroying previous module'); |
|||
$window |
|||
.off(eventNamespace) |
|||
; |
|||
$popup |
|||
.remove() |
|||
; |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
start: function(event) { |
|||
module.timer = setTimeout(function() { |
|||
if( module.is.hidden() ) { |
|||
module.show(); |
|||
} |
|||
}, settings.delay); |
|||
}, |
|||
end: function() { |
|||
clearTimeout(module.timer); |
|||
if( module.is.visible() ) { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
resize: function() { |
|||
if( module.is.visible() ) { |
|||
module.set.position(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// generates popup html from metadata
|
|||
create: function() { |
|||
module.debug('Creating pop-up html'); |
|||
var |
|||
html = $module.data(metadata.html) || settings.html, |
|||
variation = $module.data(metadata.variation) || settings.variation, |
|||
title = $module.data(metadata.title) || settings.title, |
|||
content = $module.data(metadata.content) || $module.attr('title') || settings.content |
|||
; |
|||
if(html || content || title) { |
|||
if(!html) { |
|||
html = settings.template({ |
|||
title : title, |
|||
content : content |
|||
}); |
|||
} |
|||
$popup = $('<div/>') |
|||
.addClass(className.popup) |
|||
.addClass(variation) |
|||
.html(html) |
|||
; |
|||
if(settings.inline) { |
|||
module.verbose('Inserting popup element inline', $popup); |
|||
$popup |
|||
.insertAfter($module) |
|||
; |
|||
} |
|||
else { |
|||
module.verbose('Appending popup element to body', $popup); |
|||
$popup |
|||
.appendTo( $context ) |
|||
; |
|||
} |
|||
$.proxy(settings.onCreate, $popup)(); |
|||
} |
|||
else { |
|||
module.error(error.content); |
|||
} |
|||
}, |
|||
|
|||
// determines popup state
|
|||
toggle: function() { |
|||
module.debug('Toggling pop-up'); |
|||
if( module.is.hidden() ) { |
|||
module.debug('Popup is hidden, showing pop-up'); |
|||
module.unbind.close(); |
|||
module.hideAll(); |
|||
module.show(); |
|||
} |
|||
else { |
|||
module.debug('Popup is visible, hiding pop-up'); |
|||
module.hide(); |
|||
} |
|||
}, |
|||
|
|||
show: function(callback) { |
|||
callback = callback || function(){}; |
|||
module.debug('Showing pop-up', settings.transition); |
|||
if(!settings.preserve) { |
|||
module.refresh(); |
|||
} |
|||
if( !module.exists() ) { |
|||
module.create(); |
|||
} |
|||
if( module.set.position() ) { |
|||
module.save.conditions(); |
|||
module.animate.show(callback); |
|||
} |
|||
}, |
|||
|
|||
|
|||
hide: function(callback) { |
|||
callback = callback || function(){}; |
|||
$module |
|||
.removeClass(className.visible) |
|||
; |
|||
module.unbind.close(); |
|||
if( module.is.visible() ) { |
|||
module.restore.conditions(); |
|||
module.animate.hide(callback); |
|||
} |
|||
}, |
|||
|
|||
hideAll: function() { |
|||
$(selector.popup) |
|||
.filter(':visible') |
|||
.popup('hide') |
|||
; |
|||
}, |
|||
|
|||
hideGracefully: function(event) { |
|||
// don't close on clicks inside popup
|
|||
if(event && $(event.target).closest(selector.popup).size() === 0) { |
|||
module.debug('Click occurred outside popup hiding popup'); |
|||
module.hide(); |
|||
} |
|||
else { |
|||
module.debug('Click was inside popup, keeping popup open'); |
|||
} |
|||
}, |
|||
|
|||
exists: function() { |
|||
if(settings.inline) { |
|||
return ( $popup.size() !== 0 ); |
|||
} |
|||
else { |
|||
return ( $popup.parent($context).size() ); |
|||
} |
|||
}, |
|||
|
|||
remove: function() { |
|||
module.debug('Removing popup'); |
|||
$popup |
|||
.remove() |
|||
; |
|||
}, |
|||
|
|||
save: { |
|||
conditions: function() { |
|||
module.cache = { |
|||
title: $module.attr('title') |
|||
}; |
|||
if (module.cache.title) { |
|||
$module.removeAttr('title'); |
|||
} |
|||
module.verbose('Saving original attributes', module.cache.title); |
|||
} |
|||
}, |
|||
restore: { |
|||
conditions: function() { |
|||
if(module.cache && module.cache.title) { |
|||
$module.attr('title', module.cache.title); |
|||
} |
|||
module.verbose('Restoring original attributes', module.cache.title); |
|||
return true; |
|||
} |
|||
}, |
|||
animate: { |
|||
show: function(callback) { |
|||
callback = callback || function(){}; |
|||
$module |
|||
.addClass(className.visible) |
|||
; |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$popup |
|||
.transition(settings.transition + ' in', settings.duration, function() { |
|||
module.bind.close(); |
|||
$.proxy(callback, element)(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$popup |
|||
.stop() |
|||
.fadeIn(settings.duration, settings.easing, function() { |
|||
module.bind.close(); |
|||
$.proxy(callback, element)(); |
|||
}) |
|||
; |
|||
} |
|||
$.proxy(settings.onShow, element)(); |
|||
}, |
|||
hide: function(callback) { |
|||
callback = callback || function(){}; |
|||
module.debug('Hiding pop-up'); |
|||
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { |
|||
$popup |
|||
.transition(settings.transition + ' out', settings.duration, function() { |
|||
module.reset(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
else { |
|||
$popup |
|||
.stop() |
|||
.fadeOut(settings.duration, settings.easing, function() { |
|||
module.reset(); |
|||
callback(); |
|||
}) |
|||
; |
|||
} |
|||
$.proxy(settings.onHide, element)(); |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
startEvent: function() { |
|||
if(settings.on == 'hover') { |
|||
return 'mouseenter'; |
|||
} |
|||
else if(settings.on == 'focus') { |
|||
return 'focus'; |
|||
} |
|||
}, |
|||
endEvent: function() { |
|||
if(settings.on == 'hover') { |
|||
return 'mouseleave'; |
|||
} |
|||
else if(settings.on == 'focus') { |
|||
return 'blur'; |
|||
} |
|||
}, |
|||
offstagePosition: function() { |
|||
var |
|||
boundary = { |
|||
top : $(window).scrollTop(), |
|||
bottom : $(window).scrollTop() + $(window).height(), |
|||
left : 0, |
|||
right : $(window).width() |
|||
}, |
|||
popup = { |
|||
width : $popup.width(), |
|||
height : $popup.outerHeight(), |
|||
position : $popup.offset() |
|||
}, |
|||
offstage = {}, |
|||
offstagePositions = [] |
|||
; |
|||
if(popup.position) { |
|||
offstage = { |
|||
top : (popup.position.top < boundary.top), |
|||
bottom : (popup.position.top + popup.height > boundary.bottom), |
|||
right : (popup.position.left + popup.width > boundary.right), |
|||
left : (popup.position.left < boundary.left) |
|||
}; |
|||
} |
|||
module.verbose('Checking if outside viewable area', popup.position); |
|||
// return only boundaries that have been surpassed
|
|||
$.each(offstage, function(direction, isOffstage) { |
|||
if(isOffstage) { |
|||
offstagePositions.push(direction); |
|||
} |
|||
}); |
|||
return (offstagePositions.length > 0) |
|||
? offstagePositions.join(' ') |
|||
: false |
|||
; |
|||
}, |
|||
nextPosition: function(position) { |
|||
switch(position) { |
|||
case 'top left': |
|||
position = 'bottom left'; |
|||
break; |
|||
case 'bottom left': |
|||
position = 'top right'; |
|||
break; |
|||
case 'top right': |
|||
position = 'bottom right'; |
|||
break; |
|||
case 'bottom right': |
|||
position = 'top center'; |
|||
break; |
|||
case 'top center': |
|||
position = 'bottom center'; |
|||
break; |
|||
case 'bottom center': |
|||
position = 'right center'; |
|||
break; |
|||
case 'right center': |
|||
position = 'left center'; |
|||
break; |
|||
case 'left center': |
|||
position = 'top center'; |
|||
break; |
|||
} |
|||
return position; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
position: function(position, arrowOffset) { |
|||
var |
|||
windowWidth = $(window).width(), |
|||
windowHeight = $(window).height(), |
|||
|
|||
width = $target.outerWidth(), |
|||
height = $target.outerHeight(), |
|||
|
|||
popupWidth = $popup.width(), |
|||
popupHeight = $popup.outerHeight(), |
|||
|
|||
parentWidth = $offsetParent.outerWidth(), |
|||
parentHeight = $offsetParent.outerHeight(), |
|||
|
|||
distanceAway = settings.distanceAway, |
|||
|
|||
offset = (settings.inline) |
|||
? $target.position() |
|||
: $target.offset(), |
|||
|
|||
positioning, |
|||
offstagePosition |
|||
; |
|||
position = position || $module.data(metadata.position) || settings.position; |
|||
arrowOffset = arrowOffset || $module.data(metadata.offset) || settings.offset; |
|||
// adjust for margin when inline
|
|||
if(settings.inline) { |
|||
if(position == 'left center' || position == 'right center') { |
|||
arrowOffset += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10); |
|||
distanceAway += -parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10); |
|||
} |
|||
else { |
|||
arrowOffset += parseInt( window.getComputedStyle(element).getPropertyValue('margin-left'), 10); |
|||
distanceAway += parseInt( window.getComputedStyle(element).getPropertyValue('margin-top'), 10); |
|||
} |
|||
} |
|||
module.debug('Calculating offset for position', position); |
|||
switch(position) { |
|||
case 'top left': |
|||
positioning = { |
|||
bottom : parentHeight - offset.top + distanceAway, |
|||
right : parentWidth - offset.left - arrowOffset, |
|||
top : 'auto', |
|||
left : 'auto' |
|||
}; |
|||
break; |
|||
case 'top center': |
|||
positioning = { |
|||
bottom : parentHeight - offset.top + distanceAway, |
|||
left : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset, |
|||
top : 'auto', |
|||
right : 'auto' |
|||
}; |
|||
break; |
|||
case 'top right': |
|||
positioning = { |
|||
top : 'auto', |
|||
bottom : parentHeight - offset.top + distanceAway, |
|||
left : offset.left + width + arrowOffset, |
|||
right : 'auto' |
|||
}; |
|||
break; |
|||
case 'left center': |
|||
positioning = { |
|||
top : offset.top + (height / 2) - (popupHeight / 2) + arrowOffset, |
|||
right : parentWidth - offset.left + distanceAway, |
|||
left : 'auto', |
|||
bottom : 'auto' |
|||
}; |
|||
break; |
|||
case 'right center': |
|||
positioning = { |
|||
top : offset.top + (height / 2) - (popupHeight / 2) + arrowOffset, |
|||
left : offset.left + width + distanceAway, |
|||
bottom : 'auto', |
|||
right : 'auto' |
|||
}; |
|||
break; |
|||
case 'bottom left': |
|||
positioning = { |
|||
top : offset.top + height + distanceAway, |
|||
right : parentWidth - offset.left - arrowOffset, |
|||
left : 'auto', |
|||
bottom : 'auto' |
|||
}; |
|||
break; |
|||
case 'bottom center': |
|||
positioning = { |
|||
top : offset.top + height + distanceAway, |
|||
left : offset.left + (width / 2) - (popupWidth / 2) + arrowOffset, |
|||
bottom : 'auto', |
|||
right : 'auto' |
|||
}; |
|||
break; |
|||
case 'bottom right': |
|||
positioning = { |
|||
top : offset.top + height + distanceAway, |
|||
left : offset.left + width + arrowOffset, |
|||
bottom : 'auto', |
|||
right : 'auto' |
|||
}; |
|||
break; |
|||
} |
|||
// tentatively place on stage
|
|||
$popup |
|||
.css(positioning) |
|||
.removeClass(className.position) |
|||
.addClass(position) |
|||
.addClass(className.loading) |
|||
; |
|||
// check if is offstage
|
|||
offstagePosition = module.get.offstagePosition(); |
|||
|
|||
// recursively find new positioning
|
|||
if(offstagePosition) { |
|||
module.debug('Element is outside boundaries', offstagePosition); |
|||
if(searchDepth < settings.maxSearchDepth) { |
|||
position = module.get.nextPosition(position); |
|||
searchDepth++; |
|||
module.debug('Trying new position', position); |
|||
return module.set.position(position); |
|||
} |
|||
else { |
|||
module.error(error.recursion); |
|||
searchDepth = 0; |
|||
module.reset(); |
|||
$popup.removeClass(className.loading); |
|||
return false; |
|||
} |
|||
} |
|||
else { |
|||
module.debug('Position is on stage', position); |
|||
searchDepth = 0; |
|||
$popup.removeClass(className.loading); |
|||
return true; |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
bind: { |
|||
close:function() { |
|||
if(settings.on == 'click' && settings.closable) { |
|||
module.verbose('Binding popup close event to document'); |
|||
$document |
|||
.on('click' + eventNamespace, function(event) { |
|||
module.verbose('Pop-up clickaway intent detected'); |
|||
$.proxy(module.hideGracefully, this)(event); |
|||
}) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
unbind: { |
|||
close: function() { |
|||
if(settings.on == 'click' && settings.closable) { |
|||
module.verbose('Removing close event from document'); |
|||
$document |
|||
.off('click' + eventNamespace) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
animating: function() { |
|||
return ( $popup.is(':animated') || $popup.hasClass(className.animating) ); |
|||
}, |
|||
visible: function() { |
|||
return $popup.is(':visible'); |
|||
}, |
|||
hidden: function() { |
|||
return !module.is.visible(); |
|||
} |
|||
}, |
|||
|
|||
reset: function() { |
|||
$popup |
|||
.removeClass(className.visible) |
|||
; |
|||
if(settings.preserve) { |
|||
if($.fn.transition !== undefined) { |
|||
$popup |
|||
.transition('remove transition') |
|||
; |
|||
} |
|||
} |
|||
else { |
|||
module.remove(); |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.popup.settings = { |
|||
|
|||
name : 'Popup', |
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
namespace : 'popup', |
|||
|
|||
onCreate : function(){}, |
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
|
|||
variation : '', |
|||
content : false, |
|||
html : false, |
|||
title : false, |
|||
|
|||
on : 'hover', |
|||
target : false, |
|||
closable : true, |
|||
|
|||
context : 'body', |
|||
position : 'top center', |
|||
delay : 150, |
|||
inline : false, |
|||
preserve : false, |
|||
|
|||
duration : 250, |
|||
easing : 'easeOutQuint', |
|||
transition : 'scale', |
|||
|
|||
distanceAway : 0, |
|||
offset : 0, |
|||
maxSearchDepth : 10, |
|||
|
|||
error: { |
|||
content : 'Your popup has no content specified', |
|||
method : 'The method you called is not defined.', |
|||
recursion : 'Popup attempted to reposition element to fit, but could not find an adequate position.' |
|||
}, |
|||
|
|||
metadata: { |
|||
content : 'content', |
|||
html : 'html', |
|||
offset : 'offset', |
|||
position : 'position', |
|||
title : 'title', |
|||
variation : 'variation' |
|||
}, |
|||
|
|||
className : { |
|||
animating : 'animating', |
|||
loading : 'loading', |
|||
popup : 'ui popup', |
|||
position : 'top left center bottom right', |
|||
visible : 'visible' |
|||
}, |
|||
|
|||
selector : { |
|||
popup : '.ui.popup' |
|||
}, |
|||
|
|||
template: function(text) { |
|||
var html = ''; |
|||
if(typeof text !== undefined) { |
|||
if(typeof text.title !== undefined && text.title) { |
|||
html += '<div class="header">' + text.title + '</div class="header">'; |
|||
} |
|||
if(typeof text.content !== undefined && text.content) { |
|||
html += '<div class="content">' + text.content + '</div>'; |
|||
} |
|||
} |
|||
return html; |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,257 +0,0 @@ |
|||
/* |
|||
* # Semantic - Popup |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Popup |
|||
*******************************/ |
|||
|
|||
.ui.popup { |
|||
display: none; |
|||
position: absolute; |
|||
top: 0px; |
|||
right: 0px; |
|||
z-index: 900; |
|||
|
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
max-width: 250px; |
|||
background-color: #FFFFFF; |
|||
|
|||
padding: 0.8em 1.2em; |
|||
font-size: 0.875rem; |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
|
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
|
|||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.popup .header { |
|||
padding: 0em 0em 0.5em; |
|||
|
|||
font-size: 1.125em; |
|||
line-height: 1.2; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.ui.popup:before { |
|||
position: absolute; |
|||
content: ""; |
|||
width: 0.75em; |
|||
height: 0.75rem; |
|||
|
|||
background-image: none; |
|||
background-color: #FFFFFF; |
|||
|
|||
-webkit-transform: rotate(45deg); |
|||
-moz-transform: rotate(45deg); |
|||
transform: rotate(45deg); |
|||
|
|||
z-index: 2; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); |
|||
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.ui.popup .ui.button { |
|||
width: 100%; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Spacing |
|||
---------------*/ |
|||
|
|||
.ui.popup { |
|||
margin: 0em; |
|||
} |
|||
.ui.popup.bottom { |
|||
margin: 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.top { |
|||
margin: 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.left.center { |
|||
margin: 0em 0.75em 0em 0em; |
|||
} |
|||
.ui.popup.right.center { |
|||
margin: 0em 0em 0em 0.75em; |
|||
} |
|||
.ui.popup.center { |
|||
margin-left: -1.25em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Pointer |
|||
---------------*/ |
|||
|
|||
/*--- Below ---*/ |
|||
.ui.bottom.center.popup:before { |
|||
margin-left: -0.4em; |
|||
top: -0.4em; |
|||
left: 50%; |
|||
right: auto; |
|||
bottom: auto; |
|||
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.bottom.left.popup { |
|||
margin-right: -2em; |
|||
} |
|||
.ui.bottom.left.popup:before { |
|||
top: -0.4em; |
|||
right: 1em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.bottom.right.popup { |
|||
margin-left: -2em; |
|||
} |
|||
.ui.bottom.right.popup:before { |
|||
top: -0.4em; |
|||
left: 1em; |
|||
right: auto; |
|||
bottom: auto; |
|||
margin-left: 0em; |
|||
-webkit-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/*--- Above ---*/ |
|||
.ui.top.center.popup:before { |
|||
top: auto; |
|||
right: auto; |
|||
bottom: -0.4em; |
|||
left: 50%; |
|||
margin-left: -0.4em; |
|||
} |
|||
.ui.top.left.popup { |
|||
margin-right: -2em; |
|||
} |
|||
.ui.top.left.popup:before { |
|||
bottom: -0.4em; |
|||
right: 1em; |
|||
top: auto; |
|||
left: auto; |
|||
margin-left: 0em; |
|||
} |
|||
.ui.top.right.popup { |
|||
margin-left: -2em; |
|||
} |
|||
.ui.top.right.popup:before { |
|||
bottom: -0.4em; |
|||
left: 1em; |
|||
top: auto; |
|||
right: auto; |
|||
margin-left: 0em; |
|||
} |
|||
|
|||
/*--- Left Center ---*/ |
|||
.ui.left.center.popup:before { |
|||
top: 50%; |
|||
right: -0.35em; |
|||
bottom: auto; |
|||
left: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/*--- Right Center ---*/ |
|||
.ui.right.center.popup:before { |
|||
top: 50%; |
|||
left: -0.35em; |
|||
bottom: auto; |
|||
right: auto; |
|||
margin-top: -0.4em; |
|||
-moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.loading.popup { |
|||
display: block; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.ui.animating.popup, |
|||
.ui.visible.popup { |
|||
display: block; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Size |
|||
---------------*/ |
|||
|
|||
.ui.small.popup { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.large.popup { |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Colors |
|||
---------------*/ |
|||
|
|||
/* Inverted colors */ |
|||
.ui.inverted.popup { |
|||
background-color: #333333; |
|||
border: none; |
|||
color: #FFFFFF; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.ui.inverted.popup .header { |
|||
background-color: rgba(0, 0, 0, 0.2); |
|||
color: #FFFFFF; |
|||
} |
|||
.ui.inverted.popup:before { |
|||
background-color: #333333; |
|||
|
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
@ -1,407 +0,0 @@ |
|||
/* |
|||
* # Semantic - Rating |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.rating = 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 = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.rating.settings, parameters) |
|||
: $.extend({}, $.fn.rating.settings), |
|||
|
|||
namespace = settings.namespace, |
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
element = this, |
|||
instance = $(this).data(moduleNamespace), |
|||
|
|||
$module = $(this), |
|||
$icon = $module.find(selector.icon), |
|||
|
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing rating module', settings); |
|||
|
|||
if(settings.interactive) { |
|||
module.enable(); |
|||
} |
|||
else { |
|||
module.disable(); |
|||
} |
|||
|
|||
if(settings.initialRating) { |
|||
module.debug('Setting initial rating'); |
|||
module.setRating(settings.initialRating); |
|||
} |
|||
if( $module.data(metadata.rating) ) { |
|||
module.debug('Rating found in metadata'); |
|||
module.setRating( $module.data(metadata.rating) ); |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Instantiating module', settings); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous instance', instance); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
mouseenter: function() { |
|||
var |
|||
$activeIcon = $(this) |
|||
; |
|||
$activeIcon |
|||
.nextAll() |
|||
.removeClass(className.hover) |
|||
; |
|||
$module |
|||
.addClass(className.hover) |
|||
; |
|||
$activeIcon |
|||
.addClass(className.hover) |
|||
.prevAll() |
|||
.addClass(className.hover) |
|||
; |
|||
}, |
|||
mouseleave: function() { |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
; |
|||
}, |
|||
click: function() { |
|||
var |
|||
$activeIcon = $(this), |
|||
currentRating = module.getRating(), |
|||
rating = $icon.index($activeIcon) + 1 |
|||
; |
|||
if(settings.clearable && currentRating == rating) { |
|||
module.clearRating(); |
|||
} |
|||
else { |
|||
module.setRating( rating ); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
clearRating: function() { |
|||
module.debug('Clearing current rating'); |
|||
module.setRating(0); |
|||
}, |
|||
|
|||
getRating: function() { |
|||
var |
|||
currentRating = $icon.filter('.' + className.active).size() |
|||
; |
|||
module.verbose('Current rating retrieved', currentRating); |
|||
return currentRating; |
|||
}, |
|||
|
|||
enable: function() { |
|||
module.debug('Setting rating to interactive mode'); |
|||
$icon |
|||
.on('mouseenter' + eventNamespace, module.event.mouseenter) |
|||
.on('mouseleave' + eventNamespace, module.event.mouseleave) |
|||
.on('click' + eventNamespace, module.event.click) |
|||
; |
|||
$module |
|||
.removeClass(className.disabled) |
|||
; |
|||
}, |
|||
|
|||
disable: function() { |
|||
module.debug('Setting rating to read-only mode'); |
|||
$icon |
|||
.off(eventNamespace) |
|||
; |
|||
$module |
|||
.addClass(className.disabled) |
|||
; |
|||
}, |
|||
|
|||
setRating: function(rating) { |
|||
var |
|||
ratingIndex = (rating - 1 >= 0) |
|||
? (rating - 1) |
|||
: 0, |
|||
$activeIcon = $icon.eq(ratingIndex) |
|||
; |
|||
$module |
|||
.removeClass(className.hover) |
|||
; |
|||
$icon |
|||
.removeClass(className.hover) |
|||
.removeClass(className.active) |
|||
; |
|||
if(rating > 0) { |
|||
module.verbose('Setting current rating to', rating); |
|||
$activeIcon |
|||
.addClass(className.active) |
|||
.prevAll() |
|||
.addClass(className.active) |
|||
; |
|||
} |
|||
$.proxy(settings.onRate, element)(rating); |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.rating.settings = { |
|||
|
|||
name : 'Rating', |
|||
namespace : 'rating', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
initialRating : 0, |
|||
interactive : true, |
|||
clearable : false, |
|||
|
|||
onRate : function(rating){}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
metadata: { |
|||
rating: 'rating' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active', |
|||
disabled : 'disabled', |
|||
hover : 'hover', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
selector : { |
|||
icon : '.icon' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,179 +0,0 @@ |
|||
/* |
|||
* # Semantic - Rating |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Rating |
|||
*******************************/ |
|||
|
|||
.ui.rating { |
|||
display: inline-block; |
|||
|
|||
font-size: 0em; |
|||
vertical-align: middle; |
|||
margin: 0em 0.5rem 0em 0em; |
|||
} |
|||
.ui.rating:last-child { |
|||
margin-right: 0em; |
|||
} |
|||
|
|||
.ui.rating:before { |
|||
display: block; |
|||
content: ''; |
|||
visibility: hidden; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.rating .icon { |
|||
cursor: pointer; |
|||
|
|||
margin: 0em; |
|||
|
|||
width: 1em; |
|||
height: auto; |
|||
padding: 0em; |
|||
|
|||
color: rgba(0, 0, 0, 0.15); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
.ui.rating .icon:before { |
|||
content: "\2605"; |
|||
|
|||
-webkit-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
-o-transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
transition: |
|||
color 0.3s ease, |
|||
opacity 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Star |
|||
--------------------*/ |
|||
|
|||
.ui.star.rating .icon { |
|||
width: 1.2em; |
|||
} |
|||
|
|||
/* Star */ |
|||
.ui.star.rating .icon:before { |
|||
content: '\f006'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
/* Active Star */ |
|||
.ui.star.rating .active.icon:before { |
|||
content: '\f005'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Heart |
|||
--------------------*/ |
|||
|
|||
.ui.heart.rating .icon { |
|||
width: 1.2em; |
|||
} |
|||
.ui.heart.rating .icon:before { |
|||
content: '\f08a'; |
|||
font-family: 'Icons'; |
|||
} |
|||
|
|||
/* Active */ |
|||
.ui.heart.rating .active.icon:before { |
|||
content: '\f004'; |
|||
font-family: 'Icons'; |
|||
} |
|||
.ui.heart.rating .active.icon { |
|||
color: #EF404A !important; |
|||
} |
|||
|
|||
/* Hovered */ |
|||
.ui.heart.rating .hover.icon, |
|||
.ui.heart.rating .active.hover.icon { |
|||
color: #FF2733 !important; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Active |
|||
--------------------*/ |
|||
|
|||
/* disabled rating */ |
|||
.ui.disabled.rating .icon { |
|||
cursor: default; |
|||
} |
|||
|
|||
/* active icons */ |
|||
.ui.rating .active.icon { |
|||
color: #FFCB08 !important; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
/* rating */ |
|||
.ui.rating.hover .active.icon { |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
/* icon */ |
|||
.ui.rating .icon.hover, |
|||
.ui.rating .icon.hover.active { |
|||
opacity: 1; |
|||
color: #FFB70A !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.rating .icon { |
|||
font-size: 0.75rem; |
|||
} |
|||
.ui.rating .icon { |
|||
font-size: 1rem; |
|||
} |
|||
.ui.large.rating .icon { |
|||
font-size: 1.5rem; |
|||
vertical-align: middle; |
|||
} |
|||
.ui.huge.rating .icon { |
|||
font-size: 2rem; |
|||
vertical-align: middle; |
|||
} |
|||
@ -1,785 +0,0 @@ |
|||
/* |
|||
* # Semantic - Search |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.search = 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 |
|||
; |
|||
$(this) |
|||
.each(function() { |
|||
var |
|||
settings = $.extend(true, {}, $.fn.search.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
namespace = settings.namespace, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = namespace + '-module', |
|||
|
|||
$module = $(this), |
|||
$prompt = $module.find(selector.prompt), |
|||
$searchButton = $module.find(selector.searchButton), |
|||
$results = $module.find(selector.results), |
|||
$result = $module.find(selector.result), |
|||
$category = $module.find(selector.category), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
module |
|||
; |
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing module'); |
|||
var |
|||
prompt = $prompt[0], |
|||
inputEvent = (prompt !== undefined && prompt.oninput !== undefined) |
|||
? 'input' |
|||
: (prompt !== undefined && prompt.onpropertychange !== undefined) |
|||
? 'propertychange' |
|||
: 'keyup' |
|||
; |
|||
// attach events
|
|||
$prompt |
|||
.on('focus' + eventNamespace, module.event.focus) |
|||
.on('blur' + eventNamespace, module.event.blur) |
|||
.on('keydown' + eventNamespace, module.handleKeyboard) |
|||
; |
|||
if(settings.automatic) { |
|||
$prompt |
|||
.on(inputEvent + eventNamespace, module.search.throttle) |
|||
; |
|||
} |
|||
$searchButton |
|||
.on('click' + eventNamespace, module.search.query) |
|||
; |
|||
$results |
|||
.on('click' + eventNamespace, selector.result, module.results.select) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
destroy: function() { |
|||
module.verbose('Destroying instance'); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
event: { |
|||
focus: function() { |
|||
$module |
|||
.addClass(className.focus) |
|||
; |
|||
clearTimeout(module.timer); |
|||
module.search.throttle(); |
|||
module.results.show(); |
|||
}, |
|||
blur: function() { |
|||
module.search.cancel(); |
|||
$module |
|||
.removeClass(className.focus) |
|||
; |
|||
module.timer = setTimeout(module.results.hide, settings.hideDelay); |
|||
} |
|||
}, |
|||
handleKeyboard: function(event) { |
|||
var |
|||
// force latest jq dom
|
|||
$result = $module.find(selector.result), |
|||
$category = $module.find(selector.category), |
|||
keyCode = event.which, |
|||
keys = { |
|||
backspace : 8, |
|||
enter : 13, |
|||
escape : 27, |
|||
upArrow : 38, |
|||
downArrow : 40 |
|||
}, |
|||
activeClass = className.active, |
|||
currentIndex = $result.index( $result.filter('.' + activeClass) ), |
|||
resultSize = $result.size(), |
|||
newIndex |
|||
; |
|||
// search shortcuts
|
|||
if(keyCode == keys.escape) { |
|||
module.verbose('Escape key pressed, blurring search field'); |
|||
$prompt |
|||
.trigger('blur') |
|||
; |
|||
} |
|||
// result shortcuts
|
|||
if($results.filter(':visible').size() > 0) { |
|||
if(keyCode == keys.enter) { |
|||
module.verbose('Enter key pressed, selecting active result'); |
|||
if( $result.filter('.' + activeClass).size() > 0 ) { |
|||
$.proxy(module.results.select, $result.filter('.' + activeClass) )(event); |
|||
event.preventDefault(); |
|||
return false; |
|||
} |
|||
} |
|||
else if(keyCode == keys.upArrow) { |
|||
module.verbose('Up key pressed, changing active result'); |
|||
newIndex = (currentIndex - 1 < 0) |
|||
? currentIndex |
|||
: currentIndex - 1 |
|||
; |
|||
$category |
|||
.removeClass(activeClass) |
|||
; |
|||
$result |
|||
.removeClass(activeClass) |
|||
.eq(newIndex) |
|||
.addClass(activeClass) |
|||
.closest($category) |
|||
.addClass(activeClass) |
|||
; |
|||
event.preventDefault(); |
|||
} |
|||
else if(keyCode == keys.downArrow) { |
|||
module.verbose('Down key pressed, changing active result'); |
|||
newIndex = (currentIndex + 1 >= resultSize) |
|||
? currentIndex |
|||
: currentIndex + 1 |
|||
; |
|||
$category |
|||
.removeClass(activeClass) |
|||
; |
|||
$result |
|||
.removeClass(activeClass) |
|||
.eq(newIndex) |
|||
.addClass(activeClass) |
|||
.closest($category) |
|||
.addClass(activeClass) |
|||
; |
|||
event.preventDefault(); |
|||
} |
|||
} |
|||
else { |
|||
// query shortcuts
|
|||
if(keyCode == keys.enter) { |
|||
module.verbose('Enter key pressed, executing query'); |
|||
module.search.query(); |
|||
$searchButton |
|||
.addClass(className.down) |
|||
; |
|||
$prompt |
|||
.one('keyup', function(){ |
|||
$searchButton |
|||
.removeClass(className.down) |
|||
; |
|||
}) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
search: { |
|||
cancel: function() { |
|||
var |
|||
xhr = $module.data('xhr') || false |
|||
; |
|||
if( xhr && xhr.state() != 'resolved') { |
|||
module.debug('Cancelling last search'); |
|||
xhr.abort(); |
|||
} |
|||
}, |
|||
throttle: function() { |
|||
var |
|||
searchTerm = $prompt.val(), |
|||
numCharacters = searchTerm.length |
|||
; |
|||
clearTimeout(module.timer); |
|||
if(numCharacters >= settings.minCharacters) { |
|||
module.timer = setTimeout(module.search.query, settings.searchThrottle); |
|||
} |
|||
else { |
|||
module.results.hide(); |
|||
} |
|||
}, |
|||
query: function() { |
|||
var |
|||
searchTerm = $prompt.val(), |
|||
cachedHTML = module.search.cache.read(searchTerm) |
|||
; |
|||
if(cachedHTML) { |
|||
module.debug("Reading result for '" + searchTerm + "' from cache"); |
|||
module.results.add(cachedHTML); |
|||
} |
|||
else { |
|||
module.debug("Querying for '" + searchTerm + "'"); |
|||
if($.isPlainObject(settings.source)) { |
|||
module.search.local(searchTerm); |
|||
} |
|||
else if(settings.apiSettings) { |
|||
module.search.remote(searchTerm); |
|||
} |
|||
else if($.api !== undefined && $.api.settings.api.search !== undefined) { |
|||
module.debug('Searching with default search API endpoint'); |
|||
settings.apiSettings = { |
|||
action: 'search' |
|||
}; |
|||
module.search.remote(searchTerm); |
|||
} |
|||
else { |
|||
module.error(error.source); |
|||
} |
|||
$.proxy(settings.onSearchQuery, $module)(searchTerm); |
|||
} |
|||
}, |
|||
local: function(searchTerm) { |
|||
var |
|||
results = [], |
|||
fullTextResults = [], |
|||
searchFields = $.isArray(settings.searchFields) |
|||
? settings.searchFields |
|||
: [settings.searchFields], |
|||
|
|||
searchRegExp = new RegExp('(?:\s|^)' + searchTerm, 'i'), |
|||
fullTextRegExp = new RegExp(searchTerm, 'i'), |
|||
searchHTML |
|||
; |
|||
$module |
|||
.addClass(className.loading) |
|||
; |
|||
// iterate through search fields in array order
|
|||
$.each(searchFields, function(index, field) { |
|||
$.each(settings.source, function(label, thing) { |
|||
if(typeof thing[field] == 'string' && ($.inArray(thing, results) == -1) && ($.inArray(thing, fullTextResults) == -1) ) { |
|||
if( searchRegExp.test( thing[field] ) ) { |
|||
results.push(thing); |
|||
} |
|||
else if( fullTextRegExp.test( thing[field] ) ) { |
|||
fullTextResults.push(thing); |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
searchHTML = module.results.generate({ |
|||
results: $.merge(results, fullTextResults) |
|||
}); |
|||
$module |
|||
.removeClass(className.loading) |
|||
; |
|||
module.search.cache.write(searchTerm, searchHTML); |
|||
module.results.add(searchHTML); |
|||
}, |
|||
remote: function(searchTerm) { |
|||
var |
|||
apiSettings = { |
|||
stateContext : $module, |
|||
urlData: { |
|||
query: searchTerm |
|||
}, |
|||
success : function(response) { |
|||
searchHTML = module.results.generate(response); |
|||
module.search.cache.write(searchTerm, searchHTML); |
|||
module.results.add(searchHTML); |
|||
}, |
|||
failure : module.error |
|||
}, |
|||
searchHTML |
|||
; |
|||
module.search.cancel(); |
|||
module.debug('Executing search'); |
|||
$.extend(true, apiSettings, settings.apiSettings); |
|||
$.api(apiSettings); |
|||
}, |
|||
|
|||
cache: { |
|||
read: function(name) { |
|||
var |
|||
cache = $module.data('cache') |
|||
; |
|||
return (settings.cache && (typeof cache == 'object') && (cache[name] !== undefined) ) |
|||
? cache[name] |
|||
: false |
|||
; |
|||
}, |
|||
write: function(name, value) { |
|||
var |
|||
cache = ($module.data('cache') !== undefined) |
|||
? $module.data('cache') |
|||
: {} |
|||
; |
|||
cache[name] = value; |
|||
$module |
|||
.data('cache', cache) |
|||
; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
results: { |
|||
generate: function(response) { |
|||
module.debug('Generating html from response', response); |
|||
var |
|||
template = settings.templates[settings.type], |
|||
html = '' |
|||
; |
|||
if(($.isPlainObject(response.results) && !$.isEmptyObject(response.results)) || ($.isArray(response.results) && response.results.length > 0) ) { |
|||
if(settings.maxResults > 0) { |
|||
response.results = $.makeArray(response.results).slice(0, settings.maxResults); |
|||
} |
|||
if(response.results.length > 0) { |
|||
if($.isFunction(template)) { |
|||
html = template(response); |
|||
} |
|||
else { |
|||
module.error(error.noTemplate, false); |
|||
} |
|||
} |
|||
} |
|||
else { |
|||
html = module.message(error.noResults, 'empty'); |
|||
} |
|||
$.proxy(settings.onResults, $module)(response); |
|||
return html; |
|||
}, |
|||
add: function(html) { |
|||
if(settings.onResultsAdd == 'default' || $.proxy(settings.onResultsAdd, $results)(html) == 'default') { |
|||
$results |
|||
.html(html) |
|||
; |
|||
} |
|||
module.results.show(); |
|||
}, |
|||
show: function() { |
|||
if( ($results.filter(':visible').size() === 0) && ($prompt.filter(':focus').size() > 0) && $results.html() !== '') { |
|||
$results |
|||
.stop() |
|||
.fadeIn(200) |
|||
; |
|||
$.proxy(settings.onResultsOpen, $results)(); |
|||
} |
|||
}, |
|||
hide: function() { |
|||
if($results.filter(':visible').size() > 0) { |
|||
$results |
|||
.stop() |
|||
.fadeOut(200) |
|||
; |
|||
$.proxy(settings.onResultsClose, $results)(); |
|||
} |
|||
}, |
|||
select: function(event) { |
|||
module.debug('Search result selected'); |
|||
var |
|||
$result = $(this), |
|||
$title = $result.find('.title'), |
|||
title = $title.html() |
|||
; |
|||
if(settings.onSelect == 'default' || $.proxy(settings.onSelect, this)(event) == 'default') { |
|||
var |
|||
$link = $result.find('a[href]').eq(0), |
|||
href = $link.attr('href') || false, |
|||
target = $link.attr('target') || false |
|||
; |
|||
module.results.hide(); |
|||
if(href) { |
|||
if(target == '_blank' || event.ctrlKey) { |
|||
window.open(href); |
|||
} |
|||
else { |
|||
window.location.href = (href); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// displays mesage visibly in search results
|
|||
message: function(text, type) { |
|||
type = type || 'standard'; |
|||
module.results.add( settings.templates.message(text, type) ); |
|||
return settings.templates.message(text, type); |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
|
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.search.settings = { |
|||
|
|||
name : 'Search Module', |
|||
namespace : 'search', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
// onSelect default action is defined in module
|
|||
onSelect : 'default', |
|||
onResultsAdd : 'default', |
|||
|
|||
onSearchQuery : function(){}, |
|||
onResults : function(response){}, |
|||
|
|||
onResultsOpen : function(){}, |
|||
onResultsClose : function(){}, |
|||
|
|||
source : false, |
|||
|
|||
automatic : 'true', |
|||
type : 'simple', |
|||
hideDelay : 600, |
|||
minCharacters : 3, |
|||
searchThrottle : 300, |
|||
maxResults : 7, |
|||
cache : true, |
|||
|
|||
searchFields : [ |
|||
'title', |
|||
'description' |
|||
], |
|||
|
|||
// api config
|
|||
apiSettings: false, |
|||
|
|||
className: { |
|||
active : 'active', |
|||
down : 'down', |
|||
focus : 'focus', |
|||
empty : 'empty', |
|||
loading : 'loading' |
|||
}, |
|||
|
|||
error : { |
|||
source : 'No source or api action specified', |
|||
noResults : 'Your search returned no results', |
|||
logging : 'Error in debug logging, exiting.', |
|||
noTemplate : 'A valid template name was not specified.', |
|||
serverError : 'There was an issue with querying the server.', |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
selector : { |
|||
prompt : '.prompt', |
|||
searchButton : '.search.button', |
|||
results : '.results', |
|||
category : '.category', |
|||
result : '.result' |
|||
}, |
|||
|
|||
templates: { |
|||
message: function(message, type) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(message !== undefined && type !== undefined) { |
|||
html += '' |
|||
+ '<div class="message ' + type +'">' |
|||
; |
|||
// message type
|
|||
if(type == 'empty') { |
|||
html += '' |
|||
+ '<div class="header">No Results</div class="header">' |
|||
+ '<div class="description">' + message + '</div class="description">' |
|||
; |
|||
} |
|||
else { |
|||
html += ' <div class="description">' + message + '</div>'; |
|||
} |
|||
html += '</div>'; |
|||
} |
|||
return html; |
|||
}, |
|||
categories: function(response) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(response.results !== undefined) { |
|||
// each category
|
|||
$.each(response.results, function(index, category) { |
|||
if(category.results !== undefined && category.results.length > 0) { |
|||
html += '' |
|||
+ '<div class="category">' |
|||
+ '<div class="name">' + category.name + '</div>' |
|||
; |
|||
// each item inside category
|
|||
$.each(category.results, function(index, result) { |
|||
html += '<div class="result">'; |
|||
html += '<a href="' + result.url + '"></a>'; |
|||
if(result.image !== undefined) { |
|||
html+= '' |
|||
+ '<div class="image">' |
|||
+ ' <img src="' + result.image + '">' |
|||
+ '</div>' |
|||
; |
|||
} |
|||
html += '<div class="info">'; |
|||
if(result.price !== undefined) { |
|||
html+= '<div class="price">' + result.price + '</div>'; |
|||
} |
|||
if(result.title !== undefined) { |
|||
html+= '<div class="title">' + result.title + '</div>'; |
|||
} |
|||
if(result.description !== undefined) { |
|||
html+= '<div class="description">' + result.description + '</div>'; |
|||
} |
|||
html += '' |
|||
+ '</div>' |
|||
+ '</div>' |
|||
; |
|||
}); |
|||
html += '' |
|||
+ '</div>' |
|||
; |
|||
} |
|||
}); |
|||
if(response.resultPage) { |
|||
html += '' |
|||
+ '<a href="' + response.resultPage.url + '" class="all">' |
|||
+ response.resultPage.text |
|||
+ '</a>'; |
|||
} |
|||
return html; |
|||
} |
|||
return false; |
|||
}, |
|||
simple: function(response) { |
|||
var |
|||
html = '' |
|||
; |
|||
if(response.results !== undefined) { |
|||
|
|||
// each result
|
|||
$.each(response.results, function(index, result) { |
|||
html += '<a class="result" href="' + result.url + '">'; |
|||
if(result.image !== undefined) { |
|||
html+= '' |
|||
+ '<div class="image">' |
|||
+ ' <img src="' + result.image + '">' |
|||
+ '</div>' |
|||
; |
|||
} |
|||
html += '<div class="info">'; |
|||
if(result.price !== undefined) { |
|||
html+= '<div class="price">' + result.price + '</div>'; |
|||
} |
|||
if(result.title !== undefined) { |
|||
html+= '<div class="title">' + result.title + '</div>'; |
|||
} |
|||
if(result.description !== undefined) { |
|||
html+= '<div class="description">' + result.description + '</div>'; |
|||
} |
|||
html += '' |
|||
+ '</div>' |
|||
+ '</a>' |
|||
; |
|||
}); |
|||
|
|||
if(response.resultPage) { |
|||
html += '' |
|||
+ '<a href="' + response.resultPage.url + '" class="all">' |
|||
+ response.resultPage.text |
|||
+ '</a>'; |
|||
} |
|||
return html; |
|||
} |
|||
return false; |
|||
} |
|||
} |
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,273 +0,0 @@ |
|||
/* |
|||
* # Semantic - Search |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Search |
|||
*******************************/ |
|||
|
|||
.ui.search { |
|||
position: relative; |
|||
|
|||
text-shadow: none; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.ui.search input { |
|||
-webkit-border-radius: 500rem; |
|||
-moz-border-radius: 500rem; |
|||
border-radius: 500rem; |
|||
} |
|||
|
|||
/*-------------- |
|||
Button |
|||
---------------*/ |
|||
|
|||
.ui.search > .button { |
|||
position: relative; |
|||
z-index: 2; |
|||
float: right; |
|||
margin: 0px 0px 0px -15px; |
|||
padding: 6px 15px 7px; |
|||
-webkit-border-radius: 0px 15px 15px 0px; |
|||
-moz-border-radius: 0px 15px 15px 0px; |
|||
border-radius: 0px 15px 15px 0px; |
|||
-webkit-box-shadow: none; |
|||
-moz-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
/*-------------- |
|||
Results |
|||
---------------*/ |
|||
|
|||
.ui.search .results { |
|||
display: none; |
|||
|
|||
position: absolute; |
|||
z-index: 999; |
|||
top: 100%; |
|||
left: 0px; |
|||
|
|||
overflow: hidden; |
|||
background-color: #FFFFFF; |
|||
|
|||
margin-top: 0.5em; |
|||
width: 380px; |
|||
font-size: 0.875em; |
|||
line-height: 1.2; |
|||
color: #555555; |
|||
|
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
|
|||
-webkit-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
-moz-box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
box-shadow: |
|||
0px 0px 1px 1px rgba(0, 0, 0, 0.1), |
|||
0px -2px 0px 0px rgba(0, 0, 0, 0.1) inset |
|||
; |
|||
} |
|||
.ui.search .result { |
|||
cursor: pointer; |
|||
overflow: hidden; |
|||
padding: 0.5em 1em; |
|||
} |
|||
.ui.search .result:first-child { |
|||
border-top: none; |
|||
} |
|||
.ui.search .result .image { |
|||
background: #F0F0F0; |
|||
margin-right: 10px; |
|||
float: left; |
|||
overflow: hidden; |
|||
-webkit-border-radius: 3px; |
|||
-moz-border-radius: 3px; |
|||
border-radius: 3px; |
|||
height: 30px; |
|||
} |
|||
.ui.search .result .image img { |
|||
display: block; |
|||
width: 73px; |
|||
height: 30px; |
|||
} |
|||
.ui.search .result .image ~ .info { |
|||
float: none; |
|||
margin-left: 80px; |
|||
} |
|||
|
|||
.ui.search .result .info { |
|||
float: left; |
|||
} |
|||
.ui.search .result .title { |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .result .description { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
.ui.search .result .price { |
|||
float: right; |
|||
color: #5BBD72; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
/*-------------- |
|||
Message |
|||
---------------*/ |
|||
|
|||
.ui.search .message { |
|||
padding: 1em; |
|||
} |
|||
.ui.search .message .text .title { |
|||
margin: 0em 0em 0.5rem; |
|||
|
|||
font-size: 1.25rem; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.search .message .text .description { |
|||
margin: 0em; |
|||
font-size: 1rem; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Categories |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category { |
|||
background-color: #FAFAFA; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
|
|||
-webkit-transition: background 0.2s ease-in; |
|||
-moz-transition: background 0.2s ease-in; |
|||
-o-transition: background 0.2s ease-in; |
|||
-ms-transition: background 0.2s ease-in; |
|||
transition: background 0.2s ease-in; |
|||
} |
|||
.ui.search .results .category:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
.ui.search .results .category > .name { |
|||
float: left; |
|||
padding: 12px 0px 0px 8px; |
|||
font-weight: bold; |
|||
color: #777777; |
|||
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.search .results .category .result { |
|||
background-color: #FFFFFF; |
|||
margin-left: 80px; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* View All Results */ |
|||
.ui.search .all { |
|||
display: block; |
|||
|
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
background-color: #FAFAFA; |
|||
height: 2em; |
|||
line-height: 2em; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
font-weight: bold; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.search .result:hover, |
|||
.ui.search .category .result:hover { |
|||
background-color: #F8F8F8; |
|||
} |
|||
.ui.search .all:hover { |
|||
background-color: #F0F0F0; |
|||
} |
|||
|
|||
/*-------------- |
|||
Loading |
|||
---------------*/ |
|||
|
|||
.ui.search.loading .input .icon { |
|||
background: url(../../themes/packages/default/assets/images/loader-mini.gif) no-repeat 50% 50%; |
|||
} |
|||
.ui.search.loading .input .icon:before, |
|||
.ui.search.loading .input .icon:after { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.search .results .category.active { |
|||
background-color: #F1F1F1; |
|||
} |
|||
.ui.search .results .category.active > .name { |
|||
color: #333333; |
|||
} |
|||
|
|||
.ui.search .result.active, |
|||
.ui.search .category .result.active { |
|||
background-color: #FBFBFB; |
|||
} |
|||
.ui.search .result.active .title { |
|||
color: #000000; |
|||
} |
|||
.ui.search .result.active .description { |
|||
color: #555555; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
|
|||
/* Large */ |
|||
.ui.search .large.result .image, |
|||
.ui.search .large.result .image img { |
|||
width: 50px; |
|||
height: 50px; |
|||
} |
|||
.ui.search .large.results .indented.info { |
|||
margin-left: 65px; |
|||
} |
|||
.ui.search .large.results .info .title { |
|||
font-size: 16px; |
|||
} |
|||
.ui.search .large.results .info .description { |
|||
font-size: 11px; |
|||
} |
|||
|
|||
@ -1,787 +0,0 @@ |
|||
/* |
|||
* # Semantic - Shape |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.shape = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
$body = $('body'), |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
returnedValue |
|||
; |
|||
|
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
moduleSelector = $allModules.selector || '', |
|||
settings = $.extend(true, {}, $.fn.shape.settings, parameters), |
|||
|
|||
// internal aliases
|
|||
namespace = settings.namespace, |
|||
selector = settings.selector, |
|||
error = settings.error, |
|||
className = settings.className, |
|||
|
|||
// define namespaces for modules
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
// selector cache
|
|||
$module = $(this), |
|||
$sides = $module.find(selector.sides), |
|||
$side = $module.find(selector.side), |
|||
|
|||
// private variables
|
|||
nextSelector = false, |
|||
$activeSide, |
|||
$nextSide, |
|||
|
|||
// standard module
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing module for', element); |
|||
module.set.defaultSide(); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module for', element); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache for', element); |
|||
$module = $(element); |
|||
$sides = $(this).find(selector.shape); |
|||
$side = $(this).find(selector.side); |
|||
}, |
|||
|
|||
repaint: function() { |
|||
module.verbose('Forcing repaint event'); |
|||
var |
|||
shape = $sides.get(0) || document.createElement('div'), |
|||
fakeAssignment = shape.offsetWidth |
|||
; |
|||
}, |
|||
|
|||
animate: function(propertyObject, callback) { |
|||
module.verbose('Animating box with properties', propertyObject); |
|||
callback = callback || function(event) { |
|||
module.verbose('Executing animation callback'); |
|||
if(event !== undefined) { |
|||
event.stopPropagation(); |
|||
} |
|||
module.reset(); |
|||
module.set.active(); |
|||
}; |
|||
$.proxy(settings.beforeChange, $nextSide[0])(); |
|||
if(module.get.transitionEvent()) { |
|||
module.verbose('Starting CSS animation'); |
|||
$module |
|||
.addClass(className.animating) |
|||
; |
|||
module.repaint(); |
|||
$module |
|||
.addClass(className.animating) |
|||
; |
|||
$activeSide |
|||
.addClass(className.hidden) |
|||
; |
|||
$sides |
|||
.css(propertyObject) |
|||
.one(module.get.transitionEvent(), callback) |
|||
; |
|||
module.set.duration(settings.duration); |
|||
} |
|||
else { |
|||
callback(); |
|||
} |
|||
}, |
|||
|
|||
queue: function(method) { |
|||
module.debug('Queueing animation of', method); |
|||
$sides |
|||
.one(module.get.transitionEvent(), function() { |
|||
module.debug('Executing queued animation'); |
|||
setTimeout(function(){ |
|||
$module.shape(method); |
|||
}, 0); |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
reset: function() { |
|||
module.verbose('Animating states reset'); |
|||
$module |
|||
.removeClass(className.animating) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
// removeAttr style does not consistently work in safari
|
|||
$sides |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
$side |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
.removeClass(className.hidden) |
|||
; |
|||
$nextSide |
|||
.removeClass(className.animating) |
|||
.attr('style', '') |
|||
.removeAttr('style') |
|||
; |
|||
}, |
|||
|
|||
is: { |
|||
animating: function() { |
|||
return $module.hasClass(className.animating); |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
|
|||
defaultSide: function() { |
|||
$activeSide = $module.find('.' + settings.className.active); |
|||
$nextSide = ( $activeSide.next(selector.side).size() > 0 ) |
|||
? $activeSide.next(selector.side) |
|||
: $module.find(selector.side).first() |
|||
; |
|||
nextSelector = false; |
|||
module.verbose('Active side set to', $activeSide); |
|||
module.verbose('Next side set to', $nextSide); |
|||
}, |
|||
|
|||
duration: function(duration) { |
|||
duration = duration || settings.duration; |
|||
duration = (typeof duration == 'number') |
|||
? duration + 'ms' |
|||
: duration |
|||
; |
|||
module.verbose('Setting animation duration', duration); |
|||
$sides.add($side) |
|||
.css({ |
|||
'-webkit-transition-duration': duration, |
|||
'-moz-transition-duration': duration, |
|||
'-ms-transition-duration': duration, |
|||
'-o-transition-duration': duration, |
|||
'transition-duration': duration |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
stageSize: function() { |
|||
var |
|||
$clone = $module.clone().addClass(className.loading), |
|||
$activeSide = $clone.find('.' + settings.className.active), |
|||
$nextSide = (nextSelector) |
|||
? $clone.find(nextSelector) |
|||
: ( $activeSide.next(selector.side).size() > 0 ) |
|||
? $activeSide.next(selector.side) |
|||
: $clone.find(selector.side).first(), |
|||
newSize = {} |
|||
; |
|||
$activeSide.removeClass(className.active); |
|||
$nextSide.addClass(className.active); |
|||
$clone.prependTo($body); |
|||
newSize = { |
|||
width : $nextSide.outerWidth(), |
|||
height : $nextSide.outerHeight() |
|||
}; |
|||
$clone.remove(); |
|||
$module |
|||
.css(newSize) |
|||
; |
|||
module.verbose('Resizing stage to fit new content', newSize); |
|||
}, |
|||
|
|||
nextSide: function(selector) { |
|||
nextSelector = selector; |
|||
$nextSide = $module.find(selector); |
|||
if($nextSide.size() === 0) { |
|||
module.error(error.side); |
|||
} |
|||
module.verbose('Next side manually set to', $nextSide); |
|||
}, |
|||
|
|||
active: function() { |
|||
module.verbose('Setting new side to active', $nextSide); |
|||
$side |
|||
.removeClass(className.active) |
|||
; |
|||
$nextSide |
|||
.addClass(className.active) |
|||
; |
|||
$.proxy(settings.onChange, $nextSide[0])(); |
|||
module.set.defaultSide(); |
|||
} |
|||
}, |
|||
|
|||
flip: { |
|||
|
|||
up: function() { |
|||
module.debug('Flipping up', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.above(); |
|||
module.animate( module.get.transform.up() ); |
|||
} |
|||
else { |
|||
module.queue('flip up'); |
|||
} |
|||
}, |
|||
|
|||
down: function() { |
|||
module.debug('Flipping down', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.below(); |
|||
module.animate( module.get.transform.down() ); |
|||
} |
|||
else { |
|||
module.queue('flip down'); |
|||
} |
|||
}, |
|||
|
|||
left: function() { |
|||
module.debug('Flipping left', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.left(); |
|||
module.animate(module.get.transform.left() ); |
|||
} |
|||
else { |
|||
module.queue('flip left'); |
|||
} |
|||
}, |
|||
|
|||
right: function() { |
|||
module.debug('Flipping right', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.right(); |
|||
module.animate(module.get.transform.right() ); |
|||
} |
|||
else { |
|||
module.queue('flip right'); |
|||
} |
|||
}, |
|||
|
|||
over: function() { |
|||
module.debug('Flipping over', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.behind(); |
|||
module.animate(module.get.transform.over() ); |
|||
} |
|||
else { |
|||
module.queue('flip over'); |
|||
} |
|||
}, |
|||
|
|||
back: function() { |
|||
module.debug('Flipping back', $nextSide); |
|||
if( !module.is.animating() ) { |
|||
module.set.stageSize(); |
|||
module.stage.behind(); |
|||
module.animate(module.get.transform.back() ); |
|||
} |
|||
else { |
|||
module.queue('flip back'); |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
get: { |
|||
|
|||
transform: { |
|||
up: function() { |
|||
var |
|||
translate = { |
|||
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
|||
z: -($activeSide.outerHeight() / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' |
|||
}; |
|||
}, |
|||
|
|||
down: function() { |
|||
var |
|||
translate = { |
|||
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
|||
z: -($activeSide.outerHeight() / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' |
|||
}; |
|||
}, |
|||
|
|||
left: function() { |
|||
var |
|||
translate = { |
|||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
|||
z : -($activeSide.outerWidth() / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' |
|||
}; |
|||
}, |
|||
|
|||
right: function() { |
|||
var |
|||
translate = { |
|||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2), |
|||
z : -($activeSide.outerWidth() / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' |
|||
}; |
|||
}, |
|||
|
|||
over: function() { |
|||
var |
|||
translate = { |
|||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateX(' + translate.x + 'px) rotateY(180deg)' |
|||
}; |
|||
}, |
|||
|
|||
back: function() { |
|||
var |
|||
translate = { |
|||
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2) |
|||
} |
|||
; |
|||
return { |
|||
transform: 'translateX(' + translate.x + 'px) rotateY(-180deg)' |
|||
}; |
|||
} |
|||
}, |
|||
|
|||
transitionEvent: function() { |
|||
var |
|||
element = document.createElement('element'), |
|||
transitions = { |
|||
'transition' :'transitionend', |
|||
'OTransition' :'oTransitionEnd', |
|||
'MozTransition' :'transitionend', |
|||
'WebkitTransition' :'webkitTransitionEnd' |
|||
}, |
|||
transition |
|||
; |
|||
for(transition in transitions){ |
|||
if( element.style[transition] !== undefined ){ |
|||
return transitions[transition]; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
nextSide: function() { |
|||
return ( $activeSide.next(selector.side).size() > 0 ) |
|||
? $activeSide.next(selector.side) |
|||
: $module.find(selector.side).first() |
|||
; |
|||
} |
|||
|
|||
}, |
|||
|
|||
stage: { |
|||
|
|||
above: function() { |
|||
var |
|||
box = { |
|||
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
|||
depth : { |
|||
active : ($nextSide.outerHeight() / 2), |
|||
next : ($activeSide.outerHeight() / 2) |
|||
} |
|||
} |
|||
; |
|||
module.verbose('Setting the initial animation position as above', $nextSide, box); |
|||
$activeSide |
|||
.css({ |
|||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
|||
}) |
|||
; |
|||
$nextSide |
|||
.addClass(className.animating) |
|||
.css({ |
|||
'display' : 'block', |
|||
'top' : box.origin + 'px', |
|||
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
below: function() { |
|||
var |
|||
box = { |
|||
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2), |
|||
depth : { |
|||
active : ($nextSide.outerHeight() / 2), |
|||
next : ($activeSide.outerHeight() / 2) |
|||
} |
|||
} |
|||
; |
|||
module.verbose('Setting the initial animation position as below', $nextSide, box); |
|||
$activeSide |
|||
.css({ |
|||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
|||
}) |
|||
; |
|||
$nextSide |
|||
.addClass(className.animating) |
|||
.css({ |
|||
'display' : 'block', |
|||
'top' : box.origin + 'px', |
|||
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
left: function() { |
|||
var |
|||
box = { |
|||
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
|||
depth : { |
|||
active : ($nextSide.outerWidth() / 2), |
|||
next : ($activeSide.outerWidth() / 2) |
|||
} |
|||
} |
|||
; |
|||
module.verbose('Setting the initial animation position as left', $nextSide, box); |
|||
$activeSide |
|||
.css({ |
|||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
|||
}) |
|||
; |
|||
$nextSide |
|||
.addClass(className.animating) |
|||
.css({ |
|||
'display' : 'block', |
|||
'left' : box.origin + 'px', |
|||
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
right: function() { |
|||
var |
|||
box = { |
|||
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
|||
depth : { |
|||
active : ($nextSide.outerWidth() / 2), |
|||
next : ($activeSide.outerWidth() / 2) |
|||
} |
|||
} |
|||
; |
|||
module.verbose('Setting the initial animation position as left', $nextSide, box); |
|||
$activeSide |
|||
.css({ |
|||
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' |
|||
}) |
|||
; |
|||
$nextSide |
|||
.addClass(className.animating) |
|||
.css({ |
|||
'display' : 'block', |
|||
'left' : box.origin + 'px', |
|||
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
behind: function() { |
|||
var |
|||
box = { |
|||
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2), |
|||
depth : { |
|||
active : ($nextSide.outerWidth() / 2), |
|||
next : ($activeSide.outerWidth() / 2) |
|||
} |
|||
} |
|||
; |
|||
module.verbose('Setting the initial animation position as behind', $nextSide, box); |
|||
$activeSide |
|||
.css({ |
|||
'transform' : 'rotateY(0deg)' |
|||
}) |
|||
; |
|||
$nextSide |
|||
.addClass(className.animating) |
|||
.css({ |
|||
'display' : 'block', |
|||
'left' : box.origin + 'px', |
|||
'transform' : 'rotateY(-180deg)' |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.shape.settings = { |
|||
|
|||
// module info
|
|||
name : 'Shape', |
|||
|
|||
// debug content outputted to console
|
|||
debug : true, |
|||
|
|||
// verbose debug output
|
|||
verbose : true, |
|||
|
|||
// performance data output
|
|||
performance: true, |
|||
|
|||
// event namespace
|
|||
namespace : 'shape', |
|||
|
|||
// callback occurs on side change
|
|||
beforeChange : function() {}, |
|||
onChange : function() {}, |
|||
|
|||
// animation duration
|
|||
duration : 700, |
|||
|
|||
// possible errors
|
|||
error: { |
|||
side : 'You tried to switch to a side that does not exist.', |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
// classnames used
|
|||
className : { |
|||
animating : 'animating', |
|||
hidden : 'hidden', |
|||
loading : 'loading', |
|||
active : 'active' |
|||
}, |
|||
|
|||
// selectors used
|
|||
selector : { |
|||
sides : '.sides', |
|||
side : '.side' |
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,187 +0,0 @@ |
|||
/* |
|||
* # Semantic - Shape |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
/******************************* |
|||
Shape |
|||
*******************************/ |
|||
|
|||
.ui.shape { |
|||
display: inline-block; |
|||
position: relative; |
|||
|
|||
-webkit-perspective: 2000px; |
|||
-moz-perspective: 2000px; |
|||
-ms-perspective: 2000px; |
|||
perspective: 2000px; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
} |
|||
|
|||
.ui.shape .sides { |
|||
-webkit-transform-style: preserve-3d; |
|||
-moz-transform-style: preserve-3d; |
|||
-ms-transform-style: preserve-3d; |
|||
transform-style: preserve-3d; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
opacity: 1; |
|||
width: 100%; |
|||
|
|||
margin: 0em !important; |
|||
|
|||
-webkit-backface-visibility: hidden; |
|||
-moz-backface-visibility: hidden; |
|||
-ms-backface-visibility: hidden; |
|||
backface-visibility: hidden; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.ui.shape .side { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
.ui.cube.shape .side { |
|||
min-width: 15em; |
|||
height: 15em; |
|||
|
|||
padding: 2em; |
|||
|
|||
background-color: #E6E6E6; |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); |
|||
-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); |
|||
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.cube.shape .side > .content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: table; |
|||
|
|||
text-align: center; |
|||
|
|||
-webkit-user-select: text; |
|||
-moz-user-select: text; |
|||
-ms-user-select: text; |
|||
user-select: text; |
|||
} |
|||
.ui.cube.shape .side > .content > div { |
|||
display: table-cell; |
|||
vertical-align: middle; |
|||
font-size: 2em; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.text.shape.animating .sides { |
|||
position: static; |
|||
} |
|||
.ui.text.shape .side { |
|||
white-space: nowrap; |
|||
} |
|||
.ui.text.shape .side > * { |
|||
white-space: normal; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Loading |
|||
---------------*/ |
|||
|
|||
.ui.loading.shape { |
|||
position: absolute; |
|||
top: -9999px; |
|||
left: -9999px; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Animating |
|||
---------------*/ |
|||
|
|||
.ui.shape .animating.side { |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 100; |
|||
} |
|||
.ui.shape .hidden.side { |
|||
opacity: 0.4; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
CSS |
|||
---------------*/ |
|||
|
|||
.ui.shape.animating { |
|||
-webkit-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-moz-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-o-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
-ms-transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
transition: |
|||
all 0.6s ease-in-out; |
|||
; |
|||
} |
|||
.ui.shape.animating .sides { |
|||
position: absolute; |
|||
} |
|||
.ui.shape.animating .sides { |
|||
-webkit-transition: all 0.6s ease-in-out; |
|||
-moz-transition: all 0.6s ease-in-out; |
|||
-o-transition: all 0.6s ease-in-out; |
|||
-ms-transition: all 0.6s ease-in-out; |
|||
transition: all 0.6s ease-in-out; |
|||
} |
|||
.ui.shape.animating .side { |
|||
-webkit-transition: opacity 0.6s ease-in-out; |
|||
-moz-transition: opacity 0.6s ease-in-out; |
|||
-o-transition: opacity 0.6s ease-in-out; |
|||
-ms-transition: opacity 0.6s ease-in-out; |
|||
transition: opacity 0.6s ease-in-out; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.shape .active.side { |
|||
display: block; |
|||
} |
|||
@ -1,514 +0,0 @@ |
|||
/* |
|||
* # Semantic - Sidebar |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.sidebar = function(parameters) { |
|||
var |
|||
$allModules = $(this), |
|||
$body = $('body'), |
|||
$head = $('head'), |
|||
|
|||
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 = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.sidebar.settings, parameters) |
|||
: $.extend({}, $.fn.sidebar.settings), |
|||
|
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$style = $('style[title=' + namespace + ']'), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing sidebar', $module); |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module for', $module); |
|||
$module |
|||
.off(eventNamespace) |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing selector cache'); |
|||
$style = $('style[title=' + namespace + ']'); |
|||
}, |
|||
|
|||
attachEvents: function(selector, event) { |
|||
var |
|||
$toggle = $(selector) |
|||
; |
|||
event = $.isFunction(module[event]) |
|||
? module[event] |
|||
: module.toggle |
|||
; |
|||
if($toggle.size() > 0) { |
|||
module.debug('Attaching sidebar events to element', selector, event); |
|||
$toggle |
|||
.off(eventNamespace) |
|||
.on('click' + eventNamespace, event) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.notFound); |
|||
} |
|||
}, |
|||
|
|||
show: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.debug('Showing sidebar', callback); |
|||
if(module.is.closed()) { |
|||
if(!settings.overlay) { |
|||
if(settings.exclusive) { |
|||
module.hideAll(); |
|||
} |
|||
module.pushPage(); |
|||
} |
|||
module.set.active(); |
|||
callback(); |
|||
$.proxy(settings.onChange, element)(); |
|||
$.proxy(settings.onShow, element)(); |
|||
} |
|||
else { |
|||
module.debug('Sidebar is already visible'); |
|||
} |
|||
}, |
|||
|
|||
hide: function(callback) { |
|||
callback = $.isFunction(callback) |
|||
? callback |
|||
: function(){} |
|||
; |
|||
module.debug('Hiding sidebar', callback); |
|||
if(module.is.open()) { |
|||
if(!settings.overlay) { |
|||
module.pullPage(); |
|||
module.remove.pushed(); |
|||
} |
|||
module.remove.active(); |
|||
callback(); |
|||
$.proxy(settings.onChange, element)(); |
|||
$.proxy(settings.onHide, element)(); |
|||
} |
|||
}, |
|||
|
|||
hideAll: function() { |
|||
$(selector.sidebar) |
|||
.filter(':visible') |
|||
.sidebar('hide') |
|||
; |
|||
}, |
|||
|
|||
toggle: function() { |
|||
if(module.is.closed()) { |
|||
module.show(); |
|||
} |
|||
else { |
|||
module.hide(); |
|||
} |
|||
}, |
|||
|
|||
pushPage: function() { |
|||
var |
|||
direction = module.get.direction(), |
|||
distance = (module.is.vertical()) |
|||
? $module.outerHeight() |
|||
: $module.outerWidth() |
|||
; |
|||
if(settings.useCSS) { |
|||
module.debug('Using CSS to animate body'); |
|||
module.add.bodyCSS(direction, distance); |
|||
module.set.pushed(); |
|||
} |
|||
else { |
|||
module.animatePage(direction, distance, module.set.pushed); |
|||
} |
|||
}, |
|||
|
|||
pullPage: function() { |
|||
var |
|||
direction = module.get.direction() |
|||
; |
|||
if(settings.useCSS) { |
|||
module.debug('Resetting body position css'); |
|||
module.remove.bodyCSS(); |
|||
} |
|||
else { |
|||
module.debug('Resetting body position using javascript'); |
|||
module.animatePage(direction, 0); |
|||
} |
|||
module.remove.pushed(); |
|||
}, |
|||
|
|||
animatePage: function(direction, distance) { |
|||
var |
|||
animateSettings = {} |
|||
; |
|||
animateSettings['padding-' + direction] = distance; |
|||
module.debug('Using javascript to animate body', animateSettings); |
|||
$body |
|||
.animate(animateSettings, settings.duration, module.set.pushed) |
|||
; |
|||
}, |
|||
|
|||
add: { |
|||
bodyCSS: function(direction, distance) { |
|||
var |
|||
style |
|||
; |
|||
if(direction !== className.bottom) { |
|||
style = '' |
|||
+ '<style title="' + namespace + '">' |
|||
+ 'body.pushed {' |
|||
+ ' margin-' + direction + ': ' + distance + 'px !important;' |
|||
+ '}' |
|||
+ '</style>' |
|||
; |
|||
} |
|||
$head.append(style); |
|||
module.debug('Adding body css to head', $style); |
|||
} |
|||
}, |
|||
|
|||
|
|||
remove: { |
|||
bodyCSS: function() { |
|||
module.debug('Removing body css styles', $style); |
|||
module.refresh(); |
|||
$style.remove(); |
|||
}, |
|||
active: function() { |
|||
$module.removeClass(className.active); |
|||
}, |
|||
pushed: function() { |
|||
module.verbose('Removing body push state', module.get.direction()); |
|||
$body |
|||
.removeClass(className[ module.get.direction() ]) |
|||
.removeClass(className.pushed) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
active: function() { |
|||
$module.addClass(className.active); |
|||
}, |
|||
pushed: function() { |
|||
module.verbose('Adding body push state', module.get.direction()); |
|||
$body |
|||
.addClass(className[ module.get.direction() ]) |
|||
.addClass(className.pushed) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
direction: function() { |
|||
if($module.hasClass(className.top)) { |
|||
return className.top; |
|||
} |
|||
else if($module.hasClass(className.right)) { |
|||
return className.right; |
|||
} |
|||
else if($module.hasClass(className.bottom)) { |
|||
return className.bottom; |
|||
} |
|||
else { |
|||
return className.left; |
|||
} |
|||
}, |
|||
transitionEvent: function() { |
|||
var |
|||
element = document.createElement('element'), |
|||
transitions = { |
|||
'transition' :'transitionend', |
|||
'OTransition' :'oTransitionEnd', |
|||
'MozTransition' :'transitionend', |
|||
'WebkitTransition' :'webkitTransitionEnd' |
|||
}, |
|||
transition |
|||
; |
|||
for(transition in transitions){ |
|||
if( element.style[transition] !== undefined ){ |
|||
return transitions[transition]; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
open: function() { |
|||
return $module.is(':animated') || $module.hasClass(className.active); |
|||
}, |
|||
closed: function() { |
|||
return !module.is.open(); |
|||
}, |
|||
vertical: function() { |
|||
return $module.hasClass(className.top); |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.sidebar.settings = { |
|||
|
|||
name : 'Sidebar', |
|||
namespace : 'sidebar', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
useCSS : true, |
|||
exclusive : true, |
|||
overlay : false, |
|||
duration : 300, |
|||
|
|||
onChange : function(){}, |
|||
onShow : function(){}, |
|||
onHide : function(){}, |
|||
|
|||
className: { |
|||
active : 'active', |
|||
pushed : 'pushed', |
|||
top : 'top', |
|||
left : 'left', |
|||
right : 'right', |
|||
bottom : 'bottom' |
|||
}, |
|||
|
|||
selector: { |
|||
sidebar: '.ui.sidebar' |
|||
}, |
|||
|
|||
error : { |
|||
method : 'The method you called is not defined.', |
|||
notFound : 'There were no elements that matched the specified selector' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,262 +0,0 @@ |
|||
/* |
|||
* # Semantic - Sidebar |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
/******************************* |
|||
Sidebar |
|||
*******************************/ |
|||
|
|||
body { |
|||
-webkit-transition: |
|||
margin 0.3s ease, |
|||
-webkit-transform 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin 0.3s ease, |
|||
-moz-transform 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
transition: |
|||
margin 0.3s ease, |
|||
transform 0.3s ease |
|||
; |
|||
} |
|||
|
|||
.ui.sidebar { |
|||
position: fixed; |
|||
|
|||
margin: 0 !important; |
|||
|
|||
height: 100% !important; |
|||
|
|||
-webkit-border-radius: 0px !important; |
|||
-moz-border-radius: 0px !important; |
|||
border-radius: 0px !important; |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-ms-overflow-y: auto; |
|||
overflow-y: auto; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 999; |
|||
|
|||
-webkit-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-moz-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-o-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
-ms-transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
transition: |
|||
margin-left 0.3s ease, |
|||
margin-top 0.3s ease |
|||
; |
|||
} |
|||
|
|||
/*------------------- |
|||
Coupling |
|||
--------------------*/ |
|||
|
|||
body.pushed.scrolling.ui.dimmable { |
|||
position: static; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Direction |
|||
--------------------*/ |
|||
|
|||
.ui.right.very.thin.sidebar, |
|||
.ui.right.thin.sidebar, |
|||
.ui.right.sidebar, |
|||
.ui.right.wide.sidebar, |
|||
.ui.right.very.wide.sidebar { |
|||
left: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
.ui.top.sidebar { |
|||
width: 100% !important; |
|||
} |
|||
|
|||
.ui.bottom.sidebar { |
|||
width: 100% !important; |
|||
top: 100%; |
|||
margin: 0px !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.active.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.top.sidebar, |
|||
.ui.active.bottom.sidebar { |
|||
margin-top: 0px !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Formatted |
|||
--------------------*/ |
|||
|
|||
.ui.styled.sidebar { |
|||
padding: 1em 1.5em; |
|||
background-color: #FFFFFF; |
|||
box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.1); |
|||
} |
|||
.ui.styled.very.thin.sidebar { |
|||
padding: 0.5em; |
|||
} |
|||
.ui.styled.thin.sidebar { |
|||
padding: 1em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Floating |
|||
--------------------*/ |
|||
|
|||
.ui.floating.sidebar { |
|||
-webkit-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.right.floating.sidebar { |
|||
-webkit-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
box-shadow: -2px 0px 2px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.top.floating.sidebar { |
|||
-webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
.ui.bottom.floating.sidebar { |
|||
-webkit-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); |
|||
-moz-box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); |
|||
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.2); |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Width |
|||
--------------------*/ |
|||
|
|||
/* Very Thin */ |
|||
.ui.very.thin.sidebar { |
|||
width: 60px !important; |
|||
margin-left: -60px !important; |
|||
} |
|||
.ui.active.very.thin.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.very.thin.sidebar { |
|||
margin-left: -60px !important; |
|||
} |
|||
|
|||
/* Thin */ |
|||
.ui.thin.sidebar { |
|||
width: 200px !important; |
|||
margin-left: -200px !important; |
|||
} |
|||
.ui.active.thin.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.thin.sidebar { |
|||
margin-left: -200px !important; |
|||
} |
|||
|
|||
/* Standard */ |
|||
.ui.sidebar { |
|||
width: 275px !important; |
|||
margin-left: -275px !important; |
|||
} |
|||
.ui.active.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.sidebar { |
|||
margin-left: -275px !important; |
|||
} |
|||
|
|||
/* Wide */ |
|||
.ui.wide.sidebar { |
|||
width: 350px !important; |
|||
margin-left: -350px !important; |
|||
} |
|||
.ui.active.wide.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.wide.sidebar { |
|||
margin-left: -350px !important; |
|||
} |
|||
|
|||
/* Very Wide */ |
|||
.ui.very.wide.sidebar { |
|||
width: 475px !important; |
|||
margin-left: -475px !important; |
|||
} |
|||
.ui.active.very.wide.sidebar { |
|||
margin-left: 0px !important; |
|||
} |
|||
.ui.active.right.very.wide.sidebar { |
|||
margin-left: -475px !important; |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Height |
|||
--------------------*/ |
|||
|
|||
/* Standard */ |
|||
.ui.top.sidebar { |
|||
margin: -40px 0px 0px 0px !important; |
|||
} |
|||
.ui.top.sidebar, |
|||
.ui.bottom.sidebar { |
|||
height: 40px !important; |
|||
} |
|||
.ui.active.bottom.sidebar { |
|||
margin-top: -40px !important; |
|||
} |
|||
@ -1,641 +0,0 @@ |
|||
/* |
|||
* # Semantic - Sticky |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.sticky = 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.sticky.settings, parameters), |
|||
|
|||
className = settings.className, |
|||
namespace = settings.namespace, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$window = $(window), |
|||
$container = $module.offsetParent(), |
|||
$context, |
|||
|
|||
selector = $module.selector || '', |
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); }, |
|||
|
|||
element = this, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.verbose('Initializing sticky', settings); |
|||
|
|||
if(settings.context) { |
|||
$context = $(settings.context); |
|||
} |
|||
else { |
|||
$context = $container; |
|||
} |
|||
|
|||
$window |
|||
.on('resize' + eventNamespace, module.event.resize) |
|||
.on('scroll' + eventNamespace, module.event.scroll) |
|||
; |
|||
|
|||
module.save.positions(); |
|||
|
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module'); |
|||
module.reset(); |
|||
$window |
|||
.off('resize', module.event.resize) |
|||
.off('scroll', module.event.scroll) |
|||
; |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
resize: function() { |
|||
requestAnimationFrame(module.refresh); |
|||
}, |
|||
scroll: function() { |
|||
requestAnimationFrame(function() { |
|||
module.stick(); |
|||
$.proxy(settings.onScroll, element)(); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.reset(); |
|||
module.save.positions(); |
|||
$.proxy(settings.onReposition, element)(); |
|||
}, |
|||
|
|||
save: { |
|||
scroll: function(scroll) { |
|||
module.lastScroll = scroll; |
|||
}, |
|||
positions: function() { |
|||
var |
|||
window = { |
|||
height: $window.height() |
|||
}, |
|||
element = { |
|||
margin: { |
|||
top : parseInt($module.css('margin-top'), 10), |
|||
bottom : parseInt($module.css('margin-bottom'), 10), |
|||
}, |
|||
offset : $module.offset(), |
|||
width : $module.outerWidth(), |
|||
height : $module.outerHeight() |
|||
}, |
|||
context = { |
|||
offset: $context.offset(), |
|||
height: $context.outerHeight() |
|||
} |
|||
; |
|||
module.cache = { |
|||
fits : ( element.height < $window.height() ), |
|||
window: { |
|||
height: window.height |
|||
}, |
|||
element: { |
|||
margin : element.margin, |
|||
top : element.offset.top - element.margin.top, |
|||
width : element.width, |
|||
height : element.height, |
|||
bottom : element.offset.top + element.height |
|||
}, |
|||
context: { |
|||
top : context.offset.top, |
|||
height : context.height, |
|||
bottom : context.offset.top + context.height |
|||
} |
|||
}; |
|||
module.set.containerSize(); |
|||
module.set.size(); |
|||
module.stick(); |
|||
module.debug('Caching element positions', module.cache); |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
direction: function(scroll) { |
|||
var |
|||
direction = 'down' |
|||
; |
|||
scroll = scroll || $window.scrollTop(); |
|||
if(module.lastScroll !== undefined) { |
|||
if(module.lastScroll < scroll) { |
|||
direction = 'down'; |
|||
} |
|||
else if(module.lastScroll > scroll) { |
|||
direction = 'up'; |
|||
} |
|||
} |
|||
return direction; |
|||
}, |
|||
currentOffset: function() { |
|||
return ( module.is.top() ) |
|||
? parseInt($module.css('top'), 10) || 0 |
|||
: parseInt($module.css('bottom'), 10) || 0 |
|||
; |
|||
}, |
|||
offsetChange: function(scroll) { |
|||
scroll = scroll || $window.scrollTop(); |
|||
return (module.lastScroll) |
|||
? Math.abs(scroll - module.lastScroll) |
|||
: 0 |
|||
; |
|||
}, |
|||
newOffset: function(scroll) { |
|||
scroll = scroll || $window.scrollTop(); |
|||
var |
|||
currentOffset = module.get.currentOffset(), |
|||
delta = module.get.offsetChange(scroll) |
|||
; |
|||
return Math.abs(currentOffset - delta); |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
containerSize: function() { |
|||
if($module.is(':visible') && $container.get(0).tagName === 'HTML') { |
|||
module.error(error.container, $container.get(0), $container.get(0).tagName); |
|||
} |
|||
else { |
|||
module.debug('Settings container size', module.cache.context.height); |
|||
$container.height(module.cache.context.height); |
|||
} |
|||
}, |
|||
size: function() { |
|||
$module |
|||
.css({ |
|||
width: module.cache.element.width, |
|||
height: module.cache.element.height |
|||
}) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
top: function() { |
|||
return $module.hasClass(className.top); |
|||
}, |
|||
bottom: function() { |
|||
return $module.hasClass(className.bottom); |
|||
}, |
|||
bound: function() { |
|||
return $module.hasClass(className.bound); |
|||
}, |
|||
fixed: function() { |
|||
return $module.hasClass(className.fixed); |
|||
} |
|||
}, |
|||
|
|||
stick: function() { |
|||
var |
|||
cache = module.cache, |
|||
fits = cache.fits, |
|||
element = cache.element, |
|||
window = cache.window, |
|||
context = cache.context, |
|||
scrollTop = $window.scrollTop(), |
|||
screen = { |
|||
top : scrollTop + settings.offset, |
|||
bottom : scrollTop + window.height + settings.offset |
|||
}, |
|||
direction = module.get.direction(scrollTop), |
|||
currentOffset = module.get.currentOffset(), |
|||
newOffset = module.get.newOffset(scrollTop), |
|||
elementPassed = (screen.bottom > element.top + element.height), |
|||
bottomEdge = (cache.element.height + screen.top) |
|||
; |
|||
module.save.scroll(scrollTop); |
|||
if( module.is.fixed() ) { |
|||
if(fits) { |
|||
// exit top of container
|
|||
if(module.is.top()) { |
|||
if( screen.top < element.top ) { |
|||
module.unfix(); |
|||
} |
|||
else if( bottomEdge > context.bottom ) { |
|||
module.debug('Top attached rail has reached bottom of container'); |
|||
module.bindBottom(); |
|||
} |
|||
} |
|||
if(module.is.bottom() ) { |
|||
// top edge
|
|||
if( (screen.bottom - element.height) < element.top) { |
|||
module.unfix(); |
|||
} |
|||
// bottom edge
|
|||
else if(screen.bottom > context.bottom) { |
|||
module.debug('Bottom attached rail has reached bottom of container'); |
|||
module.bindBottom(); |
|||
} |
|||
} |
|||
if( bottomEdge > context.bottom ) { |
|||
module.bindBottom(); |
|||
} |
|||
} |
|||
else { |
|||
if(screen.bottom > context.bottom) { |
|||
module.bindBottom(); |
|||
} |
|||
else if(elementPassed) { |
|||
if(module.is.top() && direction == 'down') { |
|||
module.debug('Stuck content at bottom edge'); |
|||
if(newOffset >= (element.height - window.height)) { |
|||
$module |
|||
.css('top', '') |
|||
; |
|||
module.stickBottom(); |
|||
} |
|||
else { |
|||
$module |
|||
.css('top', -newOffset) |
|||
; |
|||
} |
|||
} |
|||
if(module.is.bottom() && direction == 'up') { |
|||
module.debug('Stuck content at top edge'); |
|||
if(newOffset >= (element.height - window.height)) { |
|||
$module |
|||
.css('bottom', '') |
|||
; |
|||
module.stickTop(); |
|||
} |
|||
else { |
|||
$module |
|||
.css('bottom', -newOffset) |
|||
; |
|||
} |
|||
} |
|||
} |
|||
else { |
|||
module.unfix(); |
|||
} |
|||
} |
|||
} |
|||
else { |
|||
if(fits) { |
|||
// fix to bottom of screen on way back up
|
|||
if(module.is.bottom() ) { |
|||
if(settings.pushing) { |
|||
if(module.is.bound() && screen.bottom < context.bottom ) { |
|||
module.stickBottom(); |
|||
} |
|||
} |
|||
else { |
|||
if(module.is.bound() && screen.top < context.bottom - element.height) { |
|||
module.stickTop(); |
|||
} |
|||
} |
|||
} |
|||
else if(screen.top > element.top && screen.top < context.bottom - element.height) { |
|||
module.stickTop(); |
|||
} |
|||
} |
|||
else { |
|||
if(elementPassed && screen.bottom < context.bottom ) { |
|||
module.stickBottom(); |
|||
} |
|||
} |
|||
|
|||
} |
|||
}, |
|||
|
|||
bindTop: function() { |
|||
module.debug('Binding element to top of parent container'); |
|||
$module |
|||
.removeClass(className.fixed) |
|||
.removeClass(className.bottom) |
|||
.addClass(className.bound) |
|||
.addClass(className.top) |
|||
; |
|||
$.proxy(settings.onTop, element)(); |
|||
$.proxy(settings.onUnstick, element)(); |
|||
}, |
|||
bindBottom: function() { |
|||
module.debug('Binding element to bottom of parent container'); |
|||
$module |
|||
.removeClass(className.fixed) |
|||
.removeClass(className.top) |
|||
.addClass(className.bound) |
|||
.addClass(className.bottom) |
|||
; |
|||
$.proxy(settings.onBottom, element)(); |
|||
$.proxy(settings.onUnstick, element)(); |
|||
}, |
|||
|
|||
stickTop: function() { |
|||
module.debug('Fixing element to top of page'); |
|||
$module |
|||
.removeClass(className.bound) |
|||
.removeClass(className.bottom) |
|||
.addClass(className.fixed) |
|||
.addClass(className.top) |
|||
; |
|||
$.proxy(settings.onStick, element)(); |
|||
}, |
|||
|
|||
stickBottom: function() { |
|||
module.debug('Sticking element to bottom of page'); |
|||
$module |
|||
.removeClass(className.bound) |
|||
.removeClass(className.top) |
|||
.addClass(className.fixed) |
|||
.addClass(className.bottom) |
|||
; |
|||
$.proxy(settings.onStick, element)(); |
|||
}, |
|||
|
|||
unbind: function() { |
|||
module.debug('Removing absolute position on element'); |
|||
$module |
|||
.removeClass(className.bound) |
|||
.removeClass(className.top) |
|||
.removeClass(className.bottom) |
|||
; |
|||
}, |
|||
|
|||
unfix: function() { |
|||
module.debug('Removing fixed position on element'); |
|||
$module |
|||
.removeClass(className.fixed) |
|||
.removeClass(className.top) |
|||
.removeClass(className.bottom) |
|||
; |
|||
$.proxy(settings.onUnstick, this)(); |
|||
}, |
|||
|
|||
reset: function() { |
|||
module.debug('Reseting elements position'); |
|||
module.unbind(); |
|||
module.unfix(); |
|||
$module |
|||
.css({ |
|||
top : '', |
|||
bottom : '', |
|||
width : '', |
|||
height : '' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.sticky.settings = { |
|||
|
|||
name : 'Sticky', |
|||
namespace : 'sticky', |
|||
|
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
|
|||
pushing : false, |
|||
|
|||
context : false, |
|||
offset : 0, |
|||
|
|||
onReposition : function(){}, |
|||
onScroll : function(){}, |
|||
onStick : function(){}, |
|||
onUnstick : function(){}, |
|||
onTop : function(){}, |
|||
onBottom : function(){}, |
|||
|
|||
error : { |
|||
container: 'Sticky element must be inside a relative container', |
|||
method : 'The method you called is not defined.' |
|||
}, |
|||
|
|||
className : { |
|||
bound : 'bound', |
|||
fixed : 'fixed', |
|||
top : 'top', |
|||
bottom : 'bottom' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,24 +0,0 @@ |
|||
.ui.sticky { |
|||
position: static; |
|||
} |
|||
|
|||
.ui.sticky.bound { |
|||
position: absolute; |
|||
left: auto; |
|||
right: auto; |
|||
} |
|||
.ui.sticky.fixed { |
|||
position: fixed; |
|||
left: auto; |
|||
right: auto; |
|||
} |
|||
.ui.sticky.bound.top, |
|||
.ui.sticky.fixed.top { |
|||
top: 0px; |
|||
bottom: auto; |
|||
} |
|||
.ui.sticky.bound.bottom, |
|||
.ui.sticky.fixed.bottom { |
|||
top: auto; |
|||
bottom: 0px; |
|||
} |
|||
@ -1,710 +0,0 @@ |
|||
/* |
|||
* # Semantic - Tab |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.tab = function(parameters) { |
|||
|
|||
var |
|||
settings = $.extend(true, {}, $.fn.tab.settings, parameters), |
|||
|
|||
$module = $(this), |
|||
$tabs = $(settings.context).find(settings.selector.tabs), |
|||
|
|||
moduleSelector = $module.selector || '', |
|||
|
|||
cache = {}, |
|||
firstLoad = true, |
|||
recursionDepth = 0, |
|||
|
|||
activeTabPath, |
|||
parameterArray, |
|||
historyEvent, |
|||
|
|||
element = this, |
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
className = settings.className, |
|||
metadata = settings.metadata, |
|||
error = settings.error, |
|||
|
|||
eventNamespace = '.' + settings.namespace, |
|||
moduleNamespace = 'module-' + settings.namespace, |
|||
|
|||
instance = $module.data(moduleNamespace), |
|||
|
|||
query = arguments[0], |
|||
methodInvoked = (instance !== undefined && typeof query == 'string'), |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
|
|||
module, |
|||
returnedValue |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing Tabs', $module); |
|||
|
|||
// set up automatic routing
|
|||
if(settings.auto) { |
|||
module.verbose('Setting up automatic tab retrieval from server'); |
|||
settings.apiSettings = { |
|||
url: settings.path + '/{$tab}' |
|||
}; |
|||
} |
|||
|
|||
// attach history events
|
|||
if(settings.history) { |
|||
module.debug('Initializing page state'); |
|||
if( $.address === undefined ) { |
|||
module.error(error.state); |
|||
return false; |
|||
} |
|||
else { |
|||
if(settings.historyType == 'hash') { |
|||
module.debug('Using hash state change to manage state'); |
|||
} |
|||
if(settings.historyType == 'html5') { |
|||
module.debug('Using HTML5 to manage state'); |
|||
if(settings.path !== false) { |
|||
$.address |
|||
.history(true) |
|||
.state(settings.path) |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.path); |
|||
return false; |
|||
} |
|||
} |
|||
$.address |
|||
.unbind('change') |
|||
.bind('change', module.event.history.change) |
|||
; |
|||
} |
|||
} |
|||
|
|||
// attach events if navigation wasn't set to window
|
|||
if( !$.isWindow( element ) ) { |
|||
module.debug('Attaching tab activation events to element', $module); |
|||
$module |
|||
.on('click' + eventNamespace, module.event.click) |
|||
; |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function () { |
|||
module.verbose('Storing instance of module', module); |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.debug('Destroying tabs', $module); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
event: { |
|||
click: function(event) { |
|||
var |
|||
tabPath = $(this).data(metadata.tab) |
|||
; |
|||
if(tabPath !== undefined) { |
|||
if(settings.history) { |
|||
module.verbose('Updating page state', event); |
|||
$.address.value(tabPath); |
|||
} |
|||
else { |
|||
module.verbose('Changing tab without state management', event); |
|||
module.changeTab(tabPath); |
|||
} |
|||
event.preventDefault(); |
|||
} |
|||
else { |
|||
module.debug('No tab specified'); |
|||
} |
|||
}, |
|||
history: { |
|||
change: function(event) { |
|||
var |
|||
tabPath = event.pathNames.join('/') || module.get.initialPath(), |
|||
pageTitle = settings.templates.determineTitle(tabPath) || false |
|||
; |
|||
module.debug('History change event', tabPath, event); |
|||
historyEvent = event; |
|||
if(tabPath !== undefined) { |
|||
module.changeTab(tabPath); |
|||
} |
|||
if(pageTitle) { |
|||
$.address.title(pageTitle); |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
refresh: function() { |
|||
if(activeTabPath) { |
|||
module.debug('Refreshing tab', activeTabPath); |
|||
module.changeTab(activeTabPath); |
|||
} |
|||
}, |
|||
|
|||
cache: { |
|||
|
|||
read: function(cacheKey) { |
|||
return (cacheKey !== undefined) |
|||
? cache[cacheKey] |
|||
: false |
|||
; |
|||
}, |
|||
add: function(cacheKey, content) { |
|||
cacheKey = cacheKey || activeTabPath; |
|||
module.debug('Adding cached content for', cacheKey); |
|||
cache[cacheKey] = content; |
|||
}, |
|||
remove: function(cacheKey) { |
|||
cacheKey = cacheKey || activeTabPath; |
|||
module.debug('Removing cached content for', cacheKey); |
|||
delete cache[cacheKey]; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
state: function(url) { |
|||
$.address.value(url); |
|||
} |
|||
}, |
|||
|
|||
changeTab: function(tabPath) { |
|||
var |
|||
pushStateAvailable = (window.history && window.history.pushState), |
|||
shouldIgnoreLoad = (pushStateAvailable && settings.ignoreFirstLoad && firstLoad), |
|||
remoteContent = (settings.auto || $.isPlainObject(settings.apiSettings) ), |
|||
// only get default path if not remote content
|
|||
pathArray = (remoteContent && !shouldIgnoreLoad) |
|||
? module.utilities.pathToArray(tabPath) |
|||
: module.get.defaultPathArray(tabPath) |
|||
; |
|||
tabPath = module.utilities.arrayToPath(pathArray); |
|||
module.deactivate.all(); |
|||
$.each(pathArray, function(index, tab) { |
|||
var |
|||
currentPathArray = pathArray.slice(0, index + 1), |
|||
currentPath = module.utilities.arrayToPath(currentPathArray), |
|||
|
|||
isTab = module.is.tab(currentPath), |
|||
isLastIndex = (index + 1 == pathArray.length), |
|||
|
|||
$tab = module.get.tabElement(currentPath), |
|||
nextPathArray, |
|||
nextPath, |
|||
isLastTab |
|||
; |
|||
module.verbose('Looking for tab', tab); |
|||
if(isTab) { |
|||
module.verbose('Tab was found', tab); |
|||
|
|||
// scope up
|
|||
activeTabPath = currentPath; |
|||
parameterArray = module.utilities.filterArray(pathArray, currentPathArray); |
|||
|
|||
if(isLastIndex) { |
|||
isLastTab = true; |
|||
} |
|||
else { |
|||
nextPathArray = pathArray.slice(0, index + 2); |
|||
nextPath = module.utilities.arrayToPath(nextPathArray); |
|||
isLastTab = ( !module.is.tab(nextPath) ); |
|||
if(isLastTab) { |
|||
module.verbose('Tab parameters found', nextPathArray); |
|||
} |
|||
} |
|||
if(isLastTab && remoteContent) { |
|||
if(!shouldIgnoreLoad) { |
|||
module.activate.navigation(currentPath); |
|||
module.content.fetch(currentPath, tabPath); |
|||
} |
|||
else { |
|||
module.debug('Ignoring remote content on first tab load', currentPath); |
|||
firstLoad = false; |
|||
module.cache.add(tabPath, $tab.html()); |
|||
module.activate.all(currentPath); |
|||
$.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); |
|||
$.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); |
|||
} |
|||
return false; |
|||
} |
|||
else { |
|||
module.debug('Opened local tab', currentPath); |
|||
module.activate.all(currentPath); |
|||
if( !module.cache.read(currentPath) ) { |
|||
module.cache.add(currentPath, true); |
|||
module.debug('First time tab loaded calling tab init'); |
|||
$.proxy(settings.onTabInit, $tab)(currentPath, parameterArray, historyEvent); |
|||
} |
|||
$.proxy(settings.onTabLoad, $tab)(currentPath, parameterArray, historyEvent); |
|||
} |
|||
} |
|||
else { |
|||
module.error(error.missingTab, tab); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
content: { |
|||
|
|||
fetch: function(tabPath, fullTabPath) { |
|||
var |
|||
$tab = module.get.tabElement(tabPath), |
|||
apiSettings = { |
|||
dataType : 'html', |
|||
stateContext : $tab, |
|||
success : function(response) { |
|||
module.cache.add(fullTabPath, response); |
|||
module.content.update(tabPath, response); |
|||
if(tabPath == activeTabPath) { |
|||
module.debug('Content loaded', tabPath); |
|||
module.activate.tab(tabPath); |
|||
} |
|||
else { |
|||
module.debug('Content loaded in background', tabPath); |
|||
} |
|||
$.proxy(settings.onTabInit, $tab)(tabPath, parameterArray, historyEvent); |
|||
$.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); |
|||
}, |
|||
urlData: { tab: fullTabPath } |
|||
}, |
|||
request = $tab.data(metadata.promise) || false, |
|||
existingRequest = ( request && request.state() === 'pending' ), |
|||
requestSettings, |
|||
cachedContent |
|||
; |
|||
|
|||
fullTabPath = fullTabPath || tabPath; |
|||
cachedContent = module.cache.read(fullTabPath); |
|||
|
|||
if(settings.cache && cachedContent) { |
|||
module.debug('Showing existing content', fullTabPath); |
|||
module.content.update(tabPath, cachedContent); |
|||
module.activate.tab(tabPath); |
|||
$.proxy(settings.onTabLoad, $tab)(tabPath, parameterArray, historyEvent); |
|||
} |
|||
else if(existingRequest) { |
|||
module.debug('Content is already loading', fullTabPath); |
|||
$tab |
|||
.addClass(className.loading) |
|||
; |
|||
} |
|||
else if($.api !== undefined) { |
|||
console.log(settings.apiSettings); |
|||
requestSettings = $.extend(true, { headers: { 'X-Remote': true } }, settings.apiSettings, apiSettings); |
|||
module.debug('Retrieving remote content', fullTabPath, requestSettings); |
|||
$.api( requestSettings ); |
|||
} |
|||
else { |
|||
module.error(error.api); |
|||
} |
|||
}, |
|||
|
|||
update: function(tabPath, html) { |
|||
module.debug('Updating html for', tabPath); |
|||
var |
|||
$tab = module.get.tabElement(tabPath) |
|||
; |
|||
$tab |
|||
.html(html) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
activate: { |
|||
all: function(tabPath) { |
|||
module.activate.tab(tabPath); |
|||
module.activate.navigation(tabPath); |
|||
}, |
|||
tab: function(tabPath) { |
|||
var |
|||
$tab = module.get.tabElement(tabPath) |
|||
; |
|||
module.verbose('Showing tab content for', $tab); |
|||
$tab.addClass(className.active); |
|||
}, |
|||
navigation: function(tabPath) { |
|||
var |
|||
$navigation = module.get.navElement(tabPath) |
|||
; |
|||
module.verbose('Activating tab navigation for', $navigation, tabPath); |
|||
$navigation.addClass(className.active); |
|||
} |
|||
}, |
|||
|
|||
deactivate: { |
|||
all: function() { |
|||
module.deactivate.navigation(); |
|||
module.deactivate.tabs(); |
|||
}, |
|||
navigation: function() { |
|||
$module |
|||
.removeClass(className.active) |
|||
; |
|||
}, |
|||
tabs: function() { |
|||
$tabs |
|||
.removeClass(className.active + ' ' + className.loading) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
tab: function(tabName) { |
|||
return (tabName !== undefined) |
|||
? ( module.get.tabElement(tabName).size() > 0 ) |
|||
: false |
|||
; |
|||
} |
|||
}, |
|||
|
|||
get: { |
|||
initialPath: function() { |
|||
return $module.eq(0).data(metadata.tab) || $tabs.eq(0).data(metadata.tab); |
|||
}, |
|||
path: function() { |
|||
return $.address.value(); |
|||
}, |
|||
// adds default tabs to tab path
|
|||
defaultPathArray: function(tabPath) { |
|||
return module.utilities.pathToArray( module.get.defaultPath(tabPath) ); |
|||
}, |
|||
defaultPath: function(tabPath) { |
|||
var |
|||
$defaultNav = $module.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0), |
|||
defaultTab = $defaultNav.data(metadata.tab) || false |
|||
; |
|||
if( defaultTab ) { |
|||
module.debug('Found default tab', defaultTab); |
|||
if(recursionDepth < settings.maxDepth) { |
|||
recursionDepth++; |
|||
return module.get.defaultPath(defaultTab); |
|||
} |
|||
module.error(error.recursion); |
|||
} |
|||
else { |
|||
module.debug('No default tabs found for', tabPath, $tabs); |
|||
} |
|||
recursionDepth = 0; |
|||
return tabPath; |
|||
}, |
|||
navElement: function(tabPath) { |
|||
tabPath = tabPath || activeTabPath; |
|||
return $module.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); |
|||
}, |
|||
tabElement: function(tabPath) { |
|||
var |
|||
$fullPathTab, |
|||
$simplePathTab, |
|||
tabPathArray, |
|||
lastTab |
|||
; |
|||
tabPath = tabPath || activeTabPath; |
|||
tabPathArray = module.utilities.pathToArray(tabPath); |
|||
lastTab = module.utilities.last(tabPathArray); |
|||
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); |
|||
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); |
|||
return ($fullPathTab.size() > 0) |
|||
? $fullPathTab |
|||
: $simplePathTab |
|||
; |
|||
}, |
|||
tab: function() { |
|||
return activeTabPath; |
|||
} |
|||
}, |
|||
|
|||
utilities: { |
|||
filterArray: function(keepArray, removeArray) { |
|||
return $.grep(keepArray, function(keepValue) { |
|||
return ( $.inArray(keepValue, removeArray) == -1); |
|||
}); |
|||
}, |
|||
last: function(array) { |
|||
return $.isArray(array) |
|||
? array[ array.length - 1] |
|||
: false |
|||
; |
|||
}, |
|||
pathToArray: function(pathName) { |
|||
if(pathName === undefined) { |
|||
pathName = activeTabPath; |
|||
} |
|||
return typeof pathName == 'string' |
|||
? pathName.split('/') |
|||
: [pathName] |
|||
; |
|||
}, |
|||
arrayToPath: function(pathArray) { |
|||
return $.isArray(pathArray) |
|||
? pathArray.join('/') |
|||
: false |
|||
; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
|
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
|
|||
}; |
|||
|
|||
// shortcut for tabbed content with no defined navigation
|
|||
$.tab = function(settings) { |
|||
$(window).tab(settings); |
|||
}; |
|||
|
|||
$.fn.tab.settings = { |
|||
|
|||
name : 'Tab', |
|||
verbose : true, |
|||
debug : true, |
|||
performance : true, |
|||
namespace : 'tab', |
|||
|
|||
// only called first time a tab's content is loaded (when remote source)
|
|||
onTabInit : function(tabPath, parameterArray, historyEvent) {}, |
|||
// called on every load
|
|||
onTabLoad : function(tabPath, parameterArray, historyEvent) {}, |
|||
|
|||
templates : { |
|||
determineTitle: function(tabArray) {} |
|||
}, |
|||
|
|||
// uses pjax style endpoints fetching content from same url with remote-content headers
|
|||
auto : false, |
|||
history : true, |
|||
historyType : 'hash', |
|||
path : false, |
|||
|
|||
context : 'body', |
|||
|
|||
// max depth a tab can be nested
|
|||
maxDepth : 25, |
|||
// dont load content on first load
|
|||
ignoreFirstLoad : false, |
|||
// load tab content new every tab click
|
|||
alwaysRefresh : false, |
|||
// cache the content requests to pull locally
|
|||
cache : true, |
|||
// settings for api call
|
|||
apiSettings : false, |
|||
|
|||
error: { |
|||
api : 'You attempted to load content without API module', |
|||
method : 'The method you called is not defined', |
|||
missingTab : 'Tab cannot be found', |
|||
noContent : 'The tab you specified is missing a content url.', |
|||
path : 'History enabled, but no path was specified', |
|||
recursion : 'Max recursive depth reached', |
|||
state : 'The state library has not been initialized' |
|||
}, |
|||
|
|||
metadata : { |
|||
tab : 'tab', |
|||
loaded : 'loaded', |
|||
promise: 'promise' |
|||
}, |
|||
|
|||
className : { |
|||
loading : 'loading', |
|||
active : 'active' |
|||
}, |
|||
|
|||
selector : { |
|||
tabs : '.ui.tab' |
|||
} |
|||
|
|||
}; |
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,63 +0,0 @@ |
|||
/* |
|||
* # Semantic - Tab |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
UI Tabs |
|||
*******************************/ |
|||
|
|||
.ui.tab { |
|||
display: none; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Active |
|||
---------------------*/ |
|||
|
|||
.ui.tab.active, |
|||
.ui.tab.open { |
|||
display: block; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Loading |
|||
---------------------*/ |
|||
|
|||
.ui.tab.loading { |
|||
position: relative; |
|||
overflow: hidden; |
|||
display: block; |
|||
min-height: 250px; |
|||
} |
|||
.ui.tab.loading * { |
|||
position: relative !important; |
|||
left: -10000px !important; |
|||
} |
|||
.ui.tab.loading:after { |
|||
border: none; |
|||
position: absolute; |
|||
top: 50px; |
|||
left: 50%; |
|||
content: 'Loading...'; |
|||
margin-left: -32px; |
|||
text-indent: 10px; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
width: 100%; |
|||
height: 100%; |
|||
padding-top: 80px; |
|||
background: url(../../themes/packages/default/assets/images/loader-large.gif) no-repeat 0px 0px; |
|||
visibility: visible; |
|||
} |
|||
@ -1,820 +0,0 @@ |
|||
/* |
|||
* # Semantic - Transition |
|||
* http://github.com/semantic-org/semantic-ui/
|
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT
|
|||
* |
|||
*/ |
|||
|
|||
;(function ( $, window, document, undefined ) { |
|||
|
|||
$.fn.transition = function() { |
|||
var |
|||
$allModules = $(this), |
|||
moduleSelector = $allModules.selector || '', |
|||
|
|||
time = new Date().getTime(), |
|||
performance = [], |
|||
|
|||
moduleArguments = arguments, |
|||
query = moduleArguments[0], |
|||
queryArguments = [].slice.call(arguments, 1), |
|||
methodInvoked = (typeof query === 'string'), |
|||
|
|||
requestAnimationFrame = window.requestAnimationFrame |
|||
|| window.mozRequestAnimationFrame |
|||
|| window.webkitRequestAnimationFrame |
|||
|| window.msRequestAnimationFrame |
|||
|| function(callback) { setTimeout(callback, 0); }, |
|||
|
|||
returnedValue |
|||
; |
|||
$allModules |
|||
.each(function() { |
|||
var |
|||
$module = $(this), |
|||
element = this, |
|||
|
|||
// set at run time
|
|||
settings, |
|||
instance, |
|||
|
|||
error, |
|||
className, |
|||
metadata, |
|||
animationEnd, |
|||
animationName, |
|||
|
|||
namespace, |
|||
moduleNamespace, |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
// get settings
|
|||
settings = module.get.settings.apply(element, moduleArguments); |
|||
module.verbose('Converted arguments into settings object', settings); |
|||
|
|||
// set shortcuts
|
|||
error = settings.error; |
|||
className = settings.className; |
|||
namespace = settings.namespace; |
|||
metadata = settings.metadata; |
|||
moduleNamespace = 'module-' + namespace; |
|||
|
|||
animationEnd = module.get.animationEvent(); |
|||
animationName = module.get.animationName(); |
|||
|
|||
instance = $module.data(moduleNamespace) || module; |
|||
|
|||
if(methodInvoked) { |
|||
methodInvoked = module.invoke(query); |
|||
} |
|||
// no internal method was found matching query or query not made
|
|||
if(methodInvoked === false) { |
|||
module.animate(); |
|||
} |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
$module |
|||
.data(moduleNamespace, instance) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous module for', element); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
; |
|||
}, |
|||
|
|||
refresh: function() { |
|||
module.verbose('Refreshing display type on next animation'); |
|||
delete instance.displayType; |
|||
}, |
|||
|
|||
forceRepaint: function() { |
|||
module.verbose('Forcing element repaint'); |
|||
var |
|||
$parentElement = $module.parent(), |
|||
$nextElement = $module.next() |
|||
; |
|||
if($nextElement.size() === 0) { |
|||
$module.detach().appendTo($parentElement); |
|||
} |
|||
else { |
|||
$module.detach().insertBefore($nextElement); |
|||
} |
|||
}, |
|||
|
|||
repaint: function() { |
|||
module.verbose('Repainting element'); |
|||
var |
|||
fakeAssignment = element.offsetWidth |
|||
; |
|||
}, |
|||
|
|||
animate: function(overrideSettings) { |
|||
settings = overrideSettings || settings; |
|||
if(!module.is.supported()) { |
|||
module.error(error.support); |
|||
return false; |
|||
} |
|||
module.debug('Preparing animation', settings.animation); |
|||
if(module.is.animating() && settings.queue) { |
|||
if(!settings.allowRepeats && module.has.direction() && module.is.occuring() && instance.queuing !== true) { |
|||
module.error(error.repeated); |
|||
} |
|||
else { |
|||
module.queue(settings.animation); |
|||
} |
|||
return false; |
|||
} |
|||
if(module.can.animate) { |
|||
module.set.animating(settings.animation); |
|||
} |
|||
else { |
|||
module.error(error.noAnimation, settings.animation); |
|||
} |
|||
}, |
|||
|
|||
reset: function() { |
|||
module.debug('Resetting animation to beginning conditions'); |
|||
$module.off(animationEnd); |
|||
module.restore.conditions(); |
|||
module.hide(); |
|||
module.remove.animating(); |
|||
}, |
|||
|
|||
queue: function(animation) { |
|||
module.debug('Queueing animation of', animation); |
|||
instance.queuing = true; |
|||
$module |
|||
.one(animationEnd, function() { |
|||
instance.queuing = false; |
|||
module.repaint(); |
|||
module.animate.apply(this, settings); |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
complete: function () { |
|||
module.verbose('CSS animation complete', settings.animation); |
|||
if(!module.is.looping()) { |
|||
if( module.is.outward() ) { |
|||
module.verbose('Animation is outward, hiding element'); |
|||
module.restore.conditions(); |
|||
module.remove.display(); |
|||
module.hide(); |
|||
$.proxy(settings.onHide, this)(); |
|||
} |
|||
else if( module.is.inward() ) { |
|||
module.verbose('Animation is outward, showing element'); |
|||
module.restore.conditions(); |
|||
module.show(); |
|||
$.proxy(settings.onShow, this)(); |
|||
} |
|||
else { |
|||
module.restore.conditions(); |
|||
} |
|||
module.remove.duration(); |
|||
module.remove.animating(); |
|||
} |
|||
$.proxy(settings.complete, this)(); |
|||
}, |
|||
|
|||
has: { |
|||
direction: function(animation) { |
|||
animation = animation || settings.animation; |
|||
if( animation.search(className.inward) !== -1 || animation.search(className.outward) !== -1) { |
|||
module.debug('Direction already set in animation'); |
|||
return true; |
|||
} |
|||
return false; |
|||
} |
|||
}, |
|||
|
|||
set: { |
|||
|
|||
animating: function(animation) { |
|||
animation = animation || settings.animation; |
|||
module.save.conditions(); |
|||
if(module.can.transition() && !module.has.direction()) { |
|||
module.set.direction(); |
|||
} |
|||
module.remove.hidden(); |
|||
module.set.display(); |
|||
$module |
|||
.addClass(className.animating) |
|||
.addClass(className.transition) |
|||
.addClass(animation) |
|||
.one(animationEnd, module.complete) |
|||
; |
|||
module.set.duration(settings.duration); |
|||
module.debug('Starting tween', settings.animation, $module.attr('class')); |
|||
}, |
|||
|
|||
display: function() { |
|||
var |
|||
style = $module.css('style'), |
|||
displayType = module.get.displayType(), |
|||
overrideStyle = style + ';display: ' + displayType + ' !important;' |
|||
; |
|||
if(displayType !== 'block') { |
|||
module.verbose('Setting final visibility to', displayType); |
|||
$module |
|||
.attr('style', overrideStyle) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
direction: function() { |
|||
if($module.is(':visible')) { |
|||
module.debug('Automatically determining the direction of animation', 'Outward'); |
|||
$module |
|||
.removeClass(className.inward) |
|||
.addClass(className.outward) |
|||
; |
|||
} |
|||
else { |
|||
module.debug('Automatically determining the direction of animation', 'Inward'); |
|||
$module |
|||
.removeClass(className.outward) |
|||
.addClass(className.inward) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
looping: function() { |
|||
module.debug('Transition set to loop'); |
|||
$module |
|||
.addClass(className.looping) |
|||
; |
|||
}, |
|||
|
|||
duration: function(duration) { |
|||
duration = duration || settings.duration; |
|||
duration = (typeof duration == 'number') |
|||
? duration + 'ms' |
|||
: duration |
|||
; |
|||
module.verbose('Setting animation duration', duration); |
|||
$module |
|||
.css({ |
|||
'-webkit-animation-duration': duration, |
|||
'-moz-animation-duration': duration, |
|||
'-ms-animation-duration': duration, |
|||
'-o-animation-duration': duration, |
|||
'animation-duration': duration |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
hidden: function() { |
|||
$module |
|||
.addClass(className.transition) |
|||
.addClass(className.hidden) |
|||
; |
|||
}, |
|||
|
|||
visible: function() { |
|||
$module |
|||
.addClass(className.transition) |
|||
.addClass(className.visible) |
|||
; |
|||
} |
|||
}, |
|||
|
|||
save: { |
|||
displayType: function(displayType) { |
|||
instance.displayType = displayType; |
|||
}, |
|||
transitionExists: function(animation, exists) { |
|||
$.fn.transition.exists[animation] = exists; |
|||
module.verbose('Saving existence of transition', animation, exists); |
|||
}, |
|||
conditions: function() { |
|||
instance.cache = { |
|||
className : $module.attr('class'), |
|||
style : $module.attr('style') |
|||
}; |
|||
module.verbose('Saving original attributes', instance.cache); |
|||
} |
|||
}, |
|||
|
|||
restore: { |
|||
conditions: function() { |
|||
if(instance.cache === undefined) { |
|||
return false; |
|||
} |
|||
if(instance.cache.className) { |
|||
$module.attr('class', instance.cache.className); |
|||
} |
|||
else { |
|||
$module.removeAttr('class'); |
|||
} |
|||
if(instance.cache.style) { |
|||
$module.attr('style', instance.cache.style); |
|||
} |
|||
else { |
|||
if(module.get.displayType() === 'block') { |
|||
$module.removeAttr('style'); |
|||
} |
|||
} |
|||
if(module.is.looping()) { |
|||
module.remove.looping(); |
|||
} |
|||
module.verbose('Restoring original attributes', instance.cache); |
|||
} |
|||
}, |
|||
|
|||
remove: { |
|||
|
|||
animating: function() { |
|||
$module.removeClass(className.animating); |
|||
}, |
|||
|
|||
display: function() { |
|||
if(instance.displayType !== undefined) { |
|||
$module.css('display', ''); |
|||
} |
|||
}, |
|||
|
|||
duration: function() { |
|||
$module |
|||
.css({ |
|||
'-webkit-animation-duration' : '', |
|||
'-moz-animation-duration' : '', |
|||
'-ms-animation-duration' : '', |
|||
'-o-animation-duration' : '', |
|||
'animation-duration' : '' |
|||
}) |
|||
; |
|||
}, |
|||
|
|||
hidden: function() { |
|||
$module.removeClass(className.hidden); |
|||
}, |
|||
|
|||
visible: function() { |
|||
$module.removeClass(className.visible); |
|||
}, |
|||
|
|||
looping: function() { |
|||
module.debug('Transitions are no longer looping'); |
|||
$module |
|||
.removeClass(className.looping) |
|||
; |
|||
module.forceRepaint(); |
|||
}, |
|||
|
|||
transition: function() { |
|||
$module |
|||
.removeClass(className.visible) |
|||
.removeClass(className.hidden) |
|||
; |
|||
} |
|||
|
|||
}, |
|||
|
|||
get: { |
|||
|
|||
settings: function(animation, duration, complete) { |
|||
// single settings object
|
|||
if(typeof animation == 'object') { |
|||
return $.extend(true, {}, $.fn.transition.settings, animation); |
|||
} |
|||
// all arguments provided
|
|||
else if(typeof complete == 'function') { |
|||
return $.extend({}, $.fn.transition.settings, { |
|||
animation : animation, |
|||
complete : complete, |
|||
duration : duration |
|||
}); |
|||
} |
|||
// only duration provided
|
|||
else if(typeof duration == 'string' || typeof duration == 'number') { |
|||
return $.extend({}, $.fn.transition.settings, { |
|||
animation : animation, |
|||
duration : duration |
|||
}); |
|||
} |
|||
// duration is actually settings object
|
|||
else if(typeof duration == 'object') { |
|||
return $.extend({}, $.fn.transition.settings, duration, { |
|||
animation : animation |
|||
}); |
|||
} |
|||
// duration is actually callback
|
|||
else if(typeof duration == 'function') { |
|||
return $.extend({}, $.fn.transition.settings, { |
|||
animation : animation, |
|||
complete : duration |
|||
}); |
|||
} |
|||
// only animation provided
|
|||
else { |
|||
return $.extend({}, $.fn.transition.settings, { |
|||
animation : animation |
|||
}); |
|||
} |
|||
return $.fn.transition.settings; |
|||
}, |
|||
|
|||
displayType: function() { |
|||
if(instance.displayType === undefined) { |
|||
// create fake element to determine display state
|
|||
module.can.transition(); |
|||
} |
|||
return instance.displayType; |
|||
}, |
|||
|
|||
transitionExists: function(animation) { |
|||
return $.fn.transition.exists[animation]; |
|||
}, |
|||
|
|||
animationName: function() { |
|||
var |
|||
element = document.createElement('div'), |
|||
animations = { |
|||
'animation' :'animationName', |
|||
'OAnimation' :'oAnimationName', |
|||
'MozAnimation' :'mozAnimationName', |
|||
'WebkitAnimation' :'webkitAnimationName' |
|||
}, |
|||
animation |
|||
; |
|||
for(animation in animations){ |
|||
if( element.style[animation] !== undefined ){ |
|||
module.verbose('Determined animation vendor name property', animations[animation]); |
|||
return animations[animation]; |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
|
|||
animationEvent: function() { |
|||
var |
|||
element = document.createElement('div'), |
|||
animations = { |
|||
'animation' :'animationend', |
|||
'OAnimation' :'oAnimationEnd', |
|||
'MozAnimation' :'mozAnimationEnd', |
|||
'WebkitAnimation' :'webkitAnimationEnd' |
|||
}, |
|||
animation |
|||
; |
|||
for(animation in animations){ |
|||
if( element.style[animation] !== undefined ){ |
|||
module.verbose('Determined animation vendor end event', animations[animation]); |
|||
return animations[animation]; |
|||
} |
|||
} |
|||
return false; |
|||
} |
|||
|
|||
}, |
|||
|
|||
can: { |
|||
animate: function() { |
|||
if($module.css(settings.animation) !== 'none') { |
|||
module.debug('CSS definition found', $module.css(settings.animation)); |
|||
return true; |
|||
} |
|||
else { |
|||
module.debug('Unable to find css definition', $module.attr('class')); |
|||
return false; |
|||
} |
|||
}, |
|||
transition: function() { |
|||
var |
|||
elementClass = $module.attr('class'), |
|||
animation = settings.animation, |
|||
transitionExists = module.get.transitionExists(settings.animation), |
|||
$clone, |
|||
currentAnimation, |
|||
inAnimation, |
|||
displayType |
|||
; |
|||
if( transitionExists === undefined || instance.displayType === undefined) { |
|||
module.verbose('Determining whether animation exists'); |
|||
$clone = $('<div>').addClass( elementClass ).appendTo($('body')); |
|||
currentAnimation = $clone |
|||
.removeClass(className.inward) |
|||
.removeClass(className.outward) |
|||
.addClass(className.animating) |
|||
.addClass(className.transition) |
|||
.addClass(animation) |
|||
.css(animationName) |
|||
; |
|||
inAnimation = $clone |
|||
.addClass(className.inward) |
|||
.css(animationName) |
|||
; |
|||
displayType = $clone |
|||
.attr('class', elementClass) |
|||
.show() |
|||
.css('display') |
|||
; |
|||
module.verbose('Determining final display state', displayType); |
|||
if(currentAnimation != inAnimation) { |
|||
module.debug('Transition exists for animation', animation); |
|||
transitionExists = true; |
|||
} |
|||
else { |
|||
module.debug('Static animation found', animation, displayType); |
|||
transitionExists = false; |
|||
} |
|||
$clone.remove(); |
|||
module.save.displayType(displayType); |
|||
module.save.transitionExists(animation, transitionExists); |
|||
} |
|||
return transitionExists; |
|||
} |
|||
}, |
|||
|
|||
is: { |
|||
animating: function() { |
|||
return $module.hasClass(className.animating); |
|||
}, |
|||
inward: function() { |
|||
return $module.hasClass(className.inward); |
|||
}, |
|||
outward: function() { |
|||
return $module.hasClass(className.outward); |
|||
}, |
|||
looping: function() { |
|||
return $module.hasClass(className.looping); |
|||
}, |
|||
occuring: function(animation) { |
|||
animation = animation || settings.animation; |
|||
return ( $module.hasClass(animation) ); |
|||
}, |
|||
visible: function() { |
|||
return $module.is(':visible'); |
|||
}, |
|||
supported: function() { |
|||
return(animationName !== false && animationEnd !== false); |
|||
} |
|||
}, |
|||
|
|||
hide: function() { |
|||
module.verbose('Hiding element'); |
|||
module.remove.visible(); |
|||
module.set.hidden(); |
|||
module.repaint(); |
|||
}, |
|||
|
|||
show: function(display) { |
|||
module.verbose('Showing element', display); |
|||
module.remove.hidden(); |
|||
module.set.visible(); |
|||
module.repaint(); |
|||
}, |
|||
|
|||
start: function() { |
|||
module.verbose('Starting animation'); |
|||
$module.removeClass(className.disabled); |
|||
}, |
|||
|
|||
stop: function() { |
|||
module.debug('Stopping animation'); |
|||
$module.addClass(className.disabled); |
|||
}, |
|||
|
|||
toggle: function() { |
|||
module.debug('Toggling play status'); |
|||
$module.toggleClass(className.disabled); |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found || false; |
|||
} |
|||
}; |
|||
module.initialize(); |
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.transition.exists = {}; |
|||
|
|||
$.fn.transition.settings = { |
|||
|
|||
// module info
|
|||
name : 'Transition', |
|||
|
|||
// debug content outputted to console
|
|||
debug : false, |
|||
|
|||
// verbose debug output
|
|||
verbose : true, |
|||
|
|||
// performance data output
|
|||
performance : true, |
|||
|
|||
// event namespace
|
|||
namespace : 'transition', |
|||
|
|||
// animation complete event
|
|||
complete : function() {}, |
|||
onShow : function() {}, |
|||
onHide : function() {}, |
|||
|
|||
// whether animation can occur twice in a row
|
|||
allowRepeats : false, |
|||
|
|||
// animation duration
|
|||
animation : 'fade', |
|||
duration : '700ms', |
|||
|
|||
// new animations will occur after previous ones
|
|||
queue : true, |
|||
|
|||
className : { |
|||
animating : 'animating', |
|||
disabled : 'disabled', |
|||
hidden : 'hidden', |
|||
inward : 'in', |
|||
loading : 'loading', |
|||
looping : 'looping', |
|||
outward : 'out', |
|||
transition : 'ui transition', |
|||
visible : 'visible' |
|||
}, |
|||
|
|||
// possible errors
|
|||
error: { |
|||
noAnimation : 'There is no css animation matching the one you specified.', |
|||
repeated : 'That animation is already occurring, cancelling repeated animation', |
|||
method : 'The method you called is not defined', |
|||
support : 'This browser does not support CSS animations' |
|||
} |
|||
|
|||
}; |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,419 +0,0 @@ |
|||
/******************************* |
|||
Semantic - Transition |
|||
Author: Jack Lukic |
|||
|
|||
CSS animation definitions for |
|||
transition module |
|||
|
|||
*******************************/ |
|||
|
|||
/* |
|||
Some transitions adapted from Animate CSS |
|||
https://github.com/daneden/animate.css |
|||
*/ |
|||
|
|||
|
|||
.ui.transition { |
|||
animation-iteration-count: 1; |
|||
animation-duration: 1s; |
|||
|
|||
animation-timing-function: ease; |
|||
animation-fill-mode: both; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.animating.transition { |
|||
display: block !important; |
|||
backface-visibility: hidden; |
|||
transform: translateZ(0); |
|||
} |
|||
|
|||
/* Loading */ |
|||
.ui.loading.transition { |
|||
position: absolute; |
|||
top: -999999px; |
|||
left: -99999px; |
|||
} |
|||
|
|||
/* Hidden */ |
|||
.ui.hidden.transition { |
|||
display: none; |
|||
} |
|||
|
|||
/* Visible */ |
|||
.ui.visible.transition { |
|||
display: block !important; |
|||
visibility: visible; |
|||
} |
|||
|
|||
/* Disabled */ |
|||
.ui.disabled.transition { |
|||
animation-play-state: paused; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.looping.transition { |
|||
animation-iteration-count: infinite; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
.ui.flash.transition { |
|||
animation-name: flash; |
|||
} |
|||
.ui.shake.transition { |
|||
animation-name: shake; |
|||
} |
|||
.ui.bounce.transition { |
|||
animation-name: bounce; |
|||
} |
|||
.ui.tada.transition { |
|||
animation-name: tada; |
|||
} |
|||
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ |
|||
.ui.pulse.transition { |
|||
animation-name: pulse; |
|||
} |
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
.ui.flip.transition.in, |
|||
.ui.flip.transition.out { |
|||
-webkit-perspective: 2000px; |
|||
perspective: 2000px; |
|||
} |
|||
.ui.horizontal.flip.transition.in, |
|||
.ui.horizontal.flip.transition.out { |
|||
animation-name: horizontalFlip; |
|||
} |
|||
.ui.horizontal.flip.transition.out { |
|||
animation-name: horizontalFlipOut; |
|||
} |
|||
.ui.vertical.flip.transition.in, |
|||
.ui.vertical.flip.transition.out { |
|||
animation-name: verticalFlip; |
|||
} |
|||
.ui.vertical.flip.transition.out { |
|||
animation-name: verticalFlipOut; |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
.ui.fade.transition.in { |
|||
animation-name: fade; |
|||
} |
|||
.ui.fade.transition.out { |
|||
animation-name: fadeOut; |
|||
} |
|||
|
|||
.ui.fade.up.transition.in { |
|||
animation-name: fadeUp; |
|||
} |
|||
.ui.fade.up.transition.out { |
|||
animation-name: fadeUpOut; |
|||
} |
|||
|
|||
.ui.fade.down.transition.in { |
|||
animation-name: fadeDown; |
|||
} |
|||
.ui.fade.down.transition.out { |
|||
animation-name: fadeDownOut; |
|||
} |
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
.ui.scale.transition.in { |
|||
animation-name: scale; |
|||
} |
|||
.ui.scale.transition.out { |
|||
animation-name: scaleOut; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Slide |
|||
---------------*/ |
|||
|
|||
.ui.slide.down.transition.in { |
|||
animation-name: slide; |
|||
transform-origin: 50% 0%; |
|||
-ms-transform-origin: 50% 0%; |
|||
-webkit-transform-origin: 50% 0%; |
|||
} |
|||
.ui.slide.down.transition.out { |
|||
animation-name: slideOut; |
|||
transform-origin: 50% 0%; |
|||
} |
|||
|
|||
.ui.slide.up.transition.in { |
|||
animation-name: slide; |
|||
transform-origin: 50% 100%; |
|||
} |
|||
.ui.slide.up.transition.out { |
|||
animation-name: slideOut; |
|||
transform-origin: 50% 100%; |
|||
} |
|||
|
|||
@keyframes slide { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scaleY(0); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scaleY(1); |
|||
} |
|||
} |
|||
@keyframes slideOut { |
|||
0% { |
|||
opacity: 1; |
|||
transform: scaleY(1); |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
transform: scaleY(0); |
|||
} |
|||
} |
|||
|
|||
/******************************* |
|||
Animations |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Emphasis |
|||
---------------*/ |
|||
|
|||
/* 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; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Flips |
|||
---------------*/ |
|||
|
|||
/* Horizontal */ |
|||
@keyframes horizontalFlip { |
|||
0% { |
|||
transform: rotateY(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
/* Horizontal */ |
|||
@keyframes horizontalFlipOut { |
|||
0% { |
|||
transform: rotateY(0deg); |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: rotateY(90deg); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
/* Vertical */ |
|||
@keyframes verticalFlip { |
|||
0% { |
|||
transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
@keyframes verticalFlipOut { |
|||
0% { |
|||
transform: rotateX(0deg); |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: rotateX(-90deg); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Fades |
|||
---------------*/ |
|||
|
|||
/* Fade */ |
|||
@keyframes fade { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeOut { |
|||
0% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
/* Fade Up */ |
|||
@keyframes fadeUp { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
|
|||
@keyframes fadeUpOut { |
|||
0% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
} |
|||
} |
|||
|
|||
/* Fade Down */ |
|||
@keyframes fadeDown { |
|||
0% { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
} |
|||
@keyframes fadeDownOut { |
|||
0% { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
transform: translateY(-20px); |
|||
} |
|||
} |
|||
|
|||
/*-------------- |
|||
Scale |
|||
---------------*/ |
|||
|
|||
/* Scale */ |
|||
@keyframes scale { |
|||
0% { |
|||
opacity: 0; |
|||
transform: scale(0.7); |
|||
} |
|||
100% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
} |
|||
@keyframes scaleOut { |
|||
0% { |
|||
opacity: 1; |
|||
transform: scale(1); |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
transform: scale(0.7); |
|||
} |
|||
} |
|||
@ -1,459 +0,0 @@ |
|||
/* ****************************** |
|||
Module - Video |
|||
Author: Jack Lukic |
|||
|
|||
This is a video playlist and video embed plugin which helps |
|||
provide helpers for adding embed code for vimeo and youtube and |
|||
abstracting event handlers for each library |
|||
|
|||
****************************** */ |
|||
|
|||
;(function ($, window, document, undefined) { |
|||
|
|||
$.fn.video = 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 = ( $.isPlainObject(parameters) ) |
|||
? $.extend(true, {}, $.fn.video.settings, parameters) |
|||
: $.extend({}, $.fn.video.settings), |
|||
|
|||
selector = settings.selector, |
|||
className = settings.className, |
|||
error = settings.error, |
|||
metadata = settings.metadata, |
|||
namespace = settings.namespace, |
|||
|
|||
eventNamespace = '.' + namespace, |
|||
moduleNamespace = 'module-' + namespace, |
|||
|
|||
$module = $(this), |
|||
$placeholder = $module.find(selector.placeholder), |
|||
$playButton = $module.find(selector.playButton), |
|||
$embed = $module.find(selector.embed), |
|||
|
|||
element = this, |
|||
instance = $module.data(moduleNamespace), |
|||
module |
|||
; |
|||
|
|||
module = { |
|||
|
|||
initialize: function() { |
|||
module.debug('Initializing video'); |
|||
$placeholder |
|||
.on('click' + eventNamespace, module.play) |
|||
; |
|||
$playButton |
|||
.on('click' + eventNamespace, module.play) |
|||
; |
|||
module.instantiate(); |
|||
}, |
|||
|
|||
instantiate: function() { |
|||
module.verbose('Storing instance of module', module); |
|||
instance = module; |
|||
$module |
|||
.data(moduleNamespace, module) |
|||
; |
|||
}, |
|||
|
|||
destroy: function() { |
|||
module.verbose('Destroying previous instance of video'); |
|||
$module |
|||
.removeData(moduleNamespace) |
|||
.off(eventNamespace) |
|||
; |
|||
$placeholder |
|||
.off(eventNamespace) |
|||
; |
|||
$playButton |
|||
.off(eventNamespace) |
|||
; |
|||
}, |
|||
|
|||
// sets new video
|
|||
change: function(source, id, url) { |
|||
module.debug('Changing video to ', source, id, url); |
|||
$module |
|||
.data(metadata.source, source) |
|||
.data(metadata.id, id) |
|||
.data(metadata.url, url) |
|||
; |
|||
settings.onChange(); |
|||
}, |
|||
|
|||
// clears video embed
|
|||
reset: function() { |
|||
module.debug('Clearing video embed and showing placeholder'); |
|||
$module |
|||
.removeClass(className.active) |
|||
; |
|||
$embed |
|||
.html(' ') |
|||
; |
|||
$placeholder |
|||
.show() |
|||
; |
|||
settings.onReset(); |
|||
}, |
|||
|
|||
// plays current video
|
|||
play: function() { |
|||
module.debug('Playing video'); |
|||
var |
|||
source = $module.data(metadata.source) || false, |
|||
url = $module.data(metadata.url) || false, |
|||
id = $module.data(metadata.id) || false |
|||
; |
|||
$embed |
|||
.html( module.generate.html(source, id, url) ) |
|||
; |
|||
$module |
|||
.addClass(className.active) |
|||
; |
|||
settings.onPlay(); |
|||
}, |
|||
|
|||
generate: { |
|||
// generates iframe html
|
|||
html: function(source, id, url) { |
|||
module.debug('Generating embed html'); |
|||
var |
|||
width = (settings.width == 'auto') |
|||
? $module.width() |
|||
: settings.width, |
|||
height = (settings.height == 'auto') |
|||
? $module.height() |
|||
: settings.height, |
|||
html |
|||
; |
|||
if(source && id) { |
|||
if(source == 'vimeo') { |
|||
html = '' |
|||
+ '<iframe src="http://player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"' |
|||
+ ' width="' + width + '" height="' + height + '"' |
|||
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
|||
; |
|||
} |
|||
else if(source == 'youtube') { |
|||
html = '' |
|||
+ '<iframe src="http://www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"' |
|||
+ ' width="' + width + '" height="' + height + '"' |
|||
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
|||
; |
|||
} |
|||
} |
|||
else if(url) { |
|||
html = '' |
|||
+ '<iframe src="' + url + '"' |
|||
+ ' width="' + width + '" height="' + height + '"' |
|||
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>' |
|||
; |
|||
} |
|||
else { |
|||
module.error(error.noVideo); |
|||
} |
|||
return html; |
|||
}, |
|||
|
|||
// generate url parameters
|
|||
url: function(source) { |
|||
var |
|||
api = (settings.api) |
|||
? 1 |
|||
: 0, |
|||
autoplay = (settings.autoplay) |
|||
? 1 |
|||
: 0, |
|||
hd = (settings.hd) |
|||
? 1 |
|||
: 0, |
|||
showUI = (settings.showUI) |
|||
? 1 |
|||
: 0, |
|||
// opposite used for some params
|
|||
hideUI = !(settings.showUI) |
|||
? 1 |
|||
: 0, |
|||
url = '' |
|||
; |
|||
if(source == 'vimeo') { |
|||
url = '' |
|||
+ 'api=' + api |
|||
+ '&title=' + showUI |
|||
+ '&byline=' + showUI |
|||
+ '&portrait=' + showUI |
|||
+ '&autoplay=' + autoplay |
|||
; |
|||
if(settings.color) { |
|||
url += '&color=' + settings.color; |
|||
} |
|||
} |
|||
if(source == 'ustream') { |
|||
url = '' |
|||
+ 'autoplay=' + autoplay |
|||
; |
|||
if(settings.color) { |
|||
url += '&color=' + settings.color; |
|||
} |
|||
} |
|||
else if(source == 'youtube') { |
|||
url = '' |
|||
+ 'enablejsapi=' + api |
|||
+ '&autoplay=' + autoplay |
|||
+ '&autohide=' + hideUI |
|||
+ '&hq=' + hd |
|||
+ '&modestbranding=1' |
|||
; |
|||
if(settings.color) { |
|||
url += '&color=' + settings.color; |
|||
} |
|||
} |
|||
return url; |
|||
} |
|||
}, |
|||
|
|||
setting: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, settings, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
settings[name] = value; |
|||
} |
|||
else { |
|||
return settings[name]; |
|||
} |
|||
}, |
|||
internal: function(name, value) { |
|||
if( $.isPlainObject(name) ) { |
|||
$.extend(true, module, name); |
|||
} |
|||
else if(value !== undefined) { |
|||
module[name] = value; |
|||
} |
|||
else { |
|||
return module[name]; |
|||
} |
|||
}, |
|||
debug: function() { |
|||
if(settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.debug.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
verbose: function() { |
|||
if(settings.verbose && settings.debug) { |
|||
if(settings.performance) { |
|||
module.performance.log(arguments); |
|||
} |
|||
else { |
|||
module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':'); |
|||
module.verbose.apply(console, arguments); |
|||
} |
|||
} |
|||
}, |
|||
error: function() { |
|||
module.error = Function.prototype.bind.call(console.error, console, settings.name + ':'); |
|||
module.error.apply(console, arguments); |
|||
}, |
|||
performance: { |
|||
log: function(message) { |
|||
var |
|||
currentTime, |
|||
executionTime, |
|||
previousTime |
|||
; |
|||
if(settings.performance) { |
|||
currentTime = new Date().getTime(); |
|||
previousTime = time || currentTime; |
|||
executionTime = currentTime - previousTime; |
|||
time = currentTime; |
|||
performance.push({ |
|||
'Element' : element, |
|||
'Name' : message[0], |
|||
'Arguments' : [].slice.call(message, 1) || '', |
|||
'Execution Time' : executionTime |
|||
}); |
|||
} |
|||
clearTimeout(module.performance.timer); |
|||
module.performance.timer = setTimeout(module.performance.display, 100); |
|||
}, |
|||
display: function() { |
|||
var |
|||
title = settings.name + ':', |
|||
totalTime = 0 |
|||
; |
|||
time = false; |
|||
clearTimeout(module.performance.timer); |
|||
$.each(performance, function(index, data) { |
|||
totalTime += data['Execution Time']; |
|||
}); |
|||
title += ' ' + totalTime + 'ms'; |
|||
if(moduleSelector) { |
|||
title += ' \'' + moduleSelector + '\''; |
|||
} |
|||
if($allModules.size() > 1) { |
|||
title += ' ' + '(' + $allModules.size() + ')'; |
|||
} |
|||
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { |
|||
console.groupCollapsed(title); |
|||
if(console.table) { |
|||
console.table(performance); |
|||
} |
|||
else { |
|||
$.each(performance, function(index, data) { |
|||
console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); |
|||
}); |
|||
} |
|||
console.groupEnd(); |
|||
} |
|||
performance = []; |
|||
} |
|||
}, |
|||
invoke: function(query, passedArguments, context) { |
|||
var |
|||
object = instance, |
|||
maxDepth, |
|||
found, |
|||
response |
|||
; |
|||
passedArguments = passedArguments || queryArguments; |
|||
context = element || context; |
|||
if(typeof query == 'string' && object !== undefined) { |
|||
query = query.split(/[\. ]/); |
|||
maxDepth = query.length - 1; |
|||
$.each(query, function(depth, value) { |
|||
var camelCaseValue = (depth != maxDepth) |
|||
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) |
|||
: query |
|||
; |
|||
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { |
|||
object = object[camelCaseValue]; |
|||
} |
|||
else if( object[camelCaseValue] !== undefined ) { |
|||
found = object[camelCaseValue]; |
|||
return false; |
|||
} |
|||
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { |
|||
object = object[value]; |
|||
} |
|||
else if( object[value] !== undefined ) { |
|||
found = object[value]; |
|||
return false; |
|||
} |
|||
else { |
|||
return false; |
|||
} |
|||
}); |
|||
} |
|||
if ( $.isFunction( found ) ) { |
|||
response = found.apply(context, passedArguments); |
|||
} |
|||
else if(found !== undefined) { |
|||
response = found; |
|||
} |
|||
if($.isArray(returnedValue)) { |
|||
returnedValue.push(response); |
|||
} |
|||
else if(returnedValue !== undefined) { |
|||
returnedValue = [returnedValue, response]; |
|||
} |
|||
else if(response !== undefined) { |
|||
returnedValue = response; |
|||
} |
|||
return found; |
|||
} |
|||
}; |
|||
|
|||
if(methodInvoked) { |
|||
if(instance === undefined) { |
|||
module.initialize(); |
|||
} |
|||
module.invoke(query); |
|||
} |
|||
else { |
|||
if(instance !== undefined) { |
|||
module.destroy(); |
|||
} |
|||
module.initialize(); |
|||
} |
|||
}) |
|||
; |
|||
return (returnedValue !== undefined) |
|||
? returnedValue |
|||
: this |
|||
; |
|||
}; |
|||
|
|||
$.fn.video.settings = { |
|||
|
|||
name : 'Video', |
|||
namespace : 'video', |
|||
|
|||
debug : true, |
|||
verbose : true, |
|||
performance : true, |
|||
|
|||
metadata : { |
|||
source : 'source', |
|||
id : 'id', |
|||
url : 'url' |
|||
}, |
|||
|
|||
onPlay : function(){}, |
|||
onReset : function(){}, |
|||
onChange : function(){}, |
|||
|
|||
// callbacks not coded yet (needs to use jsapi)
|
|||
onPause : function() {}, |
|||
onStop : function() {}, |
|||
|
|||
width : 'auto', |
|||
height : 'auto', |
|||
|
|||
autoplay : false, |
|||
color : '#442359', |
|||
hd : true, |
|||
showUI : false, |
|||
api : true, |
|||
|
|||
error : { |
|||
noVideo : 'No video specified', |
|||
method : 'The method you called is not defined' |
|||
}, |
|||
|
|||
className : { |
|||
active : 'active' |
|||
}, |
|||
|
|||
selector : { |
|||
embed : '.embed', |
|||
placeholder : '.placeholder', |
|||
playButton : '.play' |
|||
} |
|||
}; |
|||
|
|||
|
|||
})( jQuery, window , document ); |
|||
@ -1,98 +0,0 @@ |
|||
/* |
|||
* # Semantic - Video |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Video |
|||
*******************************/ |
|||
|
|||
.ui.video { |
|||
position: relative; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
/* Placeholder Image */ |
|||
.ui.video .placeholder { |
|||
background-color: #333333; |
|||
} |
|||
|
|||
/* Play Icon Overlay */ |
|||
.ui.video .play { |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
z-index: 10; |
|||
|
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; |
|||
filter: alpha(opacity=60); |
|||
opacity: 0.6; |
|||
|
|||
-webkit-transition: opacity 0.3s; |
|||
-moz-transition: opacity 0.3s; |
|||
-o-transition: opacity 0.3s; |
|||
-ms-transition: opacity 0.3s; |
|||
transition: opacity 0.3s; |
|||
} |
|||
.ui.video .play.icon:before { |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
z-index: 11; |
|||
|
|||
font-size: 6rem; |
|||
margin: -3rem 0em 0em -3rem; |
|||
color: #FFFFFF; |
|||
text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
.ui.video .placeholder { |
|||
display: block; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* IFrame Embed */ |
|||
.ui.video .embed { |
|||
display: none; |
|||
} |
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*-------------- |
|||
Hover |
|||
---------------*/ |
|||
|
|||
.ui.video .play:hover { |
|||
opacity: 1; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Active |
|||
---------------*/ |
|||
|
|||
.ui.video.active .play, |
|||
.ui.video.active .placeholder { |
|||
display: none; |
|||
} |
|||
.ui.video.active .embed { |
|||
display: block; |
|||
} |
|||
@ -1,221 +0,0 @@ |
|||
/* |
|||
* # Semantic Comment View |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Comments |
|||
---------------*/ |
|||
|
|||
.ui.comments { |
|||
|
|||
|
|||
} |
|||
.ui.comments a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Comment |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment { |
|||
position: relative; |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
} |
|||
.ui.comments .comment:first-child { |
|||
margin-top: 0em; |
|||
padding-top: 0em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Avatar (Optional) |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .avatar { |
|||
display: block; |
|||
float: left; |
|||
width: 4em; |
|||
} |
|||
.ui.comments .comment .avatar img { |
|||
display: block; |
|||
margin: 0em auto; |
|||
|
|||
width: 3em; |
|||
height: 3em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
|
|||
.ui.comments .comment > .content, |
|||
.ui.comments .comment > .avatar { |
|||
display: block; |
|||
} |
|||
.ui.comments .comment .avatar ~ .content { |
|||
padding: 0em 1em; |
|||
} |
|||
|
|||
/* If there is an avatar move content over */ |
|||
.ui.comments .comment > .avatar ~ .content { |
|||
padding-top: 0.25em; |
|||
margin-left: 3.5em; |
|||
} |
|||
|
|||
.ui.comments .comment .metadata { |
|||
display: inline-block; |
|||
margin-left: 0.3em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
.ui.comments .comment .metadata > * { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Comment Text |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .text { |
|||
margin: 0.25em 0em 0.5em; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/*-------------------- |
|||
User Actions |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .actions { |
|||
font-size: 0.9em; |
|||
} |
|||
.ui.comments .comment .actions a { |
|||
display: inline-block; |
|||
margin: 0em 0.3em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.comments .comment .actions a.active, |
|||
.ui.comments .comment .actions a:hover { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Reply Form |
|||
---------------------*/ |
|||
|
|||
.ui.comments .reply.form { |
|||
margin-top: 0.75em; |
|||
width: 100%; |
|||
max-width: 30em; |
|||
} |
|||
.ui.comments .comment .reply.form { |
|||
margin-left: 2em; |
|||
} |
|||
.ui.comments > .reply.form { |
|||
margin-top: 1.5em; |
|||
max-width: 40em; |
|||
} |
|||
.ui.comments .reply.form textarea { |
|||
height: 12em; |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------------- |
|||
Nested Comments |
|||
---------------------*/ |
|||
|
|||
.ui.comments .comment .comments { |
|||
margin-top: 0.5em; |
|||
padding-top: 0.5em; |
|||
padding-bottom: 1em; |
|||
} |
|||
.ui.comments .comment .comments:before{ |
|||
position: absolute; |
|||
top: 0px; |
|||
left: 0px; |
|||
} |
|||
/* One Deep */ |
|||
.ui.comments > .comment .comments { |
|||
margin-left: 2em; |
|||
|
|||
} |
|||
/* Two Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.75em; |
|||
} |
|||
/* Three Deep */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments { |
|||
margin-left: 1.5em; |
|||
} |
|||
/* Four Deep or more */ |
|||
.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments { |
|||
margin-left: 0.5em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*-------------------- |
|||
Threaded |
|||
---------------------*/ |
|||
|
|||
.ui.threaded.comments .comment .comments { |
|||
margin-left: 2em !important; |
|||
padding-left: 2em !important; |
|||
|
|||
-webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
-moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05); |
|||
} |
|||
|
|||
/*-------------------- |
|||
Minimal |
|||
---------------------*/ |
|||
|
|||
.ui.minimal.comments .comment .actions { |
|||
opacity: 0; |
|||
|
|||
-webkit-transition: opacity 0.1s ease-out; |
|||
-moz-transition: opacity 0.1s ease-out; |
|||
-o-transition: opacity 0.1s ease-out; |
|||
-ms-transition: opacity 0.1s ease-out; |
|||
transition: opacity 0.1s ease-out; |
|||
|
|||
-webkit-transition-delay: 0.1s; |
|||
-moz-transition-delay: 0.1s; |
|||
-o-transition-delay: 0.1s; |
|||
-ms-transition-delay: 0.1s; |
|||
transition-delay: 0.1s; |
|||
} |
|||
.ui.minimal.comments .comment > .content:hover > .actions { |
|||
opacity: 1; |
|||
} |
|||
|
|||
/*-------------------- |
|||
Sizes |
|||
---------------------*/ |
|||
|
|||
.ui.small.comments { |
|||
font-size: 0.875em; |
|||
} |
|||
@ -1,152 +0,0 @@ |
|||
/* |
|||
* # Activity Feed View |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: May 22, 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Activity Feed |
|||
*******************************/ |
|||
|
|||
.ui.feed { |
|||
|
|||
} |
|||
|
|||
.ui.feed a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.feed, |
|||
.ui.feed .event, |
|||
.ui.feed .label, |
|||
.ui.feed .content, |
|||
.ui.feed .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* Event */ |
|||
.ui.feed .event { |
|||
width: 100%; |
|||
display: table; |
|||
padding: 1em; |
|||
} |
|||
.ui.feed .event:first-child { |
|||
border-top: 0px; |
|||
} |
|||
.ui.feed .event:last-child { |
|||
margin-bottom: 1em; |
|||
} |
|||
|
|||
/* Event Label */ |
|||
.ui.feed .label { |
|||
width: 3em; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
} |
|||
.ui.feed .label .icon { |
|||
font-size: 1.5em; |
|||
padding: 0.5em; |
|||
margin: 0em; |
|||
} |
|||
.ui.feed .label img { |
|||
width: 3em; |
|||
margin: 0em; |
|||
border-radius: 50em; |
|||
} |
|||
.ui.feed .label + .content { |
|||
padding: 0.75em 1em 0em; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.feed .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
text-align: left; |
|||
word-wrap: break-word; |
|||
} |
|||
|
|||
/* Date */ |
|||
.ui.feed .content .date { |
|||
float: right; |
|||
padding-left: 1em; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
} |
|||
|
|||
/* Summary */ |
|||
.ui.feed .content .summary { |
|||
color: rgba(0, 0, 0, 0.75); |
|||
} |
|||
.ui.feed .content .summary img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 4em; |
|||
border-radius: 500px; |
|||
} |
|||
|
|||
/* Additional Information */ |
|||
.ui.feed .content .extra { |
|||
margin: 1em 0em 0em; |
|||
padding: 0.5em 0em 0em; |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.feed .content .extra.images { |
|||
|
|||
} |
|||
.ui.feed .content .extra.images img { |
|||
display: inline-block; |
|||
margin-right: 0.25em; |
|||
width: 6em; |
|||
} |
|||
|
|||
.ui.feed .content .extra.text { |
|||
padding: 0.5em 1em; |
|||
border-left: 0.2em solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
.ui.small.feed { |
|||
font-size: 0.875em; |
|||
} |
|||
.ui.small.feed .label img { |
|||
width: 2.5em; |
|||
} |
|||
.ui.small.feed .label .icon { |
|||
font-size: 1.25em; |
|||
} |
|||
.ui.feed .event { |
|||
padding: 0.75em 0em; |
|||
} |
|||
.ui.small.feed .label + .content { |
|||
padding: 0.5em 0.5em 0; |
|||
} |
|||
.ui.small.feed .content .extra.images img { |
|||
width: 5em; |
|||
} |
|||
.ui.small.feed .content .extra { |
|||
margin: 0.5em 0em 0em; |
|||
} |
|||
.ui.small.feed .content .extra.text { |
|||
padding: 0.25em 0.5em; |
|||
} |
|||
@ -1,640 +0,0 @@ |
|||
/* |
|||
* # Semantic Item View |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 17 2013 |
|||
*/ |
|||
|
|||
|
|||
/******************************* |
|||
Standard |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Items |
|||
---------------*/ |
|||
|
|||
.ui.items { |
|||
margin: 1em 0em 0em; |
|||
} |
|||
.ui.items:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
.ui.items:last-child { |
|||
margin-bottom: -1em; |
|||
} |
|||
|
|||
/* Force Clearing */ |
|||
.ui.items:after { |
|||
display: block; |
|||
content: ' '; |
|||
height: 0px; |
|||
clear: both; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item |
|||
---------------*/ |
|||
|
|||
.ui.items > .row > .item, |
|||
.ui.items > .item { |
|||
display: block; |
|||
float: left; |
|||
position: relative; |
|||
top: 0px; |
|||
|
|||
width: 316px; |
|||
min-height: 375px; |
|||
margin: 0em 0.5em 2.5em; |
|||
padding: 0em; |
|||
|
|||
background-color: #FFFFFF; |
|||
line-height: 1.2; |
|||
font-size: 1em; |
|||
|
|||
-moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1); |
|||
|
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
|
|||
-moz-border-radius: 0.33em; |
|||
-webkit-border-radius: 0.33em; |
|||
border-radius: 0.33em; |
|||
|
|||
-webkit-transition: box-shadow 0.2s ease; |
|||
-moz-transition: box-shadow 0.2s ease; |
|||
-o-transition: box-shadow 0.2s ease; |
|||
-ms-transition: box-shadow 0.2s ease; |
|||
transition: box-shadow 0.2s ease; |
|||
|
|||
padding: 0.5em; |
|||
} |
|||
|
|||
.ui.items a.item, |
|||
.ui.items .item a { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.ui.items .item, |
|||
.ui.items .item > .image, |
|||
.ui.items .item > .image .overlay, |
|||
.ui.items .item > .content, |
|||
.ui.items .item > .content > .meta, |
|||
.ui.items .item > .content > .extra { |
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
/*-------------- |
|||
Images |
|||
---------------*/ |
|||
|
|||
.ui.items .item > .image { |
|||
display: block; |
|||
position: relative; |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
|
|||
-webkit-box-sizing: border-box; |
|||
-moz-box-sizing: border-box; |
|||
-ms-box-sizing: border-box; |
|||
box-sizing: border-box; |
|||
|
|||
-webkit-border-radius: 0.2em; |
|||
-moz-border-radius: 0.2em; |
|||
border-radius: 0.2em; |
|||
} |
|||
.ui.items .item > .image > img { |
|||
display: block; |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Content |
|||
---------------*/ |
|||
.ui.items .item > .content { |
|||
padding: 0.75em 0.5em; |
|||
} |
|||
.ui.items .item > .content > .name { |
|||
display: block; |
|||
|
|||
font-size: 1.25em; |
|||
font-weight: bold; |
|||
margin-bottom: 0.2em; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.items .item > .content > .description { |
|||
clear: both; |
|||
margin: 0em 0em; |
|||
color: rgba(0, 0, 0, 0.45); |
|||
} |
|||
.ui.items .item > .content > .description p { |
|||
margin: 0em 0em 0.2em; |
|||
} |
|||
.ui.items .item > .content > .description p:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Meta |
|||
---------------*/ |
|||
|
|||
.ui.items .item .meta { |
|||
float: right; |
|||
color: rgba(0, 0, 0, 0.35); |
|||
} |
|||
.ui.items .item > .content > .meta + .name { |
|||
float: left; |
|||
} |
|||
|
|||
|
|||
/*-------------- |
|||
Labels |
|||
---------------*/ |
|||
|
|||
/*-----star----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .star.label:hover::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label:hover .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/* active */ |
|||
.ui.items .item .star.label.active::after { |
|||
border-right-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active::after { |
|||
border-top-color: #F6EFC3; |
|||
} |
|||
.ui.items .item .star.label.active .icon { |
|||
color: #AC9400 |
|||
} |
|||
|
|||
/*-----like----- */ |
|||
|
|||
/* hover */ |
|||
.ui.items .item .like.label:hover::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label:hover .icon { |
|||
color: #EF404A |
|||
} |
|||
/* active */ |
|||
.ui.items .item .like.label.active::after { |
|||
border-right-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active::after { |
|||
border-top-color: #F5E1E2; |
|||
} |
|||
.ui.items .item .like.label.active .icon { |
|||
color: #EF404A |
|||
} |
|||
|
|||
|
|||
|
|||
/*-------------- |
|||
Extra |
|||
---------------*/ |
|||
|
|||
.ui.items .item .extra { |
|||
position: absolute; |
|||
width: 100%; |
|||
padding: 0em 0.5em; |
|||
bottom: -2em; |
|||
left: 0em; |
|||
height: 1.5em; |
|||
color: rgba(0, 0, 0, 0.25); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
.ui.items .item .extra > img { |
|||
display: inline-block; |
|||
border-radius: 500px 500px 500px 500px; |
|||
margin-right: 0.25em; |
|||
vertical-align: middle; |
|||
width: 2em; |
|||
} |
|||
.ui.items .item .extra .left { |
|||
float: left; |
|||
} |
|||
.ui.items .item .extra .right { |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
.ui.items .item:hover { |
|||
cursor: pointer; |
|||
z-index: 5; |
|||
|
|||
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.items .item:hover .extra { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
.ui.items .item:nth-of-type(6n+1):hover { |
|||
border-bottom-color: #6ECFF5 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(6n+2):hover { |
|||
border-bottom-color: #5C6166 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(6n+3):hover { |
|||
border-bottom-color: #A1CF64 !important; |
|||
} |
|||
.ui.items .item:nth-of-type(6n+4):hover { |
|||
border-bottom-color: #D95C5C !important; |
|||
} |
|||
.ui.items .item:nth-of-type(6n+5):hover { |
|||
border-bottom-color: #00B5AD !important; |
|||
} |
|||
.ui.items .item:nth-of-type(6n+6):hover { |
|||
border-bottom-color: #564F8A !important; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*-------------- |
|||
Connected |
|||
---------------*/ |
|||
|
|||
.ui.connected.items { |
|||
display: table; |
|||
width: 100%; |
|||
margin-left: 0em !important; |
|||
margin-right: 0em !important; |
|||
} |
|||
.ui.connected.items > .row > .item, |
|||
.ui.connected.items > .item { |
|||
float: none; |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
height: auto; |
|||
border-radius: 0px; |
|||
margin: 0em; |
|||
width: 33.33%; |
|||
} |
|||
.ui.connected.items > .row { |
|||
display: table; |
|||
margin: 0.5em 0em; |
|||
} |
|||
.ui.connected.items > .row:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
/* Borders */ |
|||
.ui.connected.items > .item, |
|||
.ui.connected.items > .row:last-child > .item { |
|||
border-bottom: 0.2em solid rgba(0, 0, 0, 0.2); |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:first-child, |
|||
.ui.connected.items > .item:first-child { |
|||
border-radius: 0em 0em 0em 0.33em; |
|||
} |
|||
.ui.connected.items > .row:last-child > .item:last-child, |
|||
.ui.connected.items > .item:last-child { |
|||
border-radius: 0em 0em 0.33em 0em; |
|||
} |
|||
|
|||
|
|||
/* Hover */ |
|||
.ui.connected.items .item:hover { |
|||
border-bottom-width: 0.2em; |
|||
} |
|||
|
|||
|
|||
/* Item Count */ |
|||
.ui.one.connected.items > .row > .item, |
|||
.ui.one.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 2%; |
|||
padding-right: 2%; |
|||
} |
|||
.ui.two.connected.items > .row > .item, |
|||
.ui.two.connected.items > .item { |
|||
width: 50%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.three.connected.items > .row > .item, |
|||
.ui.three.connected.items > .item { |
|||
width: 33.333%; |
|||
padding-left: 1%; |
|||
padding-right: 1%; |
|||
} |
|||
.ui.four.connected.items > .row > .item, |
|||
.ui.four.connected.items > .item { |
|||
width: 25%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.five.connected.items > .row > .item, |
|||
.ui.five.connected.items > .item { |
|||
width: 20%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.six.connected.items > .row > .item, |
|||
.ui.six.connected.items > .item { |
|||
width: 16.66%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.seven.connected.items > .row > .item, |
|||
.ui.seven.connected.items > .item { |
|||
width: 14.28%; |
|||
padding-left: 0.5%; |
|||
padding-right: 0.5%; |
|||
} |
|||
.ui.eight.connected.items > .row > .item, |
|||
.ui.eight.connected.items > .item { |
|||
width: 12.5%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.nine.connected.items > .row > .item, |
|||
.ui.nine.connected.items > .item { |
|||
width: 11.11%; |
|||
padding-left: 0.25%; |
|||
padding-right: 0.25%; |
|||
} |
|||
.ui.ten.connected.items > .row > .item, |
|||
.ui.ten.connected.items > .item { |
|||
width: 10%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.eleven.connected.items > .row > .item, |
|||
.ui.eleven.connected.items > .item { |
|||
width: 9.09%; |
|||
padding-left: 0.2%; |
|||
padding-right: 0.2%; |
|||
} |
|||
.ui.twelve.connected.items > .row > .item, |
|||
.ui.twelve.connected.items > .item { |
|||
width: 8.3333%; |
|||
padding-left: 0.1%; |
|||
padding-right: 0.1%; |
|||
} |
|||
|
|||
/*------------------- |
|||
Responsive |
|||
--------------------*/ |
|||
|
|||
@media only screen and (max-width : 768px) { |
|||
.ui.stackable.items { |
|||
display: block !important; |
|||
} |
|||
.ui.stackable.items > .item, |
|||
.ui.stackable.items > .row > .item { |
|||
display: block !important; |
|||
height: auto !important; |
|||
width: auto !important; |
|||
padding: 0% !important; |
|||
} |
|||
} |
|||
|
|||
/*-------------------- |
|||
Horizontal |
|||
---------------------*/ |
|||
.ui.horizontal.items > .item, |
|||
.ui.items > .horizontal.item { |
|||
display: table; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .image, |
|||
.ui.items > .horizontal.item > .image { |
|||
display: table-cell; |
|||
width: 50%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content, |
|||
.ui.items > .horizontal.item > .image + .content { |
|||
width: 50%; |
|||
display: table-cell; |
|||
} |
|||
.ui.horizontal.items > .item > .content, |
|||
.ui.items > .horizontal.item > .content { |
|||
padding: 1% 1.7% 11% 3%; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.ui.horizontal.items > .item > .meta, |
|||
.ui.items > .horizontal.item > .meta { |
|||
position: absolute; |
|||
padding: 0%; |
|||
bottom: 7%; |
|||
left: 3%; |
|||
width: 94%; |
|||
} |
|||
.ui.horizontal.items > .item > .image + .content + .meta, |
|||
.ui.items > .horizontal.item > .image + .content + .meta { |
|||
bottom: 7%; |
|||
left: 53%; |
|||
width: 44%; |
|||
} |
|||
|
|||
|
|||
.ui.horizontal.items > .item .avatar, |
|||
.ui.items > .horizontal.item .avatar { |
|||
width: 11.5%; |
|||
} |
|||
|
|||
.ui.items > .item .avatar { |
|||
max-width: 25px; |
|||
} |
|||
|
|||
/*-------------- |
|||
Item Count |
|||
---------------*/ |
|||
|
|||
|
|||
.ui.one.items { |
|||
margin-left: -2%; |
|||
margin-right: -2%; |
|||
} |
|||
.ui.one.items > .item { |
|||
width: 100%; |
|||
margin-left: 2%; |
|||
margin-right: 2%; |
|||
} |
|||
|
|||
.ui.two.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.two.items > .item { |
|||
width: 48%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.two.items > .item:nth-child(2n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.three.items { |
|||
margin-left: -1%; |
|||
margin-right: -1%; |
|||
} |
|||
.ui.three.items > .item { |
|||
width: 31.333%; |
|||
margin-left: 1%; |
|||
margin-right: 1%; |
|||
} |
|||
.ui.three.items > .item:nth-child(3n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.four.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.four.items > .item { |
|||
width: 24%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.four.items > .item:nth-child(4n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.five.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.five.items > .item { |
|||
width: 19%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.five.items > .item:nth-child(5n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.six.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.six.items > .item { |
|||
width: 15.66%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
} |
|||
.ui.six.items > .item:nth-child(6n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.seven.items { |
|||
margin-left: -0.5%; |
|||
margin-right: -0.5%; |
|||
} |
|||
.ui.seven.items > .item { |
|||
width: 13.28%; |
|||
margin-left: 0.5%; |
|||
margin-right: 0.5%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.seven.items > .item:nth-child(7n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eight.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.eight.items > .item { |
|||
width: 12.0%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 11px; |
|||
} |
|||
.ui.eight.items > .item:nth-child(8n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.nine.items { |
|||
margin-left: -0.25%; |
|||
margin-right: -0.25%; |
|||
} |
|||
.ui.nine.items > .item { |
|||
width: 10.61%; |
|||
margin-left: 0.25%; |
|||
margin-right: 0.25%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.nine.items > .item:nth-child(9n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.ten.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.ten.items > .item { |
|||
width: 9.6%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 10px; |
|||
} |
|||
.ui.ten.items > .item:nth-child(10n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.eleven.items { |
|||
margin-left: -0.2%; |
|||
margin-right: -0.2%; |
|||
} |
|||
.ui.eleven.items > .item { |
|||
width: 8.69%; |
|||
margin-left: 0.2%; |
|||
margin-right: 0.2%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.eleven.items > .item:nth-child(11n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
.ui.twelve.items { |
|||
margin-left: -0.1%; |
|||
margin-right: -0.1%; |
|||
} |
|||
.ui.twelve.items > .item { |
|||
width: 8.1333%; |
|||
margin-left: 0.1%; |
|||
margin-right: 0.1%; |
|||
font-size: 9px; |
|||
} |
|||
.ui.twelve.items > .item:nth-child(12n+1) { |
|||
clear: left; |
|||
} |
|||
|
|||
@ -1,631 +0,0 @@ |
|||
/* |
|||
* # Semantic List - Flat |
|||
* http://github.com/jlukic/semantic-ui/ |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: April 26 2013 |
|||
*/ |
|||
|
|||
/******************************* |
|||
List |
|||
*******************************/ |
|||
|
|||
ul.ui.list, |
|||
ol.ui.list, |
|||
.ui.list { |
|||
list-style-type: none; |
|||
margin: 1em 0em; |
|||
padding: 0em; |
|||
} |
|||
ul.ui.list ul, |
|||
ol.ui.list ol, |
|||
.ui.list .list { |
|||
margin: 0em; |
|||
padding: 0.5em 0em 0.5em 1em; |
|||
} |
|||
|
|||
ul.ui.list:first-child, |
|||
ol.ui.list:first-child, |
|||
.ui.list:first-child { |
|||
margin-top: 0em; |
|||
} |
|||
|
|||
ul.ui.list:last-child, |
|||
ol.ui.list:last-child, |
|||
.ui.list:last-child { |
|||
margin-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
|
|||
/* List Item */ |
|||
ul.ui.list li, |
|||
ol.ui.list li, |
|||
.ui.list .item { |
|||
display: list-item; |
|||
list-style-type: none; |
|||
list-style-position: inside; |
|||
|
|||
padding: 0.3em 0em; |
|||
line-height: 1.2em; |
|||
} |
|||
|
|||
.ui.list .item:after { |
|||
content: ''; |
|||
display: block; |
|||
height: 0; |
|||
clear: both; |
|||
visibility: hidden; |
|||
} |
|||
|
|||
/* Sub-List */ |
|||
.ui.list .list { |
|||
clear: both; |
|||
} |
|||
|
|||
/* Icon */ |
|||
.ui.list .item > .icon { |
|||
display: block; |
|||
float: left; |
|||
margin: 0em 1em 0em 0em; |
|||
padding: 0.1em 0em 0em 0em; |
|||
} |
|||
.ui.list .item > .icon:only-child { |
|||
display: inline-block; |
|||
} |
|||
.ui.horizontal.list .item > .icon { |
|||
margin: 0em; |
|||
padding: 0em 0.25em 0em 0em; |
|||
} |
|||
.ui.horizontal.list .item > .icon, |
|||
.ui.horizontal.list .item > .icon + .content { |
|||
float: none; |
|||
display: inline-block; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.list .item > img { |
|||
display: block; |
|||
float: left; |
|||
margin-right: 1em; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
/* Content */ |
|||
.ui.list .item > .content { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
line-height: 1.2em; |
|||
} |
|||
.ui.list .item > .icon + .content { |
|||
display: table-cell; |
|||
vertical-align: top; |
|||
} |
|||
|
|||
/* Link */ |
|||
.ui.list a { |
|||
cursor: pointer; |
|||
} |
|||
.ui.list a .icon { |
|||
color: rgba(0, 0, 0, 0.6); |
|||
|
|||
-webkit-transition: color 0.2s ease; |
|||
-moz-transition: color 0.2s ease; |
|||
-o-transition: color 0.2s ease; |
|||
-ms-transition: color 0.2s ease; |
|||
transition: color 0.2s ease; |
|||
} |
|||
|
|||
/* Header */ |
|||
.ui.list .header { |
|||
font-weight: bold; |
|||
} |
|||
.ui.list .description { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
|
|||
/* Floated Content */ |
|||
.ui.list .item > .left.floated { |
|||
margin-right: 1em; |
|||
float: left; |
|||
} |
|||
.ui.list .item > .right.floated { |
|||
margin-left: 1em; |
|||
float: right; |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Types |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Horizontal |
|||
--------------------*/ |
|||
|
|||
.ui.horizontal.list { |
|||
display: inline-block; |
|||
font-size: 0em; |
|||
} |
|||
.ui.horizontal.list > .item { |
|||
display: inline-block; |
|||
margin-left: 1em; |
|||
font-size: 1rem; |
|||
} |
|||
.ui.horizontal.list > .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.horizontal.list .list { |
|||
padding-left: 0em; |
|||
padding-bottom: 0em; |
|||
} |
|||
|
|||
|
|||
/******************************* |
|||
States |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Hover |
|||
--------------------*/ |
|||
|
|||
.ui.list a:hover .icon { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
|
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
/*------------------- |
|||
Inverted |
|||
--------------------*/ |
|||
|
|||
.ui.inverted.list a .icon { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
} |
|||
.ui.inverted.list .description { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.link.list .item { |
|||
color: rgba(255, 255, 255, 0.4); |
|||
} |
|||
|
|||
/*------------------- |
|||
Link |
|||
--------------------*/ |
|||
|
|||
.ui.link.list .item { |
|||
color: rgba(0, 0, 0, 0.3); |
|||
} |
|||
.ui.link.list a.item, |
|||
.ui.link.list .item a { |
|||
color: rgba(0, 0, 0, 0.5); |
|||
} |
|||
.ui.link.list a.item:hover, |
|||
.ui.link.list .item a:hover { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.link.list a.item:active, |
|||
.ui.link.list .item a:active { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
.ui.link.list a.active.item, |
|||
.ui.link.list .active.item a { |
|||
color: rgba(0, 0, 0, 0.8); |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.link.list a.item, |
|||
.ui.inverted.link.list .item a { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
} |
|||
.ui.inverted.link.list a.item:hover, |
|||
.ui.inverted.link.list .item a:hover { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.link.list a.item:active, |
|||
.ui.inverted.link.list .item a:active { |
|||
color: rgba(255, 255, 255, 0.9); |
|||
} |
|||
.ui.inverted.link.list a.active.item, |
|||
.ui.inverted.link.list .active.item a { |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
|
|||
/*------------------- |
|||
Selection |
|||
--------------------*/ |
|||
|
|||
.ui.selection.list .item { |
|||
cursor: pointer; |
|||
color: rgba(0, 0, 0, 0.4); |
|||
padding: 0.5em; |
|||
|
|||
transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
} |
|||
.ui.selection.list .item:hover { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list .item:active { |
|||
background-color: rgba(0, 0, 0, 0.05); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.selection.list .item.active { |
|||
background-color: rgba(0, 0, 0, 0.04); |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
|
|||
.ui.animated.list .item { |
|||
transition: |
|||
0.2s color ease, |
|||
0.2s padding-left ease, |
|||
0.2s background-color ease |
|||
; |
|||
} |
|||
.ui.animated.list:not(.horizontal) .item:hover { |
|||
padding-left: 1em; |
|||
} |
|||
.ui.animated.list:not(.horizontal) .item:hover .item:hover { |
|||
padding-left: 0.5em; |
|||
} |
|||
|
|||
|
|||
/* Inverted */ |
|||
.ui.inverted.selection.list .item { |
|||
color: rgba(255, 255, 255, 0.6); |
|||
} |
|||
.ui.inverted.selection.list .item:hover { |
|||
background-color: rgba(255, 255, 255, 0.04); |
|||
color: rgba(255, 255, 255, 0.8); |
|||
} |
|||
.ui.inverted.selection.list .item:active { |
|||
background-color: rgba(255, 255, 255, 0.1); |
|||
color: rgba(255, 255, 255, 0.7); |
|||
} |
|||
.ui.inverted.selection.list .item.active { |
|||
background-color: rgba(255, 255, 255, 0.08); |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Bulleted |
|||
--------------------*/ |
|||
|
|||
ul.ui.list, |
|||
.ui.bulleted.list { |
|||
margin-left: 1.5em; |
|||
} |
|||
ul.ui.list li, |
|||
.ui.bulleted.list .item { |
|||
position: relative; |
|||
} |
|||
ul.ui.list li:before, |
|||
.ui.bulleted.list .item:before { |
|||
position: absolute; |
|||
left: -1.5em; |
|||
content: '•'; |
|||
} |
|||
|
|||
ul.ui.list ul, |
|||
.ui.bulleted.list .list { |
|||
padding-left: 1.5em; |
|||
} |
|||
|
|||
/* 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: 1.5em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:before, |
|||
.ui.horizontal.bulleted.list .item:before { |
|||
left: -0.9em; |
|||
} |
|||
ul.ui.horizontal.bulleted.list li:first-child, |
|||
.ui.horizontal.bulleted.list .item:first-child { |
|||
margin-left: 0em; |
|||
} |
|||
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 { |
|||
counter-reset: ordered; |
|||
margin-left: 2em; |
|||
list-style-type: none; |
|||
} |
|||
ol.ui.list li, |
|||
.ui.ordered.list .item { |
|||
list-style-type: none; |
|||
position: relative; |
|||
} |
|||
ol.ui.list li:before, |
|||
.ui.ordered.list .item:before { |
|||
position: absolute; |
|||
left: -2em; |
|||
|
|||
counter-increment: ordered; |
|||
content: counters(ordered, "."); |
|||
|
|||
text-align: right; |
|||
vertical-align: top; |
|||
opacity: 0.75; |
|||
} |
|||
|
|||
ol.ui.list ol, |
|||
.ui.ordered.list .list { |
|||
counter-reset: ordered; |
|||
padding-left: 2.5em; |
|||
} |
|||
|
|||
ol.ui.list ol li:before, |
|||
.ui.ordered.list .list .item:before { |
|||
left: -2.5em; |
|||
} |
|||
|
|||
/* Horizontal Ordered */ |
|||
ol.ui.horizontal.list, |
|||
.ui.ordered.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
ol.ui.horizontal.list li:before, |
|||
.ui.ordered.horizontal.list .item:before { |
|||
position: static; |
|||
left: 0em; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Divided |
|||
--------------------*/ |
|||
|
|||
.ui.divided.list > .item, |
|||
.ui.divided.list:not(.horizontal) > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.divided.list .item .menu .item { |
|||
border-width: 0px; |
|||
} |
|||
.ui.divided.list .item:first-child { |
|||
border-top-width: 0px; |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.divided.list:not(.horizontal) .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.ui.divided.list:not(.horizontal) .list .item { |
|||
padding-left: 1em; |
|||
padding-right: 1em; |
|||
} |
|||
.ui.divided.list:not(.horizontal) .list .item:first-child { |
|||
border-top-width: 1px; |
|||
} |
|||
|
|||
/* Divided bulleted */ |
|||
.ui.divided.bulleted.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.bulleted.list .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.divided.bulleted.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Divided ordered */ |
|||
.ui.divided.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.ordered.list > .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.divided.ordered.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.divided.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
|
|||
/* Divided horizontal */ |
|||
.ui.divided.horizontal.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.divided.horizontal.list > .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6em; |
|||
} |
|||
.ui.horizontal.divided.list > .item:first-child { |
|||
border-left: none; |
|||
padding-left: 0em; |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.divided.inverted.list > .item, |
|||
.ui.divided.inverted.list > .list { |
|||
border-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
.ui.divided.inverted.horizontal.list .item { |
|||
border-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Celled |
|||
--------------------*/ |
|||
|
|||
.ui.celled.list > .item, |
|||
.ui.celled.list > .list { |
|||
border-top: 1px solid rgba(0, 0, 0, 0.1); |
|||
padding-left: 0.5em; |
|||
padding-right: 0.5em; |
|||
} |
|||
.ui.celled.list > .item:last-child { |
|||
border-bottom: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Sub Menu */ |
|||
.ui.celled.list .item .list { |
|||
margin-left: -0.5em; |
|||
margin-right: -0.5em; |
|||
} |
|||
.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 > .item { |
|||
padding-left: 1.5em; |
|||
} |
|||
.ui.celled.bulleted.list > .item:before { |
|||
left: 0.5em; |
|||
} |
|||
|
|||
/* Celled Ordered */ |
|||
.ui.celled.ordered.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.celled.ordered.list .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
.ui.celled.ordered.list .item:before { |
|||
left: 0.5em; |
|||
} |
|||
.ui.celled.ordered.list .item .list { |
|||
margin-left: -2em; |
|||
margin-right: -2em; |
|||
} |
|||
|
|||
/* Celled Horizontal */ |
|||
.ui.horizontal.celled.list { |
|||
margin-left: 0em; |
|||
} |
|||
.ui.horizontal.celled.list .item { |
|||
border-top: none; |
|||
border-left: 1px solid rgba(0, 0, 0, 0.1); |
|||
margin: 0em; |
|||
padding-left: 0.75em; |
|||
padding-right: 0.75em; |
|||
|
|||
line-height: 0.6em; |
|||
} |
|||
.ui.horizontal.celled.list .item:last-child { |
|||
border-bottom: none; |
|||
border-right: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Inverted */ |
|||
.ui.celled.inverted.list > .item, |
|||
.ui.celled.inverted.list > .list { |
|||
border-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
.ui.celled.inverted.horizontal.list .item { |
|||
border-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
|
|||
|
|||
|
|||
/*------------------- |
|||
Relaxed |
|||
--------------------*/ |
|||
|
|||
.ui.relaxed.list:not(.horizontal) .item { |
|||
padding-top: 0.5em; |
|||
padding-bottom: 0.5em; |
|||
} |
|||
.ui.relaxed.list .header { |
|||
margin-bottom: 0.25em; |
|||
} |
|||
.ui.horizontal.relaxed.list .item { |
|||
padding-left: 1.25em; |
|||
padding-right: 1.25em; |
|||
} |
|||
|
|||
.ui.very.relaxed.list:not(.horizontal) .item { |
|||
padding-top: 1em; |
|||
padding-bottom: 1em; |
|||
} |
|||
.ui.very.relaxed.list .header { |
|||
margin-bottom: 0.5em; |
|||
} |
|||
.ui.horizontal.very.relaxed.list .item { |
|||
padding-left: 2em; |
|||
padding-right: 2em; |
|||
} |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.mini.list .item { |
|||
font-size: 0.7rem; |
|||
} |
|||
.ui.tiny.list .item { |
|||
font-size: 0.8125rem; |
|||
} |
|||
.ui.small.list .item { |
|||
font-size: 0.875rem; |
|||
} |
|||
.ui.list .item { |
|||
font-size: 1em; |
|||
} |
|||
.ui.large.list .item { |
|||
font-size: 1.125rem; |
|||
} |
|||
.ui.big.list .item { |
|||
font-size: 1.25rem; |
|||
} |
|||
.ui.huge.list .item { |
|||
font-size: 1.375rem; |
|||
} |
|||
.ui.massive.list .item { |
|||
font-size: 1.5rem; |
|||
} |
|||
@ -1,27 +0,0 @@ |
|||
/* |
|||
* # Statistic |
|||
* |
|||
* |
|||
* Copyright 2013 Contributors |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
* Released: Aug 20, 2013 |
|||
*/ |
|||
/******************************* |
|||
Statistic |
|||
*******************************/ |
|||
.ui.statistic { |
|||
text-align: center; |
|||
} |
|||
/******************************* |
|||
Content |
|||
*******************************/ |
|||
.ui.statistic > .number { |
|||
font-size: 4em; |
|||
font-weight: bold; |
|||
color: rgba(0, 0, 0, 0.7); |
|||
} |
|||
.ui.statistic > .description { |
|||
opacity: 0.8; |
|||
} |
|||
@ -1,118 +0,0 @@ |
|||
/* |
|||
|
|||
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗ |
|||
██╔════╝██╔════╝████╗ ████║██╔══██╗████╗ ██║╚══██╔══╝██║██╔════╝ ██║ ██║██║ |
|||
███████╗█████╗ ██╔████╔██║███████║██╔██╗ ██║ ██║ ██║██║ ██║ ██║██║ |
|||
╚════██║██╔══╝ ██║╚██╔╝██║██╔══██║██║╚██╗██║ ██║ ██║██║ ██║ ██║██║ |
|||
███████║███████╗██║ ╚═╝ ██║██║ ██║██║ ╚████║ ██║ ██║╚██████╗ ╚██████╔╝██║ |
|||
╚══════╝╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ |
|||
|
|||
*/ |
|||
|
|||
/******************************* |
|||
Folders |
|||
*******************************/ |
|||
|
|||
/* Path to theme packages */ |
|||
@packagesFolder : 'themes/packages'; |
|||
|
|||
/* Path to site override folder */ |
|||
@userFolder : 'themes/_site'; |
|||
|
|||
|
|||
/******************************* |
|||
Themes |
|||
*******************************/ |
|||
|
|||
/* To override a theme for an individual element |
|||
specify theme name below |
|||
|
|||
Be sure to update the user folder name (see README) |
|||
*/ |
|||
|
|||
/* Global */ |
|||
@site : 'default'; |
|||
@reset : 'default'; |
|||
|
|||
/* Elements */ |
|||
@button : 'default'; |
|||
@container : 'default'; |
|||
@icon : 'default'; |
|||
@divider : 'default'; |
|||
@header : 'default'; |
|||
@image : 'default'; |
|||
@input : 'default'; |
|||
@label : 'default'; |
|||
@loader : 'default'; |
|||
@progress : 'default'; |
|||
@reveal : 'default'; |
|||
@segment : 'default'; |
|||
@step : 'default'; |
|||
|
|||
/* Collections */ |
|||
@breadcrumb : 'default'; |
|||
@form : 'default'; |
|||
@grid : 'default'; |
|||
@menu : 'default'; |
|||
@message : 'default'; |
|||
@table : 'default'; |
|||
|
|||
/* Modules */ |
|||
@accordion : 'default'; |
|||
@chatroom : 'default'; |
|||
@checkbox : 'default'; |
|||
@dropdown : 'default'; |
|||
@modal : 'default'; |
|||
@nag : 'default'; |
|||
@popup : 'default'; |
|||
@rating : 'default'; |
|||
@search : 'default'; |
|||
@shape : 'default'; |
|||
@sidebar : 'default'; |
|||
@tab : 'default'; |
|||
@transition : 'default'; |
|||
@video : 'default'; |
|||
|
|||
/* Views */ |
|||
@comment : 'default'; |
|||
@feed : 'default'; |
|||
@item : 'default'; |
|||
@list : 'default'; |
|||
@statistic : 'default'; |
|||
|
|||
|
|||
/******************************* |
|||
Import Directives |
|||
*******************************/ |
|||
|
|||
@theme : @@element; |
|||
|
|||
/*------------------ |
|||
Load Default |
|||
-------------------*/ |
|||
|
|||
@import "@{packagesFolder}/default/globals/site.variables"; |
|||
@import "@{packagesFolder}/default/@{type}s/@{element}.variables"; |
|||
|
|||
/*------------------ |
|||
Load Theme |
|||
-------------------*/ |
|||
|
|||
@import "@{packagesFolder}/@{site}/globals/site.variables"; |
|||
@import "@{packagesFolder}/@{theme}/@{type}s/@{element}.variables"; |
|||
|
|||
/*------------------ |
|||
Load Site |
|||
-------------------*/ |
|||
|
|||
@import "@{userFolder}/globals/site.variables"; |
|||
@import "@{userFolder}/@{type}s/@{element}.variables"; |
|||
|
|||
/*------------------ |
|||
Override Mix-in |
|||
-------------------*/ |
|||
|
|||
.loadUIOverrides() { |
|||
@import "@{packagesFolder}//@{theme}/@{type}s/@{element}.overrides"; |
|||
@import "@{userFolder}/@{type}s/@{element}.overrides"; |
|||
} |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Global Variables |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Global Variables |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
@ -1,3 +0,0 @@ |
|||
/******************************* |
|||
User Variable Overrides |
|||
*******************************/ |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB |
Binary file not shown.
Binary file not shown.
@ -1,4 +0,0 @@ |
|||
/******************************* |
|||
Overrides |
|||
*******************************/ |
|||
|
|||
@ -1,41 +0,0 @@ |
|||
/*------------------- |
|||
Button Variables |
|||
--------------------*/ |
|||
|
|||
/* Button Variables */ |
|||
@textTransform: none; |
|||
@fontWeight: normal; |
|||
@textColor: #333333; |
|||
|
|||
@primaryColor: #333333; |
|||
|
|||
@borderRadius: 0.25em; |
|||
|
|||
@backgroundColor: #EEEEEE; |
|||
@backgroundImage: none; |
|||
@boxShadow: none; |
|||
|
|||
@hoverBackgroundColor: #DDDDDD; |
|||
@hoverBackgroundImage: none; |
|||
@hoverBoxShadow: none; |
|||
|
|||
@downBackgroundColor: #D0D0D0; |
|||
@downBackgroundImage: none; |
|||
@downBoxShadow: none; |
|||
|
|||
@activeBackgroundColor: #CCCCCC; |
|||
@activeBackgroundImage: none; |
|||
@activeBoxShadow: none; |
|||
|
|||
@verticalBoxShadow: none; |
|||
|
|||
@loadingBackgroundColor: #F0F0F0; |
|||
|
|||
@mini: 0.6rem; |
|||
@tiny: 0.7rem; |
|||
@small: 0.85rem; |
|||
@medium: 0.92rem; |
|||
@large: 1rem; |
|||
@big: 1.125rem; |
|||
@huge: 1.25rem; |
|||
@massive: 1.3rem; |
|||
@ -1,189 +0,0 @@ |
|||
/* basic.icons available */ |
|||
i.basic.icon.circle.attention:before { content: '\2757'; } /* '❗' */ |
|||
i.basic.icon.circle.help:before { content: '\e704'; } /* '' */ |
|||
i.basic.icon.circle.info:before { content: '\e705'; } /* '' */ |
|||
i.basic.icon.add:before { content: '\2795'; } /* '➕' */ |
|||
|
|||
i.basic.icon.chart:before { content: '📈'; } /* '\1f4c8' */ |
|||
i.basic.icon.chart.bar:before { content: '📊'; } /* '\1f4ca' */ |
|||
i.basic.icon.chart.pie:before { content: '\e7a2'; } /* '' */ |
|||
|
|||
i.basic.icon.resize.full:before { content: '\e744'; } /* '' */ |
|||
i.basic.icon.resize.horizontal:before { content: '\2b0d'; } /* '⬍' */ |
|||
i.basic.icon.resize.small:before { content: '\e746'; } /* '' */ |
|||
i.basic.icon.resize.vertical:before { content: '\2b0c'; } /* '⬌' */ |
|||
|
|||
i.basic.icon.down:before { content: '\2193'; } /* '↓' */ |
|||
i.basic.icon.down.triangle:before { content: '\25be'; } /* '▾' */ |
|||
i.basic.icon.down.arrow:before { content: '\e75c'; } /* '' */ |
|||
|
|||
i.basic.icon.left:before { content: '\2190'; } /* '←' */ |
|||
i.basic.icon.left.triangle:before { content: '\25c2'; } /* '◂' */ |
|||
i.basic.icon.left.arrow:before { content: '\e75d'; } /* '' */ |
|||
|
|||
i.basic.icon.right:before { content: '\2192'; } /* '→' */ |
|||
i.basic.icon.right.triangle:before { content: '\25b8'; } /* '▸' */ |
|||
i.basic.icon.right.arrow:before { content: '\e75e'; } /* '' */ |
|||
|
|||
i.basic.icon.up:before { content: '\2191'; } /* '↑' */ |
|||
i.basic.icon.up.triangle:before { content: '\25b4'; } /* '▴' */ |
|||
i.basic.icon.up.arrow:before { content: '\e75f'; } /* '' */ |
|||
|
|||
i.basic.icon.folder:before { content: '\e810'; } /* '' */ |
|||
i.basic.icon.open.folder:before { content: '📂'; } /* '\1f4c2' */ |
|||
|
|||
i.basic.icon.globe:before { content: '𝌍'; } /* '\1d30d' */ |
|||
i.basic.icon.desk.globe:before { content: '🌐'; } /* '\1f310' */ |
|||
|
|||
i.basic.icon.star:before { content: '\e801'; } /* '' */ |
|||
i.basic.icon.star.empty:before { content: '\e800'; } /* '' */ |
|||
i.basic.icon.star.half:before { content: '\e701'; } /* '' */ |
|||
|
|||
i.basic.icon.lock:before { content: '🔒'; } /* '\1f512' */ |
|||
i.basic.icon.unlock:before { content: '🔓'; } /* '\1f513' */ |
|||
|
|||
i.basic.icon.layout.grid:before { content: '\e80c'; } /* '' */ |
|||
i.basic.icon.layout.block:before { content: '\e708'; } /* '' */ |
|||
i.basic.icon.layout.list:before { content: '\e80b'; } /* '' */ |
|||
|
|||
i.basic.icon.heart.empty:before { content: '\2661'; } /* '♡' */ |
|||
i.basic.icon.heart:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
|
|||
i.basic.icon.asterisk:before { content: '\2731'; } /* '✱' */ |
|||
i.basic.icon.attachment:before { content: '📎'; } /* '\1f4ce' */ |
|||
i.basic.icon.attention:before { content: '\26a0'; } /* '⚠' */ |
|||
i.basic.icon.trophy:before { content: '🏉'; } /* '\1f3c9' */ |
|||
i.basic.icon.barcode:before { content: '\e792'; } /* '' */ |
|||
i.basic.icon.cart:before { content: '\e813'; } /* '' */ |
|||
i.basic.icon.block:before { content: '🚫'; } /* '\1f6ab' */ |
|||
i.basic.icon.book:before { content: '📖'; } |
|||
i.basic.icon.bookmark:before { content: '🔖'; } /* '\1f516' */ |
|||
i.basic.icon.calendar:before { content: '📅'; } /* '\1f4c5' */ |
|||
i.basic.icon.cancel:before { content: '\2716'; } /* '✖' */ |
|||
i.basic.icon.close:before { content: '\e80d'; } /* '' */ |
|||
i.basic.icon.color:before { content: '\e794'; } /* '' */ |
|||
i.basic.icon.chat:before { content: '\e720'; } /* '' */ |
|||
i.basic.icon.check:before { content: '\2611'; } /* '☑' */ |
|||
i.basic.icon.time:before { content: '🕔'; } /* '\1f554' */ |
|||
i.basic.icon.cloud:before { content: '\2601'; } /* '☁' */ |
|||
i.basic.icon.code:before { content: '\e714'; } /* '' */ |
|||
i.basic.icon.email:before { content: '\40'; } /* '@' */ |
|||
i.basic.icon.settings:before { content: '\26ef'; } /* '⛯' */ |
|||
i.basic.icon.setting:before { content: '\2699'; } /* '⚙' */ |
|||
i.basic.icon.comment:before { content: '\e802'; } /* '' */ |
|||
i.basic.icon.clockwise.counter:before { content: '\27f2'; } /* '⟲' */ |
|||
i.basic.icon.clockwise:before { content: '\27f3'; } /* '⟳' */ |
|||
i.basic.icon.cube:before { content: '\e807'; } /* '' */ |
|||
i.basic.icon.direction:before { content: '\27a2'; } /* '➢' */ |
|||
i.basic.icon.doc:before { content: '📄'; } /* '\1f4c4' */ |
|||
i.basic.icon.docs:before { content: '\e736'; } /* '' */ |
|||
i.basic.icon.dollar:before { content: '💵'; } /* '\1f4b5' */ |
|||
i.basic.icon.paint:before { content: '\e7b5'; } /* '' */ |
|||
i.basic.icon.edit:before { content: '\270d'; } /* '✍' */ |
|||
i.basic.icon.eject:before { content: '\2ecf'; } /* '⻏' */ |
|||
i.basic.icon.export:before { content: '\e715'; } /* '' */ |
|||
i.basic.icon.hide:before { content: '\e80f'; } /* '' */ |
|||
i.basic.icon.unhide:before { content: '\e70b'; } /* '' */ |
|||
i.basic.icon.facebook:before { content: '\f301'; } /* '' */ |
|||
i.basic.icon.fast-forward:before { content: '\e804'; } /* '' */ |
|||
i.basic.icon.fire:before { content: '🔥'; } /* '\1f525' */ |
|||
i.basic.icon.flag:before { content: '\2691'; } /* '⚑' */ |
|||
i.basic.icon.lightning:before { content: '\26a1'; } /* '⚡' */ |
|||
i.basic.icon.lab:before { content: '\68'; } /* 'h' */ |
|||
i.basic.icon.flight:before { content: '\2708'; } /* '✈' */ |
|||
i.basic.icon.forward:before { content: '\27a6'; } /* '➦' */ |
|||
i.basic.icon.gift:before { content: '🎁'; } /* '\1f381' */ |
|||
i.basic.icon.github:before { content: '\f308'; } /* '' */ |
|||
i.basic.icon.globe:before { content: '\e817'; } /* '' */ |
|||
i.basic.icon.headphones:before { content: '🎧'; } /* '\1f3a7' */ |
|||
i.basic.icon.question:before { content: '\2753'; } /* '❓' */ |
|||
i.basic.icon.home:before { content: '\2302'; } /* '⌂' */ |
|||
i.basic.icon.i:before { content: '\2139'; } /* 'ℹ' */ |
|||
i.basic.icon.idea:before { content: '💡'; } /* '\1f4a1' */ |
|||
i.basic.icon.open:before { content: '🔗'; } /* '\1f517' */ |
|||
i.basic.icon.content:before { content: '\e782'; } /* '' */ |
|||
i.basic.icon.location:before { content: '\e724'; } /* '' */ |
|||
i.basic.icon.mail:before { content: '\2709'; } /* '✉' */ |
|||
i.basic.icon.mic:before { content: '🎤'; } /* '\1f3a4' */ |
|||
i.basic.icon.minus:before { content: '\2d'; } /* '-' */ |
|||
i.basic.icon.money:before { content: '💰'; } /* '\1f4b0' */ |
|||
i.basic.icon.off:before { content: '\e78e'; } /* '' */ |
|||
i.basic.icon.pause:before { content: '\e808'; } /* '' */ |
|||
i.basic.icon.photos:before { content: '\e812'; } /* '' */ |
|||
i.basic.icon.photo:before { content: '🌄'; } /* '\1f304' */ |
|||
i.basic.icon.pin:before { content: '📌'; } /* '\1f4cc' */ |
|||
i.basic.icon.play:before { content: '\e809'; } /* '' */ |
|||
i.basic.icon.plus:before { content: '\2b'; } /* '+' */ |
|||
i.basic.icon.print:before { content: '\e716'; } /* '' */ |
|||
i.basic.icon.rss:before { content: '\e73a'; } /* '' */ |
|||
i.basic.icon.search:before { content: '🔍'; } /* '\1f50d' */ |
|||
i.basic.icon.shuffle:before { content: '\e803'; } /* '' */ |
|||
i.basic.icon.tag:before { content: '\e80a'; } /* '' */ |
|||
i.basic.icon.tags:before { content: '\e70d'; } /* '' */ |
|||
i.basic.icon.terminal:before { content: '\e7ac'; } /* '' */ |
|||
i.basic.icon.thumbs.down:before { content: '👎'; } /* '\1f44e' */ |
|||
i.basic.icon.thumbs.up:before { content: '👍'; } /* '\1f44d' */ |
|||
i.basic.icon.to-end:before { content: '\e806'; } /* '' */ |
|||
i.basic.icon.to-start:before { content: '\e805'; } /* '' */ |
|||
i.basic.icon.top.list:before { content: '🏆'; } /* '\1f3c6' */ |
|||
i.basic.icon.trash:before { content: '\e729'; } /* '' */ |
|||
i.basic.icon.twitter:before { content: '\f303'; } /* '' */ |
|||
i.basic.icon.upload:before { content: '\e711'; } /* '' */ |
|||
i.basic.icon.user.add:before { content: '\e700'; } /* '' */ |
|||
i.basic.icon.user:before { content: '👤'; } /* '\1f464' */ |
|||
i.basic.icon.community:before { content: '\e814'; } /* '' */ |
|||
i.basic.icon.users:before { content: '👥'; } /* '\1f465' */ |
|||
i.basic.icon.id:before { content: '\e722'; } /* '' */ |
|||
i.basic.icon.url:before { content: '🔗'; } /* '\1f517' */ |
|||
i.basic.icon.zoom.in:before { content: '\e750'; } /* '' */ |
|||
i.basic.icon.zoom.out:before { content: '\e751'; } /* '' */ |
|||
|
|||
/*-------------- |
|||
Spacing Fix |
|||
---------------*/ |
|||
|
|||
/* dropdown arrows are to the right */ |
|||
i.dropdown.basic.icon { |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/* stars are usually consecutive */ |
|||
i.basic.icon.star { |
|||
width: auto; |
|||
margin: 0em; |
|||
} |
|||
|
|||
/* left side basic.icons */ |
|||
i.basic.icon.left { |
|||
width: auto; |
|||
margin: 0em 0.5em 0em 0em; |
|||
} |
|||
|
|||
/* right side basic.icons */ |
|||
i.basic.icon.search, |
|||
i.basic.icon.up, |
|||
i.basic.icon.down, |
|||
i.basic.icon.right { |
|||
width: auto; |
|||
margin: 0em 0em 0em 0.5em; |
|||
} |
|||
|
|||
/*-------------- |
|||
Aliases |
|||
---------------*/ |
|||
|
|||
/* aliases for convenience */ |
|||
i.basic.icon.delete:before { content: '\e80d'; } /* '' */ |
|||
i.basic.icon.dropdown:before { content: '\25be'; } /* '▾' */ |
|||
|
|||
i.basic.icon.help:before { content: '\e704'; } /* '' */ |
|||
i.basic.icon.info:before { content: '\e705'; } /* '' */ |
|||
i.basic.icon.error:before { content: '\e80d'; } /* '' */ |
|||
|
|||
i.basic.icon.dislike:before { content: '\2661'; } /* '♡' */ |
|||
i.basic.icon.like:before { content: '\2665'; } /* '♥' */ |
|||
|
|||
i.basic.icon.eye:before { content: '\e80f'; } /* '' */ |
|||
i.basic.icon.eye.hidden:before { content: '\e70b'; } /* '' */ |
|||
i.basic.icon.date:before { content: '📅'; } /* '\1f4c5' */ |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue