diff --git a/build/less/themes/packages/classic/modules/progress.overrides b/build/less/themes/packages/classic/modules/progress.overrides new file mode 100644 index 000000000..cdba171ba --- /dev/null +++ b/build/less/themes/packages/classic/modules/progress.overrides @@ -0,0 +1,3 @@ +/******************************* + Progress +*******************************/ diff --git a/build/less/themes/packages/classic/modules/progress.variables b/build/less/themes/packages/classic/modules/progress.variables new file mode 100644 index 000000000..3bd792d5f --- /dev/null +++ b/build/less/themes/packages/classic/modules/progress.variables @@ -0,0 +1,5 @@ +/******************************* + Progress +*******************************/ + +@border: 1px solid @borderColor; diff --git a/server/documents/elements/progress.html.eco b/server/documents/elements/progress.html.eco index 06d547575..d17d5aa12 100755 --- a/server/documents/elements/progress.html.eco +++ b/server/documents/elements/progress.html.eco @@ -32,6 +32,21 @@ themes : ['Default', 'Classic', 'Basic', 'Striped']
Uploading Files
+
+

Indicating Progress Bar

+

An indicating progress bar visually indicates the current level of progress of a task

+
+
+
Funding
+
+
+ +
+
+
+
+
+

Content

@@ -273,7 +288,7 @@ themes : ['Default', 'Classic', 'Basic', 'Striped'] ;
-
+
diff --git a/server/files/javascript/progress.js b/server/files/javascript/progress.js index 357fe4cd6..840e8b5a5 100755 --- a/server/files/javascript/progress.js +++ b/server/files/javascript/progress.js @@ -4,12 +4,39 @@ semantic.progress = {}; semantic.progress.ready = function() { var - $progress = $('.definition .ui.progress').not('.success, .error, .warning'), - $stateProgress = $('.definition .ui.success.progress, .ui.warning.progress, .ui.error.progress') + $progress = $('.definition .ui.progress').not('.success, .error, .warning, .indicating'), + $indicating = $('.definition .ui.indicating.progress'), + $indicatingButton = $('.definition .indicating.example .button'), + $stateProgress = $('.definition .ui.success.progress, .ui.warning.progress, .ui.error.progress') ; setTimeout(function() { + $indicatingButton + .on('click', function() { + var + $progress = $(this).closest('.example').find('.progress') + ; + if( $(this).hasClass('increment') ) { + $progress.progress('increment'); + } + else { + $progress.progress('decrement'); + } + }) + ; + + $indicating + .progress({ + label : false, + total : 10, + text : { + active: '{percent}% Funded', + success: 'Project Funded!' + } + }) + ; + $progress .progress({ showActivity: false, diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index d9c379dda..e143ab471 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -583,10 +583,7 @@ .ui.icon.button > .icon { opacity: @iconButtonOpacity; margin: 0em; - vertical-align: top; -} -.ui.icon.buttons .button > .icon, -.ui.icon.button > .icon { + vertical-align: baseline; height: 0em; } diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less index fb2362631..4610ae9a0 100755 --- a/src/definitions/modules/progress.less +++ b/src/definitions/modules/progress.less @@ -37,17 +37,40 @@ 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; +/* Indicating */ +.ui.indicating.progress .bar[style^="width: 3"]{ + background-color: #D9A65C; +} +.ui.indicating.progress .bar[style^="width: 4"], +.ui.indicating.progress .bar[style^="width: 5"] { + background-color: #E6BB48; +} +.ui.indicating.progress .bar[style^="width: 6"] { + background-color: #DDC928; +} +.ui.indicating.progress .bar[style^="width: 7"], +.ui.indicating.progress .bar[style^="width: 8"] { + background-color: #B4D95C; +} +.ui.indicating.progress .bar[style^="width: 9"], +.ui.indicating.progress .bar[style^="width: 100"] { + background-color: #66DA81; +} + +/* Single Digits Last */ +.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%"], +.ui.indicating.progress .bar[style^="width: 1"], +.ui.indicating.progress .bar[style^="width: 2"] { + background-color: #D95C5C; } -*/ /******************************* Content