mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
2.8 KiB
105 lines
2.8 KiB
// Name: Progress
|
|
// Description: Component to create progress bars
|
|
//
|
|
// Component: `uk-progress`
|
|
//
|
|
// ========================================================================
|
|
|
|
|
|
// Variables
|
|
// ========================================================================
|
|
|
|
$progress-height: 15px !default;
|
|
$progress-margin-vertical: $global-margin !default;
|
|
$progress-background: $global-muted-background !default;
|
|
|
|
$progress-bar-background: $global-primary-background !default;
|
|
|
|
|
|
/* ========================================================================
|
|
Component: Progress
|
|
========================================================================== */
|
|
|
|
/*
|
|
* 1. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
* 2. Remove default style
|
|
* 3. Behave like a block element
|
|
* 4. Remove borders in Firefox and Edge
|
|
* 5. Set background color for progress container in Firefox, IE11 and Edge
|
|
* 6. Style
|
|
*/
|
|
|
|
.uk-progress {
|
|
/* 1 */
|
|
vertical-align: baseline;
|
|
/* 2 */
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
/* 3 */
|
|
display: block;
|
|
width: 100%;
|
|
/* 4 */
|
|
border: 0;
|
|
/* 5 */
|
|
background-color: $progress-background;
|
|
/* 6 */
|
|
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; }
|
|
|
|
/*
|
|
* Remove animated circles for indeterminate state in IE11 and Edge
|
|
*/
|
|
|
|
.uk-progress:indeterminate { color: transparent; }
|
|
|
|
/*
|
|
* Progress container
|
|
* 2. Remove progress bar for indeterminate state in Firefox
|
|
*/
|
|
|
|
.uk-progress::-webkit-progress-bar {
|
|
background-color: $progress-background;
|
|
@if(mixin-exists(hook-progress)) {@include hook-progress();}
|
|
}
|
|
|
|
/* 2 */
|
|
.uk-progress:indeterminate::-moz-progress-bar { width: 0; }
|
|
|
|
/*
|
|
* Progress bar
|
|
* 1. Remove right border in IE11 and Edge
|
|
*/
|
|
|
|
.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;
|
|
@if(mixin-exists(hook-progress-bar)) {@include hook-progress-bar();}
|
|
}
|
|
|
|
.uk-progress::-ms-fill {
|
|
background-color: $progress-bar-background;
|
|
transition: width 0.6s ease;
|
|
/* 1 */
|
|
border: 0;
|
|
@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(){}
|
|
|