diff options
Diffstat (limited to 'uikit/static/css/components/progress.almost-flat.css')
-rw-r--r-- | uikit/static/css/components/progress.almost-flat.css | 105 |
1 files changed, 105 insertions, 0 deletions
diff --git a/uikit/static/css/components/progress.almost-flat.css b/uikit/static/css/components/progress.almost-flat.css new file mode 100644 index 0000000..baf0e68 --- /dev/null +++ b/uikit/static/css/components/progress.almost-flat.css @@ -0,0 +1,105 @@ +/*! UIkit 2.21.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ +/* ======================================================================== + Component: Progress + ========================================================================== */ +/* + * 1. Clearing + * 2. Vertical alignment if text is used + */ +.uk-progress { + -moz-box-sizing: border-box; + box-sizing: border-box; + height: 20px; + margin-bottom: 15px; + background: #f5f5f5; + /* 1 */ + overflow: hidden; + /* 2 */ + line-height: 20px; + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); + border-radius: 4px; +} +/* + * Add margin if adjacent element + */ +* + .uk-progress { + margin-top: 15px; +} +/* Sub-object: `uk-progress-bar` + ========================================================================== */ +/* + * 1. Transition + * 2. Needed for text + */ +.uk-progress-bar { + width: 0; + height: 100%; + background: #00a8e6; + float: left; + /* 1 */ + -webkit-transition: width 0.6s ease; + transition: width 0.6s ease; + /* 2 */ + font-size: 12px; + color: #ffffff; + text-align: center; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1); +} +/* Size modifiers + ========================================================================== */ +/* Mini */ +.uk-progress-mini { + height: 6px; +} +/* Small */ +.uk-progress-small { + height: 12px; +} +/* Color modifiers + ========================================================================== */ +.uk-progress-success .uk-progress-bar { + background-color: #8cc14c; +} +.uk-progress-warning .uk-progress-bar { + background-color: #faa732; +} +.uk-progress-danger .uk-progress-bar { + background-color: #da314b; +} +/* Modifier: `uk-progress-striped` + ========================================================================== */ +.uk-progress-striped .uk-progress-bar { + background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 30px 30px; +} +/* + * Animation + */ +.uk-progress-striped.uk-active .uk-progress-bar { + -webkit-animation: uk-progress-bar-stripes 2s linear infinite; + animation: uk-progress-bar-stripes 2s linear infinite; +} +@-webkit-keyframes uk-progress-bar-stripes { + 0% { + background-position: 0 0; + } + 100% { + background-position: 30px 0; + } +} +@keyframes uk-progress-bar-stripes { + 0% { + background-position: 0 0; + } + 100% { + background-position: 30px 0; + } +} +/* Size modifiers + ========================================================================== */ +.uk-progress-mini, +.uk-progress-small { + border-radius: 500px; +} |