adds attached progress bars and striped bar no longer does active animation

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.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{-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.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}

build/uncompressed/elements/progress.css

@@ -142,6 +142,32 @@
 /*******************************
            Variations
 *******************************/
+/*--------------
+    Attached
+---------------*/
+.ui.progress.attached {
+  position: relative;
+  top: -2px;
+  border: none;
+}
+.ui.progress.attached,
+.ui.progress.attached .bar {
+  display: block;
+  height: 4px;
+  padding: 0px;
+  -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.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;
+}
 /*--------------
      Colors
 ---------------*/
@@ -163,9 +189,6 @@
 .ui.teal.progress .bar {
   background-color: #00B5AD;
 }
-/*--------------
-     Attached
----------------*/
 /*--------------
     Striped
 ---------------*/
@@ -180,6 +203,13 @@
   background-image: -o-linear-gradient(135deg, 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);
   background-image: linear-gradient(135deg, 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);
 }
+.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;
@@ -209,3 +239,9 @@
     background-position: 60px 0;
   }
 }
+/*--------------
+     Sizes
+---------------*/
+.ui.small.progress .bar {
+  height: 14px;
+}

build/uncompressed/modules/dropdown.css

@@ -267,7 +267,7 @@
 /* States */
 .ui.pointing.dropdown.visible,
 .ui.pointing.dropdown.visible .menu {
-  -moz-border-radius: 0.325em;
-  -webkit-border-radius: 0.325em;
-  border-radius: 0.325em;
+  -moz-border-radius: 0.325em !important;
+  -webkit-border-radius: 0.325em !important;
+  border-radius: 0.325em !important;
 }

node/src/documents/elements/progress.html

@@ -66,6 +66,22 @@ type   : 'UI Element'
   
   <h2 class="ui dividing header">Variations</h2>
   
+  
+  <div class="example">
+    <h4 class="ui header">Attached</h4>
+    <p>A progress bar can be striped</p>
+    <div class="ui top attached progress">
+      <div class="bar"></div>
+    </div>
+    <div class="ui attached segment">
+      <p>La la la la</p>
+    </div>
+    <div class="ui bottom attached progress">
+      <div class="bar"></div>
+    </div>
+  </div>
+  
+  
   <div class="example">
     <h4 class="ui header">Color</h4>
     <p>Can have different colors:</p>

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

@@ -142,6 +142,32 @@
 /*******************************
            Variations
 *******************************/
+/*--------------
+    Attached
+---------------*/
+.ui.progress.attached {
+  position: relative;
+  top: -2px;
+  border: none;
+}
+.ui.progress.attached,
+.ui.progress.attached .bar {
+  display: block;
+  height: 4px;
+  padding: 0px;
+  -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.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;
+}
 /*--------------
      Colors
 ---------------*/
@@ -163,9 +189,6 @@
 .ui.teal.progress .bar {
   background-color: #00B5AD;
 }
-/*--------------
-     Attached
----------------*/
 /*--------------
     Striped
 ---------------*/
@@ -180,6 +203,13 @@
   background-image: -o-linear-gradient(135deg, 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);
   background-image: linear-gradient(135deg, 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);
 }
+.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;
@@ -209,3 +239,9 @@
     background-position: 60px 0;
   }
 }
+/*--------------
+     Sizes
+---------------*/
+.ui.small.progress .bar {
+  height: 14px;
+}

node/src/files/components/semantic/modules/dropdown.css

@@ -267,7 +267,7 @@
 /* States */
 .ui.pointing.dropdown.visible,
 .ui.pointing.dropdown.visible .menu {
-  -moz-border-radius: 0.325em;
-  -webkit-border-radius: 0.325em;
-  border-radius: 0.325em;
+  -moz-border-radius: 0.325em !important;
+  -webkit-border-radius: 0.325em !important;
+  border-radius: 0.325em !important;
 }

src/elements/progress.less

@@ -187,6 +187,36 @@
            Variations
 *******************************/
 
+
+/*--------------
+    Attached
+---------------*/
+
+.ui.progress.attached {
+  position: relative;
+  top: -2px;
+  border: none;
+}
+.ui.progress.attached,
+.ui.progress.attached .bar {
+  display: block;
+  height: 4px;
+  padding: 0px;
+  -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.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;
+}
+
+
 /*--------------
      Colors
 ---------------*/
@@ -210,10 +240,6 @@
   background-color: #00B5AD;
 }
 
-/*--------------
-     Attached
----------------*/
-
 
 /*--------------
     Striped
@@ -268,6 +294,13 @@
   ;
 }
 
+.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;
@@ -298,3 +331,12 @@
     background-position: 60px 0;
   }
 }
+
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.small.progress .bar {
+  height: 14px;
+}

src/modules/dropdown.less

@@ -341,7 +341,7 @@
 /* States */
 .ui.pointing.dropdown.visible,
 .ui.pointing.dropdown.visible .menu {
-  -moz-border-radius: 0.325em;
-  -webkit-border-radius: 0.325em;
-  border-radius: 0.325em;
+  -moz-border-radius: 0.325em !important;
+  -webkit-border-radius: 0.325em !important;
+  border-radius: 0.325em !important;
 }