fixes issue with overflow on attached proress

Former-commit-id: 1c462c758391fab3b8cc219ab921b3d371270dc7
Former-commit-id: 53f8b23e7a0b32415300d2a746d21fddee32472e

build/minified/elements/progress.min.css

@@ -1 +1 @@
-.ui.progress{border:1px solid rgba(0,0,0,.1);width:100%;height:35px;background-color:#FAFAFA;padding:5px;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.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:#CCC;-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}.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}.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}.ui.active.progress .bar{position:relative}.ui.active.progress .bar::after{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#FFF;-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:.3}100%{opacity:0;width:95%}}@-moz-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}.ui.disabled.progress{opacity:.35}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.progress.attached{position:relative;top:-2px;border:0}.ui.progress.attached,.ui.progress.attached .bar{display:block;height:4px;padding:0;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.progress.bottom.attached{top:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.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}.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,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));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(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:0 0}100%{background-position:60px 0}}@-moz-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}.ui.small.progress .bar{height:14px}
+.ui.progress{border:1px solid rgba(0,0,0,.1);width:100%;height:35px;background-color:#FAFAFA;padding:5px;-webkit-border-radius:.3125em;-moz-border-radius:.3125em;border-radius:.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:#CCC;-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}.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}.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}.ui.active.progress .bar{position:relative}.ui.active.progress .bar::after{content:'';opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:#FFF;-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:.3}100%{opacity:0;width:95%}}@-moz-keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}@keyframes progress-active{0%{opacity:0;width:0}50%{opacity:.3}100%{opacity:0;width:100%}}.ui.disabled.progress{opacity:.35}.ui.disabled.progress .bar,.ui.disabled.progress .bar::after{-webkit-animation:none!important;-moz-animation:none!important;animation:none!important}.ui.progress.attached{position:relative;top:-2px;border:0}.ui.progress.attached,.ui.progress.attached .bar{display:block;height:4px;padding:0;overflow:hidden;-webkit-border-radius:0 0 .3125em .3125em;-moz-border-radius:0 0 .3125em .3125em;border-radius:0 0 .3125em .3125em}.ui.progress.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui.progress.top.attached,.ui.progress.top.attached .bar{-webkit-border-radius:.3125em .3125em 0 0;-moz-border-radius:.3125em .3125em 0 0;border-radius:.3125em .3125em 0 0}.ui.progress.top.attached .bar{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.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}.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,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));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(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:0 0}100%{background-position:60px 0}}@-moz-keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}@keyframes progress-striped{0%{background-position:0 0}100%{background-position:60px 0}}.ui.small.progress .bar{height:14px}

build/packaged/semantic.min.css.REMOVED.git-id

@@ -1 +1 @@
-c1534e9eabdaeb884b179e580e3844b52eda1dbb
+71729cd7c42ee0fef402c324ea3fa6be7fec3c5f

build/uncompressed/elements/progress.css

@@ -145,6 +145,7 @@
 /*--------------
     Attached
 ---------------*/
+/* bottom attached */
 .ui.progress.attached {
   position: relative;
   top: -2px;
@@ -155,19 +156,28 @@
   display: block;
   height: 4px;
   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.bottom.attached {
-  top: 0px;
+.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 {
   -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
 ---------------*/

node/src/documents/elements/progress.html

@@ -69,7 +69,7 @@ type   : 'UI Element'
   
   <div class="example">
     <h4 class="ui header">Attached</h4>
-    <p>A progress bar can be striped</p>
+    <p>A progress bar can show progress of an element</p>
     <div class="ui top attached progress">
       <div class="bar"></div>
     </div>

node/src/files/components/semantic/elements/progress.css

@@ -145,6 +145,7 @@
 /*--------------
     Attached
 ---------------*/
+/* bottom attached */
 .ui.progress.attached {
   position: relative;
   top: -2px;
@@ -155,19 +156,28 @@
   display: block;
   height: 4px;
   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.bottom.attached {
-  top: 0px;
+.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 {
   -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
 ---------------*/

src/elements/progress.less

@@ -192,6 +192,7 @@
     Attached
 ---------------*/
 
+/* bottom attached */
 .ui.progress.attached {
   position: relative;
   top: -2px;
@@ -202,19 +203,29 @@
   display: block;
   height: 4px;
   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.bottom.attached {
-  top: 0px;
+.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 {
   -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;
+}
 
 
 /*--------------