add extjs 6.0.1 sources

[extjs.git] / extjs / modern / theme-base / sass / src / ProgressIndicator.scss

.x-progressindicator {\r
	width: 50%;\r
	height: 1.3em;\r
}\r
\r
.x-progressindicator .x-progressindicator-inner {\r
	background: #222222;\r
	padding: 10px;\r
	height: 100%;\r
	border-radius: 20px;\r
	box-shadow: 0px 5px 17px rgba(40, 40, 40, 0.5);\r
	box-sizing: content-box;\r
	position: relative;\r
}\r
\r
.x-progressindicator .x-progressindicator-text {\r
	@include st-box;\r
	@include st-box-align(center);\r
	@include st-box-pack(center);\r
	width: 100%;\r
	height: 100%;\r
	position: absolute;\r
	top: 0px;\r
	left: 0px;\r
	color: white;\r
	text-shadow: 1px 1px 2px black;\r
}\r
\r
.x-progressindicator .x-progressindicator-bar {\r
	height: 100%;\r
	width: 0%;\r
	border-radius: 10px;\r
}\r
\r
.x-progressindicator:not(.x-item-hidden) .x-progressindicator-bar .x-progressindicator-bar-fill {\r
	height: 100%;\r
	width: 100%;\r
	background-color: gray;\r
	border-radius: 10px;\r
\r
	$animation-support: webkit, moz, o, ms, not khtml;\r
	@include experimental('animation-name', progressIndicator, $animation-support);\r
	@include experimental('animation-duration', 1s, $animation-support);\r
	@include experimental('animation-timing-function', linear, $animation-support);\r
	@include experimental('animation-iteration-count', infinite, $animation-support);\r
\r
	background-repeat: repeat-x;\r
	background-size: 30px 30px;\r
	@include 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))\r
}\r
\r
@-webkit-keyframes progressIndicator\r
{\r
	to {\r
		background-position: 30px;\r
	}\r
}\r
@-moz-keyframes progressIndicator\r
{\r
	to {\r
		background-position: 30px;\r
	}\r
}\r
@keyframes progressIndicator\r
{\r
	to {\r
		background-position: 30px;\r
	}\r
}