// // Component: Progress // // ======================================================================== // Variables // ======================================================================== @progress-margin-vertical: @global-margin; @progress-background: #f7f7f7; @progress-bar-background: @global-primary-background; @progress-bar-font-size: round((@global-font-size * 0.85)); // 12px / 14px @progress-bar-color: @global-contrast-color; @progress-bar-success-background: @global-success-background; @progress-bar-warning-background: @global-warning-background; @progress-bar-danger-background: @global-danger-background; // // New // @progress-bar-text-shadow: @global-contrast-text-shadow; @progress-bar-primary-gradient-top: @global-primary-gradient-top; @progress-bar-primary-gradient-bottom: @global-primary-gradient-bottom; @progress-bar-success-gradient-top: @global-success-gradient-top; @progress-bar-success-gradient-bottom: @global-success-gradient-bottom; @progress-bar-warning-gradient-top: @global-warning-gradient-top; @progress-bar-warning-gradient-bottom: @global-warning-gradient-bottom; @progress-bar-danger-gradient-top: @global-danger-gradient-top; @progress-bar-danger-gradient-bottom: @global-danger-gradient-bottom; // Component // ======================================================================== .hook-progress() { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.07), inset 0 2px 2px rgba(0,0,0,0.07); border-radius: @global-border-radius; } // Sub-object: `progress-bar` // ======================================================================== .hook-progress-bar() { background-image: -webkit-linear-gradient(top, @progress-bar-primary-gradient-top, @progress-bar-primary-gradient-bottom); background-image: linear-gradient(to bottom, @progress-bar-primary-gradient-top, @progress-bar-primary-gradient-bottom); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2), inset 0 0 0 1px rgba(0,0,0,0.1); text-shadow: 0 -1px 0 @progress-bar-text-shadow; } // Color modifiers // ======================================================================== .hook-progress-bar-success() { background-image: -webkit-linear-gradient(top, @progress-bar-success-gradient-top, @progress-bar-success-gradient-bottom); background-image: linear-gradient(to bottom, @progress-bar-success-gradient-top, @progress-bar-success-gradient-bottom); } .hook-progress-bar-warning() { background-image: -webkit-linear-gradient(top, @progress-bar-warning-gradient-top, @progress-bar-warning-gradient-bottom); background-image: linear-gradient(to bottom, @progress-bar-warning-gradient-top, @progress-bar-warning-gradient-bottom); } .hook-progress-bar-danger() { background-image: -webkit-linear-gradient(top, @progress-bar-danger-gradient-top, @progress-bar-danger-gradient-bottom); background-image: linear-gradient(to bottom, @progress-bar-danger-gradient-top, @progress-bar-danger-gradient-bottom); } // Miscellaneous // ======================================================================== .hook-progress-misc() { /* Size modifiers ========================================================================== */ .uk-progress-mini, .uk-progress-small { border-radius: 500px; } }