app/assets/stylesheets/semantic-ui/elements/_progress.scss in semantic-ui-sass-0.8.1.0 vs app/assets/stylesheets/semantic-ui/elements/_progress.scss in semantic-ui-sass-0.8.2.0

- old
+ new

@@ -7,161 +7,118 @@ * Released under the MIT license * http://opensource.org/licenses/MIT * */ - /******************************* Progress Bar *******************************/ .ui.progress { border: 1px solid rgba(0, 0, 0, 0.1); - width: 100%; height: 35px; - background-color: #FAFAFA; padding: 5px; - - -webkit-border-radius: 0.3125em; - -moz-border-radius: 0.3125em; border-radius: 0.3125em; - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.progress .bar { display: inline-block; height: 100%; - background-color: #CCCCCC; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; - - -webkit-transition: - width 1s ease-in-out, - background-color 1s ease-out - ; - -moz-transition: - width 1s ease-in-out, - background-color 1s ease-out - ; - -ms-transition: - width 1s ease-in-out, - background-color 1s ease-out - ; - -o-transition: - width 1s ease-in-out, - background-color 1s ease-out - ; - transition: - width 1s ease-in-out, - background-color 1s ease-out - ; + -webkit-transition: width 1s ease-in-out, + background-color 1s ease-out; + transition: width 1s ease-in-out, + background-color 1s ease-out; } - /******************************* States *******************************/ - /*-------------- Successful ---------------*/ .ui.successful.progress .bar { background-color: #73E064 !important; } + .ui.successful.progress .bar, .ui.successful.progress .bar::after { -webkit-animation: none !important; - -moz-animation: none !important; animation: none !important; } /*-------------- Failed ---------------*/ .ui.failed.progress .bar { background-color: #DF9BA4 !important; } + .ui.failed.progress .bar, .ui.failed.progress .bar::after { -webkit-animation: none !important; - -moz-animation: none !important; animation: none !important; } /*-------------- Active ---------------*/ .ui.active.progress .bar { position: relative; } + .ui.active.progress .bar::after { content: ''; opacity: 0; - position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #FFFFFF; - - -moz-border-radius: 3px; - -webkit-border-radius: 3px; border-radius: 3px; - -webkit-animation: progress-active 2s ease-out infinite; - -moz-animation: progress-active 2s ease-out infinite; animation: progress-active 2s ease-out infinite; } @-webkit-keyframes progress-active { 0% { opacity: 0; width: 0; } + 50% { opacity: 0.3; } + 100% { opacity: 0; width: 95%; } } -@-moz-keyframes progress-active { - 0% { - opacity: 0; - width: 0; - } - 50% { - opacity: 0.3; - } - 100% { - opacity: 0; - width: 100%; - } -} + @keyframes progress-active { 0% { opacity: 0; width: 0; } + 50% { opacity: 0.3; } + 100% { opacity: 0; width: 100%; } } @@ -171,178 +128,139 @@ ---------------*/ .ui.disabled.progress { opacity: 0.35; } + .ui.disabled.progress .bar, .ui.disabled.progress .bar::after { -webkit-animation: none !important; - -moz-animation: none !important; animation: none !important; } - - /******************************* Variations *******************************/ - /*-------------- Attached ---------------*/ /* bottom attached */ + .ui.progress.attached { position: relative; border: none; } + .ui.progress.attached, .ui.progress.attached .bar { display: block; height: 3px; padding: 0px; overflow: hidden; - -webkit-border-radius: 0em 0em 0.3125em 0.3125em; - -moz-border-radius: 0em 0em 0.3125em 0.3125em; border-radius: 0em 0em 0.3125em 0.3125em; } + .ui.progress.attached .bar { - -webkit-border-radius: 0em; - -moz-border-radius: 0em; border-radius: 0em; } /* top attached */ + .ui.progress.top.attached, .ui.progress.top.attached .bar { top: -2px; - -webkit-border-radius: 0.3125em 0.3125em 0em 0em; - -moz-border-radius: 0.3125em 0.3125em 0em 0em; border-radius: 0.3125em 0.3125em 0em 0em; } + .ui.progress.top.attached .bar { - -webkit-border-radius: 0em; - -moz-border-radius: 0em; border-radius: 0em; } - /*-------------- Colors ---------------*/ .ui.blue.progress .bar { background-color: #6ECFF5; } + .ui.black.progress .bar { background-color: #5C6166; } + .ui.green.progress .bar { background-color: #A1CF64; } + .ui.red.progress .bar { background-color: #EF4D6D; } + .ui.purple.progress .bar { background-color: #564F8A; } + .ui.teal.progress .bar { background-color: #00B5AD; } - /*-------------- Striped ---------------*/ .ui.progress.striped .bar { -webkit-background-size: 30px 30px; - -moz-background-size: 30px 30px; background-size: 30px 30px; - background-image: - -webkit-gradient(linear, left top, right bottom, + background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent) - ) - ; - background-image: - -webkit-linear-gradient( + ); + background-image: -webkit-linear-gradient( 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent - ) - ; - background-image: - -moz-linear-gradient( + ); + background-image: linear-gradient( 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent - ) - ; - background-image: - -ms-linear-gradient( - 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, - transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, - transparent 75%, transparent - ) - ; - background-image: - -o-linear-gradient( - 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, - transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, - transparent 75%, transparent - ) - ; - background-image: - linear-gradient( - 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, - transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, - transparent 75%, transparent - ) - ; + ); } .ui.progress.active.striped .bar:after { -webkit-animation: none; - -moz-animation: none; -ms-animation: none; - -o-animation: none; animation: none; } + .ui.progress.active.striped .bar { -webkit-animation: progress-striped 3s linear infinite; - -moz-animation: progress-striped 3s linear infinite; animation: progress-striped 3s linear infinite; } @-webkit-keyframes progress-striped { 0% { background-position: 0px 0; } + 100% { background-position: 60px 0; } } -@-moz-keyframes progress-striped { - 0% { - background-position: 0px 0; - } - 100% { - background-position: 60px 0; - } -} + @keyframes progress-striped { 0% { background-position: 0px 0; } + 100% { background-position: 60px 0; } } - /*-------------- Sizes ---------------*/ \ No newline at end of file