-
-
<%= uiCollections.length %>
-
UI Collections
-
+
-
-
-
<%= uiViews.length %>
-
UI Views
-
+
-
-
-
<%= uiModules.length %>
-
UI 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 @@
@@ -187,7 +194,11 @@
@@ -195,7 +206,11 @@
@@ -203,7 +218,11 @@
@@ -211,7 +230,11 @@
@@ -219,7 +242,11 @@
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
+*******************************/