From 6203970122521954db2edcdcebd542551fd4460b Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Sat, 17 Oct 2015 12:17:10 +1100 Subject: [PATCH] Progress bar should turn red on error - refs #1518 Tidy up progress bar control, streamline brand colours --- modules/backend/assets/css/october.css | 14 ++-- .../fileupload/assets/css/fileupload.css | 8 +-- .../assets/js/mediamanager-browser-min.js | 12 ++-- .../mediamanager/assets/js/mediamanager.js | 14 ++-- .../assets/ui/less/global.variables.less | 47 ++++++------- .../assets/ui/less/progressbar.base.less | 70 ------------------- .../system/assets/ui/less/progressbar.less | 69 ++++++++++++++---- modules/system/assets/ui/storm.css | 39 +++++------ 8 files changed, 121 insertions(+), 152 deletions(-) delete mode 100644 modules/system/assets/ui/less/progressbar.base.less diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index 559efe4c7..4698c3b08 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -88,9 +88,9 @@ @media all and (max-width:767px){.sweet-alert{width:auto;margin-left:0;margin-right:0;left:15px;right:15px} } .sweet-alert .icon{width:80px;height:80px;border:4px solid gray;border-radius:50%;margin:20px auto;position:relative;box-sizing:content-box} -.sweet-alert .icon.error{border-color:#d43f3a} +.sweet-alert .icon.error{border-color:#952518} .sweet-alert .icon.error .x-mark{position:relative;display:block} -.sweet-alert .icon.error .line{position:absolute;height:5px;width:47px;background-color:#d9534f;display:block;top:37px;border-radius:2px} +.sweet-alert .icon.error .line{position:absolute;height:5px;width:47px;background-color:#ab2a1c;display:block;top:37px;border-radius:2px} .sweet-alert .icon.error .line.left{-webkit-transform:rotate(45deg);transform:rotate(45deg);left:17px} .sweet-alert .icon.error .line.right{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);right:16px} .sweet-alert .icon.warning{border-color:#eea236} @@ -99,20 +99,20 @@ .sweet-alert .icon.info{border-color:#46b8da} .sweet-alert .icon.info::before{content:"";position:absolute;width:5px;height:29px;left:50%;bottom:17px;border-radius:2px;margin-left:-2px;background-color:#5bc0de} .sweet-alert .icon.info::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;margin-left:-3px;top:19px;background-color:#5bc0de} -.sweet-alert .icon.success{border-color:#4cae4c} +.sweet-alert .icon.success{border-color:#2b9854} .sweet-alert .icon.success::before,.sweet-alert .icon.success::after{content:'';border-radius:50%;position:absolute;width:60px;height:120px;background:white;-webkit-transform:rotate(45deg);transform:rotate(45deg)} .sweet-alert .icon.success::before{border-radius:120px 0 0 120px;top:-7px;left:-33px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:60px 60px;transform-origin:60px 60px} .sweet-alert .icon.success::after{border-radius:0 120px 120px 0;top:-11px;left:30px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0px 60px;transform-origin:0px 60px} -.sweet-alert .icon.success .placeholder{width:80px;height:80px;border:4px solid rgba(92,184,92,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2} +.sweet-alert .icon.success .placeholder{width:80px;height:80px;border:4px solid rgba(49,172,95,0.2);border-radius:50%;box-sizing:content-box;position:absolute;left:-4px;top:-4px;z-index:2} .sweet-alert .icon.success .fix{width:5px;height:90px;background-color:#f9f9f9;position:absolute;left:28px;top:8px;z-index:1;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} -.sweet-alert .icon.success .line{height:5px;background-color:#5cb85c;display:block;border-radius:2px;position:absolute;z-index:2} +.sweet-alert .icon.success .line{height:5px;background-color:#31ac5f;display:block;border-radius:2px;position:absolute;z-index:2} .sweet-alert .icon.success .line.tip{width:25px;left:14px;top:46px;-webkit-transform:rotate(45deg);transform:rotate(45deg)} .sweet-alert .icon.success .line.long{width:47px;right:8px;top:38px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)} .sweet-alert .icon.custom{background-size:contain;border-radius:0;border:none;background-position:center center;background-repeat:no-repeat} .sweet-alert .btn-default:focus{border-color:#e3e3e3;outline:0} -.sweet-alert .btn-success:focus{border-color:#4cae4c;outline:0} +.sweet-alert .btn-success:focus{border-color:#2b9854;outline:0} .sweet-alert .btn-info:focus{border-color:#46b8da;outline:0} -.sweet-alert .btn-danger:focus{border-color:#d43f3a;outline:0} +.sweet-alert .btn-danger:focus{border-color:#952518;outline:0} .sweet-alert .btn-warning:focus{border-color:#eea236;outline:0} .sweet-alert button::-moz-focus-inner{border:0} .sweet-alert{text-align:right} diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css index dd3c07c6c..71a0bb55d 100644 --- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css +++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css @@ -43,9 +43,9 @@ .field-fileupload.style-image-multi .upload-button .upload-button-icon{position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px} .field-fileupload.style-image-multi .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:rgba(0,0,0,0.1)} .field-fileupload.style-image-multi .upload-button:hover{border:2px dotted rgba(0,0,0,0.2)} -.field-fileupload.style-image-multi .upload-button:hover .upload-button-icon:before{color:#5cb85c;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-multi .upload-button:hover .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} .field-fileupload.style-image-multi .upload-button:focus{border:2px solid rgba(0,0,0,0.3);background:transparent} -.field-fileupload.style-image-multi .upload-button:focus .upload-button-icon:before{color:#5cb85c;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-multi .upload-button:focus .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} .field-fileupload.style-image-multi .upload-files-container{margin-left:90px} .field-fileupload.style-image-multi .upload-object{background:#fff;border:1px solid #ecf0f1;width:260px} .field-fileupload.style-image-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} @@ -77,9 +77,9 @@ .field-fileupload.style-image-single .upload-button .upload-button-icon{position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px} .field-fileupload.style-image-single .upload-button .upload-button-icon:before{text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:rgba(0,0,0,0.1)} .field-fileupload.style-image-single .upload-button:hover{border:2px dotted rgba(0,0,0,0.2)} -.field-fileupload.style-image-single .upload-button:hover .upload-button-icon:before{color:#5cb85c;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-single .upload-button:hover .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} .field-fileupload.style-image-single .upload-button:focus{border:2px solid rgba(0,0,0,0.3);background:transparent} -.field-fileupload.style-image-single .upload-button:focus .upload-button-icon:before{color:#5cb85c;color:rgba(0,0,0,0.2)} +.field-fileupload.style-image-single .upload-button:focus .upload-button-icon:before{color:#31ac5f;color:rgba(0,0,0,0.2)} .field-fileupload.style-image-single .upload-object{padding-bottom:66px} .field-fileupload.style-image-single .upload-object .icon-container{border:1px solid #f6f8f9;background:rgba(255,255,255,0.5)} .field-fileupload.style-image-single .upload-object .icon-container.image img{-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;max-width:100%;height:auto;min-height:100px;min-width:100px} diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js index dc7b47969..ecd451f7e 100644 --- a/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js +++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager-browser-min.js @@ -303,9 +303,9 @@ var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and- if(uploadProgress>=100) uploadProgress=99 fileNumberLabel.innerHTML=messageTemplate.replace(':number',fileNumber).replace(':percents',Math.round(uploadProgress)+'%')} -MediaManager.prototype.setUploadProgress=function(value){var progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') -progresBar.setAttribute('style','width: '+value+'%') -progresBar.setAttribute('class','progress-bar')} +MediaManager.prototype.setUploadProgress=function(value){var progressBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') +progressBar.setAttribute('style','width: '+value+'%') +progressBar.setAttribute('class','progress-bar')} MediaManager.prototype.uploadQueueComplete=function(){this.$el.find('[data-command="cancel-uploading"]').addClass('hide') this.$el.find('[data-command="close-uploader"]').removeClass('hide') this.refresh()} @@ -313,10 +313,10 @@ MediaManager.prototype.uploadSending=function(file,xhr,formData){formData.append formData.append('X_OCTOBER_FILEUPLOAD',this.options.uniqueId)} MediaManager.prototype.uploadCancelAll=function(){this.dropzone.removeAllFiles(true) this.hideUploadUi()} -MediaManager.prototype.updateUploadBar=function(templateName,classNames){var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),successTemplate=fileNumberLabel.getAttribute('data-'+templateName+'-template'),progresBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') -fileNumberLabel.innerHTML=successTemplate;progresBar.setAttribute('class',classNames)} +MediaManager.prototype.updateUploadBar=function(templateName,classNames){var fileNumberLabel=this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'),successTemplate=fileNumberLabel.getAttribute('data-'+templateName+'-template'),progressBar=this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') +fileNumberLabel.innerHTML=successTemplate;progressBar.setAttribute('class',classNames)} MediaManager.prototype.uploadSuccess=function(){this.updateUploadBar('success','progress-bar progress-bar-success');} -MediaManager.prototype.uploadError=function(file,message){this.updateUploadBar('error','progress-bar-error');$.oc.alert('Error uploading file')} +MediaManager.prototype.uploadError=function(file,message){this.updateUploadBar('error','progress-bar progress-bar-danger');$.oc.alert('Error uploading file')} MediaManager.prototype.cropSelectedImage=function(callback){var selectedItems=this.getSelectedItems(true) if(selectedItems.length!=1){alert(this.options.selectSingleImage) return} diff --git a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js index 68736f66d..386c9609e 100644 --- a/modules/cms/widgets/mediamanager/assets/js/mediamanager.js +++ b/modules/cms/widgets/mediamanager/assets/js/mediamanager.js @@ -775,10 +775,10 @@ } MediaManager.prototype.setUploadProgress = function(value) { - var progresBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') - - progresBar.setAttribute('style', 'width: ' + value + '%') - progresBar.setAttribute('class', 'progress-bar') + var progressBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') + + progressBar.setAttribute('style', 'width: ' + value + '%') + progressBar.setAttribute('class', 'progress-bar') } MediaManager.prototype.uploadQueueComplete = function() { @@ -801,10 +801,10 @@ MediaManager.prototype.updateUploadBar = function(templateName, classNames) { var fileNumberLabel = this.$el.get(0).querySelector('[data-label="file-number-and-progress"]'), successTemplate = fileNumberLabel.getAttribute('data-' + templateName + '-template'), - progresBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') + progressBar = this.$el.get(0).querySelector('[data-control="upload-progress-bar"]') fileNumberLabel.innerHTML = successTemplate; - progresBar.setAttribute('class', classNames) + progressBar.setAttribute('class', classNames) } MediaManager.prototype.uploadSuccess = function() { @@ -812,7 +812,7 @@ } MediaManager.prototype.uploadError = function(file, message) { - this.updateUploadBar('error', 'progress-bar-error'); + this.updateUploadBar('error', 'progress-bar progress-bar-danger'); $.oc.alert('Error uploading file') } diff --git a/modules/system/assets/ui/less/global.variables.less b/modules/system/assets/ui/less/global.variables.less index 7cc9393b1..c15e3b504 100644 --- a/modules/system/assets/ui/less/global.variables.less +++ b/modules/system/assets/ui/less/global.variables.less @@ -112,16 +112,21 @@ @size-huge: 250px; @size-giant: 350px; - // // Colors // -------------------------------------------------- -@color-text-title: #405261; -@color-text-description: #8f8f8f; +@brand-primary: #5fb6f5; +@brand-success: #31ac5f; +@brand-info: #5bc0de; // @todo Find a non-BS color +@brand-warning: #f0ad4e; // @todo Find a non-BS color +@brand-danger: #ab2a1c; -@color-focus: @brand-primary; -@color-border: #cccccc; -@color-border-light: #e1e1e1; +@color-text-title: #405261; +@color-text-description: #8f8f8f; + +@color-focus: @brand-primary; +@color-border: #cccccc; +@color-border-light: #e1e1e1; @gray-darker: lighten(#000, 13.5%); // #222 @gray-dark: lighten(#000, 20%); // #333 @@ -129,27 +134,21 @@ @gray-light: lighten(#000, 60%); // #999 @gray-lighter: lighten(#000, 93.5%); // #eee -@brand-primary: #5fb6f5; -@brand-success: #5cb85c; -@brand-info: #5bc0de; -@brand-warning: #f0ad4e; -@brand-danger: #d9534f; +@state-success-text: #3c763d; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); -@state-success-text: #3c763d; -@state-success-bg: #dff0d8; -@state-success-border: darken(spin(@state-success-bg, -10), 5%); +@state-info-text: #31708f; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); -@state-info-text: #31708f; -@state-info-bg: #d9edf7; -@state-info-border: darken(spin(@state-info-bg, -10), 7%); +@state-warning-text: #8a6d3b; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); -@state-warning-text: #8a6d3b; -@state-warning-bg: #fcf8e3; -@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); - -@state-danger-text: #a94442; -@state-danger-bg: #f2dede; -@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); +@state-danger-text: #a94442; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); // // General diff --git a/modules/system/assets/ui/less/progressbar.base.less b/modules/system/assets/ui/less/progressbar.base.less deleted file mode 100644 index d66abc154..000000000 --- a/modules/system/assets/ui/less/progressbar.base.less +++ /dev/null @@ -1,70 +0,0 @@ - -// Bar animations -// ------------------------- - -// WebKit -@-webkit-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Spec and IE10+ -@keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - - - -// Bar itself -// ------------------------- - -// Outer container -.progress { - overflow: hidden; - height: @line-height-computed; - margin-bottom: @line-height-computed; - background-color: @progress-bg; - border-radius: @border-radius-base; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); -} - -// Bar of progress -.progress-bar { - float: left; - width: 0%; - height: 100%; - font-size: @font-size-small; - line-height: @line-height-computed; - color: @progress-bar-color; - text-align: center; - background-color: @progress-bar-bg; - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - .transition(width .6s ease); -} - -// Call animation for the active one -.progress.active .progress-bar { - .animation(progress-bar-stripes 2s linear infinite); -} - - - -// Variations -// ------------------------- - -.progress-bar-success { - background-color: @progress-bar-success-bg; -} - -.progress-bar-info { - background-color: @progress-bar-info-bg; -} - -.progress-bar-warning { - background-color: @progress-bar-warning-bg; -} - -.progress-bar-danger { - background-color: @progress-bar-danger-bg; -} diff --git a/modules/system/assets/ui/less/progressbar.less b/modules/system/assets/ui/less/progressbar.less index 9fd5a5bdf..d0a3f9ea9 100644 --- a/modules/system/assets/ui/less/progressbar.less +++ b/modules/system/assets/ui/less/progressbar.less @@ -8,32 +8,75 @@ // Progress bars // -------------------------------------------------- -@import "progressbar.base.less"; - -@progress-bg: #f5f5f5; +@progress-bg: #d9dee0; @progress-bar-color: #fff; -@progress-bar-bg: @brand-primary; +@progress-bar-bg: #2f99da; @progress-bar-success-bg: @brand-success; @progress-bar-warning-bg: @brand-warning; @progress-bar-danger-bg: @brand-danger; @progress-bar-info-bg: @brand-info; +// Bar itself +// ------------------------- -div.progress { +// Outer container +.progress { + overflow: hidden; height: 9px; - .box-shadow(none); - background: #d9dee0; + margin-bottom: @line-height-computed; + background-color: @progress-bg; + border-radius: @border-radius-base; } +// Bar of progress .progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: @font-size-small; line-height: 9px; - .box-shadow(none); - background-color: #2f99da; - - &.progress-bar-success { - background-color: #31ac5f; - } + color: @progress-bar-color; + text-align: center; + background-color: @progress-bar-bg; + .transition(width .6s ease); } +// Call animation for the active one +.progress.active .progress-bar { + .animation(progress-bar-stripes 2s linear infinite); +} +// Variations +// ------------------------- + +.progress-bar-success { + background-color: @progress-bar-success-bg; +} + +.progress-bar-info { + background-color: @progress-bar-info-bg; +} + +.progress-bar-warning { + background-color: @progress-bar-warning-bg; +} + +.progress-bar-danger { + background-color: @progress-bar-danger-bg; +} + +// Bar animations +// ------------------------- + +// WebKit +@-webkit-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + +// Spec and IE10+ +@keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} diff --git a/modules/system/assets/ui/storm.css b/modules/system/assets/ui/storm.css index 601acfcaf..f2120d087 100644 --- a/modules/system/assets/ui/storm.css +++ b/modules/system/assets/ui/storm.css @@ -424,11 +424,11 @@ address{margin-bottom:20px;font-style:normal;line-height:1.42857143} .btn-primary:active,.btn-primary.active,.open .dropdown-toggle.btn-primary{background-image:none} .btn-primary.disabled,.btn-primary[disabled],fieldset[disabled] .btn-primary,.btn-primary.disabled:hover,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary:hover,.btn-primary.disabled:focus,.btn-primary[disabled]:focus,fieldset[disabled] .btn-primary:focus,.btn-primary.disabled:active,.btn-primary[disabled]:active,fieldset[disabled] .btn-primary:active,.btn-primary.disabled.active,.btn-primary[disabled].active,fieldset[disabled] .btn-primary.active{background-color:#5fb6f5;border-color:#47abf4} .btn-primary .badge{color:#5fb6f5;background-color:#ffffff} -.btn-success{color:#ffffff;background-color:#5cb85c;border-color:#4cae4c} -.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#ffffff;background-color:#47a447;border-color:#398439} +.btn-success{color:#ffffff;background-color:#31ac5f;border-color:#2b9854} +.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{color:#ffffff;background-color:#288c4d;border-color:#1e693a} .btn-success:active,.btn-success.active,.open .dropdown-toggle.btn-success{background-image:none} -.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#5cb85c;border-color:#4cae4c} -.btn-success .badge{color:#5cb85c;background-color:#ffffff} +.btn-success.disabled,.btn-success[disabled],fieldset[disabled] .btn-success,.btn-success.disabled:hover,.btn-success[disabled]:hover,fieldset[disabled] .btn-success:hover,.btn-success.disabled:focus,.btn-success[disabled]:focus,fieldset[disabled] .btn-success:focus,.btn-success.disabled:active,.btn-success[disabled]:active,fieldset[disabled] .btn-success:active,.btn-success.disabled.active,.btn-success[disabled].active,fieldset[disabled] .btn-success.active{background-color:#31ac5f;border-color:#2b9854} +.btn-success .badge{color:#31ac5f;background-color:#ffffff} .btn-info{color:#ffffff;background-color:#5bc0de;border-color:#46b8da} .btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{color:#ffffff;background-color:#39b3d7;border-color:#269abc} .btn-info:active,.btn-info.active,.open .dropdown-toggle.btn-info{background-image:none} @@ -439,11 +439,11 @@ address{margin-bottom:20px;font-style:normal;line-height:1.42857143} .btn-warning:active,.btn-warning.active,.open .dropdown-toggle.btn-warning{background-image:none} .btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-warning,.btn-warning.disabled:hover,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning:hover,.btn-warning.disabled:focus,.btn-warning[disabled]:focus,fieldset[disabled] .btn-warning:focus,.btn-warning.disabled:active,.btn-warning[disabled]:active,fieldset[disabled] .btn-warning:active,.btn-warning.disabled.active,.btn-warning[disabled].active,fieldset[disabled] .btn-warning.active{background-color:#f0ad4e;border-color:#eea236} .btn-warning .badge{color:#f0ad4e;background-color:#ffffff} -.btn-danger{color:#ffffff;background-color:#d9534f;border-color:#d43f3a} -.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#ffffff;background-color:#d2322d;border-color:#ac2925} +.btn-danger{color:#ffffff;background-color:#ab2a1c;border-color:#952518} +.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{color:#ffffff;background-color:#882116;border-color:#601810} .btn-danger:active,.btn-danger.active,.open .dropdown-toggle.btn-danger{background-image:none} -.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#d9534f;border-color:#d43f3a} -.btn-danger .badge{color:#d9534f;background-color:#ffffff} +.btn-danger.disabled,.btn-danger[disabled],fieldset[disabled] .btn-danger,.btn-danger.disabled:hover,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger:hover,.btn-danger.disabled:focus,.btn-danger[disabled]:focus,fieldset[disabled] .btn-danger:focus,.btn-danger.disabled:active,.btn-danger[disabled]:active,fieldset[disabled] .btn-danger:active,.btn-danger.disabled.active,.btn-danger[disabled].active,fieldset[disabled] .btn-danger.active{background-color:#ab2a1c;border-color:#952518} +.btn-danger .badge{color:#ab2a1c;background-color:#ffffff} .btn-link{color:#0181b9;font-weight:normal;cursor:pointer;border-radius:0} .btn-link,.btn-link:active,.btn-link[disabled],fieldset[disabled] .btn-link{background-color:transparent;-webkit-box-shadow:none;box-shadow:none} .btn-link,.btn-link:hover,.btn-link:focus,.btn-link:active{border-color:transparent} @@ -1241,22 +1241,19 @@ body.popover-open .control-popover .popover-head:before{display:none} body.breadcrumb-flush .control-breadcrumb,.control-breadcrumb.breadcrumb-flush{margin-bottom:0} body.slim-container .control-breadcrumb{margin-left:0;margin-right:0} body.compact-container .control-breadcrumb{margin-top:0;margin-left:0;margin-right:0} +.progress{overflow:hidden;height:9px;margin-bottom:20px;background-color:#d9dee0;border-radius:2px} +.progress-bar{float:left;width:0%;height:100%;font-size:12px;line-height:9px;color:#ffffff;text-align:center;background-color:#2f99da;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} +.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite} +.progress-bar-success{background-color:#31ac5f} +.progress-bar-info{background-color:#5bc0de} +.progress-bar-warning{background-color:#f0ad4e} +.progress-bar-danger{background-color:#ab2a1c} @-webkit-keyframes progress-bar-stripes{from{background-position:40px 0} to{background-position:0 0} } @keyframes progress-bar-stripes{from{background-position:40px 0} to{background-position:0 0} } -.progress{overflow:hidden;height:20px;margin-bottom:20px;background-color:#f5f5f5;border-radius:2px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)} -.progress-bar{float:left;width:0%;height:100%;font-size:12px;line-height:20px;color:#ffffff;text-align:center;background-color:#5fb6f5;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width 0.6s ease;transition:width 0.6s ease} -.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite} -.progress-bar-success{background-color:#5cb85c} -.progress-bar-info{background-color:#5bc0de} -.progress-bar-warning{background-color:#f0ad4e} -.progress-bar-danger{background-color:#d9534f} -div.progress{height:9px;-webkit-box-shadow:none;box-shadow:none;background:#d9dee0} -.progress-bar{line-height:9px;-webkit-box-shadow:none;box-shadow:none;background-color:#2f99da} -.progress-bar.progress-bar-success{background-color:#31ac5f} .callout{font-size:14px;margin-bottom:20px} .callout.fade{opacity:0;filter:alpha(opacity=0);-webkit-transition:all 0.5s,width 0s;transition:all 0.5s,width 0s;-webkit-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} .callout.fade.in{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} @@ -1372,7 +1369,7 @@ div.progress{height:9px;-webkit-box-shadow:none;box-shadow:none;background:#d9de .control-tabs[data-closable] > ul.nav-tabs > li a,.control-tabs[data-closable] > div > ul.nav-tabs > li a,.control-tabs[data-closable] > div > div > ul.nav-tabs > li a{padding-left:20px !important;padding-right:0 !important} .control-tabs[data-closable] > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close{display:block;position:absolute;width:20px;height:20px;top:5px;left:-5px;text-align:right;font-size:12px;color:#cccccc !important;cursor:pointer} .control-tabs[data-closable] > ul.nav-tabs > li span.tab-close i,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close i{display:inline-block;z-index:101;top:-7px;right:5px;position:relative} -.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close:hover i{color:#d9534f} +.control-tabs[data-closable] > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > ul.nav-tabs > li span.tab-close:hover i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li span.tab-close:hover i{color:#ab2a1c} .control-tabs[data-closable] > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > ul.nav-tabs > li.active span.close,.control-tabs[data-closable] > div > div > ul.nav-tabs > li.active span.close{color:#cccccc} .control-tabs[data-closable] > ul.nav-tabs > li[data-modified] span.tab-close i,.control-tabs[data-closable] > div > ul.nav-tabs > li[data-modified] span.tab-close i,.control-tabs[data-closable] > div > div > ul.nav-tabs > li[data-modified] span.tab-close i{top:-4px} .control-tabs[data-closable] > ul.nav-tabs > li[data-modified] span.tab-close i:before,.control-tabs[data-closable] > div > ul.nav-tabs > li[data-modified] span.tab-close i:before,.control-tabs[data-closable] > div > div > ul.nav-tabs > li[data-modified] span.tab-close i:before{content:"\f111";font-size:9px} @@ -1474,10 +1471,10 @@ ul.status-list li a{color:#7e8c8d} ul.status-list li a:hover{color:#0181b9;text-decoration:none} ul.status-list li span.status{display:inline-block;padding:1px 5px;color:white;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} ul.status-list li span.status.circle{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;width:12px;height:12px;vertical-align:middle;position:relative;top:-1px} -ul.status-list li span.status.success{background:#5cb85c} +ul.status-list li span.status.success{background:#31ac5f} ul.status-list li span.status.primary{background:#5fb6f5} ul.status-list li span.status.warning{background:#f0ad4e} -ul.status-list li span.status.danger{background:#d9534f} +ul.status-list li span.status.danger{background:#ab2a1c} ul.status-list li span.status.info{background:#5bc0de} .gecko ul.status-list li span.status.circle{top:-2px} .report-container ul.status-list{margin-top:-10px}