From 07ea079fb54bac99a49ced8e3ecbe50d0f29fa96 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 23 Sep 2014 18:47:38 -0400 Subject: [PATCH] Initial write of progress module --- server/documents/elements/progress.html.eco | 69 ++- server/documents/index.html.eco | 207 +------- server/files/javascript/semantic.js | 19 +- server/files/stylesheets/semantic.css | 8 +- server/layouts/default.html.eco | 69 ++- src/definitions/collections/table.less | 1 + src/definitions/elements/list.less | 5 + src/definitions/elements/segment.less | 1 + src/definitions/modules/progress.js | 453 ++++++++++++++++++ src/definitions/modules/progress.less | 267 +++++++++++ src/themes/_site/modules/progress.overrides | 3 + src/themes/_site/modules/progress.variables | 3 + .../default/elements/segment.variables | 1 + .../packages/default/globals/site.variables | 12 +- .../default/modules/progress.overrides | 3 + .../default/modules/progress.variables | 76 +++ .../striped/modules/progress.overrides | 29 ++ .../striped/modules/progress.variables | 3 + 18 files changed, 1004 insertions(+), 225 deletions(-) create mode 100755 src/definitions/modules/progress.js create mode 100755 src/definitions/modules/progress.less create mode 100755 src/themes/_site/modules/progress.overrides create mode 100755 src/themes/_site/modules/progress.variables create mode 100755 src/themes/packages/default/modules/progress.overrides create mode 100755 src/themes/packages/default/modules/progress.variables create mode 100755 src/themes/packages/striped/modules/progress.overrides create mode 100755 src/themes/packages/striped/modules/progress.variables diff --git a/server/documents/elements/progress.html.eco b/server/documents/elements/progress.html.eco index 46537794e..24d028a00 100755 --- a/server/documents/elements/progress.html.eco +++ b/server/documents/elements/progress.html.eco @@ -3,15 +3,15 @@ layout : 'default' css : 'progress' element : 'progress' -elementType : 'element' +elementType : 'module' title : 'Progress' description : 'A progress bar shows the progression of a task' -type : 'UI Element' +type : 'UI Module' -themes : ['Default'] +themes : ['Default', 'Striped'] --- - + <%- @partial('header') %> @@ -22,18 +22,55 @@ themes : ['Default']

Progress Bar

A standard progress bar

+
+
+
+
+
Uploading Files
+
+
+ +

Content

+ +
+

Bar

+

A progress element can contain a bar to indicate the current level of progress

+
+

Current Progress

+

A progress bar can contain a reading of the current progress

+
+
+
22%
+
+
+
+ +
+

Label

+

A progress element can contain a label

+
+
+
22%
+
+
Uploading Files
+
+
+

States

Active

A progress bar can show activity

-
+
+
22%
+
+
Uploading Files
@@ -42,7 +79,7 @@ themes : ['Default']

Successful

A progress bar can show success

-
+
@@ -50,7 +87,7 @@ themes : ['Default']

Warning

A progress bar can show a warning state

-
+
@@ -58,7 +95,7 @@ themes : ['Default']

Failed

A progress bar can show failure

-
+
@@ -66,7 +103,7 @@ themes : ['Default']

Disabled

A progress bar can be disabled

-
+
@@ -91,27 +128,33 @@ themes : ['Default']

Color

Can have different colors:

-
+
-
+
-
+
-
+
+
+
+
+
+
+
diff --git a/server/documents/index.html.eco b/server/documents/index.html.eco index 0df738040..5e454589c 100755 --- a/server/documents/index.html.eco +++ b/server/documents/index.html.eco @@ -48,8 +48,8 @@ type : 'Semantic' Customize & Download
- -
-
-
-
-
-
-

- -
- Lose the Hieroglyphics -
Semantic is structured around natural language conventions to make development more intuitive. -
-
-

-
- Semantic is tag agnostic meaning you can use any html tags with UI elements.
-
-
- Semantic -
-
- -
2
-
3
-
-
-
-
-
Bootstrap
-
-
-
1
-
2
-
3
-
-
-
-
- Semantic -
- -
-
-
-
Bootstrap
-
-
- Title - -
-
-
-
- Semantic -
- -
-
-
-
Bootstrap
-
- -
-
-
-
-
+ +
-

- -
Growing Every Day -
New UI components are written every day. Check back soon to see more.
-
-

