Chris@0: /**
Chris@0:  * @file
Chris@0:  * Progress behavior.
Chris@0:  *
Chris@0:  * @see progress.js
Chris@0:  */
Chris@0: 
Chris@0: .progress {
Chris@0:   position: relative;
Chris@0: }
Chris@0: .progress__track {
Chris@18:   min-width: 100px;
Chris@18:   max-width: 100%;
Chris@18:   height: 16px;
Chris@18:   margin-top: 5px;
Chris@18:   border: 1px solid;
Chris@0:   background-color: #fff;
Chris@0: }
Chris@0: .progress__bar {
Chris@0:   width: 3%;
Chris@0:   min-width: 3%;
Chris@0:   max-width: 100%;
Chris@18:   height: 16px;
Chris@18:   background-color: #000;
Chris@0: }
Chris@0: .progress__description,
Chris@0: .progress__percentage {
Chris@18:   overflow: hidden;
Chris@18:   margin-top: 0.2em;
Chris@0:   color: #555;
Chris@14:   font-size: 0.875em;
Chris@0: }
Chris@0: .progress__description {
Chris@0:   float: left; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .progress__description {
Chris@0:   float: right;
Chris@0: }
Chris@0: .progress__percentage {
Chris@0:   float: right; /* LTR */
Chris@0: }
Chris@0: [dir="rtl"] .progress__percentage {
Chris@0:   float: left;
Chris@0: }
Chris@0: .progress--small .progress__track {
Chris@0:   height: 7px;
Chris@0: }
Chris@0: .progress--small .progress__bar {
Chris@0:   height: 7px;
Chris@0:   background-size: 20px 20px;
Chris@0: }