Various merge conflicts

Author: aaronshekey

lib/css/exports/_stacks-constants-helpers.less

@@ -16,12 +16,8 @@
 //  • spacing units (su-)
 //  • transition easings (te-)
 //
-//  ============================================================================
-//  $   Z-INDEX (zi-)
-//      Used for a bird's eye view of components dependent on the z-axis.
-//      Try to avoid customizing these.
-//  ----------------------------------------------------------------------------
 body {
+    // Z-Index
     --zi-hide:               -1;     //  Hide something all the elements
     --zi-base:               0;      //  Reset to 0
     --zi-selected:           25;     //  Pop above siblings
@@ -34,6 +30,25 @@ body {
     --zi-navigation-fixed:   5050;   //  Fixed navigation bars
     --zi-modals-background:  8050;   //  Modals background
     --zi-modals:             9000;   //  Modals
+
+    // Border Radius
+    --br-sm:                 3px;
+    --br-md:                 5px;
+    --br-lg:                 7px;
+    --br-circle:             50%;
+
+    // Transition easings
+    --te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad
+    --te-smooth:             cubic-bezier(0.165, 0.84, 0.44, 1);         // easeOutQuart
+    --te-smooth-quick:       cubic-bezier(0.19, 1, 0.22, 1);             // easeOutExpo
+    --te-back-out:           cubic-bezier(0.175, 0.885, 0.32, 1.275);    // easeOutBack
+    --te-back-in-out:        cubic-bezier(0.68, -0.55, 0.265, 1.55);     // easeInOutBack
+    --te-ease-in:            cubic-bezier(0.47, 0, 0.745, 0.715);        // easeIn
+    --te-ease-in-out:        cubic-bezier(0.445, 0.05, 0.55, 0.95);      // easeInOut
+    --te-ease-out:           cubic-bezier(0.39, 0.575, 0.565, 1);        // easeOut
+
+    --default-transition-duration:       0.1s;
+    --transition-time:                   var(--default-transition-duration);
 }
 
 //  ============================================================================
@@ -43,14 +58,6 @@ body {
 @breakpoint-md: 980px;
 @breakpoint-sm: 640px;
 
-//  ============================================================================
-//  $   BORDER RADIUS (br-)
-//  ----------------------------------------------------------------------------
-@br-sm:                 3px;
-@br-md:                 5px;
-@br-lg:                 7px;
-@br-circle:             50%;
-
 //  ============================================================================
 //  $  SPACING UNITS (su-)
 //  ----------------------------------------------------------------------------
@@ -75,26 +82,6 @@ body {
 @s-full: 97.2307692rem; // Based on a pixel size of 1264px;
 @s-step: (@s-full / 12);
 
-// TODO These helpers allow us to create our own timing functions with
-// cubic-bezier ~ but perhaps the default timing functions are acceptable?
-
-//  ============================================================================
-//  $   TRANSITION EASINGS (te-)
-//  ----------------------------------------------------------------------------
-body {
-    --te-smooth-slow:        cubic-bezier(0.25, 0.46, 0.45, 0.94);       // easeOutQuad
-    --te-smooth:             cubic-bezier(0.165, 0.84, 0.44, 1);         // easeOutQuart
-    --te-smooth-quick:       cubic-bezier(0.19, 1, 0.22, 1);             // easeOutExpo
-    --te-back-out:           cubic-bezier(0.175, 0.885, 0.32, 1.275);    // easeOutBack
-    --te-back-in-out:        cubic-bezier(0.68, -0.55, 0.265, 1.55);     // easeInOutBack
-    --te-ease-in:            cubic-bezier(0.47, 0, 0.745, 0.715);        // easeIn
-    --te-ease-in-out:        cubic-bezier(0.445, 0.05, 0.55, 0.95);      // easeInOut
-    --te-ease-out:           cubic-bezier(0.39, 0.575, 0.565, 1);        // easeOut
-
-    --default-transition-duration:       0.1s;
-    --transition-time:                   var(--default-transition-duration);
-}
-
 //  ============================================================================
 //  $   SCROLLBAR STYLING
 //  ----------------------------------------------------------------------------