Fix several issues with shape, but not all..

src/definitions/collections/message.less

@@ -221,6 +221,7 @@
   display: block;
   flex: 0 1 auto;
   width: auto;
+  line-height: 1;
   vertical-align: @iconVerticalAlign;
   font-size: @iconSize;
   opacity: @iconOpacity;

src/definitions/modules/shape.js

@@ -207,15 +207,17 @@ $.fn.shape = function(parameters) {
               : duration
             ;
             module.verbose('Setting animation duration', duration);
-            $sides.add($side)
-              .css({
-                '-webkit-transition-duration': duration,
-                '-moz-transition-duration': duration,
-                '-ms-transition-duration': duration,
-                '-o-transition-duration': duration,
-                'transition-duration': duration
-              })
-            ;
+            if(settings.duration || settings.duration === 0) {
+              $sides.add($side)
+                .css({
+                  '-webkit-transition-duration': duration,
+                  '-moz-transition-duration': duration,
+                  '-ms-transition-duration': duration,
+                  '-o-transition-duration': duration,
+                  'transition-duration': duration
+                })
+              ;
+            }
           },
 
           currentStageSize: function() {
@@ -496,6 +498,11 @@ $.fn.shape = function(parameters) {
               }
             ;
             module.verbose('Setting the initial animation position as above', $nextSide, box);
+            $sides
+              .css({
+                'transform' : 'translateZ(-' + box.depth.active + 'px)'
+              })
+            ;
             $activeSide
               .css({
                 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@@ -522,6 +529,11 @@ $.fn.shape = function(parameters) {
               }
             ;
             module.verbose('Setting the initial animation position as below', $nextSide, box);
+            $sides
+              .css({
+                'transform' : 'translateZ(-' + box.depth.active + 'px)'
+              })
+            ;
             $activeSide
               .css({
                 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@@ -548,6 +560,11 @@ $.fn.shape = function(parameters) {
               }
             ;
             module.verbose('Setting the initial animation position as left', $nextSide, box);
+            $sides
+              .css({
+                'transform' : 'translateZ(-' + box.depth.active + 'px)'
+              })
+            ;
             $activeSide
               .css({
                 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@@ -574,6 +591,11 @@ $.fn.shape = function(parameters) {
               }
             ;
             module.verbose('Setting the initial animation position as left', $nextSide, box);
+            $sides
+              .css({
+                'transform' : 'translateZ(-' + box.depth.active + 'px)'
+              })
+            ;
             $activeSide
               .css({
                 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)'
@@ -819,7 +841,7 @@ $.fn.shape.settings = {
   allowRepeats: false,
 
   // animation duration
-  duration   : 700,
+  duration   : false,
 
   // possible errors
   error: {

src/definitions/modules/shape.less

@@ -26,6 +26,7 @@
 
 .ui.shape {
   position: relative;
+  vertical-align: top;
   display: @display;
   perspective: @perspective;
   transition: @transition;
@@ -40,7 +41,6 @@
   width: 100%;
 
   margin: @sideMargin !important;
-
   backface-visibility: @backfaceVisibility;
 }
 

src/themes/default/collections/message.variables

@@ -16,8 +16,8 @@
 
 @borderRadius: @defaultBorderRadius;
 @borderWidth: 1px;
-@borderShadow: 0px 0px 0px @borderWidth @borderColor inset;
-@shadowShadow: @subtleShadow;
+@borderShadow: 0px 0px 0px @borderWidth @strongBorderColor inset;
+@shadowShadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
 @boxShadow:
   @borderShadow,
   @shadowShadow
@@ -53,7 +53,7 @@
 @iconDistance: 0.6em;
 
 /* Close Icon */
-@closeTopDistance: (1em + @lineHeightOffset);
+@closeTopDistance: @verticalPadding - @lineHeightOffset;
 @closeRightDistance: 0.5em;
 @closeOpacity: 0.7;
 @closeTransition: opacity @defaultDuration @defaultEasing;
@@ -72,7 +72,7 @@
 /* Attached */
 @attachedXOffset: -1px;
 @attachedYOffset: -1px;
-@attachedBoxShadow: 0em 0em 0em @borderWidth rgba(0, 0, 0, 0.1) inset;
+@attachedBoxShadow: 0em 0em 0em @borderWidth @borderColor inset;
 @attachedBottomBoxShadow:
   @attachedBoxShadow,
   @subtleShadow

src/themes/default/modules/shape.variables

@@ -10,14 +10,13 @@
 @duration: 0.6s;
 @easing: ease-in-out;
 
-@hiddenSideOpacity: 0.4;
+@hiddenSideOpacity: 0.6;
 @animatingZIndex: 100;
 
 @transition:
   transform @duration @easing,
   left @duration @easing,
-  width @duration @easing,
-  height @duration @easing,
+  width @duration @easing
 ;
 @sideTransition: opacity @duration @easing;
 @backfaceVisibility: hidden;