-
- -
-
-
-
<%= uiElements.length %>
-
UI Elements
-
+
+

Elements

<% for element in uiElements: %> <%= element.title %> @@ -245,11 +99,8 @@ type : 'Semantic'
-
-
-
<%= uiCollections.length %>
-
UI Collections
-
+
+

Collections

<% for element in uiCollections: %> <%= element.title %> @@ -258,11 +109,8 @@ type : 'Semantic'
-
-
-
<%= uiViews.length %>
-
UI Views
-
+
+

Views

<% for element in uiViews: %> <%= element.title %> @@ -271,11 +119,8 @@ type : 'Semantic'
-
-
-
<%= uiModules.length %>
-
UI Modules
-
+
+

Modules

<% for element in uiModules: %> <%= element.title %> diff --git a/server/files/javascript/semantic.js b/server/files/javascript/semantic.js index a24763deb..855168acc 100755 --- a/server/files/javascript/semantic.js +++ b/server/files/javascript/semantic.js @@ -101,6 +101,7 @@ semantic.ready = function() { .visibility({ once: false, offset: 70, + onTopVisible: handler.activate.accordion, onTopPassed: handler.activate.section, onBottomPassed: handler.activate.section, onTopPassedReverse: handler.activate.previous @@ -148,6 +149,17 @@ semantic.ready = function() { ; } }, + accordion: function() { + var + $section = $(this), + index = $sectionHeaders.index($section), + $followSection = $followMenu.children('.item'), + $activeSection = $followSection.eq(index) + ; + $followMenu + .accordion('open', index) + ; + }, section: function() { var $section = $(this), @@ -161,9 +173,6 @@ semantic.ready = function() { $activeSection .addClass('active') ; - $followMenu - .accordion('open', index) - ; }, example: function() { var @@ -841,6 +850,10 @@ semantic.ready = function() { ; $menu + .sidebar({ + transition : 'uncover', + mobileTransition : 'scale down' + }) .sidebar('attach events', '.launch.button, .view-ui.button, .launch.item') .sidebar('attach events', $hideMenu, 'hide') ; diff --git a/server/files/stylesheets/semantic.css b/server/files/stylesheets/semantic.css index 03988223e..beff9a383 100755 --- a/server/files/stylesheets/semantic.css +++ b/server/files/stylesheets/semantic.css @@ -159,6 +159,11 @@ a:hover { -moz-border-radius: 0px; border-radius: 0px; } +#example #menu .item .circular.label { + position: absolute; + top: 0.75rem; + right: 1 +} #example #menu .inverted.header { color: rgba(255, 255, 255, 0.8); margin-bottom: 0.5em; @@ -1074,9 +1079,6 @@ body.card .even.example .card .description { Progress ---------------*/ -body.progress .ui.progress .bar { - width: 35%; -} body.progress.animated .ui.progress .bar { -webkit-animation: finish 10s ease-in-out infinite; diff --git a/server/layouts/default.html.eco b/server/layouts/default.html.eco index 44b7c72b6..930382f4e 100755 --- a/server/layouts/default.html.eco +++ b/server/layouts/default.html.eco @@ -1,20 +1,22 @@ -<% uiIntroduction = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %> -<% uiProject = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %> -<% uiGuide = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %> -<% uiGlobals = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %> -<% uiElements = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %> -<% uiCollections = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %> -<% uiViews = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %> -<% uiModules = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %> -<% uiBehavior = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %> -<% uiSpecification = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %> -<% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %> -<% pageCount = @pageCount(currentCollection) %> -<% pageNumber = @getPage(currentCollection, @document.id) %> -<% pageCollection = @getPageCollection(currentCollection, @document.id) %> + + <% uiIntroduction = @getCollection("documents").findAll({type: $in: ['UI Introduction']},[{title: 1}]).toJSON() %> + <% uiProject = @getCollection("documents").findAll({type: $in: ['Semantic Project']},[{title: 1}]).toJSON() %> + <% uiGuide = @getCollection("documents").findAll({type: $in: ['UI Guide']},[{title: 1}]).toJSON() %> + <% uiGlobals = @getCollection("documents").findAll({type: $in: ['UI Global']},[{title: 1}]).toJSON() %> + <% uiElements = @getCollection("documents").findAll({type: $in: ['UI Element']},[{title: 1}]).toJSON() %> + <% uiCollections = @getCollection("documents").findAll({type: $in: ['UI Collection']},[{title: 1}]).toJSON() %> + <% uiViews = @getCollection("documents").findAll({type: $in: ['UI View']},[{title: 1}]).toJSON() %> + <% uiModules = @getCollection("documents").findAll({type: $in: ['UI Module']},[{title: 1}]).toJSON() %> + <% uiBehavior = @getCollection("documents").findAll({type: $in: ['UI Behavior']},[{title: 1}]).toJSON() %> + <% uiSpecification = @getCollection("documents").findAll({type: $in: ['UI Specification']},[{title: 1}]).toJSON() %> + <% currentCollection = @getCollection("documents").findAll({type: $in: [@document.type]},[{title: 1}]).toJSON() %> + <% pageCount = @pageCount(currentCollection) %> + <% pageNumber = @getPage(currentCollection, @document.id) %> + <% pageCollection = @getPageCollection(currentCollection, @document.id) %> + @@ -46,7 +48,6 @@ - @@ -67,6 +68,7 @@ + @@ -130,6 +132,7 @@ + @@ -179,7 +182,11 @@
Globals
<% for element in uiGlobals: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
@@ -187,7 +194,11 @@
Elements
<% for element in uiElements: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
@@ -195,7 +206,11 @@
Collections
<% for element in uiCollections: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
@@ -203,7 +218,11 @@
Views
<% for element in uiViews: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
@@ -211,7 +230,11 @@ Modules
<% for element in uiModules: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
@@ -219,7 +242,11 @@
Behaviors
<% for element in uiBehavior: %> - <%= element.title %> + <%= element.title %> + + <% if element.status? is 'Undocumented': %> +
+ <% end %> <% end %>
diff --git a/src/definitions/collections/table.less b/src/definitions/collections/table.less index 723882889..ac6d158a7 100755 --- a/src/definitions/collections/table.less +++ b/src/definitions/collections/table.less @@ -568,6 +568,7 @@ display: inline-block; content: ''; width: @sortableIconWidth; + height: 1em; opacity: @sortableIconOpacity; margin: 0em 0em 0em @sortableIconDistance; diff --git a/src/definitions/elements/list.less b/src/definitions/elements/list.less index 70dc46342..f256bc5e9 100755 --- a/src/definitions/elements/list.less +++ b/src/definitions/elements/list.less @@ -560,6 +560,11 @@ ol.ui.horizontal.list li:before, padding-left: @orderedChildCountDistance; } +/* Divided Selection */ +.ui.divided.selection.list .item { + margin: 0em; + border-radius: 0em; +} /* Divided horizontal */ .ui.divided.horizontal.list { diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index 46e3ccac1..b3bf388d8 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -151,6 +151,7 @@ .ui.piled.segment { margin: @piledMargin 0em; box-shadow: @piledBoxShadow; + z-index: @piledZIndex; } .ui.piled.segment:first-child { margin-top: 0em; diff --git a/src/definitions/modules/progress.js b/src/definitions/modules/progress.js new file mode 100755 index 000000000..eca6dd15d --- /dev/null +++ b/src/definitions/modules/progress.js @@ -0,0 +1,453 @@ +/* + * # Semantic - Progress + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributor + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +;(function ( $, window, document, undefined ) { + +"use strict"; + +$.fn.progress = function(parameters) { + var + $allModules = $(this), + + moduleSelector = $allModules.selector || '', + + hasTouch = ('ontouchstart' in document.documentElement), + time = new Date().getTime(), + performance = [], + + query = arguments[0], + methodInvoked = (typeof query == 'string'), + queryArguments = [].slice.call(arguments, 1), + returnedValue + ; + + $allModules + .each(function() { + var + settings = ( $.isPlainObject(parameters) ) + ? $.extend(true, {}, $.fn.progress.settings, parameters) + : $.extend({}, $.fn.progress.settings), + + className = settings.className, + metadata = settings.metadata, + namespace = settings.namespace, + selector = settings.selector, + error = settings.error, + + eventNamespace = '.' + namespace, + moduleNamespace = 'module-' + namespace, + + $module = $(this), + $bar = $(this).find(selector.bar), + $progress = $(this).find(selector.progress), + + element = this, + instance = $module.data(moduleNamespace), + module + ; + + module = { + + initialize: function() { + module.debug('Initializing progress', settings); + module.read.metadata(); + module.set.initials(); + module.instantiate(); + }, + + instantiate: function() { + module.verbose('Storing instance of progress', module); + instance = module; + $module + .data(moduleNamespace, module) + ; + }, + + read: { + metadata: function() { + if( $module.data(metadata.percent) ) { + module.verbose('Current percent value set from metadata'); + module.percent = $module.data(metadata.percent); + } + if( $module.data(metadata.total) ) { + module.verbose('Total value set from metadata'); + module.total = $module.data(metadata.total); + } + if( $module.data(metadata.value) ) { + module.verbose('Current value set from metadata'); + module.value = $module.data(metadata.value); + } + }, + currentValue: function() { + return (module.value !== undefined) + ? module.value + : false + ; + } + }, + + increment: function(incrementValue) { + var + total = module.total || false, + edgeValue, + startValue, + newValue + ; + if(total) { + startValue = module.value || 0; + incrementValue = incrementValue || 1; + newValue = startValue + incrementValue; + edgeValue = module.total; + module.debug('Incrementing completed by value', incrementValue, startValue, edgeValue); + if(newValue > edgeValue ) { + module.debug('Value cannot decrement above total', edgeValue); + newValue = edgeValue; + } + module.set.progress(newValue); + } + else { + startValue = module.percent || 0; + incrementValue = incrementValue || module.get.randomValue(); + newValue = startValue + incrementValue; + edgeValue = 0; + module.debug('Incrementing percentage by value', incrementValue, startValue); + if(newValue < edgeValue ) { + module.debug('Value cannot decrement below zero'); + newValue = edgeValue; + } + module.set.progress(newValue); + } + }, + decrement: function(decrementValue) { + var + total = module.total || false, + startValue, + newValue + ; + if(total) { + startValue = module.value || 0; + decrementValue = -decrementValue || -1; + newValue = startValue + decrementValue; + module.debug('Decrementing completed by value', decrementValue, startValue); + if(newValue > module.total ) { + newValue = module.total; + } + module.set.progress(newValue); + } + else { + startValue = module.percent || 0; + decrementValue = -decrementValue || -module.get.randomValue(); + newValue = startValue + decrementValue; + module.debug('Decrementing percentage by value', decrementValue, startValue); + module.set.progress(newValue); + } + }, + + get: { + randomValue: function() { + module.debug('Generating random increment percentage'); + return Math.floor((Math.random() * settings.random.max) + settings.random.min); + }, + percent: function() { + return module.percent || 0; + }, + value: function() { + return module.value || false; + }, + total: function() { + return module.total || false; + } + }, + + set: { + complete: function() { + module.set.percent(100); + }, + initials: function() { + if(settings.value) { + module.verbose('Current value set in settings', settings.value); + module.value = settings.value; + } + if(settings.total) { + module.verbose('Current total set in settings', settings.total); + module.total = settings.total; + } + if(settings.percent) { + module.verbose('Current percent set in settings', settings.percent); + module.percent = settings.percent; + } + }, + percent: function(value) { + value = (typeof value == 'string') + ? +(value.replace('%', '')) + : value + ; + console.log(value); + if(value > 0 && value < 1) { + module.verbose('Module percentage passed as decimal, converting'); + value = value * 100; + } + module.percent = value; + $bar + .css('width', value + '%') + ; + }, + total: function(totalValue) { + module.total = totalValue; + }, + progress: function(value) { + var + numericValue = (typeof value === 'string') + ? (value.replace(/[^\d.]/g, '') !== '') + ? +(value.replace(/[^\d.]/g, '')) + : false + : value, + percentComplete + ; + if(!numericValue) { + module.error(error.nonNumeric); + } + if(module.total) { + module.value = numericValue; + percentComplete = (numericValue / module.total); + module.debug('Calculating percent complete from total', percentComplete); + module.set.percent( percentComplete ); + } + else { + percentComplete = numericValue; + module.debug('Setting value to exact percentage value', percentComplete); + module.set.percent( percentComplete ); + } + } + }, + + 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({ + 'Element' : element, + 'Name' : message[0], + 'Arguments' : [].slice.call(message, 1) || '', + 'Execution Time' : executionTime + }); + } + clearTimeout(module.performance.timer); + module.performance.timer = setTimeout(module.performance.display, 100); + }, + display: function() { + var + title = settings.name + ':', + totalTime = 0 + ; + time = false; + clearTimeout(module.performance.timer); + $.each(performance, function(index, data) { + totalTime += data['Execution Time']; + }); + title += ' ' + totalTime + 'ms'; + if(moduleSelector) { + title += ' \'' + moduleSelector + '\''; + } + if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) { + console.groupCollapsed(title); + if(console.table) { + console.table(performance); + } + else { + $.each(performance, function(index, data) { + console.log(data['Name'] + ': ' + data['Execution Time']+'ms'); + }); + } + console.groupEnd(); + } + performance = []; + } + }, + invoke: function(query, passedArguments, context) { + var + object = instance, + maxDepth, + found, + response + ; + passedArguments = passedArguments || queryArguments; + context = element || context; + if(typeof query == 'string' && object !== undefined) { + query = query.split(/[\. ]/); + maxDepth = query.length - 1; + $.each(query, function(depth, value) { + var camelCaseValue = (depth != maxDepth) + ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1) + : query + ; + if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) { + object = object[camelCaseValue]; + } + else if( object[camelCaseValue] !== undefined ) { + found = object[camelCaseValue]; + return false; + } + else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) { + object = object[value]; + } + else if( object[value] !== undefined ) { + found = object[value]; + return false; + } + else { + module.error(error.method, query); + return false; + } + }); + } + if ( $.isFunction( found ) ) { + response = found.apply(context, passedArguments); + } + else if(found !== undefined) { + response = found; + } + if($.isArray(returnedValue)) { + returnedValue.push(response); + } + else if(returnedValue !== undefined) { + returnedValue = [returnedValue, response]; + } + else if(response !== undefined) { + returnedValue = response; + } + return found; + } + }; + + if(methodInvoked) { + if(instance === undefined) { + module.initialize(); + } + module.invoke(query); + } + else { + if(instance !== undefined) { + module.destroy(); + } + module.initialize(); + } + }) + ; + + return (returnedValue !== undefined) + ? returnedValue + : this + ; +}; + +$.fn.progress.settings = { + + name : 'Progress', + namespace : 'progress', + + debug : true, + verbose : true, + performance : true, + + random : { + min: 1, + max: 3 + }, + + label : 'percent', + + percent : false, + total : false, + value : false, + + onChange : function(value){}, + + error : { + method : 'The method you called is not defined.', + nonNumeric : 'Progress value is non numeric' + }, + + metadata: { + percent : 'percent', + total : 'total', + value : 'value' + }, + + selector : { + bar : '> .bar', + progress : '.bar > .progress' + }, + + className : { + } + +}; + + +})( jQuery, window , document ); \ No newline at end of file diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less new file mode 100755 index 000000000..95a98ba27 --- /dev/null +++ b/src/definitions/modules/progress.less @@ -0,0 +1,267 @@ + /* + * # Semantic - Progress Bar + * http://github.com/semantic-org/semantic-ui/ + * + * + * Copyright 2014 Contributors + * Released under the MIT license + * http://opensource.org/licenses/MIT + * + */ + +/******************************* + Theme +*******************************/ + +@type : 'module'; +@element : 'progress'; + +@import '../../semantic.config'; + +.ui.progress { + position: relative; + display: block; + max-width: 100%; + border: @border; + margin: @margin; + box-shadow: @boxShadow; + background: @background; + padding: @padding; + border-radius: @borderRadius; +} + +.ui.progress:first-child { + margin: @firstMargin; +} +.ui.progress:last-child { + margin: @lastMargin; +} + +/* Indicating Variation + +.ui.progress .bar[style^="width:1"], +.ui.progress .bar[style^="width:2"], +.ui.progress .bar[style^="width:3"], +.ui.progress .bar[style^="width: 1"], +.ui.progress .bar[style^="width: 2"], +.ui.progress .bar[style^="width: 3"], { + background-color: #F43114; +} +*/ + +/******************************* + Content +*******************************/ + +/* Activity Bar */ +.ui.progress .bar { + display: block; + line-height: 1; + position: @barPosition; + width: 0%; + height: @barHeight; + background: @barBackground; + border-radius: @barBorderRadius; + transition: @barTransition; +} + +/* Percent Complete */ +.ui.progress .bar > .progress { + position: absolute; + width: @progressWidth; + font-size: @progressSize; + top: @progressTop; + right: @progressRight; + left: @progressLeft; + bottom: @progressBottom; + color: @progressColor; + text-shadow: @progressTextShadow; + margin-top: @progressOffset; + text-align: @progressTextAlign; +} + +/* Label */ +.ui.progress > .label { + position: absolute; + width: @labelWidth; + font-size: @labelSize; + top: @labelTop; + right: @labelRight; + left: @labelLeft; + bottom: @labelBottom; + color: @labelColor; + text-shadow: @labelTextShadow; + margin-top: @labelOffset; + text-align: @labelTextAlign; +} + + +/******************************* + States +*******************************/ + + +/*-------------- + Successful +---------------*/ + +.ui.successful.progress .bar { + background-color: @successColor !important; +} +.ui.successful.progress .bar, +.ui.successful.progress .bar::after { + animation: none !important; +} + +/*-------------- + Warning +---------------*/ + +.ui.warning.progress .bar { + background-color: @warningColor !important; +} +.ui.warning.progress .bar, +.ui.warning.progress .bar::after { + animation: none !important; +} + +/*-------------- + Failed +---------------*/ + +.ui.failed.progress .bar { + background-color: @errorColor !important; +} +.ui.failed.progress .bar, +.ui.failed.progress .bar::after { + animation: none !important; +} + +/*-------------- + Active +---------------*/ + +.ui.active.progress .bar { + position: relative; +} +.ui.active.progress .bar::after { + content: ''; + opacity: 0; + + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + background: @activePulseColor; + + border-radius: @barBorderRadius; + + animation: progress-active @activePulseDuration @defaultEasing infinite; +} +@keyframes progress-active { + 0% { + opacity: 0; + width: 0; + } + 50% { + opacity: @activePulseMaxOpacity; + } + 100% { + opacity: 0; + width: 100%; + } +} + +/*-------------- + Disabled +---------------*/ + +.ui.disabled.progress { + opacity: 0.35; +} +.ui.disabled.progress .bar, +.ui.disabled.progress .bar::after { + animation: none !important; +} + + + +/******************************* + Variations +*******************************/ + + +/*-------------- + Attached +---------------*/ + +/* bottom attached */ +.ui.progress.attached { + background-color: transparent; + position: relative; + border: none; + margin: 0em; +} +.ui.progress.attached, +.ui.progress.attached .bar { + display: block; + height: @attachedHeight; + padding: 0px; + overflow: hidden; + border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius; +} +.ui.progress.attached .bar { + border-radius: 0em; +} + +/* top attached */ +.ui.progress.top.attached, +.ui.progress.top.attached .bar { + top: 0px; + border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em; +} +.ui.progress.top.attached .bar { + border-radius: 0em; +} + + +/*-------------- + 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; +} +.ui.red.progress .bar { + background-color: @red; +} +.ui.teal.progress .bar { + background-color: @teal; +} +.ui.yellow.progress .bar { + background-color: @yellow; +} + +/*-------------- + Sizes +---------------*/ + +.ui.small.progress .bar { + height: 14px; +} \ No newline at end of file diff --git a/src/themes/_site/modules/progress.overrides b/src/themes/_site/modules/progress.overrides new file mode 100755 index 000000000..c5c53367f --- /dev/null +++ b/src/themes/_site/modules/progress.overrides @@ -0,0 +1,3 @@ +/******************************* + Overrides +*******************************/ diff --git a/src/themes/_site/modules/progress.variables b/src/themes/_site/modules/progress.variables new file mode 100755 index 000000000..6f085f935 --- /dev/null +++ b/src/themes/_site/modules/progress.variables @@ -0,0 +1,3 @@ +/******************************* + User Variable Overrides +*******************************/ diff --git a/src/themes/packages/default/elements/segment.variables b/src/themes/packages/default/elements/segment.variables index eeae631a7..c5b24c35a 100755 --- a/src/themes/packages/default/elements/segment.variables +++ b/src/themes/packages/default/elements/segment.variables @@ -34,6 +34,7 @@ *******************************/ /* Piled */ +@piledZIndex: 1; @piledMargin: 2em; @piledBoxShadow: 0px 0px 1px 1px @borderColor; @piledDegrees: 1.2deg; diff --git a/src/themes/packages/default/globals/site.variables b/src/themes/packages/default/globals/site.variables index 4ef8bc8f7..3e2bfde01 100755 --- a/src/themes/packages/default/globals/site.variables +++ b/src/themes/packages/default/globals/site.variables @@ -182,21 +182,25 @@ --------------------*/ /* Mood */ +@positiveColor : @green; +@negativeColor : @red; + @positiveBackgroundColor : #E4F5DD; @negativeBackgroundColor : #FAE8E8; @positiveBorderColor : #B7CAA7; @negativeBorderColor : #DBB1B1; -/* Solid Background Color */ -@positiveColor : @green; -@negativeColor : @red; - @positiveTextColor : #3C763D; @negativeTextColor : #A94442; /* Status */ +@infoColor : #31CCEC; +@warningColor : #F2C037; +@successColor : @positiveColor; +@errorColor : @negativeColor; + @infoBackgroundColor : #E5F6FB; @warningBackgroundColor : #FCF8E3; @successBackgroundColor : @positiveBackgroundColor; diff --git a/src/themes/packages/default/modules/progress.overrides b/src/themes/packages/default/modules/progress.overrides new file mode 100755 index 000000000..cdba171ba --- /dev/null +++ b/src/themes/packages/default/modules/progress.overrides @@ -0,0 +1,3 @@ +/******************************* + Progress +*******************************/ diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables new file mode 100755 index 000000000..17a0fefa0 --- /dev/null +++ b/src/themes/packages/default/modules/progress.variables @@ -0,0 +1,76 @@ +/******************************* + Progress +*******************************/ + +/*------------------- + Element +--------------------*/ + +@verticalSpacing: 1em; + +@margin: @verticalSpacing 0em (@labelHeight + @verticalSpacing); +@firstMargin: 0em 0em (@labelHeight + @verticalSpacing); +@lastMargin: 0em 0em (@labelHeight); + +@background: @offWhite; +@border: 1px solid @borderColor; +@boxShadow: none; +@padding: 0.325em; +@borderRadius: 0.325em; + +/* Bar */ +@barPosition: relative; +@barHeight: 1.75em; +@barBackground: #888888; +@barBorderRadius: @borderRadius; +@barTransition: + width 0.3s ease-in-out, + background-color 1s ease-out +; + + +@progressWidth: auto; +@progressSize: 0.9em; +@progressPosition: absolute; +@progressTop: 50%; +@progressRight: 1em; +@progressLeft: auto; +@progressBottom: auto; +@progressOffset: -0.5em; +@progressColor: @invertedLightTextColor; +@progressTextShadow: none; +@progressTextAlign: left; + +@labelWidth: 100%; +@labelHeight: 1.75em; +@labelSize: 1em; +@labelPosition: absolute; +@labelTop: auto; +@labelRight: auto; +@labelLeft: 0%; +@labelBottom: -@labelHeight; +@labelOffset: 0em; +@labelColor: @textColor; +@labelTextShadow: none; +@labelTextAlign: center; + +/*------------------- + States +--------------------*/ + +@activePulseColor: @white; +@activePulseMaxOpacity: 0.3; +@activePulseDuration: 2s; + + +/*------------------- + Types +--------------------*/ + +@attachedHeight: 0.25em; +@attachedBorderRadius: @borderRadius; + + +/*------------------- + Variations +--------------------*/ diff --git a/src/themes/packages/striped/modules/progress.overrides b/src/themes/packages/striped/modules/progress.overrides new file mode 100755 index 000000000..054cb419d --- /dev/null +++ b/src/themes/packages/striped/modules/progress.overrides @@ -0,0 +1,29 @@ +/******************************* + Progress +*******************************/ + +.ui.progress .bar { + background-size: 30px 30px; + background-image: + linear-gradient( + 135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, + transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, + transparent 75%, transparent + ) + ; +} + +.ui.progress.active .bar:after { + animation: none; +} +.ui.progress.active .bar { + animation: progress-striped 3s linear infinite; +} +@keyframes progress-striped { + 0% { + background-position: 0px 0; + } + 100% { + background-position: 60px 0; + } +} diff --git a/src/themes/packages/striped/modules/progress.variables b/src/themes/packages/striped/modules/progress.variables new file mode 100755 index 000000000..cdba171ba --- /dev/null +++ b/src/themes/packages/striped/modules/progress.variables @@ -0,0 +1,3 @@ +/******************************* + Progress +*******************************/