Krautspace/calcifer
Archived
2
0
Fork 0
Code Issues 11 Pull requests 2 Activity

Update Semantic to 2.1

Browse source 
Ticket #56
This commit is contained in:
Tim Schumacher 2016-06-10 00:34:34 +02:00
parent 3f1e728781
commit 4385f1acbc
425 changed files with 59924 additions and 37200 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/semantic/src/_site/collections/message.overrides
View file

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

0
web/semantic/src/_site/modules/video.overrides → web/semantic/src/_site/elements/container.overrides
View file

3
web/semantic/src/_site/elements/container.variables Normal file
View file

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

3
web/semantic/src/_site/modules/embed.overrides Normal file
View file

@ -0,0 +1,3 @@
/*******************************
Site Overrides
*******************************/

0
web/semantic/src/_site/modules/video.variables → web/semantic/src/_site/modules/embed.variables
View file

667
web/semantic/src/definitions/behaviors/api.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -63,10 +63,11 @@ $.api = $.fn.api = function(parameters) {
requestSettings,
url,
data,
requestStartTime,
// standard module
element = this,
context = $context.get(),
context = $context[0],
instance = $module.data(moduleNamespace),
module
;
@ -74,21 +75,8 @@ $.api = $.fn.api = function(parameters) {
module = {
initialize: function() {
var
triggerEvent = module.get.event()
;
// bind events
if(!methodInvoked) {
if( triggerEvent ) {
module.debug('Attaching API events to element', triggerEvent);
$module
.on(triggerEvent + eventNamespace, module.event.trigger)
;
}
else if(settings.on == 'now') {
module.debug('Querying API now', triggerEvent);
module.query();
}
module.bind.events();
}
module.instantiate();
},
@ -109,16 +97,87 @@ $.api = $.fn.api = function(parameters) {
;
},
bind: {
events: function() {
var
triggerEvent = module.get.event()
;
if( triggerEvent ) {
module.verbose('Attaching API events to element', triggerEvent);
$module
.on(triggerEvent + eventNamespace, module.event.trigger)
;
}
else if(settings.on == 'now') {
module.debug('Querying API endpoint immediately');
module.query();
}
}
},
decode: {
json: function(response) {
if(response !== undefined && typeof response == 'string') {
try {
response = JSON.parse(response);
}
catch(e) {
// isnt json string
}
}
return response;
}
},
read: {
cachedResponse: function(url) {
var
response
;
if(window.Storage === undefined) {
module.error(error.noStorage);
return;
}
response = sessionStorage.getItem(url);
module.debug('Using cached response', url, response);
response = module.decode.json(response);
return false;
}
},
write: {
cachedResponse: function(url, response) {
if(response && response === '') {
module.debug('Response empty, not caching', response);
return;
}
if(window.Storage === undefined) {
module.error(error.noStorage);
return;
}
if( $.isPlainObject(response) ) {
response = JSON.stringify(response);
}
sessionStorage.setItem(url, response);
module.verbose('Storing cached response for url', url, response);
}
},
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.throttle === 0 ) {
module.debug('Cancelling request, previous request is still pending');
return;
if(module.is.loading()) {
if(settings.interruptRequests) {
module.debug('Interrupting previous request');
module.abort();
}
else {
module.debug('Cancelling request, previous request is still pending');
return;
}
}
// pass element metadata to url (value, text)
@ -127,17 +186,12 @@ $.api = $.fn.api = function(parameters) {
}
// Add form content
if(settings.serializeForm !== false || $context.is('form')) {
if(settings.serializeForm == 'json') {
$.extend(true, settings.data, module.get.formData());
}
else {
settings.data = module.get.formData();
}
if(settings.serializeForm) {
settings.data = module.add.formData(settings.data);
}
// call beforesend and get any settings changes
requestSettings = module.get.settings();
requestSettings = module.get.settings();
// check if before send cancelled request
if(requestSettings === false) {
@ -149,31 +203,22 @@ $.api = $.fn.api = function(parameters) {
module.cancelled = false;
}
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('Added URL Data to url', url);
// get url
url = module.get.templatedURL();
if(!url && !module.is.mocked()) {
module.error(error.missingURL);
return;
}
// exit conditions reached, missing url parameters
if( !url ) {
if( module.is.form() ) {
url = $module.attr('action') || '';
module.debug('No url or action specified, defaulting to form action', url);
}
else {
module.error(error.missingURL, settings.action);
return;
}
// replace variables
url = module.add.urlData( url );
// missing url parameters
if( !url && !module.is.mocked()) {
return;
}
// add loading state
module.set.loading();
requestSettings.url = settings.base + url;
// look for jQuery ajax parameters in settings
ajaxSettings = $.extend(true, {}, settings, {
@ -187,39 +232,86 @@ $.api = $.fn.api = function(parameters) {
});
module.debug('Querying URL', ajaxSettings.url);
module.debug('Sending data', data, ajaxSettings.method);
module.verbose('Using AJAX settings', ajaxSettings);
if( module.is.loading() ) {
// throttle additional requests
module.timer = setTimeout(function() {
module.request = module.create.request();
module.xhr = module.create.xhr();
settings.onRequest.call(context, module.request, module.xhr);
}, settings.throttle);
if(settings.cache === 'local' && module.read.cachedResponse(url)) {
module.debug('Response returned from local cache');
module.request = module.create.request();
module.request.resolveWith(context, [ module.read.cachedResponse(url) ]);
return;
}
if( !settings.throttle ) {
module.debug('Sending request', data, ajaxSettings.method);
module.send.request();
}
else {
// immediately on first request
module.request = module.create.request();
module.xhr = module.create.xhr();
settings.onRequest.call(context, module.request, module.xhr);
if(!settings.throttleFirstRequest && !module.timer) {
module.debug('Sending request', data, ajaxSettings.method);
module.send.request();
module.timer = setTimeout(function(){}, settings.throttle);
}
else {
module.debug('Throttling request', settings.throttle);
clearTimeout(module.timer);
module.timer = setTimeout(function() {
if(module.timer) {
delete module.timer;
}
module.debug('Sending throttled request', data, ajaxSettings.method);
module.send.request();
}, settings.throttle);
}
}
},
should: {
removeError: function() {
return ( settings.hideError === true || (settings.hideError === 'auto' && !module.is.form()) );
}
},
is: {
disabled: function() {
return ($module.filter(settings.filter).length > 0);
return ($module.filter(selector.disabled).length > 0);
},
form: function() {
return $module.is('form');
return $module.is('form') || $context.is('form');
},
mocked: function() {
return (settings.mockResponse || settings.mockResponseAsync || settings.response || settings.responseAsync);
},
input: function() {
return $module.is('input');
},
loading: function() {
return (module.request && module.request.state() == 'pending');
},
abortedRequest: function(xhr) {
if(xhr && xhr.readyState !== undefined && xhr.readyState === 0) {
module.verbose('XHR request determined to be aborted');
return true;
}
else {
module.verbose('XHR request was not aborted');
return false;
}
},
validResponse: function(response) {
if( (settings.dataType !== 'json' && settings.dataType !== 'jsonp') || !$.isFunction(settings.successTest) ) {
module.verbose('Response is not JSON, skipping validation', settings.successTest, response);
return true;
}
module.debug('Checking JSON returned success', settings.successTest, response);
if( settings.successTest(response) ) {
module.debug('Response passed success test', response);
return true;
}
else {
module.debug('Response failed success test', response);
return false;
}
}
},
@ -272,6 +364,10 @@ $.api = $.fn.api = function(parameters) {
}
else {
module.verbose('Found required variable', variable, value);
value = (settings.encodeParameters)
? module.get.urlEncodedValue(value)
: value
;
url = url.replace(templatedString, value);
}
});
@ -311,6 +407,48 @@ $.api = $.fn.api = function(parameters) {
}
}
return url;
},
formData: function(data) {
var
canSerialize = ($.fn.serializeObject !== undefined),
formData = (canSerialize)
? $form.serializeObject()
: $form.serialize(),
hasOtherData
;
data = data || settings.data;
hasOtherData = $.isPlainObject(data);
if(hasOtherData) {
if(canSerialize) {
module.debug('Extending existing data with form data', data, formData);
data = $.extend(true, {}, data, formData);
}
else {
module.error(error.missingSerialize);
module.debug('Cant extend data. Replacing data with form data', data, formData);
data = formData;
}
}
else {
module.debug('Adding form data', formData);
data = formData;
}
return data;
}
},
send: {
request: function() {
module.set.loading();
module.request = module.create.request();
if( module.is.mocked() ) {
module.mockedXHR = module.create.mockedXHR();
}
else {
module.xhr = module.create.xhr();
}
settings.onRequest.call(context, module.request, module.xhr);
}
},
@ -323,130 +461,194 @@ $.api = $.fn.api = function(parameters) {
},
xhr: {
always: function() {
// calculate if loading time was below minimum threshold
// nothing special
},
done: function(response) {
done: function(response, textStatus, xhr) {
var
context = this,
elapsedTime = (new Date().getTime() - time),
timeLeft = (settings.loadingDuration - elapsedTime)
context = this,
elapsedTime = (new Date().getTime() - requestStartTime),
timeLeft = (settings.loadingDuration - elapsedTime),
translatedResponse = ( $.isFunction(settings.onResponse) )
? settings.onResponse.call(context, $.extend(true, {}, response))
: false
;
timeLeft = (timeLeft > 0)
? timeLeft
: 0
;
if(translatedResponse) {
module.debug('Modified API response in onResponse callback', settings.onResponse, translatedResponse, response);
response = translatedResponse;
}
if(timeLeft > 0) {
module.debug('Response completed early delaying state change by', timeLeft);
}
setTimeout(function() {
module.request.resolveWith(context, [response]);
if( module.is.validResponse(response) ) {
module.request.resolveWith(context, [response, xhr]);
}
else {
module.request.rejectWith(context, [xhr, 'invalid']);
}
}, timeLeft);
},
fail: function(xhr, status, httpMessage) {
var
context = this,
elapsedTime = (new Date().getTime() - time),
elapsedTime = (new Date().getTime() - requestStartTime),
timeLeft = (settings.loadingDuration - elapsedTime)
;
timeLeft = (timeLeft > 0)
? timeLeft
: 0
;
// page triggers abort on navigation, dont show error
if(timeLeft > 0) {
module.debug('Response completed early delaying state change by', timeLeft);
}
setTimeout(function() {
if(status !== 'abort') {
module.request.rejectWith(context, [xhr, status, httpMessage]);
if( module.is.abortedRequest(xhr) ) {
module.request.rejectWith(context, [xhr, 'aborted', httpMessage]);
}
else {
module.reset();
module.request.rejectWith(context, [xhr, 'error', status, httpMessage]);
}
}, timeLeft);
}
},
request: {
complete: function(response) {
module.remove.loading();
settings.onComplete.call(context, response, $module);
},
done: function(response) {
module.debug('API Response Received', response);
if(settings.dataType == 'json') {
if( $.isFunction(settings.successTest) ) {
module.debug('Checking JSON returned success', settings.successTest, response);
if( settings.successTest(response) ) {
settings.onSuccess.call(context, response, $module);
}
else {
module.debug('JSON test specified by user and response failed', response);
settings.onFailure.call(context, response, $module);
}
}
else {
settings.onSuccess.call(context, response, $module);
}
}
else {
settings.onSuccess.call(context, response, $module);
done: function(response, xhr) {
module.debug('Successful API Response', response);
if(settings.cache === 'local' && url) {
module.write.cachedResponse(url, response);
module.debug('Saving server response locally', module.cache);
}
settings.onSuccess.call(context, response, $module, xhr);
},
error: function(xhr, status, httpMessage) {
complete: function(firstParameter, secondParameter) {
var
errorMessage = (settings.error[status] !== undefined)
? settings.error[status]
: httpMessage,
xhr,
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
// have to guess callback parameters based on request success
if( module.was.succesful() ) {
response = firstParameter;
xhr = secondParameter;
}
else {
xhr = firstParameter;
response = module.get.responseFromXHR(xhr);
}
module.remove.loading();
settings.onComplete.call(context, response, $module, xhr);
},
fail: function(xhr, status, httpMessage) {
var
// pull response from xhr if available
response = module.get.responseFromXHR(xhr),
errorMessage = module.get.errorFromRequest(response, status, httpMessage)
;
if(status == 'aborted') {
module.debug('XHR Aborted (Most likely caused by page navigation or CORS Policy)', status, httpMessage);
settings.onAbort.call(context, status, $module, xhr);
}
else if(status == 'invalid') {
module.debug('JSON did not pass success test. A server-side error has most likely occurred', response);
}
else if(status == 'error') {
if(xhr !== undefined) {
module.debug('XHR produced a server error', status, httpMessage);
// make sure we have an error to display to console
if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {
module.error(error.statusMessage + httpMessage, ajaxSettings.url);
}
else {
if(status == 'error' && settings.dataType == 'json') {
try {
response = $.parseJSON(xhr.responseText);
if(response && response.error !== undefined) {
errorMessage = response.error;
}
}
catch(e) {
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);
settings.onError.call(context, errorMessage, $module);
}
else {
settings.onAbort.call(context, errorMessage, $module);
module.debug('Request Aborted (Most likely caused by page change or CORS Policy)', status, httpMessage);
settings.onError.call(context, errorMessage, $module, xhr);
}
}
if(settings.errorDuration && status !== 'aborted') {
module.debug('Adding error state');
module.set.error();
if( module.should.removeError() ) {
setTimeout(module.remove.error, settings.errorDuration);
}
}
module.debug('API Request failed', errorMessage, xhr);
settings.onFailure.call(context, response, $module, xhr);
}
}
},
create: {
request: function() {
// api request promise
return $.Deferred()
.always(module.event.request.complete)
.done(module.event.request.done)
.fail(module.event.request.error)
.fail(module.event.request.fail)
;
},
mockedXHR: function () {
var
// xhr does not simulate these properties of xhr but must return them
textStatus = false,
status = false,
httpMessage = false,
responder = settings.mockResponse || settings.response,
asyncResponder = settings.mockResponseAsync || settings.responseAsync,
asyncCallback,
response,
mockedXHR
;
mockedXHR = $.Deferred()
.always(module.event.xhr.complete)
.done(module.event.xhr.done)
.fail(module.event.xhr.fail)
;
if(responder) {
if( $.isFunction(responder) ) {
module.debug('Using specified synchronous callback', responder);
response = responder.call(context, requestSettings);
}
else {
module.debug('Using settings specified response', responder);
response = responder;
}
// simulating response
mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
}
else if( $.isFunction(asyncResponder) ) {
asyncCallback = function(response) {
module.debug('Async callback returned response', response);
if(response) {
mockedXHR.resolveWith(context, [ response, textStatus, { responseText: response }]);
}
else {
mockedXHR.rejectWith(context, [{ responseText: response }, status, httpMessage]);
}
};
module.debug('Using specified async response callback', asyncResponder);
asyncResponder.call(context, requestSettings, asyncCallback);
}
return mockedXHR;
},
xhr: function() {
return $.ajax(ajaxSettings)
var
xhr
;
// ajax request promise
xhr = $.ajax(ajaxSettings)
.always(module.event.xhr.always)
.done(module.event.xhr.done)
.fail(module.event.xhr.fail)
;
module.verbose('Created server request', xhr);
return xhr;
}
},
@ -458,6 +660,7 @@ $.api = $.fn.api = function(parameters) {
loading: function() {
module.verbose('Adding loading state to element', $context);
$context.addClass(className.loading);
requestStartTime = new Date().getTime();
}
},
@ -473,6 +676,22 @@ $.api = $.fn.api = function(parameters) {
},
get: {
responseFromXHR: function(xhr) {
return $.isPlainObject(xhr)
? (settings.dataType == 'json' || settings.dataType == 'jsonp')
? module.decode.json(xhr.responseText)
: xhr.responseText
: false
;
},
errorFromRequest: function(response, status, httpMessage) {
return ($.isPlainObject(response) && response.error !== undefined)
? response.error // use json error message
: (settings.error[status] !== undefined) // use server error message
? settings.error[status]
: httpMessage
;
},
request: function() {
return module.request || false;
},
@ -483,7 +702,7 @@ $.api = $.fn.api = function(parameters) {
var
runSettings
;
runSettings = settings.beforeSend.call($module, settings);
runSettings = settings.beforeSend.call(context, settings);
if(runSettings) {
if(runSettings.success !== undefined) {
module.debug('Legacy success callback detected', runSettings);
@ -505,10 +724,23 @@ $.api = $.fn.api = function(parameters) {
module.error(error.noReturnedValue);
}
return (runSettings !== undefined)
? runSettings
: settings
? $.extend(true, {}, runSettings)
: $.extend(true, {}, settings)
;
},
urlEncodedValue: function(value) {
var
decodedValue = window.decodeURIComponent(value),
encodedValue = window.encodeURIComponent(value),
alreadyEncoded = (decodedValue !== value)
;
if(alreadyEncoded) {
module.debug('URL value is already encoded, avoiding double encoding', value);
return value;
}
module.verbose('Encoding value using encodeURIComponent', value, encodedValue);
return encodedValue;
},
defaultData: function() {
var
data = {}
@ -551,34 +783,24 @@ $.api = $.fn.api = function(parameters) {
return settings.on;
}
},
formData: function() {
var
formData
;
if($module.serializeObject !== undefined) {
formData = $form.serializeObject();
}
else {
module.error(error.missingSerialize);
formData = $form.serialize();
}
module.debug('Retrieved form data', formData);
return formData;
},
templateURL: function(action) {
var
url
;
templatedURL: function(action) {
action = action || $module.data(metadata.action) || settings.action || false;
url = $module.data(metadata.url) || settings.url || false;
if(url) {
module.debug('Using specified url', url);
return url;
}
if(action) {
module.debug('Looking up url for action', action, settings.api);
if(settings.api[action] !== undefined) {
url = settings.api[action];
module.debug('Found template url', url);
}
else if( !module.is.form() ) {
if(settings.api[action] === undefined && !module.is.mocked()) {
module.error(error.missingAction, settings.action, settings.api);
return;
}
url = settings.api[action];
}
else if( module.is.form() ) {
url = $module.attr('action') || $context.attr('action') || false;
module.debug('No url or action specified, defaulting to form action', url);
}
return url;
}
@ -591,7 +813,6 @@ $.api = $.fn.api = function(parameters) {
if( xhr && xhr.state() !== 'resolved') {
module.debug('Cancelling API request');
xhr.abort();
module.request.rejectWith(settings.apiSettings);
}
},
@ -670,7 +891,7 @@ $.api = $.fn.api = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -780,49 +1001,98 @@ $.api = $.fn.api = function(parameters) {
$.api.settings = {
name : 'API',
namespace : 'api',
name : 'API',
namespace : 'api',
debug : true,
verbose : false,
performance : true,
debug : false,
verbose : false,
performance : true,
// object containing all templates endpoints
api : {},
// whether to cache responses
cache : true,
// whether new requests should abort previous requests
interruptRequests : true,
// event binding
on : 'auto',
filter : '.disabled',
stateContext : false,
on : 'auto',
// state
loadingDuration : 0,
errorDuration : 2000,
// context for applying state classes
stateContext : false,
// templating
action : false,
url : false,
base : '',
// duration for loading state
loadingDuration : 0,
// data
urlData : {},
// whether to hide errors after a period of time
hideError : 'auto',
// ui
defaultData : true,
serializeForm : false,
throttle : 0,
// duration for error state
errorDuration : 2000,
// jQ ajax
method : 'get',
data : {},
dataType : 'json',
// whether parameters should be encoded with encodeURIComponent
encodeParameters : true,
// callbacks
// API action to use
action : false,
// templated URL to use
url : false,
// base URL to apply to all endpoints
base : '',
// data that will
urlData : {},
// whether to add default data to url data
defaultData : true,
// whether to serialize closest form
serializeForm : false,
// how long to wait before request should occur
throttle : 0,
// whether to throttle first request or only repeated
throttleFirstRequest : true,
// standard ajax settings
method : 'get',
data : {},
dataType : 'json',
// mock response
mockResponse : false,
mockResponseAsync : false,
// aliases for mock
response : false,
responseAsync : false,
// callbacks before request
beforeSend : function(settings) { return settings; },
beforeXHR : function(xhr) {},
onRequest : function(promise, xhr) {},
// after request
onResponse : false, // function(response) { },
// response was successful, if JSON passed validation
onSuccess : function(response, $module) {},
// request finished without aborting
onComplete : function(response, $module) {},
onFailure : function(errorMessage, $module) {},
// failed JSON success test
onFailure : function(response, $module) {},
// server error
onError : function(errorMessage, $module) {},
// request aborted
onAbort : function(errorMessage, $module) {},
successTest : false,
@ -836,9 +1106,10 @@ $.api.settings = {
legacyParameters : 'You are using legacy API success callback names',
method : 'The method you called is not defined',
missingAction : 'API action used but no url was defined',
missingSerialize : 'Required dependency jquery-serialize-object missing, using basic serialize',
missingSerialize : 'jquery-serialize-object is required to add form data to an existing data object',
missingURL : 'No URL specified for api event',
noReturnedValue : 'The beforeSend callback must return a settings object, beforeSend ignored.',
noStorage : 'Caching responses locally requires session storage',
parseError : 'There was an error parsing your request',
requiredParameter : 'Missing a required URL parameter: ',
statusMessage : 'Server gave an error: ',
@ -846,8 +1117,8 @@ $.api.settings = {
},
regExp : {
required: /\{\$*[A-z0-9]+\}/g,
optional: /\{\/\$*[A-z0-9]+\}/g,
required : /\{\$*[A-z0-9]+\}/g,
optional : /\{\/\$*[A-z0-9]+\}/g,
},
className: {
@ -856,16 +1127,16 @@ $.api.settings = {
},
selector: {
form: 'form'
disabled : '.disabled',
form : 'form'
},
metadata: {
action : 'action'
action : 'action',
url : 'url'
}
};
$.api.settings.api = {};
})( jQuery, window , document );
})( jQuery, window, document );

8
web/semantic/src/definitions/behaviors/colorize.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -15,7 +15,9 @@
$.fn.colorize = function(parameters) {
var
settings = $.extend(true, {}, $.fn.colorize.settings, parameters),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.colorize.settings, parameters)
: $.extend({}, $.fn.colorize.settings),
// hoist arguments
moduleArguments = arguments || false
;
@ -269,4 +271,4 @@
};
})( jQuery, window , document );
})( jQuery, window, document );

829
web/semantic/src/definitions/behaviors/form.js
View file

File diff suppressed because it is too large Load diff

8
web/semantic/src/definitions/behaviors/state.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -472,7 +472,7 @@ $.fn.state = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -589,7 +589,7 @@ $.fn.state.settings = {
debug : false,
// verbose debug output
verbose : true,
verbose : false,
// namespace for events
namespace : 'state',
@ -692,4 +692,4 @@ $.fn.state.settings = {
})( jQuery, window , document );
})( jQuery, window, document );

342
web/semantic/src/definitions/behaviors/visibility.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -37,14 +37,17 @@ $.fn.visibility = function(parameters) {
className = settings.className,
namespace = settings.namespace,
error = settings.error,
metadata = settings.metadata,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$window = $(window),
$module = $(this),
$context = $(settings.context),
$container = $module.offsetParent(),
$placeholder,
selector = $module.selector || '',
instance = $module.data(moduleNamespace),
@ -56,6 +59,8 @@ $.fn.visibility = function(parameters) {
|| function(callback) { setTimeout(callback, 0); },
element = this,
disabled = false,
observer,
module
;
@ -66,23 +71,30 @@ $.fn.visibility = function(parameters) {
module.debug('Initializing', settings);
module.setup.cache();
module.save.position();
if( module.should.trackChanges() ) {
module.bind.events();
if(settings.type == 'image') {
module.setup.image();
}
if(settings.type == 'fixed') {
module.setup.fixed();
}
if(settings.observeChanges) {
module.observeChanges();
}
module.bind.events();
}
module.save.position();
if( !module.is.visible() ) {
module.error(error.visible, $module);
}
if(settings.initialCheck) {
module.checkVisibility();
}
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
@ -96,22 +108,30 @@ $.fn.visibility = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module');
if(observer) {
observer.disconnect();
}
$window
.off('load' + eventNamespace, module.event.load)
.off('resize' + eventNamespace, module.event.resize)
;
$context
.off('scrollchange' + eventNamespace, module.event.scrollchange)
;
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
$window.off('resize' + eventNamespace, module.event.refresh);
$context.off('scroll' + eventNamespace, module.event.scroll);
},
observeChanges: function() {
var
context = $context[0]
;
if('MutationObserver' in window) {
observer = new MutationObserver(function(mutations) {
module.verbose('DOM tree modified, updating visibility calculations');
module.refresh();
module.timer = setTimeout(function() {
module.verbose('DOM tree modified, updating sticky menu');
module.refresh();
}, 100);
});
observer.observe(element, {
childList : true,
@ -124,33 +144,52 @@ $.fn.visibility = function(parameters) {
bind: {
events: function() {
module.verbose('Binding visibility events to scroll and resize');
if(settings.refreshOnLoad) {
$window
.on('load' + eventNamespace, module.event.load)
;
}
$window
.on('resize' + eventNamespace, module.event.refresh)
.on('resize' + eventNamespace, module.event.resize)
;
// pub/sub pattern
$context
.on('scroll' + eventNamespace, module.event.scroll)
.off('scroll' + eventNamespace)
.on('scroll' + eventNamespace, module.event.scroll)
.on('scrollchange' + eventNamespace, module.event.scrollchange)
;
}
},
event: {
refresh: function() {
resize: function() {
module.debug('Window resized');
if(settings.refreshOnResize) {
requestAnimationFrame(module.refresh);
}
},
load: function() {
module.debug('Page finished loading');
requestAnimationFrame(module.refresh);
},
// publishes scrollchange event on one scroll
scroll: function() {
module.verbose('Scroll position changed');
if(settings.throttle) {
clearTimeout(module.timer);
module.timer = setTimeout(function() {
module.checkVisibility();
$context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
}, settings.throttle);
}
else {
requestAnimationFrame(function() {
module.checkVisibility();
$context.triggerHandler('scrollchange' + eventNamespace, [ $context.scrollTop() ]);
});
}
}
},
// subscribes to scrollchange
scrollchange: function(event, scrollPosition) {
module.checkVisibility(scrollPosition);
},
},
precache: function(images, callback) {
@ -180,9 +219,19 @@ $.fn.visibility = function(parameters) {
}
},
enableCallbacks: function() {
module.debug('Allowing callbacks to occur');
disabled = false;
},
disableCallbacks: function() {
module.debug('Disabling all callbacks temporarily');
disabled = true;
},
should: {
trackChanges: function() {
if(methodInvoked && queryArguments.length > 0) {
if(methodInvoked) {
module.debug('One time query, no need to bind events');
return false;
}
@ -201,31 +250,37 @@ $.fn.visibility = function(parameters) {
},
image: function() {
var
src = $module.data('src')
src = $module.data(metadata.src)
;
if(src) {
module.verbose('Lazy loading image', src);
settings.once = true;
settings.observeChanges = false;
// show when top visible
module.topVisible(function() {
module.debug('Image top visible', element);
settings.onOnScreen = function() {
module.debug('Image on screen', element);
module.precache(src, function() {
module.set.image(src);
settings.onTopVisible = false;
});
});
};
}
},
fixed: function() {
module.verbose('Setting up fixed on element pass');
settings.once = false;
module.debug('Setting up fixed');
settings.once = false;
settings.observeChanges = false;
settings.initialCheck = true;
settings.refreshOnLoad = true;
if(!parameters.transition) {
settings.transition = false;
}
module.create.placeholder();
module.debug('Added placeholder', $placeholder);
settings.onTopPassed = function() {
$module
.addClass(className.fixed)
.css({
top: settings.offset + 'px'
})
;
module.debug('Element passed, adding fixed position', $module);
module.show.placeholder();
module.set.fixed();
if(settings.transition) {
if($.fn.transition !== undefined) {
$module.transition(settings.transition, settings.duration);
@ -233,59 +288,107 @@ $.fn.visibility = function(parameters) {
}
};
settings.onTopPassedReverse = function() {
$module
.removeClass(className.fixed)
.css({
position: '',
top: ''
})
;
module.debug('Element returned to position, removing fixed', $module);
module.hide.placeholder();
module.remove.fixed();
};
}
},
set: {
image: function(src) {
var
offScreen = (module.cache.screen.bottom < module.cache.element.top)
create: {
placeholder: function() {
module.verbose('Creating fixed position placeholder');
$placeholder = $module
.clone(false)
.css('display', 'none')
.addClass(className.placeholder)
.insertAfter($module)
;
}
},
show: {
placeholder: function() {
module.verbose('Showing placeholder');
$placeholder
.css('display', 'block')
.css('visibility', 'hidden')
;
}
},
hide: {
placeholder: function() {
module.verbose('Hiding placeholder');
$placeholder
.css('display', 'none')
.css('visibility', '')
;
}
},
set: {
fixed: function() {
module.verbose('Setting element to fixed position');
$module
.addClass(className.fixed)
.css({
position : 'fixed',
top : settings.offset + 'px',
left : 'auto',
zIndex : '1'
})
;
},
image: function(src) {
$module
.attr('src', src)
;
if(offScreen) {
module.verbose('Image outside browser, no show animation');
$module.show();
}
else {
if(settings.transition) {
if( $.fn.transition !== undefined ) {
$module.transition(settings.transition, settings.duration);
}
else {
$module.fadeIn(settings.duration);
}
if(settings.transition) {
if( $.fn.transition !== undefined ) {
$module.transition(settings.transition, settings.duration);
}
else {
$module.show();
$module.fadeIn(settings.duration);
}
}
else {
$module.show();
}
}
},
is: {
onScreen: function() {
var
calculations = module.get.elementCalculations()
;
return calculations.onScreen;
},
offScreen: function() {
var
calculations = module.get.elementCalculations()
;
return calculations.offScreen;
},
visible: function() {
if(module.cache && module.cache.element) {
return (module.cache.element.width > 0);
return !(module.cache.element.width === 0 && module.cache.element.offset.top === 0);
}
return false;
}
},
refresh: function() {
module.debug('Refreshing constants (element width/height)');
module.debug('Refreshing constants (width/height)');
if(settings.type == 'fixed') {
module.remove.fixed();
module.remove.occurred();
}
module.reset();
module.save.position();
module.checkVisibility();
if(settings.checkOnRefresh) {
module.checkVisibility();
}
settings.onRefresh.call(element);
},
@ -297,10 +400,13 @@ $.fn.visibility = function(parameters) {
}
},
checkVisibility: function() {
checkVisibility: function(scroll) {
module.verbose('Checking visibility of element', module.cache.element);
if( module.is.visible() ) {
if( !disabled && module.is.visible() ) {
// save scroll position
module.save.scroll(scroll);
// update calculations derived from scroll
module.save.calculations();
@ -316,6 +422,8 @@ $.fn.visibility = function(parameters) {
module.bottomPassedReverse();
// one time
module.onScreen();
module.offScreen();
module.passing();
module.topVisible();
module.bottomVisible();
@ -335,7 +443,7 @@ $.fn.visibility = function(parameters) {
amountInPixels
;
// assign callback
if(amount !== undefined && newCallback !== undefined) {
if(amount && newCallback) {
settings.onPassed[amount] = newCallback;
}
else if(amount !== undefined) {
@ -353,6 +461,48 @@ $.fn.visibility = function(parameters) {
}
},
onScreen: function(newCallback) {
var
calculations = module.get.elementCalculations(),
callback = newCallback || settings.onOnScreen,
callbackName = 'onScreen'
;
if(newCallback) {
module.debug('Adding callback for onScreen', newCallback);
settings.onOnScreen = newCallback;
}
if(calculations.onScreen) {
module.execute(callback, callbackName);
}
else if(!settings.once) {
module.remove.occurred(callbackName);
}
if(newCallback !== undefined) {
return calculations.onOnScreen;
}
},
offScreen: function(newCallback) {
var
calculations = module.get.elementCalculations(),
callback = newCallback || settings.onOffScreen,
callbackName = 'offScreen'
;
if(newCallback) {
module.debug('Adding callback for offScreen', newCallback);
settings.onOffScreen = newCallback;
}
if(calculations.offScreen) {
module.execute(callback, callbackName);
}
else if(!settings.once) {
module.remove.occurred(callbackName);
}
if(newCallback !== undefined) {
return calculations.onOffScreen;
}
},
passing: function(newCallback) {
var
calculations = module.get.elementCalculations(),
@ -595,9 +745,24 @@ $.fn.visibility = function(parameters) {
},
remove: {
fixed: function() {
module.debug('Removing fixed position');
$module
.removeClass(className.fixed)
.css({
position : '',
top : '',
left : '',
zIndex : ''
})
;
},
occurred: function(callback) {
if(callback) {
if(module.cache.occurred[callback] !== undefined && module.cache.occurred[callback] === true) {
var
occurred = module.cache.occurred
;
if(occurred[callback] !== undefined && occurred[callback] === true) {
module.debug('Callback can now be called again', callback);
module.cache.occurred[callback] = false;
}
@ -611,7 +776,6 @@ $.fn.visibility = function(parameters) {
save: {
calculations: function() {
module.verbose('Saving all calculations necessary to determine positioning');
module.save.scroll();
module.save.direction();
module.save.screenCalculations();
module.save.elementCalculations();
@ -624,8 +788,9 @@ $.fn.visibility = function(parameters) {
}
}
},
scroll: function() {
module.cache.scroll = $context.scrollTop() + settings.offset;
scroll: function(scrollPosition) {
scrollPosition = scrollPosition + settings.offset || $context.scrollTop() + settings.offset;
module.cache.scroll = scrollPosition;
},
direction: function() {
var
@ -687,9 +852,9 @@ $.fn.visibility = function(parameters) {
element.percentagePassed = 0;
// meta calculations
element.visible = (element.topVisible || element.bottomVisible);
element.passing = (element.topPassed && !element.bottomPassed);
element.hidden = (!element.topVisible && !element.bottomVisible);
element.onScreen = (element.topVisible && !element.bottomPassed);
element.passing = (element.topPassed && !element.bottomPassed);
element.offScreen = (!element.onScreen);
// passing calculations
if(element.passing) {
@ -850,7 +1015,7 @@ $.fn.visibility = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -941,6 +1106,8 @@ $.fn.visibility = function(parameters) {
if(instance === undefined) {
module.initialize();
}
instance.save.scroll();
instance.save.calculations();
module.invoke(query);
}
else {
@ -970,6 +1137,18 @@ $.fn.visibility.settings = {
// whether to use mutation observers to follow changes
observeChanges : true,
// check position immediately on init
initialCheck : true,
// whether to refresh calculations after all page images load
refreshOnLoad : true,
// whether to refresh calculations after page resize event
refreshOnResize : true,
// should call callbacks on refresh event (resize, etc)
checkOnRefresh : true,
// callback should only occur one time
once : true,
@ -985,9 +1164,6 @@ $.fn.visibility.settings = {
// scroll context for visibility checks
context : window,
// check position immediately on init
initialCheck : true,
// visibility check delay in ms (defaults to animationFrame)
throttle : false,
@ -995,13 +1171,15 @@ $.fn.visibility.settings = {
type : false,
// image only animation settings
transition : false,
transition : 'fade in',
duration : 1000,
// array of callbacks for percentage
onPassed : {},
// standard callbacks
onOnScreen : false,
onOffScreen : false,
onPassing : false,
onTopVisible : false,
onBottomVisible : false,
@ -1019,14 +1197,20 @@ $.fn.visibility.settings = {
onUpdate : false, // disabled by default for performance
onRefresh : function(){},
metadata : {
src: 'src'
},
className: {
fixed: 'fixed'
fixed : 'fixed',
placeholder : 'placeholder'
},
error : {
method : 'The method you called is not defined.'
method : 'The method you called is not defined.',
visible : 'Element is hidden, you must call refresh after element becomes visible'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

12
web/semantic/src/definitions/behaviors/visit.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -31,7 +31,9 @@ $.visit = $.fn.visit = function(parameters) {
$allModules
.each(function() {
var
settings = $.extend(true, {}, $.fn.visit.settings, parameters),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.visit.settings, parameters)
: $.extend({}, $.fn.visit.settings),
error = settings.error,
namespace = settings.namespace,
@ -365,7 +367,7 @@ $.visit = $.fn.visit = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -479,7 +481,7 @@ $.fn.visit.settings = {
name : 'Visit',
debug : false,
verbose : true,
verbose : false,
performance : true,
namespace : 'visit',
@ -512,4 +514,4 @@ $.fn.visit.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

5
web/semantic/src/definitions/collections/breadcrumb.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -24,8 +24,9 @@
*******************************/
.ui.breadcrumb {
margin: @verticalMargin 0em;
line-height: 1;
display: @display;
margin: @verticalMargin 0em;
vertical-align: @verticalAlign;
}
.ui.breadcrumb:first-child {

331
web/semantic/src/definitions/collections/form.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -44,16 +44,22 @@
Field
---------------------*/
.ui.form .fields .field,
.ui.form .field {
clear: both;
margin: @fieldMargin;
}
.ui.form .fields:last-child,
.ui.form .field:last-child {
.ui.form .field:last-child,
.ui.form .fields:last-child .field {
margin-bottom: 0em;
}
.ui.form .fields .field {
clear: both;
margin: @fieldMargin;
}
/*--------------------
Labels
---------------------*/
@ -66,23 +72,6 @@
font-weight: @labelFontWeight;
text-transform: @labelTextTransform;
}
.ui.form .grouped.fields > label {
margin: @groupedLabelMargin;
color: @groupedLabelColor;
font-size: @groupedLabelFontSize;
font-weight: @groupedLabelFontWeight;
text-transform: @groupedLabelTextTransform;
}
.ui.form .inline.fields > label {
display: inline-block;
vertical-align: middle;
margin: @inlineLabelMargin;
color: @inlineLabelColor;
font-size: @inlineLabelFontSize;
font-weight: @inlineLabelFontWeight;
text-transform: @inlineLabelTextTransform;
}
/*--------------------
Standard Inputs
@ -100,12 +89,17 @@
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="text"],
.ui.form input[type="url"],
.ui.form .ui.input {
width: 100%;
.ui.form input[type="url"] {
width: @inputWidth;
vertical-align: top;
}
/* Set max height on unusual input */
.ui.form ::-webkit-datetime-edit,
.ui.form ::-webkit-inner-spin-button {
height: @inputLineHeight;
}
.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
@ -135,8 +129,7 @@
transition: @inputTransition;
}
.ui.textarea,
/* Text Area */
.ui.form textarea {
margin: 0em;
-webkit-appearance: none;
@ -152,11 +145,13 @@
box-shadow: @inputBoxShadow;
transition: @textAreaTransition;
font-size: @textAreaFontSize;
line-height: @textAreaLineHeight;
resize: @textAreaResize;
}
.ui.form textarea:not([rows]) {
height: @textAreaHeight;
min-height: @textAreaMinHeight;
max-height: @textAreaMaxHeight;
line-height: @textAreaLineHeight;
resize: @textAreaResize;
}
.ui.form textarea,
@ -194,6 +189,7 @@
Dropdown
---------------------*/
/* Block */
.ui.form .field > .selection.dropdown {
width: 100%;
}
@ -201,21 +197,53 @@
float: right;
}
/* Inline */
.ui.form .inline.fields .field > .selection.dropdown,
.ui.form .inline.field > .selection.dropdown {
width: auto;
}
.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
float: none;
}
/*--------------------
Dividers
UI Input
---------------------*/
.ui.form .divider {
clear: both;
margin: @dividerMargin;
/* Block */
.ui.form .field .ui.input,
.ui.form .fields .field .ui.input,
.ui.form .wide.field .ui.input {
width: 100%;
}
/* Inline */
.ui.form .inline.fields .field:not(.wide) .ui.input,
.ui.form .inline.field:not(.wide) .ui.input {
width: auto;
vertical-align: middle;
}
/* Auto Input */
.ui.form .fields .field .ui.input input,
.ui.form .field .ui.input input {
width: auto;
}
/* Full Width Input */
.ui.form .ten.fields .ui.input input,
.ui.form .nine.fields .ui.input input,
.ui.form .eight.fields .ui.input input,
.ui.form .seven.fields .ui.input input,
.ui.form .six.fields .ui.input input,
.ui.form .five.fields .ui.input input,
.ui.form .four.fields .ui.input input,
.ui.form .three.fields .ui.input input,
.ui.form .two.fields .ui.input input,
.ui.form .wide.field .ui.input input {
flex: 1 0 auto;
width: 0px;
}
@ -239,13 +267,19 @@
---------------------*/
.ui.form .field .prompt.label {
white-space: nowrap;
white-space: normal;
background: @promptBackground !important;
border: @promptBorder !important;
color: @promptTextColor !important;
}
.ui.form .inline.fields .field .prompt,
.ui.form .inline.field .prompt {
margin: @inlineValidationMargin;
vertical-align: top;
margin: @inlinePromptMargin;
}
.ui.form .inline.fields .field .prompt:before,
.ui.form .inline.field .prompt:before {
margin-top: @inlineValidationArrowOffset;
border-width: 0px 0px @inlinePromptBorderWidth @inlinePromptBorderWidth;
bottom: auto;
right: auto;
top: 50%;
@ -257,6 +291,28 @@
States
*******************************/
/*--------------------
Autofilled
---------------------*/
.ui.form .field.field input:-webkit-autofill {
box-shadow: 0px 0px 0px 100px @inputAutoFillBackground inset !important;
border-color: @inputAutoFillBorder !important;
}
/* Focus */
.ui.form .field.field input:-webkit-autofill:focus {
box-shadow: 0px 0px 0px 100px @inputAutoFillFocusBackground inset !important;
border-color: @inputAutoFillFocusBorder !important;
}
/* Error */
.ui.form .error.error input:-webkit-autofill {
box-shadow: 0px 0px 0px 100px @inputAutoFillErrorBackground inset !important;
border-color: @inputAutoFillErrorBorder !important;
}
/*--------------------
Placeholder
@ -266,12 +322,19 @@
.ui.form ::-webkit-input-placeholder {
color: @inputPlaceholderColor;
}
.ui.form ::-ms-input-placeholder {
color: @inputPlaceholderColor;
}
.ui.form ::-moz-placeholder {
color: @inputPlaceholderColor;
}
.ui.form :focus::-webkit-input-placeholder {
color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-ms-input-placeholder {
color: @inputPlaceholderFocusColor;
}
.ui.form :focus::-moz-placeholder {
color: @inputPlaceholderFocusColor;
}
@ -280,16 +343,24 @@
.ui.form .error ::-webkit-input-placeholder {
color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-ms-input-placeholder {
color: @inputErrorPlaceholderColor;
}
.ui.form .error ::-moz-placeholder {
color: @inputErrorPlaceholderColor;
}
.ui.form .error :focus::-webkit-input-placeholder {
color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-ms-input-placeholder {
color: @inputErrorPlaceholderFocusColor;
}
.ui.form .error :focus::-moz-placeholder {
color: @inputErrorPlaceholderFocusColor;
}
/*--------------------
Focus
---------------------*/
@ -320,22 +391,17 @@
-webkit-appearance: none;
}
/*--------------------
Success
---------------------*/
/* On Form */
.ui.form.success .success.message {
.ui.form.success .success.message:not(:empty) {
display: block;
}
/*--------------------
Error
---------------------*/
/* On Form */
.ui.form.warning .warning.message {
display: block;
.ui.form.success .icon.success.message:not(:empty) {
display: flex;
}
/*--------------------
@ -343,9 +409,24 @@
---------------------*/
/* On Form */
.ui.form.error .error.message {
.ui.form.warning .warning.message:not(:empty) {
display: block;
}
.ui.form.warning .icon.warning.message:not(:empty) {
display: flex;
}
/*--------------------
Error
---------------------*/
/* On Form */
.ui.form.error .error.message:not(:empty) {
display: block;
}
.ui.form.error .icon.error.message:not(:empty) {
display: flex;
}
/* On Field(s) */
.ui.form .fields.error .field label,
@ -443,11 +524,25 @@
.ui.form .field.error .ui.dropdown:hover .menu {
border-color: @formErrorBorder;
}
.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
.ui.form .field.error .ui.multiple.selection.dropdown > .label {
background-color: @dropdownErrorLabelBackground;
color: @dropdownErrorLabelColor;
}
/* Hover */
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
background-color: @dropdownErrorHoverBackground;
}
/* Selected */
.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
.ui.form .field.error .ui.dropdown .menu .selected.item {
background-color: @dropdownErrorSelectedBackground;
}
/* Active */
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
@ -482,12 +577,14 @@
Disabled
---------------------*/
.ui.form .field :disabled,
.ui.form .field.disabled {
opacity: 0.5;
.ui.form .disabled.fields .field,
.ui.form .disabled.field,
.ui.form .field :disabled {
pointer-events: none;
opacity: @disabledOpacity;
}
.ui.form .field.disabled label {
opacity: 0.5;
opacity: @disabledLabelOpacity;
}
.ui.form .field.disabled :disabled {
opacity: 1;
@ -502,10 +599,6 @@
position: relative;
cursor: default;
point-events: none;
text-shadow: none !important;
color: transparent !important;
transition: all 0s linear;
z-index: 100;
}
.ui.loading.form:before {
position: absolute;
@ -559,22 +652,24 @@
Required Field
---------------------*/
.ui.form .required.fields > .field > label:after,
.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after,
.ui.form .required.fields > .field > .checkbox:after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
margin: @requiredMargin;
content: @requiredContent;
color: @requiredColor;
}
.ui.form .required.fields > .field > label:after,
.ui.form .required.fields:not(.grouped) > .field > label:after,
.ui.form .required.fields.grouped > label:after,
.ui.form .required.field > label:after {
display: inline-block;
vertical-align: top;
}
.ui.form .required.fields > .field > .checkbox:after,
.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
.ui.form .required.field > .checkbox:after {
position: absolute;
top: 0%;
@ -600,23 +695,49 @@
color: @invertedLabelColor;
}
/* Inverted Field */
.ui.inverted.form input:not([type]),
.ui.inverted.form input[type="date"],
.ui.inverted.form input[type="datetime-local"],
.ui.inverted.form input[type="email"],
.ui.inverted.form input[type="number"],
.ui.inverted.form input[type="password"],
.ui.inverted.form input[type="search"],
.ui.inverted.form input[type="tel"],
.ui.inverted.form input[type="time"],
.ui.inverted.form input[type="text"],
.ui.inverted.form input[type="url"] {
background: @invertedInputBackground;
border-color: @invertedInputBorderColor;
color: @invertedInputColor;
box-shadow: @invertedInputBoxShadow;
}
/*--------------------
Field Groups
---------------------*/
/* Grouped Vertically */
.ui.form .grouped.fields {
display: block;
margin: @groupedMargin;
}
.ui.form .grouped.fields:last-child {
margin-bottom: 0em;
}
.ui.form .grouped.fields > label {
margin: @groupedLabelMargin;
color: @groupedLabelColor;
font-size: @groupedLabelFontSize;
font-weight: @groupedLabelFontWeight;
text-transform: @groupedLabelTextTransform;
}
.ui.form .grouped.fields .field {
.ui.form .grouped.fields .field,
.ui.form .grouped.inline.fields .field {
display: block;
float: none;
margin: @groupedFieldMargin;
padding: 0em;
}
@ -627,19 +748,11 @@
/* Split fields */
.ui.form .fields {
clear: both;
}
.ui.form .fields:after {
content: ' ';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
display: flex;
flex-direction: row;
}
.ui.form .fields > .field {
clear: none;
float: left;
flex: 0 1 auto;
padding-left: (@gutterWidth / 2);
padding-right: (@gutterWidth / 2);
}
@ -688,6 +801,9 @@
/* Swap to full width on mobile */
@media only screen and (max-width : @largestMobileScreen) {
.ui.form .fields {
flex-wrap: wrap;
}
.ui.form .two.fields > .fields,
.ui.form .two.fields > .field,
.ui.form .three.fields > .fields,
@ -722,7 +838,6 @@
/* Sizing Combinations */
.ui.form .fields .wide.field {
width: @oneWide;
padding-left: (@gutterWidth / 2);
@ -816,56 +931,86 @@
}
}
/*--------------------
Equal Width
---------------------*/
.ui[class*="equal width"].form .fields > .field,
.ui.form [class*="equal width"].fields > .field {
width: 100%;
flex: 1 1 auto;
}
/*--------------------
Inline Fields
---------------------*/
.ui.form .inline.fields {
margin: @fieldMargin;
align-items: center;
}
.ui.form .inline.fields .field {
display: inline-block;
float: none;
margin: @inlineFieldsMargin;
padding: 0em;
margin: 0em;
padding: @inlineFieldsMargin;
}
/* Inline Label */
.ui.form .inline.fields > label,
.ui.form .inline.fields .field > label,
.ui.form .inline.fields .field > p,
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > .ui.input,
.ui.form .inline.field > label,
.ui.form .inline.field > p,
.ui.form .inline.field > p {
display: inline-block;
width: auto;
margin-top: 0em;
margin-bottom: 0em;
vertical-align: baseline;
font-size: @inlineLabelFontSize;
font-weight: @inlineLabelFontWeight;
color: @inlineLabelColor;
text-transform: @inlineLabelTextTransform;
}
/* Grouped Inline Label */
.ui.form .inline.fields > label {
margin: @groupedInlineLabelMargin;
}
/* Inline Input */
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > select,
.ui.form .inline.field > input,
.ui.form .inline.field > .ui.input {
.ui.form .inline.field > select {
display: inline-block;
width: auto;
margin-top: 0em;
margin-bottom: 0em;
vertical-align: @inlineLabelVerticalAlign;
font-size: @inlineLabelFontSize;
}
.ui.form .inline.fields .field > input,
.ui.form .inline.fields .field > .ui.input,
.ui.form .inline.field > input,
.ui.form .inline.field > .ui.input {
font-size: @inlineLabelFontSize;
}
.ui.form .inline.fields .field > .ui.checkbox label {
padding-left: @inlineCheckboxLabelDistance;
vertical-align: middle;
font-size: @inlineInputSize;
}
/* Label */
.ui.form .inline.fields .field > :first-child,
.ui.form .inline.field > :first-child {
margin: 0em @labelDistance 0em 0em;
margin: 0em @inlineLabelDistance 0em 0em;
}
.ui.form .inline.fields .field > :only-child,
.ui.form .inline.field > :only-child {
margin: 0em;
}
/* Wide */
.ui.form .inline.fields .wide.field {
display: flex;
align-items: center;
}
.ui.form .inline.fields .wide.field > input,
.ui.form .inline.fields .wide.field > select {
width: 100%;
}
/*--------------------
Sizes
@ -891,4 +1036,4 @@
font-size: @huge;
}
.loadUIOverrides();
.loadUIOverrides();

927
web/semantic/src/definitions/collections/grid.less Normal file → Executable file
View file

File diff suppressed because it is too large Load diff

1674
web/semantic/src/definitions/collections/menu.less Normal file → Executable file
View file

File diff suppressed because it is too large Load diff

189
web/semantic/src/definitions/collections/message.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -52,7 +52,7 @@
display: @headerDisplay;
font-family: @headerFont;
font-weight: @headerFontWeight;
margin: 0em 0em @headerDistance 0em;
margin: @headerMargin;
}
/* Default font size */
@ -76,32 +76,33 @@
}
/* List */
.ui.message ul.list {
.ui.message .list:not(.ui) {
text-align: left;
padding: 0em;
opacity: @listOpacity;
list-style-position: @listStylePosition;
margin: @listMargin 0em 0em;
padding: 0em;
}
.ui.message ul.list:first-child {
.ui.message .list:not(.ui):first-child {
margin-top: 0em;
}
.ui.message ul.list:last-child {
.ui.message .list:not(.ui):last-child {
margin-bottom: 0em;
}
.ui.message ul.list li {
.ui.message .list:not(.ui) li {
position: relative;
list-style-type: none;
margin: 0em 0em @listItemMargin @listItemIndent;
padding: 0em;
}
.ui.message ul.list li:before {
.ui.message .list:not(.ui) li:before {
position: absolute;
content: '•';
left: -1em;
height: 100%;
vertical-align: baseline;
}
.ui.message ul.list li:last-child {
.ui.message .list:not(.ui) li:last-child {
margin-bottom: 0em;
}
@ -119,9 +120,7 @@
top: @closeTopDistance;
right: @closeRightDistance;
opacity: @closeOpacity;
transition:
opacity 0.1s linear
;
transition: @closeTransition;
}
.ui.message > .close.icon:hover {
opacity: 1;
@ -135,6 +134,13 @@
margin-bottom: 0em;
}
/*******************************
Coupling
*******************************/
.ui.dropdown .menu > .message {
margin: 0px -@borderWidth;
}
/*******************************
States
@ -149,7 +155,7 @@
}
.ui.icon.visible.visible.visible.visible.message {
display: table;
display: flex;
}
/*--------------
@ -160,6 +166,7 @@
display: none;
}
/*******************************
Variations
*******************************/
@ -197,7 +204,6 @@
margin-bottom: @verticalMargin;
}
.ui.attached.icon.message {
display: block;
width: auto;
}
@ -207,19 +213,22 @@
---------------*/
.ui.icon.message {
display: table;
display: flex;
width: 100%;
align-items: center;
}
.ui.icon.message > .icon:not(.close) {
display: table-cell;
display: block;
flex: 0 0 auto;
width: auto;
line-height: 1;
vertical-align: @iconVerticalAlign;
font-size: @iconSize;
opacity: @iconOpacity;
}
.ui.icon.message > .content {
display: table-cell;
width: 100%;
display: block;
flex: 1 1 auto;
vertical-align: @iconVerticalAlign;
}
@ -230,10 +239,6 @@
.ui.icon.message .circular.icon {
width: 1em;
}
.ui.icon.message .circular.icon + .content {
width: auto;
padding-left: @circularIconContentDistance;
}
/*--------------
Floating
@ -264,10 +269,7 @@
}
.ui.positive.message,
.ui.attached.positive.message {
box-shadow:
0px 0px 0px 1px @positiveBorderColor inset,
@subtleShadow
;
box-shadow: @positiveBoxShadow;
}
.ui.positive.message .header {
color: @positiveHeaderColor;
@ -280,10 +282,7 @@
}
.ui.negative.message,
.ui.attached.negative.message {
box-shadow:
0px 0px 0px 1px @negativeBorderColor inset,
@subtleShadow
;
box-shadow: @negativeBoxShadow;
}
.ui.negative.message .header {
color: @negativeHeaderColor;
@ -296,10 +295,7 @@
}
.ui.info.message,
.ui.attached.info.message {
box-shadow:
0px 0px 0px 1px @infoBorderColor inset,
@subtleShadow
;
box-shadow: @infoBoxShadow;
}
.ui.info.message .header {
color: @infoHeaderColor;
@ -312,10 +308,7 @@
}
.ui.warning.message,
.ui.attached.warning.message {
box-shadow:
0px 0px 0px 1px @warningBorderColor inset,
@subtleShadow
;
box-shadow: @warningBoxShadow;
}
.ui.warning.message .header {
color: @warningHeaderColor;
@ -328,10 +321,7 @@
}
.ui.error.message,
.ui.attached.error.message {
box-shadow:
0px 0px 0px 1px @errorBorderColor inset,
@subtleShadow
;
box-shadow: @errorBoxShadow;
}
.ui.error.message .header {
color: @errorHeaderColor;
@ -344,10 +334,7 @@
}
.ui.success.message,
.ui.attached.success.message {
box-shadow:
0px 0px 0px 1px @successBorderColor inset,
@subtleShadow
;
box-shadow: @successBoxShadow;
}
.ui.success.message .header {
color: @successHeaderColor;
@ -361,41 +348,6 @@
color: @invertedTextColor;
}
.ui.blue.message {
background-color: @blueBackground;
color: @blueTextColor;
}
.ui.blue.message .header {
color: @blueHeaderColor;
}
.ui.green.message {
background-color: @greenBackground;
color: @greenTextColor;
}
.ui.green.message .header {
color: @greenHeaderColor;
}
.ui.orange.message {
background-color: @orangeBackground;
color: @orangeTextColor;
}
.ui.orange.message .header {
color: @orangeHeaderColor;
}
.ui.pink.message {
background-color: @pinkBackground;
color: @pinkTextColor;
}
.ui.pink.message .header {
color: @pinkHeaderColor;
}
.ui.purple.message {
background-color: @purpleBackground;
color: @purpleTextColor;
}
.ui.purple.message .header {
color: @purpleHeaderColor;
}
.ui.red.message {
background-color: @redBackground;
color: @redTextColor;
@ -403,13 +355,15 @@
.ui.red.message .header {
color: @redHeaderColor;
}
.ui.teal.message {
background-color: @tealBackground;
color: @tealTextColor;
.ui.orange.message {
background-color: @orangeBackground;
color: @orangeTextColor;
}
.ui.teal.message .header {
color: @tealHeaderColor;
.ui.orange.message .header {
color: @orangeHeaderColor;
}
.ui.yellow.message {
background-color: @yellowBackground;
color: @yellowTextColor;
@ -418,6 +372,69 @@
color: @yellowHeaderColor;
}
.ui.olive.message {
background-color: @oliveBackground;
color: @oliveTextColor;
}
.ui.olive.message .header {
color: @oliveHeaderColor;
}
.ui.green.message {
background-color: @greenBackground;
color: @greenTextColor;
}
.ui.green.message .header {
color: @greenHeaderColor;
}
.ui.teal.message {
background-color: @tealBackground;
color: @tealTextColor;
}
.ui.teal.message .header {
color: @tealHeaderColor;
}
.ui.blue.message {
background-color: @blueBackground;
color: @blueTextColor;
}
.ui.blue.message .header {
color: @blueHeaderColor;
}
.ui.violet.message {
background-color: @violetBackground;
color: @violetTextColor;
}
.ui.violet.message .header {
color: @violetHeaderColor;
}
.ui.purple.message {
background-color: @purpleBackground;
color: @purpleTextColor;
}
.ui.purple.message .header {
color: @purpleHeaderColor;
}
.ui.pink.message {
background-color: @pinkBackground;
color: @pinkTextColor;
}
.ui.pink.message .header {
color: @pinkHeaderColor;
}
.ui.brown.message {
background-color: @brownBackground;
color: @brownTextColor;
}
.ui.brown.message .header {
color: @brownHeaderColor;
}
/*--------------
Sizes

420
web/semantic/src/definitions/collections/table.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -31,6 +31,7 @@
border: @border;
box-shadow: @boxShadow;
border-radius: @borderRadius;
text-align: @textAlign;
color: @color;
border-collapse: @borderCollapse;
border-spacing: @borderSpacing;
@ -126,7 +127,6 @@
.ui.table td {
padding: @cellVerticalPadding @cellHorizontalPadding;
text-align: @cellTextAlign;
vertical-align: @cellVerticalAlign;
}
/* Icons */
@ -172,44 +172,28 @@
.ui.table:not(.unstackable) tfoot {
display: @responsiveFooterDisplay;
}
.ui.table:not(.unstackable) tr {
padding-top: @responsiveRowVerticalPadding;
padding-bottom: @responsiveRowVerticalPadding;
box-shadow: @responsiveRowBoxShadow;
}
.ui.table:not(.unstackable) tr > th,
.ui.table:not(.unstackable) tr > td {
background: none;
border: none !important;
padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding !important;
box-shadow: @responsiveCellBoxShadow;
}
.ui.table:not(.unstackable) th:first-child,
.ui.table:not(.unstackable) td:first-child {
font-weight: bold;
padding-top: @responsiveRowVerticalPadding;
}
.ui.table:not(.unstackable) th:last-child,
.ui.table:not(.unstackable) td:last-child {
box-shadow: @responsiveRowBoxShadow;
padding-bottom: @responsiveRowVerticalPadding;
}
/* Clear BG Colors */
.ui.table:not(.unstackable) tr > td.warning,
.ui.table:not(.unstackable) tr > td.error,
.ui.table:not(.unstackable) tr > td.active,
.ui.table:not(.unstackable) tr > td.positive,
.ui.table:not(.unstackable) tr > td.negative {
background-color: @responsiveStatusColor !important;
}
/* Definition Table */
.ui.definition.table:not(.unstackable) thead th:first-child {
box-shadow: none !important;
}
.ui.definition.table:not(.unstackable) tr td:first-child {
padding-bottom: @responsiveRowVerticalPadding;
}
.ui.definition.table:not(.unstackable) tr td:nth-child(n+2) {
padding-top: @responsiveRowVerticalPadding;
}
}
@ -314,16 +298,11 @@
.ui.table td.positive {
box-shadow: @positiveBoxShadow;
}
.ui.table tr.positive td,
.ui.table tr.positive,
.ui.table td.positive {
background: @positiveBackgroundColor !important;
color: @positiveColor !important;
}
.ui.celled.table tr.positive:hover td,
.ui.celled.table tr:hover td.positive {
background: @positiveBackgroundHover !important;
color: @positiveColorHover !important;
}
/*--------------
Negative
@ -333,16 +312,11 @@
.ui.table td.negative {
box-shadow: @negativeBoxShadow;
}
.ui.table tr.negative td,
.ui.table tr.negative,
.ui.table td.negative {
background: @negativeBackgroundColor !important;
color: @negativeColor !important;
}
.ui.celled.table tr.negative:hover td,
.ui.celled.table tr:hover td.negative {
background: @negativeBackgroundHover !important;
color: @negativeColorHover !important;
}
/*--------------
Error
@ -352,17 +326,11 @@
.ui.table td.error {
box-shadow: @errorBoxShadow;
}
.ui.table tr.error td,
.ui.table tr.error,
.ui.table td.error {
background: @errorBackgroundColor !important;
color: @errorColor !important;
}
.ui.celled.table tr.error:hover td,
.ui.celled.table tr:hover td.error {
background: @errorBackgroundHover !important;
color: @errorColorHover !important;
}
/*--------------
Warning
---------------*/
@ -371,16 +339,11 @@
.ui.table td.warning {
box-shadow: @warningBoxShadow;
}
.ui.table tr.warning td,
.ui.table tr.warning,
.ui.table td.warning {
background: @warningBackgroundColor !important;
color: @warningColor !important;
}
.ui.celled.table tr.warning:hover td,
.ui.celled.table tr:hover td.warning {
background: @warningBackgroundHover !important;
color: @warningColorHover !important;
}
/*--------------
Active
@ -390,16 +353,12 @@
.ui.table td.active {
box-shadow: @activeBoxShadow;
}
.ui.table tr.active td,
.ui.table tr.active,
.ui.table td.active {
background: @activeBackgroundColor !important;
color: @activeColor !important;
}
.ui.celled.table tr.active:hover td,
.ui.celled.table tr:hover td.active {
background: @activeBackgroundColor !important;
color: @activeColor !important;
}
/*--------------
@ -408,7 +367,7 @@
.ui.table tr.disabled td,
.ui.table tr td.disabled,
.ui.table tr.disabled:hover td,
.ui.table tr.disabled:hover,
.ui.table tr:hover td.disabled {
pointer-events: none;
color: @disabledTextColor;
@ -443,6 +402,11 @@
.ui[class*="tablet stackable"].table tfoot {
display: @responsiveFooterDisplay;
}
.ui[class*="tablet stackable"].table tr {
padding-top: @responsiveRowVerticalPadding;
padding-bottom: @responsiveRowVerticalPadding;
box-shadow: @responsiveRowBoxShadow;
}
.ui[class*="tablet stackable"].table tr > th,
.ui[class*="tablet stackable"].table tr > td {
background: none;
@ -450,41 +414,15 @@
padding: @responsiveCellVerticalPadding @responsiveCellHorizontalPadding;
box-shadow: @responsiveCellBoxShadow;
}
.ui[class*="tablet stackable"].table th:first-child,
.ui[class*="tablet stackable"].table td:first-child {
font-weight: bold;
padding-top: @responsiveRowVerticalPadding;
}
.ui[class*="tablet stackable"].table th:last-child,
.ui[class*="tablet stackable"].table td:last-child {
box-shadow: @responsiveRowBoxShadow;
padding-bottom: @responsiveRowVerticalPadding;
}
/* Clear BG Colors */
.ui[class*="tablet stackable"].table tr > td.warning,
.ui[class*="tablet stackable"].table tr > td.error,
.ui[class*="tablet stackable"].table tr > td.active,
.ui[class*="tablet stackable"].table tr > td.positive,
.ui[class*="tablet stackable"].table tr > td.negative {
background-color: @responsiveStatusColor !important;
}
/* Definition Table */
.ui.definition[class*="tablet stackable"].table thead th:first-child {
box-shadow: none !important;
}
.ui.definition[class*="tablet stackable"].table tr td:first-child {
padding-bottom: @responsiveRowVerticalPadding;
}
.ui.definition[class*="tablet stackable"].table tr td:nth-child(n+2) {
padding-top: @responsiveRowVerticalPadding;
}
}
/*--------------
Aligned
Text Alignment
---------------*/
.ui.table[class*="left aligned"],
@ -500,6 +438,23 @@
text-align: right;
}
/*------------------
Vertical Alignment
------------------*/
.ui.table[class*="top aligned"],
.ui.table [class*="top aligned"] {
vertical-align: top;
}
.ui.table[class*="middle aligned"],
.ui.table [class*="middle aligned"] {
vertical-align: middle;
}
.ui.table[class*="bottom aligned"],
.ui.table [class*="bottom aligned"] {
vertical-align: bottom;
}
/*--------------
Collapsing
---------------*/
@ -510,23 +465,105 @@
white-space: nowrap;
}
/*--------------
Attached
Fixed
---------------*/
.ui.fixed.table {
table-layout: fixed;
}
/* All */
.ui.fixed.table th,
.ui.fixed.table td {
overflow: hidden;
text-overflow: ellipsis;
}
/*--------------
Selectable
---------------*/
.ui.selectable.table tbody tr:hover,
.ui.table tbody tr td.selectable:hover {
background: @selectableBackground !important;
color: @selectableTextColor !important;
}
.ui.selectable.inverted.table tbody tr:hover,
.ui.inverted.table tbody tr td.selectable:hover {
background: @selectableInvertedBackground !important;
color: @selectableInvertedTextColor !important;
}
/* Selectable Cell Link */
.ui.table tbody tr td.selectable {
padding: 0em;
}
.ui.table tbody tr td.selectable > a:not(.ui) {
display: block;
color: inherit;
padding: @cellVerticalPadding @cellHorizontalPadding;
}
/* Other States */
.ui.selectable.table tr.error:hover,
.ui.table tr td.selectable.error:hover,
.ui.selectable.table tr:hover td.error {
background: @errorBackgroundHover !important;
color: @errorColorHover !important;
}
.ui.selectable.table tr.warning:hover,
.ui.table tr td.selectable.warning:hover,
.ui.selectable.table tr:hover td.warning {
background: @warningBackgroundHover !important;
color: @warningColorHover !important;
}
.ui.selectable.table tr.active:hover,
.ui.table tr td.selectable.active:hover,
.ui.selectable.table tr:hover td.active {
background: @activeBackgroundColor !important;
color: @activeColor !important;
}
.ui.selectable.table tr.positive:hover,
.ui.table tr td.selectable.positive:hover,
.ui.selectable.table tr:hover td.positive {
background: @positiveBackgroundHover !important;
color: @positiveColorHover !important;
}
.ui.selectable.table tr.negative:hover,
.ui.table tr td.selectable.negative:hover,
.ui.selectable.table tr:hover td.negative {
background: @negativeBackgroundHover !important;
color: @negativeColorHover !important;
}
/*-------------------
Attached
--------------------*/
/* Middle */
.ui.attached.table {
width: @attachedTableWidth;
margin: 0em @attachedHorizontalOffset;
top: 0px;
bottom: 0px;
border-radius: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.attached + .ui.attached.table:not(.top) {
border-top: none;
}
/* Top */
.ui[class*="top attached"].table {
margin-top: @margin;
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em;
}
.ui.table[class*="top attached"]:first-child {
@ -534,12 +571,15 @@
}
/* Bottom */
.ui.table[class*="bottom attached"] {
.ui[class*="bottom attached"].table {
bottom: 0px;
margin-top: 0em;
margin-bottom: @margin;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
.ui.table[class*="bottom attached"]:last-child {
.ui[class*="bottom attached"].table:last-child {
margin-bottom: 0em;
}
@ -559,78 +599,137 @@
background-color: @invertedStripedBackground;
}
/*--------------
Single Line
---------------*/
.ui.table[class*="single line"],
.ui.table [class*="single line"] {
white-space: nowrap;
}
.ui.table[class*="single line"],
.ui.table [class*="single line"] {
white-space: nowrap;
}
/*-------------------
Colors
--------------------*/
.ui.black.table {
border-top: @coloredBorderSize solid @black;
}
.ui.blue.table {
border-top: @coloredBorderSize solid @blue;
}
.ui.green.table {
border-top: @coloredBorderSize solid @green;
}
.ui.orange.table {
border-top: @coloredBorderSize solid @orange;
}
.ui.pink.table {
border-top: @coloredBorderSize solid @pink;
}
.ui.purple.table {
border-top: @coloredBorderSize solid @purple;
}
/* Red */
.ui.red.table {
border-top: @coloredBorderSize solid @red;
}
.ui.teal.table {
border-top: @coloredBorderSize solid @teal;
}
.ui.yellow.table {
border-top: @coloredBorderSize solid @yellow;
}
/*-------------------
Inverted Colors
--------------------*/
.ui.inverted.table,
.ui.inverted.black.table {
background-color: @black !important;
color: @white !important;
}
.ui.inverted.blue.table {
background-color: @blue !important;
color: @white !important;
}
.ui.inverted.green.table {
background-color: @green !important;
color: @white !important;
}
.ui.inverted.orange.table {
background-color: @orange !important;
color: @white !important;
}
.ui.inverted.pink.table {
background-color: @pink !important;
color: @white !important;
}
.ui.inverted.purple.table {
background-color: @purple !important;
color: @white !important;
}
.ui.inverted.red.table {
background-color: @red !important;
color: @white !important;
}
/* Orange */
.ui.orange.table {
border-top: @coloredBorderSize solid @orange;
}
.ui.inverted.orange.table {
background-color: @orange !important;
color: @white !important;
}
/* Yellow */
.ui.yellow.table {
border-top: @coloredBorderSize solid @yellow;
}
.ui.inverted.yellow.table {
background-color: @yellow !important;
color: @white !important;
}
/* Olive */
.ui.olive.table {
border-top: @coloredBorderSize solid @olive;
}
.ui.inverted.olive.table {
background-color: @olive !important;
color: @white !important;
}
/* Green */
.ui.green.table {
border-top: @coloredBorderSize solid @green;
}
.ui.inverted.green.table {
background-color: @green !important;
color: @white !important;
}
/* Teal */
.ui.teal.table {
border-top: @coloredBorderSize solid @teal;
}
.ui.inverted.teal.table {
background-color: @teal !important;
color: @white !important;
}
.ui.inverted.yellow.table {
background-color: @yellow !important;
/* Blue */
.ui.blue.table {
border-top: @coloredBorderSize solid @blue;
}
.ui.inverted.blue.table {
background-color: @blue !important;
color: @white !important;
}
/* Violet */
.ui.violet.table {
border-top: @coloredBorderSize solid @violet;
}
.ui.inverted.violet.table {
background-color: @violet !important;
color: @white !important;
}
/* Purple */
.ui.purple.table {
border-top: @coloredBorderSize solid @purple;
}
.ui.inverted.purple.table {
background-color: @purple !important;
color: @white !important;
}
/* Pink */
.ui.pink.table {
border-top: @coloredBorderSize solid @pink;
}
.ui.inverted.pink.table {
background-color: @pink !important;
color: @white !important;
}
/* Brown */
.ui.brown.table {
border-top: @coloredBorderSize solid @brown;
}
.ui.inverted.brown.table {
background-color: @brown !important;
color: @white !important;
}
/* Grey */
.ui.grey.table {
border-top: @coloredBorderSize solid @grey;
}
.ui.inverted.grey.table {
background-color: @grey !important;
color: @white !important;
}
/* Black */
.ui.black.table {
border-top: @coloredBorderSize solid @black;
}
.ui.inverted.black.table {
background-color: @black !important;
color: @white !important;
}
@ -774,18 +873,16 @@
}
.ui.sortable.table thead th:after {
display: inline-block;
content: '';
width: @sortableIconWidth;
height: 1em;
opacity: @sortableIconOpacity;
margin: 0em 0em 0em @sortableIconDistance;
font-family: @sortableIconFont;
display: none;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
content: '';
height: 1em;
width: @sortableIconWidth;
opacity: @sortableIconOpacity;
margin: 0em 0em 0em @sortableIconDistance;
font-family: @sortableIconFont;
}
.ui.sortable.table thead th.ascending:after {
content: @sortableIconAscending;
@ -809,6 +906,9 @@
background: @sortableActiveBackground;
color: @sortableActiveColor;
}
.ui.sortable.table thead th.sorted:after {
display: inline-block;
}
/* Sorted Hover */
.ui.sortable.table thead th.sorted:hover {
@ -843,7 +943,7 @@
}
.ui.inverted.table th {
background-color: @invertedHeaderBackground;
border-color: @invertedCellBorderColor !important;
border-color: @invertedHeaderBorderColor !important;
color: @invertedHeaderColor;
}
.ui.inverted.table tr td {
@ -909,7 +1009,7 @@
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) th,
.ui[class*="very basic"].table:not(.sortable):not(.striped) td {
padding: @basicTableCellVerticalPadding @basicTableCellHorizontalPadding;
padding: @basicTableCellPadding;
}
.ui[class*="very basic"].table:not(.sortable):not(.striped) th:first-child,
.ui[class*="very basic"].table:not(.sortable):not(.striped) td:first-child {

1575
web/semantic/src/definitions/elements/button.less Normal file → Executable file
View file

File diff suppressed because it is too large Load diff

144
web/semantic/src/definitions/elements/container.less Normal file
View file

@ -0,0 +1,144 @@
/*!
* # Semantic UI - Container
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'element';
@element : 'container';
@import (multiple) '../../theme.config';
/*******************************
Container
*******************************/
/* All Sizes */
.ui.container {
display: block;
max-width: @maxWidth !important;
}
/* Mobile */
@media only screen and (max-width: @largestMobileScreen) {
.ui.container {
width: @mobileWidth !important;
margin-left: @mobileGutter !important;
margin-right: @mobileGutter !important;
}
.ui.grid.container {
width: @mobileGridWidth !important;
}
.ui.relaxed.grid.container {
width: @mobileRelaxedGridWidth !important;
}
.ui.very.relaxed.grid.container {
width: @mobileVeryRelaxedGridWidth !important;
}
}
/* Tablet */
@media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
.ui.container {
width: @tabletWidth;
margin-left: @tabletGutter !important;
margin-right: @tabletGutter !important;
}
.ui.grid.container {
width: @tabletGridWidth !important;
}
.ui.relaxed.grid.container {
width: @tabletRelaxedGridWidth !important;
}
.ui.very.relaxed.grid.container {
width: @tabletVeryRelaxedGridWidth !important;
}
}
/* Small Monitor */
@media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
.ui.container {
width: @computerWidth;
margin-left: @computerGutter !important;
margin-right: @computerGutter !important;
}
.ui.grid.container {
width: @computerGridWidth !important;
}
.ui.relaxed.grid.container {
width: @computerRelaxedGridWidth !important;
}
.ui.very.relaxed.grid.container {
width: @computerVeryRelaxedGridWidth !important;
}
}
/* Large Monitor */
@media only screen and (min-width: @largeMonitorBreakpoint) {
.ui.container {
width: @largeMonitorWidth;
margin-left: @largeMonitorGutter !important;
margin-right: @largeMonitorGutter !important;
}
.ui.grid.container {
width: @largeMonitorGridWidth !important;
}
.ui.relaxed.grid.container {
width: @largeMonitorRelaxedGridWidth !important;
}
.ui.very.relaxed.grid.container {
width: @largeMonitorVeryRelaxedGridWidth !important;
}
}
/*******************************
Types
*******************************/
/* Text Container */
.ui.text.container {
font-family: @textFontFamily;
max-width: @textWidth !important;
line-height: @textLineHeight;
}
.ui.text.container {
font-size: @textSize;
}
/* Fluid */
.ui.fluid.container {
width: 100%;
}
/*******************************
Variations
*******************************/
.ui[class*="left aligned"].container {
text-align: left;
}
.ui[class*="center aligned"].container {
text-align: center;
}
.ui[class*="right aligned"].container {
text-align: right;
}
.ui.justified.container {
text-align: justify;
hyphens: auto;
}
.loadUIOverrides();

71
web/semantic/src/definitions/elements/divider.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -51,17 +51,19 @@
Coupling
---------------*/
.ui.grid > .ui.divider {
font-size: 1rem;
/* Allow divider between each column row */
.ui.grid > .column + .divider,
.ui.grid > .row > .column + .divider {
left: auto;
}
/*--------------
Horizontal
---------------*/
.ui.horizontal.divider {
position: relative;
display: table;
white-space: nowrap;
height: auto;
margin: @horizontalMargin;
@ -72,24 +74,19 @@
.ui.horizontal.divider:before,
.ui.horizontal.divider:after {
position: absolute;
top: 50%;
content: '';
z-index: 3;
width: 50%;
display: table-cell;
position: relative;
top: 50%;
height: 0px;
border-top: @shadowWidth solid @shadowColor;
border-bottom: @highlightWidth solid @highlightColor;
width: 50%;
background-repeat: no-repeat;
}
.ui.horizontal.divider:before {
margin-left: @horizontalRulerOffset;
background-position: right @horizontalDividerMargin top 50%;
}
.ui.horizontal.divider:after {
margin-left: @horizontalDividerMargin;
background-position: left @horizontalDividerMargin top 50%;
}
/*--------------
@ -135,43 +132,46 @@
}
/* Inside grid */
@media only screen and (max-width : (@tabletBreakpoint - 1px)) {
@media only screen and (max-width : @largestMobileScreen) {
.ui.stackable.grid .ui.vertical.divider,
.ui.grid .stackable.row .ui.vertical.divider {
position: relative;
margin: @margin;
left: 50%;
display: table;
white-space: nowrap;
height: auto;
margin: @horizontalMargin;
overflow: hidden;
line-height: 1;
text-align: center;
position: static;
top: 0;
left: 0;
transform: none;
}
.ui.stackable.grid .ui.vertical.divider:before,
.ui.grid .stackable.row .ui.vertical.divider:before,
.ui.stackable.grid .ui.vertical.divider:after,
.ui.grid .stackable.row .ui.vertical.divider:after {
position: absolute;
top: 50%;
left: auto;
position: static;
left: 0;
border-left: none;
border-right: none;
content: '';
z-index: 3;
width: 50%;
display: table-cell;
position: relative;
top: 50%;
height: 0px;
border-top: @shadowWidth solid @shadowColor;
border-bottom: @highlightWidth solid @highlightColor;
width: 50%;
background-repeat: no-repeat;
}
.ui.stackable.grid .ui.vertical.divider:before,
.ui.grid .stackable.row .ui.vertical.divider:before {
margin-left: -(50% + @horizontalDividerMargin);
background-position: right @horizontalDividerMargin top 50%;
}
.ui.stackable.grid .ui.vertical.divider:after,
.ui.grid .stackable.row .ui.vertical.divider:after {
margin-left: @horizontalDividerMargin;
background-position: left @horizontalDividerMargin top 50%;
}
}
@ -197,6 +197,10 @@
.ui.hidden.divider {
border-color: transparent !important;
}
.ui.hidden.divider:before,
.ui.hidden.divider:after {
display: none;
}
/*--------------
Inverted
@ -211,9 +215,8 @@
.ui.divider.inverted:after,
.ui.divider.inverted:before {
border-top-color: @invertedShadowColor !important;
border-bottom-color: @invertedHighlightColor !important;
border-left-color: @invertedShadowColor !important;
border-bottom-color: @invertedHighlightColor !important;
border-right-color: @invertedHighlightColor !important;
}

4
web/semantic/src/definitions/elements/flag.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -45,7 +45,7 @@ i.flag:not(.icon) {
i.flag:not(.icon):before {
display: inline-block;
content: '';
background: url(@spritePath) no-repeat 0px 0px;
background: url(@spritePath) no-repeat -108px -1976px;
width: @width;
height: @height;
}

403
web/semantic/src/definitions/elements/header.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -48,9 +48,10 @@
---------------*/
.ui.header .sub.header {
display: block;
font-weight: normal;
margin: 0em;
padding: 0em;
margin: @subHeaderMargin;
font-size: @subHeaderFontSize;
line-height: @subHeaderLineHeight;
color: @subHeaderColor;
@ -122,7 +123,7 @@
.ui.header .ui.label {
font-size: @labelSize;
margin: 0em 0em 0em @labelDistance;
margin-left: @labelDistance;
vertical-align: @labelVerticalAlign;
}
@ -183,19 +184,19 @@ h5.ui.header .sub.header {
.ui.huge.header {
min-height: 1em;
font-size: @huge;
font-size: @hugeFontSize;
}
.ui.large.header {
font-size: @large;
font-size: @largeFontSize;
}
.ui.medium.header {
font-size: @medium;
font-size: @mediumFontSize;
}
.ui.small.header {
font-size: @small;
font-size: @smallFontSize;
}
.ui.tiny.header {
font-size: @tiny;
font-size: @tinyFontSize;
}
/* Sub Header */
@ -215,6 +216,34 @@ h5.ui.header .sub.header {
font-size: @tinySubHeaderFontSize;
}
/*--------------
Sub Heading
---------------*/
.ui.sub.header {
padding: 0em;
margin-bottom: @subHeadingDistance;
font-weight: @subHeadingFontWeight;
font-size: @subHeadingFontSize;
text-transform: @subHeadingTextTransform;
color: @subHeadingColor;
}
.ui.small.sub.header {
font-size: @smallSubHeadingSize;
}
.ui.sub.header {
font-size: @subHeadingFontSize;
}
.ui.large.sub.header {
font-size: @largeSubHeadingSize;
}
.ui.huge.sub.header {
font-size: @hugeSubHeadingSize;
}
/*-------------------
Icon
--------------------*/
@ -240,6 +269,7 @@ h5.ui.header .sub.header {
display: block;
width: auto;
height: auto;
line-height: 1;
padding: 0em;
font-size: @iconHeaderSize;
margin: 0em auto @iconHeaderMargin;
@ -276,102 +306,6 @@ h5.ui.header .sub.header {
Variations
*******************************/
/*-------------------
Colors
--------------------*/
.ui.black.header {
color: @black !important;
}
a.ui.black.header:hover {
color: @blackHover !important;
}
.ui.blue.header {
color: @blue !important;
}
a.ui.blue.header:hover {
color: @blueHover !important;
}
.ui.green.header {
color: @green !important;
}
a.ui.green.header:hover {
color: @greenHover !important;
}
.ui.orange.header {
color: @orange !important;
}
a.ui.orange.header:hover {
color: @orangeHover !important;
}
.ui.pink.header {
color: @pink !important;
}
a.ui.pink.header:hover {
color: @pinkHover !important;
}
.ui.purple.header {
color: @purple !important;
}
a.ui.purple.header:hover {
color: @purpleHover !important;
}
.ui.red.header {
color: @red !important;
}
a.ui.red.header:hover {
color: @redHover !important;
}
.ui.teal.header {
color: @teal !important;
}
a.ui.teal.header:hover {
color: @tealHover !important;
}
.ui.yellow.header {
color: @yellow !important;
}
a.ui.yellow.header:hover {
color: @yellowHover !important;
}
.ui.black.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @blackDividedBorderColor;
}
.ui.blue.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @blueDividedBorderColor;
}
.ui.green.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @greenDividedBorderColor;
}
.ui.orange.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @orangeDividedBorderColor;
}
.ui.pink.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @pinkDividedBorderColor;
}
.ui.purple.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @purpleDividedBorderColor;
}
.ui.red.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @redDividedBorderColor;
}
.ui.teal.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @tealDividedBorderColor;
}
.ui.yellow.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @yellowDividedBorderColor;
}
/*-------------------
Inverted
--------------------*/
@ -385,59 +319,33 @@ a.ui.yellow.header:hover {
.ui.inverted.attached.header {
background: @invertedAttachedBackground;
box-shadow: none;
border-color: transparent;
}
.ui.inverted.block.header {
background: @invertedBlockBackground;
box-shadow: none;
}
.ui.inverted.block.header {
border-bottom: none;
}
/*-------------------
Inverted Colors
Colors
--------------------*/
.ui.inverted.black.header {
color: @darkGrey !important;
/*--- Red ---*/
.ui.red.header {
color: @red !important;
}
a.ui.inverted.black.header:hover {
color: @darkGreyHover !important;
}
.ui.inverted.blue.header {
color: @lightBlue !important;
}
a.ui.inverted.blue.header:hover {
color: @lightBlueHover !important;
}
.ui.inverted.green.header {
color: @lightGreen !important;
}
a.ui.inverted.green.header:hover {
color: @lightGreenHover !important;
}
.ui.inverted.orange.header {
color: @lightOrange !important;
}
a.ui.inverted.orange.header:hover {
color: @lightOrangeHover !important;
}
.ui.inverted.pink.header {
color: @lightPink !important;
}
a.ui.inverted.pink.header:hover {
color: @lightPinkHover !important;
}
.ui.inverted.purple.header {
color: @lightPurple !important;
}
a.ui.inverted.purple.header:hover {
color: @lightPurpleHover !important;
a.ui.red.header:hover {
color: @redHover !important;
}
.ui.red.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @red;
}
/* Inverted */
.ui.inverted.red.header {
color: @lightRed !important;
}
@ -445,13 +353,53 @@ a.ui.inverted.red.header:hover {
color: @lightRedHover !important;
}
.ui.inverted.teal.header {
color: @lightTeal !important;
/*--- Orange ---*/
.ui.orange.header {
color: @orange !important;
}
a.ui.inverted.teal.header:hover {
color: @lightTealHover !important;
a.ui.orange.header:hover {
color: @orangeHover !important;
}
.ui.orange.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @orange;
}
/* Inverted */
.ui.inverted.orange.header {
color: @lightOrange !important;
}
a.ui.inverted.orange.header:hover {
color: @lightOrangeHover !important;
}
/*--- Olive ---*/
.ui.olive.header {
color: @olive !important;
}
a.ui.olive.header:hover {
color: @oliveHover !important;
}
.ui.olive.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @olive;
}
/* Inverted */
.ui.inverted.olive.header {
color: @lightOlive !important;
}
a.ui.inverted.olive.header:hover {
color: @lightOliveHover !important;
}
/*--- Yellow ---*/
.ui.yellow.header {
color: @yellow !important;
}
a.ui.yellow.header:hover {
color: @yellowHover !important;
}
.ui.yellow.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @yellow;
}
/* Inverted */
.ui.inverted.yellow.header {
color: @lightYellow !important;
}
@ -459,9 +407,150 @@ a.ui.inverted.yellow.header:hover {
color: @lightYellowHover !important;
}
.ui.inverted.block.header {
border-bottom: none;
/*--- Green ---*/
.ui.green.header {
color: @green !important;
}
a.ui.green.header:hover {
color: @greenHover !important;
}
.ui.green.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @green;
}
/* Inverted */
.ui.inverted.green.header {
color: @lightGreen !important;
}
a.ui.inverted.green.header:hover {
color: @lightGreenHover !important;
}
/*--- Teal ---*/
.ui.teal.header {
color: @teal !important;
}
a.ui.teal.header:hover {
color: @tealHover !important;
}
.ui.teal.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @teal;
}
/* Inverted */
.ui.inverted.teal.header {
color: @lightTeal !important;
}
a.ui.inverted.teal.header:hover {
color: @lightTealHover !important;
}
/*--- Blue ---*/
.ui.blue.header {
color: @blue !important;
}
a.ui.blue.header:hover {
color: @blueHover !important;
}
.ui.blue.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @blue;
}
/* Inverted */
.ui.inverted.blue.header {
color: @lightBlue !important;
}
a.ui.inverted.blue.header:hover {
color: @lightBlueHover !important;
}
/*--- Violet ---*/
.ui.violet.header {
color: @violet !important;
}
a.ui.violet.header:hover {
color: @violetHover !important;
}
.ui.violet.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @violet;
}
/* Inverted */
.ui.inverted.violet.header {
color: @lightViolet !important;
}
a.ui.inverted.violet.header:hover {
color: @lightVioletHover !important;
}
/*--- Purple ---*/
.ui.purple.header {
color: @purple !important;
}
a.ui.purple.header:hover {
color: @purpleHover !important;
}
.ui.purple.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @purple;
}
/* Inverted */
.ui.inverted.purple.header {
color: @lightPurple !important;
}
a.ui.inverted.purple.header:hover {
color: @lightPurpleHover !important;
}
/*--- Pink ---*/
.ui.pink.header {
color: @pink !important;
}
a.ui.pink.header:hover {
color: @pinkHover !important;
}
.ui.pink.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @pink;
}
/* Inverted */
.ui.inverted.pink.header {
color: @lightPink !important;
}
a.ui.inverted.pink.header:hover {
color: @lightPinkHover !important;
}
/*--- Brown ---*/
.ui.brown.header {
color: @brown !important;
}
a.ui.brown.header:hover {
color: @brownHover !important;
}
.ui.brown.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @brown;
}
/* Inverted */
.ui.inverted.brown.header {
color: @lightBrown !important;
}
a.ui.inverted.brown.header:hover {
color: @lightBrownHover !important;
}
/*--- Grey ---*/
.ui.grey.header {
color: @grey !important;
}
a.ui.grey.header:hover {
color: @greyHover !important;
}
.ui.grey.dividing.header {
border-bottom: @dividedColoredBorderWidth solid @grey;
}
/* Inverted */
.ui.inverted.grey.header {
color: @lightGrey !important;
}
a.ui.inverted.grey.header:hover {
color: @lightGreyHover !important;
}
/*-------------------
Aligned
@ -579,12 +668,10 @@ a.ui.inverted.yellow.header:hover {
margin-top: 0em;
margin-bottom: 0em;
border-top: none;
border-bottom: none;
border-radius: 0em;
}
.ui.top.attached.header {
margin-bottom: 0em;
border-bottom: none;
border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
}
.ui.bottom.attached.header {
@ -595,19 +682,19 @@ a.ui.inverted.yellow.header:hover {
/* Attached Sizes */
.ui.tiny.attached.header {
font-size: @tinyAttached;
font-size: @tinyAttachedSize;
}
.ui.small.attached.header {
font-size: @smallAttached;
font-size: @smallAttachedSize;
}
.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
font-size: @mediumAttached;
font-size: @mediumAttachedSize;
}
.ui.large.attached.header {
font-size: @largeAttached;
font-size: @largeAttachedSize;
}
.ui.huge.attached.header {
font-size: @hugeAttached;
font-size: @hugeAttachedSize;
}
/*-------------------
@ -615,7 +702,7 @@ a.ui.inverted.yellow.header:hover {
--------------------*/
.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
font-size: @medium;
font-size: @mediumFontSize;
}
.loadUIOverrides();

385
web/semantic/src/definitions/elements/icon.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -46,7 +46,6 @@ i.icon {
font-family: 'Icons';
font-style: normal;
line-height: 1;
font-weight: normal;
text-decoration: inherit;
text-align: center;
@ -54,6 +53,7 @@ i.icon {
speak: none;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
backface-visibility: hidden;
}
@ -71,6 +71,7 @@ i.icon:before {
i.icon.loading {
height: 1em;
line-height: 1;
animation: icon-loading @loadingDuration linear infinite;
}
@keyframes icon-loading {
@ -87,19 +88,18 @@ i.icon.loading {
*******************************/
i.icon.hover {
opacity: 1;
opacity: 1 !important;
}
i.icon.active {
opacity: 1;
opacity: 1 !important;
}
i.emphasized.icon {
opacity: 1;
opacity: 1 !important;
}
i.disabled.icon {
pointer-events: none;
opacity: @disabledOpacity !important;
}
@ -109,6 +109,15 @@ i.disabled.icon {
*******************************/
/*-------------------
Fitted
--------------------*/
i.fitted.icon {
width: auto;
margin: 0em;
}
/*-------------------
Link
--------------------*/
@ -116,7 +125,7 @@ i.disabled.icon {
i.link.icon {
cursor: pointer;
opacity: @linkOpacity;
transition: opacity @transitionDuration @transitionEasing;
transition: opacity @defaultDuration @defaultEasing;
}
i.link.icon:hover {
opacity: 1 !important;
@ -128,12 +137,11 @@ i.link.icon:hover {
i.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: @circularPadding !important;
box-shadow: @circularShadow;
line-height: 1 !important;
width: @circularSize !important;
height: @circularSize !important;
}
@ -174,168 +182,297 @@ i.counterclockwise.rotated.icon {
--------------------*/
i.bordered.icon {
line-height: 1;
vertical-align: baseline;
width: @borderedSize;
height: @borderedSize;
padding: @borderedVerticalPadding @borderedHorizontalPadding !important;
box-shadow: @borderedShadow;
vertical-align: baseline;
}
i.bordered.inverted.icon {
border: none;
box-shadow: none;
}
/*-------------------
Colors
--------------------*/
i.white.icon {
color: @white !important;
}
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
--------------------*/
i.inverted.icon {
color: @white;
}
i.inverted.black.icon {
color: @lightBlack !important;
}
i.inverted.blue.icon {
color: @lightBlue !important;
}
i.inverted.green.icon {
color: @lightGreen !important;
}
i.inverted.orange.icon {
color: @lightOrange !important;
}
i.inverted.pink.icon {
color: @lightPink !important;
}
i.inverted.purple.icon {
color: @lightPurple !important;
}
i.inverted.red.icon {
color: @lightRed !important;
}
i.inverted.teal.icon {
color: @lightTeal !important;
}
i.inverted.yellow.icon {
color: @lightYellow !important;
}
/* Inverted Shapes */
i.inverted.bordered.icon,
i.inverted.circular.icon {
background-color: #222222 !important;
color: #FFFFFF !important;
}
i.inverted.bordered.black.icon,
i.inverted.circular.black.icon {
background-color: @black !important;
color: #FFFFFF !important;
color: @white !important;
}
i.inverted.bordered.blue.icon,
i.inverted.circular.blue.icon {
background-color: @blue !important;
color: #FFFFFF !important;
i.inverted.icon {
color: @white;
}
i.inverted.bordered.green.icon,
i.inverted.circular.green.icon {
background-color: @green !important;
color: #FFFFFF !important;
/*-------------------
Colors
--------------------*/
/* Red */
i.red.icon {
color: @red !important;
}
i.inverted.bordered.orange.icon,
i.inverted.circular.orange.icon {
background-color: @orange !important;
color: #FFFFFF !important;
}
i.inverted.bordered.pink.icon,
i.inverted.circular.pink.icon {
background-color: @pink !important;
color: #FFFFFF !important;
}
i.inverted.bordered.purple.icon,
i.inverted.circular.purple.icon {
background-color: @purple !important;
color: #FFFFFF !important;
i.inverted.red.icon {
color: @lightRed !important;
}
i.inverted.bordered.red.icon,
i.inverted.circular.red.icon {
background-color: @red !important;
color: #FFFFFF !important;
color: @white !important;
}
i.inverted.bordered.teal.icon,
i.inverted.circular.teal.icon {
background-color: @teal !important;
color: #FFFFFF !important;
/* Orange */
i.orange.icon {
color: @orange !important;
}
i.inverted.orange.icon {
color: @lightOrange !important;
}
i.inverted.bordered.orange.icon,
i.inverted.circular.orange.icon {
background-color: @orange !important;
color: @white !important;
}
/* Yellow */
i.yellow.icon {
color: @yellow !important;
}
i.inverted.yellow.icon {
color: @lightYellow !important;
}
i.inverted.bordered.yellow.icon,
i.inverted.circular.yellow.icon {
background-color: @yellow !important;
color: #FFFFFF !important;
color: @white !important;
}
/* Olive */
i.olive.icon {
color: @olive !important;
}
i.inverted.olive.icon {
color: @lightOlive !important;
}
i.inverted.bordered.olive.icon,
i.inverted.circular.olive.icon {
background-color: @olive !important;
color: @white !important;
}
/* Green */
i.green.icon {
color: @green !important;
}
i.inverted.green.icon {
color: @lightGreen !important;
}
i.inverted.bordered.green.icon,
i.inverted.circular.green.icon {
background-color: @green !important;
color: @white !important;
}
/* Teal */
i.teal.icon {
color: @teal !important;
}
i.inverted.teal.icon {
color: @lightTeal !important;
}
i.inverted.bordered.teal.icon,
i.inverted.circular.teal.icon {
background-color: @teal !important;
color: @white !important;
}
/* Blue */
i.blue.icon {
color: @blue !important;
}
i.inverted.blue.icon {
color: @lightBlue !important;
}
i.inverted.bordered.blue.icon,
i.inverted.circular.blue.icon {
background-color: @blue !important;
color: @white !important;
}
/* Violet */
i.violet.icon {
color: @violet !important;
}
i.inverted.violet.icon {
color: @lightViolet !important;
}
i.inverted.bordered.violet.icon,
i.inverted.circular.violet.icon {
background-color: @violet !important;
color: @white !important;
}
/* Purple */
i.purple.icon {
color: @purple !important;
}
i.inverted.purple.icon {
color: @lightPurple !important;
}
i.inverted.bordered.purple.icon,
i.inverted.circular.purple.icon {
background-color: @purple !important;
color: @white !important;
}
/* Pink */
i.pink.icon {
color: @pink !important;
}
i.inverted.pink.icon {
color: @lightPink !important;
}
i.inverted.bordered.pink.icon,
i.inverted.circular.pink.icon {
background-color: @pink !important;
color: @white !important;
}
/* Brown */
i.brown.icon {
color: @brown !important;
}
i.inverted.brown.icon {
color: @lightBrown !important;
}
i.inverted.bordered.brown.icon,
i.inverted.circular.brown.icon {
background-color: @brown !important;
color: @white !important;
}
/* Grey */
i.grey.icon {
color: @grey !important;
}
i.inverted.grey.icon {
color: @lightGrey !important;
}
i.inverted.bordered.grey.icon,
i.inverted.circular.grey.icon {
background-color: @grey !important;
color: @white !important;
}
/* Black */
i.black.icon {
color: @black !important;
}
i.inverted.black.icon {
color: @lightBlack !important;
}
i.inverted.bordeblack.black.icon,
i.inverted.circular.black.icon {
background-color: @black !important;
color: @white !important;
}
/*-------------------
Sizes
--------------------*/
i.small.icon {
i.mini.icon,
i.mini.icons {
line-height: 1;
font-size: @mini;
}
i.tiny.icon,
i.tiny.icons {
line-height: 1;
font-size: @tiny;
}
i.small.icon,
i.small.icons {
line-height: 1;
font-size: @small;
}
i.icon {
i.icon,
i.icons {
font-size: @medium;
}
i.large.icon {
i.large.icon,
i.large.icons {
line-height: 1;
vertical-align: middle;
font-size: @large;
vertical-align: middle;
}
i.big.icon {
i.big.icon,
i.big.icons {
line-height: 1;
vertical-align: middle;
font-size: @big;
vertical-align: middle;
}
i.huge.icon {
i.huge.icon,
i.huge.icons {
line-height: 1;
vertical-align: middle;
font-size: @huge;
vertical-align: middle;
}
i.massive.icon {
font-size: @massive;
i.massive.icon,
i.massive.icons {
line-height: 1;
vertical-align: middle;
font-size: @massive;
}
.loadUIOverrides();
/*******************************
Groups
*******************************/
i.icons {
display: inline-block;
position: relative;
line-height: 1;
}
i.icons .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
margin: 0em;
margin: 0;
}
i.icons .icon:first-child {
position: static;
width: auto;
height: auto;
vertical-align: top;
transform: none;
margin-right: @distanceFromText;
}
/* Corner Icon */
i.icons .corner.icon {
top: auto;
left: auto;
right: 0;
bottom: 0;
transform: none;
font-size: @cornerIconSize;
text-shadow: @cornerIconShadow;
}
i.icons .inverted.corner.icon {
text-shadow: @cornerIconInvertedShadow;
}
.loadUIOverrides();

37
web/semantic/src/definitions/elements/image.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -106,11 +106,9 @@ img.ui.image {
---------------*/
.ui.rounded.images .image,
.ui.rounded.images img,
.ui.rounded.images svg,
.ui.rounded.image img,
.ui.rounded.image svg,
.ui.rounded.image {
.ui.rounded.image,
.ui.rounded.images .image > *,
.ui.rounded.image > * {
border-radius: @roundedBorderRadius;
}
@ -137,11 +135,9 @@ img.ui.bordered.image {
}
.ui.circular.images .image,
.ui.circular.images img,
.ui.circular.images svg,
.ui.circular.image img,
.ui.circular.image svg,
.ui.circular.image {
.ui.circular.image,
.ui.circular.images .image > *,
.ui.circular.image > * {
-webkit-border-radius: @circularRadius;
-moz-border-radius: @circularRadius;
border-radius: @circularRadius;
@ -184,6 +180,25 @@ img.ui.bordered.image {
border-radius: @circularRadius;
}
/*-------------------
Spaced
--------------------*/
.ui.spaced.image {
display: inline-block !important;
margin-left: @spacedDistance;
margin-right: @spacedDistance;
}
.ui[class*="left spaced"].image {
margin-left: @spacedDistance;
margin-right: 0em;
}
.ui[class*="right spaced"].image {
margin-left: 0em;
margin-right: @spacedDistance;
}
/*-------------------
Floated

224
web/semantic/src/definitions/elements/input.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -30,12 +30,15 @@
.ui.input {
position: relative;
display: inline-block;
font-weight: normal;
font-style: normal;
display: inline-flex;
color: @inputColor;
}
.ui.input input {
margin: 0em;
width: 100%;
max-width: 100%;
flex: 1 0 auto;
outline: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
text-align: @textAlign;
@ -59,18 +62,35 @@
---------------------*/
/* browsers require these rules separate */
.ui.input input::-webkit-input-placeholder {
color: @placeholderColor;
}
.ui.input input::-moz-placeholder {
color: @placeholderColor;
}
.ui.input input::-ms-input-placeholder {
color: @placeholderColor;
}
/*******************************
States
*******************************/
/*--------------------
Disabled
---------------------*/
.ui.disabled.input,
.ui.input input[disabled] {
opacity: @disabledOpacity;
}
.ui.disabled.input input {
pointer-events: none;
}
/*--------------------
Active
---------------------*/
@ -134,14 +154,19 @@
color: @focusColor;
box-shadow: @focusBoxShadow;
}
.ui.input.focus input input::-webkit-input-placeholder,
.ui.input input:focus input::-webkit-input-placeholder {
.ui.input.focus input::-webkit-input-placeholder,
.ui.input input:focus::-webkit-input-placeholder {
color: @placeholderFocusColor;
}
.ui.input.focus input input::-moz-placeholder,
.ui.input input:focus input::-moz-placeholder {
.ui.input.focus input::-moz-placeholder,
.ui.input input:focus::-moz-placeholder {
color: @placeholderFocusColor;
}
.ui.input.focus input::-ms-input-placeholder,
.ui.input input:focus::-ms-input-placeholder {
color: @placeholderFocusColor;
}
/*--------------------
@ -156,18 +181,24 @@
}
/* Error Placeholder */
.ui.input.error input ::-webkit-input-placeholder {
.ui.input.error input::-webkit-input-placeholder {
color: @placeholderErrorColor;
}
.ui.input.error input ::-moz-placeholder {
.ui.input.error input::-moz-placeholder {
color: @placeholderErrorColor;
}
.ui.input.error input::-ms-input-placeholder {
color: @placeholderErrorColor;
}
/* Focused Error Placeholder */
.ui.input.error input :focus::-webkit-input-placeholder {
.ui.input.error input:focus::-webkit-input-placeholder {
color: @placeholderErrorFocusColor;
}
.ui.input.error input :focus::-moz-placeholder {
.ui.input.error input:focus::-moz-placeholder {
color: @placeholderErrorFocusColor;
}
.ui.input.error input:focus::-ms-input-placeholder {
color: @placeholderErrorFocusColor;
}
@ -179,10 +210,12 @@
Transparent
---------------------*/
.ui.transparent.input input {
border-color: transparent;
background-color: transparent;
padding: 0em;
border-color: transparent !important;
background-color: transparent !important;
padding: 0em !important;
box-shadow: none !important;
}
/* Transparent Icon */
@ -194,14 +227,11 @@
padding-right: @transparentIconMargin !important;
}
.ui.transparent[class*="left icon"].input > input {
padding-left: 0em !important;
padding-left: @transparentIconMargin !important;
padding-right: 0em !important;
}
/* Transparent Inverted */
.ui.transparent.inverted.input input::-moz-placeholder {
color: @transparentInvertedPlaceholderColor;
}
.ui.transparent.inverted.input {
color: @transparentInvertedColor;
}
@ -209,6 +239,16 @@
color: inherit;
}
.ui.transparent.inverted.input input::-webkit-input-placeholder {
color: @transparentInvertedPlaceholderColor;
}
.ui.transparent.inverted.input input::-moz-placeholder {
color: @transparentInvertedPlaceholderColor;
}
.ui.transparent.inverted.input input::-ms-input-placeholder {
color: @transparentInvertedPlaceholderColor;
}
/*--------------------
Icon
@ -217,6 +257,7 @@
.ui.icon.input > i.icon {
cursor: default;
position: absolute;
line-height: 1;
text-align: center;
top: 0px;
right: 0px;
@ -228,6 +269,9 @@
border-radius: 0em @borderRadius @borderRadius 0em;
transition: @iconTransition;
}
.ui.icon.input > i.icon:not(.link) {
pointer-events: none;
}
.ui.icon.input input {
padding-right: @iconMargin !important;
}
@ -274,46 +318,44 @@
---------------------*/
/* Adjacent Label */
.ui.labeled.input {
display: inline-flex;
}
.ui.labeled.input > .label {
flex: 1 0 auto;
flex: 0 0 auto;
margin: 0;
font-size: 1em;
font-size: @relativeMedium;
}
.ui.labeled.input > .label:not(.corner) {
padding-top: @verticalPadding;
padding-bottom: @verticalPadding;
}
/* Fluid Labeled */
.ui.fluid.labeled.input {
display: flex;
}
/* Label on Left */
.ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
/* Regular Label on Left */
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left-color: transparent;
}
.ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus {
border-left-color: @focusBorderColor;
}
/* Label on Right */
.ui[class*="right labeled"].input > input {
border-right: none;
/* Regular Label on Right */
.ui[class*="right labeled"].input input {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-right-color: transparent !important;
}
.ui[class*="right labeled"].input > .label {
.ui[class*="right labeled"].input input + .label {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.ui[class*="right labeled"].input input:focus {
border-right-color: @focusBorderColor !important;
}
/* Corner Label */
.ui.labeled.input .corner.label {
@ -322,29 +364,49 @@
font-size: @labelCornerSize;
border-radius: 0em @borderRadius 0em 0em;
}
.ui.labeled.input input {
padding-right: @labeledMargin !important;
}
/* Spacing with corner label */
.ui[class*="corner labeled"].icon.input:not(.left) > input {
.ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input input {
padding-right: @labeledMargin !important;
}
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
padding-right: @labeledIconInputMargin !important;
}
.ui[class*="corner labeled"].icon.input:not(.left) > .icon {
.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
margin-right: @labeledIconMargin;
}
/* Left Labeled */
.ui[class*="left corner labeled"].labeled.input input {
padding-left: @labeledMargin !important;
}
.ui[class*="left corner labeled"].icon.input > input {
padding-left: @labeledIconInputMargin !important;
}
.ui[class*="left corner labeled"].icon.input > .icon {
margin-left: @labeledIconMargin;
}
/* Corner Label Position */
.ui.input > .ui.corner.label {
top: @borderWidth;
right: @borderWidth;
}
.ui.input > .ui.left.corner.label {
right: auto;
left: @borderWidth;
}
/*--------------------
Action
---------------------*/
.ui.action.input {
display: inline-flex;
}
.ui.action.input > .button,
.ui.action.input > .buttons {
flex: 1 0 auto;
display: flex;
align-items: center;
flex: 0 0 auto;
}
.ui.action.input > .button,
.ui.action.input > .buttons > .button {
@ -353,33 +415,47 @@
margin: 0;
}
/* Fluid */
.ui.fluid.action.input {
display: flex;
}
/* Button on Right */
.ui.action.input:not([class*="left action"]) > input {
border-right: none;
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
border-right-color: transparent !important;
}
.ui.action.input:not([class*="left action"]) > .dropdown,
.ui.action.input:not([class*="left action"]) > .button,
.ui.action.input:not([class*="left action"]) > .buttons > .button {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-radius: 0px;
}
.ui.action.input:not([class*="left action"]) > .dropdown:last-child,
.ui.action.input:not([class*="left action"]) > .button:last-child,
.ui.action.input:not([class*="left action"]) > .buttons:last-child > .button {
border-radius: 0px @borderRadius @borderRadius 0px;
}
/* Input Focus */
.ui.action.input:not([class*="left action"]) input:focus {
border-right-color: @focusBorderColor !important;
}
/* Button on Left */
.ui[class*="left action"].input > input {
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-left-color: transparent !important;
}
.ui[class*="left action"].input > .dropdown,
.ui[class*="left action"].input > .button,
.ui[class*="left action"].input > .buttons > .button {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-radius: 0px;
}
.ui[class*="left action"].input > input {
border-left: none;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
.ui[class*="left action"].input > .dropdown:first-child,
.ui[class*="left action"].input > .button:first-child,
.ui[class*="left action"].input > .buttons:first-child > .button {
border-radius: @borderRadius 0px 0px @borderRadius;
}
/* Input Focus */
.ui[class*="left action"].input > input:focus {
border-left-color: @focusBorderColor !important;
}
/*--------------------
@ -391,13 +467,15 @@
border: none;
}
/*--------------------
Fluid
---------------------*/
.ui.fluid.input {
display: block;
display: flex;
}
.ui.fluid.input > input {
width: 0px !important;
}
/*--------------------
@ -405,25 +483,25 @@
---------------------*/
.ui.mini.input {
font-size: @mini;
font-size: @relativeMini;
}
.ui.small.input {
font-size: @small;
font-size: @relativeSmall;
}
.ui.input {
font-size: @medium;
font-size: @relativeMedium;
}
.ui.large.input {
font-size: @large;
font-size: @relativeLarge;
}
.ui.big.input {
font-size: @big;
font-size: @relativeBig;
}
.ui.huge.input {
font-size: @huge;
font-size: @relativeHuge;
}
.ui.massive.input {
font-size: @massive;
font-size: @relativeMassive;
}
.loadUIOverrides();
.loadUIOverrides();

938
web/semantic/src/definitions/elements/label.less Normal file → Executable file
View file

File diff suppressed because it is too large Load diff

196
web/semantic/src/definitions/elements/list.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -58,7 +58,7 @@ ol.ui.list li,
list-style-type: @listStyleType;
list-style-position: @listStylePosition;
padding: @itemVerticalPadding @itemHorizontalPadding;
padding: @itemPadding;
line-height: @itemLineHeight;
}
@ -95,6 +95,15 @@ ol.ui.list ol,
padding: @childListPadding;
}
/* Child Item */
ul.ui.list ul li,
ol.ui.list ol li,
.ui.list .list > .item {
padding: @childItemPadding;
line-height: @childItemLineHeight;
}
/* Icon */
.ui.list .list > .item > i.icon,
.ui.list > .item > i.icon {
@ -105,10 +114,6 @@ ol.ui.list ol,
vertical-align: @iconContentVerticalAlign;
transition: @iconTransition;
}
.ui.list .list > .item i[class*="top aligned"].icon,
.ui.list > .item > i[class*="top aligned"].icon {
vertical-align: top;
}
.ui.list .list > .item > i.icon:only-child,
.ui.list > .item > i.icon:only-child {
display: inline-block;
@ -122,12 +127,11 @@ ol.ui.list ol,
display: table-cell;
background-color: transparent;
margin: 0em;
padding-right: @imageDistance;
vertical-align: @imageAlign;
}
.ui.list .list > .item > [class*="top aligned"].image,
.ui.list > .item > [class*="top aligned"].image {
vertical-align: top;
.ui.list .list > .item > .image:not(:only-child):not(img),
.ui.list > .item > .image:not(:only-child):not(img) {
padding-right: @imageDistance;
}
.ui.list .list > .item > .image img,
.ui.list > .item > .image img {
@ -139,7 +143,6 @@ ol.ui.list ol,
.ui.list > .item > img.image,
.ui.list > .item > .image:only-child {
display: inline-block;
padding-right: 0em;
}
/* Content */
@ -148,14 +151,6 @@ ol.ui.list ol,
line-height: @contentLineHeight;
}
.ui.list .list > .item > .image + .content,
.ui.list .list > .item > .icon + .content
.ui.list > .item > .image + .content,
.ui.list > .item > .icon + .content {
display: table-cell;
padding: 0em 0em 0em @contentDistance;
vertical-align: @contentVerticalAlign;
}
.ui.list .list > .item > .image + .content,
.ui.list .list > .item > .icon + .content,
.ui.list > .item > .image + .content,
.ui.list > .item > .icon + .content {
@ -167,17 +162,36 @@ ol.ui.list ol,
.ui.list > .item > img.image + .content {
display: inline-block;
}
.ui.list .list > .item [class*="top aligned"].content,
.ui.list > .item > [class*="top aligned"].content {
vertical-align: top;
}
.ui.list .list > .item > .content > .list,
.ui.list > .item > .content > .list {
margin-left: 0em;
padding-left: 0em;
}
/* Item Link */
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
margin: 0em;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;
}
/* Description */
.ui.list .list > .item .description,
.ui.list > .item .description {
display: block;
color: @itemDescriptionColor;
}
/* Child Link */
.ui.list > .item a,
.ui.list .list > .item a {
cursor: pointer;
}
/* Linking Item */
.ui.list .list > a.item,
.ui.list > a.item {
cursor: pointer;
@ -194,32 +208,25 @@ ol.ui.list ol,
color: @itemLinkIconColor;
}
/* Linking Content */
.ui.list .item a {
/* Header Link */
.ui.list .list > .item a.header,
.ui.list > .item a.header {
cursor: pointer;
color: @itemLinkColor !important;
color: @itemHeaderLinkColor !important;
}
.ui.list .item a:hover {
color: @itemLinkHoverColor !important;
}
/* Header */
.ui.list .list > .item .header,
.ui.list > .item .header {
display: block;
margin: 0em;
font-family: @itemHeaderFontFamily;
font-weight: @itemHeaderFontWeight;
color: @itemHeaderColor;
}
.ui.list .list > .item .description,
.ui.list > .item .description {
display: block;
color: @itemDescriptionColor;
.ui.list .list > .item a.header:hover,
.ui.list > .item a.header:hover {
color: @itemHeaderLinkHoverColor !important;
}
/* Floated Content */
.ui[class*="left floated"].list {
float: left;
}
.ui[class*="right floated"].list {
float: right;
}
.ui.list .list > .item [class*="left floated"],
.ui.list > .item [class*="left floated"] {
float: left;
@ -279,7 +286,7 @@ ol.ui.list ol,
margin-left: @horizontalSpacing;
font-size: 1rem;
}
.ui.horizontal.list > .item:first-child {
.ui.horizontal.list:not(.celled) > .item:first-child {
margin-left: 0em !important;
padding-left: 0em !important;
}
@ -288,6 +295,15 @@ ol.ui.list ol,
padding-bottom: 0em;
}
.ui.horizontal.list > .item > .image,
.ui.horizontal.list .list > .item > .image,
.ui.horizontal.list > .item > .icon,
.ui.horizontal.list .list > .item > .icon,
.ui.horizontal.list > .item > .content,
.ui.horizontal.list .list > .item > .content {
vertical-align: @horizontalVerticalAlign;
}
/* Padding on all elements */
.ui.horizontal.list > .item:first-child,
.ui.horizontal.list > .item:last-child {
@ -369,53 +385,72 @@ ol.ui.list ol,
/* Linking Content */
.ui.inverted.list .item a {
cursor: pointer;
.ui.inverted.list .item a:not(.ui) {
color: @invertedItemLinkColor !important;
}
.ui.inverted.list .item a:hover {
.ui.inverted.list .item a:not(.ui):hover {
color: @invertedItemLinkHoverColor !important;
}
/*-------------------
Aligned
--------------------*/
.ui.list[class*="top aligned"] .image,
.ui.list[class*="top aligned"] .content,
.ui.list [class*="top aligned"] {
vertical-align: top !important;
}
.ui.list[class*="middle aligned"] .image,
.ui.list[class*="middle aligned"] .content,
.ui.list [class*="middle aligned"] {
vertical-align: middle !important;
}
.ui.list[class*="bottom aligned"] .image,
.ui.list[class*="bottom aligned"] .content,
.ui.list [class*="bottom aligned"] {
vertical-align: bottom !important;
}
/*-------------------
Link
--------------------*/
.ui.link.list .item,
.ui.link.list a.item,
.ui.link.list .item a {
.ui.link.list .item a:not(.ui) {
color: @linkListItemColor;
transition: @linkListTransition;
}
.ui.link.list a.item:hover,
.ui.link.list .item a:hover {
.ui.link.list .item a:not(.ui):hover {
color: @linkListItemHoverColor;
}
.ui.link.list a.item:active,
.ui.link.list .item a:active {
.ui.link.list .item a:not(.ui):active {
color: @linkListItemDownColor;
}
.ui.link.list .active.item,
.ui.link.list .active.item a {
.ui.link.list .active.item a:not(.ui) {
color: @linkListItemActiveColor;
}
/* Inverted */
.ui.inverted.link.list .item,
.ui.inverted.link.list a.item,
.ui.inverted.link.list .item a {
.ui.inverted.link.list .item a:not(.ui) {
color: @invertedLinkListItemColor;
}
.ui.inverted.link.list a.item:hover,
.ui.inverted.link.list .item a:hover {
.ui.inverted.link.list .item a:not(.ui):hover {
color: @invertedLinkListItemHoverColor;
}
.ui.inverted.link.list a.item:active,
.ui.inverted.link.list .item a:active {
.ui.inverted.link.list .item a:not(.ui):active {
color: @invertedLinkListItemDownColor;
}
.ui.inverted.link.list a.active.item,
.ui.inverted.link.list .active.item a {
.ui.inverted.link.list .active.item a:not(.ui) {
color: @invertedLinkListItemActiveColor;
}
@ -524,6 +559,8 @@ ul.ui.list li,
ul.ui.list li:before,
.ui.bulleted.list .list > .item:before,
.ui.bulleted.list > .item:before {
user-select: none;
pointer-events: none;
position: absolute;
top: auto;
left: auto;
@ -552,6 +589,10 @@ ul.ui.horizontal.bulleted.list li:first-child,
.ui.horizontal.bulleted.list > .item:first-child {
margin-left: 0em;
}
ul.ui.horizontal.bulleted.list li::before,
.ui.horizontal.bulleted.list > .item::before {
color: @horizontalBulletColor;
}
ul.ui.horizontal.bulleted.list li:first-child::before,
.ui.horizontal.bulleted.list > .item:first-child::before {
display: none;
@ -581,6 +622,8 @@ ol.ui.list li:before,
position: absolute;
top: auto;
left: auto;
user-select: none;
pointer-events: none;
margin-left: -(@orderedCountDistance);
counter-increment: @orderedCountName;
content: @orderedCountContent;
@ -590,6 +633,20 @@ ol.ui.list li:before,
opacity: @orderedCountOpacity;
}
ol.ui.inverted.list li:before,
.ui.ordered.inverted.list .list > .item:before,
.ui.ordered.inverted.list > .item:before {
color: @orderedInvertedCountColor;
}
/* Value */
.ui.ordered.list > .list > .item[data-value],
.ui.ordered.list > .item[data-value] {
content: attr(data-value);
}
ol.ui.list li[value]:before {
content: attr(value);
}
/* Child Lists */
ol.ui.list ol,
@ -613,7 +670,6 @@ ol.ui.horizontal.list li:before,
margin: 0em @horizontalOrderedCountDistance 0em 0em;
}
/*-------------------
Divided
--------------------*/
@ -643,7 +699,6 @@ ol.ui.horizontal.list li:before,
margin-left: 0em;
padding-left: 0em;
}
.ui.divided.bulleted.list .list > .item:not(.horizontal),
.ui.divided.bulleted.list > .item:not(.horizontal) {
padding-left: @bulletDistance;
}
@ -790,12 +845,12 @@ ol.ui.horizontal.list li:before,
--------------------*/
.ui.relaxed.list:not(.horizontal) > .item {
padding-top: @relaxedVerticalPadding;
padding-bottom: @relaxedVerticalPadding;
padding-top: @relaxedItemVerticalPadding;
padding-bottom: @relaxedItemVerticalPadding;
}
.ui.relaxed.list .list > .item .header,
.ui.relaxed.list > .item .header {
/*margin-bottom: @relaxedHeaderMargin;*/
.ui.relaxed.list:not(.horizontal) .list > .item {
padding-top: @relaxedChildItemVerticalPadding;
padding-bottom: @relaxedChildItemVerticalPadding;
}
.ui.horizontal.relaxed.list > .item {
padding-left: @relaxedHorizontalPadding;
@ -804,12 +859,12 @@ ol.ui.horizontal.list li:before,
/* Very Relaxed */
.ui[class*="very relaxed"].list:not(.horizontal) > .item {
padding-top: @veryRelaxedVerticalPadding;
padding-bottom: @veryRelaxedVerticalPadding;
padding-top: @veryRelaxedItemVerticalPadding;
padding-bottom: @veryRelaxedItemVerticalPadding;
}
.ui[class*="very relaxed"].list .list > .item .header,
.ui[class*="very relaxed"].list > .item .header {
/*margin-bottom: @veryRelaxedHeaderMargin;*/
.ui[class*="very relaxed"].list:not(.horizontal) .list > .item {
padding-top: @veryRelaxedChildItemVerticalPadding;
padding-bottom: @veryRelaxedChildItemVerticalPadding;
}
.ui.horizontal[class*="very relaxed"].list .list > .item,
.ui.horizontal[class*="very relaxed"].list > .item {
@ -879,4 +934,5 @@ ol.ui.horizontal.list li:before,
font-size: @massive;
}
.loadUIOverrides();
.loadUIOverrides();

4
web/semantic/src/definitions/elements/loader.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -261,6 +261,8 @@
.ui.centered.inline.loader.active,
.ui.centered.inline.loader.visible {
display: block;
margin-left: auto;
margin-right: auto;
}

59
web/semantic/src/definitions/elements/rail.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -27,21 +27,20 @@
top: 0%;
width: @width;
height: @height;
box-sizing: @contentSizing;
}
.ui.left.rail {
left: auto;
right: 100%;
padding: 0em (@distance / 2) 0em 0em;
margin: 0em (@distance / 2) 0em 0em;
padding: 0em @splitDistance 0em 0em;
margin: 0em @splitDistance 0em 0em;
}
.ui.right.rail {
left: 100%;
right: auto;
padding: 0em 0em 0em (@distance / 2);
margin: 0em 0em 0em (@distance / 2);
padding: 0em 0em 0em @splitDistance;
margin: 0em 0em 0em @splitDistance;
}
/*******************************
@ -55,52 +54,62 @@
.ui.left.internal.rail {
left: 0%;
right: auto;
padding: 0em 0em 0em (@distance / 2);
margin: 0em 0em 0em (@distance / 2);
padding: 0em 0em 0em @splitDistance;
margin: 0em 0em 0em @splitDistance;
}
.ui.right.internal.rail {
left: auto;
right: 0%;
padding: 0em (@distance / 2) 0em 0em;
margin: 0em (@distance / 2) 0em 0em;
padding: 0em @splitDistance 0em 0em;
margin: 0em @splitDistance 0em 0em;
}
/*--------------
Divided
Dividing
---------------*/
.ui.dividing.rail {
width: @dividingWidth;
}
.ui.left.dividing.rail {
padding: 0em (@dividedDistance / 2) 0em 0em;
margin: 0em (@dividedDistance / 2) 0em 0em;
border-right: @dividedBorder;
padding: 0em @splitDividingDistance 0em 0em;
margin: 0em @splitDividingDistance 0em 0em;
border-right: @dividingBorder;
}
.ui.right.dividing.rail {
border-left: @dividedBorder;
padding: 0em 0em 0em (@dividedDistance / 2);
margin: 0em 0em 0em (@dividedDistance / 2);
border-left: @dividingBorder;
padding: 0em 0em 0em @splitDividingDistance;
margin: 0em 0em 0em @splitDividingDistance;
}
/*--------------
Distance
---------------*/
.ui.close.rail {
width: @closeWidth;
}
.ui.close.left.rail {
padding: 0em (@closeDistance / 2) 0em 0em;
margin: 0em (@closeDistance / 2) 0em 0em;
padding: 0em @splitCloseDistance 0em 0em;
margin: 0em @splitCloseDistance 0em 0em;
}
.ui.close.right.rail {
padding: 0em 0em 0em (@closeDistance / 2);
margin: 0em 0em 0em (@closeDistance / 2);
padding: 0em 0em 0em @splitCloseDistance;
margin: 0em 0em 0em @splitCloseDistance;
}
.ui.very.close.rail {
width: @veryCloseWidth;
}
.ui.very.close.left.rail {
padding: 0em (@veryCloseDistance / 2) 0em 0em;
margin: 0em (@veryCloseDistance / 2) 0em 0em;
padding: 0em @splitVeryCloseDistance 0em 0em;
margin: 0em @splitVeryCloseDistance 0em 0em;
}
.ui.very.close.right.rail {
padding: 0em 0em 0em (@veryCloseDistance / 2);
margin: 0em 0em 0em (@veryCloseDistance / 2);
padding: 0em 0em 0em @splitVeryCloseDistance;
margin: 0em 0em 0em @splitVeryCloseDistance;
}
/*--------------

46
web/semantic/src/definitions/elements/reveal.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -23,7 +23,7 @@
*******************************/
.ui.reveal {
display: inline-block;
display: inherit;
position: relative !important;
font-size: 0em !important;
}
@ -41,6 +41,7 @@
}
/* Make sure hovered element is on top of other reveal */
.ui.active.reveal .visible.content,
.ui.reveal:hover .visible.content {
z-index: @activeZIndex !important;
}
@ -63,12 +64,11 @@
.ui.slide.reveal > .content {
display: block;
width: 100%;
float: left;
margin: 0em;
transition:
transform @transitionDuration @transitionEasing @transitionDelay,
;
transition: @slideTransition;
}
.ui.slide.reveal > .visible.content {
@ -80,9 +80,11 @@
width: 100% !important;
transform: translateX(100%) !important;
}
.ui.slide.active.reveal > .visible.content,
.ui.slide.reveal:hover > .visible.content {
transform: translateX(-100%) !important;
}
.ui.slide.active.reveal > .hidden.content,
.ui.slide.reveal:hover > .hidden.content {
transform: translateX(0%) !important;
}
@ -93,9 +95,11 @@
.ui.slide.right.reveal > .hidden.content {
transform: translateX(-100%) !important;
}
.ui.slide.right.active.reveal > .visible.content,
.ui.slide.right.reveal:hover > .visible.content {
transform: translateX(100%) !important;
}
.ui.slide.right.active.reveal > .hidden.content,
.ui.slide.right.reveal:hover > .hidden.content {
transform: translateX(0%) !important;
}
@ -103,9 +107,11 @@
.ui.slide.up.reveal > .hidden.content {
transform: translateY(100%) !important;
}
.ui.slide.up.active.reveal > .visible.content,
.ui.slide.up.reveal:hover > .visible.content {
transform: translateY(-100%) !important;
}
.ui.slide.up.active.reveal > .hidden.content,
.ui.slide.up.reveal:hover > .hidden.content {
transform: translateY(0%) !important;
}
@ -113,9 +119,11 @@
.ui.slide.down.reveal > .hidden.content {
transform: translateY(-100%) !important;
}
.ui.slide.down.active.reveal > .visible.content,
.ui.slide.down.reveal:hover > .visible.content {
transform: translateY(100%) !important;
}
.ui.slide.down.active.reveal > .hidden.content,
.ui.slide.down.reveal:hover > .hidden.content {
transform: translateY(0%) !important;
}
@ -128,6 +136,7 @@
.ui.fade.reveal > .visible.content {
opacity: 1;
}
.ui.fade.active.reveal > .visible.content,
.ui.fade.reveal:hover > .visible.content {
opacity: 0;
}
@ -148,9 +157,7 @@
float: left;
margin: 0em;
transition:
transform @transitionDuration @transitionEasing @transitionDelay,
;
transition: @moveTransition;
}
.ui.move.reveal > .visible.content {
@ -161,15 +168,19 @@
left: 0% !important;
width: 100% !important;
}
.ui.move.active.reveal > .visible.content,
.ui.move.reveal:hover > .visible.content {
transform: translateX(-100%) !important;
}
.ui.move.right.active.reveal > .visible.content,
.ui.move.right.reveal:hover > .visible.content {
transform: translateX(100%) !important;
}
.ui.move.up.active.reveal > .visible.content,
.ui.move.up.reveal:hover > .visible.content {
transform: translateY(-100%) !important;
}
.ui.move.down.active.reveal > .visible.content,
.ui.move.down.reveal:hover > .visible.content {
transform: translateY(100%) !important;
}
@ -189,7 +200,9 @@
.ui.rotate.right.reveal > .visible.content {
transform-origin: bottom right;
}
.ui.rotate.active.reveal > .visible.conten,
.ui.rotate.reveal:hover > .visible.content,
.ui.rotate.right.active.reveal > .visible.content,
.ui.rotate.right.reveal:hover > .visible.content {
transform: rotate(@rotateDegrees);
}
@ -197,6 +210,7 @@
.ui.rotate.left.reveal > .visible.content {
transform-origin: bottom left;
}
.ui.rotate.left.active.reveal > .visible.content,
.ui.rotate.left.reveal:hover > .visible.content {
transform: rotate(-@rotateDegrees);
}
@ -205,13 +219,7 @@
States
*******************************/
.ui.disabled.reveal {
opacity: 1 !important;
}
.ui.disabled.reveal > .content {
transition: none !important;
}
.ui.disabled.reveal:hover > .visible.content {
.ui.disabled.reveal:hover > .visible.visible.content {
position: static !important;
display: block !important;
opacity: 1 !important;
@ -221,7 +229,7 @@
bottom: auto !important;
transform: none !important;
}
.ui.disabled.reveal:hover > .hidden.content {
.ui.disabled.reveal:hover > .hidden.hidden.content {
display: none !important;
}
@ -231,11 +239,11 @@
*******************************/
/*--------------
Masked
Visible
---------------*/
.ui.masked.reveal {
overflow: hidden;
.ui.visible.reveal {
overflow: visible;
}
/*--------------

530
web/semantic/src/definitions/elements/segment.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -24,10 +24,10 @@
.ui.segment {
position: relative;
background-color: @background;
background: @background;
box-shadow: @boxShadow;
margin: @margin 0em;
padding: @verticalPadding @horizontalPadding;
margin: @margin;
padding: @padding;
border-radius: @borderRadius;
border: @border;
}
@ -39,40 +39,23 @@
margin-bottom: 0em;
}
.ui.segment:after {
content: '';
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
/* Vertical */
.ui[class*="vertical segment"] {
.ui.vertical.segment {
margin: 0em;
padding-left: 0em;
padding-right: 0em;
background-color: transparent;
background: none transparent;
border-radius: 0px;
border: none;
box-shadow: 0px -1px 0px @borderColor inset;
}
.ui[class*="vertical segment"]:last-child {
box-shadow: none;
}
/* Horizontal */
.ui[class*="horizontal segment"] {
margin: 0em;
padding-top: 0em;
padding-bottom: 0em;
background-color: transparent;
border-radius: 0px;
border: none;
box-shadow: 1px 0px 0px @borderColor;
border-bottom: @borderWidth solid @borderColor;
}
.ui.vertical.segment:last-child {
border-bottom: none;
}
/*-------------------
Loose Coupling
@ -103,12 +86,13 @@
/* Grid */
.ui.page.grid.segment,
.ui.grid .ui.segment.column {
.ui.grid > .row > .ui.segment.column,
.ui.grid > .ui.segment.column {
padding-top: @pageGridMargin;
padding-bottom: @pageGridMargin;
}
.ui.grid.segment {
margin: @margin 0rem;
margin: @margin;
border-radius: @borderRadius;
}
@ -119,7 +103,7 @@
box-shadow: @boxShadow;
}
.ui[class*="very basic"].table.segment {
padding: @verticalPadding @horizontalPadding;
padding: @padding;
}
@ -131,6 +115,7 @@
Piled
--------------------*/
.ui.piled.segments,
.ui.piled.segment {
margin: @piledMargin 0em;
box-shadow: @piledBoxShadow;
@ -142,6 +127,8 @@
.ui.piled.segment:last-child {
margin-bottom: 0em;
}
.ui.piled.segments:after,
.ui.piled.segments:before,
.ui.piled.segment:after,
.ui.piled.segment:before {
background-color: @white;
@ -152,18 +139,21 @@
left: 0px;
position: absolute;
width: 100%;
border: @piledBorder;
box-shadow: @piledBoxShadow;
}
.ui.piled.segment:after {
transform: rotate(@piledDegrees);
top: 0;
z-index: -1;
}
.ui.piled.segments:before,
.ui.piled.segment:before {
transform: rotate(-@piledDegrees);
top: 0;
z-index: -2;
}
.ui.piled.segments:after,
.ui.piled.segment:after {
transform: rotate(@piledDegrees);
top: 0;
z-index: -1;
}
/* Piled Attached */
.ui[class*="top attached"].piled.segment {
@ -188,37 +178,55 @@
.ui.stacked.segment {
padding-bottom: @stackedPadding;
}
.ui.stacked.segment:after,
.ui.stacked.segment:before {
.ui.stacked.segments:before,
.ui.stacked.segments:after,
.ui.stacked.segment:before,
.ui.stacked.segment:after {
content: '';
position: absolute;
bottom: -(@stackedHeight / 2);
left: 0%;
border-top: 1px solid @borderColor;
background-color: @stackedPageBackground;
background: @stackedPageBackground;
width: 100%;
height: @stackedHeight;
visibility: visible;
}
.ui.stacked.segments:before,
.ui.stacked.segment:before {
display: none;
}
/* Add additional page */
.ui.tall.stacked.segments:before,
.ui.tall.stacked.segment:before {
display: block;
bottom: 0px;
}
/* Inverted */
.ui.stacked.inverted.segment:after,
.ui.stacked.inverted.segment:before {
.ui.stacked.inverted.segments:before,
.ui.stacked.inverted.segments:after,
.ui.stacked.inverted.segment:before,
.ui.stacked.inverted.segment:after {
background-color: @subtleTransparentBlack;
border-top: 1px solid @selectedBorderColor;
}
/*-------------------
Padded
--------------------*/
.ui.padded.segment {
padding: @paddedSegmentPadding;
}
.ui[class*="very padded"].segment {
padding: @veryPaddedSegmentPadding;
}
/*-------------------
Compact
--------------------*/
@ -227,6 +235,16 @@
display: table;
}
/* Compact Group */
.ui.compact.segments {
display: inline-flex;
}
.ui.compact.segments .segment,
.ui.segments .compact.segment {
display: block;
flex: 0 1 auto;
}
/*-------------------
Circular
--------------------*/
@ -243,11 +261,125 @@
Raised
--------------------*/
.ui.raised.segments,
.ui.raised.segment {
box-shadow: @raisedBoxShadow;
}
/*******************************
Groups
*******************************/
/* Group */
.ui.segments {
flex-direction: column;
position: relative;
margin: @groupedMargin;
border: @groupedBorder;
box-shadow: @groupedBoxShadow;
border-radius: @groupedBorderRadius;
}
.ui.segments:first-child {
margin-top: 0em;
}
.ui.segments:last-child {
margin-bottom: 0em;
}
/* Nested Segment */
.ui.segments > .segment {
top: 0px;
bottom: 0px;
border-radius: 0px;
margin: @groupedSegmentMargin;
width: @groupedSegmentWidth;
box-shadow: @groupedSegmentBoxShadow;
border: @groupedSegmentBorder;
border-top: @groupedSegmentDivider;
}
.ui.segments:not(.horizontal) > .segment:first-child {
top: @attachedTopOffset;
bottom: 0px;
border-top: none;
margin-top: 0em;
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
}
/* Bottom */
.ui.segments:not(.horizontal) > .segment:last-child {
top: @attachedBottomOffset;
bottom: 0px;
margin-top: 0em;
margin-bottom: 0em;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
/* Nested Group */
.ui.segments > .ui.segments {
border-top: @groupedSegmentDivider;
margin: @nestedGroupMargin;
}
.ui.segments > .segments:first-child {
border-top: none;
}
.ui.segments > .segment + .segments:not(.horizontal) {
margin-top: 0em;
}
/* Horizontal Group */
.ui.horizontal.segments {
display: flex;
flex-direction: row;
background-color: transparent;
border-radius: 0px;
padding: 0em;
background-color: @background;
box-shadow: @boxShadow;
margin: @margin;
border-radius: @borderRadius;
border: @border;
}
/* Nested Horizontal Group */
.ui.segments > .horizontal.segments {
margin: 0em;
background-color: transparent;
border-radius: 0px;
border: none;
box-shadow: none;
border-top: @groupedSegmentDivider;
}
/* Horizontal Segment */
.ui.horizontal.segments > .segment {
flex: 1 1 auto;
-ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
margin: 0em;
min-width: 0px;
background-color: transparent;
border-radius: 0px;
border: none;
box-shadow: none;
border-left: @borderWidth solid @borderColor;
}
/* Border Fixes */
.ui.segments > .horizontal.segments:first-child {
border-top: none;
}
.ui.horizontal.segments > .segment:first-child {
border-left: none;
}
/*******************************
States
*******************************/
@ -328,129 +460,142 @@
--------------------*/
.ui.basic.segment {
position: relative;
background-color: transparent;
box-shadow: none;
border-radius: 0px;
background: @basicBackground;
box-shadow: @basicBoxShadow;
border: @basicBorder;
border-radius: @basicBorderRadius;
}
/*-------------------
Fittted
Clearing
--------------------*/
.ui.fitted.segment {
padding: 0em;
.ui.clearing.segment:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*-------------------
Colors
--------------------*/
.ui.black.segment:not(.inverted) {
border-top: @coloredBorderSize solid @black;
}
.ui.blue.segment:not(.inverted) {
border-top: @coloredBorderSize solid @blue;
}
.ui.green.segment:not(.inverted) {
border-top: @coloredBorderSize solid @green;
}
.ui.orange.segment:not(.inverted) {
border-top: @coloredBorderSize solid @orange;
}
.ui.pink.segment:not(.inverted) {
border-top: @coloredBorderSize solid @pink;
}
.ui.purple.segment:not(.inverted) {
border-top: @coloredBorderSize solid @purple;
}
/* Red */
.ui.red.segment:not(.inverted) {
border-top: @coloredBorderSize solid @red;
}
.ui.teal.segment:not(.inverted) {
border-top: @coloredBorderSize solid @teal;
}
.ui.yellow.segment:not(.inverted) {
border-top: @coloredBorderSize solid @yellow;
}
.ui.black.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.blue.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.green.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.orange.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.pink.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.purple.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.red.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.teal.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
.ui.yellow.segment:not(.inverted):not(.attached) {
border-top-left-radius: @coloredBorderRadius !important;
border-top-right-radius: @coloredBorderRadius !important;
}
/*-------------------
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;
}
/* Orange */
.ui.orange.segment:not(.inverted) {
border-top: @coloredBorderSize solid @orange;
}
.ui.inverted.orange.segment {
background-color: @orange !important;
color: @white !important;
}
/* Yellow */
.ui.yellow.segment:not(.inverted) {
border-top: @coloredBorderSize solid @yellow;
}
.ui.inverted.yellow.segment {
background-color: @yellow !important;
color: @white !important;
}
/* Olive */
.ui.olive.segment:not(.inverted) {
border-top: @coloredBorderSize solid @olive;
}
.ui.inverted.olive.segment {
background-color: @olive !important;
color: @white !important;
}
/* Green */
.ui.green.segment:not(.inverted) {
border-top: @coloredBorderSize solid @green;
}
.ui.inverted.green.segment {
background-color: @green !important;
color: @white !important;
}
/* Teal */
.ui.teal.segment:not(.inverted) {
border-top: @coloredBorderSize solid @teal;
}
.ui.inverted.teal.segment {
background-color: @teal !important;
color: @white !important;
}
.ui.inverted.yellow.segment {
background-color: @yellow !important;
/* Blue */
.ui.blue.segment:not(.inverted) {
border-top: @coloredBorderSize solid @blue;
}
.ui.inverted.blue.segment {
background-color: @blue !important;
color: @white !important;
}
/* Violet */
.ui.violet.segment:not(.inverted) {
border-top: @coloredBorderSize solid @violet;
}
.ui.inverted.violet.segment {
background-color: @violet !important;
color: @white !important;
}
/* Purple */
.ui.purple.segment:not(.inverted) {
border-top: @coloredBorderSize solid @purple;
}
.ui.inverted.purple.segment {
background-color: @purple !important;
color: @white !important;
}
/* Pink */
.ui.pink.segment:not(.inverted) {
border-top: @coloredBorderSize solid @pink;
}
.ui.inverted.pink.segment {
background-color: @pink !important;
color: @white !important;
}
/* Brown */
.ui.brown.segment:not(.inverted) {
border-top: @coloredBorderSize solid @brown;
}
.ui.inverted.brown.segment {
background-color: @brown !important;
color: @white !important;
}
/* Grey */
.ui.grey.segment:not(.inverted) {
border-top: @coloredBorderSize solid @grey;
}
.ui.inverted.grey.segment {
background-color: @grey !important;
color: @white !important;
}
/* Black */
.ui.black.segment:not(.inverted) {
border-top: @coloredBorderSize solid @black;
}
.ui.inverted.black.segment {
background-color: @black !important;
color: @white !important;
}
@ -475,11 +620,11 @@
.ui.floated.segment,
.ui[class*="left floated"].segment {
float: left;
margin-right: @margin;
margin-right: @floatedDistance;
}
.ui[class*="right floated"].segment {
float: right;
margin-left: @margin;
margin-left: @floatedDistance;
}
@ -489,45 +634,46 @@
.ui.inverted.segment {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.ui.inverted.segment,
.ui.primary.inverted.segment {
background: @invertedBackground;
color: @invertedTextColor;
}
/* Nested */
.ui.inverted.segment .segment {
color: @textColor;
}
.ui.inverted.segment .inverted.segment {
color: @white;
}
.ui.inverted.segment,
.ui.primary.inverted.segment {
background-color: @black;
color: @white;
color: @invertedTextColor;
}
.ui.inverted.block.segment,
/* Attached */
.ui.inverted.attached.segment {
border-color: @solidWhiteBorderColor;
}
/*-------------------
Ordinality
Emphasis
--------------------*/
/* Secondary */
.ui.secondary.segment {
background: @secondaryBackground;
color: @secondaryColor;
}
.ui.tertiary.segment {
background: @tertiaryBackground;
color: @textColor;
}
.ui.secondary.inverted.segment {
background: @secondaryInvertedBackground;
color: @secondaryInvertedColor;
}
/* Tertiary */
.ui.tertiary.segment {
background: @tertiaryBackground;
color: @tertiaryColor;
}
.ui.tertiary.inverted.segment {
background: @tertiaryInvertedBackground;
color: @tertiaryInvertedColor;
@ -538,26 +684,27 @@
Attached
--------------------*/
.ui.segment.attached {
/* Middle */
.ui.attached.segment {
top: 0px;
bottom: 0px;
border-radius: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
border-radius: 0px;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.segment.attached + .ui.segment.attached:not(.top) {
.ui.attached + .ui.attached.segment:not(.top) {
border-top: none;
}
/* Top */
.ui[class*="top attached"].segment {
top: @attachedTopOffset;
bottom: 0px;
margin-top: @margin;
margin-bottom: 0em;
top: @attachedTopOffset;
margin-top: @verticalMargin;
border-radius: @borderRadius @borderRadius 0em 0em;
}
.ui.segment[class*="top attached"]:first-child {
@ -566,10 +713,10 @@
/* Bottom */
.ui.segment[class*="bottom attached"] {
top: @attachedBottomOffset;
bottom: 0px;
margin-top: 0em;
margin-bottom: @margin;
top: @attachedBottomOffset;
margin-bottom: @verticalMargin;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
@ -577,53 +724,4 @@
margin-bottom: 0em;
}
/*-------------------
Groups
--------------------*/
.ui.segments {
margin: @margin 0em;
}
.ui.segments:first-child {
margin-top: 0em;
}
.ui.segments:last-child {
margin-bottom: 0em;
}
.ui.segments > .segment {
top: 0px;
bottom: 0px;
margin: 0em @attachedHorizontalOffset;
width: @attachedWidth;
max-width: @attachedWidth;
border-radius: 0px;
box-shadow: @attachedBoxShadow;
border: @attachedBorder;
}
.ui.segments > .segment:not(:first-child) {
border-top: none;
}
/* Top */
.ui.segments > .segment:first-child {
margin-top: 0em;
bottom: 0px;
margin-bottom: 0em;
top: @attachedTopOffset;
border-radius: @borderRadius @borderRadius 0em 0em;
}
/* Bottom */
.ui.segments > .segment:last-child {
bottom: 0px;
margin-top: 0em;
margin-bottom: 0em;
top: @attachedBottomOffset;
box-shadow: @attachedBottomBoxShadow;
border-radius: 0em 0em @borderRadius @borderRadius;
}
.loadUIOverrides();

241
web/semantic/src/definitions/elements/step.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -23,25 +23,61 @@
@import (multiple) '../../theme.config';
/*******************************
Plural
*******************************/
.ui.steps {
display: inline-flex;
flex-direction: row;
align-items: stretch;
margin: @stepMargin;
background: @stepsBackground;
box-shadow: @stepsBoxShadow;
line-height: @lineHeight;
border-radius: @stepsBorderRadius;
border: @stepsBorder;
}
/* First Steps */
.ui.steps:first-child {
margin-top: 0em;
}
/* Last Steps */
.ui.steps:last-child {
margin-bottom: 0em;
}
/*******************************
Singular
*******************************/
.ui.steps .step {
position: relative;
display: table-cell;
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
flex-direction: row;
vertical-align: middle;
align-items: center;
justify-content: @justifyContent;
margin: @verticalMargin @horizontalMargin;
padding: @verticalPadding @horizontalPadding @verticalPadding @leftPadding;
padding: @verticalPadding @horizontalPadding;
background: @background;
color: @textColor;
box-shadow: @boxShadow;
border-radius: @borderRadius;
border: @border;
border-right: @divider;
transition: @transition;
}
/* Arrow */
.ui.steps .step:after {
display: none;
position: absolute;
z-index: 2;
content: '';
@ -51,49 +87,33 @@
background-color: @arrowBackgroundColor;
width: @arrowSize;
height: @arrowSize;
border-bottom: 1px solid @arrowBorderColor;
border-right: 1px solid @arrowBorderColor;
border-style: solid;
border-color: @borderColor;
border-width: @arrowBorderWidth;
transition: @transition;
transform: translateY(-50%) translateX(50%) rotate(-45deg);
}
.ui.steps .step,
.ui.steps .step:after {
transition: @transition;
}
/*******************************
Plural
*******************************/
.ui.steps {
display: table;
table-layout: fixed;
background: @stepsBackground;
box-shadow: @stepsBoxShadow;
line-height: @lineHeight;
box-sizing: border-box;
border-radius: @stepsBorderRadius;
}
/* First Step */
.ui.steps .step:first-child {
padding-left: @horizontalPadding;
border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
}
/* Last Step */
.ui.steps .step:last-child {
border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
}
.ui.steps .step:only-child {
-webkit-border-radius: @stepsBorderRadius;
-moz-border-radius: @stepsBorderRadius;
border-radius: @stepsBorderRadius;
}
.ui.steps .step:last-child {
border-right: none;
margin-right: 0em;
}
.ui.steps .step:last-child:after {
display: none;
/* Only Step */
.ui.steps .step:only-child {
border-radius: @stepsBorderRadius;
}
@ -107,6 +127,9 @@
font-size: @titleFontSize;
font-weight: @titleFontWeight;
}
.ui.steps .step > .title {
width: 100%;
}
/* Description */
.ui.steps .step .description {
@ -114,20 +137,32 @@
font-size: @descriptionFontSize;
color: @descriptionColor;
}
.ui.steps .step > .description {
width: 100%;
}
.ui.steps .step .title ~ .description {
margin-top: @descriptionDistance;
}
/* Icon */
.ui.steps .step > .icon {
line-height: 1;
font-size: @iconSize;
margin: 0em @iconDistance 0em 0em;
}
.ui.steps .step > .icon,
.ui.steps .step > .icon ~ .content {
display: table-cell;
vertical-align: @iconVerticalAlign;
display: block;
flex: 0 1 auto;
align-self: @iconAlign;
}
.ui.steps .step > .icon {
font-size: @iconSize;
margin: 0em;
padding-right: @iconDistance;
.ui.steps .step > .icon ~ .content {
flex-grow: 1 0 auto;
}
/* Horizontal Icon */
.ui.steps:not(.vertical) .step > .icon {
width: auto;
}
/* Link */
@ -148,19 +183,21 @@
counter-reset: ordered;
}
.ui.ordered.steps .step:before {
display: table-cell;
display: block;
position: static;
text-align: center;
content: counters(ordered, ".");
vertical-align: @iconVerticalAlign;
padding-right: @iconDistance;
align-self: @iconAlign;
margin-right: @iconDistance;
font-size: @iconSize;
counter-increment: ordered;
font-family: @orderedFontFamily;
font-weight: @orderedFontWeight;
}
.ui.ordered.steps .step > * {
display: table-cell;
vertical-align: @iconVerticalAlign;
display: block;
align-self: @iconAlign;
}
@ -169,30 +206,51 @@
---------------*/
.ui.vertical.steps {
display: inline-block;
display: inline-flex;
flex-direction: column;
overflow: visible;
}
.ui.vertical.steps .step {
display: block;
justify-content: flex-start;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;
border-right: none;
border-bottom: @verticalDivider;
}
.ui.vertical.steps .step:first-child {
padding: @verticalPadding @horizontalPadding;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
}
.ui.vertical.steps .step:last-child {
border-bottom: none;
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
}
.ui.vertical.steps .step:only-child {
border-radius: @stepsBorderRadius;
}
/* Arrow */
.ui.vertical.steps .step:after {
display: none;
}
.ui.vertical.steps .step:after {
top: @verticalArrowTopOffset;
right: @verticalArrowRightOffset;
border-width: @verticalArrowBorderWidth;
}
/* Active Arrow */
.ui.vertical.steps .step:after {
display: @verticalArrowDisplay;
}
.ui.vertical.steps .active.step:after {
display: block;
display: @verticalActiveArrowDisplay;
}
.ui.vertical.steps .step:last-child:after {
display: @verticalLastArrowDisplay;
}
.ui.vertical.steps .active.step:last-child:after {
display: @verticalActiveLastArrowDisplay;
}
@ -204,10 +262,13 @@
@media only screen and (max-width: (@largestMobileScreen)) {
.ui.steps {
display: inline-flex;
overflow: visible;
flex-direction: column;
}
.ui.steps .step {
display: block;
width: 100% !important;
flex-direction: column;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;
}
@ -221,7 +282,18 @@
/* Arrow */
.ui.steps .step:after {
display: none;
display: none !important;
}
/* Content */
.ui.steps .step .content {
text-align: center;
}
/* Icon */
.ui.steps .step > .icon,
.ui.ordered.steps .step:before {
margin: 0em 0em @mobileIconDistance 0em;
}
}
@ -264,6 +336,20 @@
color: @activeIconColor;
}
/* Active Arrow */
.ui.steps .step:after {
display: @arrowDisplay;
}
.ui.steps .active.step:after {
display: @activeArrowDisplay;
}
.ui.steps .step:last-child:after {
display: @lastArrowDisplay;
}
.ui.steps .active.step:last-child:after {
display: @activeLastArrowDisplay;
}
/* Active Hover */
.ui.steps .link.active.step:hover::after,
.ui.steps .link.active.step:hover,
@ -305,15 +391,18 @@
Stackable
---------------*/
/* Tablet Or Below */
@media only screen and (min-width: @computerBreakpoint) {
@media only screen and (max-width: @largestTabletScreen) {
.ui[class*="tablet stackable"].steps {
display: inline-flex;
overflow: visible;
flex-direction: column;
}
/* Steps */
.ui[class*="tablet stackable"].steps .step {
display: block;
flex-direction: column;
border-radius: @borderRadius;
padding: @verticalPadding @horizontalPadding;
}
@ -324,20 +413,32 @@
.ui[class*="tablet stackable"].steps .step:last-child {
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
}
/* Arrow */
.ui[class*="tablet stackable"].steps .step:after {
display: none;
display: none !important;
}
/* Content */
.ui[class*="tablet stackable"].steps .step .content {
text-align: center;
}
/* Icon */
.ui[class*="tablet stackable"].steps .step > .icon,
.ui[class*="tablet stackable"].ordered.steps .step:before {
margin: 0em 0em @mobileIconDistance 0em;
}
}
/*--------------
Fluid
---------------*/
/* Fluid */
.ui.fluid.steps {
display: flex;
width: 100%;
}
@ -346,26 +447,28 @@
---------------*/
/* Top */
.attached.ui.steps {
margin: @attachedTopMargin;
.ui.attached.steps {
width: @attachedWidth !important;
margin: 0em @attachedHorizontalOffset @attachedVerticalOffset;
max-width: @attachedWidth;
border-radius: @stepsBorderRadius @stepsBorderRadius 0em 0em;
}
.attached.ui.steps .step:first-child {
.ui.attached.steps .step:first-child {
border-radius: @stepsBorderRadius 0em 0em 0em;
}
.attached.ui.steps .step:last-child {
.ui.attached.steps .step:last-child {
border-radius: 0em @stepsBorderRadius 0em 0em;
}
/* Bottom */
.bottom.attached.ui.steps {
margin: @attachedBottomMargin;
.ui.bottom.attached.steps {
margin: @attachedVerticalOffset @attachedHorizontalOffset 0em;
border-radius: 0em 0em @stepsBorderRadius @stepsBorderRadius;
}
.bottom.attached.ui.steps .step:first-child {
.ui.bottom.attached.steps .step:first-child {
border-radius: 0em 0em 0em @stepsBorderRadius;
}
.bottom.attached.ui.steps .step:last-child {
.ui.bottom.attached.steps .step:last-child {
border-radius: 0em 0em @stepsBorderRadius 0em;
}
@ -383,6 +486,16 @@
.ui.eight.steps {
width: 100%;
}
.ui.one.steps > .step,
.ui.two.steps > .step,
.ui.three.steps > .step,
.ui.four.steps > .step,
.ui.five.steps > .step,
.ui.six.steps > .step,
.ui.seven.steps > .step,
.ui.eight.steps > .step {
flex-wrap: nowrap;
}
.ui.one.steps > .step {
width: 100%;
}

2
web/semantic/src/definitions/globals/reset.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

12
web/semantic/src/definitions/globals/site.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -81,7 +81,7 @@ $.site = $.fn.site = function(parameters) {
requestAnimationFrame: function() {
module.debug('Normalizing requestAnimationFrame');
if(window.requestAnimationFrame === undefined) {
module.debug('RequestAnimationFrame not available, normailizing event');
module.debug('RequestAnimationFrame not available, normalizing event');
window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
@ -320,7 +320,7 @@ $.site = $.fn.site = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -433,7 +433,7 @@ $.site.settings = {
},
debug : false,
verbose : true,
verbose : false,
performance : true,
modules: [
@ -442,6 +442,7 @@ $.site.settings = {
'checkbox',
'dimmer',
'dropdown',
'embed',
'form',
'modal',
'nag',
@ -453,7 +454,6 @@ $.site.settings = {
'sticky',
'tab',
'transition',
'video',
'visit',
'visibility'
],
@ -484,4 +484,4 @@ $.extend($.expr[ ":" ], {
});
})( jQuery, window , document );
})( jQuery, window, document );

7
web/semantic/src/definitions/globals/site.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -37,6 +37,7 @@ html {
body {
margin: 0px;
padding: 0px;
overflow-x: @pageOverflowX;
min-width: @pageMinWidth;
background: @pageBackground;
font-family: @pageFont;
@ -46,6 +47,8 @@ body {
font-smoothing: @fontSmoothing;
}
/*******************************
Headers
*******************************/
@ -121,8 +124,10 @@ a {
}
a:hover {
color: @linkHoverColor;
text-decoration: @linkHoverUnderline;
}
/*******************************
Highlighting
*******************************/

148
web/semantic/src/definitions/modules/accordion.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -63,7 +63,9 @@ $.fn.accordion = function(parameters) {
initialize: function() {
module.debug('Initializing', $module);
module.bind.events();
module.observeChanges();
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
@ -105,7 +107,7 @@ $.fn.accordion = function(parameters) {
events: function() {
module.debug('Binding delegated events');
$module
.on('click' + eventNamespace, selector.trigger, module.event.click)
.on(settings.on + eventNamespace, selector.trigger, module.event.click)
;
}
},
@ -153,54 +155,59 @@ $.fn.accordion = function(parameters) {
$activeContent = $activeTitle.next($content),
isAnimating = $activeContent.hasClass(className.animating),
isActive = $activeContent.hasClass(className.active),
isUnopen = (!isActive && !isAnimating)
isOpen = (isActive || isAnimating)
;
if(isUnopen) {
module.debug('Opening accordion content', $activeTitle);
if(settings.exclusive) {
module.closeOthers.call($activeTitle);
}
$activeTitle
.addClass(className.active)
;
$activeContent.addClass(className.animating);
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$activeContent
.children()
.transition({
animation : 'fade in',
queue : false,
useFailSafe : true,
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration
})
;
}
else {
$activeContent
.children()
.stop(true)
.animate({
opacity: 1
}, settings.duration, module.resetOpacity)
;
}
}
$activeContent
.stop(true)
.slideDown(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
.addClass(className.active)
;
module.reset.display.call(this);
settings.onOpen.call(this);
settings.onChange.call(this);
})
;
if(isOpen) {
module.debug('Accordion already open, skipping', $activeContent);
return;
}
module.debug('Opening accordion content', $activeTitle);
settings.onOpening.call($activeContent);
if(settings.exclusive) {
module.closeOthers.call($activeTitle);
}
$activeTitle
.addClass(className.active)
;
$activeContent
.stop(true, true)
.addClass(className.animating)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$activeContent
.children()
.transition({
animation : 'fade in',
queue : false,
useFailSafe : true,
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration
})
;
}
else {
$activeContent
.children()
.stop(true, true)
.animate({
opacity: 1
}, settings.duration, module.resetOpacity)
;
}
}
$activeContent
.slideDown(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
.addClass(className.active)
;
module.reset.display.call(this);
settings.onOpen.call(this);
settings.onChange.call(this);
})
;
},
close: function(query) {
@ -218,10 +225,12 @@ $.fn.accordion = function(parameters) {
;
if((isActive || isOpening) && !isClosing) {
module.debug('Closing accordion content', $activeContent);
settings.onClosing.call($activeContent);
$activeTitle
.removeClass(className.active)
;
$activeContent
.stop(true, true)
.addClass(className.animating)
;
if(settings.animateChildren) {
@ -241,7 +250,7 @@ $.fn.accordion = function(parameters) {
else {
$activeContent
.children()
.stop(true)
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
@ -249,7 +258,6 @@ $.fn.accordion = function(parameters) {
}
}
$activeContent
.stop(true)
.slideUp(settings.duration, settings.easing, function() {
$activeContent
.removeClass(className.animating)
@ -291,6 +299,10 @@ $.fn.accordion = function(parameters) {
$openTitles
.removeClass(className.active)
;
$openContents
.removeClass(className.animating)
.stop(true, true)
;
if(settings.animateChildren) {
if($.fn.transition !== undefined && $module.transition('is supported')) {
$openContents
@ -307,7 +319,7 @@ $.fn.accordion = function(parameters) {
else {
$openContents
.children()
.stop()
.stop(true, true)
.animate({
opacity: 0
}, settings.duration, module.resetOpacity)
@ -315,7 +327,6 @@ $.fn.accordion = function(parameters) {
}
}
$openContents
.stop()
.slideUp(settings.duration , settings.easing, function() {
$(this).removeClass(className.active);
module.reset.display.call(this);
@ -422,7 +433,7 @@ $.fn.accordion = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -534,20 +545,27 @@ $.fn.accordion.settings = {
namespace : 'accordion',
debug : false,
verbose : true,
verbose : false,
performance : true,
exclusive : true,
collapsible : true,
closeNested : false,
animateChildren : true,
on : 'click', // event on title that opens accordion
duration : 350,
easing : 'easeOutQuad',
observeChanges : true, // whether accordion should automatically refresh on DOM insertion
onOpen : function(){},
onClose : function(){},
onChange : function(){},
exclusive : true, // whether a single accordion content panel should be open at once
collapsible : true, // whether accordion content can be closed
closeNested : false, // whether nested content should be closed when a panel is closed
animateChildren : true, // whether children opacity should be animated
duration : 350, // duration of animation
easing : 'easeOutQuad', // easing equation for animation
onOpening : function(){}, // callback before open animation
onOpen : function(){}, // callback after open animation
onClosing : function(){}, // callback before closing animation
onClose : function(){}, // callback after closing animation
onChange : function(){}, // callback after closing or opening animation
error: {
method : 'The method you called is not defined'
@ -574,5 +592,5 @@ $.extend( $.easing, {
}
});
})( jQuery, window , document );
})( jQuery, window, document );

440
web/semantic/src/definitions/modules/accordion.less Normal file → Executable file
View file

@ -1,220 +1,220 @@
/*!
* # Semantic UI - Accordion
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'accordion';
@import (multiple) '../../theme.config';
/*******************************
Accordion
*******************************/
.ui.accordion,
.ui.accordion .accordion {
max-width: 100%;
font-size: @fontSize;
}
.ui.accordion .accordion {
margin: @childAccordionMargin;
padding: @childAccordionPadding;
}
/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
cursor: pointer;
}
/* Default Styling */
.ui.accordion .title:not(.ui) {
padding: @titlePadding;
font-family: @titleFont;
font-size: @titleFontSize;
color: @titleColor;
}
/* Content */
.ui.accordion .title ~ .content,
.ui.accordion .accordion .title ~ .content {
display: none;
}
/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
margin: @contentMargin;
padding: @contentPadding;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
padding-bottom: 0em;
}
/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
display: @iconDisplay;
float: @iconFloat;
opacity: @iconOpacity;
width: @iconWidth;
height: @iconHeight;
margin: @iconMargin;
padding: @iconPadding;
font-size: @iconFontSize;
transition: @iconTransition;
vertical-align: @iconVerticalAlign;
transform: @iconTransform;
}
/*--------------
Coupling
---------------*/
/* Menu */
.ui.accordion.menu .item .title {
display: block;
padding: @menuTitlePadding;
}
.ui.accordion.menu .item .title > .dropdown.icon {
float: @menuIconFloat;
margin: @menuIconMargin;
transform: @menuIconTransform;
}
/* Header */
.ui.accordion .ui.header .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
/*******************************
States
*******************************/
.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
transform: @activeIconTransform;
}
.ui.accordion.menu .item .active.title > .dropdown.icon {
transform: @activeIconTransform;
}
/*******************************
Types
*******************************/
/*--------------
Styled
---------------*/
.ui.styled.accordion {
width: @styledWidth;
}
.ui.styled.accordion,
.ui.styled.accordion .accordion {
border-radius: @styledBorderRadius;
background: @styledBackground;
box-shadow: @styledBoxShadow;
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
margin: @styledTitleMargin;
padding: @styledTitlePadding;
color: @styledTitleColor;
font-weight: @styledTitleFontWeight;
border-top: @styledTitleBorder;
transition: @styledTitleTransition;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
border-top: none;
}
/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
margin: @styledContentMargin;
padding: @styledContentPadding;
}
.ui.styled.accordion .accordion .content {
padding: @styledChildContentMargin;
padding: @styledChildContentPadding;
}
/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: @styledTitleHoverBackground;
color: @styledTitleHoverColor;
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: @styledHoverChildTitleBackground;
color: @styledHoverChildTitleColor;
}
/* Active */
.ui.styled.accordion .active.title {
background: @styledActiveTitleBackground;
color: @styledActiveTitleColor;
}
.ui.styled.accordion .accordion .active.title {
background: @styledActiveChildTitleBackground;
color: @styledActiveChildTitleColor;
}
/*******************************
States
*******************************/
/*--------------
Active
---------------*/
.ui.accordion .active.content,
.ui.accordion .accordion .active.content {
display: block;
}
/*******************************
Variations
*******************************/
/*--------------
Fluid
---------------*/
.ui.fluid.accordion,
.ui.fluid.accordion .accordion {
width: 100%;
}
/*--------------
Inverted
---------------*/
.ui.inverted.accordion .title:not(.ui) {
color: @invertedTitleColor;
}
.loadUIOverrides();
/*!
* # Semantic UI - Accordion
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'accordion';
@import (multiple) '../../theme.config';
/*******************************
Accordion
*******************************/
.ui.accordion,
.ui.accordion .accordion {
max-width: 100%;
}
.ui.accordion .accordion {
margin: @childAccordionMargin;
padding: @childAccordionPadding;
}
/* Title */
.ui.accordion .title,
.ui.accordion .accordion .title {
cursor: pointer;
}
/* Default Styling */
.ui.accordion .title:not(.ui) {
padding: @titlePadding;
font-family: @titleFont;
font-size: @titleFontSize;
color: @titleColor;
}
/* Content */
.ui.accordion .title ~ .content,
.ui.accordion .accordion .title ~ .content {
display: none;
}
/* Default Styling */
.ui.accordion:not(.styled) .title ~ .content:not(.ui),
.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
margin: @contentMargin;
padding: @contentPadding;
}
.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
padding-bottom: 0em;
}
/* Arrow */
.ui.accordion .title .dropdown.icon,
.ui.accordion .accordion .title .dropdown.icon {
display: @iconDisplay;
float: @iconFloat;
opacity: @iconOpacity;
width: @iconWidth;
height: @iconHeight;
margin: @iconMargin;
padding: @iconPadding;
font-size: @iconFontSize;
transition: @iconTransition;
vertical-align: @iconVerticalAlign;
transform: @iconTransform;
}
/*--------------
Coupling
---------------*/
/* Menu */
.ui.accordion.menu .item .title {
display: block;
padding: @menuTitlePadding;
}
.ui.accordion.menu .item .title > .dropdown.icon {
float: @menuIconFloat;
margin: @menuIconMargin;
transform: @menuIconTransform;
}
/* Header */
.ui.accordion .ui.header .dropdown.icon {
font-size: @iconFontSize;
margin: @iconMargin;
}
/*******************************
States
*******************************/
.ui.accordion .active.title .dropdown.icon,
.ui.accordion .accordion .active.title .dropdown.icon {
transform: @activeIconTransform;
}
.ui.accordion.menu .item .active.title > .dropdown.icon {
transform: @activeIconTransform;
}
/*******************************
Types
*******************************/
/*--------------
Styled
---------------*/
.ui.styled.accordion {
width: @styledWidth;
}
.ui.styled.accordion,
.ui.styled.accordion .accordion {
border-radius: @styledBorderRadius;
background: @styledBackground;
box-shadow: @styledBoxShadow;
}
.ui.styled.accordion .title,
.ui.styled.accordion .accordion .title {
margin: @styledTitleMargin;
padding: @styledTitlePadding;
color: @styledTitleColor;
font-weight: @styledTitleFontWeight;
border-top: @styledTitleBorder;
transition: @styledTitleTransition;
}
.ui.styled.accordion > .title:first-child,
.ui.styled.accordion .accordion .title:first-child {
border-top: none;
}
/* Content */
.ui.styled.accordion .content,
.ui.styled.accordion .accordion .content {
margin: @styledContentMargin;
padding: @styledContentPadding;
}
.ui.styled.accordion .accordion .content {
padding: @styledChildContentMargin;
padding: @styledChildContentPadding;
}
/* Hover */
.ui.styled.accordion .title:hover,
.ui.styled.accordion .active.title,
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: @styledTitleHoverBackground;
color: @styledTitleHoverColor;
}
.ui.styled.accordion .accordion .title:hover,
.ui.styled.accordion .accordion .active.title {
background: @styledHoverChildTitleBackground;
color: @styledHoverChildTitleColor;
}
/* Active */
.ui.styled.accordion .active.title {
background: @styledActiveTitleBackground;
color: @styledActiveTitleColor;
}
.ui.styled.accordion .accordion .active.title {
background: @styledActiveChildTitleBackground;
color: @styledActiveChildTitleColor;
}
/*******************************
States
*******************************/
/*--------------
Active
---------------*/
.ui.accordion .active.content,
.ui.accordion .accordion .active.content {
display: block;
}
/*******************************
Variations
*******************************/
/*--------------
Fluid
---------------*/
.ui.fluid.accordion,
.ui.fluid.accordion .accordion {
width: 100%;
}
/*--------------
Inverted
---------------*/
.ui.inverted.accordion .title:not(.ui) {
color: @invertedTitleColor;
}
.loadUIOverrides();

528
web/semantic/src/definitions/modules/checkbox.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -41,9 +41,12 @@ $.fn.checkbox = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
$label = $(this).find(selector.label).first(),
$input = $(this).find(selector.input),
$label = $(this).children(selector.label),
$input = $(this).children(selector.input),
input = $input[0],
initialLoad = false,
shortcutPressed = false,
instance = $module.data(moduleNamespace),
observer,
@ -57,23 +60,14 @@ $.fn.checkbox = function(parameters) {
module.verbose('Initializing checkbox', settings);
module.create.label();
module.add.events();
module.bind.events();
module.set.tabbable();
module.hide.input();
if( module.is.checked() ) {
module.set.checked();
if(settings.fireOnInit) {
settings.onChecked.call($input.get());
}
}
else {
module.remove.checked();
if(settings.fireOnInit) {
settings.onUnchecked.call($input.get());
}
}
module.observeChanges();
module.instantiate();
module.setup();
},
instantiate: function() {
@ -86,16 +80,55 @@ $.fn.checkbox = function(parameters) {
destroy: function() {
module.verbose('Destroying module');
module.remove.events();
$module
.removeData(moduleNamespace)
;
module.unbind.events();
module.show.input();
$module.removeData(moduleNamespace);
},
fix: {
reference: function() {
if( $module.is(selector.input) ) {
module.debug('Behavior called on <input> adjusting invoked element');
$module = $module.closest(selector.checkbox);
module.refresh();
}
}
},
setup: function() {
module.set.initialLoad();
if( module.is.indeterminate() ) {
module.debug('Initial value is indeterminate');
module.indeterminate();
}
else if( module.is.checked() ) {
module.debug('Initial value is checked');
module.check();
}
else {
module.debug('Initial value is unchecked');
module.uncheck();
}
module.remove.initialLoad();
},
refresh: function() {
$module = $(this);
$label = $(this).find(selector.label).first();
$input = $(this).find(selector.input);
$label = $module.children(selector.label);
$input = $module.children(selector.input);
input = $input[0];
},
hide: {
input: function() {
module.verbose('Modfying <input> z-index to be unselectable');
$input.addClass(className.hidden);
}
},
show: {
input: function() {
module.verbose('Modfying <input> z-index to be selectable');
$input.removeClass(className.hidden);
}
},
observeChanges: function() {
@ -132,6 +165,22 @@ $.fn.checkbox = function(parameters) {
},
event: {
click: function(event) {
var
$target = $(event.target)
;
if( $target.is(selector.input) ) {
module.verbose('Using default check action on initialized checkbox');
return;
}
if( $target.is(selector.link) ) {
module.debug('Clicking link inside checkbox, skipping toggle');
return;
}
module.toggle();
$input.focus();
event.preventDefault();
},
keydown: function(event) {
var
key = event.which,
@ -141,35 +190,195 @@ $.fn.checkbox = function(parameters) {
escape : 27
}
;
if( key == keyCode.escape) {
if(key == keyCode.escape) {
module.verbose('Escape key pressed blurring field');
$module
.blur()
;
$input.blur();
shortcutPressed = true;
}
if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
module.verbose('Enter key pressed, toggling checkbox');
module.toggle.call(this);
else if(!event.ctrlKey && ( key == keyCode.space || key == keyCode.enter) ) {
module.verbose('Enter/space key pressed, toggling checkbox');
module.toggle();
shortcutPressed = true;
}
else {
shortcutPressed = false;
}
},
keyup: function(event) {
if(shortcutPressed) {
event.preventDefault();
}
}
},
check: function() {
if( !module.should.allowCheck() ) {
return;
}
module.debug('Checking checkbox', $input);
module.set.checked();
if( !module.should.ignoreCallbacks() ) {
settings.onChecked.call(input);
settings.onChange.call(input);
}
},
uncheck: function() {
if( !module.should.allowUncheck() ) {
return;
}
module.debug('Unchecking checkbox');
module.set.unchecked();
if( !module.should.ignoreCallbacks() ) {
settings.onUnchecked.call(input);
settings.onChange.call(input);
}
},
indeterminate: function() {
if( module.should.allowIndeterminate() ) {
module.debug('Checkbox is already indeterminate');
return;
}
module.debug('Making checkbox indeterminate');
module.set.indeterminate();
if( !module.should.ignoreCallbacks() ) {
settings.onIndeterminate.call(input);
settings.onChange.call(input);
}
},
determinate: function() {
if( module.should.allowDeterminate() ) {
module.debug('Checkbox is already determinate');
return;
}
module.debug('Making checkbox determinate');
module.set.determinate();
if( !module.should.ignoreCallbacks() ) {
settings.onDeterminate.call(input);
settings.onChange.call(input);
}
},
enable: function() {
if( module.is.enabled() ) {
module.debug('Checkbox is already enabled');
return;
}
module.debug('Enabling checkbox');
module.set.enabled();
settings.onEnabled.call(input);
},
disable: function() {
if( module.is.disabled() ) {
module.debug('Checkbox is already disabled');
return;
}
module.debug('Disabling checkbox');
module.set.disabled();
settings.onDisabled.call(input);
},
get: {
radios: function() {
var
name = module.get.name()
;
return $('input[name="' + name + '"]').closest(selector.checkbox);
},
otherRadios: function() {
return module.get.radios().not($module);
},
name: function() {
return $input.attr('name');
}
},
is: {
initialLoad: function() {
return initialLoad;
},
radio: function() {
return $module.hasClass(className.radio);
return ($input.hasClass(className.radio) || $input.attr('type') == 'radio');
},
indeterminate: function() {
return $input.prop('indeterminate') !== undefined && $input.prop('indeterminate');
},
checked: function() {
return $input.prop('checked') !== undefined && $input.prop('checked');
},
disabled: function() {
return $input.prop('disabled') !== undefined && $input.prop('disabled');
},
enabled: function() {
return !module.is.disabled();
},
determinate: function() {
return !module.is.indeterminate();
},
unchecked: function() {
return !module.is.checked();
}
},
should: {
allowCheck: function() {
if(module.is.determinate() && module.is.checked() && !module.should.forceCallbacks() ) {
module.debug('Should not allow check, checkbox is already checked');
return false;
}
if(settings.beforeChecked.apply(input) === false) {
module.debug('Should not allow check, beforeChecked cancelled');
return false;
}
return true;
},
allowUncheck: function() {
if(module.is.determinate() && module.is.unchecked() && !module.should.forceCallbacks() ) {
module.debug('Should not allow uncheck, checkbox is already unchecked');
return false;
}
if(settings.beforeUnchecked.apply(input) === false) {
module.debug('Should not allow uncheck, beforeUnchecked cancelled');
return false;
}
return true;
},
allowIndeterminate: function() {
if(module.is.indeterminate() && !module.should.forceCallbacks() ) {
module.debug('Should not allow indeterminate, checkbox is already indeterminate');
return false;
}
if(settings.beforeIndeterminate.apply(input) === false) {
module.debug('Should not allow indeterminate, beforeIndeterminate cancelled');
return false;
}
return true;
},
allowDeterminate: function() {
if(module.is.determinate() && !module.should.forceCallbacks() ) {
module.debug('Should not allow determinate, checkbox is already determinate');
return false;
}
if(settings.beforeDeterminate.apply(input) === false) {
module.debug('Should not allow determinate, beforeDeterminate cancelled');
return false;
}
return true;
},
forceCallbacks: function() {
return (module.is.initialLoad() && settings.fireOnInit);
},
ignoreCallbacks: function() {
return (initialLoad && !settings.fireOnInit);
}
},
can: {
change: function() {
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') || $input.prop('readonly') );
},
uncheck: function() {
return (typeof settings.uncheckable === 'boolean')
@ -180,18 +389,132 @@ $.fn.checkbox = function(parameters) {
},
set: {
checked: function() {
$module.addClass(className.checked);
initialLoad: function() {
initialLoad = true;
},
tab: function() {
checked: function() {
module.verbose('Setting class to checked');
$module
.removeClass(className.indeterminate)
.addClass(className.checked)
;
if( module.is.radio() ) {
module.uncheckOthers();
}
if(!module.is.indeterminate() && module.is.checked()) {
module.debug('Input is already checked, skipping input property change');
return;
}
module.verbose('Setting state to checked', input);
$input
.prop('indeterminate', false)
.prop('checked', true)
;
module.trigger.change();
},
unchecked: function() {
module.verbose('Removing checked class');
$module
.removeClass(className.indeterminate)
.removeClass(className.checked)
;
if(!module.is.indeterminate() && module.is.unchecked() ) {
module.debug('Input is already unchecked');
return;
}
module.debug('Setting state to unchecked');
$input
.prop('indeterminate', false)
.prop('checked', false)
;
module.trigger.change();
},
indeterminate: function() {
module.verbose('Setting class to indeterminate');
$module
.addClass(className.indeterminate)
;
if( module.is.indeterminate() ) {
module.debug('Input is already indeterminate, skipping input property change');
return;
}
module.debug('Setting state to indeterminate');
$input
.prop('indeterminate', true)
;
module.trigger.change();
},
determinate: function() {
module.verbose('Removing indeterminate class');
$module
.removeClass(className.indeterminate)
;
if( module.is.determinate() ) {
module.debug('Input is already determinate, skipping input property change');
return;
}
module.debug('Setting state to determinate');
$input
.prop('indeterminate', false)
;
},
disabled: function() {
module.verbose('Setting class to disabled');
$module
.addClass(className.disabled)
;
if( module.is.disabled() ) {
module.debug('Input is already disabled, skipping input property change');
return;
}
module.debug('Setting state to disabled');
$input
.prop('disabled', 'disabled')
;
module.trigger.change();
},
enabled: function() {
module.verbose('Removing disabled class');
$module.removeClass(className.disabled);
if( module.is.enabled() ) {
module.debug('Input is already enabled, skipping input property change');
return;
}
module.debug('Setting state to enabled');
$input
.prop('disabled', false)
;
module.trigger.change();
},
tabbable: function() {
module.verbose('Adding tabindex to checkbox');
if( $input.attr('tabindex') === undefined) {
$input
.attr('tabindex', 0)
;
$input.attr('tabindex', 0);
}
}
},
remove: {
initialLoad: function() {
initialLoad = false;
}
},
trigger: {
change: function() {
var
events = document.createEvent('HTMLEvents'),
inputElement = $input[0]
;
if(inputElement) {
module.verbose('Triggering native change event');
events.initEvent('change', true, false);
inputElement.dispatchEvent(events);
}
}
},
create: {
label: function() {
if($input.prevAll(selector.label).length > 0) {
@ -211,84 +534,47 @@ $.fn.checkbox = function(parameters) {
}
},
add: {
bind: {
events: function() {
module.verbose('Attaching checkbox events');
$module
.on('click' + eventNamespace, module.toggle)
.on('click' + eventNamespace, module.event.click)
.on('keydown' + eventNamespace, selector.input, module.event.keydown)
.on('keyup' + eventNamespace, selector.input, module.event.keyup)
;
}
},
remove: {
checked: function() {
$module.removeClass(className.checked);
},
unbind: {
events: function() {
module.debug('Removing events');
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
$input
.off(eventNamespace, module.event.keydown)
;
$label
.off(eventNamespace)
;
}
},
enable: function() {
module.debug('Enabling checkbox functionality');
$module.removeClass(className.disabled);
$input.prop('disabled', false);
settings.onEnabled.call($input.get());
},
disable: function() {
module.debug('Disabling checkbox functionality');
$module.addClass(className.disabled);
$input.prop('disabled', 'disabled');
settings.onDisabled.call($input.get());
},
check: function() {
module.debug('Enabling checkbox', $input);
$input
.prop('checked', true)
.trigger('change')
uncheckOthers: function() {
var
$radios = module.get.otherRadios()
;
module.set.checked();
$input.trigger('blur');
settings.onChange.call($input.get());
settings.onChecked.call($input.get());
module.debug('Unchecking other radios', $radios);
$radios.removeClass(className.checked);
},
uncheck: function() {
module.debug('Disabling checkbox');
$input
.prop('checked', false)
.trigger('change')
;
module.remove.checked();
$input.trigger('blur');
settings.onChange.call($input.get());
settings.onUnchecked.call($input.get());
},
toggle: function(event) {
toggle: function() {
if( !module.can.change() ) {
console.log(module.can.change());
module.debug('Checkbox is read-only or disabled, ignoring toggle');
if(!module.is.radio()) {
module.debug('Checkbox is read-only or disabled, ignoring toggle');
}
return;
}
module.verbose('Determining new checkbox state');
if( module.is.unchecked() ) {
if( module.is.indeterminate() || module.is.unchecked() ) {
module.debug('Currently unchecked');
module.check();
}
else if( module.is.checked() && module.can.uncheck() ) {
module.debug('Currently checked');
module.uncheck();
}
},
@ -361,7 +647,7 @@ $.fn.checkbox = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -471,39 +757,53 @@ $.fn.checkbox = function(parameters) {
$.fn.checkbox.settings = {
name : 'Checkbox',
namespace : 'checkbox',
name : 'Checkbox',
namespace : 'checkbox',
debug : false,
verbose : true,
performance : true,
debug : false,
verbose : true,
performance : true,
// delegated event context
uncheckable : 'auto',
fireOnInit : true,
uncheckable : 'auto',
fireOnInit : false,
onChange : function(){},
onChecked : function(){},
onUnchecked : function(){},
onEnabled : function(){},
onDisabled : function(){},
onChange : function(){},
className : {
checked : 'checked',
disabled : 'disabled',
radio : 'radio',
readOnly : 'read-only'
beforeChecked : function(){},
beforeUnchecked : function(){},
beforeDeterminate : function(){},
beforeIndeterminate : function(){},
onChecked : function(){},
onUnchecked : function(){},
onDeterminate : function() {},
onIndeterminate : function() {},
onEnable : function(){},
onDisable : function(){},
className : {
checked : 'checked',
indeterminate : 'indeterminate',
disabled : 'disabled',
hidden : 'hidden',
radio : 'radio',
readOnly : 'read-only'
},
error : {
method : 'The method you called is not defined'
method : 'The method you called is not defined'
},
selector : {
input : 'input[type="checkbox"], input[type="radio"]',
label : 'label'
checkbox : '.ui.checkbox',
label : 'label, .box',
input : 'input[type="checkbox"], input[type="radio"]',
link : 'a[href]'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

366
web/semantic/src/definitions/modules/checkbox.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -30,25 +30,29 @@
.ui.checkbox {
position: relative;
display: inline-block;
backface-visibility: hidden;
outline: none;
vertical-align: baseline;
font-style: normal;
min-height: @checkboxSize;
font-size: 1rem;
font-size: @medium;
line-height: @checkboxLineHeight;
min-width: @checkboxSize;
backface-visibility: hidden;
outline: none;
vertical-align: middle;
}
/* HTML Checkbox */
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
opacity: 0 !important;
outline: none;
z-index: -1;
z-index: 3;
width: @checkboxSize;
height: @checkboxSize;
}
@ -59,24 +63,22 @@
.ui.checkbox .box,
.ui.checkbox label {
cursor: auto;
position: relative;
display: block;
cursor: pointer;
padding-left: @labelPadding;
padding-left: @labelDistance;
outline: none;
}
.ui.checkbox label {
font-size: @fontSize;
font-size: @labelFontSize;
}
.ui.checkbox .box:before,
.ui.checkbox label:before {
position: absolute;
top: 0px;
left: 0px;
line-height: 1;
width: @checkboxSize;
height: @checkboxSize;
top: 0em;
left: 0em;
content: '';
background: @checkboxBackground;
@ -93,16 +95,16 @@
.ui.checkbox .box:after,
.ui.checkbox label:after {
position: absolute;
font-size: @checkboxCheckFontSize;
top: @checkboxCheckTop;
left: @checkboxCheckLeft;
line-height: @checkboxSize;
width: @checkboxSize;
height: @checkboxSize;
width: @checkboxCheckSize;
height: @checkboxCheckSize;
text-align: center;
opacity: 0;
color: @checkboxColor;
transition: all 0.1s ease;
transition: @checkboxTransition;
}
/*--------------
@ -112,10 +114,8 @@
/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
cursor: pointer;
color: @labelColor;
transition: color 0.2s ease;
user-select: none;
transition: @labelTransition;
}
/* Outside */
@ -136,7 +136,7 @@
.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
background: @checkboxHoverBackground;
border: @checkboxHoverBorder;
border-color: @checkboxHoverBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
@ -149,41 +149,82 @@
.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
background: @checkboxSelectedBackground;
border: 1px solid @checkboxSelectedBorder;
background: @checkboxPressedBackground;
border-color: @checkboxPressedBorderColor;
}
.ui.checkbox input[type="checkbox"]:active ~ label,
.ui.checkbox input[type="radio"]:active ~ label {
color: @labelSelectedColor;
.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
color: @checkboxPressedColor;
}
.ui.checkbox input:active ~ label {
color: @labelPressedColor;
}
/*--------------
Focus
Focus
---------------*/
.ui.checkbox input[type="checkbox"]:focus ~ .box:before,
.ui.checkbox input[type="checkbox"]:focus ~ label:before,
.ui.checkbox input[type="radio"]:focus ~ .box:before,
.ui.checkbox input[type="radio"]:focus ~ label:before {
background: @checkboxSelectedBackground;
border: 1px solid @checkboxSelectedBorder;
.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
background: @checkboxFocusBackground;
border-color: @checkboxFocusBorderColor;
}
.ui.checkbox input[type="checkbox"]:focus ~ label,
.ui.checkbox input[type="radio"]:focus ~ label {
color: @labelSelectedColor;
.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
color: @checkboxFocusCheckColor;
}
.ui.checkbox input:focus ~ label {
color: @labelFocusColor;
}
/*--------------
Active
---------------*/
.ui.checkbox input[type="checkbox"]:checked ~ .box:after,
.ui.checkbox input[type="checkbox"]:checked ~ label:after,
.ui.checkbox input[type="radio"]:checked ~ .box:after,
.ui.checkbox input[type="radio"]:checked ~ label:after {
opacity: 1;
.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
background: @checkboxActiveBackground;
border-color: @checkboxActiveBorderColor;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
opacity: @checkboxActiveCheckOpacity;
color: @checkboxActiveCheckColor;
}
/*--------------
Indeterminate
---------------*/
.ui.checkbox input:indeterminate ~ .box:before,
.ui.checkbox input:indeterminate ~ label:before {
background: @checkboxIndeterminateBackground;
border-color: @checkboxIndeterminateBorderColor;
}
.ui.checkbox input:indeterminate ~ .box:after,
.ui.checkbox input:indeterminate ~ label:after {
opacity: @checkboxIndeterminateCheckOpacity;
color: @checkboxIndeterminateCheckColor;
}
/*--------------
Active Focus
---------------*/
.ui.checkbox input:indeterminate:focus ~ .box:before,
.ui.checkbox input:indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before {
background: @checkboxActiveFocusBackground;
border-color: @checkboxActiveFocusBorderColor;
}
.ui.checkbox input:indeterminate:focus ~ .box:after,
.ui.checkbox input:indeterminate:focus ~ label:after,
.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
color: @checkboxActiveFocusCheckColor;
}
/*--------------
Read-Only
@ -201,15 +242,29 @@
.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[type="checkbox"][disabled] ~ .box:after,
.ui.checkbox input[type="checkbox"][disabled] ~ label,
.ui.checkbox input[type="radio"][disabled] ~ .box:after,
.ui.checkbox input[type="radio"][disabled] ~ label {
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
cursor: default;
opacity: @disabledCheckboxOpacity;
color: @disabledCheckboxLabelColor;
}
/*--------------
Hidden
---------------*/
/* Initialized checkbox moves input below element
to prevent manually triggering */
.ui.checkbox input.hidden {
z-index: -1;
}
/* Selectable Label */
.ui.checkbox input.hidden + label {
cursor: pointer;
user-select: none;
}
/*******************************
Types
@ -221,51 +276,100 @@
---------------*/
.ui.radio.checkbox {
min-height: @checkboxRadioSize;
min-height: @radioSize;
}
.ui.radio.checkbox .box,
.ui.radio.checkbox label {
padding-left: @radioLabelDistance;
}
/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
width: @checkboxRadioSize;
height: @checkboxRadioSize;
border-radius: @circularRadius;
top: @checkboxRadioTop;
left: @checkboxRadioLeft;
content: '';
transform: none;
width: @radioSize;
height: @radioSize;
border-radius: @circularRadius;
top: @radioTop;
left: @radioLeft;
}
/* Circle */
/* Bullet */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
border: none;
width: @checkboxRadioSize;
height: @checkboxRadioSize;
line-height: @checkboxRadioSize;
top: @checkboxRadioTop;
left: @checkboxRadioLeft;
font-size: @checkboxRadioCircleSize;
content: '' !important;
width: @radioSize;
height: @radioSize;
line-height: @radioSize;
}
/* Radio Checkbox */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
width: @checkboxRadioSize;
height: @checkboxRadioSize;
border-radius: @checkboxBulletRadius;
transform: scale(@checkboxBulletScale);
background-color: @checkboxBulletColor;
top: @bulletTop;
left: @bulletLeft;
width: @radioSize;
height: @radioSize;
border-radius: @bulletRadius;
transform: scale(@bulletScale);
background-color: @bulletColor;
}
/* Focus */
.ui.radio.checkbox input:focus ~ .box:before,
.ui.radio.checkbox input:focus ~ label:before {
background-color: @radioFocusBackground;
}
.ui.radio.checkbox input:focus ~ .box:after,
.ui.radio.checkbox input:focus ~ label:after {
background-color: @radioFocusBulletColor;
}
/* Indeterminate */
.ui.radio.checkbox input:indeterminate ~ .box:after,
.ui.radio.checkbox input:indeterminate ~ label:after {
opacity: 0;
}
/* Active */
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
background-color: @radioActiveBackground;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
background-color: @radioActiveBulletColor;
}
/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
background-color: @radioActiveFocusBackground;
}
.ui.radio.checkbox input:focus:checked ~ .box:after,
.ui.radio.checkbox input:focus:checked ~ label:after {
background-color: @radioActiveFocusBulletColor;
}
/*--------------
Slider
---------------*/
.ui.slider.checkbox {
cursor: pointer;
min-height: @sliderHeight;
}
/* Input */
.ui.slider.checkbox input {
width: @sliderWidth;
height: @sliderHeight;
}
/* Label */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
padding-left: @sliderLabelDistance;
@ -276,15 +380,15 @@
/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
cursor: pointer;
display: block;
position: absolute;
content: '';
top: @sliderLineVerticalOffset;
transform: none;
border: none !important;
left: 0em;
z-index: 1;
border: none !important;
top: @sliderLineVerticalOffset;
background-color: @sliderLineColor;
width: @sliderLineWidth;
@ -292,9 +396,8 @@
transform: none;
border-radius: @sliderLineRadius;
transition:
background 0.3s ease
;
transition: @sliderLineTransition;
}
/* Handle */
@ -302,7 +405,7 @@
.ui.slider.checkbox label:after {
background: @handleBackground;
position: absolute;
content: '';
content: '' !important;
opacity: 1;
z-index: 2;
@ -315,16 +418,12 @@
transform: none;
border-radius: @circularRadius;
transition:
left 0.3s ease 0s
;
transition: @sliderHandleTransition;
}
/* Focus */
.ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
.ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
.ui.slider.checkbox input[type="radio"]:focus ~ label:before {
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor;
border: none;
}
@ -340,35 +439,45 @@
}
/* Active */
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box,
.ui.slider.checkbox input[type="checkbox"]:checked ~ label,
.ui.slider.checkbox input[type="radio"]:checked ~ .box,
.ui.slider.checkbox input[type="radio"]:checked ~ label {
color: @sliderOnLabelColor;
.ui.slider.checkbox input:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
color: @sliderOnLabelColor !important;
}
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before,
.ui.slider.checkbox input[type="checkbox"]:checked ~ label:before,
.ui.slider.checkbox input[type="radio"]:checked ~ .box:before,
.ui.slider.checkbox input[type="radio"]:checked ~ label:before {
background-color: @sliderOnLineColor;
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
background-color: @sliderOnLineColor !important;
}
.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after,
.ui.slider.checkbox input[type="checkbox"]:checked ~ label:after,
.ui.slider.checkbox input[type="radio"]:checked ~ .box:after,
.ui.slider.checkbox input[type="radio"]:checked ~ label:after {
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
left: @sliderTravelDistance;
}
/* Active Focus */
.ui.slider.checkbox input:focus:checked ~ .box,
.ui.slider.checkbox input:focus:checked ~ label {
color: @sliderOnFocusLabelColor !important;
}
.ui.slider.checkbox input:focus:checked ~ .box:before,
.ui.slider.checkbox input:focus:checked ~ label:before {
background-color: @sliderOnFocusLineColor !important;
}
/*--------------
Toggle
---------------*/
.ui.toggle.checkbox {
cursor: pointer;
min-height: @toggleHeight;
}
/* Input */
.ui.toggle.checkbox input {
width: @toggleWidth;
height: @toggleHeight;
}
/* Label */
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
min-height: @toggleHandleSize;
@ -382,17 +491,16 @@
/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
cursor: pointer;
display: block;
position: absolute;
content: '';
top: @toggleLaneVerticalOffset;
z-index: 1;
transform: none;
border: none;
background-color: @neutralCheckbox;
top: @toggleLaneVerticalOffset;
background: @toggleLaneBackground;
width: @toggleLaneWidth;
height: @toggleLaneHeight;
border-radius: @toggleHandleRadius;
@ -403,7 +511,7 @@
.ui.toggle.checkbox label:after {
background: @handleBackground;
position: absolute;
content: '';
content: '' !important;
opacity: 1;
z-index: 2;
@ -415,24 +523,17 @@
left: 0em;
border-radius: @circularRadius;
transition:
background 0.3s ease 0s,
left 0.3s ease 0s
;
transition: @toggleHandleTransition;
}
.ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
.ui.toggle.checkbox input[type="checkbox"] ~ label:after,
.ui.toggle.checkbox input[type="radio"] ~ .box:after,
.ui.toggle.checkbox input[type="radio"] ~ label:after {
.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
left: @toggleOffOffset;
}
/* Focus */
.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
.ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
background-color: @toggleFocusColor;
border: none;
}
@ -445,25 +546,30 @@
}
/* Active */
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box,
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label,
.ui.toggle.checkbox input[type="radio"]:checked ~ .box,
.ui.toggle.checkbox input[type="radio"]:checked ~ label {
color: @toggleOnLabelColor;
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
color: @toggleOnLabelColor !important;
}
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before,
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before,
.ui.toggle.checkbox input[type="radio"]:checked ~ .box:before,
.ui.toggle.checkbox input[type="radio"]:checked ~ label:before {
background-color: @toggleOnLaneColor;
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
background-color: @toggleOnLaneColor !important;
}
.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after,
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after,
.ui.toggle.checkbox input[type="radio"]:checked ~ .box:after,
.ui.toggle.checkbox input[type="radio"]:checked ~ label:after {
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
left: @toggleOnOffset;
}
/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
color: @toggleOnFocusLabelColor !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
background-color: @toggleOnFocusLaneColor !important;
}
/*******************************
Variations
*******************************/

128
web/semantic/src/definitions/modules/dimmer.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -60,6 +60,7 @@ $.fn.dimmer = function(parameters) {
preinitialize: function() {
if( module.is.dimmer() ) {
$dimmable = $module.parent();
$dimmer = $module;
}
@ -67,10 +68,10 @@ $.fn.dimmer = function(parameters) {
$dimmable = $module;
if( module.has.dimmer() ) {
if(settings.dimmerName) {
$dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
$dimmer = $dimmable.find(selector.dimmer).filter('.' + settings.dimmerName);
}
else {
$dimmer = $dimmable.children(selector.dimmer);
$dimmer = $dimmable.find(selector.dimmer);
}
}
else {
@ -81,28 +82,8 @@ $.fn.dimmer = function(parameters) {
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( module.is.closable() ) {
module.verbose('Adding dimmer close event', $dimmer);
$dimmer
.on(clickEvent + eventNamespace, module.event.click)
;
}
module.bind.events();
module.set.dimmable();
module.instantiate();
},
@ -117,15 +98,46 @@ $.fn.dimmer = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module', $dimmer);
$module
.removeData(moduleNamespace)
;
module.unbind.events();
module.remove.variation();
$dimmable
.off(eventNamespace)
;
$dimmer
.off(eventNamespace)
;
},
bind: {
events: function() {
if(settings.on == 'hover') {
$dimmable
.on('mouseenter' + eventNamespace, module.show)
.on('mouseleave' + eventNamespace, module.hide)
;
}
else if(settings.on == 'click') {
$dimmable
.on(clickEvent + eventNamespace, module.toggle)
;
}
if( module.is.page() ) {
module.debug('Setting as a page dimmer', $dimmable);
module.set.pageDimmer();
}
if( module.is.closable() ) {
module.verbose('Adding dimmer close event', $dimmer);
$dimmable
.on(clickEvent + eventNamespace, selector.dimmer, module.event.click)
;
}
}
},
unbind: {
events: function() {
$module
.removeData(moduleNamespace)
;
}
},
event: {
@ -154,7 +166,7 @@ $.fn.dimmer = function(parameters) {
;
if(settings.variation) {
module.debug('Creating dimmer with variation', settings.variation);
$element.addClass(className.variation);
$element.addClass(settings.variation);
}
if(settings.dimmerName) {
module.debug('Creating named dimmer', settings.dimmerName);
@ -313,10 +325,10 @@ $.fn.dimmer = function(parameters) {
has: {
dimmer: function() {
if(settings.dimmerName) {
return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
return ($module.find(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
}
else {
return ( $module.children(selector.dimmer).length > 0 );
return ( $module.find(selector.dimmer).length > 0 );
}
}
},
@ -338,10 +350,10 @@ $.fn.dimmer = function(parameters) {
return settings.closable;
},
dimmer: function() {
return $module.is(selector.dimmer);
return $module.hasClass(className.dimmer);
},
dimmable: function() {
return $module.is(selector.dimmable);
return $module.hasClass(className.dimmable);
},
dimmed: function() {
return $dimmable.hasClass(className.dimmed);
@ -369,11 +381,11 @@ $.fn.dimmer = function(parameters) {
set: {
opacity: function(opacity) {
var
opacity = settings.opacity || opacity,
color = $dimmer.css('background-color'),
colorArray = color.split(','),
isRGBA = (colorArray && colorArray.length == 4)
;
opacity = settings.opacity === 0 ? 0 : settings.opacity || opacity;
if(isRGBA) {
colorArray[3] = opacity + ')';
color = colorArray.join(',');
@ -398,6 +410,12 @@ $.fn.dimmer = function(parameters) {
},
disabled: function() {
$dimmer.addClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.addClass(variation);
}
}
},
@ -412,6 +430,12 @@ $.fn.dimmer = function(parameters) {
},
disabled: function() {
$dimmer.removeClass(className.disabled);
},
variation: function(variation) {
variation = variation || settings.variation;
if(variation) {
$dimmer.removeClass(variation);
}
}
},
@ -484,7 +508,7 @@ $.fn.dimmer = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -603,7 +627,7 @@ $.fn.dimmer.settings = {
namespace : 'dimmer',
debug : false,
verbose : true,
verbose : false,
performance : true,
// name to distinguish between multiple dimmers in context
@ -641,9 +665,20 @@ $.fn.dimmer.settings = {
method : 'The method you called is not defined.'
},
className : {
active : 'active',
animating : 'animating',
dimmable : 'dimmable',
dimmed : 'dimmed',
dimmer : 'dimmer',
disabled : 'disabled',
hide : 'hide',
pageDimmer : 'page',
show : 'show'
},
selector: {
dimmable : '.dimmable',
dimmer : '.ui.dimmer',
dimmer : '> .ui.dimmer',
content : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
},
@ -651,19 +686,8 @@ $.fn.dimmer.settings = {
dimmer: function() {
return $('<div />').attr('class', 'ui dimmer');
}
},
className : {
active : 'active',
animating : 'animating',
dimmable : 'dimmable',
dimmed : 'dimmed',
disabled : 'disabled',
hide : 'hide',
pageDimmer : 'page',
show : 'show'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

41
web/semantic/src/definitions/modules/dimmer.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,7 +38,7 @@
text-align: @textAlign;
vertical-align: @verticalAlign;
background: @background;
background-color: @backgroundColor;
opacity: @hiddenOpacity;
line-height: @lineHeight;
@ -58,7 +58,7 @@
display: @contentDisplay;
user-select: text;
}
.ui.dimmer > .content > div {
.ui.dimmer > .content > * {
display: @contentChildDisplay;
vertical-align: @verticalAlign;
color: @textColor;
@ -110,19 +110,30 @@ body.animating.in.dimmable,
body.dimmed.dimmable {
overflow: hidden;
}
body.dimmable > .dimmer {
position: fixed;
}
/*
body.dimmable > :not(.dimmer) {
filter: @elementStartFilter;
/*--------------
Blurring
---------------*/
.blurring.dimmable > :not(.dimmer) {
filter: @blurredStartFilter;
transition: @blurredTransition;
}
body.dimmed.dimmable > :not(.dimmer) {
filter: @elementEndFilter;
transition: @elementTransition;
.blurring.dimmed.dimmable > :not(.dimmer) {
filter: @blurredEndFilter;
}
/* Dimmer Color */
.blurring.dimmable > .dimmer {
background-color: @blurredBackgroundColor;
}
.blurring.dimmable > .inverted.dimmer {
background-color: @blurredInvertedBackgroundColor;
}
*/
/*--------------
Aligned
@ -140,7 +151,7 @@ body.dimmed.dimmable > :not(.dimmer) {
---------------*/
.ui.inverted.dimmer {
background: @invertedBackground;
background-color: @invertedBackgroundColor;
}
.ui.inverted.dimmer > .content > * {
color: @textColor;
@ -158,22 +169,22 @@ body.dimmed.dimmable > :not(.dimmer) {
width: 0%;
height: 0%;
z-index: -100;
background-color: @simpleStartBackground;
background-color: @simpleStartBackgroundColor;
}
.dimmed.dimmable > .ui.simple.dimmer {
overflow: visible;
opacity: 1;
width: 100%;
height: 100%;
background: @simpleEndBackground;
background-color: @simpleEndBackgroundColor;
z-index: @simpleZIndex;
}
.ui.simple.inverted.dimmer {
background: @simpleInvertedStartBackground;
background-color: @simpleInvertedStartBackgroundColor;
}
.dimmed.dimmable > .ui.simple.inverted.dimmer {
background: @simpleInvertedEndBackground;
background-color: @simpleInvertedEndBackgroundColor;
}
.loadUIOverrides();

2919
web/semantic/src/definitions/modules/dropdown.js
View file

File diff suppressed because it is too large Load diff

466
web/semantic/src/definitions/modules/dropdown.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -27,13 +27,12 @@
cursor: pointer;
position: relative;
display: inline-block;
line-height: 1em;
tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
text-align: left;
transition: @transition;
}
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*******************************
Content
@ -49,15 +48,14 @@
display: none;
outline: none;
top: 100%;
min-width: max-content;
transition: @menuTransition;
margin: @menuMargin;
padding: @menuPadding;
background: @menuBackground;
min-width: 100%;
white-space: @menuWrap;
font-size: 1rem;
font-size: @relativeMedium;
text-shadow: none;
text-align: @menuTextAlign;
@ -69,6 +67,11 @@
will-change: transform, opacity;
}
.ui.dropdown .menu > * {
white-space: nowrap;
}
/*--------------
Hidden Input
---------------*/
@ -83,7 +86,9 @@
---------------*/
.ui.dropdown > .dropdown.icon {
position: relative;
width: auto;
font-size: @dropdownIconSize;
margin: @dropdownIconMargin;
}
.ui.dropdown .menu > .item .dropdown.icon {
@ -115,13 +120,14 @@
display: block;
border: @itemBorder;
height: @itemHeight;
text-align: @itemTextAlign;
border-top: @itemDivider;
line-height: @itemLineHeight;
font-size: @itemFontSize;
color: @itemColor;
padding: @itemVerticalPadding @itemHorizontalPadding !important;
padding: @itemPadding !important;
font-size: @itemFontSize;
text-transform: @itemTextTransform;
font-weight: @itemFontWeight;
@ -177,6 +183,8 @@
}
.ui.dropdown .menu > .input {
width: auto;
display: flex;
margin: @menuInputMargin;
min-width: @menuInputMinWidth;
}
@ -199,10 +207,22 @@
.ui.dropdown > .text > .description,
.ui.dropdown .menu > .item > .description {
float: @itemDescriptionFloat;
margin: @itemDescriptionMargin;
color: @itemDescriptionColor;
}
/*-----------------
Message
-------------------*/
.ui.dropdown .menu > .message {
padding: @messagePadding;
font-weight: @messageFontWeight;
}
.ui.dropdown .menu > .message:not(.ui) {
color: @messageColor;
}
/*--------------
Sub Menu
@ -222,11 +242,6 @@
display: none;
}
/*******************************
Coupling
*******************************/
/*--------------
Sub Elements
---------------*/
@ -258,6 +273,7 @@
.ui.dropdown .menu > .item > .image,
.ui.dropdown .menu > .item > img {
margin-left: 0em;
float: @itemElementFloat;
margin-right: @itemElementDistance;
}
@ -276,6 +292,11 @@
}
/*******************************
Coupling
*******************************/
/*--------------
Menu
---------------*/
@ -299,6 +320,15 @@
right: 0em;
}
/*--------------
Label
---------------*/
/* Dropdown Menu */
.ui.label.dropdown .menu {
min-width: 100%;
}
/*--------------
Button
---------------*/
@ -307,10 +337,8 @@
.ui.dropdown.icon.button > .dropdown.icon {
margin: 0em;
}
.ui.dropdown.button:not(.pointing):not(.floating).active,
.ui.dropdown.button:not(.pointing):not(.floating).visible {
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
.ui.button.dropdown .menu {
min-width: 100%;
}
@ -327,11 +355,13 @@
.ui.selection.dropdown {
cursor: pointer;
word-wrap: break-word;
line-height: 1em;
white-space: normal;
outline: 0;
transform: rotateZ(0deg);
min-width: @selectionMinWidth;
min-height: @selectionMinHeight;
background: @selectionBackground;
display: @selectionDisplay;
@ -353,9 +383,6 @@ select.ui.dropdown {
border: @selectBorder;
visibility: @selectVisibility;
}
.ui.selection.dropdown > .text {
margin-right: @selectionTextIconDistance;
}
.ui.selection.dropdown > .search.icon,
.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon {
@ -363,6 +390,7 @@ select.ui.dropdown {
position: absolute;
top: auto;
width: auto;
z-index: @selectionIconZIndex;
margin: @selectionIconMargin;
padding: @selectionIconPadding;
right: @selectionHorizontalPadding;
@ -383,10 +411,12 @@ select.ui.dropdown {
-webkit-overflow-scrolling: touch;
border-top-width: 0px !important;
width: auto;
outline: none;
margin: 0px -@menuBorderWidth;
min-width: @menuMinWidth;
outline: none;
width: @menuMinWidth;
border-radius: @selectionMenuBorderRadius;
box-shadow: @selectionMenuBoxShadow;
transition: @selectionMenuTransition;
}
@ -395,12 +425,12 @@ select.ui.dropdown {
display: none;
}
/*--------------
Message
---------------*/
/* Scrollbar in IE */
@media all and (-ms-high-contrast:none) {
.ui.selection.dropdown .menu {
min-width: calc(100% - @scrollBarWidth);
}
.ui.selection.dropdown .menu > .message {
padding: @selectionMessagePadding;
}
@media only screen and (max-width : @largestMobileScreen) {
@ -427,9 +457,7 @@ select.ui.dropdown {
/* Menu Item */
.ui.selection.dropdown .menu > .item {
border-top: @selectionItemDivider;
padding-left: @selectionHorizontalPadding !important;
/* Add in spacing for scroll bar */
padding-right: calc(@selectionHorizontalPadding + 1em) !important;
padding: @selectionItemPadding !important;
white-space: normal;
word-wrap: normal;
}
@ -440,39 +468,42 @@ select.ui.dropdown {
box-shadow: @selectionHoverBoxShadow;
}
/* Disabled */
.ui.selection.dropdown.disabled,
.ui.selection.dropdown.disabled:hover {
cursor: default;
box-shadow: none;
color: @selectionTextColor;
border: @selectionBorder;
opacity: @disabledOpacity !important;
}
/* Visible Hover */
.ui.selection.visible.dropdown:hover {
border-color: @selectionVisibleHoverBorderColor;
box-shadow: @selectionVisibleHoverBoxShadow;
}
.ui.selection.visible.dropdown:hover .menu {
border: @selectionVisibleHoverMenuBorder;
box-shadow: @selectionVisibleHoverMenuBoxShadow;
}
/* Visible */
.ui.selection.dropdown.visible {
/* Active */
.ui.selection.active.dropdown {
border-color: @selectionVisibleBorderColor;
box-shadow: @selectionVisibleBoxShadow;
}
.ui.selection.active.dropdown .menu {
border-color: @selectionVisibleBorderColor;
box-shadow: @selectionVisibleMenuBoxShadow;
}
/* Active Item */
.ui.selection.active.dropdown > .text:not(.default),
/* Focus */
.ui.selection.dropdown:focus {
border-color: @selectionFocusBorderColor;
box-shadow: @selectionFocusBoxShadow;
}
.ui.selection.dropdown:focus .menu {
border-color: @selectionFocusBorderColor;
box-shadow: @selectionFocusMenuBoxShadow;
}
/* Visible */
.ui.selection.visible.dropdown > .text:not(.default) {
font-weight: @selectionVisibleTextFontWeight;
color: @selectionVisibleTextColor;
}
/* Visible Hover */
.ui.selection.active.dropdown:hover {
border-color: @selectionActiveHoverBorderColor;
box-shadow: @selectionActiveHoverBoxShadow;
}
.ui.selection.active.dropdown:hover .menu {
border-color: @selectionActiveHoverBorderColor;
box-shadow: @selectionActiveHoverMenuBoxShadow;
}
/* Dropdown Icon */
.ui.active.selection.dropdown > .dropdown.icon,
.ui.visible.selection.dropdown > .dropdown.icon {
@ -481,8 +512,7 @@ select.ui.dropdown {
}
/* Connecting Border */
.ui.active.selection.dropdown,
.ui.visible.selection.dropdown {
.ui.active.selection.dropdown {
border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
border-bottom-right-radius: @selectionVisibleConnectingBorder !important;
}
@ -501,7 +531,6 @@ select.ui.dropdown {
background: none transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0em !important;
cursor: pointer;
top: 0em;
left: 0em;
@ -537,8 +566,14 @@ select.ui.dropdown {
.ui.search.dropdown.visible > .text {
pointer-events: none;
}
.ui.active.search.dropdown > input.search:focus + .text {
color: @unselectedTextColor !important;
/* Filtered Text */
.ui.active.search.dropdown input.search:focus + .text .icon,
.ui.active.search.dropdown input.search:focus + .text .flag {
opacity: @selectionTextUnderlayIconOpacity;
}
.ui.active.search.dropdown input.search:focus + .text {
color: @selectionTextUnderlayColor !important;
}
/* Search Menu */
@ -569,6 +604,83 @@ select.ui.dropdown {
}
}
/*--------------
Multiple
---------------*/
/* Multiple Selection */
.ui.multiple.dropdown {
padding: @multipleSelectionPadding;
}
.ui.multiple.dropdown .menu {
cursor: auto;
}
/* Multiple Search Selection */
.ui.multiple.search.dropdown,
.ui.multiple.search.dropdown > input.search {
cursor: text;
}
/* Selection Label */
.ui.multiple.dropdown > .label {
user-select: none;
display: inline-block;
vertical-align: top;
white-space: normal;
font-size: @labelSize;
padding: @labelPadding;
margin: @labelMargin;
box-shadow: @labelBoxShadow;
}
/* Dropdown Icon */
.ui.multiple.dropdown .dropdown.icon {
margin: @multipleSelectionDropdownIconMargin;
padding: @multipleSelectionDropdownIconPadding;
}
/* Text */
.ui.multiple.dropdown > .text {
position: static;
padding: 0;
max-width: 100%;
margin: @multipleSelectionChildMargin;
line-height: @multipleSelectionChildLineHeight;
}
.ui.multiple.dropdown > .label ~ .text {
display: none;
}
/*-----------------
Multiple Search
-----------------*/
/* Prompt Text */
.ui.multiple.search.dropdown > .text {
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: inherit;
margin: @multipleSelectionChildMargin;
line-height: @multipleSelectionChildLineHeight;
}
.ui.multiple.search.dropdown > .label ~ .text {
display: none;
}
/* Search */
.ui.multiple.search.dropdown > input.search {
position: static;
padding: 0;
max-width: 100%;
margin: @multipleSelectionChildMargin;
width: @multipleSelectionSearchStartWidth;
line-height: @multipleSelectionChildLineHeight;
}
/*--------------
Inline
@ -581,7 +693,7 @@ select.ui.dropdown {
}
.ui.inline.dropdown .dropdown.icon {
margin: @inlineIconMargin;
vertical-align: top;
vertical-align: baseline;
}
.ui.inline.dropdown > .text {
font-weight: @inlineTextFontWeight;
@ -598,17 +710,6 @@ select.ui.dropdown {
*******************************/
/*--------------------
Hover
----------------------*/
/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
background: @hoveredItemBackground;
color: @hoveredItemColor;
z-index: 12;
}
/*--------------------
Active
----------------------*/
@ -622,6 +723,85 @@ select.ui.dropdown {
z-index: @activeItemZIndex;
}
/*--------------------
Hover
----------------------*/
/* Menu Item Hover */
.ui.dropdown .menu > .item:hover {
background: @hoveredItemBackground;
color: @hoveredItemColor;
z-index: @hoveredZIndex;
}
/*--------------------
Loading
---------------------*/
/* Positioning */
.ui.loading.dropdown > i.icon:before,
.ui.loading.dropdown > i.icon:after {
left: 30% !important;
}
.ui.loading.dropdown > i.icon {
top: 50% !important;
}
.ui.multiple.loading.dropdown > i.icon:before,
.ui.multiple.loading.dropdown > i.icon:after {
top: 0% !important;
left: 0% !important;
}
.ui.loading.dropdown > i.icon:before {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
}
.ui.loading.dropdown > i.icon:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
box-shadow: 0px 0px 0px 1px transparent;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
animation: dropdown-spin @loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: @circularRadius;
border-color: @loaderLineColor transparent transparent;
border-style: solid;
border-width: @loaderLineWidth;
}
/* Coupling */
.ui.loading.dropdown.button > i.icon:before,
.ui.loading.dropdown.button > i.icon:after {
display: none;
}
@keyframes dropdown-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*--------------------
Default Text
----------------------*/
@ -642,7 +822,9 @@ select.ui.dropdown {
.ui.loading.dropdown > .text {
transition: none;
}
.ui.dropdown > .loading.menu {
/* Used To Check Position */
.ui.dropdown .loading.menu {
display: block;
visibility: hidden;
z-index: @loadingZIndex;
@ -669,7 +851,7 @@ select.ui.dropdown {
visibility: hidden;
}
.ui.dropdown .filtered.item {
display: none;
display: none !important;
}
@ -687,7 +869,6 @@ select.ui.dropdown {
background: @errorBackgroundColor;
border-color: @errorBorderColor;
}
.ui.selection.dropdown.error:hover {
border-color: @errorBorderColor;
}
@ -696,10 +877,12 @@ select.ui.dropdown {
.ui.dropdown.error > .menu .menu {
border-color: @errorBorderColor;
}
.ui.dropdown.error > .menu > .item {
color: @errorItemTextColor;
}
.ui.multiple.selection.error.dropdown > .label {
border-color: @errorBorderColor;
}
/* Item Hover */
.ui.dropdown.error > .menu > .item:hover {
@ -718,7 +901,8 @@ select.ui.dropdown {
----------------------*/
/* Disabled */
.ui.disabled.dropdown {
.ui.disabled.dropdown,
.ui.dropdown .menu > .disabled.item {
cursor: default;
pointer-events: none;
opacity: @disabledOpacity;
@ -744,6 +928,7 @@ select.ui.dropdown {
.ui.dropdown .menu .right.menu {
left: 100% !important;
right: auto !important;
border-radius: @subMenuBorderRadius !important;
}
/* Left Flyout Menu */
@ -751,6 +936,7 @@ select.ui.dropdown {
.ui.dropdown .menu .left.menu {
left: auto !important;
right: 100% !important;
border-radius: @leftSubMenuBorderRadius !important;
}
.ui.dropdown .item .left.dropdown.icon,
@ -775,6 +961,7 @@ select.ui.dropdown {
Upward
---------------*/
/* Upward Main Menu */
.ui.upward.dropdown > .menu {
top: auto;
bottom: 100%;
@ -782,13 +969,18 @@ select.ui.dropdown {
border-radius: @upwardMenuBorderRadius;
}
/* Upward Sub Menu */
.ui.dropdown .upward.menu {
top: auto !important;
bottom: 0 !important;
}
/* Active Upward */
.ui.simple.upward.active.dropdown,
.ui.simple.upward.dropdown:hover {
border-radius: @borderRadius @borderRadius 0em 0em !important;
}
.ui.upward.dropdown.button:not(.pointing):not(.floating).active,
.ui.upward.dropdown.button:not(.pointing):not(.floating).visible {
.ui.upward.dropdown.button:not(.pointing):not(.floating).active {
border-radius: @borderRadius @borderRadius 0em 0em;
}
@ -796,22 +988,106 @@ select.ui.dropdown {
.ui.upward.selection.dropdown .menu {
border-top-width: @menuBorderWidth !important;
border-bottom-width: 0px !important;
box-shadow: @upwardSelectionMenuBoxShadow;
}
.ui.upward.selection.dropdown:hover {
box-shadow: @upwardSelectionHoverBoxShadow;
}
.ui.upward.selection.visible.dropdown:hover {
box-shadow: @upwardSelectionVisibleHoverBoxShadow;
}
.ui.active.upward.selection.dropdown,
.ui.visible.upward.selection.dropdown {
/* Active Upward */
.ui.active.upward.selection.dropdown {
border-radius: @upwardSelectionVisibleBorderRadius !important;
}
/* Visible Upward */
.ui.upward.selection.dropdown.visible {
box-shadow: @upwardSelectionVisibleBoxShadow;
border-radius: @upwardSelectionVisibleBorderRadius !important;
}
.ui.upward.selection.visible.dropdown:hover .menu {
box-shadow: @upwardSelectionVisibleHoverMenuBoxShadow;
/* Visible Hover Upward */
.ui.upward.active.selection.dropdown:hover {
box-shadow: @upwardSelectionActiveHoverBoxShadow;
}
.ui.upward.active.selection.dropdown:hover .menu {
box-shadow: @upwardSelectionActiveHoverMenuBoxShadow;
}
/*--------------
Simple
---------------*/
/* Selection Menu */
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
overflow-x: hidden;
overflow-y: auto;
}
.ui.scrolling.dropdown .menu {
overflow-x: hidden;
overflow-y: auto;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
min-width: 100% !important;
width: auto !important;
}
.ui.dropdown .scrolling.menu {
position: static;
overflow-y: auto;
border: none;
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
min-width: 100% !important;
width: auto !important;
border-top: @menuBorder;
}
.ui.scrolling.dropdown .menu .item.item.item,
.ui.dropdown .scrolling.menu > .item.item.item {
border-top: @scrollingMenuItemBorder;
padding-right: @scrollingMenuRightItemPadding !important;
}
.ui.scrolling.dropdown .menu .item:first-child,
.ui.dropdown .scrolling.menu .item:first-child {
border-top: none;
}
.ui.dropdown > .animating.menu .scrolling.menu,
.ui.dropdown > .visible.menu .scrolling.menu {
display: block;
}
/* Scrollbar in IE */
@media all and (-ms-high-contrast:none) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
min-width: ~"calc(100% - "@scrollbarWidth~")";
}
}
@media only screen and (max-width : @largestMobileScreen) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingMobileMaxMenuHeight;
}
}
@media only screen and (min-width: @tabletBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingTabletMaxMenuHeight;
}
}
@media only screen and (min-width: @computerBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingComputerMaxMenuHeight;
}
}
@media only screen and (min-width: @widescreenMonitorBreakpoint) {
.ui.scrolling.dropdown .menu,
.ui.dropdown .scrolling.menu {
max-height: @scrollingWidescreenMaxMenuHeight;
}
}
/*--------------
@ -891,11 +1167,12 @@ select.ui.dropdown {
.ui.floating.dropdown .menu {
left: 0;
right: auto;
box-shadow: @floatingMenuBoxShadow;
border-radius: @floatingMenuBorderRadius;
box-shadow: @floatingMenuBoxShadow !important;
border-radius: @floatingMenuBorderRadius !important;
}
.ui.floating.dropdown > .menu {
margin-top: @floatingMenuDistance !important;
border-radius: @floatingMenuBorderRadius !important;
}
/*--------------
@ -1037,4 +1314,21 @@ select.ui.dropdown {
right: @pointingArrowDistanceFromEdge;
}
/* Upward pointing */
.ui.upward.pointing.dropdown > .menu,
.ui.upward.top.pointing.dropdown > .menu {
top: auto;
bottom: 100%;
margin: 0em 0em @pointingMenuDistance;
border-radius: @pointingUpwardMenuBorderRadius;
}
.ui.upward.pointing.dropdown > .menu:after,
.ui.upward.top.pointing.dropdown > .menu:after {
top: 100%;
bottom: auto;
box-shadow: @pointingUpwardArrowBoxShadow;
margin: @pointingArrowOffset 0em 0em;
}
.loadUIOverrides();

659
web/semantic/src/definitions/modules/embed.js Normal file
View file

@ -0,0 +1,659 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ($, window, document, undefined) {
"use strict";
$.fn.embed = 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.embed.settings, parameters)
: $.extend({}, $.fn.embed.settings),
selector = settings.selector,
className = settings.className,
sources = settings.sources,
error = settings.error,
metadata = settings.metadata,
namespace = settings.namespace,
templates = settings.templates,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$window = $(window),
$module = $(this),
$placeholder = $module.find(selector.placeholder),
$icon = $module.find(selector.icon),
$embed = $module.find(selector.embed),
element = this,
instance = $module.data(moduleNamespace),
module
;
module = {
initialize: function() {
module.debug('Initializing embed');
module.determine.autoplay();
module.create();
module.bind.events();
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 embed');
module.reset();
$module
.removeData(moduleNamespace)
.off(eventNamespace)
;
},
refresh: function() {
module.verbose('Refreshing selector cache');
$placeholder = $module.find(selector.placeholder);
$icon = $module.find(selector.icon);
$embed = $module.find(selector.embed);
},
bind: {
events: function() {
if( module.has.placeholder() ) {
module.debug('Adding placeholder events');
$module
.on('click' + eventNamespace, selector.placeholder, module.createAndShow)
.on('click' + eventNamespace, selector.icon, module.createAndShow)
;
}
}
},
create: function() {
var
placeholder = module.get.placeholder()
;
if(placeholder) {
module.createPlaceholder();
}
else {
module.createAndShow();
}
},
createPlaceholder: function(placeholder) {
var
icon = module.get.icon(),
url = module.get.url(),
embed = module.generate.embed(url)
;
placeholder = placeholder || module.get.placeholder();
$module.html( templates.placeholder(placeholder, icon) );
module.debug('Creating placeholder for embed', placeholder, icon);
},
createEmbed: function(url) {
module.refresh();
url = url || module.get.url();
$embed = $('<div/>')
.addClass(className.embed)
.html( module.generate.embed(url) )
.appendTo($module)
;
settings.onCreate.call(element, url);
module.debug('Creating embed object', $embed);
},
createAndShow: function() {
module.createEmbed();
module.show();
},
// sets new embed
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)
;
module.create();
},
// clears embed
reset: function() {
module.debug('Clearing embed and showing placeholder');
module.remove.active();
module.remove.embed();
module.showPlaceholder();
settings.onReset.call(element);
},
// shows current embed
show: function() {
module.debug('Showing embed');
module.set.active();
settings.onDisplay.call(element);
},
hide: function() {
module.debug('Hiding embed');
module.showPlaceholder();
},
showPlaceholder: function() {
module.debug('Showing placeholder image');
module.remove.active();
settings.onPlaceholderDisplay.call(element);
},
get: {
id: function() {
return settings.id || $module.data(metadata.id);
},
placeholder: function() {
return settings.placeholder || $module.data(metadata.placeholder);
},
icon: function() {
return (settings.icon)
? settings.icon
: ($module.data(metadata.icon) !== undefined)
? $module.data(metadata.icon)
: module.determine.icon()
;
},
source: function(url) {
return (settings.source)
? settings.source
: ($module.data(metadata.source) !== undefined)
? $module.data(metadata.source)
: module.determine.source()
;
},
type: function() {
var source = module.get.source();
return (sources[source] !== undefined)
? sources[source].type
: false
;
},
url: function() {
return (settings.url)
? settings.url
: ($module.data(metadata.url) !== undefined)
? $module.data(metadata.url)
: module.determine.url()
;
}
},
determine: {
autoplay: function() {
if(module.should.autoplay()) {
settings.autoplay = true;
}
},
source: function(url) {
var
matchedSource = false
;
url = url || module.get.url();
if(url) {
$.each(sources, function(name, source) {
if(url.search(source.domain) !== -1) {
matchedSource = name;
return false;
}
});
}
return matchedSource;
},
icon: function() {
var
source = module.get.source()
;
return (sources[source] !== undefined)
? sources[source].icon
: false
;
},
url: function() {
var
id = settings.id || $module.data(metadata.id),
source = settings.source || $module.data(metadata.source),
url
;
url = (sources[source] !== undefined)
? sources[source].url.replace('{id}', id)
: false
;
if(url) {
$module.data(metadata.url, url);
}
return url;
}
},
set: {
active: function() {
$module.addClass(className.active);
}
},
remove: {
active: function() {
$module.removeClass(className.active);
},
embed: function() {
$embed.empty();
}
},
encode: {
parameters: function(parameters) {
var
urlString = [],
index
;
for (index in parameters) {
urlString.push( encodeURIComponent(index) + '=' + encodeURIComponent( parameters[index] ) );
}
return urlString.join('&amp;');
}
},
generate: {
embed: function(url) {
module.debug('Generating embed html');
var
source = module.get.source(),
html,
parameters
;
url = module.get.url(url);
if(url) {
parameters = module.generate.parameters(source);
html = templates.iframe(url, parameters);
}
else {
module.error(error.noURL, $module);
}
return html;
},
parameters: function(source, extraParameters) {
var
parameters = (sources[source] && sources[source].parameters !== undefined)
? sources[source].parameters(settings)
: {}
;
extraParameters = extraParameters || settings.parameters;
if(extraParameters) {
parameters = $.extend({}, parameters, extraParameters);
}
parameters = settings.onEmbed(parameters);
return module.encode.parameters(parameters);
}
},
has: {
placeholder: function() {
return settings.placeholder || $module.data(metadata.placeholder);
}
},
should: {
autoplay: function() {
return (settings.autoplay === 'auto')
? (settings.placeholder || $module.data(metadata.placeholder) !== undefined)
: settings.autoplay
;
}
},
is: {
video: function() {
return module.get.type() == 'video';
}
},
setting: function(name, value) {
module.debug('Changing setting', 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({
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Element' : element,
'Execution Time' : executionTime
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
title = settings.name + ':',
totalTime = 0
;
time = false;
clearTimeout(module.performance.timer);
$.each(performance, function(index, data) {
totalTime += data['Execution Time'];
});
title += ' ' + totalTime + 'ms';
if(moduleSelector) {
title += ' \'' + moduleSelector + '\'';
}
if($allModules.length > 1) {
title += ' ' + '(' + $allModules.length + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
module.error(error.method, query);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
instance.invoke('destroy');
}
module.initialize();
}
})
;
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.embed.settings = {
name : 'Embed',
namespace : 'embed',
debug : false,
verbose : false,
performance : true,
icon : false,
source : false,
url : false,
id : false,
// standard video settings
autoplay : 'auto',
color : '#444444',
hd : true,
brandedUI : false,
// additional parameters to include with the embed
parameters: false,
onDisplay : function() {},
onPlaceholderDisplay : function() {},
onReset : function() {},
onCreate : function(url) {},
onEmbed : function(parameters) {
return parameters;
},
metadata : {
id : 'id',
icon : 'icon',
placeholder : 'placeholder',
source : 'source',
url : 'url'
},
error : {
noURL : 'No URL specified',
method : 'The method you called is not defined'
},
className : {
active : 'active',
embed : 'embed'
},
selector : {
embed : '.embed',
placeholder : '.placeholder',
icon : '.icon'
},
sources: {
youtube: {
name : 'youtube',
type : 'video',
icon : 'video play',
domain : 'youtube.com',
url : '//www.youtube.com/embed/{id}',
parameters: function(settings) {
return {
autohide : !settings.brandedUI,
autoplay : settings.autoplay,
color : settings.colors || undefined,
hq : settings.hd,
jsapi : settings.api,
modestbranding : !settings.brandedUI
};
}
},
vimeo: {
name : 'vimeo',
type : 'video',
icon : 'video play',
domain : 'vimeo.com',
url : '//player.vimeo.com/video/{id}',
parameters: function(settings) {
return {
api : settings.api,
autoplay : settings.autoplay,
byline : settings.brandedUI,
color : settings.colors || undefined,
portrait : settings.brandedUI,
title : settings.brandedUI
};
}
}
},
templates: {
iframe : function(url, parameters) {
return ''
+ '<iframe src="' + url + '?' + parameters + '"'
+ ' width="100%" height="100%"'
+ ' frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
;
},
placeholder : function(image, icon) {
var
html = ''
;
if(icon) {
html += '<i class="' + icon + ' icon"></i>';
}
if(image) {
html += '<img class="placeholder" src="' + image + '">';
}
return html;
}
},
// NOT YET IMPLEMENTED
api : true,
onPause : function() {},
onPlay : function() {},
onStop : function() {}
};
})( jQuery, window, document );

164
web/semantic/src/definitions/modules/embed.less Normal file
View file

@ -0,0 +1,164 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'embed';
@import (multiple) '../../theme.config';
/*******************************
Types
*******************************/
.ui.embed {
position: relative;
position: relative;
max-width: 100%;
height: 0px;
overflow: hidden;
background: @background;
padding-bottom: @widescreenRatio;
}
/*-----------------
Embedded Content
------------------*/
.ui.embed iframe,
.ui.embed embed,
.ui.embed object {
position: absolute;
border: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0em;
padding: 0em;
}
/*-----------------
Embed
------------------*/
.ui.embed > .embed {
display: none;
}
/*--------------
Placeholder
---------------*/
.ui.embed > .placeholder {
position: absolute;
cursor: pointer;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100%;
background-color: @placeholderBackground;
}
/*--------------
Icon
---------------*/
.ui.embed > .icon {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
}
.ui.embed > .icon:after {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 3;
content: '';
background: @placeholderBackground;
opacity: @placeholderBackgroundOpacity;
transition: @placeholderBackgroundTransition;
}
.ui.embed > .icon:before {
position: absolute;
top: 50%;
left: 50%;
z-index: 4;
transform: translateX(-50%) translateY(-50%);
color: @iconColor;
font-size: @iconSize;
text-shadow: @iconShadow;
transition: @iconTransition;
z-index: @iconZIndex;
}
/*******************************
States
*******************************/
/*--------------
Hover
---------------*/
.ui.embed .icon:hover:after {
background: @hoverPlaceholderBackground;
opacity: @hoverPlaceholderBackgroundOpacity;
}
.ui.embed .icon:hover:before {
color: @hoverIconColor;
}
/*--------------
Active
---------------*/
.ui.active.embed > .icon,
.ui.active.embed > .placeholder {
display: none;
}
.ui.active.embed > .embed {
display: block;
}
.loadUIOverrides();
/*******************************
Variations
*******************************/
.ui.square.embed {
padding-bottom: @squareRatio;
}
.ui[class*="4:3"].embed {
padding-bottom: @standardRatio;
}
.ui[class*="16:9"].embed {
padding-bottom: @widescreenRatio;
}
.ui[class*="21:9"].embed {
padding-bottom: @ultraWidescreenRatio;
}

228
web/semantic/src/definitions/modules/modal.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -80,9 +80,10 @@ $.fn.modal = function(parameters) {
module.create.dimmer();
module.refreshModals();
module.verbose('Attaching close events', $close);
module.bind.events();
module.observeChanges();
if(settings.observeChanges) {
module.observeChanges();
}
module.instantiate();
},
@ -107,6 +108,12 @@ $.fn.modal = function(parameters) {
},
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
;
if(settings.inverted) {
dimmerSettings.variation = (dimmerSettings.variation !== undefined)
? dimmerSettings.variation + ' inverted'
: 'inverted'
;
}
if($.fn.dimmer === undefined) {
module.error(error.dimmer);
return;
@ -117,6 +124,12 @@ $.fn.modal = function(parameters) {
module.verbose('Modal is detachable, moving content into dimmer');
$dimmable.dimmer('add content', $module);
}
else {
module.set.undetached();
}
if(settings.blurring) {
$dimmable.addClass(className.blurring);
}
$dimmer = $dimmable.dimmer('get dimmer');
},
id: function() {
@ -186,8 +199,15 @@ $.fn.modal = function(parameters) {
bind: {
events: function() {
$close.on('click' + eventNamespace, module.event.close);
$window.on('resize' + elementNamespace, module.event.resize);
module.verbose('Attaching events');
$module
.on('click' + eventNamespace, selector.close, module.event.close)
.on('click' + eventNamespace, selector.approve, module.event.approve)
.on('click' + eventNamespace, selector.deny, module.event.deny)
;
$window
.on('resize' + elementNamespace, module.event.resize)
;
}
},
@ -198,30 +218,30 @@ $.fn.modal = function(parameters) {
},
event: {
approve: function() {
if(settings.onApprove.call(element, $(this)) === false) {
module.verbose('Approve callback returned false cancelling hide');
return;
}
module.hide();
},
deny: function() {
if(settings.onDeny.call(element, $(this)) === false) {
module.verbose('Deny callback returned false cancelling hide');
return;
}
module.hide();
},
close: function() {
module.verbose('Closing element pressed');
if( $(this).is(selector.approve) ) {
if(settings.onApprove.call(element) !== false) {
module.hide();
}
else {
module.verbose('Approve callback returned false cancelling hide');
}
}
else if( $(this).is(selector.deny) ) {
if(settings.onDeny.call(element) !== false) {
module.hide();
}
else {
module.verbose('Deny callback returned false cancelling hide');
}
}
else {
module.hide();
}
module.hide();
},
click: function(event) {
if( $(event.target).closest($module).length === 0 ) {
var
$target = $(event.target),
isInModal = ($target.closest(selector.modal).length > 0),
isInDOM = $.contains(document.documentElement, event.target)
;
if(!isInModal && isInDOM) {
module.debug('Dimmer clicked, hiding all modals');
if( module.is.active() ) {
module.remove.clickaway();
@ -302,8 +322,7 @@ $.fn.modal = function(parameters) {
module.set.type();
module.set.clickaway();
if( !settings.allowMultiple && $otherModals.filter('.' + className.active).length > 0) {
module.debug('Other modals visible, queueing show animation');
if( !settings.allowMultiple && module.others.active() ) {
module.hideOthers(module.showModal);
}
else {
@ -322,23 +341,16 @@ $.fn.modal = function(parameters) {
module.add.keyboardShortcuts();
module.save.focus();
module.set.active();
module.set.autofocus();
if(settings.autofocus) {
module.set.autofocus();
}
callback();
}
})
;
}
else {
module.debug('Showing modal with javascript');
$module
.fadeIn(settings.duration, settings.easing, function() {
settings.onVisible.apply(element);
module.add.keyboardShortcuts();
module.save.focus();
module.set.active();
callback();
})
;
module.error(error.noTransition);
}
}
}
@ -353,7 +365,10 @@ $.fn.modal = function(parameters) {
: function(){}
;
module.debug('Hiding modal');
settings.onHide.call(element);
if(settings.onHide.call(element, $(this)) === false) {
module.verbose('Hide callback returned false cancelling hide');
return;
}
if( module.is.animating() || module.is.active() ) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
@ -366,7 +381,7 @@ $.fn.modal = function(parameters) {
duration : settings.duration,
useFailSafe : true,
onStart : function() {
if(!module.othersActive() && !keepDimmed) {
if(!module.others.active() && !keepDimmed) {
module.hideDimmer();
}
module.remove.keyboardShortcuts();
@ -380,18 +395,7 @@ $.fn.modal = function(parameters) {
;
}
else {
module.remove.active();
if( !module.othersActive() ) {
module.hideDimmer();
}
module.remove.keyboardShortcuts();
$module
.fadeOut(settings.duration, settings.easing, function() {
settings.onHidden.call(element);
module.restore.focus();
callback();
})
;
module.error(error.noTransition);
}
}
},
@ -409,10 +413,8 @@ $.fn.modal = function(parameters) {
hideDimmer: function() {
if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
$dimmable.dimmer('hide', function() {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
module.remove.clickaway();
module.remove.screenHeight();
}
module.remove.clickaway();
module.remove.screenHeight();
});
}
else {
@ -423,7 +425,7 @@ $.fn.modal = function(parameters) {
hideAll: function(callback) {
var
$visibleModals = $allModals.filter(':visible')
$visibleModals = $allModals.filter('.' + className.active + ', .' + className.animating)
;
callback = $.isFunction(callback)
? callback
@ -440,7 +442,7 @@ $.fn.modal = function(parameters) {
hideOthers: function(callback) {
var
$visibleModals = $otherModals.filter(':visible')
$visibleModals = $otherModals.filter('.' + className.active + ', .' + className.animating)
;
callback = $.isFunction(callback)
? callback
@ -454,10 +456,16 @@ $.fn.modal = function(parameters) {
}
},
othersActive: function() {
return ($otherModals.filter('.' + className.active).length > 0);
others: {
active: function() {
return ($otherModals.filter('.' + className.active).length > 0);
},
animating: function() {
return ($otherModals.filter('.' + className.animating).length > 0);
}
},
add: {
keyboardShortcuts: function() {
module.verbose('Adding keyboard shortcuts');
@ -492,14 +500,18 @@ $.fn.modal = function(parameters) {
;
}
},
screenHeight: function() {
if(module.cache.height > module.cache.pageHeight) {
module.debug('Removing page height');
$body
.css('height', '')
;
bodyStyle: function() {
if($body.attr('style') === '') {
module.verbose('Removing style attribute');
$body.removeAttr('style');
}
},
screenHeight: function() {
module.debug('Removing page height');
$body
.css('height', '')
;
},
keyboardShortcuts: function() {
module.verbose('Removing keyboard shortcuts');
$document
@ -555,15 +567,15 @@ $.fn.modal = function(parameters) {
set: {
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
: $inputs
;
$input.first().focus();
var
$inputs = $module.find(':input').filter(':visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus.first()
: $inputs.first()
;
if($input.length > 0) {
$input.focus();
}
},
clickaway: function() {
@ -580,7 +592,7 @@ $.fn.modal = function(parameters) {
else {
module.debug('Modal is taller than page content, resizing page height');
$body
.css('height', module.cache.height + (settings.padding / 2) )
.css('height', module.cache.height + (settings.padding * 2) )
;
}
},
@ -594,7 +606,7 @@ $.fn.modal = function(parameters) {
type: function() {
if(module.can.fit()) {
module.verbose('Modal fits on screen');
if(!module.othersActive) {
if(!module.others.active() && !module.others.animating()) {
module.remove.scrolling();
}
}
@ -621,6 +633,9 @@ $.fn.modal = function(parameters) {
})
;
}
},
undetached: function() {
$dimmable.addClass(className.undetached);
}
},
@ -693,7 +708,7 @@ $.fn.modal = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -806,40 +821,55 @@ $.fn.modal.settings = {
namespace : 'modal',
debug : false,
verbose : true,
verbose : false,
performance : true,
observeChanges : false,
allowMultiple : false,
detachable : true,
closable : true,
autofocus : true,
inverted : false,
blurring : false,
dimmerSettings : {
closable : false,
useCSS : true
},
context : 'body',
queue : false,
duration : 500,
easing : 'easeOutExpo',
offset : 0,
transition : 'scale',
context : 'body',
padding : 50,
queue : false,
duration : 500,
offset : 0,
transition : 'scale',
onShow : function(){},
onHide : function(){},
// padding with edge of page
padding : 50,
onVisible : function(){},
onHidden : function(){},
// called before show animation
onShow : function(){},
onApprove : function(){ return true; },
onDeny : function(){ return true; },
// called after show animation
onVisible : function(){},
// called before hide animation
onHide : function(){ return true; },
// called after hide animation
onHidden : function(){},
// called after approve selector match
onApprove : function(){ return true; },
// called after deny selector match
onDeny : function(){ return true; },
selector : {
close : '.close, .actions .button',
close : '> .close',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel',
modal : '.ui.modal'
@ -850,11 +880,13 @@ $.fn.modal.settings = {
notFound : 'The element you specified could not be found'
},
className : {
active : 'active',
animating : 'animating',
scrolling : 'scrolling'
active : 'active',
animating : 'animating',
blurring : 'blurring',
scrolling : 'scrolling',
undetached : 'undetached'
}
};
})( jQuery, window , document );
})( jQuery, window, document );

149
web/semantic/src/definitions/modules/modal.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -32,12 +32,10 @@
left: 50%;
text-align: left;
width: @width;
margin-left: @xOffset;
background: @background;
border: @border;
box-shadow: @boxShadow;
transform-origin: @transformOrigin;
border-radius: @borderRadius;
user-select: text;
@ -94,11 +92,13 @@
padding: @headerPadding;
box-shadow: @headerBoxShadow;
color: @headerColor;
border-bottom: @headerBorder;
}
.ui.modal > .header:not(.ui) {
font-size: @headerFontSize;
line-height: @headerLineHeight;
font-weight: @headerFontWeight;
color: @headerColor;
border-bottom: @headerBorder;
}
/*--------------
@ -106,37 +106,46 @@
---------------*/
.ui.modal > .content {
display: table;
table-layout: fixed;
display: block;
width: 100%;
font-size: @contentFontSize;
line-height: @contentLineHeight;
padding: @contentPadding;
background: @contentBackground;
}
.ui.modal > .image.content {
display: flex;
flex-direction: row;
}
/* Image */
.ui.modal > .content > .image {
display: table-cell;
display: block;
flex: 0 1 auto;
width: @imageWidth;
vertical-align: @imageVerticalAlign;
align-self: @imageVerticalAlign;
}
.ui.modal > .content > .image[class*="top aligned"] {
vertical-align: top;
.ui.modal > [class*="top aligned"] {
align-self: top;
}
.ui.modal > .content > .image[class*="middle aligned"] {
vertical-align: middle;
.ui.modal > [class*="middle aligned"] {
align-self: middle;
}
.ui.modal > [class*="stretched"] {
align-self: stretch;
}
/* Description */
.ui.modal > .content > .description {
display: table-cell;
vertical-align: top;
vertical-align: @descriptionVerticalAlign;
display: block;
flex: 1 0 auto;
min-width: 0px;
align-self: @descriptionVerticalAlign;
}
.ui.modal > .content > .icon + .description,
.ui.modal > .content > .image + .description {
flex: 0 1 auto;
min-width: @descriptionMinWidth;
width: @descriptionWidth;
padding-left: @descriptionDistance;
@ -144,17 +153,18 @@
/*rtl:ignore*/
.ui.modal > .content > .image > i.icon {
font-size: @imageIconSize;
margin: 0em;
opacity: 1;
width: auto;
line-height: 1;
font-size: @imageIconSize;
}
/*--------------
Actions
---------------*/
.ui.modal .actions {
.ui.modal > .actions {
background: @actionBackground;
padding: @actionPadding;
border-top: @actionBorder;
@ -201,7 +211,7 @@
}
/* Tablet and Mobile */
@media only screen and (max-width : @computerBreakpoint) {
@media only screen and (max-width : @largestTabletScreen) {
.ui.modal > .header {
padding-right: @closeHitbox;
}
@ -229,6 +239,9 @@
}
/*rtl:ignore*/
.ui.modal .image.content {
flex-direction: column;
}
.ui.modal .content > .image {
display: block;
max-width: 100%;
@ -260,6 +273,14 @@
}
}
/*--------------
Coupling
---------------*/
.ui.inverted.dimmer > .ui.modal {
box-shadow: @invertedBoxShadow;
}
/*******************************
Types
*******************************/
@ -268,7 +289,7 @@
background-color: transparent;
border: none;
border-radius: 0em;
box-shadow: 0px 0px 0px 0px;
box-shadow: none !important;
color: @basicModalColor;
}
.ui.basic.modal > .header,
@ -284,41 +305,20 @@
right: @basicModalCloseRight;
}
/* Tablet and Mobile */
@media only screen and (max-width : @computerBreakpoint) {
.ui.inverted.dimmer > .basic.modal {
color: @basicInvertedModalColor;
}
.ui.inverted.dimmer > .ui.basic.modal > .header {
color: @basicInvertedModalHeaderColor;
}
/* Tablet and Mobile */
@media only screen and (max-width : @largestTabletScreen) {
.ui.basic.modal > .close {
color: @basicInnerCloseColor;
}
}
/*******************************
Variations
*******************************/
/* A modal that cannot fit on the page */
.scrolling.dimmable.dimmed {
overflow: hidden;
}
.scrolling.dimmable.dimmed > .dimmer {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.dimmable > .dimmer {
position: fixed;
}
.ui.scrolling.modal {
position: static;
margin: @scrollingMargin auto !important;
}
@media only screen and (max-width : @computerBreakpoint) {
.ui.scrolling.modal {
margin-top: @mobileScrollingMargin;
margin-bottom: @mobileScrollingMargin;
}
}
/*******************************
States
@ -332,6 +332,53 @@
Variations
*******************************/
/*--------------
Scrolling
---------------*/
/* A modal that cannot fit on the page */
.scrolling.dimmable.dimmed {
overflow: hidden;
}
.scrolling.dimmable.dimmed > .dimmer {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.dimmable > .dimmer {
position: fixed;
}
.modals.dimmer .ui.scrolling.modal {
position: static !important;
margin: @scrollingMargin auto !important;
}
/* undetached scrolling */
.scrolling.undetached.dimmable.dimmed {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling.undetached.dimmable.dimmed > .dimmer {
overflow: hidden;
}
.scrolling.undetached.dimmable .ui.scrolling.modal {
position: absolute;
left: 50%;
margin-top: @scrollingMargin !important;
}
/* Coupling with Sidebar */
.undetached.dimmable.dimmed > .pusher {
z-index: auto;
}
@media only screen and (max-width : @largestTabletScreen) {
.modals.dimmer .ui.scrolling.modal {
margin-top: @mobileScrollingMargin !important;
margin-bottom: @mobileScrollingMargin !important;
}
}
/*--------------
Full Screen
---------------*/
@ -363,7 +410,7 @@
}
/* Small */
.ui.small.modal > .header {
.ui.small.modal > .header:not(.ui) {
font-size: @smallHeaderSize;
}

29
web/semantic/src/definitions/modules/nag.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -76,11 +76,9 @@ $.fn.nag = function(parameters) {
module.verbose('Initializing element');
$module
.on('click' + eventNamespace, selector.close, module.dismiss)
.data(moduleNamespace, module)
;
$close
.on('click' + eventNamespace, module.dismiss)
;
if(settings.detachable && $module.parent()[0] !== $context[0]) {
$module
@ -196,6 +194,10 @@ $.fn.nag = function(parameters) {
window.localStorage.setItem(key, value);
module.debug('Value stored using local storage', key, value);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
window.sessionStorage.setItem(key, value);
module.debug('Value stored using session storage', key, value);
}
else if($.cookie !== undefined) {
$.cookie(key, value, options);
module.debug('Value stored using cookie', key, value, options);
@ -212,6 +214,9 @@ $.fn.nag = function(parameters) {
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
storedValue = window.localStorage.getItem(key);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
storedValue = window.sessionStorage.getItem(key);
}
// get by cookie
else if($.cookie !== undefined) {
storedValue = $.cookie(key);
@ -228,9 +233,12 @@ $.fn.nag = function(parameters) {
var
options = module.get.storageOptions()
;
if(settings.storageMethod == 'local' && window.store !== undefined) {
if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
window.localStorage.removeItem(key);
}
else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
window.sessionStorage.removeItem(key);
}
// store by cookie
else if($.cookie !== undefined) {
$.removeCookie(key, options);
@ -310,7 +318,7 @@ $.fn.nag = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -423,7 +431,7 @@ $.fn.nag.settings = {
name : 'Nag',
debug : false,
verbose : true,
verbose : false,
performance : true,
namespace : 'Nag',
@ -454,8 +462,9 @@ $.fn.nag.settings = {
value : 'dismiss',
error: {
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
method : 'The method you called is not defined.'
noCookieStorage : '$.cookie is not included. A storage solution is required.',
noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
method : 'The method you called is not defined.'
},
className : {
@ -474,4 +483,4 @@ $.fn.nag.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/nag.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

675
web/semantic/src/definitions/modules/popup.js
View file

File diff suppressed because it is too large Load diff

100
web/semantic/src/definitions/modules/popup.less Normal file → Executable file
View file

@ -1,9 +1,10 @@
/*!
* # Semantic UI - Popup
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -31,13 +32,13 @@
right: 0px;
/* Fixes content being squished when inline (moz only) */
min-width: -moz-max-content;
min-width: min-content;
z-index: @zIndex;
border: @border;
line-height: @lineHeight;
max-width: @maxWidth;
background-color: @background;
background: @background;
padding: @verticalPadding @horizontalPadding;
font-weight: @fontWeight;
@ -83,17 +84,43 @@
.ui.popup {
margin: 0em;
}
.ui.popup.bottom {
margin: @popupDistanceAway 0em 0em;
}
.ui.popup.top {
/* Extending from Top */
.ui.top.popup {
margin: 0em 0em @popupDistanceAway;
}
.ui.popup.left.center {
margin: 0em @popupDistanceAway 0em 0em;
.ui.top.left.popup {
transform-origin: left bottom;
}
.ui.popup.right.center {
.ui.top.center.popup {
transform-origin: center bottom;
}
.ui.top.right.popup {
transform-origin: right bottom;
}
/* Extending from Vertical Center */
.ui.left.center.popup {
margin: 0em @popupDistanceAway 0em 0em;
transform-origin: right 50%;
}
.ui.right.center.popup {
margin: 0em 0em 0em @popupDistanceAway;
transform-origin: left 50%;
}
/* Extending from Bottom */
.ui.bottom.popup {
margin: @popupDistanceAway 0em 0em;
}
.ui.bottom.left.popup {
transform-origin: left top;
}
.ui.bottom.center.popup {
transform-origin: center top;
}
.ui.bottom.right.popup {
transform-origin: right top;
}
/*--------------
@ -113,6 +140,7 @@
.ui.bottom.left.popup {
margin-left: @boxArrowOffset;
}
/*rtl:rename*/
.ui.bottom.left.popup:before {
top: @arrowOffset;
left: @arrowDistanceFromEdge;
@ -125,6 +153,7 @@
.ui.bottom.right.popup {
margin-right: @boxArrowOffset;
}
/*rtl:rename*/
.ui.bottom.right.popup:before {
top: @arrowOffset;
right: @arrowDistanceFromEdge;
@ -145,6 +174,7 @@
.ui.top.left.popup {
margin-left: @boxArrowOffset;
}
/*rtl:rename*/
.ui.top.left.popup:before {
bottom: @arrowOffset;
left: @arrowDistanceFromEdge;
@ -155,6 +185,7 @@
.ui.top.right.popup {
margin-right: @boxArrowOffset;
}
/*rtl:rename*/
.ui.top.right.popup:before {
bottom: @arrowOffset;
right: @arrowDistanceFromEdge;
@ -164,6 +195,7 @@
}
/*--- Left Center ---*/
/*rtl:rename*/
.ui.left.center.popup:before {
top: 50%;
right: @arrowOffset;
@ -174,6 +206,7 @@
}
/*--- Right Center ---*/
/*rtl:rename*/
.ui.right.center.popup:before {
top: 50%;
left: @arrowOffset;
@ -183,6 +216,31 @@
box-shadow: @rightArrowBoxShadow;
}
/* Arrow Color By Location */
.ui.bottom.popup:before {
background: @arrowTopBackground;
}
.ui.right.center.popup:before,
.ui.left.center.popup:before {
background: @arrowCenterBackground;
}
.ui.top.popup:before {
background: @arrowBottomBackground;
}
/* Inverted Arrow Color */
.ui.inverted.bottom.popup:before {
background: @invertedArrowTopBackground;
}
.ui.inverted.right.center.popup:before,
.ui.inverted.left.center.popup:before {
background: @invertedArrowCenterBackground;
}
.ui.inverted.top.popup:before {
background: @invertedArrowBottomBackground;
}
/*******************************
Coupling
*******************************/
@ -208,6 +266,11 @@
display: block;
}
.ui.visible.popup {
transform: translateZ(0px);
backface-visibility: hidden;
}
/*******************************
Variations
@ -233,6 +296,13 @@
max-width: @veryWideWidth;
}
@media only screen and (max-width: @largestMobileScreen) {
.ui.wide.popup,
.ui[class*="very wide"].popup {
max-width: @maxWidth;
}
}
/*--------------
Fluid
@ -277,6 +347,12 @@
Sizes
---------------*/
.ui.mini.popup {
font-size: @mini;
}
.ui.tiny.popup {
font-size: @tiny;
}
.ui.small.popup {
font-size: @small;
}
@ -291,4 +367,4 @@
}
.loadUIOverrides();
.loadUIOverrides();

216
web/semantic/src/definitions/modules/progress.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -63,11 +63,12 @@ $.fn.progress = function(parameters) {
initialize: function() {
module.debug('Initializing progress bar', settings);
transitionEnd = module.get.transitionEnd();
module.set.duration();
module.set.transitionEvent();
module.read.metadata();
module.set.duration();
module.set.initials();
module.read.settings();
module.instantiate();
},
@ -88,6 +89,7 @@ $.fn.progress = function(parameters) {
reset: function() {
module.set.percent(0);
module.set.value(0);
},
complete: function() {
@ -98,92 +100,116 @@ $.fn.progress = function(parameters) {
read: {
metadata: function() {
if( $module.data(metadata.percent) ) {
module.verbose('Current percent value set from metadata');
module.percent = $module.data(metadata.percent);
var
data = {
percent : $module.data(metadata.percent),
total : $module.data(metadata.total),
value : $module.data(metadata.value)
}
;
if(data.percent) {
module.debug('Current percent value set from metadata', data.percent);
module.set.percent(data.percent);
}
if( $module.data(metadata.total) ) {
module.verbose('Total value set from metadata');
module.total = $module.data(metadata.total);
if(data.total) {
module.debug('Total value set from metadata', data.total);
module.set.total(data.total);
}
if( $module.data(metadata.value) ) {
module.verbose('Current value set from metadata');
module.value = $module.data(metadata.value);
if(data.value) {
module.debug('Current value set from metadata', data.value);
module.set.value(data.value);
module.set.progress(data.value);
}
},
currentValue: function() {
return (module.value !== undefined)
? module.value
: false
;
settings: function() {
if(settings.total !== false) {
module.debug('Current total set in settings', settings.total);
module.set.total(settings.total);
}
if(settings.value !== false) {
module.debug('Current value set in settings', settings.value);
module.set.value(settings.value);
module.set.progress(module.value);
}
if(settings.percent !== false) {
module.debug('Current percent set in settings', settings.percent);
module.set.percent(settings.percent);
}
}
},
increment: function(incrementValue) {
var
total = module.total || false,
edgeValue,
maxValue,
startValue,
newValue
;
if(total) {
startValue = module.value || 0;
if( module.has.total() ) {
startValue = module.get.value();
incrementValue = incrementValue || 1;
newValue = startValue + incrementValue;
edgeValue = module.total;
module.debug('Incrementing value by', incrementValue, startValue, edgeValue);
if(newValue > edgeValue ) {
module.debug('Value cannot increment above total', edgeValue);
newValue = edgeValue;
maxValue = module.get.total();
module.debug('Incrementing value', startValue, newValue, maxValue);
if(newValue > maxValue ) {
module.debug('Value cannot increment above total', maxValue);
newValue = maxValue;
}
module.set.progress(newValue);
}
else {
startValue = module.percent || 0;
startValue = module.get.percent();
incrementValue = incrementValue || module.get.randomValue();
newValue = startValue + incrementValue;
edgeValue = 100;
module.debug('Incrementing percentage by', incrementValue, startValue);
if(newValue > edgeValue ) {
maxValue = 100;
module.debug('Incrementing percentage by', startValue, newValue);
if(newValue > maxValue ) {
module.debug('Value cannot increment above 100 percent');
newValue = edgeValue;
newValue = maxValue;
}
module.set.progress(newValue);
}
module.set.progress(newValue);
},
decrement: function(decrementValue) {
var
total = module.total || false,
edgeValue = 0,
total = module.get.total(),
startValue,
newValue
;
if(total) {
startValue = module.value || 0;
startValue = module.get.value();
decrementValue = decrementValue || 1;
newValue = startValue - decrementValue;
module.debug('Decrementing value by', decrementValue, startValue);
}
else {
startValue = module.percent || 0;
startValue = module.get.percent();
decrementValue = decrementValue || module.get.randomValue();
newValue = startValue - decrementValue;
module.debug('Decrementing percentage by', decrementValue, startValue);
}
if(newValue < edgeValue) {
if(newValue < 0) {
module.debug('Value cannot decrement below 0');
newValue = 0;
}
module.set.progress(newValue);
},
has: {
total: function() {
return (module.get.total() !== false);
}
},
get: {
text: function(templateText) {
var
value = module.value || 0,
total = module.total || 0,
percent = (module.is.visible() && animating)
percent = (animating)
? module.get.displayPercent()
: module.percent || 0,
left = (module.total > 0)
@ -200,11 +226,22 @@ $.fn.progress = function(parameters) {
module.debug('Adding variables to progress bar text', templateText);
return templateText;
},
randomValue: function() {
module.debug('Generating random increment percentage');
return Math.floor((Math.random() * settings.random.max) + settings.random.min);
},
numericValue: function(value) {
return (typeof value === 'string')
? (value.replace(/[^\d.]/g, '') !== '')
? +(value.replace(/[^\d.]/g, ''))
: false
: value
;
},
transitionEnd: function() {
var
element = document.createElement('element'),
@ -233,17 +270,17 @@ $.fn.progress = function(parameters) {
? (barWidth / totalWidth * 100)
: module.percent
;
if(settings.precision === 0) {
return Math.round(displayPercent);
}
return Math.round(displayPercent * (10 * settings.precision) / (10 * settings.precision) );
return (settings.precision > 0)
? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision)
: Math.round(displayPercent)
;
},
percent: function() {
return module.percent || 0;
},
value: function() {
return module.value || false;
return module.value || 0;
},
total: function() {
return module.total || false;
@ -319,66 +356,37 @@ $.fn.progress = function(parameters) {
module.verbose('Setting progress bar transition duration', duration);
$bar
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
})
;
},
initials: function() {
if(settings.total !== false) {
module.verbose('Current total set in settings', settings.total);
module.total = settings.total;
}
if(settings.value !== false) {
module.verbose('Current value set in settings', settings.value);
module.value = settings.value;
}
if(settings.percent !== false) {
module.verbose('Current percent set in settings', settings.percent);
module.percent = settings.percent;
}
if(module.percent !== undefined) {
module.set.percent(module.percent);
}
else if(module.value !== undefined) {
module.set.progress(module.value);
}
},
percent: function(percent) {
percent = (typeof percent == 'string')
? +(percent.replace('%', ''))
: percent
;
if(percent > 0 && percent < 1) {
module.verbose('Module percentage passed as decimal, converting');
percent = percent * 100;
}
// round percentage
if(settings.precision === 0) {
percent = Math.round(percent);
}
else {
percent = Math.round(percent * (10 * settings.precision) / (10 * settings.precision) );
}
// round display percentage
percent = (settings.precision > 0)
? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision)
: Math.round(percent)
;
module.percent = percent;
if(module.total) {
module.value = Math.round( (percent / 100) * module.total);
}
else if(settings.limitValues) {
module.value = (module.value > 100)
? 100
: (module.value < 0)
? 0
: module.value
if( !module.has.total() ) {
module.value = (settings.precision > 0)
? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision)
: Math.round( (percent / 100) * module.total * 10) / 10
;
if(settings.limitValues) {
module.value = (module.value > 100)
? 100
: (module.value < 0)
? 0
: module.value
;
}
}
module.set.barWidth(percent);
if( module.is.visible() ) {
module.set.labelInterval();
}
module.set.labelInterval();
module.set.labels();
settings.onChange.call(element, percent, module.value, module.total);
},
@ -500,23 +508,25 @@ $.fn.progress = function(parameters) {
}
settings.onError.call(element, module.value, module.total);
},
transitionEvent: function() {
transitionEnd = module.get.transitionEnd();
},
total: function(totalValue) {
module.total = totalValue;
},
value: function(value) {
module.value = value;
},
progress: function(value) {
var
numericValue = (typeof value === 'string')
? (value.replace(/[^\d.]/g, '') !== '')
? +(value.replace(/[^\d.]/g, ''))
: false
: value,
numericValue = module.get.numericValue(value),
percentComplete
;
if(numericValue === false) {
module.error(error.nonNumeric, value);
}
if(module.total) {
module.value = numericValue;
if( module.has.total() ) {
module.set.value(numericValue);
percentComplete = (numericValue / module.total) * 100;
module.debug('Calculating percent complete from total', percentComplete);
module.set.percent( percentComplete );
@ -598,7 +608,7 @@ $.fn.progress = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -712,7 +722,7 @@ $.fn.progress.settings = {
namespace : 'progress',
debug : false,
verbose : true,
verbose : false,
performance : true,
random : {
@ -727,7 +737,7 @@ $.fn.progress.settings = {
limitValues : true,
label : 'percent',
precision : 1,
precision : 0,
framerate : (1000 / 30), /// 30 fps
percent : false,
@ -782,4 +792,4 @@ $.fn.progress.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

301
web/semantic/src/definitions/modules/progress.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -42,83 +42,6 @@
margin: @lastMargin;
}
/* Indicating */
.ui.indicating.progress .bar[style*="width: 1"],
.ui.indicating.progress .bar[style*="width: 2"] {
background-color: @indicatingFirstColor;
}
.ui.indicating.progress .bar[style*="width: 3"] {
background-color: @indicatingSecondColor;
}
.ui.indicating.progress .bar[style*="width: 4"],
.ui.indicating.progress .bar[style*="width: 5"] {
background-color: @indicatingThirdColor;
}
.ui.indicating.progress .bar[style*="width: 6"] {
background-color: @indicatingFourthColor;
}
.ui.indicating.progress .bar[style*="width: 7"],
.ui.indicating.progress .bar[style*="width: 8"] {
background-color: @indicatingFifthColor;
}
.ui.indicating.progress .bar[style*="width: 9"],
.ui.indicating.progress .bar[style*="width: 100"] {
background-color: @indicatingSixthColor;
}
/* Indicating Label */
.ui.indicating.progress[data-percent^="1"] .label,
.ui.indicating.progress[data-percent^="2"] .label {
color: @indicatingFirstColor;
}
.ui.indicating.progress[data-percent^="3"] .label {
color: @indicatingSecondColor;
}
.ui.indicating.progress[data-percent^="4"] .label,
.ui.indicating.progress[data-percent^="5"] .label {
color: @indicatingThirdColor;
}
.ui.indicating.progress[data-percent^="6"] .label {
color: @indicatingFourthColor;
}
.ui.indicating.progress[data-percent^="7"] .label,
.ui.indicating.progress[data-percent^="8"] .label {
color: @indicatingFifthColor;
}
.ui.indicating.progress[data-percent^="9"] .label,
.ui.indicating.progress[data-percent^="100"] .label {
color: @indicatingSixthColor;
}
/* Single Digits */
.ui.indicating.progress .bar[style^="width: 1%"],
.ui.indicating.progress .bar[style^="width: 2%"],
.ui.indicating.progress .bar[style^="width: 3%"],
.ui.indicating.progress .bar[style^="width: 4%"],
.ui.indicating.progress .bar[style^="width: 5%"],
.ui.indicating.progress .bar[style^="width: 6%"],
.ui.indicating.progress .bar[style^="width: 7%"],
.ui.indicating.progress .bar[style^="width: 8%"],
.ui.indicating.progress .bar[style^="width: 9%"] {
background-color: @indicatingFirstColor;
}
.ui.indicating.progress[data-percent="1"] .label,
.ui.indicating.progress[data-percent="2"] .label,
.ui.indicating.progress[data-percent="3"] .label,
.ui.indicating.progress[data-percent="4"] .label,
.ui.indicating.progress[data-percent="5"] .label,
.ui.indicating.progress[data-percent="6"] .label,
.ui.indicating.progress[data-percent="7"] .label,
.ui.indicating.progress[data-percent="8"] .label,
.ui.indicating.progress[data-percent="9"] .label {
color: @indicatingFirstColor;
}
/* Indicating Success */
.ui.indicating.progress.success .label {
color: @successHeaderColor;
}
/*******************************
Content
*******************************/
@ -138,7 +61,7 @@
/* Percent Complete */
.ui.progress .bar > .progress {
white-space: nowrap;
position: absolute;
position: @progressPosition;
width: @progressWidth;
font-size: @progressSize;
top: @progressTop;
@ -170,6 +93,88 @@
}
/*******************************
Types
*******************************/
/* Indicating */
.ui.indicating.progress[data-percent^="1"] .bar,
.ui.indicating.progress[data-percent^="2"] .bar {
background-color: @indicatingFirstColor;
}
.ui.indicating.progress[data-percent^="3"] .bar {
background-color: @indicatingSecondColor;
}
.ui.indicating.progress[data-percent^="4"] .bar,
.ui.indicating.progress[data-percent^="5"] .bar {
background-color: @indicatingThirdColor;
}
.ui.indicating.progress[data-percent^="6"] .bar {
background-color: @indicatingFourthColor;
}
.ui.indicating.progress[data-percent^="7"] .bar,
.ui.indicating.progress[data-percent^="8"] .bar {
background-color: @indicatingFifthColor;
}
.ui.indicating.progress[data-percent^="9"] .bar,
.ui.indicating.progress[data-percent^="100"] .bar {
background-color: @indicatingSixthColor;
}
/* Indicating Label */
.ui.indicating.progress[data-percent^="1"] .label,
.ui.indicating.progress[data-percent^="2"] .label {
color: @indicatingFirstLabelColor;
}
.ui.indicating.progress[data-percent^="3"] .label {
color: @indicatingSecondLabelColor;
}
.ui.indicating.progress[data-percent^="4"] .label,
.ui.indicating.progress[data-percent^="5"] .label {
color: @indicatingThirdLabelColor;
}
.ui.indicating.progress[data-percent^="6"] .label {
color: @indicatingFourthLabelColor;
}
.ui.indicating.progress[data-percent^="7"] .label,
.ui.indicating.progress[data-percent^="8"] .label {
color: @indicatingFifthLabelColor;
}
.ui.indicating.progress[data-percent^="9"] .label,
.ui.indicating.progress[data-percent^="100"] .label {
color: @indicatingSixthLabelColor;
}
/* Single Digits */
.ui.indicating.progress[data-percent="1"] .bar,
.ui.indicating.progress[data-percent="2"] .bar,
.ui.indicating.progress[data-percent="3"] .bar,
.ui.indicating.progress[data-percent="4"] .bar,
.ui.indicating.progress[data-percent="5"] .bar,
.ui.indicating.progress[data-percent="6"] .bar,
.ui.indicating.progress[data-percent="7"] .bar,
.ui.indicating.progress[data-percent="8"] .bar,
.ui.indicating.progress[data-percent="9"] .bar {
background-color: @indicatingFirstColor;
}
.ui.indicating.progress[data-percent="1"] .label,
.ui.indicating.progress[data-percent="2"] .label,
.ui.indicating.progress[data-percent="3"] .label,
.ui.indicating.progress[data-percent="4"] .label,
.ui.indicating.progress[data-percent="5"] .label,
.ui.indicating.progress[data-percent="6"] .label,
.ui.indicating.progress[data-percent="7"] .label,
.ui.indicating.progress[data-percent="8"] .label,
.ui.indicating.progress[data-percent="9"] .label {
color: @indicatingFirstLabelColor;
}
/* Indicating Success */
.ui.indicating.progress.success .label {
color: @successHeaderColor;
}
/*******************************
States
*******************************/
@ -353,62 +358,110 @@
Colors
---------------*/
.ui.black.progress .bar {
background-color: @black;
}
.ui.blue.progress .bar {
background-color: @blue;
}
.ui.green.progress .bar {
background-color: @green;
}
.ui.orange.progress .bar {
background-color: @orange;
}
.ui.pink.progress .bar {
background-color: @pink;
}
.ui.purple.progress .bar {
background-color: @purple;
}
/* Red */
.ui.red.progress .bar {
background-color: @red;
}
.ui.teal.progress .bar {
background-color: @teal;
}
.ui.yellow.progress .bar {
background-color: @yellow;
}
.ui.black.inverted.progress .bar {
background-color: @lightBlack;
}
.ui.blue.inverted.progress .bar {
background-color: @lightBlue;
}
.ui.green.inverted.progress .bar {
background-color: @lightGreen;
}
.ui.orange.inverted.progress .bar {
background-color: @lightOrange;
}
.ui.pink.inverted.progress .bar {
background-color: @lightPink;
}
.ui.purple.inverted.progress .bar {
background-color: @lightPurple;
}
.ui.red.inverted.progress .bar {
background-color: @lightRed;
}
.ui.teal.inverted.progress .bar {
background-color: @lightTeal;
/* Orange */
.ui.orange.progress .bar {
background-color: @orange;
}
.ui.orange.inverted.progress .bar {
background-color: @lightOrange;
}
/* Yellow */
.ui.yellow.progress .bar {
background-color: @yellow;
}
.ui.yellow.inverted.progress .bar {
background-color: @lightYellow;
}
/* Olive */
.ui.olive.progress .bar {
background-color: @olive;
}
.ui.olive.inverted.progress .bar {
background-color: @lightOlive;
}
/* Green */
.ui.green.progress .bar {
background-color: @green;
}
.ui.green.inverted.progress .bar {
background-color: @lightGreen;
}
/* Teal */
.ui.teal.progress .bar {
background-color: @teal;
}
.ui.teal.inverted.progress .bar {
background-color: @lightTeal;
}
/* Blue */
.ui.blue.progress .bar {
background-color: @blue;
}
.ui.blue.inverted.progress .bar {
background-color: @lightBlue;
}
/* Violet */
.ui.violet.progress .bar {
background-color: @violet;
}
.ui.violet.inverted.progress .bar {
background-color: @lightViolet;
}
/* Purple */
.ui.purple.progress .bar {
background-color: @purple;
}
.ui.purple.inverted.progress .bar {
background-color: @lightPurple;
}
/* Pink */
.ui.pink.progress .bar {
background-color: @pink;
}
.ui.pink.inverted.progress .bar {
background-color: @lightPink;
}
/* Brown */
.ui.brown.progress .bar {
background-color: @brown;
}
.ui.brown.inverted.progress .bar {
background-color: @lightBrown;
}
/* Grey */
.ui.grey.progress .bar {
background-color: @grey;
}
.ui.grey.inverted.progress .bar {
background-color: @lightGrey;
}
/* Black */
.ui.black.progress .bar {
background-color: @black;
}
.ui.black.inverted.progress .bar {
background-color: @lightBlack;
}
/*--------------
Sizes
---------------*/

134
web/semantic/src/definitions/modules/rating.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -66,14 +66,7 @@ $.fn.rating = function(parameters) {
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.set.rating( module.get.initialRating() );
module.instantiate();
},
@ -87,12 +80,10 @@ $.fn.rating = function(parameters) {
destroy: function() {
module.verbose('Destroying previous instance', instance);
module.remove.events();
$module
.removeData(moduleNamespace)
;
$icon
.off(eventNamespace)
;
},
refresh: function() {
@ -102,11 +93,12 @@ $.fn.rating = function(parameters) {
setup: {
layout: function() {
var
maxRating = $module.data(metadata.maxRating) || settings.maxRating
maxRating = module.get.maxRating(),
html = $.fn.rating.settings.templates.icon(maxRating)
;
module.debug('Generating icon html dynamically');
$module
.html($.fn.rating.settings.templates.icon(maxRating))
.html(html)
;
module.refresh();
}
@ -141,7 +133,7 @@ $.fn.rating = function(parameters) {
click: function() {
var
$activeIcon = $(this),
currentRating = module.getRating(),
currentRating = module.get.rating(),
rating = $icon.index($activeIcon) + 1,
canClear = (settings.clearable == 'auto')
? ($icon.length === 1)
@ -151,31 +143,39 @@ $.fn.rating = function(parameters) {
module.clearRating();
}
else {
module.setRating( rating );
module.set.rating( rating );
}
}
},
clearRating: function() {
module.debug('Clearing current rating');
module.setRating(0);
module.set.rating(0);
},
getRating: function() {
var
currentRating = $icon.filter('.' + className.active).length
;
module.verbose('Current rating retrieved', currentRating);
return currentRating;
bind: {
events: function() {
module.verbose('Binding events');
$module
.on('mouseenter' + eventNamespace, selector.icon, module.event.mouseenter)
.on('mouseleave' + eventNamespace, selector.icon, module.event.mouseleave)
.on('click' + eventNamespace, selector.icon, module.event.click)
;
}
},
remove: {
events: function() {
module.verbose('Removing events');
$module
.off(eventNamespace)
;
}
},
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.bind.events();
$module
.removeClass(className.disabled)
;
@ -183,37 +183,61 @@ $.fn.rating = function(parameters) {
disable: function() {
module.debug('Setting rating to read-only mode');
$icon
.off(eventNamespace)
;
module.remove.events();
$module
.addClass(className.disabled)
;
},
setRating: function(rating) {
var
ratingIndex = (rating - 1 >= 0)
? (rating - 1)
: 0,
$activeIcon = $icon.eq(ratingIndex)
;
$module
.removeClass(className.selected)
;
$icon
.removeClass(className.selected)
.removeClass(className.active)
;
if(rating > 0) {
module.verbose('Setting current rating to', rating);
$activeIcon
.prevAll()
.andSelf()
.addClass(className.active)
get: {
initialRating: function() {
if($module.data(metadata.rating) !== undefined) {
$module.removeData(metadata.rating);
return $module.data(metadata.rating);
}
return settings.initialRating;
},
maxRating: function() {
if($module.data(metadata.maxRating) !== undefined) {
$module.removeData(metadata.maxRating);
return $module.data(metadata.maxRating);
}
return settings.maxRating;
},
rating: function() {
var
currentRating = $icon.filter('.' + className.active).length
;
module.verbose('Current rating retrieved', currentRating);
return currentRating;
}
},
set: {
rating: function(rating) {
var
ratingIndex = (rating - 1 >= 0)
? (rating - 1)
: 0,
$activeIcon = $icon.eq(ratingIndex)
;
$module
.removeClass(className.selected)
;
$icon
.removeClass(className.selected)
.removeClass(className.active)
;
if(rating > 0) {
module.verbose('Setting current rating to', rating);
$activeIcon
.prevAll()
.andSelf()
.addClass(className.active)
;
}
settings.onRate.call(element, rating);
}
settings.onRate.call(element, rating);
},
setting: function(name, value) {
@ -285,7 +309,7 @@ $.fn.rating = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -400,7 +424,7 @@ $.fn.rating.settings = {
namespace : 'rating',
debug : false,
verbose : true,
verbose : false,
performance : true,
initialRating : 0,
@ -448,4 +472,4 @@ $.fn.rating.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

113
web/semantic/src/definitions/modules/rating.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -24,32 +24,26 @@
*******************************/
.ui.rating {
display: @display;
display: inline-flex;
white-space: @whiteSpace;
vertical-align: @verticalAlign;
}
.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: @iconWidth;
height: auto;
text-align: center;
padding: 0em;
margin: 0em;
text-align: center;
font-weight: normal;
font-style: normal;
flex: 1 0 auto;
cursor: @iconCursor;
width: @iconWidth;
height: @iconHeight;
transition: @iconTransition;
}
@ -57,6 +51,31 @@
Types
*******************************/
/*-------------------
Standard
--------------------*/
/* Inactive Icon */
.ui.rating .icon {
background: @inactiveBackground;
color: @inactiveColor;
}
/* Active Icon */
.ui.rating .active.icon {
background: @activeBackground;
color: @activeColor;
}
/* Selected Icon */
.ui.rating .icon.selected,
.ui.rating .icon.selected.active {
background: @selectedBackground;
color: @selectedColor;
}
/*-------------------
Star
--------------------*/
@ -64,31 +83,27 @@
/* Inactive */
.ui.star.rating .icon {
width: @starIconWidth;
height: @starIconHeight;
background: @starInactiveBackground;
color: @starInactiveColor;
text-shadow: @starInactiveTextShadow;
}
/* Active Star */
.ui.star.rating .active.icon {
background: @starActiveBackground !important;
color: @starActiveColor !important;
text-shadow: @starActiveShadow;
text-shadow: @starActiveTextShadow !important;
}
/* Selected Star */
.ui.star.rating .icon.selected,
.ui.star.rating .icon.selected.active {
background: @starSelectedBackground !important;
color: @starSelectedColor !important;
text-shadow: @starSelectedTextShadow !important;
}
.ui.star.rating.partial {
position: relative;
z-index: 1;
}
.ui.star.rating.partial:before {
position: absolute;
z-index: -1;
}
/*-------------------
Heart
@ -96,19 +111,25 @@
.ui.heart.rating .icon {
width: @heartIconWidth;
height: @heartIconHeight;
background: @heartInactiveBackground;
color: @heartInactiveColor;
text-shadow: @heartInactiveTextShadow !important;
}
/* Active Heart */
.ui.heart.rating .active.icon {
background: @heartActiveBackground !important;
color: @heartActiveColor !important;
text-shadow: @heartActiveShadow;
text-shadow: @heartActiveTextShadow !important;
}
/* Selected Heart */
.ui.heart.rating .icon.selected,
.ui.heart.rating .icon.selected.active {
background: @heartSelectedBackground !important;
color: @heartSelectedColor !important;
text-shadow: @heartSelectedTextShadow !important;
}
@ -116,24 +137,6 @@
States
*******************************/
/* Inactive Icon */
.ui.rating .icon {
color: @inactiveColor;
}
/* Active Icon */
.ui.rating .active.icon {
color: @activeColor;
}
/* Selected Icon */
.ui.rating .icon.selected,
.ui.rating .icon.selected.active {
color: @hoverColor;
}
/*-------------------
Disabled
--------------------*/
@ -145,12 +148,12 @@
/*-------------------
Interacting (Active)
User Interactive
--------------------*/
/* Selected Rating */
.ui.rating.selected .active.icon {
opacity: @interactiveIconOpacity;
opacity: @interactiveActiveIconOpacity;
}
.ui.rating.selected .icon.selected,
.ui.rating .icon.selected {
@ -163,25 +166,25 @@
Variations
*******************************/
.ui.mini.rating .icon {
.ui.mini.rating {
font-size: @mini;
}
.ui.tiny.rating .icon {
.ui.tiny.rating {
font-size: @tiny;
}
.ui.small.rating .icon {
.ui.small.rating {
font-size: @small;
}
.ui.rating .icon {
.ui.rating {
font-size: @medium;
}
.ui.large.rating .icon {
.ui.large.rating {
font-size: @large;
}
.ui.huge.rating .icon {
.ui.huge.rating {
font-size: @huge;
}
.ui.massive.rating .icon {
.ui.massive.rating {
font-size: @massive;
}

631
web/semantic/src/definitions/modules/search.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -29,11 +29,14 @@ $.fn.search = function(parameters) {
$(this)
.each(function() {
var
settings = $.extend(true, {}, $.fn.search.settings, parameters),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.search.settings, parameters)
: $.extend({}, $.fn.search.settings),
className = settings.className,
metadata = settings.metadata,
regExp = settings.regExp,
fields = settings.fields,
selector = settings.selector,
error = settings.error,
namespace = settings.namespace,
@ -53,37 +56,15 @@ $.fn.search = function(parameters) {
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'
;
if(settings.automatic) {
$prompt
.on(inputEvent + eventNamespace, module.throttle)
.attr('autocomplete', 'off')
;
}
$prompt
.on('focus' + eventNamespace, module.event.focus)
.on('blur' + eventNamespace, module.event.blur)
.on('keydown' + eventNamespace, module.handleKeyboard)
;
$searchButton
.on('click' + eventNamespace, module.query)
;
$results
.on('mousedown' + eventNamespace, module.event.result.mousedown)
.on('mouseup' + eventNamespace, module.event.result.mouseup)
.on('click' + eventNamespace, selector.result, module.event.result.click)
;
module.determine.searchFields();
module.bind.events();
module.set.type();
module.create.results();
module.instantiate();
},
instantiate: function() {
@ -96,35 +77,86 @@ $.fn.search = function(parameters) {
destroy: function() {
module.verbose('Destroying instance');
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
$prompt
.off(eventNamespace)
;
$searchButton
.off(eventNamespace)
;
$results
.off(eventNamespace)
;
},
bind: {
events: function() {
module.verbose('Binding events to search');
if(settings.automatic) {
$module
.on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
;
$prompt
.attr('autocomplete', 'off')
;
}
$module
// prompt
.on('focus' + eventNamespace, selector.prompt, module.event.focus)
.on('blur' + eventNamespace, selector.prompt, module.event.blur)
.on('keydown' + eventNamespace, selector.prompt, module.handleKeyboard)
// search button
.on('click' + eventNamespace, selector.searchButton, module.query)
// results
.on('mousedown' + eventNamespace, selector.results, module.event.result.mousedown)
.on('mouseup' + eventNamespace, selector.results, module.event.result.mouseup)
.on('click' + eventNamespace, selector.result, module.event.result.click)
;
}
},
determine: {
searchFields: function() {
// this makes sure $.extend does not add specified search fields to default fields
// this is the only setting which should not extend defaults
if(parameters && parameters.searchFields !== undefined) {
settings.searchFields = parameters.searchFields;
}
}
},
event: {
input: function() {
clearTimeout(module.timer);
module.timer = setTimeout(module.query, settings.searchDelay);
},
focus: function() {
module.set.focus();
clearTimeout(module.timer);
module.throttle();
if( module.has.minimumCharacters() ) {
module.showResults();
module.query();
if( module.can.show() ) {
module.showResults();
}
}
},
blur: function(event) {
var
pageLostFocus = (document.activeElement === this)
pageLostFocus = (document.activeElement === this),
callback = function() {
module.cancel.query();
module.remove.focus();
module.timer = setTimeout(module.hideResults, settings.hideDelay);
}
;
if(!pageLostFocus && !module.resultsClicked) {
module.cancel.query();
module.remove.focus();
module.timer = setTimeout(module.hideResults, settings.hideDelay);
if(pageLostFocus) {
return;
}
if(module.resultsClicked) {
module.debug('Determining if user action caused search to close');
$module
.one('click', selector.results, function(event) {
if( !module.is.animating() && !module.is.hidden() ) {
callback();
}
})
;
}
else {
module.debug('Input blurred without user action, closing results');
callback();
}
},
result: {
@ -143,11 +175,12 @@ $.fn.search = function(parameters) {
href = $link.attr('href') || false,
target = $link.attr('target') || false,
title = $title.html(),
name = ($title.length > 0)
// title is used for result lookup
value = ($title.length > 0)
? $title.text()
: false,
results = module.get.results(),
result = module.get.result(name, results),
result = $result.data(metadata.result) || module.get.result(value, results),
returnedValue
;
if( $.isFunction(settings.onSelect) ) {
@ -157,8 +190,8 @@ $.fn.search = function(parameters) {
}
}
module.hideResults();
if(name) {
module.set.value(name);
if(value) {
module.set.value(value);
}
if(href) {
module.verbose('Opening search link found in result', $link);
@ -193,9 +226,7 @@ $.fn.search = function(parameters) {
// search shortcuts
if(keyCode == keys.escape) {
module.verbose('Escape key pressed, blurring search field');
$prompt
.trigger('blur')
;
module.trigger.blur();
}
if( module.is.visible() ) {
if(keyCode == keys.enter) {
@ -258,9 +289,11 @@ $.fn.search = function(parameters) {
api: function() {
var
apiSettings = {
debug : settings.debug,
on : false,
cache : 'local',
action : 'search',
onFailure : module.error
onError : module.error
},
searchHTML
;
@ -273,12 +306,21 @@ $.fn.search = function(parameters) {
useAPI: function() {
return $.fn.api !== undefined;
},
show: function() {
return module.is.focused() && !module.is.visible() && !module.is.empty();
},
transition: function() {
return settings.transition && $.fn.transition !== undefined && $module.transition('is supported');
}
},
is: {
animating: function() {
return $results.hasClass(className.animating);
},
hidden: function() {
return $results.hasClass(className.hidden);
},
empty: function() {
return ($results.html() === '');
},
@ -290,7 +332,32 @@ $.fn.search = function(parameters) {
}
},
trigger: {
blur: function() {
var
events = document.createEvent('HTMLEvents'),
promptElement = $prompt[0]
;
if(promptElement) {
module.verbose('Triggering native blur event');
events.initEvent('blur', false, false);
promptElement.dispatchEvent(events);
}
}
},
get: {
inputEvent: function() {
var
prompt = $prompt[0],
inputEvent = (prompt !== undefined && prompt.oninput !== undefined)
? 'input'
: (prompt !== undefined && prompt.onpropertychange !== undefined)
? 'propertychange'
: 'keyup'
;
return inputEvent;
},
value: function() {
return $prompt.val();
},
@ -302,26 +369,34 @@ $.fn.search = function(parameters) {
},
result: function(value, results) {
var
result = false
lookupFields = ['title', 'id'],
result = false
;
value = (value !== undefined)
? value
: module.get.value()
;
results = (results !== undefined)
? results
: module.get.results()
;
value = value || module.get.value();
results = results || module.get.results();
if(settings.type === 'category') {
module.debug('Finding result that matches', value);
$.each(results, function(index, category) {
if($.isArray(category.results)) {
result = module.search.object(value, category.results)[0];
if(result && result.length > 0) {
return true;
result = module.search.object(value, category.results, lookupFields)[0];
// don't continue searching if a result is found
if(result) {
return false;
}
}
});
}
else {
module.debug('Finding result in results object', value);
result = module.search.object(value, results)[0];
result = module.search.object(value, results, lookupFields)[0];
}
return result;
return result || false;
},
},
@ -334,8 +409,15 @@ $.fn.search = function(parameters) {
},
value: function(value) {
module.verbose('Setting search input value', value);
$prompt.val(value);
module.query();
$prompt
.val(value)
;
},
type: function(type) {
type = type || settings.type;
if(settings.type == 'category') {
$module.addClass(settings.type);
}
},
buttonPressed: function() {
$searchButton.addClass(className.pressed);
@ -359,55 +441,52 @@ $.fn.search = function(parameters) {
searchTerm = module.get.value(),
cache = module.read.cache(searchTerm)
;
if(cache) {
module.debug('Reading result for ' + searchTerm + ' from cache');
module.save.results(cache.results);
module.addResults(cache.html);
}
else {
module.debug('Querying for ' + searchTerm);
if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
module.search.local(searchTerm);
if( module.has.minimumCharacters() ) {
if(cache) {
module.debug('Reading result from cache', searchTerm);
module.save.results(cache.results);
module.addResults(cache.html);
module.inject.id(cache.results);
}
else if( module.can.useAPI() ) {
if(settings.apiSettings) {
module.debug('Searching with specified API settings', settings.apiSettings);
module.search.remote(searchTerm);
else {
module.debug('Querying for', searchTerm);
if($.isPlainObject(settings.source) || $.isArray(settings.source)) {
module.search.local(searchTerm);
}
else if($.api.settings.api.search !== undefined) {
module.debug('Searching with default search API endpoint');
else if( module.can.useAPI() ) {
module.search.remote(searchTerm);
}
else {
module.error(error.noEndpoint);
module.error(error.source);
}
}
else {
module.error(error.source);
}
settings.onSearchQuery.call(element, searchTerm);
}
else {
module.hideResults();
}
},
search: {
local: function(searchTerm) {
var
searchResults = module.search.object(searchTerm, settings.content),
results = module.search.object(searchTerm, settings.content),
searchHTML
;
module.set.loading();
module.save.results(searchResults);
module.debug('Returned local search results', searchResults);
module.save.results(results);
module.debug('Returned local search results', results);
searchHTML = module.generateResults({
results: searchResults
results: results
});
module.remove.loading();
module.addResults(searchHTML);
module.inject.id(results);
module.write.cache(searchTerm, {
html : searchHTML,
results : searchResults
results : results
});
module.addResults(searchHTML);
},
remote: function(searchTerm) {
var
@ -415,6 +494,9 @@ $.fn.search = function(parameters) {
onSuccess : function(response) {
module.parse.response.call(element, response, searchTerm);
},
onFailure: function() {
module.displayMessage(error.serverError);
},
urlData: {
query: searchTerm
}
@ -431,43 +513,60 @@ $.fn.search = function(parameters) {
.api('query')
;
},
object: function(searchTerm, source) {
object: function(searchTerm, source, searchFields) {
var
results = [],
fullTextResults = [],
searchFields = $.isArray(settings.searchFields)
? settings.searchFields
: [settings.searchFields],
searchExp = searchTerm.replace(regExp.escape, '\\$&'),
searchRegExp = new RegExp(regExp.exact + searchExp, 'i')
results = [],
fuzzyResults = [],
searchExp = searchTerm.toString().replace(regExp.escape, '\\$&'),
matchRegExp = new RegExp(regExp.beginsWith + searchExp, 'i'),
// avoid duplicates when pushing results
addResult = function(array, result) {
var
notResult = ($.inArray(result, results) == -1),
notFuzzyResult = ($.inArray(result, fuzzyResults) == -1)
;
if(notResult && notFuzzyResult) {
array.push(result);
}
}
;
source = source || settings.source;
searchFields = (searchFields !== undefined)
? searchFields
: settings.searchFields
;
source = source || settings.source;
// search fields should be array to loop correctly
if(!$.isArray(searchFields)) {
searchFields = [searchFields];
}
// exit conditions on no source
if(source === undefined) {
// exit conditions if no source
if(source === undefined || source === false) {
module.error(error.source);
return [];
}
// iterate through search fields in array order
// iterate through search fields looking for matches
$.each(searchFields, function(index, field) {
$.each(source, function(label, content) {
var
fieldExists = (typeof content[field] == 'string'),
notAlreadyResult = ($.inArray(content, results) == -1 && $.inArray(content, fullTextResults) == -1)
fieldExists = (typeof content[field] == 'string')
;
if(fieldExists && notAlreadyResult) {
if( content[field].match(searchRegExp) ) {
results.push(content);
if(fieldExists) {
if( content[field].search(matchRegExp) !== -1) {
// content starts with value (first in results)
addResult(results, content);
}
else if(settings.searchFullText && module.fuzzySearch(searchTerm, content[field]) ) {
fullTextResults.push(content);
// content fuzzy matches (last in results)
addResult(fuzzyResults, content);
}
}
});
});
return $.merge(results, fullTextResults);
return $.merge(results, fuzzyResults);
}
},
@ -476,6 +575,9 @@ $.fn.search = function(parameters) {
termLength = term.length,
queryLength = query.length
;
if(typeof query !== 'string') {
return false;
}
query = query.toLowerCase();
term = term.toLowerCase();
if(queryLength > termLength) {
@ -505,28 +607,19 @@ $.fn.search = function(parameters) {
;
module.verbose('Parsing server response', response);
if(response !== undefined) {
if(searchTerm !== undefined && response.results !== undefined) {
if(searchTerm !== undefined && response[fields.results] !== undefined) {
module.addResults(searchHTML);
module.inject.id(response[fields.results]);
module.write.cache(searchTerm, {
html : searchHTML,
results : response.results
results : response[fields.results]
});
module.save.results(response.results);
module.addResults(searchHTML);
module.save.results(response[fields.results]);
}
}
}
},
throttle: function() {
clearTimeout(module.timer);
if(module.has.minimumCharacters()) {
module.timer = setTimeout(module.query, settings.searchDelay);
}
else {
module.hideResults();
}
},
cancel: {
query: function() {
if( module.can.useAPI() ) {
@ -545,6 +638,23 @@ $.fn.search = function(parameters) {
}
},
clear: {
cache: function(value) {
var
cache = $module.data(metadata.cache)
;
if(!value) {
module.debug('Clearing cache', value);
$module.removeData(metadata.cache);
}
else if(value && cache && cache[value]) {
module.debug('Removing value from cache', value);
delete cache[value];
$module.data(metadata.cache, cache);
}
}
},
read: {
cache: function(name) {
var
@ -561,6 +671,94 @@ $.fn.search = function(parameters) {
}
},
create: {
id: function(resultIndex, categoryIndex) {
var
resultID = (resultIndex + 1), // not zero indexed
categoryID = (categoryIndex + 1),
firstCharCode,
letterID,
id
;
if(categoryIndex !== undefined) {
// start char code for "A"
letterID = String.fromCharCode(97 + categoryIndex);
id = letterID + resultID;
module.verbose('Creating category result id', id);
}
else {
id = resultID;
module.verbose('Creating result id', id);
}
return id;
},
results: function() {
if($results.length === 0) {
$results = $('<div />')
.addClass(className.results)
.appendTo($module)
;
}
}
},
inject: {
result: function(result, resultIndex, categoryIndex) {
module.verbose('Injecting result into results');
var
$selectedResult = (categoryIndex !== undefined)
? $results
.children().eq(categoryIndex)
.children(selector.result).eq(resultIndex)
: $results
.children(selector.result).eq(resultIndex)
;
module.verbose('Injecting results metadata', $selectedResult);
$selectedResult
.data(metadata.result, result)
;
},
id: function(results) {
module.debug('Injecting unique ids into results');
var
// since results may be object, we must use counters
categoryIndex = 0,
resultIndex = 0
;
if(settings.type === 'category') {
// iterate through each category result
$.each(results, function(index, category) {
resultIndex = 0;
$.each(category.results, function(index, value) {
var
result = category.results[index]
;
if(result.id === undefined) {
result.id = module.create.id(resultIndex, categoryIndex);
}
module.inject.result(result, resultIndex, categoryIndex);
resultIndex++;
});
categoryIndex++;
});
}
else {
// top level
$.each(results, function(index, value) {
var
result = results[index]
;
if(result.id === undefined) {
result.id = module.create.id(resultIndex);
}
module.inject.result(result, resultIndex);
resultIndex++;
});
}
return results;
}
},
save: {
results: function(results) {
module.verbose('Saving current search results to metadata', results);
@ -595,16 +793,20 @@ $.fn.search = function(parameters) {
$results
.html(html)
;
module.showResults();
if( module.can.show() ) {
module.showResults();
}
},
showResults: function() {
if( !module.is.visible() && module.is.focused() && !module.is.empty() ) {
if(!module.is.visible()) {
if( module.can.transition() ) {
module.debug('Showing results with css animations');
$results
.transition({
animation : settings.transition + ' in',
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
queue : true
})
@ -627,6 +829,8 @@ $.fn.search = function(parameters) {
$results
.transition({
animation : settings.transition + ' out',
debug : settings.debug,
verbose : settings.verbose,
duration : settings.duration,
queue : true
})
@ -647,8 +851,8 @@ $.fn.search = function(parameters) {
module.debug('Generating html from response', response);
var
template = settings.templates[settings.type],
isProperObject = ($.isPlainObject(response.results) && !$.isEmptyObject(response.results)),
isProperArray = ($.isArray(response.results) && response.results.length > 0),
isProperObject = ($.isPlainObject(response[fields.results]) && !$.isEmptyObject(response[fields.results])),
isProperArray = ($.isArray(response[fields.results]) && response[fields.results].length > 0),
html = ''
;
if(isProperObject || isProperArray ) {
@ -659,11 +863,11 @@ $.fn.search = function(parameters) {
}
}
else {
response.results = response.results.slice(0, settings.maxResults);
response[fields.results] = response[fields.results].slice(0, settings.maxResults);
}
}
if($.isFunction(template)) {
html = template(response);
html = template(response, fields);
}
else {
module.error(error.noTemplate, false);
@ -751,7 +955,7 @@ $.fn.search = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -863,51 +1067,76 @@ $.fn.search = function(parameters) {
$.fn.search.settings = {
name : 'Search Module',
name : 'Search',
namespace : 'search',
debug : false,
verbose : true,
verbose : false,
performance : true,
type : 'standard',
minCharacters : 1,
// template to use (specified in settings.templates)
minCharacters : 1,
// minimum characters required to search
// api config
apiSettings : false,
// API config
source : false,
// object to search
searchFields : [
'title',
'description'
],
// fields to search
displayField : '',
// field to display in standard results template
searchFullText : true,
// whether to include fuzzy results in local search
automatic : true,
// whether to add events to prompt automatically
automatic : 'true',
hideDelay : 0,
searchDelay : 100,
maxResults : 7,
cache : true,
// delay before hiding menu after blur
searchDelay : 200,
// delay before searching
maxResults : 7,
// maximum results returned from local
cache : true,
// whether to store lookups in local cache
// transition settings
transition : 'scale',
duration : 300,
duration : 200,
easing : 'easeOutExpo',
// callbacks
onSelect : false,
onResultsAdd : false,
onSearchQuery : function(){},
onSearchQuery : function(query){},
onResults : function(response){},
onResultsOpen : function(){},
onResultsClose : function(){},
className: {
active : 'active',
empty : 'empty',
focus : 'focus',
loading : 'loading',
pressed : 'down'
animating : 'animating',
active : 'active',
empty : 'empty',
focus : 'focus',
hidden : 'hidden',
loading : 'loading',
results : 'results',
pressed : 'down'
},
error : {
@ -916,19 +1145,36 @@ $.fn.search.settings = {
logging : 'Error in debug logging, exiting.',
noEndpoint : 'No search endpoint was specified',
noTemplate : 'A valid template name was not specified.',
serverError : 'There was an issue with querying the server.',
serverError : 'There was an issue querying the server.',
maxResults : 'Results must be an array to use maxResults setting',
method : 'The method you called is not defined.'
},
metadata: {
cache : 'cache',
results : 'results'
results : 'results',
result : 'result'
},
regExp: {
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
exact : '(?:\s|^)'
escape : /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,
beginsWith : '(?:\s|^)'
},
// maps api response attributes to internal representation
fields: {
categories : 'results', // array of categories (category view)
categoryName : 'name', // name of category (category view)
categoryResults : 'results', // array of results (category view)
description : 'description', // result description
image : 'image', // result image
price : 'price', // result price
results : 'results', // array of results (standard)
title : 'title', // result title
url : 'url', // result url
action : 'action', // "view more" object name
actionText : 'text', // "view more" text
actionURL : 'url' // "view more" url
},
selector : {
@ -984,95 +1230,98 @@ $.fn.search.settings = {
}
return html;
},
category: function(response) {
category: function(response, fields) {
var
html = '',
escape = $.fn.search.settings.templates.escape
;
if(response.results !== undefined) {
if(response[fields.categoryResults] !== 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(response[fields.categoryResults], function(index, category) {
if(category[fields.results] !== undefined && category.results.length > 0) {
html += '<div class="category">';
if(category[fields.categoryName] !== undefined) {
html += '<div class="name">' + category[fields.categoryName] + '</div>';
}
// each item inside category
$.each(category.results, function(index, result) {
html += '<div class="result">';
if(result.url) {
html += '<a href="' + result.url + '"></a>';
if(result[fields.url]) {
html += '<a class="result" href="' + result[fields.url] + '">';
}
if(result.image !== undefined) {
result.image = escape(result.image);
else {
html += '<a class="result">';
}
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '" alt="">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if(result.price !== undefined) {
result.price = escape(result.price);
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
result.title = escape(result.title);
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
+ '</div>'
;
html += '</a>';
});
html += ''
+ '</div>'
;
}
});
if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
}
return false;
},
standard: function(response) {
standard: function(response, fields) {
var
html = ''
;
if(response.results !== undefined) {
if(response[fields.results] !== undefined) {
// each result
$.each(response.results, function(index, result) {
if(result.url) {
html += '<a class="result" href="' + result.url + '">';
$.each(response[fields.results], function(index, result) {
if(result[fields.url]) {
html += '<a class="result" href="' + result[fields.url] + '">';
}
else {
html += '<a class="result">';
}
if(result.image !== undefined) {
if(result[fields.image] !== undefined) {
html += ''
+ '<div class="image">'
+ ' <img src="' + result.image + '">'
+ ' <img src="' + result[fields.image] + '">'
+ '</div>'
;
}
html += '<div class="content">';
if(result.price !== undefined) {
html += '<div class="price">' + result.price + '</div>';
if(result[fields.price] !== undefined) {
html += '<div class="price">' + result[fields.price] + '</div>';
}
if(result.title !== undefined) {
html += '<div class="title">' + result.title + '</div>';
if(result[fields.title] !== undefined) {
html += '<div class="title">' + result[fields.title] + '</div>';
}
if(result.description !== undefined) {
html += '<div class="description">' + result.description + '</div>';
if(result[fields.description] !== undefined) {
html += '<div class="description">' + result[fields.description] + '</div>';
}
html += ''
+ '</div>'
@ -1080,10 +1329,10 @@ $.fn.search.settings = {
html += '</a>';
});
if(response.action) {
if(response[fields.action]) {
html += ''
+ '<a href="' + response.action.url + '" class="action">'
+ response.action.text
+ '<a href="' + response[fields.action][fields.actionURL] + '" class="action">'
+ response[fields.action][fields.actionText]
+ '</a>';
}
return html;
@ -1093,4 +1342,4 @@ $.fn.search.settings = {
}
};
})( jQuery, window , document );
})( jQuery, window, document );

100
web/semantic/src/definitions/modules/search.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -71,6 +71,7 @@
position: absolute;
top: 100%;
left: 0%;
transform-origin: center top;
background: @resultsBackground;
@ -79,8 +80,15 @@
border-radius: @resultsBorderRadius;
box-shadow: @resultsBoxShadow;
border: @resultsBorder;
z-index: @resultsZIndex;
}
.ui.search > .results > :first-child {
border-radius: @resultsBorderRadius @resultsBorderRadius 0em 0em;
}
.ui.search > .results > :last-child {
border-radius: 0em 0em @resultsBorderRadius @resultsBorderRadius;
}
/*--------------
Result
@ -91,13 +99,13 @@
display: block;
overflow: hidden;
font-size: @resultFontSize;
padding: @resultVerticalPadding @resultHorizontalPadding;
padding: @resultPadding;
color: @resultTextColor;
line-height: @resultLineHeight;
border-bottom: @resultDivider;
}
.ui.search > .results .result:last-child {
border-bottom: @resultLastDivider;
border-bottom: @resultLastDivider !important;
}
/* Image */
@ -124,6 +132,7 @@
}
.ui.search > .results .result .title {
margin: @resultTitleMargin;
font-family: @resultTitleFont;
font-weight: @resultTitleFontWeight;
font-size: @resultTitleFontSize;
@ -174,11 +183,21 @@
States
*******************************/
/*--------------------
Focus
---------------------*/
.ui.search > .prompt:focus {
border-color: @promptFocusBorderColor;
background: @promptFocusBackground;
color: @promptFocusColor;
}
/*--------------------
Loading
---------------------*/
.ui.loading.search .input > .icon:before {
.ui.loading.search .input > i.icon:before {
position: absolute;
content: '';
top: 50%;
@ -191,7 +210,7 @@
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
}
.ui.loading.search .input > .icon:after {
.ui.loading.search .input > i.icon:after {
position: absolute;
content: '';
top: 50%;
@ -230,10 +249,10 @@
Active
---------------*/
.ui.search > .results .category.active {
.ui.category.search > .results .category.active {
background: @categoryActiveBackground;
}
.ui.search > .results .category.active > .name {
.ui.category.search > .results .category.active > .name {
color: @categoryNameActiveColor;
}
@ -256,7 +275,40 @@
*******************************/
/*--------------
Categories
Selection
---------------*/
.ui.search.selection .prompt {
border-radius: @selectionPromptBorderRadius;
}
/* Remove input */
.ui.search.selection > .icon.input > .remove.icon {
pointer-events: none;
position: absolute;
left: auto;
opacity: 0;
color: @selectionCloseIconColor;
top: @selectionCloseTop;
right: @selectionCloseRight;
transition: @selectionCloseTransition;
}
.ui.search.selection > .icon.input > .active.remove.icon {
cursor: pointer;
opacity: @selectionCloseIconOpacity;
pointer-events: auto;
}
.ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon {
right: @selectionCloseIconInputRight;
}
.ui.search.selection > .icon.input > .remove.icon:hover {
opacity: @selectionCloseIconHoverOpacity;
color: @selectionCloseIconHoverColor;
}
/*--------------
Category
---------------*/
.ui.category.search .results {
@ -270,10 +322,20 @@
border-bottom: @categoryDivider;
transition: @categoryTransition;
}
/* Last Category */
.ui.category.search > .results .category:last-child {
border-bottom: none;
}
/* First / Last */
.ui.category.search > .results .category:first-child .name + .result {
border-radius: 0em @resultsBorderRadius 0em 0em;
}
.ui.category.search > .results .category:last-child .result:last-child {
border-radius: 0em 0em @resultsBorderRadius 0em;
}
/* Category Result */
.ui.category.search > .results .category .result {
background: @categoryResultBackground;
@ -281,8 +343,9 @@
border-left: @categoryResultLeftBorder;
border-bottom: @categoryResultDivider;
transition: @categoryResultTransition;
padding: @categoryResultPadding;
}
.ui.category.search > .results .category .result:last-child {
.ui.category.search > .results .category:last-child .result:last-child {
border-bottom: @categoryResultLastDivider;
}
@ -329,11 +392,26 @@
Sizes
---------------*/
.ui.mini.search {
font-size: @relativeMini;
}
.ui.small.search {
font-size: @relativeSmall;
}
.ui.search {
font-size: @medium;
font-size: @relativeMedium;
}
.ui.large.search {
font-size: @large;
font-size: @relativeLarge;
}
.ui.big.search {
font-size: @relativeBig;
}
.ui.huge.search {
font-size: @relativeHuge;
}
.ui.massive.search {
font-size: @relativeMassive;
}
.loadUIOverrides();

142
web/semantic/src/definitions/modules/shape.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -37,8 +37,10 @@ $.fn.shape = function(parameters) {
$allModules
.each(function() {
var
moduleSelector = $allModules.selector || '',
settings = $.extend(true, {}, $.fn.shape.settings, parameters),
moduleSelector = $allModules.selector || '',
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.shape.settings, parameters)
: $.extend({}, $.fn.shape.settings),
// internal aliases
namespace = settings.namespace,
@ -100,7 +102,7 @@ $.fn.shape = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
var
shape = $sides.get(0) || document.createElement('div'),
shape = $sides[0] || document.createElement('div'),
fakeAssignment = shape.offsetWidth
;
},
@ -115,7 +117,7 @@ $.fn.shape = function(parameters) {
module.reset();
module.set.active();
};
settings.beforeChange.call($nextSide.get());
settings.beforeChange.call($nextSide[0]);
if(module.get.transitionEvent()) {
module.verbose('Starting CSS animation');
$module
@ -205,13 +207,29 @@ $.fn.shape = function(parameters) {
: duration
;
module.verbose('Setting animation duration', duration);
$sides.add($side)
if(settings.duration || settings.duration === 0) {
$sides.add($side)
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
})
;
}
},
currentStageSize: function() {
var
$activeSide = $module.find('.' + settings.className.active),
width = $activeSide.outerWidth(true),
height = $activeSide.outerHeight(true)
;
$module
.css({
'-webkit-transition-duration': duration,
'-moz-transition-duration': duration,
'-ms-transition-duration': duration,
'-o-transition-duration': duration,
'transition-duration': duration
width: width,
height: height
})
;
},
@ -227,12 +245,13 @@ $.fn.shape = function(parameters) {
: $clone.find(selector.side).first(),
newSize = {}
;
module.set.currentStageSize();
$activeSide.removeClass(className.active);
$nextSide.addClass(className.active);
$clone.insertAfter($module);
newSize = {
width : $nextSide.outerWidth(),
height : $nextSide.outerHeight()
width : $nextSide.outerWidth(true),
height : $nextSide.outerHeight(true)
};
$clone.remove();
$module
@ -260,7 +279,7 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.active)
;
settings.onChange.call($nextSide.get());
settings.onChange.call($nextSide[0]);
module.set.defaultSide();
}
},
@ -371,8 +390,8 @@ $.fn.shape = function(parameters) {
up: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
}
;
return {
@ -383,8 +402,8 @@ $.fn.shape = function(parameters) {
down: function() {
var
translate = {
y: -(($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
z: -($activeSide.outerHeight() / 2)
y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
z: -($activeSide.outerHeight(true) / 2)
}
;
return {
@ -395,8 +414,8 @@ $.fn.shape = function(parameters) {
left: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
}
;
return {
@ -407,8 +426,8 @@ $.fn.shape = function(parameters) {
right: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2),
z : -($activeSide.outerWidth() / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2),
z : -($activeSide.outerWidth(true) / 2)
}
;
return {
@ -419,7 +438,7 @@ $.fn.shape = function(parameters) {
over: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -430,7 +449,7 @@ $.fn.shape = function(parameters) {
back: function() {
var
translate = {
x : -(($activeSide.outerWidth() - $nextSide.outerWidth()) / 2)
x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2)
}
;
return {
@ -471,14 +490,19 @@ $.fn.shape = function(parameters) {
above: function() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
}
}
;
module.verbose('Setting the initial animation position as above', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -487,7 +511,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'top' : box.origin + 'px',
'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)'
})
@ -497,14 +520,19 @@ $.fn.shape = function(parameters) {
below: function() {
var
box = {
origin : (($activeSide.outerHeight() - $nextSide.outerHeight()) / 2),
origin : (($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2),
depth : {
active : ($nextSide.outerHeight() / 2),
next : ($activeSide.outerHeight() / 2)
active : ($nextSide.outerHeight(true) / 2),
next : ($activeSide.outerHeight(true) / 2)
}
}
;
module.verbose('Setting the initial animation position as below', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -513,7 +541,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'top' : box.origin + 'px',
'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)'
})
@ -522,15 +549,24 @@ $.fn.shape = function(parameters) {
left: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
module.verbose('Setting the initial animation position as left', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -539,7 +575,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)'
})
@ -548,15 +583,24 @@ $.fn.shape = function(parameters) {
right: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
module.verbose('Setting the initial animation position as left', $nextSide, box);
$sides
.css({
'transform' : 'translateZ(-' + box.depth.active + 'px)'
})
;
$activeSide
.css({
'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@ -565,7 +609,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)'
})
@ -574,11 +617,15 @@ $.fn.shape = function(parameters) {
behind: function() {
var
height = {
active : $activeSide.outerWidth(true),
next : $nextSide.outerWidth(true)
},
box = {
origin : ( ( $activeSide.outerWidth() - $nextSide.outerWidth() ) / 2),
origin : ( ( height.active - height.next ) / 2),
depth : {
active : ($nextSide.outerWidth() / 2),
next : ($activeSide.outerWidth() / 2)
active : (height.next / 2),
next : (height.active / 2)
}
}
;
@ -591,7 +638,6 @@ $.fn.shape = function(parameters) {
$nextSide
.addClass(className.animating)
.css({
'display' : 'block',
'left' : box.origin + 'px',
'transform' : 'rotateY(-180deg)'
})
@ -667,7 +713,7 @@ $.fn.shape = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -786,7 +832,7 @@ $.fn.shape.settings = {
debug : false,
// verbose debug output
verbose : true,
verbose : false,
// performance data output
performance: true,
@ -802,7 +848,7 @@ $.fn.shape.settings = {
allowRepeats: false,
// animation duration
duration : 700,
duration : false,
// possible errors
error: {
@ -827,4 +873,4 @@ $.fn.shape.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

11
web/semantic/src/definitions/modules/shape.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -26,8 +26,10 @@
.ui.shape {
position: relative;
vertical-align: top;
display: @display;
perspective: @perspective;
transition: @transition;
}
.ui.shape .sides {
@ -39,7 +41,6 @@
width: 100%;
margin: @sideMargin !important;
backface-visibility: @backfaceVisibility;
}
@ -47,7 +48,7 @@
display: none;
}
.ui.shape .side > * {
.ui.shape .side * {
backface-visibility: visible !important;
}
@ -117,6 +118,7 @@
position: absolute;
top: 0px;
left: 0px;
display: block;
z-index: @animatingZIndex;
}
.ui.shape .hidden.side {
@ -128,9 +130,6 @@
CSS
---------------*/
.ui.shape.animating {
transition: @transition;
}
.ui.shape.animating .sides {
position: absolute;
}

235
web/semantic/src/definitions/modules/sidebar.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -83,12 +83,6 @@ $.fn.sidebar = function(parameters) {
transitionEvent = module.get.transitionEvent();
// cache on initialize
if( ( settings.useLegacy == 'auto' && module.is.legacy() ) || settings.useLegacy === true) {
settings.transition = 'overlay';
settings.useLegacy = true;
}
if(module.is.ios()) {
module.set.ios();
}
@ -101,6 +95,10 @@ $.fn.sidebar = function(parameters) {
module.setup.layout();
}
requestAnimationFrame(function() {
module.setup.cache();
});
module.instantiate();
},
@ -122,11 +120,13 @@ $.fn.sidebar = function(parameters) {
destroy: function() {
module.verbose('Destroying previous module for', $module);
module.remove.direction();
$module
.off(eventNamespace)
.removeData(moduleNamespace)
;
if(module.is.ios()) {
module.remove.ios();
}
// bound by uuid
$context.off(elementNamespace);
$window.off(elementNamespace);
@ -171,7 +171,7 @@ $.fn.sidebar = function(parameters) {
module.verbose('Adding clickaway events to context', $context);
if(settings.closable) {
$context
.on('click' + elementNamespace, module.event.clickaway)
.on('click' + elementNamespace, module.event.clickaway)
.on('touchend' + elementNamespace, module.event.clickaway)
;
}
@ -206,10 +206,11 @@ $.fn.sidebar = function(parameters) {
},
add: {
bodyCSS: function() {
inlineCSS: function() {
var
width = $module.outerWidth(),
height = $module.outerHeight(),
width = module.cache.width || $module.outerWidth(),
height = module.cache.height || $module.outerHeight(),
isRTL = module.is.rtl(),
direction = module.get.direction(),
distance = {
left : width,
@ -219,13 +220,14 @@ $.fn.sidebar = function(parameters) {
},
style
;
if( module.is.rtl() ){
if(isRTL){
module.verbose('RTL detected, flipping widths');
distance.left = -width;
distance.right = width;
}
style = '<style title="' + namespace + '">';
style = '<style>';
if(direction === 'left' || direction === 'right') {
module.debug('Adding CSS rules for animation distance', width);
@ -277,8 +279,9 @@ $.fn.sidebar = function(parameters) {
;
}
style += '</style>';
$head.append(style);
$style = $('style[title=' + namespace + ']');
$style = $(style)
.appendTo($head)
;
module.debug('Adding sizing css to head', $style);
}
},
@ -289,6 +292,7 @@ $.fn.sidebar = function(parameters) {
$sidebars = $context.children(selector.sidebar);
$pusher = $context.children(selector.pusher);
$fixed = $context.children(selector.fixed);
module.clear.cache();
},
refreshSidebars: function() {
@ -298,13 +302,20 @@ $.fn.sidebar = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
element.style.display='none';
element.offsetHeight;
element.style.display = 'none';
var ignored = element.offsetHeight;
element.scrollTop = element.scrollTop;
element.style.display='';
element.style.display = '';
},
setup: {
cache: function() {
module.cache = {
width : $module.outerWidth(),
height : $module.outerHeight(),
rtl : ($module.css('direction') == 'rtl')
};
},
layout: function() {
if( $context.children(selector.pusher).length === 0 ) {
module.debug('Adding wrapper element for sidebar');
@ -324,6 +335,7 @@ $.fn.sidebar = function(parameters) {
$module.detach().prependTo($context);
module.refresh();
}
module.clear.cache();
module.set.pushable();
module.set.direction();
}
@ -349,11 +361,6 @@ $.fn.sidebar = function(parameters) {
},
show: function(callback) {
var
animateMethod = (settings.useLegacy === true)
? module.legacyPushPage
: module.pushPage
;
callback = $.isFunction(callback)
? callback
: function(){}
@ -381,7 +388,7 @@ $.fn.sidebar = function(parameters) {
settings.transition = 'overlay';
}
}
animateMethod(function() {
module.pushPage(function() {
callback.call(element);
settings.onShow.call(element);
});
@ -394,11 +401,6 @@ $.fn.sidebar = function(parameters) {
},
hide: function(callback) {
var
animateMethod = (settings.useLegacy === true)
? module.legacyPullPage
: module.pullPage
;
callback = $.isFunction(callback)
? callback
: function(){}
@ -406,7 +408,7 @@ $.fn.sidebar = function(parameters) {
if(module.is.visible() || module.is.animating()) {
module.debug('Hiding sidebar', callback);
module.refreshSidebars();
animateMethod(function() {
module.pullPage(function() {
callback.call(element);
settings.onHidden.call(element);
});
@ -455,12 +457,11 @@ $.fn.sidebar = function(parameters) {
pushPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition === 'overlay' || module.othersActive())
? $module
: $pusher,
$transition = (transition === 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
dim,
transitionEnd
;
callback = $.isFunction(callback)
@ -474,14 +475,12 @@ $.fn.sidebar = function(parameters) {
module.repaint();
animate = function() {
module.bind.clickaway();
module.add.bodyCSS();
module.add.inlineCSS();
module.set.animating();
module.set.visible();
if(!module.othersVisible()) {
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
}
};
dim = function() {
module.set.dimmed();
};
transitionEnd = function(event) {
if( event.target == $transition[0] ) {
@ -494,16 +493,17 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + elementNamespace);
$transition.on(transitionEvent + elementNamespace, transitionEnd);
requestAnimationFrame(animate);
if(settings.dimPage && !module.othersVisible()) {
requestAnimationFrame(dim);
}
},
pullPage: function(callback) {
var
transition = module.get.transition(),
$transition = (transition == 'safe')
? $context
: (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
$transition = (transition == 'overlay' || module.othersActive())
? $module
: $pusher,
animate,
transitionEnd
;
@ -513,11 +513,11 @@ $.fn.sidebar = function(parameters) {
;
module.verbose('Removing context push state', module.get.direction());
module.set.transition(transition);
module.unbind.clickaway();
module.unbind.scrollLock();
animate = function() {
module.set.transition(transition);
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersVisible()) {
@ -529,7 +529,7 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + elementNamespace, transitionEnd);
module.remove.animating();
module.remove.transition();
module.remove.bodyCSS();
module.remove.inlineCSS();
if(transition == 'scale down' || (settings.returnScroll && module.is.mobile()) ) {
module.scrollBack();
}
@ -541,62 +541,6 @@ $.fn.sidebar = function(parameters) {
requestAnimationFrame(animate);
},
legacyPushPage: function(callback) {
var
distance = $module.width(),
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = distance;
module.debug('Using javascript to push context', properties);
module.set.visible();
module.set.transition();
module.set.animating();
if(settings.dimPage) {
$pusher.addClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
module.bind.clickaway();
callback.call(element);
})
;
},
legacyPullPage: function(callback) {
var
distance = 0,
direction = module.get.direction(),
properties = {}
;
distance = distance || $module.width();
callback = $.isFunction(callback)
? callback
: function(){}
;
properties[direction] = '0px';
module.debug('Using javascript to pull context', properties);
module.unbind.clickaway();
module.set.animating();
module.remove.visible();
if(settings.dimPage && !module.othersActive()) {
$pusher.removeClass(className.dimmed);
}
$context
.css('position', 'relative')
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
callback.call(element);
})
;
},
scrollToTop: function() {
module.verbose('Scrolling to top of page to avoid animation issues');
currentScroll = $(window).scrollTop();
@ -609,8 +553,16 @@ $.fn.sidebar = function(parameters) {
window.scrollTo(0, currentScroll);
},
clear: {
cache: function() {
module.verbose('Clearing cached dimensions');
module.cache = {};
}
},
set: {
// html
// ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios
ios: function() {
$html.addClass(className.ios);
},
@ -623,6 +575,11 @@ $.fn.sidebar = function(parameters) {
$context.addClass(className.pushable);
},
// pusher
dimmed: function() {
$pusher.addClass(className.dimmed);
},
// sidebar
active: function() {
$module.addClass(className.active);
@ -647,13 +604,18 @@ $.fn.sidebar = function(parameters) {
},
remove: {
bodyCSS: function() {
module.debug('Removing body css styles', $style);
inlineCSS: function() {
module.debug('Removing inline css styles', $style);
if($style && $style.length > 0) {
$style.remove();
}
},
// ios scroll on html not document
ios: function() {
$html.removeClass(className.ios);
},
// context
pushed: function() {
$context.removeClass(className.pushed);
@ -743,36 +705,13 @@ $.fn.sidebar = function(parameters) {
return (isIE11 || isIE);
},
legacy: function() {
var
element = document.createElement('div'),
transforms = {
'webkitTransform' :'-webkit-transform',
'OTransform' :'-o-transform',
'msTransform' :'-ms-transform',
'MozTransform' :'-moz-transform',
'transform' :'transform'
},
has3D
;
// Add it to the body to get the computed style.
document.body.insertBefore(element, null);
for (var transform in transforms) {
if (element.style[transform] !== undefined) {
element.style[transform] = "translate3d(1px,1px,1px)";
has3D = window.getComputedStyle(element).getPropertyValue(transforms[transform]);
}
}
document.body.removeChild(element);
return !(has3D !== undefined && has3D.length > 0 && has3D !== 'none');
},
ios: function() {
var
userAgent = navigator.userAgent,
isIOS = userAgent.match(regExp.ios)
userAgent = navigator.userAgent,
isIOS = userAgent.match(regExp.ios),
isMobileChrome = userAgent.match(regExp.mobileChrome)
;
if(isIOS) {
if(isIOS && !isMobileChrome) {
module.verbose('Browser was found to be iOS', userAgent);
return true;
}
@ -814,7 +753,10 @@ $.fn.sidebar = function(parameters) {
return $context.hasClass(className.animating);
},
rtl: function () {
return $module.css('direction') == 'rtl';
if(module.cache.rtl === undefined) {
module.cache.rtl = ($module.css('direction') == 'rtl');
}
return module.cache.rtl;
}
},
@ -887,7 +829,7 @@ $.fn.sidebar = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -1001,7 +943,7 @@ $.fn.sidebar.settings = {
namespace : 'sidebar',
debug : false,
verbose : true,
verbose : false,
performance : true,
transition : 'auto',
@ -1030,9 +972,7 @@ $.fn.sidebar.settings = {
returnScroll : false,
delaySetup : false,
useLegacy : 'auto',
duration : 500,
easing : 'easeInOutQuint',
onChange : function(){},
onShow : function(){},
@ -1063,8 +1003,9 @@ $.fn.sidebar.settings = {
},
regExp: {
ios : /(iPad|iPhone|iPod)/g,
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
ios : /(iPad|iPhone|iPod)/g,
mobileChrome : /(CriOS)/g,
mobile : /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/g
},
error : {
@ -1077,13 +1018,5 @@ $.fn.sidebar.settings = {
};
// 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 );
})( jQuery, window, document );

39
web/semantic/src/definitions/modules/sidebar.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,6 +38,7 @@
-webkit-overflow-scrolling: touch;
height: 100% !important;
max-height: 100%;
border-radius: 0em !important;
margin: 0em !important;
overflow-y: auto !important;
@ -47,7 +48,6 @@
/* GPU Layers for Child Elements */
.ui.sidebar > * {
backface-visibility: hidden;
transform: rotateZ(0deg);
}
@ -70,7 +70,6 @@
.ui.bottom.sidebar {
width: 100% !important;
height: auto !important;
overflow-y: visible !important;
}
.ui.top.sidebar {
top: 0px !important;
@ -140,6 +139,7 @@ body.pushable > .pusher {
background: @pageBackground;
}
/* Pusher should inherit background from context */
.pushable > .pusher {
background: inherit;
}
@ -154,8 +154,6 @@ body.pushable > .pusher {
right: 0px;
content: '';
background-color: @dimmerColor;
width: 0px;
height: 0px;
overflow: hidden;
opacity: 0;
transition: @dimmerTransition;
@ -251,6 +249,11 @@ html.ios {
-webkit-overflow-scrolling: touch;
}
html.ios,
html.ios body {
height: initial !important;
}
/*******************************
Variations
@ -261,14 +264,14 @@ html.ios {
---------------*/
/* Left / Right */
.ui[class*="very thin"].left.sidebar,
.ui[class*="very thin"].right.sidebar {
width: @veryThinWidth;
}
.ui.thin.left.sidebar,
.ui.thin.right.sidebar {
width: @thinWidth;
}
.ui[class*="very thin"].left.sidebar,
.ui[class*="very thin"].right.sidebar {
width: @veryThinWidth;
}
.ui.left.sidebar,
.ui.right.sidebar {
width: @width;
@ -283,14 +286,14 @@ html.ios {
}
/* Left Visible */
.ui.visible[class*="very thin"].left.sidebar ~ .fixed,
.ui.visible[class*="very thin"].left.sidebar ~ .pusher {
transform: translate3d(@veryThinWidth, 0, 0);
}
.ui.visible.thin.left.sidebar ~ .fixed,
.ui.visible.thin.left.sidebar ~ .pusher {
transform: translate3d(@thinWidth, 0, 0);
}
.ui.visible[class*="very thin"].left.sidebar ~ .fixed,
.ui.visible[class*="very thin"].left.sidebar ~ .pusher {
transform: translate3d(@veryThinWidth, 0, 0);
}
.ui.visible.wide.left.sidebar ~ .fixed,
.ui.visible.wide.left.sidebar ~ .pusher {
transform: translate3d(@wideWidth, 0, 0);
@ -301,14 +304,14 @@ html.ios {
}
/* Right Visible */
.ui.visible[class*="very thin"].right.sidebar ~ .fixed,
.ui.visible[class*="very thin"].right.sidebar ~ .pusher {
transform: translate3d(-@veryThinWidth, 0, 0);
}
.ui.visible.thin.right.sidebar ~ .fixed,
.ui.visible.thin.right.sidebar ~ .pusher {
transform: translate3d(-@thinWidth, 0, 0);
}
.ui.visible[class*="very thin"].right.sidebar ~ .fixed,
.ui.visible[class*="very thin"].right.sidebar ~ .pusher {
transform: translate3d(-@veryThinWidth, 0, 0);
}
.ui.visible.wide.right.sidebar ~ .fixed,
.ui.visible.wide.right.sidebar ~ .pusher {
transform: translate3d(-@wideWidth, 0, 0);
@ -536,7 +539,7 @@ html.ios {
display: block !important;
width: 100%;
height: 100%;
overflow: hidden;
overflow: hidden !important;
}
/* End */

315
web/semantic/src/definitions/modules/sticky.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -43,8 +43,8 @@ $.fn.sticky = function(parameters) {
$module = $(this),
$window = $(window),
$container = $module.offsetParent(),
$scroll = $(settings.scrollContext),
$container,
$context,
selector = $module.selector || '',
@ -65,6 +65,7 @@ $.fn.sticky = function(parameters) {
initialize: function() {
module.determineContainer();
module.determineContext();
module.verbose('Initializing sticky', settings, $container);
@ -87,13 +88,18 @@ $.fn.sticky = function(parameters) {
},
destroy: function() {
module.verbose('Destroying previous module');
module.verbose('Destroying previous instance');
module.reset();
if(observer) {
observer.disconnect();
}
$window.off('resize' + eventNamespace, module.event.resize);
$scroll.off('scroll' + eventNamespace, module.event.scroll);
$window
.off('load' + eventNamespace, module.event.load)
.off('resize' + eventNamespace, module.event.resize)
;
$scroll
.off('scrollchange' + eventNamespace, module.event.scrollchange)
;
$module.removeData(moduleNamespace);
},
@ -105,9 +111,9 @@ $.fn.sticky = function(parameters) {
observer = new MutationObserver(function(mutations) {
clearTimeout(module.timer);
module.timer = setTimeout(function() {
module.verbose('DOM tree modified, updating sticky menu');
module.verbose('DOM tree modified, updating sticky menu', mutations);
module.refresh();
}, 20);
}, 100);
});
observer.observe(element, {
childList : true,
@ -121,6 +127,10 @@ $.fn.sticky = function(parameters) {
}
},
determineContainer: function() {
$container = $module.offsetParent();
},
determineContext: function() {
if(settings.context) {
$context = $(settings.context);
@ -147,30 +157,46 @@ $.fn.sticky = function(parameters) {
bind: {
events: function() {
$window.on('resize' + eventNamespace, module.event.resize);
$scroll.on('scroll' + eventNamespace, module.event.scroll);
$window
.on('load' + eventNamespace, module.event.load)
.on('resize' + eventNamespace, module.event.resize)
;
// pub/sub pattern
$scroll
.off('scroll' + eventNamespace)
.on('scroll' + eventNamespace, module.event.scroll)
.on('scrollchange' + eventNamespace, module.event.scrollchange)
;
}
},
event: {
load: function() {
module.verbose('Page contents finished loading');
requestAnimationFrame(module.refresh);
},
resize: function() {
requestAnimationFrame(function() {
module.refresh();
module.stick();
});
module.verbose('Window resized');
requestAnimationFrame(module.refresh);
},
scroll: function() {
requestAnimationFrame(function() {
module.stick();
settings.onScroll.call(element);
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
});
},
scrollchange: function(event, scrollPosition) {
module.stick(scrollPosition);
settings.onScroll.call(element);
}
},
refresh: function(hardRefresh) {
module.reset();
if(!settings.context) {
module.determineContext();
}
if(hardRefresh) {
$container = $module.offsetParent();
module.determineContainer();
}
module.save.positions();
module.stick();
@ -181,7 +207,7 @@ $.fn.sticky = function(parameters) {
sticky: function() {
var
$element = $('<div/>'),
element = $element.get()
element = $element[0]
;
$element.addClass(className.supported);
return($element.css('position').match('sticky'));
@ -189,13 +215,16 @@ $.fn.sticky = function(parameters) {
},
save: {
scroll: function(scroll) {
lastScroll: function(scroll) {
module.lastScroll = scroll;
},
elementScroll: function(scroll) {
module.elementScroll = scroll;
},
positions: function() {
var
window = {
height: $window.height()
scrollContext = {
height : $scroll.height()
},
element = {
margin: {
@ -207,15 +236,28 @@ $.fn.sticky = function(parameters) {
height : $module.outerHeight()
},
context = {
offset : $context.offset(),
height : $context.outerHeight(),
bottomPadding : parseInt($context.css('padding-bottom'), 10)
offset : $context.offset(),
height : $context.outerHeight()
},
container = {
height: $container.outerHeight()
}
;
if( !module.is.standardScroll() ) {
module.debug('Non-standard scroll. Removing scroll offset from element offset');
scrollContext.top = $scroll.scrollTop();
scrollContext.left = $scroll.scrollLeft();
element.offset.top += scrollContext.top;
context.offset.top += scrollContext.top;
element.offset.left += scrollContext.left;
context.offset.left += scrollContext.left;
}
module.cache = {
fits : ( element.height < window.height ),
window: {
height: window.height
fits : ( element.height < scrollContext.height ),
scrollContext : {
height : scrollContext.height
},
element: {
margin : element.margin,
@ -228,8 +270,7 @@ $.fn.sticky = function(parameters) {
context: {
top : context.offset.top,
height : context.height,
bottomPadding : context.bottomPadding,
bottom : context.offset.top + context.height - context.bottomPadding
bottom : context.offset.top + context.height
}
};
module.set.containerSize();
@ -263,26 +304,29 @@ $.fn.sticky = function(parameters) {
;
},
currentElementScroll: function() {
if(module.elementScroll) {
return module.elementScroll;
}
return ( module.is.top() )
? Math.abs(parseInt($module.css('top'), 10)) || 0
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
;
},
elementScroll: function(scroll) {
scroll = scroll || $scroll.scrollTop();
var
element = module.cache.element,
window = module.cache.window,
scrollContext = module.cache.scrollContext,
delta = module.get.scrollChange(scroll),
maxScroll = (element.height - window.height + settings.offset),
currentScroll = module.get.currentElementScroll(),
possibleScroll = (currentScroll + delta),
elementScroll
maxScroll = (element.height - scrollContext.height + settings.offset),
elementScroll = module.get.currentElementScroll(),
possibleScroll = (elementScroll + delta)
;
if(module.cache.fits || possibleScroll < 0) {
elementScroll = 0;
}
else if (possibleScroll > maxScroll ) {
else if(possibleScroll > maxScroll ) {
elementScroll = maxScroll;
}
else {
@ -293,6 +337,12 @@ $.fn.sticky = function(parameters) {
},
remove: {
lastScroll: function() {
delete module.lastScroll;
},
elementScroll: function(scroll) {
delete module.elementScroll;
},
offset: function() {
$module.css('margin-top', '');
}
@ -301,7 +351,9 @@ $.fn.sticky = function(parameters) {
set: {
offset: function() {
module.verbose('Setting offset on element', settings.offset);
$module.css('margin-top', settings.offset);
$module
.css('margin-top', settings.offset)
;
},
containerSize: function() {
var
@ -310,19 +362,30 @@ $.fn.sticky = function(parameters) {
if(tagName === 'HTML' || tagName == 'body') {
// this can trigger for too many reasons
//module.error(error.container, tagName, $module);
$container = $module.offsetParent();
module.determineContainer();
}
else {
module.debug('Settings container size', module.cache.context.height);
if( Math.abs($container.height() - module.cache.context.height) > 5) {
if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
$container.css({
height: module.cache.context.height
});
}
}
},
minimumSize: function() {
var
element = module.cache.element
;
$container
.css('min-height', element.height)
;
},
scroll: function(scroll) {
module.debug('Setting scroll on element', scroll);
if(module.elementScroll == scroll) {
return;
}
if( module.is.top() ) {
$module
.css('bottom', '')
@ -338,17 +401,16 @@ $.fn.sticky = function(parameters) {
},
size: function() {
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
$module
.css({
width : module.cache.element.width,
height : module.cache.element.height
})
;
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
}
}
},
is: {
standardScroll: function() {
return ($scroll[0] == window);
},
top: function() {
return $module.hasClass(className.top);
},
@ -369,59 +431,67 @@ $.fn.sticky = function(parameters) {
}
},
stick: function() {
stick: function(scroll) {
var
cachedPosition = scroll || $scroll.scrollTop(),
cache = module.cache,
fits = cache.fits,
element = cache.element,
window = cache.window,
scrollContext = cache.scrollContext,
context = cache.context,
offset = (module.is.bottom() && settings.pushing)
? settings.bottomOffset
: settings.offset,
scroll = {
top : $scroll.scrollTop() + offset,
bottom : $scroll.scrollTop() + offset + window.height
top : cachedPosition + offset,
bottom : cachedPosition + offset + scrollContext.height
},
direction = module.get.direction(scroll.top),
elementScroll = module.get.elementScroll(scroll.top),
elementScroll = (fits)
? 0
: module.get.elementScroll(scroll.top),
// shorthand
doesntFit = !fits,
elementVisible = (element.height !== 0)
;
// save current scroll for next run
module.save.scroll(scroll.top);
if(elementVisible) {
if( module.is.initialPosition() ) {
if(scroll.top >= context.bottom) {
console.log(scroll.top, context.bottom);
module.debug('Element bottom of container');
module.debug('Initial element position is bottom of container');
module.bindBottom();
}
else if(scroll.top >= element.top) {
module.debug('Element passed, fixing element to page');
module.fixTop();
else if(scroll.top > element.top) {
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
module.debug('Initial element position is bottom of container');
module.bindBottom();
}
else {
module.debug('Initial element position is fixed');
module.fixTop();
}
}
}
else if( module.is.fixed() ) {
// currently fixed top
if( module.is.top() ) {
if( scroll.top < element.top ) {
if( scroll.top <= element.top ) {
module.debug('Fixed element reached top of container');
module.setInitialPosition();
}
else if( (element.height + scroll.top - elementScroll) > context.bottom ) {
else if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
module.debug('Fixed element reached bottom of container');
module.bindBottom();
}
// scroll element if larger than screen
else if(doesntFit) {
module.set.scroll(elementScroll);
module.save.lastScroll(scroll.top);
module.save.elementScroll(elementScroll);
}
}
@ -429,33 +499,41 @@ $.fn.sticky = function(parameters) {
else if(module.is.bottom() ) {
// top edge
if( (scroll.bottom - element.height) < element.top) {
if( (scroll.bottom - element.height) <= element.top) {
module.debug('Bottom fixed rail has reached top of container');
module.setInitialPosition();
}
// bottom edge
else if(scroll.bottom > context.bottom) {
else if(scroll.bottom >= context.bottom) {
module.debug('Bottom fixed rail has reached bottom of container');
module.bindBottom();
}
// scroll element if larger than screen
else if(doesntFit) {
module.set.scroll(elementScroll);
module.save.lastScroll(scroll.top);
module.save.elementScroll(elementScroll);
}
}
}
else if( module.is.bottom() ) {
if(settings.pushing) {
if(module.is.bound() && scroll.bottom < context.bottom ) {
module.debug('Fixing bottom attached element to bottom of browser.');
module.fixBottom();
}
if( scroll.top <= element.top ) {
module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
module.setInitialPosition();
}
else {
if(module.is.bound() && (scroll.top < context.bottom - element.height) ) {
module.debug('Fixing bottom attached element to top of browser.');
module.fixTop();
if(settings.pushing) {
if(module.is.bound() && scroll.bottom <= context.bottom ) {
module.debug('Fixing bottom attached element to bottom of browser.');
module.fixBottom();
}
}
else {
if(module.is.bound() && (scroll.top <= context.bottom - element.height) ) {
module.debug('Fixing bottom attached element to top of browser.');
module.fixTop();
}
}
}
}
@ -466,9 +544,11 @@ $.fn.sticky = function(parameters) {
module.debug('Binding element to top of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , '')
.css({
left : '',
top : '',
marginBottom : ''
})
.removeClass(className.fixed)
.removeClass(className.bottom)
.addClass(className.bound)
@ -481,9 +561,10 @@ $.fn.sticky = function(parameters) {
module.debug('Binding element to bottom of parent container');
module.remove.offset();
$module
.css('left' , '')
.css('top' , '')
.css('margin-bottom' , module.cache.context.bottomPadding)
.css({
left : '',
top : ''
})
.removeClass(className.fixed)
.removeClass(className.top)
.addClass(className.bound)
@ -494,6 +575,7 @@ $.fn.sticky = function(parameters) {
},
setInitialPosition: function() {
module.debug('Returning to initial position');
module.unfix();
module.unbind();
},
@ -501,10 +583,14 @@ $.fn.sticky = function(parameters) {
fixTop: function() {
module.debug('Fixing element to top of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.bottom)
.addClass(className.fixed)
@ -515,10 +601,14 @@ $.fn.sticky = function(parameters) {
fixBottom: function() {
module.debug('Sticking element to bottom of page');
module.set.minimumSize();
module.set.offset();
$module
.css('left', module.cache.element.left)
.css('bottom' , '')
.css({
left : module.cache.element.left,
bottom : '',
marginBottom : ''
})
.removeClass(className.bound)
.removeClass(className.top)
.addClass(className.fixed)
@ -528,24 +618,28 @@ $.fn.sticky = function(parameters) {
},
unbind: function() {
module.debug('Removing absolute position on element');
module.remove.offset();
$module
.removeClass(className.bound)
.removeClass(className.top)
.removeClass(className.bottom)
;
if( module.is.bound() ) {
module.debug('Removing container bound position on element');
module.remove.offset();
$module
.removeClass(className.bound)
.removeClass(className.top)
.removeClass(className.bottom)
;
}
},
unfix: function() {
module.debug('Removing fixed position on element');
module.remove.offset();
$module
.removeClass(className.fixed)
.removeClass(className.top)
.removeClass(className.bottom)
;
settings.onUnstick.call(element);
if( module.is.fixed() ) {
module.debug('Removing fixed position on element');
module.remove.offset();
$module
.removeClass(className.fixed)
.removeClass(className.top)
.removeClass(className.bottom)
;
settings.onUnstick.call(element);
}
},
reset: function() {
@ -553,13 +647,13 @@ $.fn.sticky = function(parameters) {
module.unbind();
module.unfix();
module.resetCSS();
module.remove.offset();
module.remove.lastScroll();
},
resetCSS: function() {
$module
.css({
top : '',
bottom : '',
width : '',
height : ''
})
@ -752,23 +846,44 @@ $.fn.sticky.settings = {
namespace : 'sticky',
debug : false,
verbose : false,
performance : false,
verbose : true,
performance : true,
// whether to stick in the opposite direction on scroll up
pushing : false,
context : false,
// Context to watch scroll events
scrollContext : window,
// Offset to adjust scroll
offset : 0,
// Offset to adjust scroll when attached to bottom of screen
bottomOffset : 0,
observeChanges : true,
jitter : 5, // will only set container height if difference between context and container is larger than this number
// Whether to automatically observe changes with Mutation Observers
observeChanges : false,
// Called when position is recalculated
onReposition : function(){},
// Called on each scroll
onScroll : function(){},
// Called when element is stuck to viewport
onStick : function(){},
// Called when element is unstuck from viewport
onUnstick : function(){},
// Called when element reaches top of context
onTop : function(){},
// Called when element reaches bottom of context
onBottom : function(){},
error : {
@ -789,4 +904,4 @@ $.fn.sticky.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/sticky.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

408
web/semantic/src/definitions/modules/tab.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -21,10 +21,6 @@ $.fn.tab = function(parameters) {
? $(window)
: $(this),
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.tab.settings, parameters)
: $.extend({}, $.fn.tab.settings),
moduleSelector = $allModules.selector || '',
time = new Date().getTime(),
performance = [],
@ -33,7 +29,7 @@ $.fn.tab = function(parameters) {
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
module,
initializedHistory = false,
returnedValue
;
@ -41,117 +37,58 @@ $.fn.tab = function(parameters) {
.each(function() {
var
className = settings.className,
metadata = settings.metadata,
selector = settings.selector,
error = settings.error,
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.tab.settings, parameters)
: $.extend({}, $.fn.tab.settings),
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
className = settings.className,
metadata = settings.metadata,
selector = settings.selector,
error = settings.error,
$module = $(this),
cache = {},
firstLoad = true,
recursionDepth = 0,
eventNamespace = '.' + settings.namespace,
moduleNamespace = 'module-' + settings.namespace,
$module = $(this),
$context,
$tabs,
cache = {},
firstLoad = true,
recursionDepth = 0,
element = this,
instance = $module.data(moduleNamespace),
activeTabPath,
parameterArray,
historyEvent,
module,
historyEvent
element = this,
instance = $module.data(moduleNamespace)
;
module = {
initialize: function() {
module.debug('Initializing tab menu item', $module);
module.fix.callbacks();
module.determineTabs();
module.debug('Determining tabs', settings.context, $tabs);
module.debug('Determining tabs', settings.context, $tabs);
// set up automatic routing
if(settings.auto) {
module.set.auto();
}
module.bind.events();
// 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)
;
if(settings.history && !initializedHistory) {
module.initializeHistory();
initializedHistory = true;
}
module.instantiate();
},
determineTabs: function() {
var
$reference
;
// determine tab context
if(settings.context === 'parent') {
if($module.closest(selector.ui).length > 0) {
$reference = $module.closest(selector.ui);
module.verbose('Using closest UI element for determining parent', $reference);
}
else {
$reference = $module;
}
$context = $reference.parent();
module.verbose('Determined parent element for creating context', $context);
}
else if(settings.context) {
$context = $(settings.context);
module.verbose('Using selector for tab context', settings.context, $context);
}
else {
$context = $('body');
}
// find tabs
if(settings.childrenOnly) {
$tabs = $context.children(selector.tabs);
module.debug('Searching tab context children for tabs', $context, $tabs);
}
else {
$tabs = $context.find(selector.tabs);
module.debug('Searching tab context for tabs', $context, $tabs);
}
},
initializeHistory: function() {
if(settings.history) {
module.debug('Initializing page state');
if( $.address === undefined ) {
module.error(error.state);
return false;
}
else {
if(settings.historyType == 'state') {
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
.bind('change', module.event.history.change)
;
}
}
},
instantiate: function () {
module.verbose('Storing instance of module', module);
instance = module;
@ -168,6 +105,97 @@ $.fn.tab = function(parameters) {
;
},
bind: {
events: function() {
// if using $.tab don't add events
if( !$.isWindow( element ) ) {
module.debug('Attaching tab activation events to element', $module);
$module
.on('click' + eventNamespace, module.event.click)
;
}
}
},
determineTabs: function() {
var
$reference
;
// determine tab context
if(settings.context === 'parent') {
if($module.closest(selector.ui).length > 0) {
$reference = $module.closest(selector.ui);
module.verbose('Using closest UI element as parent', $reference);
}
else {
$reference = $module;
}
$context = $reference.parent();
module.verbose('Determined parent element for creating context', $context);
}
else if(settings.context) {
$context = $(settings.context);
module.verbose('Using selector for tab context', settings.context, $context);
}
else {
$context = $('body');
}
// find tabs
if(settings.childrenOnly) {
$tabs = $context.children(selector.tabs);
module.debug('Searching tab context children for tabs', $context, $tabs);
}
else {
$tabs = $context.find(selector.tabs);
module.debug('Searching tab context for tabs', $context, $tabs);
}
},
fix: {
callbacks: function() {
if( $.isPlainObject(parameters) && (parameters.onTabLoad || parameters.onTabInit) ) {
if(parameters.onTabLoad) {
parameters.onLoad = parameters.onTabLoad;
delete parameters.onTabLoad;
module.error(error.legacyLoad, parameters.onLoad);
}
if(parameters.onTabInit) {
parameters.onFirstLoad = parameters.onTabInit;
delete parameters.onTabInit;
module.error(error.legacyInit, parameters.onFirstLoad);
}
settings = $.extend(true, {}, $.fn.tab.settings, parameters);
}
}
},
initializeHistory: function() {
module.debug('Initializing page state');
if( $.address === undefined ) {
module.error(error.state);
return false;
}
else {
if(settings.historyType == 'state') {
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
.bind('change', module.event.history.change)
;
}
},
event: {
click: function(event) {
var
@ -251,6 +279,23 @@ $.fn.tab = function(parameters) {
};
}
},
loading: function(tabPath) {
var
$tab = module.get.tabElement(tabPath),
isLoading = $tab.hasClass(className.loading)
;
if(!isLoading) {
module.verbose('Setting loading state for', $tab);
$tab
.addClass(className.loading)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if($tab.length > 0) {
settings.onRequest.call($tab[0], tabPath);
}
}
},
state: function(state) {
$.address.value(state);
}
@ -261,7 +306,7 @@ $.fn.tab = function(parameters) {
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
// only add default path if not remote content
pathArray = (remoteContent && !shouldIgnoreLoad)
? module.utilities.pathToArray(tabPath)
: module.get.defaultPathArray(tabPath)
@ -283,7 +328,6 @@ $.fn.tab = function(parameters) {
;
module.verbose('Looking for tab', tab);
if(isTab) {
module.verbose('Tab was found', tab);
// scope up
activeTabPath = currentPath;
@ -303,15 +347,15 @@ $.fn.tab = function(parameters) {
if(isLastTab && remoteContent) {
if(!shouldIgnoreLoad) {
module.activate.navigation(currentPath);
module.content.fetch(currentPath, tabPath);
module.fetch.content(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);
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
return false;
}
@ -321,25 +365,32 @@ $.fn.tab = function(parameters) {
if( !module.cache.read(currentPath) ) {
module.cache.add(currentPath, true);
module.debug('First time tab loaded calling tab init');
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
settings.onTabLoad.call($tab, currentPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
}
else if(tabPath.search('/') == -1 && tabPath !== '') {
// look for in page anchor
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'),
currentPath = $anchor.closest('[data-tab]').data('tab');
$anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]');
currentPath = $anchor.closest('[data-tab]').data(metadata.tab);
$tab = module.get.tabElement(currentPath);
// if anchor exists use parent tab
if($anchor && $anchor.length > 0 && currentPath) {
module.debug('No tab found, but deep anchor link present, opening parent tab');
module.debug('Anchor link used, opening parent tab', $tab, $anchor);
if( !$tab.hasClass(className.active) ) {
setTimeout(function() {
module.scrollTo($anchor);
}, 0);
}
module.activate.all(currentPath);
if( !module.cache.read(currentPath) ) {
module.cache.add(currentPath, true);
module.debug('First time tab loaded calling tab init');
settings.onTabInit.call($tab, currentPath, parameterArray, historyEvent);
settings.onFirstLoad.call($tab[0], currentPath, parameterArray, historyEvent);
}
settings.onLoad.call($tab[0], currentPath, parameterArray, historyEvent);
return false;
}
}
@ -350,17 +401,55 @@ $.fn.tab = function(parameters) {
});
},
content: {
scrollTo: function($element) {
var
scrollOffset = ($element && $element.length > 0)
? $element.offset().top
: false
;
if(scrollOffset !== false) {
module.debug('Forcing scroll to an in-page link in a hidden tab', scrollOffset, $element);
$(document).scrollTop(scrollOffset);
}
},
fetch: function(tabPath, fullTabPath) {
update: {
content: function(tabPath, html, evaluateScripts) {
var
$tab = module.get.tabElement(tabPath),
tab = $tab[0]
;
evaluateScripts = (evaluateScripts !== undefined)
? evaluateScripts
: settings.evaluateScripts
;
if(evaluateScripts) {
module.debug('Updating HTML and evaluating inline scripts', tabPath, html);
$tab.html(html);
}
else {
module.debug('Updating HTML', tabPath, html);
tab.innerHTML = html;
}
}
},
fetch: {
content: function(tabPath, fullTabPath) {
var
$tab = module.get.tabElement(tabPath),
apiSettings = {
dataType : 'html',
on : 'now',
onSuccess : function(response) {
dataType : 'html',
encodeParameters : false,
on : 'now',
cache : settings.alwaysRefresh,
headers : {
'X-Remote': true
},
onSuccess : function(response) {
module.cache.add(fullTabPath, response);
module.content.update(tabPath, response);
module.update.content(tabPath, response);
if(tabPath == activeTabPath) {
module.debug('Content loaded', tabPath);
module.activate.tab(tabPath);
@ -368,10 +457,12 @@ $.fn.tab = function(parameters) {
else {
module.debug('Content loaded in background', tabPath);
}
settings.onTabInit.call($tab, tabPath, parameterArray, historyEvent);
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
settings.onFirstLoad.call($tab[0], tabPath, parameterArray, historyEvent);
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
},
urlData: { tab: fullTabPath }
urlData: {
tab: fullTabPath
}
},
request = $tab.api('get request') || false,
existingRequest = ( request && request.state() === 'pending' ),
@ -383,37 +474,30 @@ $.fn.tab = function(parameters) {
cachedContent = module.cache.read(fullTabPath);
module.activate.tab(tabPath);
if(settings.cache && cachedContent) {
module.debug('Showing existing content', fullTabPath);
module.content.update(tabPath, cachedContent);
settings.onTabLoad.call($tab, tabPath, parameterArray, historyEvent);
module.activate.tab(tabPath);
module.debug('Adding cached content', fullTabPath);
if(settings.evaluateScripts == 'once') {
module.update.content(tabPath, cachedContent, false);
}
else {
module.update.content(tabPath, cachedContent);
}
settings.onLoad.call($tab[0], tabPath, parameterArray, historyEvent);
}
else if(existingRequest) {
module.set.loading(tabPath);
module.debug('Content is already loading', fullTabPath);
$tab.addClass(className.loading);
}
else if($.api !== undefined) {
requestSettings = $.extend(true, {
headers: { 'X-Remote': true }
}, settings.apiSettings, apiSettings);
requestSettings = $.extend(true, {}, settings.apiSettings, apiSettings);
module.debug('Retrieving remote content', fullTabPath, requestSettings);
$tab.api( requestSettings );
module.set.loading(tabPath);
$tab.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)
;
}
},
@ -424,25 +508,34 @@ $.fn.tab = function(parameters) {
},
tab: function(tabPath) {
var
$tab = module.get.tabElement(tabPath)
$tab = module.get.tabElement(tabPath),
isActive = $tab.hasClass(className.active)
;
module.verbose('Showing tab content for', $tab);
$tab
.addClass(className.active)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if(!isActive) {
$tab
.addClass(className.active)
.siblings($tabs)
.removeClass(className.active + ' ' + className.loading)
;
if($tab.length > 0) {
settings.onVisible.call($tab[0], tabPath);
}
}
},
navigation: function(tabPath) {
var
$navigation = module.get.navElement(tabPath)
$navigation = module.get.navElement(tabPath),
isActive = $navigation.hasClass(className.active)
;
module.verbose('Activating tab navigation for', $navigation, tabPath);
$navigation
.addClass(className.active)
.siblings($allModules)
.removeClass(className.active + ' ' + className.loading)
;
if(!isActive) {
$navigation
.addClass(className.active)
.siblings($allModules)
.removeClass(className.active + ' ' + className.loading)
;
}
}
},
@ -516,8 +609,8 @@ $.fn.tab = function(parameters) {
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 + '"]');
$fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]');
$simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]');
return ($fullPathTab.length > 0)
? $fullPathTab
: $simplePathTab
@ -626,7 +719,7 @@ $.fn.tab = function(parameters) {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -726,9 +819,6 @@ $.fn.tab = function(parameters) {
}
})
;
if(module && !methodInvoked) {
module.initializeHistory();
}
return (returnedValue !== undefined)
? returnedValue
: this
@ -747,7 +837,7 @@ $.fn.tab.settings = {
namespace : 'tab',
debug : false,
verbose : true,
verbose : false,
performance : true,
auto : false, // uses pjax style endpoints fetching content from same url with remote-content headers
@ -762,10 +852,14 @@ $.fn.tab.settings = {
alwaysRefresh : false, // load tab content new every tab click
cache : true, // cache the content requests to pull locally
ignoreFirstLoad : false, // don't load remote content on first load
apiSettings : false, // settings for api call
onTabInit : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
onTabLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
apiSettings : false, // settings for api call
evaluateScripts : 'once', // whether inline scripts should be parsed (true/false/once). Once will not re-evaluate on cached content
onFirstLoad : function(tabPath, parameterArray, historyEvent) {}, // called first time loaded
onLoad : function(tabPath, parameterArray, historyEvent) {}, // called on every load
onVisible : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
onRequest : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
templates : {
determineTitle: function(tabArray) {} // returns page title for path
@ -774,10 +868,12 @@ $.fn.tab.settings = {
error: {
api : 'You attempted to load content without API module',
method : 'The method you called is not defined',
missingTab : 'Activated tab cannot be found for this context.',
missingTab : 'Activated tab cannot be found. Tabs are case-sensitive.',
noContent : 'The tab you specified is missing a content url.',
path : 'History enabled, but no path was specified',
recursion : 'Max recursive depth reached',
legacyInit : 'onTabInit has been renamed to onFirstLoad in 2.0, please adjust your code.',
legacyLoad : 'onTabLoad has been renamed to onLoad in 2.0. Please adjust your code',
state : 'History requires Asual\'s Address library <https://github.com/asual/jquery-address>'
},
@ -799,4 +895,4 @@ $.fn.tab.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

2
web/semantic/src/definitions/modules/tab.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

380
web/semantic/src/definitions/modules/transition.js
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -47,7 +47,6 @@ $.fn.transition = function() {
error,
className,
metadata,
animationStart,
animationEnd,
animationName,
@ -76,8 +75,6 @@ $.fn.transition = function() {
// get vendor specific events
animationEnd = module.get.animationEndEvent();
animationName = module.get.animationName();
animationStart = module.get.animationStartEvent();
if(methodInvoked) {
methodInvoked = module.invoke(query);
@ -139,15 +136,22 @@ $.fn.transition = function() {
delay: function(interval) {
var
isReverse = (settings.reverse === true),
shouldReverse = (settings.reverse == 'auto' && module.get.direction() == className.outward),
direction = module.get.animationDirection(),
shouldReverse,
delay
;
interval = (typeof interval !== undefined)
if(!direction) {
direction = module.can.transition()
? module.get.direction()
: 'static'
;
}
interval = (interval !== undefined)
? interval
: settings.interval
;
delay = (isReverse || shouldReverse)
shouldReverse = (settings.reverse == 'auto' && direction == className.outward);
delay = (shouldReverse || settings.reverse == true)
? ($allModules.length - index) * settings.interval
: index * settings.interval
;
@ -178,7 +182,7 @@ $.fn.transition = function() {
}
else {
module.debug('New animation started, completing previous early', settings.animation);
module.complete();
instance.complete();
}
}
if( module.can.animate() ) {
@ -217,21 +221,58 @@ $.fn.transition = function() {
module.verbose('Animation is outward, hiding element');
module.restore.conditions();
module.hide();
settings.onHide.call(this);
}
else if( module.is.inward() ) {
module.verbose('Animation is outward, showing element');
module.restore.conditions();
module.show();
settings.onShow.call(this);
}
else {
module.verbose('Static animation completed');
module.restore.conditions();
settings.onComplete.call(element);
}
}
},
force: {
visible: function() {
var
style = $module.attr('style'),
userStyle = module.get.userStyle(),
displayType = module.get.displayType(),
overrideStyle = userStyle + 'display: ' + displayType + ' !important;',
currentDisplay = $module.css('display'),
emptyStyle = (style === undefined || style === '')
;
if(currentDisplay !== displayType) {
module.verbose('Overriding default display to show element', displayType);
$module
.attr('style', overrideStyle)
;
}
else if(emptyStyle) {
$module.removeAttr('style');
}
},
hidden: function() {
var
style = $module.attr('style'),
currentDisplay = $module.css('display'),
emptyStyle = (style === undefined || style === '')
;
if(currentDisplay !== 'none' && !module.is.hidden()) {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
else if(emptyStyle) {
$module
.removeAttr('style')
;
}
module.remove.animation();
module.remove.animating();
}
settings.onComplete.call(this);
},
has: {
@ -260,28 +301,28 @@ $.fn.transition = function() {
set: {
animating: function(animation) {
animation = animation || settings.animation;
if(!module.is.animating()) {
module.save.conditions();
}
module.remove.direction();
module.remove.completeCallback();
if(module.can.transition() && !module.has.direction()) {
module.set.direction();
}
module.remove.hidden();
module.set.display();
$module
.addClass(className.animating + ' ' + className.transition + ' ' + animation)
.addClass(animation)
.one(animationEnd + '.complete' + eventNamespace, module.complete)
var
animationClass,
direction
;
if(settings.useFailSafe) {
module.add.failSafe();
}
module.set.duration(settings.duration);
settings.onStart.call(this);
module.debug('Starting tween', animation, $module.attr('class'));
// remove previous callbacks
module.remove.completeCallback();
// determine exact animation
animation = animation || settings.animation;
animationClass = module.get.animationClass(animation);
// save animation class in cache to restore class names
module.save.animation(animationClass);
// override display if necessary so animation appears visibly
module.force.visible();
module.remove.hidden();
module.remove.direction();
module.start.animation(animationClass);
},
duration: function(animationName, duration) {
duration = duration || settings.duration;
@ -293,44 +334,18 @@ $.fn.transition = function() {
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
})
;
}
},
display: function() {
var
style = module.get.style(),
displayType = module.get.displayType(),
overrideStyle = style + 'display: ' + displayType + ' !important;'
;
$module.css('display', '');
module.refresh();
if( $module.css('display') !== displayType ) {
module.verbose('Setting inline visibility to', displayType);
$module
.attr('style', overrideStyle)
;
}
},
direction: function() {
if($module.is(':visible') && !module.is.hidden()) {
module.debug('Automatically determining the direction of animation', 'Outward');
$module
.removeClass(className.inward)
.addClass(className.outward)
;
direction: function(direction) {
direction = direction || module.get.direction();
if(direction == className.inward) {
module.set.inward();
}
else {
module.debug('Automatically determining the direction of animation', 'Inward');
$module
.removeClass(className.outward)
.addClass(className.inward)
;
module.set.outward();
}
},
looping: function() {
@ -340,18 +355,24 @@ $.fn.transition = function() {
;
},
hidden: function() {
if(!module.is.hidden()) {
$module
.addClass(className.transition)
.addClass(className.hidden)
;
}
if($module.css('display') !== 'none') {
module.verbose('Overriding default display to hide element');
$module
.css('display', 'none')
;
}
$module
.addClass(className.transition)
.addClass(className.hidden)
;
},
inward: function() {
module.debug('Setting direction to inward');
$module
.removeClass(className.outward)
.addClass(className.inward)
;
},
outward: function() {
module.debug('Setting direction to outward');
$module
.removeClass(className.inward)
.addClass(className.outward)
;
},
visible: function() {
$module
@ -361,49 +382,52 @@ $.fn.transition = function() {
}
},
start: {
animation: function(animationClass) {
animationClass = animationClass || module.get.animationClass();
module.debug('Starting tween', animationClass);
$module
.addClass(animationClass)
.one(animationEnd + '.complete' + eventNamespace, module.complete)
;
if(settings.useFailSafe) {
module.add.failSafe();
}
module.set.duration(settings.duration);
settings.onStart.call(element);
}
},
save: {
animation: function(animation) {
if(!module.cache) {
module.cache = {};
}
module.cache.animation = animation;
},
displayType: function(displayType) {
$module.data(metadata.displayType, displayType);
if(displayType !== 'none') {
$module.data(metadata.displayType, displayType);
}
},
transitionExists: function(animation, exists) {
$.fn.transition.exists[animation] = exists;
module.verbose('Saving existence of transition', animation, exists);
},
conditions: function() {
var
clasName = $module.attr('class') || false,
style = $module.attr('style') || ''
;
$module.removeClass(settings.animation);
module.remove.direction();
module.cache = {
className : $module.attr('class'),
style : module.get.style()
};
module.verbose('Saving original attributes', module.cache);
}
},
restore: {
conditions: function() {
if(module.cache === undefined) {
return false;
var
animation = module.get.currentAnimation()
;
if(animation) {
$module
.removeClass(animation)
;
module.verbose('Removing animation class', module.cache);
}
if(module.cache.className) {
$module.attr('class', module.cache.className);
}
else {
$module.removeAttr('class');
}
if(module.cache.style) {
module.verbose('Restoring original style attribute', module.cache.style);
$module.attr('style', module.cache.style);
}
else {
module.verbose('Clearing style attribute');
$module.removeAttr('style');
}
module.verbose('Restoring original attributes', module.cache);
module.remove.duration();
}
},
@ -413,7 +437,7 @@ $.fn.transition = function() {
duration = module.get.duration()
;
module.timer = setTimeout(function() {
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
}, duration + settings.failSafeDelay);
module.verbose('Adding fail safe timer', module.timer);
}
@ -423,23 +447,12 @@ $.fn.transition = function() {
animating: function() {
$module.removeClass(className.animating);
},
animation: function() {
$module
.css({
'-webkit-animation' : '',
'-moz-animation' : '',
'-ms-animation' : '',
'-o-animation' : '',
'animation' : ''
})
;
},
animationCallbacks: function() {
module.remove.queueCallback();
module.remove.completeCallback();
},
queueCallback: function() {
$module.off('.queue' + eventNamespace)
$module.off('.queue' + eventNamespace);
},
completeCallback: function() {
$module.off('.complete' + eventNamespace);
@ -453,6 +466,11 @@ $.fn.transition = function() {
.removeClass(className.outward)
;
},
duration: function() {
$module
.css('animation-duration', '')
;
},
failSafe: function() {
module.verbose('Removing fail safe timer', module.timer);
if(module.timer) {
@ -523,30 +541,59 @@ $.fn.transition = function() {
}
return $.fn.transition.settings;
},
direction: function(animation) {
// quickest manually specified direction
animationClass: function(animation) {
var
animationClass = animation || settings.animation,
directionClass = (module.can.transition() && !module.has.direction())
? module.get.direction() + ' '
: ''
;
return className.animating + ' '
+ className.transition + ' '
+ directionClass
+ animationClass
;
},
currentAnimation: function() {
return (module.cache && module.cache.animation !== undefined)
? module.cache.animation
: false
;
},
currentDirection: function() {
return module.is.inward()
? className.inward
: className.outward
;
},
direction: function() {
return module.is.hidden() || !module.is.visible()
? className.inward
: className.outward
;
},
animationDirection: function(animation) {
var
direction
;
animation = animation || settings.animation;
if(typeof animation === 'string') {
animation = animation.split(' ');
// search animation name for out/in class
$.each(animation, function(index, word){
if(word === className.inward) {
return className.inward;
direction = className.inward;
}
else if(word === className.outward) {
return className.outward;
direction = className.outward;
}
});
}
// slower backup
if( !module.can.transition() ) {
return 'static';
}
if($module.is(':visible') && !module.is.hidden()) {
return className.outward;
}
else {
return className.inward;
// return found direction
if(direction) {
return direction;
}
return false;
},
duration: function(duration) {
duration = duration || settings.duration;
@ -570,33 +617,13 @@ $.fn.transition = function() {
}
return $module.data(metadata.displayType);
},
style: function() {
var
style = $module.attr('style') || ''
;
userStyle: function(style) {
style = style || $module.attr('style') || '';
return style.replace(/display.*?;/, '');
},
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 ){
return animations[animation];
}
}
return false;
},
animationStartEvent: function() {
var
element = document.createElement('div'),
@ -639,10 +666,10 @@ $.fn.transition = function() {
can: {
transition: function(forced) {
var
elementClass = $module.attr('class'),
tagName = $module.prop('tagName'),
animation = settings.animation,
transitionExists = module.get.transitionExists(animation),
elementClass,
tagName,
$clone,
currentAnimation,
inAnimation,
@ -651,6 +678,9 @@ $.fn.transition = function() {
;
if( transitionExists === undefined || forced) {
module.verbose('Determining whether animation exists');
elementClass = $module.attr('class');
tagName = $module.prop('tagName');
$clone = $('<' + tagName + ' />').addClass( elementClass ).insertAfter($module);
currentAnimation = $clone
.addClass(animation)
@ -658,11 +688,11 @@ $.fn.transition = function() {
.removeClass(className.outward)
.addClass(className.animating)
.addClass(className.transition)
.css(animationName)
.css('animationName')
;
inAnimation = $clone
.addClass(className.inward)
.css(animationName)
.css('animationName')
;
displayType = $clone
.attr('class', elementClass)
@ -726,7 +756,7 @@ $.fn.transition = function() {
return $module.css('visibility') === 'hidden';
},
supported: function() {
return(animationName !== false && animationEnd !== false);
return(animationEnd !== false);
}
},
@ -735,18 +765,24 @@ $.fn.transition = function() {
if( module.is.animating() ) {
module.reset();
}
element.blur(); // IE will trigger focus change if element is not blurred before hiding
module.remove.display();
module.remove.visible();
module.set.hidden();
module.repaint();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
},
show: function(display) {
module.verbose('Showing element', display);
module.remove.hidden();
module.set.visible();
module.set.display();
module.repaint();
module.force.visible();
settings.onShow.call(element);
settings.onComplete.call(element);
// module.repaint();
},
toggle: function() {
@ -760,18 +796,18 @@ $.fn.transition = function() {
stop: function() {
module.debug('Stopping current animation');
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
},
stopAll: function() {
module.debug('Stopping all animation');
module.remove.queueCallback();
$module.trigger(animationEnd);
$module.triggerHandler(animationEnd);
},
clear: {
queue: function() {
module.debug('Clearing animation queue')
module.debug('Clearing animation queue');
module.remove.queueCallback();
}
},
@ -855,7 +891,7 @@ $.fn.transition = function() {
});
}
clearTimeout(module.performance.timer);
module.performance.timer = setTimeout(module.performance.display, 100);
module.performance.timer = setTimeout(module.performance.display, 500);
},
display: function() {
var
@ -969,7 +1005,7 @@ $.fn.transition.settings = {
debug : false,
// verbose debug output
verbose : true,
verbose : false,
// performance data output
performance : true,
@ -1026,7 +1062,7 @@ $.fn.transition.settings = {
// possible errors
error: {
noAnimation : 'There is no css animation matching the one you specified.',
noAnimation : 'Element is no longer attached to DOM. Unable to animate.',
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'
@ -1035,4 +1071,4 @@ $.fn.transition.settings = {
};
})( jQuery, window , document );
})( jQuery, window, document );

7
web/semantic/src/definitions/modules/transition.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -38,7 +38,6 @@
/* Animating */
.animating.transition {
backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;
visibility: visible !important;
}
@ -59,8 +58,8 @@
.visible.transition {
display: block !important;
visibility: visible !important;
backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;
/* backface-visibility: @backfaceVisibility;
transform: @use3DAcceleration;*/
}
/* Disabled */

540
web/semantic/src/definitions/modules/video.js
View file

@ -1,540 +0,0 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
;(function ($, window, document, undefined) {
"use strict";
$.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),
requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(callback) { setTimeout(callback, 0); },
returnedValue
;
$allModules
.each(function() {
var
settings = ( $.isPlainObject(parameters) )
? $.extend(true, {}, $.fn.video.settings, parameters)
: $.extend({}, $.fn.video.settings),
selector = settings.selector,
className = settings.className,
error = settings.error,
metadata = settings.metadata,
namespace = settings.namespace,
templates = settings.templates,
eventNamespace = '.' + namespace,
moduleNamespace = 'module-' + namespace,
$window = $(window),
$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');
module.create();
$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)
;
},
create: function() {
var
image = $module.data(metadata.image),
html = templates.video(image)
;
$module.html(html);
module.refresh();
if(!image) {
module.play();
}
module.debug('Creating html for video element', html);
},
destroy: function() {
module.verbose('Destroying previous instance of video');
module.reset();
$module
.removeData(moduleNamespace)
.off(eventNamespace)
;
$placeholder
.off(eventNamespace)
;
$playButton
.off(eventNamespace)
;
},
refresh: function() {
module.verbose('Refreshing selector cache');
$placeholder = $module.find(selector.placeholder);
$playButton = $module.find(selector.playButton);
$embed = $module.find(selector.embed);
},
// 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();
},
get: {
source: function(url) {
if(typeof url !== 'string') {
return false;
}
if(url.search('youtube.com') !== -1) {
return 'youtube';
}
else if(url.search('vimeo.com') !== -1) {
return 'vimeo';
}
return false;
},
id: function(url) {
if(url.match(settings.regExp.youtube)) {
return url.match(settings.regExp.youtube)[1];
}
else if(url.match(settings.regExp.vimeo)) {
return url.match(settings.regExp.vimeo)[2];
}
return false;
}
},
generate: {
// generates iframe html
html: function(source, id, url) {
module.debug('Generating embed html');
var
html
;
// allow override of settings
source = source || settings.source;
id = id || settings.id;
if((source && id) || url) {
if(!source || !id) {
source = module.get.source(url);
id = module.get.id(url);
}
if(source == 'vimeo') {
html = ''
+ '<iframe src="//player.vimeo.com/video/' + id + '?=' + module.generate.url(source) + '"'
+ ' width="100%" height="100%"'
+ ' frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>'
;
}
else if(source == 'youtube') {
html = ''
+ '<iframe src="//www.youtube.com/embed/' + id + '?=' + module.generate.url(source) + '"'
+ ' width="100%" height="100%"'
+ ' 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 === 'auto')
? ($module.data('image') !== undefined)
: settings.autoplay,
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
+ '&amp;title=' + showUI
+ '&amp;byline=' + showUI
+ '&amp;portrait=' + showUI
+ '&amp;autoplay=' + autoplay
;
if(settings.color) {
url += '&amp;color=' + settings.color;
}
}
if(source == 'ustream') {
url = ''
+ 'autoplay=' + autoplay
;
if(settings.color) {
url += '&amp;color=' + settings.color;
}
}
else if(source == 'youtube') {
url = ''
+ 'enablejsapi=' + api
+ '&amp;autoplay=' + autoplay
+ '&amp;autohide=' + hideUI
+ '&amp;hq=' + hd
+ '&amp;modestbranding=1'
;
if(settings.color) {
url += '&amp;color=' + settings.color;
}
}
return url;
}
},
setting: function(name, value) {
module.debug('Changing setting', 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({
'Name' : message[0],
'Arguments' : [].slice.call(message, 1) || '',
'Element' : element,
'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.length > 1) {
title += ' ' + '(' + $allModules.length + ')';
}
if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
console.groupCollapsed(title);
if(console.table) {
console.table(performance);
}
else {
$.each(performance, function(index, data) {
console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
});
}
console.groupEnd();
}
performance = [];
}
},
invoke: function(query, passedArguments, context) {
var
object = instance,
maxDepth,
found,
response
;
passedArguments = passedArguments || queryArguments;
context = element || context;
if(typeof query == 'string' && object !== undefined) {
query = query.split(/[\. ]/);
maxDepth = query.length - 1;
$.each(query, function(depth, value) {
var camelCaseValue = (depth != maxDepth)
? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
: query
;
if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
object = object[camelCaseValue];
}
else if( object[camelCaseValue] !== undefined ) {
found = object[camelCaseValue];
return false;
}
else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
object = object[value];
}
else if( object[value] !== undefined ) {
found = object[value];
return false;
}
else {
module.error(error.method, query);
return false;
}
});
}
if ( $.isFunction( found ) ) {
response = found.apply(context, passedArguments);
}
else if(found !== undefined) {
response = found;
}
if($.isArray(returnedValue)) {
returnedValue.push(response);
}
else if(returnedValue !== undefined) {
returnedValue = [returnedValue, response];
}
else if(response !== undefined) {
returnedValue = response;
}
return found;
}
};
if(methodInvoked) {
if(instance === undefined) {
module.initialize();
}
module.invoke(query);
}
else {
if(instance !== undefined) {
instance.invoke('destroy');
}
module.initialize();
}
})
;
return (returnedValue !== undefined)
? returnedValue
: this
;
};
$.fn.video.settings = {
name : 'Video',
namespace : 'video',
debug : false,
verbose : true,
performance : true,
metadata : {
id : 'id',
image : 'image',
source : 'source',
url : 'url'
},
source : false,
url : false,
id : false,
aspectRatio : (16/9),
onPlay : function(){},
onReset : function(){},
onChange : function(){},
// callbacks not coded yet (needs to use jsapi)
onPause : function() {},
onStop : function() {},
width : 'auto',
height : 'auto',
autoplay : 'auto',
color : '#442359',
hd : true,
showUI : false,
api : true,
regExp : {
youtube : /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/,
vimeo : /http:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/
},
error : {
noVideo : 'No video specified',
method : 'The method you called is not defined'
},
className : {
active : 'active'
},
selector : {
embed : '.embed',
placeholder : '.placeholder',
playButton : '.play'
}
};
$.fn.video.settings.templates = {
video: function(image) {
var
html = ''
;
if(image) {
html += ''
+ '<i class="video play icon"></i>'
+ '<img class="placeholder" src="' + image + '">'
;
}
html += '<div class="embed"></div>';
return html;
}
};
})( jQuery, window , document );

125
web/semantic/src/definitions/modules/video.less
View file

@ -1,125 +0,0 @@
/*!
* # Semantic UI - Video
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/
/*******************************
Theme
*******************************/
@type : 'module';
@element : 'video';
@import (multiple) '../../theme.config';
/*******************************
Video
*******************************/
.ui.video {
position: relative;
background-color: @background;
position: relative;
max-width: 100%;
padding-bottom: 56.25%;
height: 0px;
overflow: hidden;
}
/*--------------
Content
---------------*/
/* Placeholder Image */
.ui.video .placeholder {
background-color: @placeholderBackground;
}
/* Play Icon Overlay */
.ui.video .play {
cursor: pointer;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
width: 100%;
height: 100%;
opacity: @playOpacity;
transition: opacity 0.3s;
}
.ui.video .play.icon:before {
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
background: @playBackground;
width: (@playSize + @playBorderSize);
height: (@playSize + @playBorderSize);
line-height: (@playSize + @playBorderSize);
border-radius: @playBorderRadius;
color: @playColor;
font-size: @playSize;
text-shadow: @playShadow;
transform: translateX(-50%) translateY(-50%);
}
.ui.video .placeholder {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100%;
}
/* IFrame Embed */
.ui.video .embed iframe,
.ui.video .embed embed,
.ui.video .embed object {
position: absolute;
border: none;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
margin: 0em;
padding: 0em;
}
/*******************************
States
*******************************/
/*--------------
Hover
---------------*/
.ui.video .play:hover {
opacity: @playHoverOpacity;
}
/*--------------
Active
---------------*/
.ui.video.active .play,
.ui.video.active .placeholder {
display: none;
}
.ui.video.active .embed {
display: inline;
}
.loadUIOverrides();

2
web/semantic/src/definitions/views/ad.less
View file

@ -225,7 +225,7 @@
display: none;
}
@media only screen and (max-width : (@tabletBreakpoint - 1)) {
@media only screen and (max-width : @largestMobileScreen) {
.ui.mobile.ad {
display: block;
}

454
web/semantic/src/definitions/views/card.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -93,6 +93,7 @@
margin-top: @consecutiveGroupDistance;
}
/*--------------
Rounded Edges
---------------*/
@ -100,6 +101,7 @@
.ui.cards > .card > :first-child,
.ui.card > :first-child {
border-radius: @borderRadius @borderRadius 0em 0em !important;
border-top: none !important;
}
.ui.cards > .card > :last-child,
@ -107,14 +109,20 @@
border-radius: 0em 0em @borderRadius @borderRadius !important;
}
.ui.cards > .card > :only-child,
.ui.card > :only-child {
border-radius: @borderRadius !important;
}
/*--------------
Images
---------------*/
.ui.cards > .card > .image,
.ui.card > .image {
display: block;
position: relative;
display: block;
flex: 0 0 auto;
padding: @imagePadding;
background: @imageBackground;
}
@ -123,13 +131,11 @@
display: block;
width: 100%;
height: auto;
border-radius: @imageBorderRadius;
border: @imageBorder;
border-radius: inherit;
}
.ui.cards > .card > .image:only-child > img,
.ui.card > .image:only-child > img {
border-radius: @borderRadius;
.ui.cards > .card > .image:not(.ui) > img,
.ui.card > .image:not(.ui) > img {
border: @imageBorder;
}
/*--------------
@ -139,12 +145,13 @@
.ui.cards > .card > .content,
.ui.card > .content {
flex-grow: 1;
border: @contentBorder;
border-top: @contentDivider;
background: @contentBackground;
margin: @contentMargin;
padding: @contentPadding;
box-shadow: @contentBoxShadow;
font-size: @contentFontSize;
border: @contentBorder;
border-radius: @contentBorderRadius;
}
@ -182,9 +189,9 @@
margin-top: @descriptionDistance;
}
/*--------------
Floated
---------------*/
/*----------------
Floated Content
-----------------*/
.ui.cards > .card [class*="left floated"],
.ui.card [class*="left floated"] {
@ -319,10 +326,10 @@
Buttons
---------------*/
.ui.cards > .card > .buttons:last-child,
.ui.card > .buttons:last-child,
.ui.cards > .card > .button:last-child,
.ui.card > .button:last-child {
.ui.cards > .card > .buttons,
.ui.card > .buttons,
.ui.cards > .card > .button,
.ui.card > .button {
margin: @buttonMargin;
width: @buttonWidth;
}
@ -333,7 +340,7 @@
.ui.cards > .card .dimmer,
.ui.card .dimmer {
background: @dimmerBackground;
background-color: @dimmerColor;
z-index: @dimmerZIndex;
}
@ -388,6 +395,7 @@
max-width: 100%;
min-height: 0em !important;
flex-grow: 0;
border-top: @extraDivider !important;
position: @extraPosition;
background: @extraBackground;
width: @extraWidth;
@ -398,7 +406,6 @@
color: @extraColor;
box-shadow: @extraBoxShadow;
transition: @extraTransition;
border-top: @extraDivider;
}
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
@ -414,6 +421,18 @@
Variations
*******************************/
/*-------------------
Centered
--------------------*/
.ui.centered.cards {
justify-content: center;
}
.ui.centered.card {
margin-left: auto;
margin-right: auto;
}
/*-------------------
Fluid
--------------------*/
@ -427,6 +446,14 @@
Link
--------------------*/
.ui.cards a.card,
.ui.link.cards .card,
a.ui.card,
.ui.link.card {
transform: none;
}
.ui.cards a.card:hover,
.ui.link.cards .card:hover,
a.ui.card:hover,
@ -436,156 +463,270 @@ a.ui.card:hover,
background: @linkHoverBackground;
border: @linkHoverBorder;
box-shadow: @linkHoverBoxShadow;
transform: @linkHoverTransform;
}
/*-------------------
Colors
--------------------*/
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
box-shadow:
0px @shadowDistance 0px 0px @black,
@borderShadow
;
}
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
box-shadow:
0px @shadowDistance 0px 0px @blue,
@borderShadow
;
}
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
box-shadow:
0px @shadowDistance 0px 0px @green,
@borderShadow
;
}
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
box-shadow:
0px @shadowDistance 0px 0px @orange,
@borderShadow
;
}
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
box-shadow:
0px @shadowDistance 0px 0px @pink,
@borderShadow
;
}
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
box-shadow:
0px @shadowDistance 0px 0px @purple,
@borderShadow
;
}
/* Red */
.ui.red.cards > .card,
.ui.cards > .red.card,
.ui.red.card {
box-shadow:
0px @shadowDistance 0px 0px @red,
@borderShadow
;
}
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
box-shadow:
0px @shadowDistance 0px 0px @teal,
@borderShadow
;
}
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
box-shadow:
0px @shadowDistance 0px 0px @yellow,
@borderShadow
;
}
/* Hover */
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @blackHover,
@borderShadow
;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @blueHover,
@borderShadow
;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @greenHover,
@borderShadow
;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @orangeHover,
@borderShadow
;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @pinkHover,
@borderShadow
;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @purpleHover,
@borderShadow
@borderShadow,
0px @coloredShadowDistance 0px 0px @red,
@shadowBoxShadow
;
}
.ui.red.cards > .card:hover,
.ui.cards > .red.card:hover,
.ui.red.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @redHover,
@borderShadow
@borderShadow,
0px @coloredShadowDistance 0px 0px @redHover,
@shadowHoverBoxShadow
;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
/* Orange */
.ui.orange.cards > .card,
.ui.cards > .orange.card,
.ui.orange.card {
box-shadow:
0px @shadowDistance 0px 0px @tealHover,
@borderShadow
@borderShadow,
0px @coloredShadowDistance 0px 0px @orange,
@shadowBoxShadow
;
}
.ui.orange.cards > .card:hover,
.ui.cards > .orange.card:hover,
.ui.orange.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @orangeHover,
@shadowHoverBoxShadow
;
}
/* Yellow */
.ui.yellow.cards > .card,
.ui.cards > .yellow.card,
.ui.yellow.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @yellow,
@shadowBoxShadow
;
}
.ui.yellow.cards > .card:hover,
.ui.cards > .yellow.card:hover,
.ui.yellow.card:hover {
box-shadow:
0px @shadowDistance 0px 0px @yellowHover,
@borderShadow
@borderShadow,
0px @coloredShadowDistance 0px 0px @yellowHover,
@shadowHoverBoxShadow
;
}
/* Olive */
.ui.olive.cards > .card,
.ui.cards > .olive.card,
.ui.olive.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @olive,
@shadowBoxShadow
;
}
.ui.olive.cards > .card:hover,
.ui.cards > .olive.card:hover,
.ui.olive.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @oliveHover,
@shadowHoverBoxShadow
;
}
/* Green */
.ui.green.cards > .card,
.ui.cards > .green.card,
.ui.green.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @green,
@shadowBoxShadow
;
}
.ui.green.cards > .card:hover,
.ui.cards > .green.card:hover,
.ui.green.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @greenHover,
@shadowHoverBoxShadow
;
}
/* Teal */
.ui.teal.cards > .card,
.ui.cards > .teal.card,
.ui.teal.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @teal,
@shadowBoxShadow
;
}
.ui.teal.cards > .card:hover,
.ui.cards > .teal.card:hover,
.ui.teal.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @tealHover,
@shadowHoverBoxShadow
;
}
/* Blue */
.ui.blue.cards > .card,
.ui.cards > .blue.card,
.ui.blue.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @blue,
@shadowBoxShadow
;
}
.ui.blue.cards > .card:hover,
.ui.cards > .blue.card:hover,
.ui.blue.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @blueHover,
@shadowHoverBoxShadow
;
}
/* Violet */
.ui.violet.cards > .card,
.ui.cards > .violet.card,
.ui.violet.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @violet,
@shadowBoxShadow
;
}
.ui.violet.cards > .card:hover,
.ui.cards > .violet.card:hover,
.ui.violet.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @violetHover,
@shadowHoverBoxShadow
;
}
/* Purple */
.ui.purple.cards > .card,
.ui.cards > .purple.card,
.ui.purple.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @purple,
@shadowBoxShadow
;
}
.ui.purple.cards > .card:hover,
.ui.cards > .purple.card:hover,
.ui.purple.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @purpleHover,
@shadowHoverBoxShadow
;
}
/* Pink */
.ui.pink.cards > .card,
.ui.cards > .pink.card,
.ui.pink.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @pink,
@shadowBoxShadow
;
}
.ui.pink.cards > .card:hover,
.ui.cards > .pink.card:hover,
.ui.pink.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @pinkHover,
@shadowHoverBoxShadow
;
}
/* Brown */
.ui.brown.cards > .card,
.ui.cards > .brown.card,
.ui.brown.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @brown,
@shadowBoxShadow
;
}
.ui.brown.cards > .card:hover,
.ui.cards > .brown.card:hover,
.ui.brown.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @brownHover,
@shadowHoverBoxShadow
;
}
/* Grey */
.ui.grey.cards > .card,
.ui.cards > .grey.card,
.ui.grey.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @grey,
@shadowBoxShadow
;
}
.ui.grey.cards > .card:hover,
.ui.cards > .grey.card:hover,
.ui.grey.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @greyHover,
@shadowHoverBoxShadow
;
}
/* Black */
.ui.black.cards > .card,
.ui.cards > .black.card,
.ui.black.card {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @black,
@shadowBoxShadow
;
}
.ui.black.cards > .card:hover,
.ui.cards > .black.card:hover,
.ui.black.card:hover {
box-shadow:
@borderShadow,
0px @coloredShadowDistance 0px 0px @blackHover,
@shadowHoverBoxShadow
;
}
@ -610,9 +751,6 @@ a.ui.card:hover,
margin-left: @twoCardSpacing;
margin-right: @twoCardSpacing;
}
.ui.two.cards > .card:nth-child(2n+1) {
clear: left;
}
.ui.three.cards {
margin-left: @threeCardOffset;
@ -623,9 +761,6 @@ a.ui.card:hover,
margin-left: @threeCardSpacing;
margin-right: @threeCardSpacing;
}
.ui.three.cards > .card:nth-child(3n+1) {
clear: left;
}
.ui.four.cards {
margin-left: @fourCardOffset;
@ -636,9 +771,6 @@ a.ui.card:hover,
margin-left: @fourCardSpacing;
margin-right: @fourCardSpacing;
}
.ui.four.cards > .card:nth-child(4n+1) {
clear: left;
}
.ui.five.cards {
margin-left: @fiveCardOffset;
@ -649,9 +781,6 @@ a.ui.card:hover,
margin-left: @fiveCardSpacing;
margin-right: @fiveCardSpacing;
}
.ui.five.cards > .card:nth-child(5n+1) {
clear: left;
}
.ui.six.cards {
margin-left: @sixCardOffset;
@ -662,9 +791,6 @@ a.ui.card:hover,
margin-left: @sixCardSpacing;
margin-right: @sixCardSpacing;
}
.ui.six.cards > .card:nth-child(6n+1) {
clear: left;
}
.ui.seven.cards {
margin-left: @sevenCardOffset;
@ -675,9 +801,6 @@ a.ui.card:hover,
margin-left: @sevenCardSpacing;
margin-right: @sevenCardSpacing;
}
.ui.seven.cards > .card:nth-child(7n+1) {
clear: left;
}
.ui.eight.cards {
margin-left: @eightCardOffset;
@ -689,9 +812,6 @@ a.ui.card:hover,
margin-right: @eightCardSpacing;
font-size: 11px;
}
.ui.eight.cards > .card:nth-child(8n+1) {
clear: left;
}
.ui.nine.cards {
margin-left: @nineCardOffset;
@ -703,9 +823,6 @@ a.ui.card:hover,
margin-right: @nineCardSpacing;
font-size: 10px;
}
.ui.nine.cards > .card:nth-child(9n+1) {
clear: left;
}
.ui.ten.cards {
margin-left: @tenCardOffset;
@ -716,9 +833,6 @@ a.ui.card:hover,
margin-left: @tenCardSpacing;
margin-right: @tenCardSpacing;
}
.ui.ten.cards > .card:nth-child(10n+1) {
clear: left;
}
/*-------------------

2
web/semantic/src/definitions/views/comment.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*

23
web/semantic/src/definitions/views/feed.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -29,7 +29,7 @@
margin-top: 0em;
}
.ui.feed:last-child {
margin-top: 0em;
margin-bottom: 0em;
}
@ -39,7 +39,8 @@
/* Event */
.ui.feed > .event {
display: @eventDisplay;
display: flex;
flex-direction: row;
width: @eventWidth;
padding: @eventPadding;
margin: @eventMargin;
@ -56,10 +57,11 @@
/* Event Label */
.ui.feed > .event > .label {
display: @labelDisplay;
display: block;
flex: 0 0 auto;
width: @labelWidth;
height: @labelHeight;
vertical-align: @labelVerticalAlign;
align-self: @labelAlignSelf;
text-align: @labelTextAlign;
}
.ui.feed > .event > .label .icon {
@ -78,13 +80,18 @@
border-radius: @imageLabelBorderRadius;
}
.ui.feed > .event > .label + .content {
padding: @labeledContentPadding;
margin: @labeledContentMargin;
}
/*--------------
Content
---------------*/
/* Content */
.ui.feed > .event > .content {
display: @contentDisplay;
vertical-align: @contentVerticalAlign;
display: block;
flex: 1 1 auto;
align-self: @contentAlignSelf;
text-align: @contentTextAlign;
word-wrap: @contentWordWrap;
}

26
web/semantic/src/definitions/views/item.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -27,8 +27,6 @@
---------------*/
.ui.items > .item {
table-layout: fixed;
display: @display;
margin: @itemSpacing 0em;
width: @width;
@ -65,9 +63,6 @@
Item
---------------*/
.ui.items > .item {
min-width: 100%;
}
.ui.items > .item:after {
display: block;
content: ' ';
@ -91,12 +86,13 @@
.ui.items > .item > .image {
position: relative;
flex: 0 0 auto;
display: @imageDisplay;
float: @imageFloat;
margin: @imageMargin;
padding: @imagePadding;
max-height: @imageMaxHeight;
vertical-align: @imageVerticalAlign;
align-self: @imageVerticalAlign;
}
.ui.items > .item > .image > img {
display: block;
@ -117,6 +113,7 @@
.ui.items > .item > .content {
display: block;
flex: 1 1 auto;
background: @contentBackground;
margin: @contentMargin;
padding: @contentPadding;
@ -135,15 +132,16 @@
}
.ui.items > .item > .image + .content {
min-width: 0;
width: @contentWidth;
display: @contentDisplay;
margin-left: @contentOffset;
vertical-align: @contentVerticalAlign;
align-self: @contentVerticalAlign;
padding-left: @contentImageDistance;
}
.ui.items > .item > .content > .header {
display: block;
display: inline-block;
margin: @headerMargin;
font-family: @headerFont;
font-weight: @headerFontWeight;
@ -171,7 +169,7 @@
---------------*/
.ui.items > .item .content img {
vertical-align: @contentImageVerticalAlign;
align-self: @contentImageVerticalAlign;
width: @contentImageWidth;
}
.ui.items > .item img.avatar,
@ -210,6 +208,7 @@
---------------*/
.ui.items > .item .meta {
margin: @metaMargin;
font-size: @metaFontSize;
line-height: @metaLineHeight;
color: @metaColor;
@ -356,6 +355,7 @@
/* Mobily Only */
@media only screen and (max-width: @largestMobileScreen) {
.ui.items > .item {
flex-direction: column;
margin: @mobileItemSpacing 0em;
}
.ui.items > .item > .image {
@ -387,13 +387,13 @@
--------------------*/
.ui.items > .item > .image + [class*="top aligned"].content {
vertical-align: top;
align-self: flex-start;
}
.ui.items > .item > .image + [class*="middle aligned"].content {
vertical-align: middle;
align-self: center;
}
.ui.items > .item > .image + [class*="bottom aligned"].content {
vertical-align: bottom;
align-self: flex-end;
}

344
web/semantic/src/definitions/views/statistic.less Normal file → Executable file
View file

@ -3,7 +3,7 @@
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributorss
* Copyright 2015 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
@ -24,7 +24,8 @@
/* Standalone */
.ui.statistic {
display: @display;
display: inline-flex;
flex-direction: column;
margin: @margin;
max-width: @maxWidth;
}
@ -40,21 +41,27 @@
margin-bottom: 0em;
}
/* Grouped */
.ui.statistics > .statistic {
display: @elementDisplay;
float: @elementFloat;
margin: @elementMargin;
max-width: @elementMaxWidth;
}
/*******************************
Group
*******************************/
/* Grouped */
.ui.statistics {
display: @groupDisplay;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
}
.ui.statistics > .statistic {
display: inline-flex;
flex: 0 1 auto;
flex-direction: column;
margin: @elementMargin;
max-width: @elementMaxWidth;
}
.ui.statistics {
display: flex;
margin: @groupMargin;
}
@ -145,8 +152,9 @@
.ui.statistics .statistic > .text.value,
.ui.statistic > .text.value {
line-height: @textLabelLineHeight;
min-height: @textLabelMinHeight;
line-height: @textValueLineHeight;
min-height: @textValueMinHeight;
font-weight: @textValueFontWeight;
text-align: center;
}
.ui.statistics .statistic > .text.value + .label,
@ -170,20 +178,113 @@
Variations
*******************************/
/*--------------
Count
---------------*/
.ui.ten.statistics {
margin: @itemGroupMargin;
}
.ui.ten.statistics .statistic {
min-width: @tenColumn;
margin: @itemMargin;
}
.ui.nine.statistics {
margin: @itemGroupMargin;
}
.ui.nine.statistics .statistic {
min-width: @nineColumn;
margin: @itemMargin;
}
.ui.eight.statistics {
margin: @itemGroupMargin;
}
.ui.eight.statistics .statistic {
min-width: @eightColumn;
margin: @itemMargin;
}
.ui.seven.statistics {
margin: @itemGroupMargin;
}
.ui.seven.statistics .statistic {
min-width: @sevenColumn;
margin: @itemMargin;
}
.ui.six.statistics {
margin: @itemGroupMargin;
}
.ui.six.statistics .statistic {
min-width: @sixColumn;
margin: @itemMargin;
}
.ui.five.statistics {
margin: @itemGroupMargin;
}
.ui.five.statistics .statistic {
min-width: @fiveColumn;
margin: @itemMargin;
}
.ui.four.statistics {
margin: @itemGroupMargin;
}
.ui.four.statistics .statistic {
min-width: @fourColumn;
margin: @itemMargin;
}
.ui.three.statistics {
margin: @itemGroupMargin;
}
.ui.three.statistics .statistic {
min-width: @threeColumn;
margin: @itemMargin;
}
.ui.two.statistics {
margin: @itemGroupMargin;
}
.ui.two.statistics .statistic {
min-width: @twoColumn;
margin: @itemMargin;
}
.ui.one.statistics {
margin: @itemGroupMargin;
}
.ui.one.statistics .statistic {
min-width: @oneColumn;
margin: @itemMargin;
}
/*--------------
Horizontal
---------------*/
.ui.horizontal.statistics,
.ui.horizontal.statistic {
display: block;
flex-direction: row;
align-items: center;
}
.ui.horizontal.statistics {
flex-direction: column;
margin: 0em;
max-width: 9999px;
max-width: none;
}
.ui.horizontal.statistics .statistic {
float: none;
flex-direction: row;
align-items: center;
max-width: none;
margin: @horizontalGroupElementMargin;
max-width: 9999px;
}
.ui.horizontal.statistic > .text.value,
@ -211,45 +312,139 @@
Colors
---------------*/
.ui.blue.statistics .statistic > .value,
.ui.statistics .blue.statistic > .value,
.ui.blue.statistic > .value {
color: @blue;
}
.ui.green.statistics .statistic > .value,
.ui.statistics .green.statistic > .value,
.ui.green.statistic > .value {
color: @green;
.ui.red.statistics .statistic > .value,
.ui.statistics .red.statistic > .value,
.ui.red.statistic > .value {
color: @red;
}
.ui.orange.statistics .statistic > .value,
.ui.statistics .orange.statistic > .value,
.ui.orange.statistic > .value {
color: @orange;
}
.ui.pink.statistics .statistic > .value,
.ui.statistics .pink.statistic > .value,
.ui.pink.statistic > .value {
color: @pink;
.ui.yellow.statistics .statistic > .value,
.ui.statistics .yellow.statistic > .value,
.ui.yellow.statistic > .value {
color: @yellow;
}
.ui.purple.statistics .statistic > .value,
.ui.statistics .purple.statistic > .value,
.ui.purple.statistic > .value {
color: @purple;
.ui.olive.statistics .statistic > .value,
.ui.statistics .olive.statistic > .value,
.ui.olive.statistic > .value {
color: @olive;
}
.ui.red.statistics .statistic > .value,
.ui.statistics .red.statistic > .value,
.ui.red.statistic > .value {
color: @red;
.ui.green.statistics .statistic > .value,
.ui.statistics .green.statistic > .value,
.ui.green.statistic > .value {
color: @green;
}
.ui.teal.statistics .statistic > .value,
.ui.statistics .teal.statistic > .value,
.ui.teal.statistic > .value {
color: @teal;
}
.ui.yellow.statistics .statistic > .value,
.ui.statistics .yellow.statistic > .value,
.ui.yellow.statistic > .value {
color: @yellow;
.ui.blue.statistics .statistic > .value,
.ui.statistics .blue.statistic > .value,
.ui.blue.statistic > .value {
color: @blue;
}
.ui.violet.statistics .statistic > .value,
.ui.statistics .violet.statistic > .value,
.ui.violet.statistic > .value {
color: @violet;
}
.ui.purple.statistics .statistic > .value,
.ui.statistics .purple.statistic > .value,
.ui.purple.statistic > .value {
color: @purple;
}
.ui.pink.statistics .statistic > .value,
.ui.statistics .pink.statistic > .value,
.ui.pink.statistic > .value {
color: @pink;
}
.ui.brown.statistics .statistic > .value,
.ui.statistics .brown.statistic > .value,
.ui.brown.statistic > .value {
color: @brown;
}
.ui.grey.statistics .statistic > .value,
.ui.statistics .grey.statistic > .value,
.ui.grey.statistic > .value {
color: @grey;
}
/*--------------
Inverted
---------------*/
.ui.inverted.statistics .statistic > .value,
.ui.inverted.statistic .value {
color: @invertedValueColor;
}
.ui.inverted.statistics .statistic > .label,
.ui.inverted.statistic .label {
color: @invertedLabelColor;
}
.ui.inverted.red.statistics .statistic > .value,
.ui.statistics .inverted.red.statistic > .value,
.ui.inverted.red.statistic > .value {
color: @lightRed;
}
.ui.inverted.orange.statistics .statistic > .value,
.ui.statistics .inverted.orange.statistic > .value,
.ui.inverted.orange.statistic > .value {
color: @lightOrange;
}
.ui.inverted.yellow.statistics .statistic > .value,
.ui.statistics .inverted.yellow.statistic > .value,
.ui.inverted.yellow.statistic > .value {
color: @lightYellow;
}
.ui.inverted.olive.statistics .statistic > .value,
.ui.statistics .inverted.olive.statistic > .value,
.ui.inverted.olive.statistic > .value {
color: @lightOlive;
}
.ui.inverted.green.statistics .statistic > .value,
.ui.statistics .inverted.green.statistic > .value,
.ui.inverted.green.statistic > .value {
color: @lightGreen;
}
.ui.inverted.teal.statistics .statistic > .value,
.ui.statistics .inverted.teal.statistic > .value,
.ui.inverted.teal.statistic > .value {
color: @lightTeal;
}
.ui.inverted.blue.statistics .statistic > .value,
.ui.statistics .inverted.blue.statistic > .value,
.ui.inverted.blue.statistic > .value {
color: @lightBlue;
}
.ui.inverted.violet.statistics .statistic > .value,
.ui.statistics .inverted.violet.statistic > .value,
.ui.inverted.violet.statistic > .value {
color: @lightViolet;
}
.ui.inverted.purple.statistics .statistic > .value,
.ui.statistics .inverted.purple.statistic > .value,
.ui.inverted.purple.statistic > .value {
color: @lightPurple;
}
.ui.inverted.pink.statistics .statistic > .value,
.ui.statistics .inverted.pink.statistic > .value,
.ui.inverted.pink.statistic > .value {
color: @lightPink;
}
.ui.inverted.brown.statistics .statistic > .value,
.ui.statistics .inverted.brown.statistic > .value,
.ui.inverted.brown.statistic > .value {
color: @lightBrown;
}
.ui.inverted.grey.statistics .statistic > .value,
.ui.statistics .inverted.grey.statistic > .value,
.ui.inverted.grey.statistic > .value {
color: @lightGrey;
}
/*--------------
@ -268,57 +463,6 @@
margin-bottom: 0em;
}
/*--------------
Inverted
---------------*/
.ui.inverted.statistic .value {
color: @invertedValueColor;
}
.ui.inverted.statistic .label {
color: @invertedLabelColor;
}
.ui.inverted.blue.statistics .statistic > .value,
.ui.statistics .inverted.blue.statistic > .value,
.ui.inverted.blue.statistic > .value {
color: @lightBlue;
}
.ui.inverted.green.statistics .statistic > .value,
.ui.statistics .inverted.green.statistic > .value,
.ui.inverted.green.statistic > .value {
color: @lightGreen;
}
.ui.inverted.orange.statistics .statistic > .value,
.ui.statistics .inverted.orange.statistic > .value,
.ui.inverted.orange.statistic > .value {
color: @lightOrange;
}
.ui.inverted.pink.statistics .statistic > .value,
.ui.statistics .inverted.pink.statistic > .value,
.ui.inverted.pink.statistic > .value {
color: @lightPink;
}
.ui.inverted.purple.statistics .statistic > .value,
.ui.statistics .inverted.purple.statistic > .value,
.ui.inverted.purple.statistic > .value {
color: @lightPurple;
}
.ui.inverted.red.statistics .statistic > .value,
.ui.statistics .inverted.red.statistic > .value,
.ui.inverted.red.statistic > .value {
color: @lightRed;
}
.ui.inverted.teal.statistics .statistic > .value,
.ui.statistics .inverted.teal.statistic > .value,
.ui.inverted.teal.statistic > .value {
color: @lightTeal;
}
.ui.inverted.yellow.statistics .statistic > .value,
.ui.statistics .inverted.yellow.statistic > .value,
.ui.inverted.yellow.statistic > .value {
color: @lightYellow;
}
/*--------------
Sizes
@ -336,7 +480,7 @@
}
.ui.mini.statistics .statistic > .text.value,
.ui.mini.statistic > .text.value {
font-size: @miniTextLabelSize;
font-size: @miniTextValueSize;
}
@ -351,7 +495,7 @@
}
.ui.tiny.statistics .statistic > .text.value,
.ui.tiny.statistic > .text.value {
font-size: @tinyTextLabelSize;
font-size: @tinyTextValueSize;
}
/* Small */
@ -365,7 +509,7 @@
}
.ui.small.statistics .statistic > .text.value,
.ui.small.statistic > .text.value {
font-size: @smallTextLabelSize;
font-size: @smallTextValueSize;
}
/* Medium */
@ -379,7 +523,7 @@
}
.ui.statistics .statistic > .text.value,
.ui.statistic > .text.value {
font-size: @textLabelSize;
font-size: @textValueSize;
}
/* Large */
@ -393,7 +537,7 @@
}
.ui.large.statistics .statistic > .text.value,
.ui.large.statistic > .text.value {
font-size: @largeTextLabelSize;
font-size: @largeTextValueSize;
}
/* Huge */
@ -407,8 +551,8 @@
}
.ui.huge.statistics .statistic > .text.value,
.ui.huge.statistic > .text.value {
font-size: @hugeTextLabelSize;
font-size: @hugeTextValueSize;
}
.loadUIOverrides();
.loadUIOverrides();

4
web/semantic/src/semantic.less
View file

@ -1,4 +1,3 @@
@charset "UTF-8";
/*
███████╗███████╗███╗ ███╗ █████╗ ███╗ ██╗████████╗██╗ ██████╗ ██╗ ██╗██╗
@ -17,6 +16,7 @@
/* Elements */
& { @import "definitions/elements/button"; }
& { @import "definitions/elements/container"; }
& { @import "definitions/elements/divider"; }
& { @import "definitions/elements/flag"; }
& { @import "definitions/elements/header"; }
@ -52,6 +52,7 @@
& { @import "definitions/modules/checkbox"; }
& { @import "definitions/modules/dimmer"; }
& { @import "definitions/modules/dropdown"; }
& { @import "definitions/modules/embed"; }
& { @import "definitions/modules/modal"; }
& { @import "definitions/modules/nag"; }
& { @import "definitions/modules/popup"; }
@ -63,4 +64,3 @@
& { @import "definitions/modules/sticky"; }
& { @import "definitions/modules/tab"; }
& { @import "definitions/modules/transition"; }
& { @import "definitions/modules/video"; }

8
web/semantic/src/theme.config.example
View file

@ -23,6 +23,7 @@
/* Elements */
@button : 'default';
@container : 'default';
@divider : 'default';
@flag : 'default';
@header : 'default';
@ -50,6 +51,7 @@
@checkbox : 'default';
@dimmer : 'default';
@dropdown : 'default';
@embed : 'default';
@modal : 'default';
@nag : 'default';
@popup : 'default';
@ -61,7 +63,6 @@
@sticky : 'default';
@tab : 'default';
@transition : 'default';
@video : 'default';
/* Views */
@ad : 'default';
@ -76,10 +77,11 @@
*******************************/
/* Path to theme packages */
@themesFolder : 'themes/';
@themesFolder : 'themes';
/* Path to site override folder */
@siteFolder : 'site/';
@siteFolder : 'site';
/*******************************
Import Theme

51
web/semantic/src/theme.less
View file

@ -2,32 +2,45 @@
Import Directives
*******************************/
@theme : @@element;
/*------------------
Default Theme
Theme
-------------------*/
@theme: @@element;
/*--------------------
Site Variables
---------------------*/
/* Default site.variables */
@import "@{themesFolder}/default/globals/site.variables";
/* Packaged site.variables */
@import "@{themesFolder}/@{site}/globals/site.variables";
/* Component's site.variables */
@import (optional) "@{themesFolder}/@{theme}/globals/site.variables";
/* Site theme site.variables */
@import (optional) "@{siteFolder}/globals/site.variables";
/*-------------------
Component Variables
---------------------*/
/* Default */
@import "@{themesFolder}/default/@{type}s/@{element}.variables";
/*------------------
Packaged Theme
-------------------*/
/* Packaged Theme */
@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";
@import "@{themesFolder}/@{site}/globals/site.variables";
@import "@{themesFolder}/@{theme}/@{type}s/@{element}.variables";
/*------------------
Site Theme
-------------------*/
@import "@{siteFolder}/globals/site.variables";
@import "@{siteFolder}/@{type}s/@{element}.variables";
/* Site Theme */
@import (optional) "@{siteFolder}/@{type}s/@{element}.variables";
/*******************************
Import Mix-ins
Mix-ins
*******************************/
/*------------------
@ -35,7 +48,7 @@
-------------------*/
.loadFonts() when (@importGoogleFonts) {
@import (css) '@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}';
@import url('@{googleProtocol}fonts.googleapis.com/css?family=@{googleFontRequest}');
}
/*------------------
@ -43,6 +56,6 @@
-------------------*/
.loadUIOverrides() {
@import "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
@import "@{siteFolder}/@{type}s/@{element}.overrides";
@import (optional) "@{themesFolder}/@{theme}/@{type}s/@{element}.overrides";
@import (optional) "@{siteFolder}/@{type}s/@{element}.overrides";
}

10
web/semantic/src/themes/amazon/elements/button.overrides
View file

@ -21,20 +21,20 @@
}
.ui.labeled.icon.buttons .button .icon,
.ui.labeled.icon.button .icon {
.ui.labeled.icon.buttons .button > .icon,
.ui.labeled.icon.button > .icon {
padding-bottom: 0.48em;
padding-top: 0.48em;
position: absolute;
text-align: center;
width: 2em;
height: 2em;
top: 0.3em;
top: 0.35em;
left: 0.4em;
border-radius: 3px;
}
.ui.right.labeled.icon.buttons .button .icon,
.ui.right.labeled.icon.button .icon {
.ui.right.labeled.icon.buttons .button > .icon,
.ui.right.labeled.icon.button > .icon {
left: auto;
right: 0.4em;
border-radius: 3px;

9
web/semantic/src/themes/amazon/elements/button.variables
View file

@ -8,12 +8,13 @@
@textColor: #111111;
@fontWeight: normal;
@transition:
opacity @transitionDuration @transitionEasing,
background-color @transitionDuration @transitionEasing,
color @transitionDuration @transitionEasing,
background @transitionDuration @transitionEasing
opacity @defaultDuration @defaultEasing,
background-color @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
background @defaultDuration @defaultEasing
;
@hoverBackgroundColor: #E0E0E0;
@borderRadius: 3px;
@verticalPadding: 0.8em;

43
web/semantic/src/themes/amazon/globals/site.variables Normal file
View file

@ -0,0 +1,43 @@
/*******************************
User Global Variables
*******************************/
@pageMinWidth : 1049px;
@pageOverflowX : visible;
@emSize: 13px;
@fontSize : 13px;
@fontName : 'Arial';
@importGoogleFonts : false;
@h1: 2.25em;
@defaultBorderRadius: 0.30769em; /* 4px @ 13em */
@disabledOpacity: 0.3;
@black: #444C55;
@orange: #FDE07B;
@linkColor: #0066C0;
@linkHoverColor: #C45500;
@linkHoverUnderline: underline;
@borderColor: rgba(0, 0, 0, 0.13);
@solidBorderColor: #DDDDDD;
@internalBorderColor: rgba(0, 0, 0, 0.06);
@selectedBorderColor: #51A7E8;
/* Breakpoints */
@largeMonitorBreakpoint: 1049px;
@computerBreakpoint: @largeMonitorBreakpoint;
@tabletBreakpoint: @largeMonitorBreakpoint;
/* Colors */
@blue: #80A6CD;
@green: #60B044;
@orange: #D26911;
@infoBackgroundColor: #E6F1F6;
@infoTextColor: #4E575B;

1
web/semantic/src/themes/basic/collections/table.variables
View file

@ -3,6 +3,7 @@
--------------------*/
@headerBackground: @white;
@footerBackground: @white;
@cellVerticalPadding: 1em;
@cellHorizontalPadding: 1em;

3
web/semantic/src/themes/basic/elements/step.overrides
View file

@ -4,4 +4,7 @@
.ui.steps .step:after {
display: none !important;
}
.ui.steps .step {
border-radius: 500px !important;
}

18
web/semantic/src/themes/basic/elements/step.variables
View file

@ -2,9 +2,17 @@
Step Variables
--------------------*/
@background: transparent;
@borderRadius: 500em;
@boxShadow: none;
/* Stepss */
@stepsBorder: none;
@stepsBorderRadius: @circularRadius;
@activeBackground: #E5E5E5;
@iconDistance: 0.8em;
/* Step */
@border: none;
@divider: none;
@background: transparent;
@borderRadius: @circularRadius;
@iconDistance: 0.8em;
@arrowDisplay: none;
@activeBackground: @midWhite;
@activeArrowDisplay: none;

10
web/semantic/src/themes/basic/views/card.variables
View file

@ -21,13 +21,15 @@
@extraBoxShadow: none;
@extraPadding: 0.5em 0em;
@extraLinkColor: @linkColor;
@extraLinkHoverColor: @linkColor;
@extraLinkColor: @textColor;
@extraLinkHoverColor: @linkHoverColor;
@headerFontSize: 1.2em;
@headerLinkColor: @linkColor;
@headerFontSize: @relativeLarge;
@headerLinkColor: @textColor;
@headerLinkHoverColor: @linkHoverColor;
@imageBorderRadius: @borderRadius;
@imageBorder: 1px solid @borderColor;
@linkHoverBackground: transparent;
@linkHoverBoxShadow: none;

10
web/semantic/src/themes/bookish/elements/header.variables
View file

@ -30,8 +30,8 @@
@h5: 0.9rem;
/* Sizing */
@tiny: 1.5em;
@small: 1.33em;
@medium: 1.33em;
@large: 1em;
@huge: 0.9em;
@hugeFontSize: 1.75em;
@largeFontSize: 1.33em;
@mediumFontSize: 1.33em;
@smallFontSize: 1em;
@tinyFontSize: 0.9em;

2
web/semantic/src/themes/bootstrap3/elements/button.variables
View file

@ -8,7 +8,7 @@
@fontWeight: normal;
@textColor: rgba(51, 51, 51, 1);
@borderRadius: 0.2857rem;
@borderRadius: @4px;
@lineHeight: 1.42857;
@verticalPadding: 0.8571em;

8
web/semantic/src/themes/chubby/collections/form.overrides
View file

@ -5,4 +5,12 @@
.ui.form .selection.dropdown {
padding: 1.1em 1.2em;
border-width: 2px;
}
.ui.form .selection.dropdown .menu {
min-width: calc(100% + 4px);
margin: 0 -2px;
border-width: 2px;
}
.ui.form .selection.dropdown input {
padding: inherit;
}

0
web/semantic/src/themes/chubby/collections/menu.overrides Normal file
View file

40
web/semantic/src/themes/chubby/collections/menu.variables Normal file
View file

@ -0,0 +1,40 @@
/*******************************
Menu
*******************************/
@background: @darkWhite;
@boxShadow: none;
@dividerSize: 0px;
@verticalBoxShadow: 0px 0px 0px 2px @borderColor inset;
@verticalActiveBoxShadow: none;
@itemVerticalPadding: 1.25em;
@itemHorizontalPadding: 2em;
@itemFontWeight: bold;
@activeItemBackground: @primaryColor;
@activeItemTextColor: @white;
@activeHoverItemBackground: @primaryColorHover;
@activeHoverItemColor: @white;
@secondaryItemPadding: @relativeSmall @relativeMedium;
@secondaryActiveItemBackground: @primaryColor;
@secondaryActiveItemColor: @white;
@secondaryActiveHoverItemBackground: @primaryColorHover;
@secondaryActiveHoverItemColor: @white;
@secondaryPointingBorderWidth: 4px;
@secondaryPointingActiveBorderColor: @primaryColor;
@secondaryPointingActiveTextColor: @primaryColor;
@arrowSize: 1em;
@arrowActiveColor: @primaryColor;
@arrowActiveHoverColor: @primaryColorHover;
@arrowBorder: transparent;
@paginationActiveBackground: @lightGrey;
@borderColor: @darkWhite;
@tabularBorderWidth: 2px;

10
web/semantic/src/themes/chubby/elements/header.variables
View file

@ -14,8 +14,8 @@
@h5: 0.8rem;
/* Sizing */
@huge: 1.33em;
@large: 1.2em;
@medium: 1em;
@small: 0.9em;
@tiny: 0.8em;
@hugeFontSize: 1.33em;
@largeFontSize: 1.2em;
@mediumFontSize: 1em;
@smallFontSize: 0.9em;
@tinyFontSize: 0.8em;

1
web/semantic/src/themes/classic/modules/progress.variables
View file

@ -6,3 +6,4 @@
@boxShadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset;
@barBackground: @subtleGradient #888888;
@border: 1px solid @borderColor;
@padding: @relative3px;

2
web/semantic/src/themes/classic/views/card.overrides
View file

@ -75,7 +75,7 @@
@extraPadding: 0.5em 0.75em;
@extraColor: @lightTextColor;
@extraTransition: color @transitionDuration @transitionEasing;
@extraTransition: color @defaultDuration @defaultEasing;
/*-------------------
States

0
web/semantic/src/themes/colored/modules/checkbox.overrides Normal file
View file

29
web/semantic/src/themes/colored/modules/checkbox.variables Normal file
View file

@ -0,0 +1,29 @@
/* Checkbox */
@checkboxActiveBackground: @primaryColor;
@checkboxActiveBorderColor: @primaryColor;
@checkboxActiveCheckColor: @white;
@checkboxActiveFocusBackground: @primaryColorFocus;
@checkboxActiveFocusBorderColor: @primaryColorFocus;
@checkboxActiveFocusCheckColor: @white;
@checkboxTransition: none;
/* Radio */
@radioActiveBackground: @white;
@radioActiveBorderColor: @primaryColor;
@radioActiveBulletColor: @primaryColor;
@radioActiveFocusBackground: @white;
@radioActiveFocusBorderColor: @primaryColorFocus;
@radioActiveFocusBulletColor: @primaryColorFocus;
/* Slider */
@sliderOnLineColor: @primaryColor;
@sliderOnFocusLineColor: @primaryColorFocus;
/* Handle */
@handleBackground: @white @subtleGradient;
@handleBoxShadow:
0px 0px 0px 1px @selectedBorderColor inset
;

22
web/semantic/src/themes/default/collections/breadcrumb.variables
View file

@ -6,15 +6,15 @@
Breadcrumb
--------------------*/
@verticalMargin: 1em;
@verticalMargin: 0em;
@display: inline-block;
@verticalAlign: middle;
@dividerSpacing: 0.2rem;
@dividerOpacity: 0.5;
@dividerSpacing: @3px;
@dividerOpacity: 0.7;
@dividerColor: @lightTextColor;
@dividerSize: 0.9em;
@dividerSize: @relativeSmall;
@dividerVerticalAlign: baseline;
@iconDividerSize: @relativeTiny;
@ -24,20 +24,10 @@
@sectionPadding: 0em;
/* Coupling */
@segmentPadding: 0.5em 1em;
@segmentPadding: @relativeMini @relativeMedium;
/*-------------------
States
--------------------*/
@activeFontWeight: bold;
/* Sizes */
@mini: 0.65em;
@tiny: 0.7em;
@small: 0.75em;
@medium: 1em;
@big: 1.05em;
@large: 1.1em;
@huge: 1.3em;
@massive: 1.5em;
@activeFontWeight: bold;

89
web/semantic/src/themes/default/collections/form.variables
View file

@ -17,9 +17,9 @@
@fieldMargin: 0em 0em @rowDistance;
/* Form Label */
@labelDistance: 0.2857rem;
@labelDistance: @4px;
@labelMargin: 0em 0em @labelDistance 0em;
@labelFontSize: 0.9285em;
@labelFontSize: @relativeSmall;
@labelFontWeight: bold;
@labelTextTransform: none;
@labelColor: @textColor;
@ -28,19 +28,13 @@
@inputFont: @pageFont;
@inputWidth: 100%;
@inputFontSize: 1em;
@inputVerticalPadding: 0.78571em;
@inputHorizontalPadding: 1em;
@inputLineHeight: 1.2142em;
@inputPadding: (@inputVerticalPadding + ((1em - @inputLineHeight) / 2)) @inputHorizontalPadding;
@inputBackground: #FFFFFF;
@inputBorder: 1px solid @borderColor;
@inputBorderRadius: @absoluteBorderRadius;
@inputColor: @textColor;
@inputTransition:
background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease
color @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing
;
@inputBoxShadow: 0em 0em 0em 0em transparent inset;
@ -70,28 +64,27 @@
@checkboxLabelFontSize: 1em;
@checkboxLabelTextTransform: @labelTextTransform;
/* Divider */
@dividerMargin: @rowDistance 0em;
/* Inline Validation Prompt */
@inlineValidationMargin: -0.5em 0em -0.5em @rowDistance;
@inlineValidationArrowOffset: -0.3em;
@promptBackground: @white;
@promptBorderColor: @formErrorBorder;
@promptBorder: 1px solid @promptBorderColor;
@promptTextColor: @formErrorColor;
@inlinePromptMargin: -0.25em 0em -0.5em 0.5em;
@inlinePromptBorderWidth: 1px;
/*-------------------
States
--------------------*/
/* Disabled */
/* Focus */
@inputFocusPointerSize: 1px;
@inputFocusPointerSize: 0px;
/* Input Focus */
@inputFocusBackground: @inputBackground;
@inputFocusBorderColor: @selectedBorderColor;
@inputFocusColor: rgba(0, 0, 0, 0.85);
@inputFocusBorderColor: @focusedFormBorderColor;
@inputFocusColor: @selectedTextColor;
@inputFocusBoxShadow: @inputFocusPointerSize 0em 0em 0em @selectedBorderColor inset;
@inputFocusBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
@inputFocusBorderRadius: @inputBorderRadius;
/* Text Area Focus */
@textAreaFocusBackground: @inputFocusBackground;
@ -100,32 +93,47 @@
@textAreaFocusBoxShadow: @inputFocusBoxShadow;
@textAreaFocusBorderRadius: @inputFocusBorderRadius;
/* Error */
@formErrorColor: @negativeColor;
/* Disabled */
@disabledLabelOpacity: @disabledOpacity;
/* Errored Input */
@formErrorColor: @negativeTextColor;
@formErrorBorder: @negativeBorderColor;
@formErrorBackground: @negativeBackgroundColor;
/* AutoFill */
@inputAutoFillBackground: #FFFFF0;
@inputAutoFillBorder: #E5DFA1;
@inputAutoFillFocusBackground: @inputAutoFillBackground;
@inputAutoFillFocusBorder: #D5C315;
@inputAutoFillErrorBackground: #FFFAF0;
@inputAutoFillErrorBorder: #E0B4B4;
/* Input Error */
@inputErrorPointerSize: 2px;
@inputErrorBorderRadius: 0em @inputBorderRadius @inputBorderRadius 0em;
@inputErrorBoxShadow: @inputErrorPointerSize 0em 0em 0em @formErrorColor inset;
@inputErrorBorderRadius: '';
@inputErrorBoxShadow: none;
/* Dropdown Error */
@dropdownErrorHoverBackground: #FBE7E7;
@dropdownErrorSelectedBackground: @dropdownErrorHoverBackground;
@dropdownErrorActiveBackground: #FDCFCF;
@dropdownErrorLabelBackground: #EACBCB;
@dropdownErrorLabelColor: @errorTextColor;
/* Focused Error */
@inputErrorFocusBackground: @negativeBackgroundColor;
@inputErrorFocusColor: @negativeColorHover;
@inputErrorFocusColor: @negativeTextColor;
@inputErrorFocusBorder: @negativeBorderColor;
@inputErrorFocusBoxShadow: @inputErrorPointerSize 0em 0em 0em @negativeColorHover inset;
@inputErrorFocusBoxShadow: none;
/* Placeholder */
@inputPlaceholderColor: lighten(@inputColor, 55);
@inputPlaceholderFocusColor: lighten(@inputColor, 35);
@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
/* Placeholder Error */
@inputErrorPlaceholderColor: lighten(@formErrorColor, 40);
@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 30);
/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@ -133,8 +141,6 @@
/* Loading Spinner */
@loaderSize: 3em;
@loaderOffset: -(@loaderSize / 2);
@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
@loaderLineZIndex: 101;
/*-------------------
@ -149,7 +155,12 @@
@requiredMargin: @requiredVerticalOffset 0em 0em @requiredDistance;
/* Inverted */
@invertedInputBackground: @inputBackground;
@invertedInputBorderColor: @whiteBorderColor;
@invertedInputBoxShadow: @inputBoxShadow;
@invertedInputColor: @inputColor;
@invertedLabelColor: @invertedTextColor;
@invertedInputBoxShadow: none;
/*-------------------
Variations
@ -168,23 +179,15 @@
/* Inline */
@inlineLabelFontSize: @labelFontSize;
@inlineLabelVerticalAlign: middle;
@inlineGroupedFieldLabelDistance: 0.5rem;
@inlineCheckboxLabelDistance: 1.75em;
@inlineInputSize: @relativeMedium;
@inlineLabelMargin: 0em 1em 0em 0em;
@inlineLabelDistance: @labelDistance;
@inlineLabelDistance: @relativeTiny;
@inlineLabelColor: @labelColor;
@inlineLabelFontSize: @labelFontSize;
@inlineLabelFontWeight: @labelFontWeight;
@inlineLabelTextTransform: @labelTextTransform;
/* Sizes */
@small: 0.875em;
@medium: auto;
@large: 1.125em;
@huge: 1.2em;
@groupedInlineLabelMargin: 0.035714em 1em 0em 0em;
/*-------------------
Groups

67
web/semantic/src/themes/default/collections/grid.variables
View file

@ -22,36 +22,12 @@
@tableWidth: ~"calc(100% + "@gutterWidth~")";
@columnMaxImageWidth: 100%;
@consecutiveGridDistance: (@rowSpacing / 2);
/*******************************
Variations
*******************************/
/*--------------
Page
---------------*/
/* Column Gutters */
@mobileWidth: auto;
@mobileMargin: 0em;
@mobileGutter: 0em;
@tabletWidth: auto;
@tabletMargin: 0em;
@tabletGutter: 4em;
@computerWidth: auto;
@computerMargin: 0em;
@computerGutter: 8%;
@largeMonitorWidth: auto;
@largeMonitorMargin: 0em;
@largeMonitorGutter: 15%;
@widescreenMonitorWidth: auto;
@widescreenMargin: 0em;
@widescreenMonitorGutter: 23%;
/*--------------
Relaxed
---------------*/
@ -77,10 +53,15 @@
@celledWidth: 1px;
@celledBorderColor: @solidBorderColor;
@celledPadding: 0.75em;
@celledRelaxedPadding: 1em;
@celledPadding: 1em;
@celledRelaxedPadding: 1.5em;
@celledVeryRelaxedPadding: 2em;
@celledGridDivider: 0px 0px 0px @celledWidth @celledBorderColor;
@celledRowDivider: 0px (-@celledWidth) 0px 0px @celledBorderColor;
@celledColumnDivider: (-@celledWidth) 0px 0px 0px @celledBorderColor;
/*--------------
Stackable
---------------*/
@ -90,3 +71,33 @@
@stackableMobileBorder: 1px solid @borderColor;
@stackableInvertedMobileBorder: 1px solid @whiteBorderColor;
/*******************************
Legacy
*******************************/
/*--------------
Page
---------------*/
/* Legacy (DO NOT USE)
*/
@mobileWidth: auto;
@mobileMargin: 0em;
@mobileGutter: 0em;
@tabletWidth: auto;
@tabletMargin: 0em;
@tabletGutter: 2em;
@computerWidth: auto;
@computerMargin: 0em;
@computerGutter: 3%;
@largeMonitorWidth: auto;
@largeMonitorMargin: 0em;
@largeMonitorGutter: 15%;
@widescreenMonitorWidth: auto;
@widescreenMargin: 0em;
@widescreenMonitorGutter: 23%;

478
web/semantic/src/themes/default/collections/menu.variables
View file

@ -2,68 +2,52 @@
Menu
*******************************/
/*-------------------
Globals Used
--------------------*/
// @textColor
// @borderColor
// @invertedUnselectedTextColor
/*-------------------
Collection
--------------------*/
@margin: 1rem 0rem;
@verticalPadding: 0.78571em;
@horizontalPadding: 0.95em;
/* Menu */
@verticalMargin: @medium;
@horizontalMargin: 0em;
@margin: @verticalMargin @horizontalMargin;
@background: #FFFFFF;
@fontFamily: @pageFont;
@itemBackground: none;
@fontWeight: normal;
@boxShadow:
0px 0px 0px 1px @borderColor,
@subtleShadow
;
@borderSize: 0em;
@transition:
opacity 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease
;
@borderWidth: 1px;
@border: @borderWidth solid @borderColor;
@boxShadow: @subtleShadow;
@borderRadius: @defaultBorderRadius;
@minHeight: (@itemVerticalPadding * 2) + 1em;
/* Menu Item */
@itemVerticalPadding: @relativeSmall;
@itemHorizontalPadding: @relativeLarge;
@itemTextTransform: none;
@itemTransition:
background @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing
;
@itemFontWeight: normal;
@itemTextColor: @textColor;
/* Divider */
@dividerSize: 1px;
@dividerBackground: linear-gradient(
rgba(0, 0, 0, 0.05) 0%,
rgba(0, 0, 0, 0.1) 50%,
rgba(0, 0, 0, 0.05) 100%)
;
@headerBackground: rgba(0, 0, 0, 0.04);
@headerWeight: bold;
@textLineHeight: 1.3;
@transition:
opacity 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease
;
@menuTextColor: @textColor;
@dividerBackground: @internalBorderColor;
/* Sub Menu */
@subMenuMargin: 0.5em;
@subMenuFontSize: 0.875rem;
@subMenuDistance: 0.5em;
@subMenuMargin: @subMenuDistance -@itemHorizontalPadding 0em;
@subMenuFontSize: @relativeTiny;
@subMenuTextColor: rgba(0, 0, 0, 0.5);
@subMenuHorizontalPadding: 0.5rem;
@subMenuVerticalPadding: 1.5rem;
@subMenuIndent: 0em;
@subMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
@subMenuVerticalPadding: 0.5em;
/* Text Item */
@textLineHeight: 1.3;
/*--------------
Elements
@ -71,102 +55,141 @@
/* Icon */
@iconFloat: none;
@iconMargin: 0em 0.25em 0em 0em;
@iconOpacity: 0.75;
@iconMargin: 0em @relative5px 0em 0em;
@iconOpacity: 0.9;
/* Dropdown Icon */
@dropdownIconFloat: right;
@dropdownIconDistance: 1em;
@verticalIconFloat: right;
@verticalIconMargin: 0em 0em 0em 0.5em;
/* Header */
@headerBackground: rgba(0, 0, 0, 0.04);
@headerBackground: '';
@headerWeight: bold;
@headerTextTransform: normal;
/*--------------
Couplings
---------------*/
/* Vertical Icon */
@verticalIconFloat: right;
@verticalIconMargin: 0em 0em 0em 0.5em;
/* Button */
@buttonOffset: -0.05em;
@buttonVerticalPadding: 0.55em;
@buttonSize: 0.875em;
/* Input */
@inputSize: 1em;
@inputVerticalMargin: -0.6em;
@inputOffset: 0em;
@inputVerticalPadding: 0.4em;
@smallInputOffset: 0em;
@smallInputVerticalPadding: 0.4em;
@largeInputOffset: -0.125em;
@largeInputVerticalPadding: 0.6em;
/* Label */
@labelOffset: -0.15em;
@labelBackground: rgba(0, 0, 0, 0.35);
@labelTextColor: #FFFFFF;
@labelTextMargin: 0.5em;
@labelVerticalPadding: 0.3em;
@labelHorizontalPadding: 0.8em;
@labelAndIconFloat: none;
@labelAndIconMargin: 0em 0.5em 0em 0em;
/* Dropdown */
@dropdownBackground: #FFFFFF;
@dropdownMenuOffset: 0px;
@dropdownPointingDistance: 0px;
@dropdownTextColor: @textColor;
@dropdownBackgroundHover: @transparentBlack;
@dropdownTextColorHover: @darkTextColor;
@dropdownIconMargin: 0em 0em 0em 1em;
@dropdownBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownVerticalBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
/* Vertical Header */
@verticalHeaderMargin: 0em 0em 0.5em;
@verticalHeaderFontSize: @relativeMedium;
@verticalHeaderFontWeight: bold;
/* Pointing Arrow */
@arrowSize: 0.6em;
@arrowBorderSize: 1px;
@arrowBorder: @arrowBorderSize solid @solidBorderColor;
@arrowTransition: background @transitionDuration @transitionEasing;
@arrowZIndex: 11;
@arrowSize: @relative8px;
@arrowBorderWidth: 1px;
@arrowBorder: @arrowBorderWidth solid @solidBorderColor;
@arrowTransition: background @defaultDuration @defaultEasing;
@arrowZIndex: 2;
@arrowHoverColor: #FAFAFA;
@arrowActiveColor: #F7F7F7;
@arrowHoverColor: #F2F2F2;
@arrowActiveColor: @arrowHoverColor;
@arrowActiveHoverColor: @arrowActiveColor;
@arrowVerticalHoverColor: @arrowHoverColor;
@arrowVerticalActiveColor: @arrowActiveColor;
@arrowVerticalSubMenuColor: @white;
/*--------------
Couplings
---------------*/
/* Button */
@buttonSize: @relativeMedium;
@buttonOffset: 0em;
@buttonMargin: -0.5em 0em;
@buttonVerticalPadding: @relativeMini;
/* Input */
@inputSize: @relativeMedium;
@inputVerticalMargin: -0.5em;
@inputOffset: 0em;
@inputVerticalPadding: @relative8px;
/* Image */
@imageMargin: -0.3em 0em;
@imageWidth: 2.5em;
@verticalImageWidth: auto;
/* Label */
@labelOffset: -0.15em;
@labelBackground: #999999;
@labelTextColor: @white;
@labelTextMargin: 1em;
@labelVerticalPadding: 0.3em;
@labelHorizontalPadding: @relativeMini;
@labelAndIconFloat: none;
@labelAndIconMargin: 0em 0.5em 0em 0em;
/* Dropdown in Menu */
@dropdownMenuBoxShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
@dropdownBackground: #FFFFFF;
@dropdownMenuDistance: 0em;
@dropdownMenuBorderRadius: @borderRadius;
@dropdownItemFontSize: @relativeMedium;
@dropdownItemPadding: @relativeMini @relativeLarge;
@dropdownItemBackground: transparent;
@dropdownItemColor: @textColor;
@dropdownItemTextTransform: none;
@dropdownItemFontWeight: normal;
@dropdownItemBoxShadow: none;
@dropdownItemTransition: none;
@dropdownItemIconFloat: none;
@dropdownItemIconFontSize: @relativeMedium;
@dropdownItemIconMargin: 0em 0.75em 0em 0em;
@dropdownHoveredItemBackground: @transparentBlack;
@dropdownHoveredItemColor: @selectedTextColor;
/* Dropdown Variations */
@dropdownVerticalMenuBoxShadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
@secondaryDropdownMenuDistance: @relative5px;
@pointingDropdownMenuDistance: 0.75em;
@invertedSelectionDropdownColor: @invertedTextColor;
/*--------------
States
---------------*/
@hoverBackground: @subtleTransparentBlack;
@hoverColor: @textColor;
/* Hovered Item */
@hoverItemBackground: @subtleTransparentBlack;
@hoverItemTextColor: @selectedTextColor;
@pressedBackground: @subtleTransparentBlack;
@pressedColor: @pressedTextColor;
/* Pressed Item */
@pressedItemBackground: @subtleTransparentBlack;
@pressedItemTextColor: @hoverItemTextColor;
@activeBackground: @subtleTransparentBlack;
@activeColor: @darkTextColor;
@activeBorderSize: 2px;
@activeFontWeight: normal;
/* Active Item */
@activeItemBackground: @transparentBlack;
@activeItemTextColor: @selectedTextColor;
@activeItemFontWeight: normal;
@activeIconOpacity: 1;
@activeItemBoxShadow: none;
@activeHoverBackground: @hoverBackground;
/* Active Hovered Item */
@activeHoverItemBackground: @transparentBlack;
@activeHoverItemColor: @selectedTextColor;
/* Selected Dropdown */
@dropdownSelectedItemBackground: @transparentBlack;
@dropdownSelectedItemColor: @selectedTextColor;
/* Active Dropdown */
@dropdownActiveItemBackground: @subtleTransparentBlack;
@dropdownActiveItemColor: @selectedTextColor;
@dropdownActiveItemFontWeight: bold;
/* Active Sub Menu */
@subMenuActiveBackground: transparent;
@loadingBackgroundColor: rgba(255, 255, 255, 0.8);
@loadingImage: "@{imagePath}/loader-large.gif";
@loadingPosition: 50% 50%;
@subMenuActiveTextColor: @activeItemTextColor;
@subMenuActiveFontWeight: bold;
/*--------------
@ -174,49 +197,89 @@
---------------*/
/* Vertical */
@verticalBoxShadow: @boxShadow;
@verticalPointerWidth: 2px;
@verticalBackground: #FFFFFF;
@verticalItemBackground: none;
@verticalDividerBackground: linear-gradient(to right,
rgba(0, 0, 0, 0.03) 0%,
rgba(0, 0, 0, 0.1) 1.5em,
rgba(0, 0, 0, 0.03) 100%)
;
@verticalDividerBackground: @dividerBackground;
@verticalActiveBoxShadow: none;
/* Secondary */
@secondaryBackground: none;
@secondaryMargin: 0em -@secondaryItemSpacing;
@secondaryItemBackground: none;
@secondaryItemSpacing: @relative5px;
@secondaryItemMargin: 0em @secondaryItemSpacing;
@secondaryItemVerticalPadding: @relativeMini;
@secondaryItemHorizontalPadding: @relativeSmall;
@secondaryItemPadding: @relativeMini @relativeSmall;
@secondaryItemBorderRadius: @defaultBorderRadius;
@secondaryItemTransition: color @defaultDuration @defaultEasing;
@secondaryItemColor: @unselectedTextColor;
@secondaryTransition: color 0.2s ease;
@secondaryHoverItemBackground: @transparentBlack;
@secondaryHoverItemColor: @selectedTextColor;
@secondaryBorderRadius: @defaultBorderRadius;
@secondaryActiveItemBackground: @transparentBlack;
@secondaryActiveItemColor: @selectedTextColor;
@secondaryActiveHoverItemBackground: @transparentBlack;
@secondaryActiveHoverItemColor: @selectedTextColor;
@secondaryMargin: 0.25em;
@secondaryVerticalMargin: 0.3em;
@secondaryVerticalPadding: 0.5em;
@secondaryHorizontalPadding: 0.8em;
@secondaryLinkOpacity: 0.8;
@secondaryActiveHoveredItemBackground: @transparentBlack;
@secondaryActiveHoveredItemColor: @selectedTextColor;
@secondaryHeaderBackground: none transparent;
@secondaryHeaderBorder: 0.1em solid rgba(0, 0, 0, 0.1);
@secondaryHeaderBorder: none;
@secondaryActiveBackground: @transparentBlack;
@secondaryInvertedActiveBackground: @transparentWhite;
@secondaryItemVerticalSpacing: @secondaryItemSpacing;
@secondaryVerticalItemMargin: 0em 0em @secondaryItemVerticalSpacing;
@secondaryVerticalItemBorderRadius: @defaultBorderRadius;
@secondaryMenuSubMenuMargin: 0em -@secondaryItemHorizontalPadding;
@secondaryMenuSubMenuItemMargin: 0em;
@secondarySubMenuHorizontalPadding: (@itemHorizontalPadding / @tinySize) + @subMenuIndent;
@secondaryMenuSubMenuItemPadding: @relative7px @secondarySubMenuHorizontalPadding;
/* Pointing */
@secondaryPointingBorderWidth: 3px;
@secondaryPointingVerticalPadding: 0.6em;
@secondaryPointingHorizontalPadding: 0.95em;
@secondaryPointingBorderWidth: 2px;
@secondaryPointingBorderColor: @borderColor;
@secondaryPointingItemVerticalPadding: @relativeTiny;
@secondaryPointingItemHorizontalPadding: @relativeLarge;
@secondaryPointingBorderColor: rgba(0, 0, 0, 0.2);
@secondaryPointingHoverTextColor: @textColor;
@secondaryPointingActiveBorderColor: rgba(0, 0, 0, 0.4);
@secondaryPointingActiveBorderColor: @black;
@secondaryPointingActiveTextColor: @selectedTextColor;
@secondaryPointingActiveFontWeight: bold;
@secondaryPointingActiveDropdownBorderColor: transparent;
@secondaryPointingActiveHoverBorderColor: @secondaryPointingActiveBorderColor;
@secondaryPointingActiveHoverTextColor: @secondaryPointingActiveTextColor;
@secondaryPointingHeaderColor: @darkTextColor;
@secondaryVerticalPointingItemMargin: 0em -@secondaryPointingBorderWidth 0em 0em;
/* Inverted Secondary */
@secondaryInvertedColor: @invertedLightTextColor;
@secondaryInvertedHoverBackground: @transparentWhite;
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
@secondaryInvertedActiveBackground: @strongTransparentWhite;
@secondaryInvertedActiveColor: @invertedSelectedTextColor;
/* Inverted Pointing */
@secondaryPointingInvertedBorderColor: @whiteBorderColor;
@secondaryPointingInvertedItemTextColor: @invertedTextColor;
@secondaryPointingInvertedItemHeaderColor: @white;
@secondaryPointingInvertedItemHoverTextColor: @selectedTextColor;
@secondaryPointingInvertedActiveBorderColor: @white;
@secondaryPointingInvertedActiveColor: @invertedSelectedTextColor;
/* Tiered */
@tieredActiveItemBackground: #FCFCFC;
@ -235,38 +298,78 @@
@tieredInvertedSubMenuBackground: rgba(0, 0, 0, 0.2);
/* Icon */
@iconMenuTextAlign: center;
@iconMenuItemColor: rgba(0, 0, 0, 0.6);
@iconMenuItemColor: @black;
@iconMenuInvertedItemColor: @white;
/* Tabular */
@tabularBorderColor: @solidBorderColor;
@tabularBackgroundColor: #FFFFFF;
@tabularBackgroundColor: transparent;
@tabularBackground: none @tabularBackgroundColor;
@tabularBorderWidth: 1px;
@tabularHorizontalPadding: 1.4em;
@tabularMenuTextColor: @menuTextColor;
@tabularOppositeBorderWidth: @tabularBorderWidth + 1px;
@tabularVerticalPadding: @itemVerticalPadding;
@tabularHorizontalPadding: @relativeHuge;
@tabularBorderRadius: @defaultBorderRadius;
@tabularTextColor: @itemTextColor;
@tabularHoveredTextColor: @hoveredTextColor;
@tabularVerticalBackground: none @tabularBackgroundColor;
@tabularFluidOffset: 1px;
@tabularFluidWidth: ~"calc(100% + "(@tabularFluidOffset * 2)~")";
@tabularActiveBackground: none @white;
@tabularActiveColor: @selectedTextColor;
@tabularActiveBoxShadow: none;
@tabularMenuActiveBackground: #FFFFFF;
@tabularActiveWeight: bold;
@tabularBorderRadius: 5px;
/* Pagination */
@paginationMinWidth: 3em;
@paginationActiveBackground: rgba(0, 0, 0, 0.03);
@paginationActiveBackground: @transparentBlack;
@paginationActiveTextColor: @selectedTextColor;
/* Labeled Icon */
@labeledIconSize: 1.5em;
@labeledIconItemHorizontalPadding: @relativeMassive;
@labeledIconSize: @relativeMassive;
@labeledIconMinWidth: 6em;
@labeledIconTextMargin: 0.5em;
@labeledIconTextMargin: 0.5rem;
/* Text */
@textMenuTransition: opacity 0.2s ease;
@textMenuItemSpacing: @relative7px;
@textMenuMargin: @relativeMedium -(@textMenuItemSpacing);
@textMenuItemColor: @mutedTextColor;
@textMenuItemFontWeight: normal;
@textMenuItemMargin: 0em 0em;
@textMenuItemPadding: @relative5px @textMenuItemSpacing;
@textMenuItemTransition: opacity @defaultDuration @defaultEasing;
@textMenuSubMenuMargin: 0em;
@textMenuSubMenuItemMargin: 0em;
@textMenuSubMenuItemPadding: @relative7px 0em;
@textMenuActiveItemFontWeight: normal;
@textMenuActiveItemColor: @selectedTextColor;
@textMenuHeaderSize: @relativeSmall;
@textMenuHeaderColor: @darkTextColor;
@textMenuHeaderFontWeight: bold;
@textMenuHeaderTextTransform: uppercase;
@textVerticalMenuMargin: @relativeMedium 0em;
@textVerticalMenuHeaderMargin: @relative8px 0em @relative10px;
@textVerticalMenuItemMargin: @relative8px 0em;
@textVerticalMenuIconFloat: none;
@textVerticalMenuIconMargin: @iconMargin;
/*--------------
Variations
@ -275,59 +378,68 @@
/* Inverted */
@invertedBackground: @black;
@invertedBoxShadow: none;
@invertedHeaderBackground: rgba(0, 0, 0, 0.3);
@invertedBorder: 0px solid transparent;
@invertedHeaderBackground: transparent;
@invertedItemBackground: transparent;
@invertedItemTextColor: @invertedTextColor;
/* Inverted Sub Menu */
@invertedSubMenuBackground: transparent;
@invertedSubMenuColor: @invertedUnselectedTextColor;
/* Inverted Hover */
@invertedHoverBackground: rgba(255, 255, 255, 0.1);
@invertedHoverColor: @white;
@invertedHoverBackground: @transparentWhite;
@invertedHoverColor: @invertedSelectedTextColor;
@invertedSubMenuHoverBackground: transparent;
@invertedSubMenuHoverColor: @white;
@invertedSubMenuHoverColor: @invertedSelectedTextColor;
/* Pressed */
@invertedMenuPressedBackground: rgba(255, 255, 255, 0.15);
@invertedMenuPressedColor: @white;
@invertedMenuPressedBackground: @transparentWhite;
@invertedMenuPressedColor: @invertedSelectedTextColor;
/* Inverted Active */
@invertedActiveBackground: rgba(255, 255, 255, 0.2);
@invertedActiveColor: @white;
@invertedActiveBackground: @strongTransparentWhite;
@invertedActiveColor: @invertedSelectedTextColor;
@invertedArrowActiveColor: #3D3E3F;
/* Inverted Active Hover */
@invertedActiveHoverBackground: @invertedActiveBackground;
@invertedActiveHoverColor: @white;
@invertedArrowActiveHoverColor: @invertedArrowActiveColor;
@invertedSubMenuActiveBackground: transparent;
@invertedSubMenuActiveColor: @white;
/* Inverted Secondary */
@secondaryInvertedColor: @invertedLightTextColor;
@secondaryInvertedHoverColor: @invertedSelectedTextColor;
/* Inverted Menu Divider */
@invertedDividerBackground: linear-gradient(
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
@invertedVerticalDividerBackground: linear-gradient(to right,
rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.03) 100%)
;
@invertedDividerBackground: rgba(255, 255, 255, 0.08);
@invertedVerticalDividerBackground: @invertedDividerBackground;
/* Inverted Colored */
@invertedColoredDividerBackground: @dividerBackground;
@invertedColoredActiveBackground: @strongTransparentBlack;
/* Fixed */
@fixedGridMargin: 2.75rem;
@fixedPrecedingGridMargin: 2.75rem;
/* Floated */
@floatedDistance: 0.5rem;
/* Attached */
@attachedBoxShadow: 0px 0px 0px 1px #DDDDDD;
@attachedTopOffset: 0px;
@attachedBottomOffset: 0px;
@attachedHorizontalOffset: -@borderWidth;
@attachedWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
@attachedBoxShadow: none;
@attachedBorder: @borderWidth solid @solidBorderColor;
@attachedBottomBoxShadow:
@boxShadow,
@attachedBoxShadow
;
/* Sizes */
@small: 0.875rem;
@smallSubMenu: 0.875rem;
@smallWidth: 13rem;
@medium: 1rem;
@mediumWidth: 15rem;
@large: 1.125rem;
@largeSubMenu: 0.875rem;
@largeDropdown: 1rem;
@largeWidth: 18rem;
@largeWidth: 18rem;
@hugeWidth: 20rem;

61
web/semantic/src/themes/default/collections/message.variables
View file

@ -9,35 +9,33 @@
--------------------*/
@verticalMargin: 1em;
@verticalPadding: 1em;
@horizontalPadding: 1.5em;
@background: #EFEFEF;
@lineHeight: 1.3;
@background: #F8F8F9;
@lineHeightOffset: ((@lineHeight - 1em) / 2);
@borderRadius: @defaultBorderRadius;
@borderWidth: 1px;
@borderShadow: 0px 0px 0px @borderWidth @borderColor inset;
@shadowShadow: 0px 0px 0px 0px transparent;
@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
@boxShadow:
@borderShadow,
@shadowShadow
;
@transition:
opacity 0.2s ease,
color 0.2s ease,
background 0.2s ease,
box-shadow 0.2s ease
opacity @defaultDuration @defaultEasing,
color @defaultDuration @defaultEasing,
background @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing
;
/* Header */
@headerFontSize: 1.1em;
@headerFontSize: @relativeLarge;
@headerFontWeight: bold;
@headerDisplay: block;
@headerDistance: 0.5rem;
@headerDistance: 0rem;
@headerMargin: -@headerLineHeightOffset 0em @headerDistance 0em;
@headerParagraphDistance: 0.25em;
/* Paragraph */
@ -55,9 +53,10 @@
@iconDistance: 0.6em;
/* Close Icon */
@closeTopDistance: (1em + @lineHeightOffset);
@closeTopDistance: @verticalPadding - @lineHeightOffset;
@closeRightDistance: 0.5em;
@closeOpacity: 0.7;
@closeTransition: opacity @defaultDuration @defaultEasing;
/*-------------------
@ -67,22 +66,46 @@
/* Icon Message */
@iconSize: 3em;
@iconOpacity: 0.8;
@iconContentDistance: 1.5rem;
@iconContentDistance: 0rem;
@iconVerticalAlign: middle;
@circularIconContentDistance: 2em;
/* Attached */
@attachedXOffset: -1px;
@attachedYOffset: -1px;
@attachedBoxShadow: 0em 0em 0em @borderWidth rgba(0, 0, 0, 0.1) inset;
@attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset;
@attachedBottomBoxShadow:
@attachedBoxShadow,
@subtleShadow
;
/* Floating */
@floatingShadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
@floatingBoxShadow:
@floatingShadow,
@borderShadow
@borderShadow,
@floatingShadow
;
/* Warning / Positive / Negative / Info */
@positiveBoxShadow:
0px 0px 0px @borderWidth @positiveBorderColor inset,
@shadowShadow
;
@negativeBoxShadow:
0px 0px 0px @borderWidth @negativeBorderColor inset,
@shadowShadow
;
@infoBoxShadow:
0px 0px 0px @borderWidth @infoBorderColor inset,
@shadowShadow
;
@warningBoxShadow:
0px 0px 0px @borderWidth @warningBorderColor inset,
@shadowShadow
;
@errorBoxShadow:
0px 0px 0px @borderWidth @errorBorderColor inset,
@shadowShadow
;
@successBoxShadow:
0px 0px 0px @borderWidth @successBorderColor inset,
@shadowShadow
;

Some files were not shown because too many files have changed in this diff Show more