X-Git-Url: https://git.nubati.net/cgi-bin/gitweb.cgi?p=e-DoKo.git;a=blobdiff_plain;f=css%2Fbootstrap%2Fprogress-bars.less;fp=css%2Fbootstrap%2Fprogress-bars.less;h=76c87be17cb724d7041c69291abc354d71aae226;hp=0486371aa89f17c2b72c81a982f9afdd79c06799;hb=72bdb543759b5ffbdf5c2cc71294ad4f1f2996b2;hpb=742ba18eaf36386d2d0e0936975b3f2545afc59e diff --git a/css/bootstrap/progress-bars.less b/css/bootstrap/progress-bars.less index 0486371..76c87be 100644 --- a/css/bootstrap/progress-bars.less +++ b/css/bootstrap/progress-bars.less @@ -3,34 +3,16 @@ // -------------------------------------------------- -// ANIMATIONS -// ---------- +// Bar animations +// ------------------------- -// Webkit +// WebKit @-webkit-keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// IE9 -@-ms-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Opera -@-o-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - -// Spec +// Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } to { background-position: 0 0; } @@ -38,85 +20,61 @@ -// THE BARS -// -------- +// Bar itself +// ------------------------- // Outer container .progress { overflow: hidden; - height: @baseLineHeight; - margin-bottom: @baseLineHeight; - #gradient > .vertical(#f5f5f5, #f9f9f9); + 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)); - .border-radius(4px); } // Bar of progress -.progress .bar { +.progress-bar { + float: left; width: 0%; height: 100%; - color: @white; - float: left; - font-size: 12px; + font-size: @font-size-small; + line-height: @line-height-computed; + color: @progress-bar-color; text-align: center; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - #gradient > .vertical(#149bdf, #0480be); + background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); - .box-sizing(border-box); .transition(width .6s ease); } -.progress .bar + .bar { - .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)); -} // Striped bars -.progress-striped .bar { - #gradient > .striped(#149bdf); - .background-size(40px 40px); +.progress-striped .progress-bar { + #gradient > .striped(); + 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; - -ms-animation: progress-bar-stripes 2s linear infinite; - -o-animation: progress-bar-stripes 2s linear infinite; - animation: progress-bar-stripes 2s linear infinite; +.progress.active .progress-bar { + .animation(progress-bar-stripes 2s linear infinite); } -// COLORS -// ------ +// Variations +// ------------------------- -// Danger (red) -.progress-danger .bar, .progress .bar-danger { - #gradient > .vertical(#ee5f5b, #c43c35); -} -.progress-danger.progress-striped .bar, .progress-striped .bar-danger { - #gradient > .striped(#ee5f5b); +.progress-bar-success { + .progress-bar-variant(@progress-bar-success-bg); } -// Success (green) -.progress-success .bar, .progress .bar-success { - #gradient > .vertical(#62c462, #57a957); -} -.progress-success.progress-striped .bar, .progress-striped .bar-success { - #gradient > .striped(#62c462); +.progress-bar-info { + .progress-bar-variant(@progress-bar-info-bg); } -// Info (teal) -.progress-info .bar, .progress .bar-info { - #gradient > .vertical(#5bc0de, #339bb9); -} -.progress-info.progress-striped .bar, .progress-striped .bar-info { - #gradient > .striped(#5bc0de); +.progress-bar-warning { + .progress-bar-variant(@progress-bar-warning-bg); } -// Warning (orange) -.progress-warning .bar, .progress .bar-warning { - #gradient > .vertical(lighten(@orange, 15%), @orange); -} -.progress-warning.progress-striped .bar, .progress-striped .bar-warning { - #gradient > .striped(lighten(@orange, 15%)); +.progress-bar-danger { + .progress-bar-variant(@progress-bar-danger-bg); }