studio-ui composer is ready to test actively

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -258,6 +258,39 @@ main[role="main"]{
 //  / _ \ || / _` | / _ \  _/ / _` | || / -_) '_|
 // /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
 //                                  |__/
+@mixin audio_controls {
+  // outline: 1px dotted orange;
+  &>*{
+    display: inline-block;
+    vertical-align: middle;
+    width:20px;height:30px;
+    background-position: center;
+    background-size: contain;
+  }
+  .play-pause{
+    background-image: url(../img/audio-player-play.svg);
+    padding:0 0.3em;
+    cursor: pointer;
+  }
+  &.is-playing{
+    .play-pause{background-image: url(../img/audio-player-pause.svg);}
+  }
+  .previous, .next{
+    opacity: 0.3;
+    transition: opacity 0.3s ease-in-out;
+    cursor: auto;
+    &.is-active{
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
+  .previous{
+    background-image: url(../img/audio-player-previous.svg);
+  }
+  .next{
+    background-image: url(../img/audio-player-next.svg);
+  }
+}
 #audio-player{
   position: absolute;
   top:0; left:0;
@@ -281,34 +314,7 @@ main[role="main"]{
     // outline: 1px solid green;
   }
   .btns{
-    // outline: 1px dotted orange;
-    &>*{
-      display: inline-block;
-      vertical-align: middle;
-      width:20px;height:30px;
-      background-position: center;
-      background-size: contain;
-    }
-    .play-pause{
-      background-image: url(../img/audio-player-play.svg);
-      padding:0 0.3em;
-      cursor: pointer;
-    }
-    .previous, .next{
-      opacity: 0.3;
-      transition: opacity 0.3s ease-in-out;
-      cursor: auto;
-      &.is-active{
-        opacity: 1;
-        cursor: pointer;
-      }
-    }
-    .previous{
-      background-image: url(../img/audio-player-previous.svg);
-    }
-    .next{
-      background-image: url(../img/audio-player-next.svg);
-    }
+    @include audio_controls;
   }
   .time-line-container{
     .time-line{
@@ -413,9 +419,7 @@ main[role="main"]{
       }
     }
   }
-  &.is-playing{
-    .btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
-  }
+
 }
 
 
@@ -473,18 +477,16 @@ main[role="main"]{
 #studio-ui{
   height:100%;
   @mixin draggable_sortable_field__item {
-    // outline: 1px dotted green;
     display: inline-block;
     position: relative;
+    white-space: nowrap;
+    pointer-events: none;
     // margin-right: 25px;
     width:25px;
     height: 100%;
     &.ui-draggable-dragging{
       height:100px;
-      // cursor: grabbing;
     }
-    white-space: nowrap;
-    pointer-events: none;
     opacity: 1;
     transition: opacity 0.1s ease-in-out;
     &.ready-to-remove{
@@ -504,6 +506,7 @@ main[role="main"]{
         margin:0;
         text-transform: none;
         a{
+          white-space: nowrap!important;
           &:before{
             content:"";
             display: inline-block;
@@ -530,6 +533,9 @@ main[role="main"]{
       background-color: white;
       // TODO: entries color;
     }
+    &.is-active .handler{
+      background-color: red;
+    }
   } // end mixin
 
   .chutier_ui{
@@ -652,6 +658,9 @@ main[role="main"]{
               vertical-align: middle;
               margin-right: $m;
             }
+            &.ajax-loading:before{
+              @include spining-loader-square;
+            }
             &.is-active:before{
               background-color: black;
             }
@@ -718,12 +727,18 @@ main[role="main"]{
         $header_height:25px;
         $actions_height:25px;
         $padding:5px;
+        opacity:1;
+        transition: opacity 0.3s ease-in-out;
+        &.ajax-loading{
+          opacity:0.3;
+        }
         >*{
           box-sizing: border-box;
         }
         >header{
           height:$header_height;
           padding-bottom:$padding;
+          font-size: 0.756em;
         }
         >.composition{
           position: relative;
@@ -772,10 +787,14 @@ main[role="main"]{
           padding-top:$padding;
           height:$actions_height;
           // outline: 1px solid blue;
+          .compo-player-controls{
+            @include audio_controls;
+          }
         }
       }
     }
   }
+
   // drag and drop specifics
   // created by js
   .field__item.ui-draggable-dragging{