Themes shapes

src/definitions/modules/shape.less

@@ -25,12 +25,9 @@
 *******************************/
 
 .ui.shape {
-  display: inline-block;
   position: relative;
-
-  perspective: 2000px;
-  box-sizing: border-box;
-
+  display: @display;
+  perspective: @perspective;
 }
 
 .ui.shape .sides {
@@ -41,10 +38,9 @@
   opacity: 1;
   width: 100%;
 
-  margin: 0em !important;
+  margin: @sideMargin !important;
 
-  backface-visibility: hidden;
-  box-sizing: border-box;
+  backface-visibility: @backfaceVisibility;
 }
 
 .ui.shape .side {
@@ -57,27 +53,27 @@
 *******************************/
 
 .ui.cube.shape .side {
-  min-width: 15em;
-  height: 15em;
+  min-width: @cubeSize;
+  height: @cubeSize;
 
-  padding: 2em;
+  padding: @cubePadding;
 
-  background-color: #E6E6E6;
-  color: rgba(0, 0, 0, 0.6);
-  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+  background-color: @cubeBackground;
+  color: @cubeTextColor;
+  box-shadow: @cubeBoxShadow;
 }
 .ui.cube.shape .side > .content {
   width: 100%;
   height: 100%;
   display: table;
 
-  text-align: center;
+  text-align: @cubeTextAlign;
   user-select: text;
 }
 .ui.cube.shape .side > .content > div {
   display: table-cell;
   vertical-align: middle;
-  font-size: 2em;
+  font-size: @cubeFontSize;
 }
 
 /*******************************
@@ -118,10 +114,10 @@
   position: absolute;
   top: 0px;
   left: 0px;
-  z-index: 100;
+  z-index: @animatingZIndex;
 }
 .ui.shape .hidden.side {
-  opacity: 0.4;
+  opacity: @hiddenSideOpacity;
 }
 
 
@@ -130,21 +126,18 @@
 ---------------*/
 
 .ui.shape.animating {
-  transition:
-    all 0.6s ease-in-out;
-  ;
+  transition: @transition;
 }
 .ui.shape.animating .sides {
   position: absolute;
 }
 .ui.shape.animating .sides {
-  transition: all 0.6s ease-in-out;
+  transition: @transition;
 }
 .ui.shape.animating .side {
-  transition: opacity 0.6s ease-in-out;
+  transition: @sideTransition;
 }
 
-
 /*--------------
      Active
 ---------------*/

src/themes/packages/default/modules/shape.variables

@@ -1,3 +1,35 @@
 /*******************************
              Shape
-*******************************/
+*******************************/
+
+@display: inline-block;
+
+/* Animating */
+@perspective: 2000px;
+
+@duration: 0.6s;
+@easing: ease-in-out;
+
+@hiddenSideOpacity: 0.4;
+@animatingZIndex: 100;
+
+@transition: all @duration @easing;
+@sideTransition: opacity @duration @easing;
+@backfaceVisibility: hidden;
+
+/* Side */
+@sideMargin: 0em;
+
+/*--------------
+      Types
+---------------*/
+
+/* Cube */
+@cubeSize: 15em;
+@cubeBackground: #E6E6E6;
+@cubePadding: 2em;
+@cubeTextColor: @textColor;
+@cubeBoxShadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
+
+@cubeTextAlign: center;
+@cubeFontSize: 2em;