// Name: Progress // Description: Component to create progress bars // // Component: `uk-progress` // // ======================================================================== // Variables // ======================================================================== /* ======================================================================== Component: Progress ========================================================================== */ /* * 1. Add the correct vertical alignment in all browsers. * 2. Behave like a block element. * 3. Remove borders in Firefox. * 4. Remove default style in Chrome, Safari and Edge. * 5. Style */ .uk-progress { /* 1 */ vertical-align: baseline; /* 2 */ display: block; width: 100%; /* 3 */ border: 0; /* 4 */ background-color: $progress-background; /* 5 */ margin-bottom: $progress-margin-vertical; height: $progress-height; @if(mixin-exists(hook-progress)) {@include hook-progress();} } /* Add margin if adjacent element */ * + .uk-progress { margin-top: $progress-margin-vertical; } /* * Show background color set on `uk-progress` in Chrome, Safari and Edge. */ .uk-progress::-webkit-progress-bar { background-color: transparent; } /* * Progress Bar * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet. * https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */ .uk-progress::-webkit-progress-value { background-color: $progress-bar-background; transition: width 0.6s ease; @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} } .uk-progress::-moz-progress-bar { background-color: $progress-bar-background; /* 1 */ transition: width 0.6s ease; @if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();} } // Hooks // ======================================================================== @if(mixin-exists(hook-progress-misc)) {@include hook-progress-misc();} // @mixin hook-progress(){} // @mixin hook-progress-bar(){} // @mixin hook-progress-misc(){}