{"version":3,"sources":["../src/scss/_mixin.scss","../src/scss/_variables.scss"],"names":[],"mappings":"AAmFC,WACC,MAAe,AACf,gBAAgB,AAChB,WAAmB,AACnB,QAAQ,AACR,OAAO,AACP,YCjFqB,CD2HrB,AAhDD,iBASG,YAAmB,AACnB,YAAY,AACZ,kBAAkB,AAClB,UAAU,AACV,mDC9FsB,AD8FtB,2CC9FsB,ADgGrB,gDAAkD,AAAlD,6CAAkD,AAAlD,2CAAkD,AAAlD,uCAAkD,CAInD,AAnBH,qBAsBG,SAAS,AAER,iDAAmD,AAAnD,8CAAmD,AAAnD,4CAAmD,AAAnD,wCAAmD,CAIpD,AA5BH,gBAgCE,WC9GmB,AD+GnB,kBAAkB,AAClB,yBCnHuB,ADoHvB,oBAAoB,AACpB,sBAAsB,AACtB,KAAe,CAUf","file":"uprogress.min.css","sourcesContent":["@import 'variables';\n\n/// Valid values for the $position parameter.\n/// @type List<String>\n/// @access private\n$valid-position: 'top', 'bottom';\n\n/// Mixin to generate a custom μProgress style. Allow to customize, class name, height and colors.\n/// Generate a monochrome progres bar if one colors is passed or a multi-color animated one if multiple colors are passed.\n///\n/// @param {String} $name [uprogress] - class to apply to the μProgress.\n/// @param {Length} $height [`$uprogress-height`] - progressbar height.\n/// @param {List<Color>} $colors [`$uprogress-colors`] - List of Colors.\n/// @param {String} $position [`$uprogress-position`] - Position the µProgress on top or on bottom of its parent.\n/// @output A CSS class to pass in the `class` option of the `UProgress` Javascript module.\n///\n/// @example scss - A purple progress bar with a height of .25rem\n///   @include uprogress(purple-progress, .25rem, rgb(113, 62, 208));\n///\n///   // CSS Output\n///   .purple-progress {\n///     ...\n///     top: 0;\n///     height: .25rem;\n///     ...\n///     background-color: rgb(113, 62, 208);\n///   }\n///   .purple-progress.blur {\n///     ...\n///     color: rgb(113, 62, 208);\n///     ...\n///   }\n///\n/// @example scss - A multi-color progress bar with default height (2px)\n///   @include uprogress($name: rainbow-progress, $colors: (#17a0d3, #713ed0, #fc8d03, #38ad5d), $position: 'bottom');\n///\n///   // CSS Output\n///   .purple-progress {\n///     ...\n///     bottom: 0;\n///     height: 2px;\n///     ...\n///     background-color: #17a0d3;\n///     background-image: linear-gradient(to right, #17a0d3, #713ed0, #fc8d03, #38ad5d, #17a0d3);\n///     background-size: 500%;\n///     animation: 2s linear infinite rainbow-progress, 0.3s fadein;\n///   }\n///   @keyframes fadein { ... }\n///   @keyframes rainbow-progress { ... }\n@mixin uprogress($name: 'uprogress', $height: $uprogress-height, $colors: $uprogress-colors, $position: $uprogress-position) {\n\t@if $colors == null or length($colors) == 0 {\n\t\t$colors: $uprogress-colors;\n\t\t@warn '$colors is null or empty, using default $uprogress-colors (#{$uprogress-colors}) .';\n\t}\n\t@if $height == null {\n\t\t$height: $uprogress-height;\n\t\t@warn '$height is null, using default $uprogress-height (#{$uprogress-height}) .';\n\t}\n\t@if index($valid-position, $position) == null {\n\t\t$position: $uprogress-position;\n\t\t@warn '$position is not valid, using default $uprogress-position (#{$uprogress-position}) .';\n\t}\n\t@if length($colors) > 1 {\n\t\t@keyframes #{$name} {\n\t\t\t0% {\n\t\t\t\tbackground-position: 0 0;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\tbackground-position: (100% + 100% / length($colors)) 0;\n\t\t\t}\n\t\t}\n\t\t@keyframes fadein {\n\t\t\t0% {\n\t\t\t\topacity: 0;\n\t\t\t}\n\n\t\t\t100% {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.#{$name} {\n\t\t#{$position}: 0;\n\t\toverflow: hidden;\n\t\theight: $height * 4;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tz-index: $uprogress-zindex;\n\t\t@if length($colors) == 1 {\n\t\t\t.blur {\n\t\t\t\twidth: $height * 50;\n\t\t\t\theight: 100%;\n\t\t\t\tposition: absolute;\n\t\t\t\tright: 1px;\n\t\t\t\tbox-shadow: 0 0 $height * 4 nth($colors, 1), 0 0 $height * 2 nth($colors, 1);\n\t\t\t\t@if $position == 'top' {\n\t\t\t\t\ttransform: rotate(3deg) translateY(-$height * 1.5);\n\t\t\t\t} @else {\n\t\t\t\t\ttransform: rotate(-3deg) translateY($height * 1.5);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&.rtl .blur {\n\t\t\t\tleft: 1px;\n\t\t\t\t@if $position == 'top' {\n\t\t\t\t\ttransform: rotate(-3deg) translateY(-$height * 1.5);\n\t\t\t\t} @else {\n\t\t\t\t\ttransform: rotate(3deg) translateY($height * 1.5);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.bar {\n\t\t\theight: $height;\n\t\t\tposition: absolute;\n\t\t\tbackground-color: nth($colors, 1);\n\t\t\tpointer-events: none;\n\t\t\twill-change: transform;\n\t\t\t#{$position}: 0;\n\t\t\t@if length($colors) > 1 {\n\t\t\t\t$gradient-colors: append($colors, nth($colors, 1));\n\t\t\t\tbackground-image: linear-gradient(to right, $gradient-colors);\n\t\t\t\tbackground-size: length($gradient-colors) * 100%;\n\t\t\t\tanimation-name: #{$name}, fadein;\n\t\t\t\tanimation-duration: 2s, 0.3s;\n\t\t\t\tanimation-timing-function: linear, ease;\n\t\t\t\tanimation-iteration-count: infinite, 1;\n\t\t\t}\n\t\t}\n\t}\n}\n","/// Default µProgress color.\n/// @type Color\n$uprogress-colors: #006be5 !default;\n/// Default µProgress height.\n/// @type String\n$uprogress-height: 2px !default;\n/// Z-index value of the µProgress.\n/// @type Number\n$uprogress-zindex: 1000 !default;\n/// Default µProgress posistion (`top` or `bottom`).\n/// @type String\n$uprogress-position: 'top' !default;\n"]}