// PROGRESS BARS // ------------- // ANIMATIONS // ---------- // Webkit @-webkit-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } // Firefox @-moz-keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } // Spec @keyframes progress-bar-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } } // THE BARS // -------- // Outer container .progress { overflow: hide; height: 18px; margin-bottom: 18px; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); .border-radius(4px); } // Bar of progress .progress .bar { width: 0%; height: 18px; color: @white; font-size: 12px; text-align: center; text-shadow: 0 -1px 0 rgba(0,0,0,.25); #gradient > .vertical(#149bdf, #0480be); .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .box-sizing(border-box); .transition(width .6s ease); } // Striped bars .progress-striped .bar { #gradient > .striped(#62c462); .background-size(40px 40px); } // Call animation for the active one .progress.active .bar { -webkit-animation: progress-bar-stripes 2s linear infinite; -moz-animation: progress-bar-stripes 2s linear infinite; animation: progress-bar-stripes 2s linear infinite; } // COLORS // ------ // Danger (red) .progress-danger .bar { #gradient > .vertical(#ee5f5b, #c43c35); } .progress-danger.progress-striped .bar { #gradient > .striped(#ee5f5b); } // Success (green) .progress-success .bar { #gradient > .vertical(#62c462, #57a957); } .progress-success.progress-striped .bar { #gradient > .striped(#62c462); } // Info (teal) .progress-info .bar { #gradient > .vertical(#5bc0de, #339bb9); } .progress-info.progress-striped .bar { #gradient > .striped(#5bc0de); } .progress-files .bar { #gradient > .vertical(@orange, darken(@orange, 10%)); } .progress-leads .bar { #gradient > .vertical(@green, darken(@green, 10%)); } .progress-notes .bar { #gradient > .vertical(@yellow, darken(@yellow, 10%)); } .progress-contacts .bar { #gradient > .vertical(@blue, darken(@blue, 10%)); } .progress-documents .bar { #gradient > .vertical(@purple, darken(@purple, 10%)); } .progress-min .bar { #gradient > .vertical(@red, darken(@red, 10%)); } .progress-mid .bar { #gradient > .vertical(@orange, darken(@orange, 10%)); } .progress-near .bar { #gradient > .vertical(@yellow, darken(@yellow, 10%)); } .progress-closed .bar { #gradient > .vertical(@green, darken(@green, 10%)); } .progress-halt .bar { #gradient > .vertical(@gray, darken(@gray, 10%)); }