Update layouts

Author: takumagott

Atlas_UI_Reference_App.mpr

@@ -1,2 +1,2 @@
 // THIS FILE IS AUTO-GENERATED. PLEASE DO NOT MODIFY THIS FILE.
-$use-modern-client: false;
+$use-modern-client: true;

mprcontents/01/65/0165ff25-8997-44d0-92e3-5d4c9a76d2a8.mxunit

@@ -210,7 +210,7 @@
         pointer-events: auto;
     }
 
-    .mx-scrollcontainer-center {
+    .mx-scrollcontainer-middle {
         .mx-layoutgrid,
         .mx-layoutgrid-fluid {
             @include layout-spacing($type: padding, $direction: all, $device: responsive);

mprcontents/01/b8/01b87e13-7552-4fa2-809a-b8cd5f5ddf6c.mxunit

@@ -4,12 +4,14 @@
    Extra styling for responsive layouts
 ========================================================================== */
 @mixin layout-atlas-responsive() {
-    $sidebar-icon-height: 52px;
-    $sidebar-icon-width: 52px;
+    :root {
+        --sidebar-icon-height: 52px;
+        --sidebar-icon-width: 52px;
+    }
 
     .layout-atlas-responsive,
     .layout-atlas-responsive-default,
-    .layout-atlas-responsive-sidebar{
+    .layout-atlas-responsive-sidebar {
         @media (min-width: $screen-md) {
             --closed-sidebar-width: var(--navsidebar-width-closed);
             .mx-scrollcontainer-shrink:not(.mx-scrollcontainer-open) > .region-sidebar,
@@ -29,7 +31,7 @@
                         z-index: 100;
                         top: var(--topbar-minimalheight);
                         bottom: 0;
-                        left: $sidebar-icon-width;
+                        left: var(--sidebar-icon-width);
                         display: block;
                         min-width: auto;
                         padding: var(--spacing-small) 0;
@@ -57,7 +59,7 @@
                             z-index: 100;
                             top: 0;
                             bottom: 0;
-                            left: $sidebar-icon-width;
+                            left: var(--sidebar-icon-width);
                             display: block;
                             overflow-y: auto;
                             min-width: auto;
@@ -111,7 +113,7 @@
         // Sidebar
         .region-sidebar {
             .toggle-btn {
-                width: $sidebar-icon-width;
+                width: var(--sidebar-icon-width);
                 border-color: transparent;
                 border-radius: 0;
                 background: transparent;
@@ -160,6 +162,10 @@
                             padding: var(--spacing-small) var(--spacing-medium);
                             border-radius: var(--border-radius-default);
                         }
+                        img {
+                            width: var(--sidebar-icon-width);
+                            padding: var(--spacing-small) var(--spacing-medium);
+                        }
                     }
                 }
             }
@@ -253,7 +259,7 @@
             &.mx-scrollcontainer-open {
                 .region-sidebar:hover {
                     .toggle-btn-sidebar {
-                        left: calc(var(--navsidebar-width-open) - $icon-size / 2);
+                        left: calc(var(--sidebar-size, var(--navsidebar-width-open)) - $icon-size / 2);
                         rotate: 180deg;
                     }
                 }

mprcontents/07/f2/07f21fda-8217-4ac3-94f1-7040c060d89f.mxunit

@@ -1,9 +1,10 @@
 // Default variables
-@import "exclusion-variables";
+@import "exclusion-variables-defaults";
 @import "../../../theme/web/exclusion-variables";
+@import "generated-exclusion-variables";
 @import "variables";
 @import "../../../theme/web/custom-variables";
-@import "themes/legacy-variables/css-variables-mappings"; // support for custom sass variable
+@import "themes/legacy-variables/css-variables-mappings";
 
 // Font Family Import
 @if $font-family-import != false {