From bb6d0b5a80df370a856bea8d060ae42726899568 Mon Sep 17 00:00:00 2001
From: GulomovCreative <gulomovcreative@gmail.com>
Date: Wed, 6 Mar 2019 11:01:35 +0300
Subject: [PATCH 01/12] Using a single pattern for action buttons like a
 resource

---
 .../modext/sections/element/chunk/create.js   | 38 ++++++--
 .../modext/sections/element/chunk/update.js   | 86 ++++++++++++-------
 .../modext/sections/element/plugin/create.js  | 38 ++++++--
 .../modext/sections/element/plugin/update.js  | 86 ++++++++++++-------
 .../modext/sections/element/snippet/create.js | 40 +++++++--
 .../modext/sections/element/snippet/update.js | 86 ++++++++++++-------
 .../sections/element/template/create.js       | 38 ++++++--
 .../sections/element/template/update.js       | 86 ++++++++++++-------
 .../modext/sections/element/tv/create.js      | 38 ++++++--
 .../modext/sections/element/tv/update.js      | 86 ++++++++++++-------
 10 files changed, 436 insertions(+), 186 deletions(-)

diff --git a/manager/assets/modext/sections/element/chunk/create.js b/manager/assets/modext/sections/element/chunk/create.js
index c8b1b93e0a8..167cb65d57b 100644
--- a/manager/assets/modext/sections/element/chunk/create.js
+++ b/manager/assets/modext/sections/element/chunk/create.js
@@ -11,9 +11,38 @@ MODx.page.CreateChunk = function(config) {
     Ext.applyIf(config,{
         formpanel: 'modx-panel-chunk'
         ,buttons: [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: [{
+                    text: _('cancel') + ' <i class="icon icon-times"></i>'
+                    ,id: 'modx-abtn-cancel'
+                    ,handler: function() {
+                        MODx.loadPage('?');
+                    }
+                },{
+                    text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+                    ,id: 'modx-abtn-help'
+                    ,handler: MODx.loadHelpPane
+                }]
+            }
+        },{
             process: 'element/chunk/create'
             ,reload: true
-            ,text: _('save')
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
             ,id: 'modx-abtn-save'
             ,cls: 'primary-button'
             ,method: 'remote'
@@ -22,13 +51,6 @@ MODx.page.CreateChunk = function(config) {
                 key: MODx.config.keymap_save || 's'
                 ,ctrl: true
             }]
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
         }]
         ,components: [{
             xtype: 'modx-panel-chunk'
diff --git a/manager/assets/modext/sections/element/chunk/update.js b/manager/assets/modext/sections/element/chunk/update.js
index 8c8f8c8c07e..164fdf707cd 100644
--- a/manager/assets/modext/sections/element/chunk/update.js
+++ b/manager/assets/modext/sections/element/chunk/update.js
@@ -10,35 +10,7 @@ MODx.page.UpdateChunk = function(config) {
     config = config || {};
     Ext.applyIf(config,{
         formpanel: 'modx-panel-chunk'
-        ,buttons: [{
-            process: 'element/chunk/update'
-            ,text: _('save')
-            ,id: 'modx-abtn-save'
-            ,cls: 'primary-button'
-            ,method: 'remote'
-            // ,checkDirty: true
-            ,keys: [{
-                key: MODx.config.keymap_save || 's'
-                ,ctrl: true
-            }]
-        },{
-            text: _('delete')
-            ,id: 'modx-abtn-delete'
-            ,handler: this.delete
-            ,scope: this
-        },{
-            text: _('duplicate')
-            ,id: 'modx-abtn-duplicate'
-            ,handler: this.duplicate
-            ,scope: this
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
-        }]
+        ,buttons: this.getButtons(config)
         ,components: [{
             xtype: 'modx-panel-chunk'
             ,renderTo: 'modx-panel-chunk-div'
@@ -97,5 +69,61 @@ Ext.extend(MODx.page.UpdateChunk,MODx.Component, {
             }
         });
     }
+    ,getButtons: function(config) {
+        var config = config || {};
+
+        var menu = [{
+            text: _('duplicate') + ' <i class="icon icon-copy"></i>'
+            ,id: 'modx-abtn-duplicate'
+            ,handler: this.duplicate
+            ,scope: this
+        },{
+            text: _('delete') + ' <i class="icon icon-trash-o"></i>'
+            ,id: 'modx-abtn-delete'
+            ,handler: this.delete
+            ,scope: this
+        },{
+            text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+            ,id: 'modx-abtn-help'
+            ,handler: MODx.loadHelpPane
+        }]
+
+        var btns = [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: menu
+            }
+        },{
+            text: _('cancel') + ' <i class="icon icon-times"></i>'
+            ,id: 'modx-abtn-cancel'
+        },{
+            process: 'element/chunk/update'
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
+            ,id: 'modx-abtn-save'
+            ,cls: 'primary-button'
+            ,method: 'remote'
+            // ,checkDirty: true
+            ,keys: [{
+                key: MODx.config.keymap_save || 's'
+                ,ctrl: true
+            }]
+        }]
+
+        return btns;
+    }
 });
 Ext.reg('modx-page-chunk-update',MODx.page.UpdateChunk);
diff --git a/manager/assets/modext/sections/element/plugin/create.js b/manager/assets/modext/sections/element/plugin/create.js
index edc8465541f..48f6391de52 100644
--- a/manager/assets/modext/sections/element/plugin/create.js
+++ b/manager/assets/modext/sections/element/plugin/create.js
@@ -11,9 +11,38 @@ MODx.page.CreatePlugin = function(config) {
     Ext.applyIf(config,{
         formpanel: 'modx-panel-plugin'
         ,buttons: [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: [{
+                    text: _('cancel') + ' <i class="icon icon-times"></i>'
+                    ,id: 'modx-abtn-cancel'
+                    ,handler: function() {
+                        MODx.loadPage('?');
+                    }
+                },{
+                    text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+                    ,id: 'modx-abtn-help'
+                    ,handler: MODx.loadHelpPane
+                }]
+            }
+        },{
             process: 'element/plugin/create'
             ,reload: true
-            ,text: _('save')
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
             ,id: 'modx-abtn-save'
             ,cls: 'primary-button'
             ,method: 'remote'
@@ -22,13 +51,6 @@ MODx.page.CreatePlugin = function(config) {
                 key: MODx.config.keymap_save || 's'
                 ,ctrl: true
             }]
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
         }]
         ,components: [{
             xtype: 'modx-panel-plugin'
diff --git a/manager/assets/modext/sections/element/plugin/update.js b/manager/assets/modext/sections/element/plugin/update.js
index f9799a933dd..b184a5ebc6e 100644
--- a/manager/assets/modext/sections/element/plugin/update.js
+++ b/manager/assets/modext/sections/element/plugin/update.js
@@ -10,35 +10,7 @@ MODx.page.UpdatePlugin = function(config) {
     config = config || {};
     Ext.applyIf(config,{
         formpanel: 'modx-panel-plugin'
-        ,buttons: [{
-            process: 'element/plugin/update'
-            ,text: _('save')
-            ,id: 'modx-abtn-save'
-            ,cls: 'primary-button'
-            ,method: 'remote'
-            // ,checkDirty: true
-            ,keys: [{
-                key: MODx.config.keymap_save || 's'
-                ,ctrl: true
-            }]
-        },{
-            text: _('delete')
-            ,id: 'modx-abtn-delete'
-            ,handler: this.delete
-            ,scope: this
-        },{
-            text: _('duplicate')
-            ,id: 'modx-abtn-duplicate'
-            ,handler: this.duplicate
-            ,scope: this
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
-        }]
+        ,buttons: this.getButtons(config)
         ,components: [{
             xtype: 'modx-panel-plugin'
             ,renderTo: 'modx-panel-plugin-div'
@@ -97,5 +69,61 @@ Ext.extend(MODx.page.UpdatePlugin,MODx.Component, {
             }
         });
     }
+    ,getButtons: function(config) {
+        var config = config || {};
+
+        var menu = [{
+            text: _('duplicate') + ' <i class="icon icon-copy"></i>'
+            ,id: 'modx-abtn-duplicate'
+            ,handler: this.duplicate
+            ,scope: this
+        },{
+            text: _('delete') + ' <i class="icon icon-trash-o"></i>'
+            ,id: 'modx-abtn-delete'
+            ,handler: this.delete
+            ,scope: this
+        },{
+            text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+            ,id: 'modx-abtn-help'
+            ,handler: MODx.loadHelpPane
+        }]
+
+        var btns = [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: menu
+            }
+        },{
+            text: _('cancel') + ' <i class="icon icon-times"></i>'
+            ,id: 'modx-abtn-cancel'
+        },{
+            process: 'element/plugin/update'
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
+            ,id: 'modx-abtn-save'
+            ,cls: 'primary-button'
+            ,method: 'remote'
+            // ,checkDirty: true
+            ,keys: [{
+                key: MODx.config.keymap_save || 's'
+                ,ctrl: true
+            }]
+        }]
+
+        return btns;
+    }
 });
 Ext.reg('modx-page-plugin-update',MODx.page.UpdatePlugin);
diff --git a/manager/assets/modext/sections/element/snippet/create.js b/manager/assets/modext/sections/element/snippet/create.js
index adee67a3e41..c53808696b6 100644
--- a/manager/assets/modext/sections/element/snippet/create.js
+++ b/manager/assets/modext/sections/element/snippet/create.js
@@ -11,24 +11,46 @@ MODx.page.CreateSnippet = function(config) {
     Ext.applyIf(config,{
         formpanel: 'modx-panel-snippet'
         ,buttons: [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: [{
+                    text: _('cancel') + ' <i class="icon icon-times"></i>'
+                    ,id: 'modx-abtn-cancel'
+                    ,handler: function() {
+                        MODx.loadPage('?');
+                    }
+                },{
+                    text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+                    ,id: 'modx-abtn-help'
+                    ,handler: MODx.loadHelpPane
+                }]
+            }
+        },{
             process: 'element/snippet/create'
             ,reload: true
-            ,text: _('save')
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
             ,id: 'modx-abtn-save'
             ,cls: 'primary-button'
             ,method: 'remote'
             // ,checkDirty: true
             ,keys: [{
-                key: MODx.config.keymap_save || "s"
+                key: MODx.config.keymap_save || 's'
                 ,ctrl: true
             }]
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
         }]
         ,components: [{
             xtype: 'modx-panel-snippet'
diff --git a/manager/assets/modext/sections/element/snippet/update.js b/manager/assets/modext/sections/element/snippet/update.js
index 981efaddbcc..d868e174acf 100644
--- a/manager/assets/modext/sections/element/snippet/update.js
+++ b/manager/assets/modext/sections/element/snippet/update.js
@@ -10,35 +10,7 @@ MODx.page.UpdateSnippet = function(config) {
     config = config || {};
     Ext.applyIf(config,{
         formpanel: 'modx-panel-snippet'
-        ,buttons: [{
-            process: 'element/snippet/update'
-            ,text: _('save')
-            ,id: 'modx-abtn-save'
-            ,cls: 'primary-button'
-            ,method: 'remote'
-            // ,checkDirty: true
-            ,keys: [{
-                key: MODx.config.keymap_save || 's'
-                ,ctrl: true
-            }]
-        },{
-            text: _('delete')
-            ,id: 'modx-abtn-delete'
-            ,handler: this.delete
-            ,scope: this
-        },{
-            text: _('duplicate')
-            ,id: 'modx-abtn-duplicate'
-            ,handler: this.duplicate
-            ,scope: this
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
-        }]
+        ,buttons: this.getButtons(config)
         ,components: [{
             xtype: 'modx-panel-snippet'
             ,renderTo: 'modx-panel-snippet-div'
@@ -97,5 +69,61 @@ Ext.extend(MODx.page.UpdateSnippet,MODx.Component, {
             }
         });
     }
+    ,getButtons: function(config) {
+        var config = config || {};
+
+        var menu = [{
+            text: _('duplicate') + ' <i class="icon icon-copy"></i>'
+            ,id: 'modx-abtn-duplicate'
+            ,handler: this.duplicate
+            ,scope: this
+        },{
+            text: _('delete') + ' <i class="icon icon-trash-o"></i>'
+            ,id: 'modx-abtn-delete'
+            ,handler: this.delete
+            ,scope: this
+        },{
+            text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+            ,id: 'modx-abtn-help'
+            ,handler: MODx.loadHelpPane
+        }]
+
+        var btns = [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: menu
+            }
+        },{
+            text: _('cancel') + ' <i class="icon icon-times"></i>'
+            ,id: 'modx-abtn-cancel'
+        },{
+            process: 'element/snippet/update'
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
+            ,id: 'modx-abtn-save'
+            ,cls: 'primary-button'
+            ,method: 'remote'
+            // ,checkDirty: true
+            ,keys: [{
+                key: MODx.config.keymap_save || 's'
+                ,ctrl: true
+            }]
+        }]
+
+        return btns;
+    }
 });
 Ext.reg('modx-page-snippet-update',MODx.page.UpdateSnippet);
diff --git a/manager/assets/modext/sections/element/template/create.js b/manager/assets/modext/sections/element/template/create.js
index 329346a336f..ca0eb84ecb8 100644
--- a/manager/assets/modext/sections/element/template/create.js
+++ b/manager/assets/modext/sections/element/template/create.js
@@ -11,9 +11,38 @@ MODx.page.CreateTemplate = function(config) {
     Ext.applyIf(config,{
         formpanel: 'modx-panel-template'
         ,buttons: [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: [{
+                    text: _('cancel') + ' <i class="icon icon-times"></i>'
+                    ,id: 'modx-abtn-cancel'
+                    ,handler: function() {
+                        MODx.loadPage('?');
+                    }
+                },{
+                    text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+                    ,id: 'modx-abtn-help'
+                    ,handler: MODx.loadHelpPane
+                }]
+            }
+        },{
             process: 'element/template/create'
             ,reload: true
-            ,text: _('save')
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
             ,id: 'modx-abtn-save'
             ,cls: 'primary-button'
             ,method: 'remote'
@@ -22,13 +51,6 @@ MODx.page.CreateTemplate = function(config) {
                 key: MODx.config.keymap_save || 's'
                 ,ctrl: true
             }]
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
         }]
         ,components: [{
             xtype: 'modx-panel-template'
diff --git a/manager/assets/modext/sections/element/template/update.js b/manager/assets/modext/sections/element/template/update.js
index e9482cb06ff..4ab25b63a3f 100644
--- a/manager/assets/modext/sections/element/template/update.js
+++ b/manager/assets/modext/sections/element/template/update.js
@@ -10,35 +10,7 @@ MODx.page.UpdateTemplate = function(config) {
     config = config || {};
     Ext.applyIf(config,{
         formpanel: 'modx-panel-template'
-        ,buttons: [{
-            process: 'element/template/update'
-            ,text: _('save')
-            ,id: 'modx-abtn-save'
-            ,cls: 'primary-button'
-            ,method: 'remote'
-            // ,checkDirty: true
-            ,keys: [{
-                key: MODx.config.keymap_save || 's'
-                ,ctrl: true
-            }]
-        },{
-            text: _('delete')
-            ,id: 'modx-abtn-delete'
-            ,handler: this.delete
-            ,scope: this
-        },{
-            text: _('duplicate')
-            ,id: 'modx-abtn-duplicate'
-            ,handler: this.duplicate
-            ,scope: this
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
-        }]
+        ,buttons: this.getButtons(config)
         ,components: [{
             xtype: 'modx-panel-template'
             ,renderTo: 'modx-panel-template-div'
@@ -97,5 +69,61 @@ Ext.extend(MODx.page.UpdateTemplate,MODx.Component, {
             }
         });
     }
+    ,getButtons: function(config) {
+        var config = config || {};
+
+        var menu = [{
+            text: _('duplicate') + ' <i class="icon icon-copy"></i>'
+            ,id: 'modx-abtn-duplicate'
+            ,handler: this.duplicate
+            ,scope: this
+        },{
+            text: _('delete') + ' <i class="icon icon-trash-o"></i>'
+            ,id: 'modx-abtn-delete'
+            ,handler: this.delete
+            ,scope: this
+        },{
+            text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+            ,id: 'modx-abtn-help'
+            ,handler: MODx.loadHelpPane
+        }]
+
+        var btns = [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: menu
+            }
+        },{
+            text: _('cancel') + ' <i class="icon icon-times"></i>'
+            ,id: 'modx-abtn-cancel'
+        },{
+            process: 'element/template/update'
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
+            ,id: 'modx-abtn-save'
+            ,cls: 'primary-button'
+            ,method: 'remote'
+            // ,checkDirty: true
+            ,keys: [{
+                key: MODx.config.keymap_save || 's'
+                ,ctrl: true
+            }]
+        }]
+
+        return btns;
+    }
 });
 Ext.reg('modx-page-template-update',MODx.page.UpdateTemplate);
diff --git a/manager/assets/modext/sections/element/tv/create.js b/manager/assets/modext/sections/element/tv/create.js
index 283c1e86105..5ae55236cbe 100644
--- a/manager/assets/modext/sections/element/tv/create.js
+++ b/manager/assets/modext/sections/element/tv/create.js
@@ -11,9 +11,38 @@ MODx.page.CreateTV = function(config) {
     Ext.applyIf(config,{
         formpanel: 'modx-panel-tv'
         ,buttons: [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: [{
+                    text: _('cancel') + ' <i class="icon icon-times"></i>'
+                    ,id: 'modx-abtn-cancel'
+                    ,handler: function() {
+                        MODx.loadPage('?');
+                    }
+                },{
+                    text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+                    ,id: 'modx-abtn-help'
+                    ,handler: MODx.loadHelpPane
+                }]
+            }
+        },{
             process: 'element/tv/create'
             ,reload: true
-            ,text: _('save')
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
             ,id: 'modx-abtn-save'
             ,cls: 'primary-button'
             ,method: 'remote'
@@ -22,13 +51,6 @@ MODx.page.CreateTV = function(config) {
                 key: MODx.config.keymap_save || 's'
                 ,ctrl: true
             }]
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
         }]
         ,components: [{
             xtype: 'modx-panel-tv'
diff --git a/manager/assets/modext/sections/element/tv/update.js b/manager/assets/modext/sections/element/tv/update.js
index d41e93c51b0..a9765f24b14 100644
--- a/manager/assets/modext/sections/element/tv/update.js
+++ b/manager/assets/modext/sections/element/tv/update.js
@@ -10,35 +10,7 @@ MODx.page.UpdateTV = function(config) {
     config = config || {};
     Ext.applyIf(config,{
         formpanel: 'modx-panel-tv'
-        ,buttons: [{
-            process: 'element/tv/update'
-            ,text: _('save')
-            ,id: 'modx-abtn-save'
-            ,cls: 'primary-button'
-            ,method: 'remote'
-            // ,checkDirty: true
-            ,keys: [{
-                key: MODx.config.keymap_save || 's'
-                ,ctrl: true
-            }]
-        },{
-            text: _('delete')
-            ,id: 'modx-abtn-delete'
-            ,handler: this.delete
-            ,scope: this
-        },{
-            text: _('duplicate')
-            ,id: 'modx-abtn-duplicate'
-            ,handler: this.duplicate
-            ,scope: this
-        },{
-            text: _('cancel')
-            ,id: 'modx-abtn-cancel'
-        },{
-            text: _('help_ex')
-            ,id: 'modx-abtn-help'
-            ,handler: MODx.loadHelpPane
-        }]
+        ,buttons: this.getButtons(config)
         ,components: [{
             xtype: 'modx-panel-tv'
             ,renderTo: 'modx-panel-tv-div'
@@ -98,5 +70,61 @@ Ext.extend(MODx.page.UpdateTV,MODx.Component, {
             }
         });
     }
+    ,getButtons: function(config) {
+        var config = config || {};
+
+        var menu = [{
+            text: _('duplicate') + ' <i class="icon icon-copy"></i>'
+            ,id: 'modx-abtn-duplicate'
+            ,handler: this.duplicate
+            ,scope: this
+        },{
+            text: _('delete') + ' <i class="icon icon-trash-o"></i>'
+            ,id: 'modx-abtn-delete'
+            ,handler: this.delete
+            ,scope: this
+        },{
+            text: _('help_ex') + ' <i class="icon icon-question-circle"></i>'
+            ,id: 'modx-abtn-help'
+            ,handler: MODx.loadHelpPane
+        }]
+
+        var btns = [{
+            text: '<i class="icon icon-ellipsis-h"></i>'
+            ,id: 'modx-abtn-menu'
+            ,xtype: 'splitbutton'
+            ,split: false
+            ,arrowSelector: false
+            ,handler: function(btn, e) {
+                if (!btn.menu.isVisible() && !btn.ignoreNextClick) {
+                    btn.showMenu();
+                }
+                btn.fireEvent('arrowclick', btn, e);
+                if (btn.arrowHandler) {
+                    btn.arrowHandler.call(btn.scope || btn, btn, e);
+                }
+            }
+            ,menu: {
+                id: 'modx-abtn-menu-list'
+                ,items: menu
+            }
+        },{
+            text: _('cancel') + ' <i class="icon icon-times"></i>'
+            ,id: 'modx-abtn-cancel'
+        },{
+            process: 'element/tv/update'
+            ,text: _('save') + ' <i class="icon icon-check"></i>'
+            ,id: 'modx-abtn-save'
+            ,cls: 'primary-button'
+            ,method: 'remote'
+            // ,checkDirty: true
+            ,keys: [{
+                key: MODx.config.keymap_save || 's'
+                ,ctrl: true
+            }]
+        }]
+
+        return btns;
+    }
 });
 Ext.reg('modx-page-tv-update',MODx.page.UpdateTV);

From 76762dcf711fc21265691d2833767fa258bfd98d Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Sun, 17 Mar 2019 05:23:42 +0600
Subject: [PATCH 02/12] Refactoring styles

---
 .../templates/default/sass/_breadcrumbs.scss  |  40 +-
 _build/templates/default/sass/_browser.scss   | 137 +--
 _build/templates/default/sass/_buttons.scss   | 361 +++----
 .../default/sass/_colors-and-vars.scss        |  17 +-
 _build/templates/default/sass/_dashboard.scss | 125 ++-
 _build/templates/default/sass/_forms.scss     | 376 +++++---
 _build/templates/default/sass/_help.scss      |  35 +-
 _build/templates/default/sass/_image-set.scss |   2 +-
 _build/templates/default/sass/_navbar.scss    | 110 ++-
 _build/templates/default/sass/_tabs.scss      |  48 +-
 _build/templates/default/sass/_toolbars.scss  |  80 +-
 _build/templates/default/sass/_trash.scss     |   8 +-
 _build/templates/default/sass/_tree.scss      | 314 ++++--
 _build/templates/default/sass/_uberbar.scss   |  38 +-
 _build/templates/default/sass/_utility.scss   | 159 +--
 _build/templates/default/sass/_windows.scss   | 139 +--
 .../templates/default/sass/_xtheme-modx.scss  | 592 ++++++++----
 .../sass/components/_primary-button.scss      |   2 +-
 .../sass/components/_secondary-button.scss    |   2 +-
 _build/templates/default/sass/index.scss      | 907 ++++++++++++------
 _build/templates/default/sass/login.scss      |  35 +-
 21 files changed, 2266 insertions(+), 1261 deletions(-)

diff --git a/_build/templates/default/sass/_breadcrumbs.scss b/_build/templates/default/sass/_breadcrumbs.scss
index fe1a2ef36d7..af8628c9da2 100644
--- a/_build/templates/default/sass/_breadcrumbs.scss
+++ b/_build/templates/default/sass/_breadcrumbs.scss
@@ -2,6 +2,7 @@
 .breadcrumbs .panel-desc {
   margin-top: 0;
 }
+
 .crumb_wrapper {
   background: $lightestGray;
   border-bottom: 1px solid $borderColor;
@@ -33,7 +34,8 @@
       }*/
 
       &.first {
-        padding: 0; /* neutralize the normal li padding and give it to the inner element */
+        padding: 0;
+        /* neutralize the normal li padding and give it to the inner element */
 
         /* the home breadcrumb with the house icon */
         &:before {
@@ -44,7 +46,9 @@
           display: inline-block;
           font-size: 20px;
           line-height: 34px;
-          position: absolute; top: 0; left: 6px;
+          position: absolute;
+          top: 0;
+          left: 6px;
           text-align: center;
           text-indent: 0;
           z-index: 2; /* put the icon above the triangle :after element */
@@ -91,8 +95,9 @@
         position: absolute;
         top: 50%;
         margin-top: -50px;*/
-        /*margin-left: 1px;*/ /* uncomment to make the line thicker */
-        /*left: 100%;
+      /*margin-left: 1px;*/
+      /* uncomment to make the line thicker */
+      /*left: 100%;
         z-index: 1;
       }*/
 
@@ -118,19 +123,12 @@
           background-color: $colorSplash;
         }
 
-        + li span:before,
-        + li button:before {
+        +li span:before,
+        +li button:before {
           border-left-color: $colorSplash;
         }
       }
 
-      &:hover:after {
-        /*border-left-color: $colorSplash;*/
-      }
-      &:hover:before {
-        /*border-left-color: $white;*/
-      }
-
       button {
         background-color: transparent;
         border: 0;
@@ -160,15 +158,18 @@
           display: inline-block;
           width: 0;
           height: 0;
-          border-top: 50px solid rgba(0,0,0,0); /* no transparent, breaks anti-aliasing in FF */
-          border-bottom: 50px solid rgba(0,0,0,0);/* no transparent, breaks anti-aliasing in FF */
+          border-top: 50px solid rgba(0, 0, 0, 0); /* no transparent, breaks anti-aliasing in FF */
+          border-bottom: 50px solid rgba(0, 0, 0, 0); /* no transparent, breaks anti-aliasing in FF */
           border-left: 30px solid $lightestGray;
           padding-right: 3px;
-          position: absolute; top: 50%; left: -33px;
+          position: absolute;
+          top: 50%;
+          left: -33px;
           margin-top: -50px;
           transform: scale(0.99999); /* fix blurry edges in FF */
           z-index: -1;
         }
+
         /* the triangle shape and line to the right of each crumb */
         &:after {
           background-color: $lightestGray;
@@ -178,8 +179,11 @@
           border-radius: $borderRadius;
           content: '';
           display: inline-block;
-          width: 34px; height: 34px; /* + 2px border = 36px */
-          position: absolute; top: 0; right: -22px;
+          width: 34px;
+          height: 34px; /* + 2px border = 36px */
+          position: absolute;
+          top: 0;
+          right: -22px;
           transform: scaleX(0.6) rotate(45deg);
           z-index: -1;
         }
diff --git a/_build/templates/default/sass/_browser.scss b/_build/templates/default/sass/_browser.scss
index 1b92258d6cf..40f72fcd8b1 100644
--- a/_build/templates/default/sass/_browser.scss
+++ b/_build/templates/default/sass/_browser.scss
@@ -23,8 +23,8 @@
 
   .x-window &,
   .modx-browser-rte & {
-      border-radius: 0;
-      box-shadow: none;
+    border-radius: 0;
+    box-shadow: none;
   }
 }
 
@@ -38,39 +38,47 @@
   cursor: pointer;
   user-select: none;
 }
+
 .modx-browser-thumb-wrap.x-view-over {
   border: 1px solid $brandSelectedColor;
   padding: 4px;
 }
+
 .modx-browser-thumb-wrap.x-view-selected {
   background: $brandSelectedBg;
   border: 1px solid $brandSelectedColor;
   padding: 4px;
 }
+
 .modx-browser-thumb-wrap.x-view-selected .modx-browser-thumb {
   background: $white;
 }
+
 .modx-browser-thumb-wrap.x-view-selected span {
   color: $brandSelectedColor;
 }
-  .modx-browser-thumb {
-    border: 1px solid $borderColor;
-    height: 100px;
-    line-height: 100px;
-    padding: 5px;
-    text-align: center;
-    width: 100px;
-  }
-    .modx-browser-thumb img {
-      vertical-align: middle;
-      background-color: #ccc;
-      background-image: url($imgPath + 'modx-theme/transparency-pattern.png');
-    }
-  .modx-browser-thumb-wrap span {
-    display: block;
-    overflow: hidden;
-    text-align: center;
-  }
+
+.modx-browser-thumb {
+  border: 1px solid $borderColor;
+  height: 100px;
+  line-height: 100px;
+  padding: 5px;
+  text-align: center;
+  width: 100px;
+}
+
+.modx-browser-thumb img {
+  vertical-align: middle;
+  background-color: $silver;
+  background-image: url($imgPath + 'modx-theme/transparency-pattern.png');
+}
+
+.modx-browser-thumb-wrap span {
+  display: block;
+  overflow: hidden;
+  text-align: center;
+}
+
 .modx-browser-placeholder {
   font-size: 14px;
   font-weight: bold;
@@ -86,40 +94,49 @@
     overflow: hidden;
   }
 }
+
 .modx-browser-list-item {
   padding: 0 5px 0 5px;
 }
-.modx-browser-list-item.x-view-over > span {
+
+.modx-browser-list-item.x-view-over>span {
   background: $brandHover;
 }
-.modx-browser-list-item.x-view-selected > span {
+
+.modx-browser-list-item.x-view-selected>span {
   background: $brandSelectedBg;
   border-bottom: 1px solid $brandSelectedColor;
   color: $brandSelectedColor;
 }
-  .modx-browser-list-item > span {
-    background-position: center left !important;
-    border-bottom: 1px solid $borderColor;
-    clear: both;
-    display: block;
-    min-height: 16px;
-    padding: 5px 0 5px 20px;
-    position: relative;
-  }
-  .modx-browser-list-item > span:before {
-    font-size: 14px;
-    position: absolute; left: 2px;
-  }
-    .modx-browser-list-item > span span {
-      display: inline-block;
-      font: $fontSmall;
-      padding-top: 2px;
-    }
-    .modx-browser-list-item > span span.file-size,
-    .modx-browser-list-item > span span.image-size {
-      float: right;
-      width: 13%;
-    }
+
+.modx-browser-list-item>span {
+  background-position: center left !important;
+  border-bottom: 1px solid $borderColor;
+  clear: both;
+  display: block;
+  min-height: 16px;
+  padding: 5px 0 5px 20px;
+  position: relative;
+}
+
+.modx-browser-list-item>span:before {
+  font-size: 14px;
+  position: absolute;
+  left: 2px;
+}
+
+.modx-browser-list-item>span span {
+  display: inline-block;
+  font: $fontSmall;
+  padding-top: 2px;
+}
+
+.modx-browser-list-item>span span.file-size,
+.modx-browser-list-item>span span.image-size {
+  float: right;
+  width: 13%;
+}
+
 .modx-browser-view-ct .loading-indicator {
   background-position: left;
   background-repeat: no-repeat;
@@ -141,7 +158,8 @@
   .x-toolbar-left {
 
     .x-toolbar-left-row {
-    /* we need 4 classes to override the !important height of extjs default theme */
+
+      /* we need 4 classes to override the !important height of extjs default theme */
       td.x-toolbar-cell {
         position: relative;
 
@@ -151,9 +169,11 @@
           content: fa-content($fa-var-clipboard);
           font-size: 14px;
           margin-top: -7px; /* half of the height to center vertically with top 50% */
-          opacity: 0.6;
+          opacity: .6;
           filter: alpha(opacity=60); /* for IE <= 8 */
-          position: absolute; top: 50%; left: 0;
+          position: absolute;
+          top: 50%;
+          left: 0;
           text-align: center;
           width: 30px;
         }
@@ -164,10 +184,11 @@
         box-sizing: border-box;
         border-radius: 0;
         border: 0;
-        border-top: 1px solid #e4e4e4;
+        border-top: 1px solid $lightGray;
         margin: 0 !important;
         padding-left: 30px; /* for the icon */
-        width: 100%; height: 32px !important;
+        width: 100%;
+        height: 32px !important;
       }
     }
   }
@@ -203,15 +224,17 @@
       margin-top: -28px; /* half of the height to center vertically with top 50% */
       opacity: 0;
       filter: alpha(opacity=0); /* for IE <= 8 */
-      position: absolute; top: 50%; left: 0;
+      position: absolute;
+      top: 50%;
+      left: 0;
       text-align: center;
       width: 100%;
-      text-shadow: 0 0 10px rgba(0,0,0,0.2);
-      transition: opacity 0.25s;
+      text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      transition: opacity .25s;
     }
 
     &:hover:before {
-      opacity: 0.6;
+      opacity: .6;
       filter: alpha(opacity=60); /* for IE <= 8 */
     }
   }
@@ -222,7 +245,7 @@
     width: 100%;
     max-width: 100%;
     height: auto;
-    background-color: #ccc;
+    background-color: $silver;
     background-image: url($imgPath + 'modx-theme/transparency-pattern.png');
   }
 }
@@ -234,7 +257,7 @@
   text-align: left;
 
   b {
-    color: #555;
+    color: $darkestGray;
     display: block;
     margin-bottom: 2px;
   }
@@ -254,7 +277,7 @@
     width: 100%;
     max-width: 100%;
     height: auto;
-    background-color: #ccc;
+    background-color: $silver;
     background-image: url($imgPath + 'modx-theme/transparency-pattern.png');
   }
 }
diff --git a/_build/templates/default/sass/_buttons.scss b/_build/templates/default/sass/_buttons.scss
index c470257c24d..6d3b20befc8 100644
--- a/_build/templates/default/sass/_buttons.scss
+++ b/_build/templates/default/sass/_buttons.scss
@@ -57,12 +57,11 @@ button {
 
     &:hover,
     &:focus {
-      /*background: #F4A448;*/
       background: darken($yellow, 5%);
       box-shadow: 0 0 0 1px darken($yellow, 5%);
     }
+
     &:active {
-      /*background: #F49548;*/
       background: darken($yellow, 10%);
       box-shadow: 0 0 0 1px darken($yellow, 10%);
     }
@@ -75,12 +74,11 @@ button {
 
     &:hover,
     &:focus {
-      /*background: #F4A448;*/
       background: darken($orange, 5%);
       box-shadow: 0 0 0 1px darken($orange, 5%);
     }
+
     &:active {
-      /*background: #F49548;*/
       background: darken($orange, 10%);
       box-shadow: 0 0 0 1px darken($orange, 10%);
     }
@@ -93,12 +91,11 @@ button {
 
     &:hover,
     &:focus {
-      /*background: #F4A448;*/
       background: darken($red, 3%);
       box-shadow: 0 0 0 1px darken($red, 3%);
     }
+
     &:active {
-      /*background: #F49548;*/
       background: darken($red, 6%);
       box-shadow: 0 0 0 1px darken($red, 6%);
     }
@@ -111,12 +108,12 @@ button {
 
     &:hover,
     &:focus {
-      /*background: #6cb24a;*/
       background: darken($green, 5%);
-      box-shadow: 0 0 0 1px darken($green, 5%);;
+      box-shadow: 0 0 0 1px darken($green, 5%);
+      ;
     }
+
     &:active {
-      /*background: #4BA81E;*/
       background: darken($green, 10%);
       box-shadow: 0 0 0 1px darken($green, 10%);
     }
@@ -130,10 +127,11 @@ button {
     &:hover,
     &:focus {
       background: darken($blue, 5%);
-      box-shadow: 0 0 0 1px darken($blue, 5%);;
+      box-shadow: 0 0 0 1px darken($blue, 5%);
+      ;
     }
+
     &:active {
-      /*background: #4BA81E;*/
       background: darken($blue, 10%);
       box-shadow: 0 0 0 1px darken($blue, 10%);
     }
@@ -155,9 +153,11 @@ button {
       border: 0;
       margin: 0 !important;
     }
-    .x-form-trigger:before{
+
+    .x-form-trigger:before {
       margin-top: 0;
     }
+
     &.x-trigger-wrap-focus {
       box-shadow: $shadowBorderGrayHover;
     }
@@ -168,12 +168,15 @@ button {
       .x-btn {
         display: block;
       }
+
       .x-btn,
       .x-form-text,
       .x-form-field-trigger-wrap {
         margin-right: 7px; /* 5px + 2px box-shadow = 5px visible spacing */
       }
+
       &:first-of-type {
+
         .x-btn,
         .x-form-text,
         .x-form-field-trigger-wrap {
@@ -182,40 +185,48 @@ button {
       }
     }
   }
+
   .x-toolbar-right-row {
-      .x-btn,
-      .x-form-text,
-      .x-form-field-trigger-wrap {
-        margin-left: 7px; /* 5px + 2px box-shadow = 5px visible spacing */
-      }
-      
-      .x-form-filter {
-        border-radius: $borderRadius 0 0 $borderRadius;
-        z-index: 1; /* prevent clear filter button from overlapping the textfield */
-      }
-      .x-form-filter-clear {
-        border-radius: 0 $borderRadius $borderRadius 0;
-        margin-left: 0;
-      }
+
+    .x-btn,
+    .x-form-text,
+    .x-form-field-trigger-wrap {
+      margin-left: 7px; /* 5px + 2px box-shadow = 5px visible spacing */
+    }
+
+    .x-form-filter {
+      border-radius: $borderRadius 0 0 $borderRadius;
+      z-index: 1; /* prevent clear filter button from overlapping the textfield */
+    }
+
+    .x-form-filter-clear {
+      border-radius: 0 $borderRadius $borderRadius 0;
+      margin-left: 0;
+    }
   }
+
   .x-form-text {
     padding: 8px 13px;
     border-radius: $borderRadius;
     font-size: 13px !important;
   }
+
   &.x-small-editor .x-form-text {
     padding-top: 8px; /* overrides ext standard theme rule which isn't overridden by padding rule above */
   }
+
   .xtb-sep {
-      /* use margin on the elements itself as the separators are not inserted consistently */
-      /* separators are removed, but we leave this rule for safety */
-      margin: 0;
-      width: 0;
+    /* use margin on the elements itself as the separators are not inserted consistently */
+    /* separators are removed, but we leave this rule for safety */
+    margin: 0;
+    width: 0;
   }
+
   .x-tree & {
     .x-btn {
       padding: 7px;
     }
+
     .x-btn-icon {
       box-shadow: none;
       padding: 7px;
@@ -225,15 +236,18 @@ button {
         box-shadow: none;
         color: $colorSplash;
       }
+
       &.x-btn-click {
         background: none;
         box-shadow: none;
         color: $borderColorActive;
       }
     }
+
     .x-btn-icon:before {
       content: none;
     }
+
     .x-toolbar-left-row,
     .x-toolbar-right-row {
       .x-form-field-wrap {
@@ -255,25 +269,32 @@ button {
   border: 0;
   font-family: $buttonfonts;
   border-radius: $borderRadius;
-  z-index: 12; /* prevent panel collapse arrows + toggles from overlapping */
+  z-index: 12;
+
+  /* prevent panel collapse arrows + toggles from overlapping */
   .x-toolbar-cell:not(:first-child) {
     padding-left: 0.5rem;
   }
+
   .x-btn {
     margin: 0;
   }
+
   #modx-abtn-menu {
     .x-btn-split {
       padding: 0;
+
       &:before {
         display: none;
       }
+
       .x-btn-text {
         padding: 0;
         border: none;
       }
     }
   }
+
   @include grid-media($mobile) {
     background: $softGray;
     position: relative;
@@ -283,6 +304,7 @@ button {
     bottom: auto;
     width: 100%;
     border-radius: 0;
+
     table {
       @include responsive-table-bar;
     }
@@ -295,102 +317,98 @@ button {
 }
 
 .tab-panel-wrapper .x-panel-tbar {
-    @include grid-media($mobile) {
-        @include responsive-table-bar;
-        .x-toolbar-left, .x-toolbar-right {
-            input {
-                height:auto !important;
-                width:100%;
-                box-sizing:border-box;
-                margin-left:0;
-            }
-        }
+  @include grid-media($mobile) {
+    @include responsive-table-bar;
+
+    .x-toolbar-left,
+    .x-toolbar-right {
+      input {
+        height: auto !important;
+        width: 100%;
+        box-sizing: border-box;
+        margin-left: 0;
+      }
     }
+  }
 }
 
-html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
-    @include grid-media($mobile) {
-		height:auto !important;
-	}
+html.ext-strict body #modx-container .x-small-editor .x-form-text {
+
+  // #janky
+  @include grid-media($mobile) {
+    height: auto !important;
+  }
 }
 
 #modx-grid-element-properties {
-    @include grid-media($mobile) {
-		@include responsive-table-bar;
-		.x-toolbar-left {
-			margin-bottom:0;
-		}
-		.x-toolbar-cell {
-			> * {
-				width:100% !important;
-				box-sizing:border-box;
-				margin-left:auto;
-				margin-right:auto;
-			}
-		}
-	}
-}
-
-/*.x-window-footer {
-  .x-toolbar-right-row {
-    td {
-      &:last-of-type {
-        .x-btn {
-          @extend %primary-button;
-        }
+  @include grid-media($mobile) {
+    @include responsive-table-bar;
+
+    .x-toolbar-left {
+      margin-bottom: 0;
+    }
+
+    .x-toolbar-cell {
+      >* {
+        width: 100% !important;
+        box-sizing: border-box;
+        margin-left: auto;
+        margin-right: auto;
       }
     }
   }
-}*/
+}
 
 .x-btn-icon button {
   font-family: fontawesome;
-  font-size:18px;
+  font-size: 18px;
   height: 18px;
   width: 18px;
-  position:relative
+  position: relative
 }
 
 .x-btn-icon {
-    &.arrow_up {
-      button {
-        background:none !important; /* #shame */
-        position:relative;
-
-        &:before {
-          @extend %pseudo-font-x-btn;
-          content: fa-content($fa-var-level-up-alt);
-          top:1px;
-          bottom:auto;
-        }
+  &.arrow_up {
+    button {
+      background: none !important; /* #shame */
+      position: relative;
+
+      &:before {
+        @extend %pseudo-font-x-btn;
+        content: fa-content($fa-var-level-up-alt);
+        top: 1px;
+        bottom: auto;
       }
     }
-    &.arrow_down {
-      button {
-        background:none !important; /* #shame */
-        position:relative;
-
-        &:before {
-          @extend %pseudo-font-x-btn;
-          content: fa-content($fa-var-level-down-alt);
-          top:1px;
-          bottom:auto;
-        }
+  }
+
+  &.arrow_down {
+    button {
+      background: none !important; /* #shame */
+      position: relative;
+
+      &:before {
+        @extend %pseudo-font-x-btn;
+        content: fa-content($fa-var-level-down-alt);
+        top: 1px;
+        bottom: auto;
       }
     }
-    &.refresh {
-      button {
-        background:none !important; /* #shame */
-        position:relative;
-
-        &:before {
-          @extend %pseudo-font-x-btn;
-          content: fa-content($fa-var-sync);
-          top:1px;
-          bottom:auto;
-        }
+  }
+
+  &.refresh {
+    button {
+      background: none !important; /* #shame */
+      position: relative;
+
+      &:before {
+        @extend %pseudo-font-x-btn;
+        content: fa-content($fa-var-sync);
+        top: 1px;
+        bottom: auto;
       }
     }
+  }
 }
 
 .x-btn-text-icon button {
@@ -398,9 +416,6 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 }
 
 .x-html-editor-tb .x-btn {
-  -moz-box-shadow: none;
-  -o-box-shadow: none;
-  -webkit-box-shadow: none;
   background-color: transparent;
   background-image: none;
   border: 0 none;
@@ -414,15 +429,12 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 
 .x-btn-group {
   border-radius: $borderRadius;
-  border: 1px solid #dbe0e4;
+  border: 1px solid #DBE0E4;
   margin-right: 2px;
   padding: 0;
 }
 
 .x-btn-group .x-btn {
-  -moz-box-shadow: transparent 0 0 1px;
-  -o-box-shadow: transparent 0 0 1px;
-  -webkit-box-shadow: transparent 0 0 1px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
@@ -430,14 +442,14 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 }
 
 .x-btn-group .x-btn button {
-  color: #868b8f;
+  color: $osloGray;
   height: auto !important;
 }
 
 .x-btn-group .x-btn-over {
-  background: #dfdfdf;
+  background: $alto;
   background: $lighterGray;
-  border: 1px solid #dbe0e4;
+  border: 1px solid #DBE0E4;
 }
 
 .x-btn-group .x-btn-over button {
@@ -445,9 +457,9 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 }
 
 .x-btn-group .x-btn-click {
-  background-color: #ffffff;
+  background-color: $white;
   background-image: none;
-  box-shadow: 0 0 3px #aaaaaa inset;
+  box-shadow: 0 0 3px #AAAAAA inset;
   margin: 0 2px 0 0;
 }
 
@@ -456,17 +468,21 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 }
 
 .x-btn-group-header {
-  background-color: #dbe0e4;
+  background-color: #DBE0E4;
   color: #73797f;
-  text-shadow: 0 1px 0 #fafafa;
+  text-shadow: 0 1px 0 $alabastersolid;
 }
 
-.x-btn-group-tl, .x-btn-group-tr {
+.x-btn-group-tl,
+.x-btn-group-tr {
   background-image: none;
   padding: 0;
 }
 
-.x-btn-group-tc, .x-btn-group-bc, .x-btn-group-bl, .x-btn-group-br {
+.x-btn-group-tc,
+.x-btn-group-bc,
+.x-btn-group-bl,
+.x-btn-group-br {
   background-image: none;
 }
 
@@ -480,12 +496,6 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
   padding-right: 1px;
 }
 
-/* //end button style */
-
-.x-btn-over em.x-btn-split, .x-btn-click em.x-btn-split, .x-btn-menu-active em.x-btn-split, .x-btn-pressed em.x-btn-split {
-  /*background-image: url($imgPath + 'modx-theme/button/s-arrow-o.gif');*/
-}
-
 .x-btn em.x-btn-arrow-bottom {
   background-image: url($imgPath + 'modx-theme/button/s-arrow-b-noline.gif');
 }
@@ -494,7 +504,10 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
   background-image: url($imgPath + 'modx-theme/button/s-arrow-b.gif');
 }
 
-.x-btn-over em.x-btn-split-bottom, .x-btn-click em.x-btn-split-bottom, .x-btn-menu-active em.x-btn-split-bottom, .x-btn-pressed em.x-btn-split-bottom {
+.x-btn-over em.x-btn-split-bottom,
+.x-btn-click em.x-btn-split-bottom,
+.x-btn-menu-active em.x-btn-split-bottom,
+.x-btn-pressed em.x-btn-split-bottom {
   background-image: url($imgPath + 'modx-theme/button/s-arrow-bo.gif');
 }
 
@@ -519,7 +532,7 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
       display: inline-block;
       position: relative;
 
-      & > em > button {
+      &>em>button {
         /*color: $buttonColor;*/
         font-size: 18px;
         text-shadow: none;
@@ -550,15 +563,19 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
         vertical-align: middle;
       }
     }
+
     .x-toolbar-right .x-btn {
+
       /* the resource trash button in the tree */
-      & > em > button {
-        /*color: #96A9BB;*/ /* not sure why the trash needs a different color when active? */
+      &>em>button {
+        /*color: #96A9BB;*/
+        /* not sure why the trash needs a different color when active? */
         font-size: 20px; /* trash icon is a bit smaller than the others at 18px */
       }
+
       &#emptifier.x-item-disabled {
         color: $treeColorDesaturated !important; /* !important prevents hover / active styles */
-        opacity: 0.6;
+        opacity: .6;
         filter: alpha(opacity=60); /* for IE <= 8 */
 
         button {
@@ -570,97 +587,97 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text { // #janky
 }
 
 /* resource tree toolbar icons */
-.tree-new-resource > em > button:before {
-  //@include icon($file-alt);
+.tree-new-resource>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file);
 }
-.tree-new-weblink > em > button:before {
-  //@include icon($link);
+
+.tree-new-weblink>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-link);
 }
-.tree-new-symlink > em > button:before {
-  //@include icon($copy);
+
+.tree-new-symlink>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-copy);
   font-weight: 400;
 }
-.tree-new-static-resource > em > button:before {
-  //@include icon($file-text-alt);
+
+.tree-new-static-resource>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-alt);
   font-weight: 400;
 }
-.tree-trash > em > button:before {
-  //@include icon($trash);
+
+.tree-trash>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-trash-alt);
   font-weight: 400;
 }
-  /* alignment overrides */
-  #modx-leftbar .x-toolbar-ct .x-btn.tree-new-symlink > em > button {
-    top: 4px;
-    left: 2px;
-  }
-  #modx-leftbar .x-toolbar-ct .x-btn.tree-new-weblink > em > button {
-    left: 2px;
-  }
+
+/* alignment overrides */
+#modx-leftbar .x-toolbar-ct .x-btn.tree-new-symlink>em>button {
+  top: 4px;
+  left: 2px;
+}
+
+#modx-leftbar .x-toolbar-ct .x-btn.tree-new-weblink>em>button {
+  left: 2px;
+}
 
 /* media browser tree toolbar */
 .x-btn-icon.icon-folder button:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-folder);
+  @extend %pseudo-font;
+  content: fa-content($fa-var-folder);
 }
 
 .x-btn-icon.icon-page_white button:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-file-alt);
-    font-weight: 400;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-file-alt);
+  font-weight: 400;
 }
 
 .x-btn-icon.icon-file_upload button:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-arrow-alt-circle-up);
-    font-weight: 400;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-arrow-alt-circle-up);
+  font-weight: 400;
 }
 
 .x-btn-icon.icon-file_manager button:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-share-square);
-    font-weight: 400;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-share-square);
+  font-weight: 400;
 }
 
 /* element tree toolbar */
-.tree-new-template > em > button:before {
-  //@include icon($columns);
+.tree-new-template>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-columns);
 }
-.tree-new-tv > em > button:before {
-  //@include icon($list-alt);
+
+.tree-new-tv>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-list-alt);
   font-weight: 400;
 }
-.tree-new-chunk > em > button:before {
-  //@include icon($th-large);
+
+.tree-new-chunk>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-th-large);
   font-weight: 900;
 }
-.tree-new-snippet > em > button:before {
-  //@include icon($code);
+
+.tree-new-snippet>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-code);
 }
-.tree-new-plugin > em > button:before {
-  //@include icon($cogs);
+
+.tree-new-plugin>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-cogs);
 }
-.tree-new-category > em > button:before {
-  //@include icon($folder-close);
+
+.tree-new-category>em>button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-folder);
 }
diff --git a/_build/templates/default/sass/_colors-and-vars.scss b/_build/templates/default/sass/_colors-and-vars.scss
index 6abf4d539f6..7337aae8562 100644
--- a/_build/templates/default/sass/_colors-and-vars.scss
+++ b/_build/templates/default/sass/_colors-and-vars.scss
@@ -3,10 +3,12 @@ $colorSplash: #234368;
 $colorSplashLight: lighten($colorSplash, 50%);
 $colorSplashMedium: lighten($colorSplash, 75%);
 $colorSplashDark: darken($colorSplash, 20%);
-$colorSplashDesaturated: lighten(desaturate($colorSplash,100%), 20%); /* unused */
 $colorSplashContrast: #FFFFFF; /* needs much more adaption, should be used as text color for elements with $colorSplash background */
 $primary1: #32AB9A;
 $primary2: #00948E;
+$silver: #CCCCCC;
+$gallery: #EEEEEE;
+$wildSand: #F4F4F4;
 $lightestGray: #FBFBFB;
 $lighterGray: #F0F0F0;
 $lightGray: #E4E4E4;
@@ -14,8 +16,14 @@ $softGray: #DCDCDC;
 $mediumGray: #999999;
 $darkGray: #515151;
 $darkestGray: #53595F; /* a blueish dark gray */
-$white: #FFF;
+$osloGray: #868B8F;
+$doveGray: #686868;
+$alto: #DFDFDF;
+$white: #FFFFFF;
+$alabastersolid: #FAFAFA;
+$tundora: #444444;
 $black: darken($colorSplash, 42.5%); /* generate the black from the $colorSplash */
+$darkGray: #000;
 $lighterRed: #FFEEEE;
 $green: #6CB24A;
 $greener: darken($green, 12%);
@@ -155,9 +163,6 @@ $treeDivider: #404040;
 
 $navbarWidth: 80px;
 /* Top navigation colors */
-$navbarBg: $lighterGray; /* unused */
-$navbarHover: $softGray; /* unused */
-$navbarDrop: $navbarBg; /* unused */
 $navbarText: $white;
 $navbarBorder: rgba(255, 255, 255, .1);
 $subnavBg: $white;
@@ -195,8 +200,6 @@ $winFooterBorderColor: $white;
 /* Font stacks */
 $bodyfonts: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
 $bodyFontSize: 13px;
-$altfonts: titilliumregular, $bodyfonts; /* unused */
-$altfontslight: titilliumlight, $bodyfonts; /* unused */
 $headfonts: $bodyfonts;
 $codefonts: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 $tabFont: 14px $bodyfonts;
diff --git a/_build/templates/default/sass/_dashboard.scss b/_build/templates/default/sass/_dashboard.scss
index 3a5b40c9c0c..6a4533887cd 100644
--- a/_build/templates/default/sass/_dashboard.scss
+++ b/_build/templates/default/sass/_dashboard.scss
@@ -4,6 +4,7 @@
   flex-flow: row wrap;
   margin: -1rem 0 0 -1rem !important;
   padding: 0 15px;
+
   .dashboard-button {
     padding: 5px 20px;
     border: 1px solid $borderColor;
@@ -11,25 +12,31 @@
     background: $white;
     text-decoration: none;
     display: inline-block;
+
     &-green {
       background: $green;
       color: $white;
       border-color: $green;
     }
+
     &[disabled] {
       background-color: $lightGray;
     }
+
     &:not([disabled]):hover {
       box-shadow: $boxShadow;
     }
   }
+
   .dashboard-block {
     margin: 1rem 0 0 1rem;
+
     &:not(.headless) {
       background-color: $white;
       border-radius: $borderRadius;
       box-shadow: $boxShadow;
     }
+
     &.headless {
       .body {
         padding: 0;
@@ -37,93 +44,116 @@
         max-height: 100%;
       }
     }
+
     &.quarter {
       width: calc(25% - 1rem);
     }
+
     &.one-third {
       width: calc(33.33332% - 1rem);
     }
+
     &.half {
       width: calc(50% - 1rem);
     }
+
     &.two-thirds {
       width: calc(66.66668% - 1rem);
     }
+
     &.three-quarters {
       width: calc(75% - 1rem);
     }
+
     &.full {
       width: calc(100% - 1rem);
     }
+
     &.double {
       width: calc(100% - 1rem);
       min-height: 250px;
       margin-top: 2rem;
+
       .body {
         max-height: 100%;
         height: 100%;
       }
+
       .dashboard {
-          &-buttons {
-              height: 100%;
-          }
-          &-button {
-              align-items: center;
-          }
+        &-buttons {
+          height: 100%;
+        }
+
+        &-button {
+          align-items: center;
+        }
       }
     }
+
     h4 {
       color: $darkGray;
       font-size: 13px;
       padding-bottom: 2px;
     }
+
     em {
       font-style: italic;
     }
+
     strong {
       font-weight: bold;
     }
+
     ul {
       list-style: circle outside;
       padding: 0 0 0 15px;
     }
+
     img {
-      max-width:100%;
+      max-width: 100%;
     }
+
     .draggable {
       cursor: move;
     }
+
     .action-buttons {
       margin-left: auto;
       margin-right: 10px;
+
       button {
         border: none;
         cursor: pointer;
         opacity: 0;
         background: transparent;
+
         &.hidden {
           display: none;
         }
       }
     }
+
     .body {
-      color: #444;
+      color: $tundora;
       font-size: 12px;
       height: auto;
       max-height: 300px;
       overflow: auto;
       padding: 10px;
       position: relative;
+
       .action-buttons {
         position: absolute;
         top: 20px;
         right: -5px;
       }
     }
+
     .title-wrapper {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
+
       .title {
         border-radius: $borderRadius;
         background: $white;
@@ -136,31 +166,40 @@
         flex-grow: 1;
       }
     }
+
     .actions {
       button {
         width: 10px;
         height: 10px;
       }
     }
+
     &:hover {
       .action-buttons {
-          button {
-            opacity: 1;
-          }
+        button {
+          opacity: 1;
         }
+      }
     }
   }
 
   ul.configcheck {
     list-style-type: none;
     padding: 0;
+
     li {
       margin-bottom: 0.5em;
       margin-top: 0.5em;
       padding: 1em 1.618em;
       background-color: $lightestGray;
-      h5 { color: $red; }
-      p { color: $darkGray; }
+
+      h5 {
+        color: $red;
+      }
+
+      p {
+        color: $darkGray;
+      }
     }
   }
 
@@ -168,35 +207,45 @@
     width: 100%;
     overflow: auto;
   }
+
   table {
     width: 100%;
     border-collapse: collapse;
+
     th {
       font-weight: bold;
       padding: 10px;
       border-bottom: 2px solid $lighterGray;
     }
+
     td {
       padding: 10px;
       border-bottom: 1px solid $lighterGray;
       white-space: nowrap;
       vertical-align: center;
+
       .unpublished {
         font-style: italic;
         color: $mediumGray;
       }
+
       .deleted {
         color: $delTextColor;
         text-decoration: $delTextDeco;
       }
     }
+
     tr:last-child {
-      td { border: none; }
+      td {
+        border: none;
+      }
     }
   }
+
   .widget-footer {
     padding-top: 10px;
     border-top: 1px solid $lighterGray;
+
     a {
       font-size: 14px;
       text-decoration: none;
@@ -204,6 +253,7 @@
       text-align: center;
     }
   }
+
   .widget-actions {
     a {
       display: inline-block;
@@ -212,12 +262,15 @@
       border-radius: $borderRadius;
       margin-left: 5px;
       text-decoration: none;
+
       &:first-child {
         margin-left: 0;
       }
+
       &:hover {
         background: $lighterGray;
       }
+
       .icon {
         width: 12px;
         height: 12px;
@@ -226,27 +279,34 @@
       }
     }
   }
+
   .no-results {
     padding: 10px;
     text-align: center;
     color: $mediumGray;
   }
+
   .user-with-avatar {
     display: flex;
     align-items: center;
+
     .user-avatar {
       margin-right: 5px;
+
       img {
         border-radius: 30px;
       }
     }
+
     .user-name {
       font-weight: bold;
     }
+
     .user-group {
       color: $mediumGray;
     }
   }
+
   .occurred {
     .occurred-time {
       color: $mediumGray;
@@ -260,6 +320,7 @@
   justify-content: center;
   width: calc(100% + 1rem);
   margin: -1rem 0 0 -1rem;
+
   .dashboard-button {
     display: flex;
     align-items: flex-start;
@@ -271,18 +332,22 @@
     text-decoration: none;
     color: $darkestGray;
     flex: 1;
+
     &:hover {
       color: $black;
+
       .icon {
         opacity: .7;
       }
     }
+
     &-icon {
       border-radius: 20px;
       border: 1px solid $green;
       background: rgba(108, 178, 74, .2);
       padding: 10px;
       text-align: center;
+
       .icon {
         font-weight: bold;
         display: block;
@@ -293,9 +358,11 @@
         text-align: center;
       }
     }
+
     &-wrapper {
       margin-left: 10px;
     }
+
     &-title {
       font-weight: bold;
     }
@@ -303,7 +370,10 @@
 }
 
 .updates-widget {
-  .updates-title { font-weight: bold; }
+  .updates-title {
+    font-weight: bold;
+  }
+
   .updates-updateable {
     display: inline-block;
     background: $blue;
@@ -312,15 +382,23 @@
     padding: 2px 8px;
     font-weight: bold;
   }
-  .updates-ok, .updates-available {
+
+  .updates-ok,
+  .updates-available {
     padding: 3px 8px;
     color: $white;
     border-radius: $borderRadius;
     text-transform: uppercase;
     font-size: 10px;
   }
-  .updates-ok { background: $green; }
-  .updates-available { background: $red; }
+
+  .updates-ok {
+    background: $green;
+  }
+
+  .updates-available {
+    background: $red;
+  }
 }
 
 @media screen and (max-width: 1023px) {
@@ -330,6 +408,7 @@
       flex-direction: column;
       text-align: center;
       align-items: center;
+
       &-wrapper {
         margin-left: 0;
         margin-top: 5px;
@@ -337,18 +416,26 @@
     }
   }
 }
+
 @media screen and (max-width: 640px) {
   .dashboard {
     .dashboard-block {
-      &.quarter, &.one-third, &.half, &.two-thirds {
+
+      &.quarter,
+      &.one-third,
+      &.half,
+      &.two-thirds {
         width: calc(100% - 1rem);
       }
     }
   }
+
   .dashboard-buttons {
     flex-wrap: wrap;
+
     .dashboard-button {
       padding: 10px;
+
       &-wrapper {
         display: none;
       }
diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 4fed820c86a..104392671ef 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -25,7 +25,8 @@ textarea[name="introtext"],
   font: $baseText;
 }
 
-.x-form-text, /* this screws up clear cache modal #shame */
+.x-form-text,
+/* this screws up clear cache modal #shame */
 textarea.x-form-field,
 .x-form-textarea {
   background-color: $coreFieldBg;
@@ -40,10 +41,6 @@ textarea.x-form-field,
 .x-viewport input.x-form-focus,
 .x-viewport textarea.x-form-focus,
 .x-viewport .x-form-textarea.x-form-focus {
-  /*border-radius: 0;*/
-  /*outline-offset: 0;*/
-  /*outline: 1px solid #ddd !important; /* #shame */
-  /*box-shadow: $shadowBorderFocus;*/
   border-color: $mediumGray;
 }
 
@@ -51,7 +48,8 @@ textarea.x-form-field,
   border-radius: $borderRadius $borderRadius 0 0;
 }
 
-.x-form-invalid, textarea.x-form-invalid {
+.x-form-invalid,
+textarea.x-form-invalid {
   border-color: $red !important;
 }
 
@@ -63,7 +61,8 @@ input::-moz-focus-inner {
 }
 
 /* special rule for the TVs additional input/output properties form to have padding on top */
-#modx-input-props, #modx-widget-props {
+#modx-input-props,
+#modx-widget-props {
   padding: 15px 0 0 0;
 }
 
@@ -93,15 +92,15 @@ input::-moz-focus-inner {
     }
 
     .modx-tv-reset {
-      /*background: url($imgPath + 'restyle/icons/arrow_rotate_anticlockwise.png') bottom left no-repeat;*/
       cursor: pointer;
       display: inline-block;
-      /*float: left;*/
       height: 16px;
       opacity: 0;
       filter: alpha(opacity=0); /* for IE <= 8 */
       padding: 17px 8px 0 0;
-      position: relative; top: 0; right: 0px;
+      position: relative;
+      top: 0;
+      right: 0px;
       transition: all 0.25s;
       width: 16px;
 
@@ -112,11 +111,14 @@ input::-moz-focus-inner {
         color: $coreFieldLabelColor;
         content: fa-content($fa-var-sync);
         font-size: 16px;
-        position: relative; bottom: 0; left: 0;
+        position: relative;
+        bottom: 0;
+        left: 0;
         padding-left: 4px;
         text-align: center;
         vertical-align: middle;
-        width: 16px; height: 16px;
+        width: 16px;
+        height: 16px;
       }
 
       &:hover:before {
@@ -132,7 +134,9 @@ input::-moz-focus-inner {
       opacity: 1;
       filter: alpha(opacity=100); /* for IE <= 8 */
     }
-  } /* label.x-form-item-label */
+  }
+
+  /* label.x-form-item-label */
 
   &.modx-tv {
     padding: 0 0 0 0px !important;
@@ -142,12 +146,11 @@ input::-moz-focus-inner {
   .modx-tv-inherited {
     color: $darkGray;
     display: inline-block;
-    /*float: right;*/
     font-size: 10px;
     font-style: italic;
-    /*line-height: 1.2;*/
-    /*padding: 19px 0 4px 0;*/
-    position: absolute; top: 19px; right: 0; /* absolute position to avoid layout issues with long descriptions */
+    position: absolute;
+    top: 19px;
+    right: 0; /* absolute position to avoid layout issues with long descriptions */
   }
 
   .modx-tv-image-preview {
@@ -170,29 +173,32 @@ input::-moz-focus-inner {
       border-radius: 0 $borderRadius $borderRadius 0;
       cursor: pointer;
       display: inline-block;
-      /*float: left;*/
-      /*list-style: none;*/
       margin: 4px 5px 0 10px;
       padding: 1px 5px;
       position: relative;
-      /*text-decoration: underline;*/
 
       &:before {
         border-style: solid;
         border-width: 10px 10px 10px 0;
         border-color: transparent $lightGray transparent transparent;
         content: '';
-        position: absolute; top: 0; left: -10px;
-        -webkit-transform: rotate(360deg); /* for better anti-aliasing in webkit browsers */
-        width: 0; height: 0;
+        position: absolute;
+        top: 0;
+        left: -10px;
+        transform: rotate(360deg); /* for better anti-aliasing in webkit browsers */
+        width: 0;
+        height: 0;
       }
 
       &:after {
         background-color: $white;
-        border-radius: 50%; /* make a circle */
+        border-radius: 50%;  /* make a circle */
         content: '';
-        position: absolute; top: 8px; left: -4px;
-        width: 4px; height: 4px;
+        position: absolute;
+        top: 8px;
+        left: -4px;
+        width: 4px;
+        height: 4px;
       }
 
       &.modx-tag-checked,
@@ -202,14 +208,14 @@ input::-moz-focus-inner {
         text-decoration: none;
 
         &:before {
-           border-color: transparent $colorSplash transparent transparent;
+          border-color: transparent $colorSplash transparent transparent;
         }
 
         &:hover {
           background-color: darken($colorSplash, 6%);
 
           &:before {
-             border-color: transparent darken($colorSplash, 6%) transparent transparent;
+            border-color: transparent darken($colorSplash, 6%) transparent transparent;
           }
         }
       }
@@ -292,12 +298,14 @@ input::-moz-focus-inner {
   .x-form-element {
     padding: 0;
     font: $baseText;
-  } /* .x-form-element */
+  }
+
+  /* .x-form-element */
 
   /* prevent columns used inside form elements to have too much spacing, some custom TV types need this */
-  .x-column-inner > .x-column {
+  .x-column-inner>.x-column {
 
-    ~ .x-column {
+    ~.x-column {
       margin-left: 5px;
     }
 
@@ -314,14 +322,15 @@ input::-moz-focus-inner {
   .x-btn {
     padding: 7px 10px 7px 10px;
   }
-} /* .x-form-item */
+}
+
+/* .x-form-item */
 
 .desc-under {
   color: $coreFieldDescColor;
   display: block;
   font-size: 12px;
   font-style: italic;
-  /*margin: -4px 0 15px 0;*/
   margin: 2px 0 0 0;
   text-align: justify;
 
@@ -344,7 +353,8 @@ input::-moz-focus-inner {
   padding: 0; /* override extjs default styles */
   position: relative;
 
-  .x-fieldset-header { /* legend */
+  .x-fieldset-header {
+    /* legend */
     color: $coreFieldLabelColor;
     font: $fontSmall;
     font-weight: bold;
@@ -382,12 +392,8 @@ input::-moz-focus-inner {
 
 /* the different input fields */
 .x-static-text-field {
-  /*background: transparent;*/
-  /*border: none;*/
   color: inherit;
   font-size: inherit;
-  /*opacity: 1;*/
-  /*filter: alpha(opacity=100); /* for IE <= 8 */
 
   &.x-form-focus {
     border-color: $borderColor !important;
@@ -396,35 +402,32 @@ input::-moz-focus-inner {
 
 /* issue #5505 */
 .x-form-text {
-  /*box-sizing: border-box;*/ /* we cannot use this because extjs calculates widths with the old box-model */
+  /*box-sizing: border-box;*/
+  /* we cannot use this because extjs calculates widths with the old box-model */
   line-height: 20px;
   min-height: 20px; /* + 5px + 5px padding = 30px */
   padding: 5px;
 }
 
-.x-form-textarea {
-
-}
-
 .x-form-field-wrap {
   background: $coreFieldBg;
   border: 1px solid $borderColor;
-  border-radius: $borderRadius;
-  /*box-shadow: $shadowBorderField;*/
+  border-radius: $borderRadius; /*box-shadow: $shadowBorderField;*/
 
   .x-form-text:not(.x-form-invalid) {
     border: 0;
   }
 
   .x-form-trigger {
-    /*@extend %secondary-button;*/
-    /*background: url($imgPath + 'modx-theme/form/trigger.png') no-repeat left center;*/
     border: 0;
     border-radius: 0 $borderRadius $borderRadius 0; /* override button styles border-radius */
     box-shadow: none; /* override button styles box-shadow */
     padding: 0; /* override button styles padding */
-    width: 30px; height: 100% !important; /* height 100% to enable vertical centering, !important to override default extjs theme styles */
-    position: absolute; top: 0; right: 0;
+    width: 30px;
+    height: 100% !important; /* height 100% to enable vertical centering, !important to override default extjs theme styles */
+    position: absolute;
+    top: 0;
+    right: 0;
 
     &:before {
       @extend %pseudo-font;
@@ -433,9 +436,11 @@ input::-moz-focus-inner {
       content: fa-content($fa-var-chevron-down);
       font-size: 14px;
       margin-top: -7px; /* half of the height to center vertically with top 50% */
-      opacity: 0.8;
+      opacity: .8;
       filter: alpha(opacity=60); /* for IE <= 8 */
-      position: absolute; top: 50%; right: 0;
+      position: absolute;
+      top: 50%;
+      right: 0;
       text-align: center;
       width: 30px;
       transition: opacity 0.25s;
@@ -488,10 +493,7 @@ input::-moz-focus-inner {
       content: fa-content($fa-var-file-code);
       font-weight: 400;
     }
-    /* styles for the inline grid editor */
-    .x-small-editor & {
 
-    }
   }
 
   &.x-datetime-wrap {
@@ -523,35 +525,42 @@ input::-moz-focus-inner {
     position: relative;
 
     .x-form-file {
-      position: absolute; top: 0; right: 0;
+      position: absolute;
+      top: 0;
+      right: 0;
       min-height: 20px;
       opacity: 0;
       filter: alpha(opacity=0); /* for IE <= 8 */
       padding: 5px;
       z-index: 2;
     }
+
     .x-form-file-btn {
       border-radius: 0 $borderRadius $borderRadius 0;
       padding: 7px; /* override default button padding */
-      position: absolute; top: 0; right: 0;
+      position: absolute;
+      top: 0;
+      right: 0;
       z-index: 1; /* needs to stay below the transparent file input field */
-      line-height:0;
+      line-height: 0;
       box-shadow: none;
       border-left: solid 1px $borderColor;
     }
+
     .x-form-file-text {
       position: relative;
       z-index: 3; /* needs to stay above the transparent file input field */
     }
   }
-} /* .x-form-field-wrap */
+}
+
+/* .x-form-field-wrap */
 
 /* both, radio groups and checkbox groups are wrapped in a x-form-check-wrap */
 .x-form-check-wrap,
 .x-fieldset-checkbox-toggle legend {
   height: auto !important;
   line-height: 18px; /* this is also default in the extjs default theme */
-  /*padding-top: 15px;*/ /* already done by .x-hide-label */
 
   .x-form-label-left & {
     padding: 7px 0 7px 0;
@@ -569,8 +578,8 @@ input::-moz-focus-inner {
     font-weight: normal;
     margin: 0;
     padding-left: 20px;
-    position: relative; top: 0; /* override extjs default style */
-    /*transition: all 0.25s;*/
+    position: relative;
+    top: 0; /* override extjs default style */
 
     .ext-ie8 & {
       padding-left: 3px;
@@ -587,10 +596,13 @@ input::-moz-focus-inner {
       content: '';
       font-size: 18px;
       padding-right: 3px;
-      position: absolute; top: 0; left: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
       text-align: center;
       vertical-align: middle;
-      width: 18px; height: 18px;
+      width: 18px;
+      height: 18px;
     }
 
     &:hover:before,
@@ -605,76 +617,95 @@ input::-moz-focus-inner {
 
   /* checkbox & radio button replacement */
   .x-form-checkbox,
-  input[type="checkbox"], /* we need this to catch un-classed checkboxes in fieldset legends */
+  input[type="checkbox"],
+  /* we need this to catch un-classed checkboxes in fieldset legends */
   .x-form-radio {
     /*display: none;*/
     cursor: pointer;
     opacity: 0;
-    position: absolute; top: 0; left: 0;
-    width: 18px; height: 18px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 18px;
+    height: 18px;
     z-index: 1;
 
     .ext-ie8 & {
       /*display: inline-block; /* fallback for IE8 */
-      position: relative; top: auto; left: auto;
-      width: 13px; height: 13px;
+      position: relative;
+      top: auto;
+      left: auto;
+      width: 13px;
+      height: 13px;
     }
 
-    &:hover + .x-form-cb-label:before,
-    &:hover + .x-fieldset-header-text:before,
-    &:focus + .x-form-cb-label:before,
-    &:focus + .x-fieldset-header-text:before {
+    &:hover+.x-form-cb-label:before,
+    &:hover+.x-fieldset-header-text:before,
+    &:focus+.x-form-cb-label:before,
+    &:focus+.x-fieldset-header-text:before {
       color: $colorSplash;
     }
 
-    &:active + .x-form-cb-label:before,
-    &:active + .x-fieldset-header-text:before {
+    &:active+.x-form-cb-label:before,
+    &:active+.x-fieldset-header-text:before {
       color: darken($colorSplash, 6%);
     }
   }
 
-  .x-form-checkbox + .x-form-cb-label:before,
-  input[type="checkbox"] + .x-fieldset-header-text:before {
+  .x-form-checkbox+.x-form-cb-label:before,
+  input[type="checkbox"]+.x-fieldset-header-text:before {
     content: fa-content($fa-var-square);
     font-weight: 400;
   }
 
-  .x-form-checkbox:checked + .x-form-cb-label:before,
-  input[type="checkbox"]:checked + .x-fieldset-header-text:before {
+  .x-form-checkbox:checked+.x-form-cb-label:before,
+  input[type="checkbox"]:checked+.x-fieldset-header-text:before {
     content: fa-content($fa-var-check-square);
     font-weight: 400;
   }
 
-  .x-form-radio + .x-form-cb-label:before {
+  .x-form-radio+.x-form-cb-label:before {
     content: fa-content($fa-var-circle);
     font-weight: 400;
   }
 
-  .x-form-radio:checked + .x-form-cb-label:before {
+  .x-form-radio:checked+.x-form-cb-label:before {
     content: fa-content($fa-var-dot-circle);
     font-weight: 400;
   }
-} /* .x-form-check-wrap */
+}
+
+/* .x-form-check-wrap */
 /* Special checboxes for resources */
 #modx-resource-tabs {
-  .x-form-check-wrap, .x-fieldset-checkbox-toggle legend, .x-fieldset legend {
-    [type="checkbox"]/*, [type="radio"]*/ {
+
+  .x-form-check-wrap,
+  .x-fieldset-checkbox-toggle legend,
+  .x-fieldset legend {
+    [type="checkbox"]
+
+    /*, [type="radio"]*/
+      {
       position: absolute;
       left: -9999px;
-      & + .x-form-cb-label, & + .x-fieldset-header-text {
+
+      &+.x-form-cb-label,
+      &+.x-fieldset-header-text {
         position: relative;
         padding-left: 4em;
         padding-top: .2em;
         margin-left: 0;
-        //line-height: 1.6em;
         cursor: pointer;
         box-sizing: border-box;
-        &:before, &:after {
+
+        &:before,
+        &:after {
           content: '';
           position: absolute;
           transition: all .2s ease;
           font-size: inherit;
         }
+
         &:before {
           left: 0;
           top: 0;
@@ -684,6 +715,7 @@ input::-moz-focus-inner {
           border-radius: 1.2em;
           z-index: 10;
         }
+
         &:after {
           left: .1em;
           top: 0.8em;
@@ -691,32 +723,42 @@ input::-moz-focus-inner {
           height: 1.3em;
           width: 1.3em;
           border-radius: 50%;
-          background-color: #fff;
+          background-color: $white;
           z-index: 11;
         }
       }
+
       &:checked {
-        & + .x-form-cb-label, & + .x-fieldset-header-text {
+
+        &+.x-form-cb-label,
+        &+.x-fieldset-header-text {
           &:after {
             left: 0.1em;
             top: 0.8em;
           }
+
           &:before {
             background-color: $green;
             border-color: $green;
           }
         }
       }
+
       &.danger:checked {
-        & + .x-form-cb-label, & + .x-fieldset-header-text {
+
+        &+.x-form-cb-label,
+        &+.x-fieldset-header-text {
           &:before {
             background-color: $red;
             border-color: $red;
           }
         }
       }
+
       &.warning:checked {
-        & + .x-form-cb-label, & + .x-fieldset-header-text {
+
+        &+.x-form-cb-label,
+        &+.x-fieldset-header-text {
           &:before {
             background-color: $orange;
             border-color: $orange;
@@ -732,12 +774,14 @@ input::-moz-focus-inner {
   /*overflow: visible; /* do not cut off the bottom of the input elements */
   overflow: hidden; /* visible causes horizontal scrollbars in vertical tabs */
 
-  .x-column { /* we need this to have access to the first child */
+  .x-column {
+    /* we need this to have access to the first child */
 
     .x-form-item {
       &:first-child {
         padding: 4px 0 0 0;
       }
+
       &:last-child {
         padding: 0 0 4px 0;
       }
@@ -772,10 +816,6 @@ input::-moz-focus-inner {
     height: auto !important; /* override the extjs default theme style high specifiy + !important rule, wtf... */
   }
 
-  input[disabled] {
-    /*background-color: transparent;*/
-  }
-
   ul {
     cursor: text;
     min-height: 20px;
@@ -822,15 +862,17 @@ input::-moz-focus-inner {
           border: 0;
           color: inherit;
           cursor: pointer;
-          display: inline-block;
-          /*font-size: 1px;*/
+          display: inline-block; /*font-size: 1px;*/
           outline: 0; /* fix firefox dotted outlines */
-          opacity: 0.6;
+          opacity: .6;
           filter: alpha(opacity=60); /* for IE <= 8 */
           padding: 0;
-          position: absolute; top: 0; right: 0;
+          position: absolute;
+          top: 0;
+          right: 0;
           transition: opacity 0.25s;
-          width: 16px; height: 100%;
+          width: 16px;
+          height: 100%;
 
           &:before {
             @extend %pseudo-font;
@@ -840,7 +882,9 @@ input::-moz-focus-inner {
             color: inherit;
             font-size: 14px;
             margin-top: -7px; /* half of the height to center vertically with top 50% */
-            position: absolute; top: 50%; right: 0;
+            position: absolute;
+            top: 50%;
+            right: 0;
             text-align: center;
             vertical-align: middle;
             width: 16px;
@@ -862,10 +906,6 @@ input::-moz-focus-inner {
           border: 0;
           line-height: 20px;
           outline: 0;
-
-          /*.ext-ie & {
-            margin-top: 1px;
-          }*/
         }
       }
     }
@@ -880,8 +920,11 @@ input::-moz-focus-inner {
   /* these buttons got the .x-form-trigger class assigned */
   .x-superboxselect-btns {
     overflow: visible;
-    position: absolute; top: 0; right: 0;
-    width: 61px; height: 100%; /* 61px account for the border of the clear button */
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 61px;
+    height: 100%; /* 61px account for the border of the clear button */
 
     .x-superboxselect-btn-expand {
       border-radius: 0;
@@ -907,9 +950,7 @@ input::-moz-focus-inner {
       }
     }
   }
-} /* .x-superboxselect */
-/*} /* .x-form-element */
-
+}
 
 .inline-form {
   border: 0 none;
@@ -927,7 +968,7 @@ input::-moz-focus-inner {
     background-color: $coreFieldBg;
     background-image: none;
     border-radius: $borderRadius;
-    border: 1px solid #CCCCCC;
+    border: 1px solid $silver;
     position: relative;
     width: 97%;
   }
@@ -1033,12 +1074,12 @@ input::-moz-focus-inner {
 }*/
 
 /*.x-form-select-one {
-  background-color: #fff;
+  background-color: $white
   border-color: #c5c5c5;
 }*/
 
 .x-editor .x-form-check-wrap {
-  background-color: #fff;
+  background-color: $white
 }
 
 /* fix combo on grid editor bug */
@@ -1115,7 +1156,7 @@ input::-moz-focus-inner {
 }*/
 
 /*.x-form-inner-invalid, textarea.x-form-inner-invalid {
-  background-color: #fff;
+  background-color: $white
   background-image: url($imgPath + 'modx-theme/grid/invalid_line.gif');
 }*/
 
@@ -1124,27 +1165,29 @@ input::-moz-focus-inner {
 }
 
 .x-form-invalid-msg {
-  color: #c0272b;
+  color: $red;
   font: $fontSmall;
   margin-top: 2px;
   position: relative;
   min-width: 95%;
-	&:before {
-		@extend %pseudo-font;
-		content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
-		position: absolute;
-		top: 3px;
-		left: 3px;
-		color: inherit;
-	}
+
+  &:before {
+    @extend %pseudo-font;
+    content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    color: inherit;
+  }
 }
 
 .x-form-empty-field {
-  color: gray;
+  color: $gray;
 }
 
 .x-grid3 {
   .x-small-editor {
+
     .x-form-text,
     .x-form-field-wrap {
       font: $fontSmall;
@@ -1157,10 +1200,6 @@ input::-moz-focus-inner {
       }
     }
 
-    .x-form-text {
-      /*margin-top: 7px;*/
-    }
-
     .x-form-field-wrap {
       overflow: hidden;
     }
@@ -1227,12 +1266,11 @@ input::-moz-focus-inner {
         margin-right: 2px;
         min-height: 16px;
         padding: 2px;
-
       }
 
       .x-btn {
         padding: 1px;
-        transition: color 0.25s;
+        transition: color .25s;
 
         &.x-btn-over,
         &:hover,
@@ -1247,12 +1285,14 @@ input::-moz-focus-inner {
 
         &.x-item-disabled {
           color: $buttonColor;
-          opacity: 0.4;
+          opacity: .4;
         }
 
         button:before {
           line-height: 20px;
-          top: 0; left: 0; right: 0;
+          top: 0;
+          left: 0;
+          right: 0;
         }
       }
 
@@ -1276,26 +1316,37 @@ input::-moz-focus-inner {
         margin-left: 1px;
       }
     }
+
     /* the first text cell, "Page" */
-    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
+    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
       .xtb-text {
         display: none;
-        position: absolute; top: 2px; right: 0; left: 0;
+        position: absolute;
+        top: 2px;
+        right: 0;
+        left: 0;
       }
     }
+
     /* the second text cell, "of X" */
-    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
+    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
       .xtb-text {
         display: inline-block;
-        position: absolute; top: auto; right: 0; bottom: 4px; left: 0;
+        position: absolute;
+        top: auto;
+        right: 0;
+        bottom: 4px;
+        left: 0;
       }
     }
+
     /* the last regular button >>, yes, I know it's ugly but tell that Microsoft and say thanks for IE8 =) */
-    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
+    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
       .x-btn {
         margin-right: 0;
       }
     }
+
     /* the refresh button */
     .x-toolbar-cell:last-child {
       opacity: 0;
@@ -1305,16 +1356,19 @@ input::-moz-focus-inner {
         font-size: 12px;
         line-height: 1;
         margin: 0;
-        opacity: 0.4;
+        opacity: .4;
         padding: 0;
-        position: absolute; bottom: 2px; right: 1px;
+        position: absolute;
+        bottom: 2px;
+        right: 1px;
 
         &:hover {
           opacity: 1;
         }
 
         button {
-          width: 16px; height: 16px;
+          width: 16px;
+          height: 16px;
 
           &:before {
             font-size: 12px;
@@ -1332,7 +1386,8 @@ input::-moz-focus-inner {
 
   /* the small resize handle bottom right */
   .x-resizable-handle-southeast {
-    bottom: 1px; right: 3px;
+    bottom: 1px;
+    right: 3px;
   }
 }
 
@@ -1341,6 +1396,7 @@ input::-moz-focus-inner {
   border-bottom-color: #bcbcbc;
   color: #464646;
 }
+
 /*.x-resizable-pinned .x-combo-list-inner {
   border-bottom-color: transparent;
 }*/
@@ -1376,6 +1432,7 @@ input::-moz-focus-inner {
       margin: 0;
     }
   }
+
   .x-date-mp-ok,
   .x-date-mp-cancel {
     height: 16px;
@@ -1404,10 +1461,13 @@ input::-moz-focus-inner {
     color: $colorSplash;
     content: '';
     font-size: 18px;
-    position: absolute; top: 0; left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
     text-align: center;
     vertical-align: middle;
-    width: 18px; height: 18px;
+    width: 18px;
+    height: 18px;
   }
 
   &:hover {
@@ -1415,6 +1475,7 @@ input::-moz-focus-inner {
     filter: alpha(opacity=100); /* for IE <= 8 */
   }
 }
+
 .x-date-right a,
 .x-date-mp-ybtn a.x-date-mp-next {
   &:before {
@@ -1423,21 +1484,25 @@ input::-moz-focus-inner {
     right: 0;
   }
 }
+
 .x-date-left a,
 .x-date-mp-ybtn a.x-date-mp-prev {
   &:before {
     content: fa-content($fa-var-caret-left);
   }
 }
+
 .x-date-inner {
   margin: 0 auto;
 }
+
 .x-date-inner th {
   border-bottom-color: $lightGray;
   color: $darkGray;
   font: $fontSmall;
   font-weight: bold;
 }
+
 .x-date-inner td,
 .x-date-mp td {
   background-color: $white;
@@ -1445,6 +1510,7 @@ input::-moz-focus-inner {
   font: $fontSmall;
   padding: 1px;
 }
+
 .x-date-inner a,
 td.x-date-mp-month a,
 td.x-date-mp-year a {
@@ -1453,10 +1519,12 @@ td.x-date-mp-year a {
   font: inherit;
   font-weight: bold;
 }
+
 td.x-date-mp-month a,
 td.x-date-mp-year a {
   margin: 0 3px 0 3px;
 }
+
 .x-date-inner a:hover,
 .x-date-inner .x-date-prevday a:hover,
 .x-date-inner .x-date-nextday a:hover,
@@ -1466,23 +1534,29 @@ td.x-date-mp-year a:hover {
   background-color: $softGray;
   color: $darkGray;
 }
+
 .x-date-inner .x-date-disabled a {
   background-color: $lightGray;
   color: $mediumGray;
 }
+
 .x-date-inner .x-date-active {
   color: $black;
 }
+
 .x-date-inner .x-date-today a {
   border-color: $colorSplash;
 }
+
 .x-date-inner span {
   font-style: normal; /* prevent italic font style because of em */
 }
+
 .x-date-inner .x-date-active span,
 .x-date-inner .x-date-selected span {
   font-weight: bold;
 }
+
 .x-date-inner .x-date-selected a,
 td.x-date-mp-sel a {
   background-color: $colorSplash;
@@ -1490,10 +1564,12 @@ td.x-date-mp-sel a {
   border-color: $white;
   color: $colorSplashContrast;
 }
+
 .x-date-inner .x-date-prevday a,
 .x-date-inner .x-date-nextday a {
   color: $softGray;
 }
+
 .x-date-bottom,
 .x-date-mp-btns {
   border-top: 1px solid $lightGray;
@@ -1504,16 +1580,20 @@ td.x-date-mp-sel a {
     border-top: 1px solid $lightGray;
   }
 }
+
 td.x-date-mp-sep {
   border-right: 1px solid $borderColor;
 }
+
 .x-date-mmenu {
-  background-color: #eee !important;
+  background-color: $gallery !important;
 }
+
 .x-date-mmenu .x-menu-item {
   color: $black;
   font: $fontSmall;
 }
+
 /*.x-date-mp {
   background-color: $white;
 }*/
@@ -1522,8 +1602,8 @@ td.x-date-mp-sep {
 }*/
 /*.x-date-mp-btns button {
   background-color: #373737;
-  border-color: #686868 #101010 #101010 #686868;
-  color: #fff;
+  border-color: $doveGray #101010 #101010 $doveGray;
+  color: $white
   font: $fontSmall;
 }*/
 /*.x-date-mp-btns {
@@ -1531,7 +1611,7 @@ td.x-date-mp-sep {
   background-image: url($imgPath + 'modx-theme/shared/glass-bg.gif');
 }*/
 /*.x-date-mp-btns td {
-  border-top-color: #DFDFDF;
+  border-top-color: $alto;
 }*/
 /*td.x-date-mp-month a,
 td.x-date-mp-year a {
@@ -1539,7 +1619,7 @@ td.x-date-mp-year a {
 }*/
 /*td.x-date-mp-month a:hover,
 td.x-date-mp-year a:hover {
-  background-color: #DFDFDF;
+  background-color: $alto;
   color: #464646;
 }*/
 /*td.x-date-mp-sel a {
diff --git a/_build/templates/default/sass/_help.scss b/_build/templates/default/sass/_help.scss
index 20dc3866ecf..59fcb3e92ef 100644
--- a/_build/templates/default/sass/_help.scss
+++ b/_build/templates/default/sass/_help.scss
@@ -51,8 +51,7 @@
   border: 1px solid $borderColor;
   box-shadow: 0 1px 0 $borderColor;
   color: $darkestGray;
-  display: table-cell;
-  /* MODX 2.x.x Manager Button Styles */
+  display: table-cell; /* MODX 2.x.x Manager Button Styles */
   font: $fontSmall;
   font-weight: bold;
   padding: 12px;
@@ -88,13 +87,14 @@
 
 #helpBanner,
 #contactus {
-  box-sizing:border-box;
-  background: #fff;
+  box-sizing: border-box;
+  background: $white;
   border: 1px solid $borderColor;
   box-shadow: 0 1px 0 $borderColor;
   margin: 0.75em 0 1.75em;
   padding: 18px;
   width: 100%;
+
   h3 {
     margin: 0 0 1em;
   }
@@ -105,11 +105,12 @@
   min-height: 112px;
   background-color: transparent;
   background-image: url($imgPath + 'modx-logo-color.png');
-  background-image: url($imgPath + 'modx-logo-color.svg'),none;
+  background-image: url($imgPath + 'modx-logo-color.svg'), none;
   background-repeat: no-repeat;
-  background-attachment:none;
+  background-attachment: none;
   background-position: 97% center;
   background-size: 200px;
+
   #helpLogo {
     float: right;
     height: 76px;
@@ -119,19 +120,22 @@
 }
 
 #contactus {
-  box-sizing:border-box;
+  box-sizing: border-box;
   float: left;
   width: 60%;
+
   form {
     display: inline;
   }
+
   input[type=email] {
-    box-sizing:border-box;
+    box-sizing: border-box;
     font-size: 1.1em;
     margin-right: 4px;
     padding: 0.4em;
     width: 70%;
   }
+
   input[type=submit] {
     /*background: none;*/
     border: 0;
@@ -139,11 +143,13 @@
     font-size: 1.1em;
     padding: 6px 10px;
   }
+
   p {
     color: lighten($mainText, 15%);
     margin: 1em 0;
   }
-  form + p {
+
+  form+p {
     margin: 2em 0 0;
   }
 }
@@ -151,12 +157,15 @@
 #contactus a {
   color: $mainText;
   text-decoration: none;
+
   &:hover {
     text-decoration: underline;
+
     i {
       text-decoration: none;
     }
   }
+
   i {
     margin: 0 8px -6px 0;
   }
@@ -165,13 +174,15 @@
 #mcsignup input.x-btn {
   padding: 10px 15px;
 }
+
 .icon.icon-2x {
   width: 22px;
   text-align: center;
   vertical-align: text-bottom;
 }
+
 #aboutMODX {
-  box-sizing:border-box;
+  box-sizing: border-box;
   background: $lighterGray;
   float: left;
   margin: 1em 0 0 2%;
@@ -183,13 +194,15 @@
     line-height: 1.6;
     margin: 0 0 1em;
   }
+
   a {
     color: $colorSplash;
     margin: -2px -4px;
     padding: 2px 4px;
+
     &:hover {
       background-color: $colorSplash;
-      color: #fff;
+      color: $white;
       text-decoration: none;
     }
   }
diff --git a/_build/templates/default/sass/_image-set.scss b/_build/templates/default/sass/_image-set.scss
index 4ac7f5b63ca..fb4a92fe79f 100644
--- a/_build/templates/default/sass/_image-set.scss
+++ b/_build/templates/default/sass/_image-set.scss
@@ -2,4 +2,4 @@
   background-image: url(#{$img1});
 
   background-image: -webkit-image-set(url(#{$img1}) 1x, url(#{$img2}) 2x);
-}
\ No newline at end of file
+}
diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
index 10421d0416e..1f5f850f3a4 100644
--- a/_build/templates/default/sass/_navbar.scss
+++ b/_build/templates/default/sass/_navbar.scss
@@ -3,6 +3,7 @@
     background: transparent;
   }
 }
+
 #modx-leftbar-tabs-xcollapsed {
   display: none !important;
 }
@@ -12,6 +13,7 @@
   z-index: 0;
   min-width: 270px;
   box-shadow: $boxShadow;
+
   .x-toolbar {
     padding: 0 !important;
     border: 0;
@@ -35,12 +37,15 @@
   display: flex;
   flex-direction: column;
   padding: 0 10px;
+
   .icon {
     color: $white;
     font-size: 20px;
     vertical-align: middle;
   }
-  li, a {
+
+  li,
+  a {
     background: transparent;
     margin: 0;
     padding: 0;
@@ -48,6 +53,7 @@
     width: 100%;
     text-align: center;
   }
+
   a {
     cursor: pointer;
     color: $navbarText;
@@ -56,15 +62,17 @@
     font-size: 10px;
     text-decoration: none;
   }
+
   li {
     a:hover {
       opacity: .7;
     }
   }
+
   #modx-manager-search-icon a,
   #modx-leftbar-trigger a,
   #modx-user-menu a {
-      padding: 12px 0;
+    padding: 12px 0;
   }
 
   #modx-topnav {
@@ -72,14 +80,17 @@
     list-style: none;
     margin: 0;
     padding: 0;
+
     .top:not(#modx-manager-search-icon) {
       border-top: 1px solid $navbarBorder;
     }
-    > li:not(#modx-home-dashboard):not(#modx-manager-search-icon):not(#modx-leftbar-trigger) {
-      > a {
+
+    >li:not(#modx-home-dashboard):not(#modx-manager-search-icon):not(#modx-leftbar-trigger) {
+      >a {
         display: block;
         position: relative;
         padding: 12px 0;
+
         &:before {
           @include absolute-corners;
           @include awesome-font;
@@ -91,14 +102,33 @@
         }
       }
     }
-    #limenu-site > a:before { content: fa-content($fa-var-file-alt); font-weight: 300 !important; }
-    #limenu-media > a:before { content: fa-content($fa-var-file-image); font-weight: 300 !important; }
-    #limenu-components > a:before { content: fa-content($fa-var-cube); }
-    #limenu-manage > a:before { content: fa-content($fa-var-sliders-h); }
+
+    #limenu-site>a:before {
+      content: fa-content($fa-var-file-alt);
+      font-weight: 300 !important;
+    }
+
+    #limenu-media>a:before {
+      content: fa-content($fa-var-file-image);
+      font-weight: 300 !important;
+    }
+
+    #limenu-components>a:before {
+      content: fa-content($fa-var-cube);
+    }
+
+    #limenu-manage>a:before {
+      content: fa-content($fa-var-sliders-h);
+    }
   }
+
   #modx-user-menu {
     margin-top: auto;
-    #user-username { display: none; }
+
+    #user-username {
+      display: none;
+    }
+
     #user-avatar {
       img {
         border-radius: 20px;
@@ -108,12 +138,14 @@
         margin: auto;
       }
     }
+
     #limenu-user a {
       display: flex;
       flex-direction: column;
       justify-content: center;
     }
   }
+
   #modx-home-dashboard {
     border-radius: $borderRadius;
     width: 40px;
@@ -121,13 +153,19 @@
     line-height: 40px;
     padding: 10px;
   }
+
   #modx-site-info {
     font-size: 10px;
-    .site_name { color: #fff }
+
+    .site_name {
+      color: $white;
+    }
+
     .full_appname {
       color: $white;
     }
-    > .info-item {
+
+    >.info-item {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -151,11 +189,13 @@
 
 #modx-leftbar-trigger {
   transition: all .2s ease;
+
   .icon {
     &:before {
       content: fa-content($fa-var-arrow-left);
     }
   }
+
   &.collapsed {
     .icon:before {
       content: fa-content($fa-var-arrow-right) !important;
@@ -177,6 +217,7 @@
     opacity: 0;
     visibility: hidden;
     transition: all .15s ease;
+
     li {
       display: block;
       border-radius: $borderRadius;
@@ -184,14 +225,17 @@
       margin: 0;
       padding: 0;
       position: relative;
+
       &:not(:first-child) {
         border-top: 1px solid $subnavSepBorder;
       }
+
       &:hover {
         &:after {
           border-right-color: $subnavBgHover;
         }
       }
+
       &.sub {
         &:after {
           @extend %pseudo-font;
@@ -204,6 +248,7 @@
           right: 10px;
         }
       }
+
       a {
         border-radius: $borderRadius;
         text-align: left;
@@ -218,6 +263,7 @@
         display: block;
         text-decoration: none;
         cursor: pointer;
+
         span {
           color: $subnavDescriptionColor;
           display: block;
@@ -228,21 +274,25 @@
           margin-top: 6px;
           width: 100%;
         }
+
         &:hover {
           background: $subnavBgHover;
           border-top-color: $subnavBorder;
           border-bottom-color: $subnavBorder;
           color: $darkestGray;
+
           .description {
             color: darken($subnavDescriptionColor, 16%);
           }
         }
       }
     }
+
     &.active {
       opacity: 1;
       visibility: visible;
     }
+
     .modx-subsubnav {
       border: 1px solid $navbarBorder;
       box-shadow: $boxShadowBig;
@@ -255,6 +305,7 @@
       bottom: 0;
       z-index: 24;
     }
+
     &-arrow {
       right: 100%;
       border: 12px solid transparent;
@@ -265,10 +316,11 @@
       margin-top: -6px;
     }
   }
+
   // custom styles for language menu
   #limenu-user-submenu #language .modx-subsubnav {
-      max-height: 86vh;
-      overflow-y: auto;
+    max-height: 86vh;
+    overflow-y: auto;
   }
 }
 
@@ -278,20 +330,25 @@
     min-width: 100%;
     height: auto !important;
   }
+
   #modx-navbar {
     flex-direction: row;
     flex-wrap: wrap;
+
     #modx-headnav {
       order: 1;
       width: 50%;
+
       a {
         line-height: initial !important;
       }
     }
+
     #modx-topnav {
       width: 100%;
       order: 0;
     }
+
     #modx-user-menu {
       flex-direction: row-reverse;
       flex-wrap: nowrap;
@@ -300,46 +357,58 @@
       margin-top: 0;
     }
 
-    & > ul {
+    &>ul {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
-      > li {
+
+      >li {
         flex-basis: 50px;
       }
     }
+
     #modx-site-info {
       display: none;
     }
+
     #modx-home-dashboard {
       margin: 0;
       padding: 5px;
     }
   }
+
   #modx-leftbar-trigger {
     .icon {
       padding: 3px 4px;
+
       &:before {
         content: fa-content($fa-var-arrow-up);
       }
     }
+
     &.collapsed {
       .icon:before {
         content: fa-content($fa-var-arrow-down) !important;
       }
     }
   }
+
   #modx-footer {
     .modx-subnav {
-      .description { display: none; }
+      .description {
+        display: none;
+      }
+
       li {
         border-radius: 0;
+
         a {
           width: auto;
           white-space: nowrap;
         }
       }
+
       .modx-subsubnav {
         position: initial;
         left: auto;
@@ -347,11 +416,13 @@
         display: block;
         max-height: initial !important;
         overflow-y: initial !important;
-        li > a {
+
+        li>a {
           margin-left: 1rem;
         }
       }
     }
+
     .modx-subnav-arrow {
       border-right-color: transparent;
       border-bottom-color: $subnavBg;
@@ -359,6 +430,7 @@
       right: auto;
       top: -12px;
     }
+
     .modx-subnav-wrapper {
       max-height: 400px;
       overflow-y: auto;
@@ -369,7 +441,9 @@
 @media (max-height: 520px) {
   #modx-footer {
     .modx-subnav {
-      .description { display: none; }
+      .description {
+        display: none;
+      }
     }
   }
 }
diff --git a/_build/templates/default/sass/_tabs.scss b/_build/templates/default/sass/_tabs.scss
index 195f3477a0e..3e222c3e746 100644
--- a/_build/templates/default/sass/_tabs.scss
+++ b/_build/templates/default/sass/_tabs.scss
@@ -25,7 +25,8 @@
 }
 
 .x-tab-panel-header ul.x-tab-strip {
-  background-color: $tabStripBg !important; /* override !important extjs default theme style */
+  background-color: $tabStripBg !important;
+  /* override !important extjs default theme style */
   /*border-bottom-color: $white;*/
   border: 0; /* prevent overflowing border, add to .x-tab-strip-wrap if necessary */
   margin: 0; /* was -1px */
@@ -36,7 +37,7 @@
 
 .x-tab-panel-header-plain .x-tab-strip-spacer,
 .x-tab-panel-footer-plain .x-tab-strip-spacer {
-  /*background-color: #fff;*/
+  /*background-color: $white*/
   border: none;
   height: 0;
   /*margin: -2px 0 0 0; /* was -2px 0 0 -1px */
@@ -46,7 +47,7 @@
 
   /* take care of nested tab panels as seen in MIGX */
   .x-tab-panel {
-    padding-top: 18px; /* 15px + 3px for the active tab box-shadow on top */
+    padding-top: 18px;  /* 15px + 3px for the active tab box-shadow on top */
 
     &.vertical-tabs-panel {
       padding-top: 0; /* do not add that padding to vertical tabs panels */
@@ -58,25 +59,25 @@
       margin: 0; /* revert margin from main tabs for nested ones */
 
       .x-tab-strip {
-        background-color: $lightestGray !important; /* override !important rule defined by extjs default theme */
+        background-color: $lightestGray !important;
+        /* override !important rule defined by extjs default theme */
       }
     }
 
-    .x-tab-panel-body {
-      /*border-top: 1px solid $softGray;*/
-    }
   }
 }
 
 .x-tab-panel-header,
 .x-tab-strip {
-  padding-left: 0; /* was 1px */
+  padding-left: 0;
+  /* was 1px */
 }
 
 .x-tab-panel-bwrap {
   box-shadow: $boxShadow;
   border-radius: $borderRadius;
-  overflow: visible; /* prevent cut off box-shadow */
+  overflow: visible;
+  /* prevent cut off box-shadow */
 
   /* no box-shadows on nested tab panels, MIGX for example */
   .x-tab-panel-bwrap {
@@ -91,7 +92,6 @@ ul.x-tab-strip li {
   border-top-right-radius: $borderRadius;
   cursor: pointer;
   font: $tabFont;
-  //font-weight: bold;
   line-height: 2.2;
   margin-left: 0;
   padding: 0 12px;
@@ -148,13 +148,13 @@ ul.x-tab-strip li {
 }
 
 ul.x-tab-strip-top li:first-child {
-  /*margin-left: -1px*/;
+  /*margin-left: -1px*/
   margin-left: 0;
 }
 
 ul.x-tab-strip-bottom {
-  background-color: #f4f4f4;
-  border-top-color: #dfdfdf;
+  background-color: $wildSand;
+  border-top-color: $alto;
 
   & .x-tab-right {
     background-image: url($imgPath + 'modx-theme/tabs/tab-btm-inactive-right-bg.gif');
@@ -162,6 +162,7 @@ ul.x-tab-strip-bottom {
     & .x-tab-right {
       background-image: url($imgPath + 'modx-theme/tabs/tab-btm-right-bg.gif');
     }
+
     & .x-tab-left {
       background-image: url($imgPath + 'modx-theme/tabs/tab-btm-left-bg.gif');
     }
@@ -182,6 +183,7 @@ ul.x-tab-strip-bottom {
 .x-tab-scroller-left,
 .x-tab-scroller-right {
   border: 0;
+
   &:before {
     @extend %pseudo-font;
 
@@ -192,7 +194,9 @@ ul.x-tab-strip-bottom {
     margin-top: -14px; /* half of the height to center vertically with top 50% */
     opacity: 1;
     filter: alpha(opacity=100); /* for IE <= 8 */
-    position: absolute; top: 50%; right: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
     text-align: center;
     width: 18px;
     transition: opacity 0.25s;
@@ -209,7 +213,7 @@ ul.x-tab-strip-bottom {
 
     &:before {
       color: $treeColor;
-      opacity: 0.4;
+      opacity: .4;
       filter: alpha(opacity=100); /* for IE <= 8 */
     }
   }
@@ -229,7 +233,7 @@ ul.x-tab-strip-bottom {
 
 .x-tab-panel-bbar .x-toolbar,
 .x-tab-panel-tbar .x-toolbar {
-  border-color: #dfdfdf;
+  border-color: $alto;
 }
 
 .x-tab-panel-body-noborder .x-panel-body-noheader:first-child {
@@ -276,7 +280,7 @@ ul.x-tab-strip-bottom {
         top: 0; /* overrides extjs default theme style of 1px */
         width: auto;
 
-        > li {
+        >li {
           border-right: 1px solid $borderColor;
           border-bottom: 1px solid $borderColor;
           color: $coreFieldLabelColor;
@@ -318,15 +322,16 @@ ul.x-tab-strip-bottom {
         }
       }
     }
+
     /* the "categories" text */
     h4 {
-      background: $white;
-      /*border-right: 1px solid $borderColor;*/
+      background: $white; /*border-right: 1px solid $borderColor;*/
       border-bottom: 1px solid $borderColor;
       color: $darkestGray;
       font-size: 16px;
       padding: 15px 0 15px 15px;
     }
+
     .x-tab-strip-spacer {
       display: none; /* added by extjs */
     }
@@ -344,10 +349,6 @@ ul.x-tab-strip-bottom {
     .vertical-tabs-body {
       border: 0; /* do not add the top border for nested tabs panels */
       padding: 15px 20px 15px 15px; /* 20px account for too wide form fields (no border-box) */
-
-      /*.tvs-wrapper & {*/
-        /*padding: 15px 20px 15px 30px; /* 30px account for the tv reset icon */
-      /*}*/
     }
   }
 }
@@ -369,6 +370,7 @@ ul.x-tab-strip-bottom {
   .x-panel-mr {
     padding-right: 0px;
   }
+
   .vertical-tabs-panel {
     width: 100% !important;
     margin: 0px;
diff --git a/_build/templates/default/sass/_toolbars.scss b/_build/templates/default/sass/_toolbars.scss
index 6f88202c16f..48c6942ff9b 100644
--- a/_build/templates/default/sass/_toolbars.scss
+++ b/_build/templates/default/sass/_toolbars.scss
@@ -1,7 +1,7 @@
 .x-toolbar {
   background-color: #F7F7F7;
   background-image: none;
-  border-color: #DFDFDF;
+  border-color: $alto;
 
   .xtb-text,
   .x-toolbar-cell label {
@@ -10,7 +10,7 @@
   }
 
   .x-item-disabled {
-    opacity: 0.6;
+    opacity: .6;
     filter: alpha(opacity=60); /* for IE <= 8 */
   }
 
@@ -23,8 +23,12 @@
   }
 }
 
-.x-toolbar td,.x-toolbar span,.x-toolbar input,
-.x-toolbar div,.x-toolbar select,.x-toolbar label {
+.x-toolbar td,
+.x-toolbar span,
+.x-toolbar input,
+.x-toolbar div,
+.x-toolbar select,
+.x-toolbar label {
   font: $fontSmall;
   line-height: 0;
 }
@@ -33,13 +37,6 @@
   line-height: 1;
 }
 
-.x-toolbar .x-btn-over em.x-btn-split,
-.x-toolbar .x-btn-click em.x-btn-split,
-.x-toolbar .x-btn-menu-active em.x-btn-split,
-.x-toolbar .x-btn-pressed em.x-btn-split {
- /* background-image: url($imgPath + 'modx-theme/button/s-arrow-o.gif');*/
-}
-
 .x-toolbar em.x-btn-split-bottom {
   background-image: url($imgPath + 'modx-theme/button/s-arrow-b-noline.gif');
 }
@@ -65,67 +62,72 @@
 
 .x-tbar-page-last {
   background: none !important;
-  position:relative;
+  position: relative;
+
   &:before {
     @extend %pseudo-font-x-btn;
     content: fa-content($fa-var-forward);
-    top:1px;
-    left:1px;
-    right:auto;
+    top: 1px;
+    left: 1px;
+    right: auto;
   }
 }
 
 .x-tbar-page-next {
   background: none !important;
-  position:relative;
+  position: relative;
+
   &:before {
     @extend %pseudo-font-x-btn;
     content: fa-content($fa-var-caret-right);
-    font-size:18px;
-    line-height:110%;
-    left:1px;
-    right:auto;
+    font-size: 18px;
+    line-height: 110%;
+    left: 1px;
+    right: auto;
   }
 }
 
 .x-tbar-page-prev {
   background: none !important;
-  position:relative;
+  position: relative;
+
   &:before {
     @extend %pseudo-font-x-btn;
     content: fa-content($fa-var-caret-left);
-    font-size:18px;
-    line-height:110%;
-    left:auto;
-    right:1px;
+    font-size: 18px;
+    line-height: 110%;
+    left: auto;
+    right: 1px;
   }
 }
 
 .x-tbar-loading {
   background: none !important;
-  position:relative;
+  position: relative;
+
   &:before {
     @extend %pseudo-font-x-btn;
     content: fa-content($fa-var-redo);
-    top:1px;
-    bottom:auto;
+    top: 1px;
+    bottom: auto;
   }
 }
 
 .x-tbar-page-first {
   background: none !important;
-  position:relative;
+  position: relative;
+
   &:before {
     @extend %pseudo-font-x-btn;
     content: fa-content($fa-var-backward);
-    top:1px;
-    left:auto;
-    right:1px;
+    top: 1px;
+    left: auto;
+    right: 1px;
   }
 }
 
 .x-paging-info {
-  color: #444;
+  color: $tundora;
 }
 
 .x-toolbar-more-icon {
@@ -160,6 +162,7 @@
       &.x-tbar-page-size {
         width: 32px;
       }
+
       &.x-tbar-page-number {
         margin-right: 3px;
       }
@@ -199,6 +202,7 @@
   border: 0;
   padding: 15px 0 7px 0;
 }
+
 .x-panel-tbar-noheader .x-toolbar {
   background-color: transparent;
   background-image: none;
@@ -208,16 +212,24 @@
 
 
 
-.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
+.x-toolbar td,
+.x-toolbar span,
+.x-toolbar input,
+.x-toolbar div,
+.x-toolbar select,
+.x-toolbar label {
   border-radius: $borderRadius;
 }
+
 .x-html-editor-tb .x-btn-text {
   background-image: url($imgPath + 'modx-theme/editor/tb-sprite.gif');
 }
+
 .x-panel-noborder .x-panel-tbar-noborder .x-toolbar {
   background-color: transparent;
   border-bottom-color: transparent;
 }
+
 .x-panel-noborder .x-panel-bbar-noborder .x-toolbar {
   border-top-color: transparent;
 }
diff --git a/_build/templates/default/sass/_trash.scss b/_build/templates/default/sass/_trash.scss
index 939db6e27f8..5d79996d38f 100644
--- a/_build/templates/default/sass/_trash.scss
+++ b/_build/templates/default/sass/_trash.scss
@@ -1,21 +1,23 @@
 .trashrow {
-  background-color: silver !important;
+  background-color: $silver !important;
 }
 
 .x-btn-purge-all {
   color: $red;
+
   &:hover {
     background: $red;
     box-shadow: 0 0 0 1px $red;
-    color: white;
+    color: $white;
   }
 }
 
 .x-btn-restore-all {
   color: $green;
+
   &:hover {
     background: $green;
     box-shadow: 0 0 0 1px $green;
-    color: white;
+    color: $white;
   }
 }
diff --git a/_build/templates/default/sass/_tree.scss b/_build/templates/default/sass/_tree.scss
index b3868ed3a5b..8c6378ec8c5 100644
--- a/_build/templates/default/sass/_tree.scss
+++ b/_build/templates/default/sass/_tree.scss
@@ -2,10 +2,12 @@
 @import "font-awesome/mixins";
 
 #modx-leftbar {
+
   /* the main container + bg behind the tabs */
   .x-tab-panel-noborder {
     margin: 0;
   }
+
   .x-tab-panel-bwrap {
     border-radius: 0 0 $borderRadius $borderRadius;
     position: relative;
@@ -16,46 +18,53 @@
       background: $mainBg;
     }
   }
-  #modx-leftbar-tabpanel { // janky
+
+  #modx-leftbar-tabpanel {
     @include grid-media($mobile) {
-      width:auto !important;
-      margin:0 auto;
-      padding:0.5em;
+      width: auto !important;
+      margin: 0 auto;
+      padding: 0.5em;
     }
   }
+
   @include grid-media($mobile) {
-    position:relative !important;
-	top:auto !important;
-	left:auto !important;
-	width:100% !important;
-	height:auto !important;
+    position: relative !important;
+    top: auto !important;
+    left: auto !important;
+    width: 100% !important;
+    height: auto !important;
     box-shadow: none;
     margin: 0 auto 10px auto;
+
     #modx-leftbar-header {
       display: none;
     }
   }
 
   .x-plain-body {
-	  @include grid-media($mobile) {
-		  height:auto !important;
-	  }
+    @include grid-media($mobile) {
+      height: auto !important;
+    }
   }
 
   & .x-tab-panel-noborder {
     margin: 0;
   }
+
   /* the toolbars just below the tabs */
   & .x-panel-tbar {
     padding: 0;
   }
+
   & .x-toolbar {
     padding: 4px 5px 2px 0;
   }
+
   /* root box containing a context or category */
   & .x-tree-root-ct {
     padding: 6px;
   }
+
   /* just the actual nodes */
   & .x-tree .x-panel-body {
     background: $white;
@@ -64,8 +73,8 @@
 }
 
 #modx-tree-usergroup .x-toolbar-left-row {
-    display: flex;
-    flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 #modx-resource-tree-tbar .x-toolbar-left .x-btn.tree-new-resource,
@@ -74,14 +83,18 @@
 }
 
 #modx-split-wrapper {
-  .x-layout-split, #modx-leftbar-tabs-xcollapsed {
+
+  .x-layout-split,
+  #modx-leftbar-tabs-xcollapsed {
     margin-left: -80px;
   }
 }
+
 .x-layout-split {
   overflow: visible;
   width: 8px;
   z-index: 2;
+
   &:hover {
     background: $mediumGray;
   }
@@ -92,13 +105,16 @@
   .x-layout-mini {
     //display: none;
     left: 0;
+
     &:after {
       border-right: 0;
       border-left: 5px solid $treeColor;
-	  @include grid-media($mobile) {
-		  border:none;
-	  }
+
+      @include grid-media($mobile) {
+        border: none;
+      }
     }
+
     &:hover:after {
       border-left-color: $colorSplash;
     }
@@ -107,6 +123,7 @@
 
 .modx-tree {
   padding: 0;
+
   #modx-file-tree & {
     &:first-child {
       padding-top: 4px;
@@ -120,11 +137,13 @@
 .x-tree-arrows .x-tree-elbow-end-plus,
 .x-tree-arrows .x-tree-elbow-end-minus {
   background: none;
+
   &:hover {
     background: lighten($treeText, 25);
     border-radius: 50%;
   }
 }
+
 .x-tree-arrows .x-tree-elbow-plus:before,
 .x-tree-arrows .x-tree-elbow-minus:before,
 .x-tree-arrows .x-tree-elbow-end-plus:before,
@@ -135,6 +154,7 @@
   padding-left: 6px;
   margin: 0 0 0 -16px;
 }
+
 .x-tree-arrows .x-tree-elbow-minus:before,
 .x-tree-arrows .x-tree-elbow-end-minus:before {
   @extend %pseudo-font;
@@ -148,30 +168,38 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-globe);
 }
+
 .x-tree-node-expanded .tree-folder:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-folder-open);
 }
-.x-tree-node-collapsed .tree-folder:before, .x-tree-node .tree-folder:before {
+
+.x-tree-node-collapsed .tree-folder:before,
+.x-tree-node .tree-folder:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-folder);
 }
+
 .x-tree-node .locked-resource:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-lock);
 }
+
 .tree-resource:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file);
 }
+
 .tree-static-resource:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-alt);
 }
+
 .tree-weblink:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-link);
 }
+
 .tree-symlink:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-copy);
@@ -182,13 +210,16 @@
   color: $treeColor;
   font: $treeNodeFont;
   padding-left: 6px;
+
   &.is_folder {
     background: $treeFolderBg;
   }
+
   .x-btn {
     -moz-box-shadow: none;
     box-shadow: none;
   }
+
   .icon {
     display: inline-block;
     width: 1em;
@@ -197,8 +228,10 @@
     line-height: (3em / 4);
     vertical-align: -15%;
   }
+
   a span {
     padding-left: 7px;
+
     & span {
       padding-left: 0;
     }
@@ -211,11 +244,12 @@
 
 /* tweak icons for FA 5.2.0 */
 .x-tree-node-el {
-    .icon-refresh,
-    .icon-plus-circle {
-        font-size: 1em;
-        vertical-align: 0;
-    }
+
+  .icon-refresh,
+  .icon-plus-circle {
+    font-size: 1em;
+    vertical-align: 0;
+  }
 }
 
 .unpublished,
@@ -228,6 +262,7 @@
     font-style: normal;
   }
 }
+
 .hidemenu,
 .hidemenu a span {
   color: $hidden;
@@ -244,26 +279,18 @@
     font-style: normal;
   }
 }
-:not(.hidemenu),
-:not(.hidemenu) a span {
-  &.unpublished,
-  &.unpublished a span {
-    //color: $unpublished;
-  }
-}
+
 .deleted {
   color: $delTextColor;
 
   i.icon,
   i.icon-large {
-    color: $delTextColor;
-    // font-style: normal;
+    color: $delTextColor; // font-style: normal;
   }
 
   a span {
     color: $delTextColor;
-    text-decoration: $delTextDeco;
-    /* deleted files should inherit the text style from published/unpublished and
+    text-decoration: $delTextDeco; /* deleted files should inherit the text style from published/unpublished and
        not overwrite it */
     // font-style: $delTextStyle;
   }
@@ -272,12 +299,15 @@
 .element-node-disabled a span {
   color: $disabledTextColor;
 }
+
 .x-tree-node {
-  position:relative;
+  position: relative;
   background: $treeItemBg;
   color: $treeItemColor;
+
   .x-tree-node-disabled,
   .element-node-disabled {
+
     a span,
     i.icon {
       color: $disabledTextColor;
@@ -290,14 +320,16 @@
 }
 
 .modx-tree-node-tool-ct {
-  position:absolute;
-  top:0;
-  right:6px;
-  bottom:0;
-  line-height:1.8;
+  position: absolute;
+  top: 0;
+  right: 6px;
+  bottom: 0;
+  line-height: 1.8;
 
   .x-btn {
-    &:hover, &:focus {
+
+    &:hover,
+    &:focus {
       color: $primary2 !important;
     }
   }
@@ -306,26 +338,29 @@
 /* Direct create buttons for a tree node */
 .x-tree-node-el {
   .modx-tree-node-btn-create {
-    position:absolute;
-    top:0;
-    right:6px;
-    bottom:0;
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 0;
     line-height: 30px;
-    opacity:0;
+    opacity: 0;
     transition: opacity 0.4s ease-in;
 
     .x-btn {
       color: $darkGray;
-      opacity: 0.4;
+      opacity: .4;
       transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
 
-      &:hover, &:focus {
+      &:hover,
+      &:focus {
         opacity: 1.0;
         color: $green;
       }
     }
   }
-  &:hover, &:focus {
+
+  &:hover,
+  &:focus {
     .modx-tree-node-btn-create {
       opacity: 1.0;
     }
@@ -338,52 +373,59 @@
   padding: 0 !important;
 }
 
-.tree-pseudoroot-node + .x-tree-node-ct {
-  //background: transparent url($imgPath + 'modx-theme/tree/tree-bg.png') !important;
-}
-
 .tree-pseudoroot-node.x-tree-node-el {
   background-color: $treePseudoRootBg;
   font: $treePseudoRootFont;
-  position:relative;
+  position: relative;
   padding: 0 0 0 4px;
+
   a span {
     color: $treePseudoRootColor;
   }
-  > .icon {
+
+  >.icon {
     color: $treePseudoRootColor;
   }
 
   .modx-tree-node-tool-ct {
     line-height: 3;
-    opacity: 0.5;
+    opacity: .5;
     filter: alpha(opacity=50); /* for IE <= 8 */
+
     .x-btn {
       margin-left: 2px;
     }
   }
+
   &.x-tree-node-collapsed {
     border-bottom: 1px solid $borderColor;
   }
-  &.x-tree-node-expanded, &.x-tree-node-expanded span, &.x-tree-node-expanded > .icon {
-    color: $treePseudoRootColor;
-    //background-color: $treePseudoRootBg;
+
+  &.x-tree-node-expanded,
+  &.x-tree-node-expanded span,
+  &.x-tree-node-expanded>.icon {
+    color: $treePseudoRootColor; //background-color: $treePseudoRootBg;
   }
+
   &.x-tree-node-over {
     background-color: $treePseudoRootOverBg;
     color: $treePseudoRootOverColor;
   }
-  + .x-tree-node-ct, + div > .x-tree-node-ct {
-    background: $treeBg;
-    //padding: 5px 0;
+
+  +.x-tree-node-ct,
+  +div>.x-tree-node-ct {
+    background: $treeBg; //padding: 5px 0;
     overflow-x: auto;
+
     &:empty {
       padding: 0;
     }
   }
+
   &:hover .modx-tree-node-tool-ct {
     opacity: 1;
     filter: alpha(opacity=100); /* for IE <= 8 */
+
     .x-btn {
       color: inherit;
     }
@@ -391,25 +433,25 @@
 }
 
 
-.x-tree-elbow, .x-tree-elbow-end {
+.x-tree-elbow,
+.x-tree-elbow-end {
   display: inline-block;
-
-  #modx-leftbar-tabpanel & {
-    /*display: inline;*/
-  }
 }
 
 /* miscellaneous tree styles */
 .x-tree-node-el .x-tree-node-icon {
   display: inline-block;
 }
+
 .x-tree-node-loading .x-tree-node-icon {
   background-image: url($imgPath + 'modx-theme/tree/loading.gif') !important;
 }
+
 .x-tree-node-loading a span {
-  color: #444444;
+  color: $tundora444;
   font-style: italic;
 }
+
 .ext-ie .x-tree-node-el input {
   height: 15px;
   width: 15px;
@@ -417,23 +459,26 @@
 
 /* accordion header row icons */
 #modx-leftbar .icon,
-.x-tree-node /*.modx-tree-node-tool-ct*/ .icon {
+.x-tree-node
+
+/*.modx-tree-node-tool-ct*/
+.icon {
   background: none;
   border: 0;
   display: inline-block;
   margin: 0;
   padding: 3px;
   text-align: center;
-  opacity: 0.8;
+  opacity: .8;
   filter: alpha(opacity=80); /* for IE <= 8 */
 
-    &.icon-folder:before,
-    &.icon-columns:before,
-    &.icon-th-large:before,
-    &.icon-code:before,
-    &.icon-cogs:before {
-        font-weight: 900;
-    }
+  &.icon-folder:before,
+  &.icon-columns:before,
+  &.icon-th-large:before,
+  &.icon-code:before,
+  &.icon-cogs:before {
+    font-weight: 900;
+  }
 
   i {
     font-style: normal;
@@ -459,47 +504,61 @@
 .x-dd-drag-ghost a span {
   color: $treeColor;
 }
+
 .x-tree-node div.x-tree-drag-insert-below {
   border-bottom: 2px solid $colorSplashLight !important;
 }
+
 .x-tree-node div.x-tree-drag-insert-above {
   border-top: 2px solid $colorSplashLight !important;
 }
+
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a {
   border-bottom: 2px solid $colorSplashLight !important;
 }
+
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a {
   border-top: 2px solid $colorSplashLight !important;
 }
+
 .x-tree-node .x-tree-drag-append a span {
   background-color: $brandHover;
   border-color: $borderColor;
 }
+
 .x-tree-node .x-tree-node-over {
   background-color: $brandHover;
 }
+
 .x-tree-node .x-tree-selected {
   background-color: $treeBgSelected;
 }
+
 .x-tree-node .x-tree-expanded {
   color: $brandSelectedColor;
   background-color: $brandHover;
+
   a {
     color: $brandSelectedColor;
+
     span {
       color: $brandSelectedColor;
     }
   }
 }
+
 .x-tree-drop-ok-append .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-add.gif');
 }
+
 .x-tree-drop-ok-above .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-over.gif');
 }
+
 .x-tree-drop-ok-below .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-under.gif');
 }
+
 .x-tree-drop-ok-between .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-between.gif');
 }
@@ -511,11 +570,13 @@
 
   // Set the background position to center
   background-position: center !important;
+
   // .. unless the icon is applied to the actual tree node (e.g. Gallery addon), in which case it needs
   // .. to be in the top left a bit.
   &.x-tree-node-el {
     background-position: 5px 5px !important;
   }
+
   min-width: 16px;
   min-height: 16px;
   vertical-align: middle;
@@ -525,10 +586,12 @@
     content: ' ';
   }
 }
+
 .icon-rss:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-rss);
 }
+
 .icon-cal:before,
 .icon-ical:before,
 .icon-ics:before,
@@ -536,11 +599,13 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-calendar);
 }
+
 .icon-db:before,
 .icon-sql:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-database);
 }
+
 .icon-zip:before,
 .icon-tar:before,
 .icon-tgz:before,
@@ -553,12 +618,14 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-file-archive);
 }
+
 .icon-bk:before,
 .icon-bak:before,
 .icon-backup:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-history);
 }
+
 .icon-jpg:before,
 .icon-jpeg:before,
 .icon-gif:before,
@@ -569,17 +636,20 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-file-image);
 }
+
 .icon-bat:before,
 .icon-scr:before,
 .icon-sh:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-terminal);
 }
+
 .icon-txt:before,
 .icon-log:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-alt);
 }
+
 .icon-aac:before,
 .icon-mp3:before,
 .icon-ogg:before,
@@ -592,6 +662,7 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-file-audio);
 }
+
 .icon-avi:before,
 .icon-mpg:before,
 .icon-mpeg:before,
@@ -606,11 +677,13 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-file-video);
 }
+
 .icon-access:before,
 .icon-htaccess:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-lock);
 }
+
 .icon-php:before,
 .icon-cfm:before,
 .icon-rb:before,
@@ -620,38 +693,45 @@
   @extend %pseudo-font;
   content: fa-content($fa-var-file-code);
 }
+
 .icon-doc:before,
 .icon-docx:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-word);
 }
+
 .icon-csv:before,
 .icon-xls:before,
 .icon-xlsx:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-excel);
 }
+
 .icon-ppt:before,
 .icon-pptx:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-powerpoint);
 }
+
 .icon-pdf:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-pdf);
 }
+
 .icon-html:before,
 .icon-htm:before,
 .icon-xml:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-code);
 }
+
 .icon-js:before,
 .icon-json:before,
 .icon-coffeescript:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-code);
 }
+
 .icon-css:before,
 .icon-scss:before,
 .icon-less:before,
@@ -665,10 +745,12 @@
   background-image: url($imgPath + 'restyle/icons/application_osx_terminal.png') !important;
   @include legacy-tree-icon;
 }
+
 .icon-namespace {
   background-image: url($imgPath + 'restyle/icons/computer.png') !important;
   @include legacy-tree-icon;
 }
+
 /*.icon-propertyset {
   background-image: url($imgPath + 'restyle/icons/property-set.png') !important;
   @extend %hide-font-icon;
@@ -681,61 +763,72 @@
   background-image: url($imgPath + 'restyle/icons/layout_add.png') !important;
   @include legacy-tree-icon;
 }
+
 .icon-mark-active {
   background-image: url($imgPath + 'restyle/icons/layout_edit.png') !important;
   @include legacy-tree-icon;
 }
+
 .icon-mark-complete {
   background-image: url($imgPath + 'restyle/icons/layout_header.png') !important;
   @include legacy-tree-icon;
 }
+
 .icon-package {
   background-image: url($imgPath + 'restyle/icons/package.png') !important;
   padding-right: 5px !important;
   @include legacy-tree-icon;
 }
+
 .icon-locked {
   background-image: url($imgPath + 'restyle/icons/lock_edit.png') !important;
   @include legacy-tree-icon;
 }
+
 .icon-lock {
-  /*background-image: url($imgPath + 'restyle/icons/lock.png') !important;
-  @include legacy-tree-icon;*/
   @extend %pseudo-font;
   content: fa-content($fa-var-lock);
 }
+
 #modx-resource-tree-panel .x-accordion-hd {
   background-position: 0 0;
 }
+
 #modx-element-tree-panel .x-accordion-hd {
   background-position: 0 -32px;
 }
+
 #modx-file-tree-panel .x-accordion-hd {
   background-position: 0 -64px;
 }
+
 #modx-static-page-settings .x-accordion-hd {
   background-position: 0 -96px;
 }
 
 /*
 .x-tree .x-panel-body {
-  background-color:#fff;
+  background-color:$white
   border:1px solid #E4E4E4;
 }*/
 .x-tree-node-el .x-tree-node-icon {
   display: inline-block;
 }
+
 .x-tree-node-loading .x-tree-node-icon {
   background-image: url($imgPath + 'modx-theme/tree/loading.gif') !important;
 }
+
 .x-tree-node-loading a span {
-  color: #444444;
+  color: $tundora444;
   font-style: italic;
 }
+
 .ext-ie .x-tree-node-el input {
   height: 15px;
   width: 15px;
 }
+
 .x-tree-root-ct {
   border-radius: 0;
   overflow: hidden;
@@ -753,6 +846,7 @@
 .x-tree-arrows .x-tree-elbow-end-minus {
   background: none;
 }
+
 .x-tree-arrows .x-tree-elbow-plus:before,
 .x-tree-arrows .x-tree-elbow-minus:before,
 .x-tree-arrows .x-tree-elbow-end-plus:before,
@@ -765,6 +859,7 @@
   padding-left: 6px;
   margin: 0;
 }
+
 .x-tree-arrows .x-tree-elbow-minus:before,
 .x-tree-arrows .x-tree-elbow-end-minus:before {
   @extend %pseudo-font;
@@ -776,40 +871,54 @@
 .x-tree-node {
   color: $treeColor;
 }
-.x-tree-node a, .x-dd-drag-ghost a {
+
+.x-tree-node a,
+.x-dd-drag-ghost a {
   color: $treeColor;
 }
-.x-tree-node a span, .x-dd-drag-ghost a span {
+
+.x-tree-node a span,
+.x-dd-drag-ghost a span {
   color: $treeColor;
 }
+
 .x-tree-node .x-tree-node-disabled a span {
   color: lighten($treeColor, 50%);
 }
+
 .x-tree-node div.x-tree-drag-insert-below {
-  border-bottom-color: #686868;
+  border-bottom-color: $doveGray;
 }
+
 .x-tree-node div.x-tree-drag-insert-above {
-  border-top-color: #686868;
+  border-top-color: $doveGray;
 }
+
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a {
-  border-bottom-color: #686868;
+  border-bottom-color: $doveGray;
 }
+
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a {
-  border-top-color: #686868;
+  border-top-color: $doveGray;
 }
+
 .x-tree-node .x-tree-drag-append a span {
-  background-color: #ddd;
+  background-color: $alto;
   border-color: $borderColor;
 }
+
 .x-tree-drop-ok-append .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-add.gif');
 }
+
 .x-tree-drop-ok-above .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-over.gif');
 }
+
 .x-tree-drop-ok-below .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-under.gif');
 }
+
 .x-tree-drop-ok-between .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/tree/drop-between.gif');
 }
@@ -822,60 +931,72 @@
   padding: 0.67rem 1rem;
   box-sizing: border-box;
   color: $darkestGray;
+
   img {
     max-width: 33%;
     max-height: 100%;
   }
+
   a {
     color: $darkestGray;
     text-decoration: none;
     font: $fontH2;
     font-size: 16px;
 
-    &:hover, &:focus {
+    &:hover,
+    &:focus {
       color: $colorSplash;
     }
   }
-  img + a {
+
+  img+a {
     padding-left: 0.67rem;
   }
 }
+
 #modx-leftbar-tabpanel {
   .x-tab-panel-header {
     .x-tab-strip-wrap {
       margin: 0;
       padding: 0;
     }
+
     .x-tab-strip {
       display: flex;
       width: 100%;
+
       li {
-        //background-color: transparent;
         margin-left: 0;
         float: none;
         flex-grow: 1;
         text-align: center;
         box-sizing: border-box;
+
         &#modx-leftbar-tabpanel__modx-trash-link {
           border-right: none;
         }
+
         &:hover {
           color: $colorSplash;
         }
+
         &.x-tab-strip-active {
           background: $leftbarTabActiveBg;
-          &:hover {
-            //background: $leftbarTabActiveBg;
-          }
+
           &:after {
             box-shadow: none;
           }
+
           &:before {
             background: transparent;
           }
         }
       }
-      .x-clear, .x-tab-edge { display: none; }
+
+      .x-clear,
+      .x-tab-edge {
+        display: none;
+      }
     }
   }
 }
@@ -884,6 +1005,7 @@
   .icon {
     opacity: .5;
   }
+
   &.active {
     .icon {
       opacity: 1;
diff --git a/_build/templates/default/sass/_uberbar.scss b/_build/templates/default/sass/_uberbar.scss
index 430684de22c..051e15068e8 100644
--- a/_build/templates/default/sass/_uberbar.scss
+++ b/_build/templates/default/sass/_uberbar.scss
@@ -6,6 +6,7 @@
   min-width: 100px;
   background: $searchResultsBg;
   border-radius: $borderRadius $borderRadius 0 0;
+
   .x-form-text {
     background: none;
   }
@@ -16,15 +17,18 @@
   color: #565353;
   font-size: 12px;
   outline: none !important;
+
   .x-form-text {
     color: $searchResultsColor;
     letter-spacing: 0;
     text-shadow: none;
     font-weight: normal;
   }
+
   .x-form-empty-field {
     color: #6a747a;
   }
+
   .x-form-trigger {
     display: none;
     /*
@@ -55,6 +59,7 @@
   @include grid-media($mobile) {
     left: 5px !important;
   }
+
   .loading-indicator {
     background: none;
     color: $searchResultsColor;
@@ -76,11 +81,13 @@
     margin: 0;
     overflow: auto;
     width: 100% !important;
+
     @include grid-media($mobile) {
       height: auto !important;
       line-height: 4em;
+
       .section {
-        > * {
+        >* {
           padding-top: .5em;
           padding-bottom: .5em;
         }
@@ -96,7 +103,8 @@
     width: auto; /* change to 100% to enable scrollable overflow */
   }
 
-  h3, .x-combo-list-item {
+  h3,
+  .x-combo-list-item {
     color: $searchResultsColor;
     line-height: 17px;
     margin: 0;
@@ -132,22 +140,36 @@
 
   em {
     font-style: normal;
-    opacity: 0.7;
+    opacity: .7;
   }
 
   /* we need the parent selector to override default combobox styles */
   .x-combo-list-item {
     overflow: visible;
     white-space: normal; /* allow wrapping for longer entries */
-    a { display: block; }
-    &.x-combo-selected, &:hover {
+    
+    a {
+      display: block;
+    }
+
+    &.x-combo-selected,
+    &:hover {
       border: 0;
       background-color: $searchResultsBgHover;
       margin-left: 0;
       z-index: 10;
-      h3 { left: 0; }
-      p { border-left-color: transparent; }
-      a { color: $searchResultsColor; }
+
+      h3 {
+        left: 0;
+      }
+
+      p {
+        border-left-color: transparent;
+      }
+
+      a {
+        color: $searchResultsColor;
+      }
     }
   }
 
diff --git a/_build/templates/default/sass/_utility.scss b/_build/templates/default/sass/_utility.scss
index 9f0b270e1c9..4d8a672e98a 100644
--- a/_build/templates/default/sass/_utility.scss
+++ b/_build/templates/default/sass/_utility.scss
@@ -4,78 +4,79 @@
 // @extend %ir;
 
 @mixin ir {
-    /* IE 6/7 fallback */
-    *text-indent: -9999px;
-    background-color: transparent;
-    border: 0;
-    overflow: hidden;
-    &:before {
-      content: "";
-      display: block;
-      height: 150%;
-      width: 0;
-    }
+  /* IE 6/7 fallback */
+  *text-indent: -9999px;
+  background-color: transparent;
+  border: 0;
+  overflow: hidden;
+
+  &:before {
+    content: "";
+    display: block;
+    height: 150%;
+    width: 0;
+  }
 }
 
 // Image Replacement
 %ir {
-    @include ir;
+  @include ir;
 }
 
 %outer-container {
-    @include grid-container;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 1200px;
+  @include grid-container;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1200px;
 }
 
 @mixin awesome-font() {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    display: inline-block;
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
 
-    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
-    font-weight: 900;
+  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
+  font-weight: 900;
 }
 
 %pseudo-font {
-    @include awesome-font;
+  @include awesome-font;
 }
 
 @mixin absolute-corners {
-    position:absolute;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;    
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 %absolute-corners {
-    @include absolute-corners;
+  @include absolute-corners;
 }
 
 %pseudo-font-x-btn {
-    @extend %pseudo-font;
-    position:absolute;
-    top:0px;
-    left:0;
-    right:0;
-    bottom:0;
-    line-height:100%;
-    width:100%;
-    height:100%;
-    font-size:14px;
-    color:inherit;
-    text-align:center;
+  @extend %pseudo-font;
+  position: absolute;
+  top: 0px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  line-height: 100%;
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  color: inherit;
+  text-align: center;
 }
 
 %nav-item {
-	&:hover {
-		background: $lighterGray;
-	}
+  &:hover {
+    background: $lighterGray;
+  }
 }
 
 // Hide from both screenreaders and browsers: h5bp.com/u
@@ -123,13 +124,13 @@
   .lt-ie8 {
     *zoom: 1;
   }
+
   &:before,
   &:after {
-    content: " ";
-    /* 1 */
-    display: table;
-    /* 2 */
+    content: " "; /* 1 */
+    display: table; /* 2 */
   }
+
   &:after {
     clear: both;
   }
@@ -139,7 +140,7 @@
 
 @-moz-document url-prefix() {
   %mozbox {
-    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     width: 100%;
   }
 }
@@ -151,9 +152,11 @@
   margin: 0;
   overflow: hidden;
   padding: 0;
-  > li {
+
+  >li {
     display: block;
     float: left;
+
     &:last-child {
       margin-right: 0px;
     }
@@ -165,10 +168,12 @@
   margin: 0;
   overflow: hidden;
   padding: 0;
-  > li {
+
+  >li {
     @media only screen and (min-width: $break) {
       display: block;
       float: left;
+
       &:last-child {
         margin-right: 0;
       }
@@ -177,28 +182,32 @@
 }
 
 @mixin responsive-table-bar() {
-    table:not(#modx-tree-panel-usergroup table, #modx-grid-lexicon table, #modx-panel-property-sets) { // #janky
-        display: block;
-        tbody {
-            display: block;
-            tr {
-                @include grid-container;
-                margin-left: auto;
-                margin-right: auto;
-                max-width: 1200px;
-                display: flex;
-                flex-wrap: wrap;
-                td {
-                    display: inline-block;
-                    float: left;
-                    margin-bottom: 1em;
-                    flex-grow: 1;
-                    .x-btn {
-                        margin-left: 3px;
-                        margin-right: 3px;
-                    }
-                }
-            }
+  table:not(#modx-tree-panel-usergroup table, #modx-grid-lexicon table, #modx-panel-property-sets) {
+    display: block;
+
+    tbody {
+      display: block;
+
+      tr {
+        @include grid-container;
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1200px;
+        display: flex;
+        flex-wrap: wrap;
+
+        td {
+          display: inline-block;
+          float: left;
+          margin-bottom: 1em;
+          flex-grow: 1;
+
+          .x-btn {
+            margin-left: 3px;
+            margin-right: 3px;
+          }
         }
+      }
     }
+  }
 }
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index a6ccbe2b04a..33970932fe6 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -5,22 +5,22 @@
   filter: alpha(opacity=0); /* for IE <= 8 */
   overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
   -webkit-backface-visibility: hidden; /* prevent flickering during animation */
-  transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
-  transform: scale(1) translate3d(0,0,0);
+  transition: opacity .25s ease-in-out, transform .25s ease-in-out;
+  transform: scale(1) translate3d(0, 0, 0);
 
   /* the following 3 classes are responsible for the CSS3 window animations */
   &.anim-ready {
-    transform: scale(0.7) translate3d(0,0,0);
+    transform: scale(0.7) translate3d(0, 0, 0);
   }
 
   &.zoom-in {
     opacity: 1;
     filter: alpha(opacity=100); /* for IE <= 8 */
-    transform: scale(1) translate3d(0,0,0);
+    transform: scale(1) translate3d(0, 0, 0);
   }
 
   &.zoom-out {
-    transform: scale(1.3) translate3d(0,0,0);
+    transform: scale(1.3) translate3d(0, 0, 0);
     opacity: 0;
     filter: alpha(opacity=0); /* for IE <= 8 */
   }
@@ -37,6 +37,7 @@
   .x-window-tr {
     padding: 0;
   }
+
   .x-window-tc {
     z-index: 1;
 
@@ -68,7 +69,8 @@
   /* the window content wrapper */
   .x-window-bwrap {
     /*background: $white;*/
-    overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
+    overflow: visible;
+    /* prevent box-shadow from tabs and panel being cut off */
     /*z-index: 2;*/
 
     /* the window main container */
@@ -94,20 +96,28 @@
         padding: 0;
       }
     }
-  } /* .x-window-bwrap */
+  }
+
+  /* .x-window-bwrap */
 
   .x-window-body {
-    background-color: $winBodyBg !important; /* override extjs default theme transparent !important style from .x-window-plain */
-    border: 0; /* override extjs default theme border for .x-window-plain */
+    background-color: $winBodyBg !important;
+    /* override extjs default theme transparent !important style from .x-window-plain */
+    border: 0;
+    /* override extjs default theme border for .x-window-plain */
     /*overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
     overflow-y: auto;
     padding: 15px;
   }
+
   &.modx-window {
     .x-window-body {
       padding-top: 0;
     }
-    &.modx-console, &.modx-alert, &.modx-confirm {
+
+    &.modx-console,
+    &.modx-alert,
+    &.modx-confirm {
       .x-window-body {
         padding-top: 15px;
       }
@@ -130,7 +140,9 @@
       overflow: visible;
       padding: 0;
     }
-  } /* .x-panel-bwrap */
+  }
+
+  /* .x-panel-bwrap */
 
   .x-window-with-tabs {
 
@@ -145,7 +157,7 @@
       /*border-radius: 0;*/
       overflow: visible;
       padding: 0;
-    } 
+    }
   }
 
   form.x-panel-body:first-of-type {
@@ -160,7 +172,7 @@
 
 
       .x-tab-strip-wrap {
-        padding-top: 3px; /* account for the 3px boxshadow for active tabs */
+        padding-top: 3px;  /* account for the 3px boxshadow for active tabs */
 
         .x-tab-strip {
           border: 0; /* override extjs default theme of 1px solid white */
@@ -171,10 +183,10 @@
 
   /* the window form / content container */
   .x-tab-panel-bwrap {
-  background: $white;
-  box-shadow: $boxShadow;
-  /*padding: 10px 10px 6px 10px; /* take account for the 4px padding at the bottom of the last x-form-item */
-  padding: 10px;
+    background: $white;
+    box-shadow: $boxShadow;
+    /*padding: 10px 10px 6px 10px; /* take account for the 4px padding at the bottom of the last x-form-item */
+    padding: 10px;
 
     .x-tab-panel-body {
       overflow-y: auto; /* tabs stay, content scrolls, but only show when necessary */
@@ -184,10 +196,6 @@
 
         .x-panel-bwrap {
           padding: 0;
-        
-          .tab-panel-wrapper {
-
-          }
         }
       }
     }
@@ -210,8 +218,7 @@
       padding: 5px; /* make sure the padding also stays when maximized */
       width: 100% !important; /* override fixed width set by extjs */
     }
-  } /* .x-window-bc */
-  /*} /* .x-window-bwrap */
+  }
 
   &.x-window-maximized {
     margin: 0;
@@ -238,15 +245,16 @@
     }*/
 
     .modx-console-text {
-      background-color: white;
+      background-color: $white;
       border: none;
       font: 12px $codefonts;
-      height: auto !important; /* override extjs default theme */
+      height: auto !important;
+      /* override extjs default theme */
       /*padding: 8px;*/
     }
 
     .debug {
-      color: gray;
+      color: $gray;
     }
 
     .success {
@@ -254,14 +262,16 @@
     }
 
     .warn {
-      color: blue;
+      color: $blue;
     }
 
     .error {
       color: $red;
     }
-  } /* .modx-console */
-} /* .x-window */
+  }
+}
+
+/* .x-window */
 
 /* the progress bar (ex. saving a resource), usually in a window too */
 .x-progress-wrap {
@@ -294,16 +304,16 @@
   background-color: $white;
   opacity: 0;
   filter: alpha(opacity=0); /* for IE <= 8 */
-  transition: opacity 0.25s;
+  transition: opacity .25s;
   /*z-index: 10;*/ /* this is handeled by extjs and set to 9000 on show */
 
   &.fade-in {
-    opacity: 0.5;
+    opacity: .5;
     filter: alpha(opacity=50); /* for IE <= 8 */
   }
 
   .x-masked & {
-    opacity: 0.5;
+    opacity: .5;
     filter: alpha(opacity=50); /* for IE <= 8 */
     z-index: 9; /* extjs standard is 100, 10 prevents overlapping the topnav dropdowns */
   }
@@ -313,7 +323,8 @@
   display: inline-block;
   float: left;
   position: relative;
-  width: 40px !important; /* override extjs default theme style */
+  width: 40px !important;
+  /* override extjs default theme style */
 
   &:before {
     @extend %pseudo-font;
@@ -322,7 +333,9 @@
     content: '';
     font-size: 32px;
     margin-top: -14px; /* half of the height to center vertically with top 50% */
-    position: absolute; top: 50%; right: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
     text-align: left;
     width: 100%;
   }
@@ -434,7 +447,7 @@ body.x-body-masked .x-window-plain .x-window-mc {
   font-size: 18px;
   margin: 0 0 11px;
   padding: 8px 15px;
-  text-shadow: 0 1px 1px #FFFFFF;
+  text-shadow: 0 1px 1px $white;
 }
 .x-window .x-panel-tl,
 .x-window .x-panel-ml,
@@ -488,21 +501,21 @@ body.x-body-masked .x-window-plain .x-window-mc {
   border-top: 1px solid #F7F7F7;
 }
 .x-window-dlg .x-window-body {
-  background: none repeat scroll 0 0 #F4F4F4 !important;
+  background: none repeat scroll 0 0 $wildSand !important;
   padding: 15px 15px 5px;
 }
 .x-window .x-window-bc .x-panel-btns {
   background-color: #f7f8fa;
-  background: #dfdfdf;
-  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%) repeat scroll 0 0 transparent;
-  background: -ms-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -o-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #dfdfdf));
-  background: -webkit-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  border-bottom: 1px solid #dfdfdf;
-  border-top: 1px solid #ffffff;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4,endColorstr=#dfdfdf,GradientType=0);
+  background: $alto;
+  background: -moz-linear-gradient(center bottom, $alto 0%, $wildSand 100%) repeat scroll 0 0 transparent;
+  background: -ms-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -o-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $wildSand), color-stop(100%, $alto));
+  background: -webkit-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  border-bottom: 1px solid $alto;
+  border-top: 1px solid $white;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$wildSand,endColorstr=$alto,GradientType=0);
   padding: 8px;
 }
 .x-window-dlg .x-window-bc .x-panel-btns {
@@ -513,10 +526,10 @@ body.x-body-masked .x-window-plain .x-window-mc {
 }
 .x-window .x-window-proxy {
   background-color: #dcdcdc;
-  border-color: #dfdfdf;
+  border-color: $alto;
 }
 .x-window .x-window-tl {
-  background-color: #ffffff;
+  background-color: $white;
   background-image: none;
   border-radius: 3px 3px 0 0;
   overflow: hidden;
@@ -537,10 +550,10 @@ body.x-body-masked .x-window-plain .x-window-mc {
   margin-top: 0;
   padding: 8px;
   text-align: center;
-  text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 $white;
 }
 .x-window .x-window-bl {
-  background-color: #ffffff;
+  background-color: $white;
   background-image: none;
   border-radius: 0 0 3px 3px;
   overflow: hidden;
@@ -548,16 +561,16 @@ body.x-body-masked .x-window-plain .x-window-mc {
 }
 .x-window .x-panel-nofooter {
   background-color: #f7f8fa;
-  background: #dfdfdf;
-  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%) repeat scroll 0 0 transparent;
-  background: -ms-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -o-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #dfdfdf));
-  background: -webkit-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  border-bottom: 1px solid #dfdfdf;
-  border-top: 1px solid #ffffff;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#f4f4f4,endColorstr=#dfdfdf,GradientType=0);
+  background: $alto;
+  background: -moz-linear-gradient(center bottom, $alto 0%, $wildSand 100%) repeat scroll 0 0 transparent;
+  background: -ms-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -o-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $wildSand), color-stop(100%, $alto));
+  background: -webkit-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  border-bottom: 1px solid $alto;
+  border-top: 1px solid $white;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$wildSand,endColorstr=$alto,GradientType=0);
 }
 .x-window .x-window-header-text {
   color: #666666;
@@ -590,12 +603,12 @@ body.x-body-masked .x-window-plain .x-window-mc {
   padding-left: 0;
 }
 .x-window .x-window-mc {
-  background-color: #ffffff;
+  background-color: $white;
   border-radius: 0 0  3px 3px;
   border: 0 none;
 }
 .x-window .x-window-maximized .x-window-tc {
-  background-color: #ffffff;
+  background-color: $white;
 }
 .x-window .x-window-bbar .x-toolbar,
 .x-window .x-window-bbar-noborder .x-toolbar {
@@ -614,7 +627,7 @@ body.x-body-masked .x-window-plain .x-window-mc {
   padding: 8px;
 }
 .x-window .x-dlg-mask {
-  background-color: #cccccc;
+  background-color: $silverccc;
 }
 .x-window-maximized .x-window-tc {
   padding-left: 0;
diff --git a/_build/templates/default/sass/_xtheme-modx.scss b/_build/templates/default/sass/_xtheme-modx.scss
index 429ca73a9ef..6c88f848d41 100644
--- a/_build/templates/default/sass/_xtheme-modx.scss
+++ b/_build/templates/default/sass/_xtheme-modx.scss
@@ -20,10 +20,11 @@
 }
 
 .x-color-palette a {
-  border-color: #fff;
+  border-color: $white;
 }
 
-.x-color-palette a:hover, .x-color-palette a.x-color-palette-sel {
+.x-color-palette a:hover,
+.x-color-palette a.x-color-palette-sel {
   background-color: #ebebeb;
   border-color: #b4b4b4;
 }
@@ -55,7 +56,7 @@
 }
 
 .x-spotlight {
-  background-color: #ccc;
+  background-color: $silver;
 }
 
 .ext-ie7 .x-plain-body {
@@ -67,11 +68,7 @@
 }
 
 .x-statusbar .x-status-text-panel {
-  border-color: #DFDFDF #fff #fff #DFDFDF;
-}
-
-.x-resizable-handle {
-
+  border-color: $alto $white $white $alto;
 }
 
 .x-resizable-handle-southeast {
@@ -79,33 +76,42 @@
   right: 1px;
 }
 
-.x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-east,
-.x-resizable-over .x-resizable-handle-west, .x-resizable-pinned .x-resizable-handle-west {
+.x-resizable-over .x-resizable-handle-east,
+.x-resizable-pinned .x-resizable-handle-east,
+.x-resizable-over .x-resizable-handle-west,
+.x-resizable-pinned .x-resizable-handle-west {
   background-image: url($imgPath + 'modx-theme/sizer/e-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-south,
-.x-resizable-over .x-resizable-handle-north, .x-resizable-pinned .x-resizable-handle-north {
+.x-resizable-over .x-resizable-handle-south,
+.x-resizable-pinned .x-resizable-handle-south,
+.x-resizable-over .x-resizable-handle-north,
+.x-resizable-pinned .x-resizable-handle-north {
   background-image: url($imgPath + 'modx-theme/sizer/s-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-north, .x-resizable-pinned .x-resizable-handle-north {
+.x-resizable-over .x-resizable-handle-north,
+.x-resizable-pinned .x-resizable-handle-north {
   background-image: url($imgPath + 'modx-theme/sizer/s-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast {
+.x-resizable-over .x-resizable-handle-southeast,
+.x-resizable-pinned .x-resizable-handle-southeast {
   background-image: url($imgPath + 'modx-theme/sizer/se-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-northwest, .x-resizable-pinned .x-resizable-handle-northwest {
+.x-resizable-over .x-resizable-handle-northwest,
+.x-resizable-pinned .x-resizable-handle-northwest {
   background-image: url($imgPath + 'modx-theme/sizer/nw-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-northeast, .x-resizable-pinned .x-resizable-handle-northeast {
+.x-resizable-over .x-resizable-handle-northeast,
+.x-resizable-pinned .x-resizable-handle-northeast {
   background-image: url($imgPath + 'modx-theme/sizer/ne-handle.gif');
 }
 
-.x-resizable-over .x-resizable-handle-southwest, .x-resizable-pinned .x-resizable-handle-southwest {
+.x-resizable-over .x-resizable-handle-southwest,
+.x-resizable-pinned .x-resizable-handle-southwest {
   background-image: url($imgPath + 'modx-theme/sizer/sw-handle.gif');
 }
 
@@ -114,7 +120,7 @@
 }
 
 .x-resizable-overlay {
-  background-color: #fff;
+  background-color: $white;
 }
 
 .x-grid3 {
@@ -130,11 +136,14 @@
   border: 0 none;
 }
 
-.x-grid3-hd-row td, .x-grid3-row td, .x-grid3-summary-row td {
+.x-grid3-hd-row td,
+.x-grid3-row td,
+.x-grid3-summary-row td {
   font: $fontMedium;
 }
 
-.x-grid3-row td, .x-grid3-summary-row td {
+.x-grid3-row td,
+.x-grid3-summary-row td {
   border-left: 1px solid transparent;
   padding-left: 0;
 }
@@ -144,21 +153,25 @@
   border-right: none;
 }
 
-.x-grid3-hd-row td.x-grid3-cell-first, .x-grid3-row td.x-grid3-cell-first, .x-grid3-row td.x-grid3-summary-first {
+.x-grid3-hd-row td.x-grid3-cell-first,
+.x-grid3-row td.x-grid3-cell-first,
+.x-grid3-row td.x-grid3-summary-first {
   border-left: 0 none;
 }
 
-.x-grid3-hd-row td.x-grid3-cell-last, .x-grid3-row td.x-grid3-cell-last, .x-grid3-row td.x-grid3-summary-last {
+.x-grid3-hd-row td.x-grid3-cell-last,
+.x-grid3-row td.x-grid3-cell-last,
+.x-grid3-row td.x-grid3-summary-last {
   border-right: 0 none;
 }
 
 .x-grid-row-loading {
-  background-color: #fff;
+  background-color: $white;
   background-image: url($imgPath + 'modx-theme/shared/loading-balls.gif');
 }
 
 .x-grid3-row {
-  border-color: #FFFFFF #FFFFFF #EFEFEF;
+  border-color: $white $white #EFEFEF;
 }
 
 .x-grid3-row-expanded .x-grid3-row-body {
@@ -189,42 +202,49 @@
   border-top: 1px solid transparent;
 }
 
-.x-grid3-row-alt .x-grid3-row-table {}
-
 .x-grid3-row-over {
   background-color: #E0E8EF;
   background-image: none;
   /*border: 0 none;*/
   border-bottom: 1px solid #D1D9DF;
 }
+
 .x-grid3-resize-proxy {
   background-color: #777;
 }
+
 .x-grid3-resize-marker {
   background-color: #777;
 }
+
 .x-grid3-header {
   background: $gridHeaderBgColor;
   border-bottom: 1px solid $gridBorderColor !important;
   padding: 0;
 }
+
 .x-panel-body-noheader .x-grid3-header {
   border: none;
 }
+
 .x-grid3-header-offset {
   padding-left: 0;
 }
+
 .x-grid3-header .x-grid3-hd-row td {
-  color: rgb(105,105,105);
+  color: rgb(105, 105, 105);
   font-weight: bold;
 }
+
 .x-grid3-header-pop {
-  border-left-color: #DFDFDF;
+  border-left-color: $alto;
 }
+
 .x-grid3-header-pop-inner {
   background-image: url($imgPath + 'modx-theme/grid/hd-pop.gif');
-  border-left-color: #eee;
+  border-left-color: $gallery;
 }
+
 td.x-grid3-hd-over,
 td.sort-desc,
 td.sort-asc,
@@ -232,45 +252,53 @@ td.x-grid3-hd-menu-open {
   border-left-color: $griddivider;
   background: $gridsorted;
 }
+
 td.x-grid3-hd-over .x-grid3-hd-inner,
 td.sort-desc .x-grid3-hd-inner,
 td.sort-asc .x-grid3-hd-inner,
 td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   color: $gridHeaderTxtColor;
 }
+
 .sort-asc .x-grid3-sort-icon {
   background-image: url($imgPath + 'modx-theme/grid/sort_asc.gif');
 }
+
 .sort-desc .x-grid3-sort-icon {
   background-image: url($imgPath + 'modx-theme/grid/sort_desc.gif');
 }
+
 .x-panel-body-noheader .x-grid3-body {
-  background-color: #ffffff;
+  background-color: $white;
 }
-.x-panel-body-noheader .x-grid3-scroller {}
-
 
-
-.x-grid3-cell-text, .x-grid3-hd-text {
-  color: #000;
+.x-grid3-cell-text,
+.x-grid3-hd-text {
+  color: $darkGray;
 }
+
 .x-grid3-split {
   background-image: url($imgPath + 'modx-theme/grid/grid-split.gif');
 }
+
 .x-grid3-hd-text {
   color: #464646;
 }
+
 .x-dd-drag-proxy .x-grid3-hd-inner {
   background-color: #f2f2f2;
   background-image: url($imgPath + 'modx-theme/grid/grid3-hrow-over.gif');
   border-color: #c8c8c8;
 }
+
 .col-move-top {
   background-image: url($imgPath + 'modx-theme/grid/col-move-top.gif');
 }
+
 .col-move-bottom {
   background-image: url($imgPath + 'modx-theme/grid/col-move-bottom.gif');
 }
+
 .x-grid3-row-selected {
   background-color: $lighterGray;
   background-image: none;
@@ -279,76 +307,95 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   color: #565550;
 }
 
-.x-grid3-row-last, .x-grid3-row-last.x-grid3-row-selected {
+.x-grid3-row-last,
+.x-grid3-row-last.x-grid3-row-selected {
   border-bottom-color: transparent !important;
 }
 
-.x-grid3-row-expanded {}
-
-.x-grid3-row-selected .x-grid3-cell-inner, .x-grid3-hd-inner {}
-
 .x-grid3-cell-selected {
   background-color: #E0EAEF !important;
-  color: #000;
+  color: $darkGray;
 }
+
 .x-grid3-cell-selected span {
-  color: #000 !important;
+  color: $darkGray !important;
 }
+
 .x-grid3-cell-selected .x-grid3-cell-text {
-  color: #000;
+  color: $darkGray;
 }
-.x-grid3-locked td.x-grid3-row-marker, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker {
+
+.x-grid3-locked td.x-grid3-row-marker,
+.x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker {
   background-color: #d7d9df !important;
   background-image: url($imgPath + 'modx-theme/grid/grid-hrow.gif') !important;
   border-right-color: #9c9c9c !important;
-  border-top-color: #fff;
-  color: #000;
+  border-top-color: $white;
+  color: $darkGray;
 }
-.x-grid3-locked td.x-grid3-row-marker div, .x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div {
+
+.x-grid3-locked td.x-grid3-row-marker div,
+.x-grid3-locked .x-grid3-row-selected td.x-grid3-row-marker div {
   color: #464646 !important;
 }
+
 .x-grid3-dirty-cell {
   background-image: url($imgPath + 'modx-theme/grid/dirty.gif');
 }
-.x-grid3-topbar, .x-grid3-bottombar {
+
+.x-grid3-topbar,
+.x-grid3-bottombar {
   font: $fontSmall;
 }
+
 .x-grid3-bottombar .x-toolbar {
   border-top-color: #bcbcbc;
 }
+
 .x-props-grid .x-grid3-td-name .x-grid3-cell-inner {
   background-image: url($imgPath + 'modx-theme/grid/grid3-special-col-bg.gif') !important;
-  color: #000 !important;
+  color: $darkGray !important;
 }
+
 .x-grid3-hd-inner {
   font-weight: bold;
   padding: 13px 18px 13px 5px;
 }
+
 .ext-ie .x-grid3-hd-inner {
   width: auto;
 }
-.x-grid3-cell-inner, .x-grid3-hd-inner {
+
+.x-grid3-cell-inner,
+.x-grid3-hd-inner {
   padding: 13px 18px 13px 5px;
 }
+
 .x-props-grid .x-grid3-body .x-grid3-td-name {
-  background-color: #fff !important;
-  border-right-color: #eee;
+  background-color: $white !important;
+  border-right-color: $gallery;
 }
+
 .xg-hmenu-sort-asc .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/grid/hmenu-asc.gif');
 }
+
 .xg-hmenu-sort-desc .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/grid/hmenu-desc.gif');
 }
+
 .xg-hmenu-lock .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/grid/hmenu-lock.gif');
 }
+
 .xg-hmenu-unlock .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/grid/hmenu-unlock.gif');
 }
+
 .x-grid3-hd-btn {
-  background-color:$gridHeaderBtnBgColor;
+  background-color: $gridHeaderBtnBgColor;
 }
+
 .x-grid3-hd-btn:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-caret-down);
@@ -356,78 +403,90 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   font-style: normal;
   color: $gridHeaderBtnColor;
   font-size: 14px;
-  text-align:center;
-  position:absolute;
-  top:14px;
-  left:0;
-  right:0;
+  text-align: center;
+  position: absolute;
+  top: 14px;
+  left: 0;
+  right: 0;
 }
+
 .x-grid3-hd-btn:hover {
-  background-color:$gridHeaderBtnBgHoverColor;
+  background-color: $gridHeaderBtnBgHoverColor;
 }
+
 .x-grid3-body .x-grid3-td-expander {
   background-image: none;
   text-align: right;
 }
+
 .x-grid3-row-collapsed .x-grid3-row-expander {
   height: 27px;
   margin-top: 14px;
 }
 
 .x-grid3-row-collapsed .x-grid3-row-expander:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-plus-square);
-    font-weight: 400;
-    font-size: 14px;
-    color: $darkestGray;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-plus-square);
+  font-weight: 400;
+  font-size: 14px;
+  color: $darkestGray;
 }
+
 .x-grid3-row-expanded .x-grid3-row-expander {
   height: 27px;
   margin-top: 14px;
 }
 
 .x-grid3-row-expanded .x-grid3-row-expander:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-minus-square);
-    font-weight: 400;
-    font-size: 14px;
-    color: $darkestGray;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-minus-square);
+  font-weight: 400;
+  font-size: 14px;
+  color: $darkestGray;
 }
+
 .x-grid3-body .x-grid3-td-checker {
   background-image: none;
   padding: 10px 0 0;
 }
 
-.x-grid3-row-checker, .x-grid3-hd-checker:not(.x-grid3-hd-inner) {
-    &:before {
-        @extend %pseudo-font;
-        content: fa-content($fa-var-square);
-        font-weight: 400;
-        font-size: 14px;
-        display: inline-block;
-        padding: 3px 5px;
-        color: $darkestGray;
-    }
-    .x-grid3-row-selected &:before,
-    .x-grid3-hd-checker-on &:before {
-        content: fa-content($fa-var-check-square);
-        font-weight: 400;
-    }
-    cursor: pointer;
+.x-grid3-row-checker,
+.x-grid3-hd-checker:not(.x-grid3-hd-inner) {
+  &:before {
+    @extend %pseudo-font;
+    content: fa-content($fa-var-square);
+    font-weight: 400;
+    font-size: 14px;
+    display: inline-block;
+    padding: 3px 5px;
+    color: $darkestGray;
+  }
+
+  .x-grid3-row-selected &:before,
+  .x-grid3-hd-checker-on &:before {
+    content: fa-content($fa-var-check-square);
+    font-weight: 400;
+  }
+
+  cursor: pointer;
 }
+
 .x-grid3-body .x-grid3-td-numberer {
   background-color: #E5E5E5;
   border-bottom: 1px solid #DADADA;
   border-right: 1px solid #DADADA !important;
 }
+
 .x-grid3-body .x-grid3-td-numberer .x-grid3-cell-inner {
-  color: #444;
+  color: $tundora;
   padding-left: 10px;
   padding-top: 10px !important;
 }
+
 .x-grid3-body .x-grid3-td-row-icon {
   background-image: url($imgPath + 'modx-theme/grid/grid3-special-col-bg.gif');
 }
+
 .x-grid3-body .x-grid3-row-selected .x-grid3-td-numberer,
 .x-grid3-body .x-grid3-row-selected .x-grid3-td-checker,
 .x-grid3-body .x-grid3-row-selected .x-grid3-td-expander {
@@ -435,39 +494,42 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 }
 
 .x-grid3-check-col {
-    cursor: pointer;
-    margin-top: 10px;
-    &:before {
-        @extend %pseudo-font;
-        content: fa-content($fa-var-square);
-        font-weight: 400;
-        font-size: 14px;
-
-        display: block;
-        padding: 3px 5px;
-        color: $darkestGray;
-        text-align: left;
-        width: 14px;
-        margin: 0 auto;
-    }
+  cursor: pointer;
+  margin-top: 10px;
+
+  &:before {
+    @extend %pseudo-font;
+    content: fa-content($fa-var-square);
+    font-weight: 400;
+    font-size: 14px;
+
+    display: block;
+    padding: 3px 5px;
+    color: $darkestGray;
+    text-align: left;
+    width: 14px;
+    margin: 0 auto;
+  }
 }
 
 .x-grid3-check-col-on {
-    cursor: pointer;
-    margin-top: 10px;
-    &:before {
-        @extend %pseudo-font;
-        content: fa-content($fa-var-check-square);
-        font-weight: 400;
-        font-size: 14px;
-        display: block;
-        padding: 3px 5px;
-        color: $darkestGray;
-        text-align: left;
-        width: 14px;
-        margin: 0 auto;
-    }
+  cursor: pointer;
+  margin-top: 10px;
+
+  &:before {
+    @extend %pseudo-font;
+    content: fa-content($fa-var-check-square);
+    font-weight: 400;
+    font-size: 14px;
+    display: block;
+    padding: 3px 5px;
+    color: $darkestGray;
+    text-align: left;
+    width: 14px;
+    margin: 0 auto;
+  }
 }
+
 /*
 .x-grid3-check-col-td {
   vertical-align: middle !important;
@@ -494,7 +556,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   &:after {
     left: .15em;
     top: .125em;
-    background-color: #fff;
+    background-color: $white
     border-radius: 50%;
     width: 1.5em;
     z-index: 11;
@@ -510,12 +572,16 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   }
 }
 */
-.x-grid-group, .x-grid-group-body, .x-grid-group-hd {
+.x-grid-group,
+.x-grid-group-body,
+.x-grid-group-hd {
   zoom: 1;
 }
+
 .x-grid-group-hd {
   border-bottom-color: $darkestGray;
 }
+
 .x-grid-group-hd div.x-grid-group-title {
   font: $fontSmall;
   color: $darkestGray;
@@ -523,61 +589,74 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   font-weight: bold;
   padding: 8px 4px 12px 5px;
 }
+
 .x-grid-group-hd div.x-grid-group-title:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-minus-square);
-    font-weight: 400;
-    font-size: 14px;
-    font-style: normal;
-    margin-right: 10px;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-minus-square);
+  font-weight: 400;
+  font-size: 14px;
+  font-style: normal;
+  margin-right: 10px;
 }
 
 .x-grid-group-collapsed .x-grid-group-hd div.x-grid-group-title:before {
-    @extend %pseudo-font;
-    content: fa-content($fa-var-plus-square);
-    font-weight: 400;
-    font-style: normal;
-    margin-right: 10px;
+  @extend %pseudo-font;
+  content: fa-content($fa-var-plus-square);
+  font-weight: 400;
+  font-style: normal;
+  margin-right: 10px;
 }
+
 .x-group-by-icon {
   background-image: url($imgPath + 'modx-theme/grid/group-by.gif');
 }
+
 .x-cols-icon {
   background-image: url($imgPath + 'modx-theme/grid/columns.gif');
 }
+
 .x-show-groups-icon {
   background-image: url($imgPath + 'modx-theme/grid/group-by.gif');
 }
+
 .x-grid-empty {
-  color: gray;
+  color: $gray;
   font: $fontSmall;
   text-align: center;
 }
+
 .x-grid-with-col-lines .x-grid3-row td.x-grid3-cell {
   border-right-color: #ededed;
 }
+
 .x-grid-with-col-lines .x-grid3-row {
   border-left: 0 none;
   border-top: 0 none;
 }
+
 .x-grid-with-col-lines .x-grid3-row-selected {
   border-top-color: $borderColor;
 }
+
 .x-dd-drag-ghost {
-  background-color: #fff;
-  border-color: #ddd #bbb #bbb #ddd;
-  color: #000;
+  background-color: $white;
+  border-color: #ddd #bbb #bbb $alto;
+  color: $darkGray;
   font: $fontSmall;
 }
+
 .x-dd-drop-nodrop .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/dd/drop-no.gif');
 }
+
 .x-dd-drop-ok .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/dd/drop-yes.gif');
 }
+
 .x-dd-drop-ok-add .x-dd-drop-icon {
   background-image: url($imgPath + 'modx-theme/dd/drop-add.gif');
 }
+
 .x-view-selector {
   background-color: #d8d8d8;
   border-color: #8d8d8d;
@@ -588,57 +667,84 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   background: darken($tipText, 60%);
   border-radius: $borderRadius;
   padding: 5px;
-  width: auto !important; /* override ExtJS inline width */
+  width: auto !important;
+  /* override ExtJS inline width */
   max-width: 400px;
   min-width: 200px;
 }
+
 .x-tip .x-tip-close {
   background-image: url($imgPath + 'modx-theme/qtip/close.gif');
 }
-.x-tip .x-tip-tc, .x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc, .x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr {
+
+.x-tip .x-tip-tc,
+.x-tip .x-tip-tl,
+.x-tip .x-tip-tr,
+.x-tip .x-tip-bc,
+.x-tip .x-tip-bl,
+.x-tip .x-tip-br,
+.x-tip .x-tip-ml,
+.x-tip .x-tip-mr {
   background-image: none;
 }
+
 .x-tip .x-tip-mc {
   font: $fontSmall;
 }
+
 .x-tip .x-tip-ml {
   background-color: transparent;
 }
+
 .x-tip .x-tip-header-text {
   color: $tipText;
   font: $fontNormal;
 }
+
 .x-tip .x-tip-body {
   color: complement($tipText);
   font: $fontMedium;
   width: auto !important; /* override ExtJS inline width */
 }
+
 .x-tip img {
   display: block;
-  width:100%;
-  max-width:100%;
-  height:auto;
-  background-color: #ccc;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  background-color: $silver;
   background-image: url($imgPath + 'modx-theme/transparency-pattern.png');
 }
-.x-form-invalid-tip .x-tip-tc, .x-form-invalid-tip .x-tip-tl, .x-form-invalid-tip .x-tip-tr, .x-form-invalid-tip .x-tip-bc,
-.x-form-invalid-tip .x-tip-bl, .x-form-invalid-tip .x-tip-br, .x-form-invalid-tip .x-tip-ml, .x-form-invalid-tip .x-tip-mr {
+
+.x-form-invalid-tip .x-tip-tc,
+.x-form-invalid-tip .x-tip-tl,
+.x-form-invalid-tip .x-tip-tr,
+.x-form-invalid-tip .x-tip-bc,
+.x-form-invalid-tip .x-tip-bl,
+.x-form-invalid-tip .x-tip-br,
+.x-form-invalid-tip .x-tip-ml,
+.x-form-invalid-tip .x-tip-mr {
   background-image: url($imgPath + 'modx-theme/form/error-tip-corners.gif');
 }
+
 .x-form-invalid-tip .x-tip-body {
   background-image: url($imgPath + 'modx-theme/form/exclamation.gif');
 }
+
 .x-tip-anchor {
   background-image: url($imgPath + 'modx-theme/qtip/tip-anchor-sprite.gif');
 }
+
 .x-menu {
   background-color: $menuBg;
   border: 1px solid $borderColor;
   border-radius: $menuBorderRadius; /* TODO: replace with $borderRadius when merged */
-  box-shadow: $menuBoxShadow; /* TODO: replace with $boxShadow when merged */;
+  box-shadow: $menuBoxShadow; /* TODO: replace with $boxShadow when merged */
 }
+
 .x-menu-list {
   padding: 0;
+
   li {
     border: 0;
     margin: 0;
@@ -647,6 +753,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
     &:first-child {
       margin-top: 3px;
     }
+
     &:last-child {
       margin-bottom: 3px;
     }
@@ -660,6 +767,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
       color: $menuTextColor;
       font-size: 13px;
       padding: 3px 21px 3px 27px;
+
       &:hover {
         color: $menuTextColor;
       }
@@ -667,132 +775,172 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 
     &.x-menu-item-active {
       background-color: $menuSelectedBg;
+
       a {
         color: $menuSelectedColor;
       }
     }
   }
 }
+
 .x-menu-floating {
   border-color: #C7C7C7;
 }
+
 .x-menu-nosep {
   background-image: none;
 }
+
 .x-menu-list-item {
   font: $fontSmall;
 }
+
 .x-menu-item-arrow {
   background-image: url($imgPath + 'modx-theme/menu/menu-parent.gif');
 }
+
 .x-menu-sep {
   background-color: $menuSeparatorColor;
   border-bottom: none;
   margin: 2px 0;
 }
+
 .x-menu-item-active a.x-menu-item {
   border: 0 none;
   margin: 0;
 }
+
 .x-menu-check-item .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/menu/unchecked.gif');
 }
+
 .x-menu-item-checked .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/menu/checked.gif');
 }
+
 .x-menu-item-checked .x-menu-group-item .x-menu-item-icon {
   background-image: url($imgPath + 'modx-theme/menu/group-checked.gif');
 }
+
 .x-menu-group-item .x-menu-item-icon {
   background-image: none;
 }
+
 .x-menu-plain {
-  background-color: #fff !important;
+  background-color: $white !important;
 }
+
 .x-cycle-menu .x-menu-item-checked {
-  background-color: #DFDFDF;
+  background-color: $alto;
   border-color: #b9b9b9 !important;
 }
+
 .x-menu-scroller-top {
   background-image: url($imgPath + 'modx-theme/layout/mini-top.gif');
 }
+
 .x-menu-scroller-bottom {
   background-image: url($imgPath + 'modx-theme/layout/mini-bottom.gif');
 }
-.x-box-tl ,.x-box-ml {
-  background-color: #fafafa;
+
+.x-box-tl,
+.x-box-ml {
+  background-color: $alabastersolid;
   background-image: none;
   color: #393939;
   font: $baseText;
   font-weight: bold;
 }
+
 .x-box-mc p {
   font-weight: normal;
   margin-bottom: 5px;
 }
+
 .x-box-tl {
   background-color: rgba(250, 250, 250, 0.8);
   border-left: 1px solid #DEDEDE;
   border-right: 1px solid #DEDEDE;
   border-top: 1px solid #DEDEDE;
 }
+
 .x-box-ml {
   background-color: rgba(250, 250, 250, 0.8);
   border-left: 1px solid #DEDEDE;
   border-right: 1px solid #DEDEDE;
 }
+
 .x-box-bl {
-  background-color: #eee;
+  background-color: $gallery;
   background-color: rgba(230, 230, 230, 0.8);
   border-bottom: 1px solid #DEDEDE;
   border-left: 1px solid #DEDEDE;
   border-right: 1px solid #DEDEDE;
 }
+
 .x-box-mc h3 {
   font-size: 14px;
   font-weight: bold;
 }
-.x-box-mr,.x-box-bl,.x-box-bc,.x-box-br,.x-box-blue .x-box-bl, .x-box-blue .x-box-br, .x-box-blue .x-box-tl, .x-box-blue .x-box-tr {
+
+.x-box-mr,
+.x-box-bl,
+.x-box-bc,
+.x-box-br,
+.x-box-blue .x-box-bl,
+.x-box-blue .x-box-br,
+.x-box-blue .x-box-tl,
+.x-box-blue .x-box-tr {
   background-image: none;
 }
-.x-box-blue .x-box-bc, .x-box-blue .x-box-mc, .x-box-blue .x-box-tc {
+
+.x-box-blue .x-box-bc,
+.x-box-blue .x-box-mc,
+.x-box-blue .x-box-tc {
   background-image: url($imgPath + 'modx-theme/box/tb-gray.gif');
 }
+
 .x-box-blue .x-box-mc {
   background-color: #d8d8d8;
 }
+
 .x-box-blue .x-box-mc h3 {
   color: #363636;
 }
+
 .x-box-blue .x-box-ml {
   background-image: url($imgPath + 'modx-theme/box/l-gray.gif');
 }
+
 .x-box-blue .x-box-mr {
   background-image: url($imgPath + 'modx-theme/box/r-gray.gif');
 }
+
 #x-debug-browser .x-tree .x-tree-node a span {
   color: #333333;
   font-family: $codefonts;
   font-size: 11px;
 }
+
 #x-debug-browser .x-tree a i {
-  color: #ff4545;
+  color: $red;
   font-style: normal;
 }
+
 #x-debug-browser .x-tree a em {
   color: #999;
 }
+
 #x-debug-browser .x-tree .x-tree-node .x-tree-selected a span {
   background-color: #d8d8d8;
 }
-/*.x-panel {
-    border:0 none;
-}*/
+
 .x-panel-bwrap {
   overflow: visible;
 }
+
 .x-panel-body {
-  /*background-color: #fff;*/
+  /*background-color: $white*/
   border: 0;
   border-radius: $borderRadius;
   overflow: visible;
@@ -808,86 +956,110 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 .x-grid-panel .x-panel-body {
   background-color: #F5F5F5;
   border-bottom: 1px solid #E4E4E4;
-  border-top: 1px solid #FAFAFA;
+  border-top: 1px solid $alabastersolid;
   border: 0 none;
 }
+
 .x-grid-panel .x-panel-body-noheader {
   background-color: transparent;
   border: 0 none;
   padding: 0 !important;
 }
+
 .x-panel-tl .x-panel-header {
   color: #6A6A6A;
   font: $fontMedium;
   font-weight: bold;
-  /*text-shadow: 0 1px 0 #FAFAFA;*/
+  /*text-shadow: 0 1px 0 $alabastersolid;*/
 }
+
 .x-panel-tl .x-panel-icon {
   background-position: 0 8px;
 }
+
 .x-panel-tc {
   background-image: none;
 }
-.x-panel-tl, .x-panel-tr, .x-panel-bl,  .x-panel-br {
+
+.x-panel-tl,
+.x-panel-tr,
+.x-panel-bl,
+.x-panel-br {
   background-image: none;
-  border-bottom-color: #DFDFDF;
+  border-bottom-color: $alto;
 }
+
 .x-panel-bc {
   background-image: none;
 }
+
 .x-panel-tc {
   background-color: #F5F5F5;
 }
+
 .x-panel-tl {
   border-color: #E3E3E3 #E3E3E3;
   border-style: solid solid none;
   border-width: 1px 1px 0;
 }
-.x-panel-tr {}
 
 .x-panel-tl .x-panel-header {
   border-bottom: 1px solid #E4E4E4;
   padding: 10px 0;
 }
+
 .x-panel-bc .x-panel-footer {
   padding-bottom: 0;
 }
+
 .x-panel-btns {
   background-color: transparent;
   padding: 15px 0 1px 0; /* override extjs default theme rule, padding bottom 1px to not cut off buttons box-shadow */
-  /*border-top: 1px solid #FAFAFA;*/
+  /*border-top: 1px solid $alabastersolid;*/
 
   td.x-toolbar-cell {
     padding: 0; /* override extjs default theme rule */
   }
 }
+
 .x-panel-mc {
   background-color: #F5F5F5;
-  border-bottom: 1px solid #DFDFDF;
-  border-top: 1px solid #FAFAFA;
+  border-bottom: 1px solid $alto;
+  border-top: 1px solid $alabastersolid;
   padding: 10px 5px;
 }
-.x-panel-tl, .x-panel-ml, .x-panel-bl {
+
+.x-panel-tl,
+.x-panel-ml,
+.x-panel-bl {
   background-color: #F5F5F5;
   padding-left: 8px;
 }
-.x-panel-ml, .x-panel-mr {
+
+.x-panel-ml,
+.x-panel-mr {
   background-image: none;
 }
+
 .x-panel-bl {
   border-color: #E3E3E3 #E3E3E3;
   border-style: none solid solid;
   border-width: 0 1px 1px;
   padding-bottom: 8px;
 }
+
 .x-panel-ml {
   border-left: 1px solid #E3E3E3;
   border-right: 1px solid #E3E3E3;
 }
+
 .x-panel-mr {
   padding-right: 8px;
 }
-.x-panel-tr, .x-panel-mr , .x-panel-br {
+
+.x-panel-tr,
+.x-panel-mr,
+.x-panel-br {
   background-color: #f7f7f7;
 }
 
@@ -899,17 +1071,21 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   margin: 0 3px 0 0;
   position: relative;
   transition: all 0.3s;
-  width: 18px; height: 18px;
+  width: 18px;
+  height: 18px;
 
   &:after {
     @extend %pseudo-font;
 
     box-sizing: border-box;
     padding-top: 2px;
-    position: absolute; top: 0; left: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
     text-align: center;
     vertical-align: middle;
-    width: 18px; height: 18px;
+    width: 18px;
+    height: 18px;
   }
 
   &:hover {
@@ -1059,6 +1235,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
     }
   }
 }
+
 /*.x-tool {
   background-image: url($imgPath + 'modx-theme/panel/tool-sprites.png');
   height: 16px;
@@ -1158,11 +1335,18 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 .x-panel-collapsed {
 }*/
 .x-panel-dd-spacer {
-  border-color: #DFDFDF;
+  border-color: $alto;
 }
-.x-panel-fbar td,.x-panel-fbar span,.x-panel-fbar input,.x-panel-fbar div,.x-panel-fbar select,.x-panel-fbar label {
+
+.x-panel-fbar td,
+.x-panel-fbar span,
+.x-panel-fbar input,
+.x-panel-fbar div,
+.x-panel-fbar select,
+.x-panel-fbar label {
   font: $fontSmall;
 }
+
 .x-panel-header {
   border-radius: $borderRadius $borderRadius 0 0;
   /*background: #dddddd;
@@ -1181,8 +1365,9 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   font-weight: bold;
   margin-top: 0;
   padding: 10px 10px 8px;
-  /*text-shadow: 0 1px 1px #ffffff;*/
+  /*text-shadow: 0 1px 1px $white;*/
 }
+
 .x-portal-space {
   border-bottom: 1px solid #afafaf;
   padding: 0;
@@ -1192,78 +1377,98 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   overflow: visible;
 
   /* prevent second col with fields to have excessive margin on the right */
-  > .x-column {
+  >.x-column {
     margin-right: 0;
     overflow: visible;
 
   }
+
   /* distance to the right for all following columns, this makes the first one 15px wider than the rest*/
   /* but allows for more than 2 columns layouts */
-  > .x-column:not(.x-hide-display) ~ .x-column {
+  >.x-column:not(.x-hide-display)~.x-column {
     margin-right: 0;
     margin-left: 15px;
   }
 }
+
 .x-panel-nofooter .x-panel-bc {
   background-image: none;
   height: 0;
 }
+
 .x-panel-ghost {
   background-color: #dbdbdb;
 }
+
 .x-panel-ghost ul {
   border-color: #d0d0d0;
 }
+
 .x-panel-dd-spacer {
   border-color: #d0d0d0;
 }
+
 .x-dlg-mask {
-  background-color: #ccc;
+  background-color: $silver;
 }
+
 .x-html-editor-wrap {
-  background-color: #fff;
+  background-color: $white;
   border-color: #bcbcbc;
 }
+
 .x-panel-noborder .x-panel-header-noborder {
   border-bottom-color: transparent;
 }
+
 .x-border-layout-ct {
-  background-color: #FAFAFA;
+  background-color: $alabastersolid;
 }
+
 .x-accordion-hd {
   background-image: url($imgPath + 'modx-theme/panel/light-hd.gif');
   color: #222;
   font-weight: normal;
 }
+
 .x-layout-collapsed {
   background-color: #E4E4E4;
-  border-color: #DFDFDF;
+  border-color: $alto;
   width: 7px !important;
 }
+
 .x-layout-collapsed-over {
   background-color: #e6e6e6;
 }
+
 .x-layout-split-west .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-left.gif');
 }
+
 .x-layout-split-east .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-right.gif');
 }
+
 .x-layout-split-north .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-top.gif');
 }
+
 .x-layout-split-south .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-bottom.gif');
 }
+
 .x-layout-cmini-west .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-right.gif');
 }
+
 .x-layout-cmini-east .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-left.gif');
 }
+
 .x-layout-cmini-north .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-bottom.gif');
 }
+
 .x-layout-cmini-south .x-layout-mini {
   background-image: url($imgPath + 'modx-theme/layout/mini-top.gif');
 }
@@ -1272,70 +1477,93 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   background-color: #f9f9f9;
   background-image: url($imgPath + 'modx-theme/grid/grid3-hrow.gif');
 }
+
 .x-list-header-inner div em {
-  border-left-color: #ddd;
+  border-left-color: $alto;
   font: $fontSmall;
 }
+
 .x-list-body dt em {
   font: $fontSmall;
 }
+
 .x-list-over {
-  background-color: #eee;
+  background-color: $gallery;
 }
+
 .x-list-selected {
   background-color: #e7e7e7;
 }
+
 .x-list-resizer {
   border-left-color: #555;
   border-right-color: #555;
 }
-.x-list-header-inner em.sort-asc, .x-list-header-inner em.sort-desc {
+
+.x-list-header-inner em.sort-asc,
+.x-list-header-inner em.sort-desc {
   background-image: url($imgPath + 'modx-theme/grid/sort-hd.gif');
-  border-color: #DFDFDF;
+  border-color: $alto;
 }
-.x-slider-horz, .x-slider-horz .x-slider-end, .x-slider-horz .x-slider-inner {
+
+.x-slider-horz,
+.x-slider-horz .x-slider-end,
+.x-slider-horz .x-slider-inner {
   background-image: url($imgPath + 'modx-theme/slider/slider-bg.png');
 }
+
 .x-slider-horz .x-slider-thumb {
   background-image: url($imgPath + 'modx-theme/slider/slider-thumb.png');
 }
-.x-slider-vert, .x-slider-vert .x-slider-end, .x-slider-vert .x-slider-inner {
+
+.x-slider-vert,
+.x-slider-vert .x-slider-end,
+.x-slider-vert .x-slider-inner {
   background-image: url($imgPath + 'modx-theme/slider/slider-v-bg.png');
 }
+
 .x-slider-vert .x-slider-thumb {
   background-image: url($imgPath + 'modx-theme/slider/slider-v-thumb.png');
 }
+
 /* portal */
 .x-portal .x-panel-tl .x-panel-header {
   background: none;
   font-size: 14px;
   padding: 8px 0 8px 0;
 }
+
 .x-portal .x-tool {
   margin-top: 0;
 }
+
 .x-portal .x-panel-body {
   font-weight: normal;
   margin-bottom: 5px;
   padding: 0px;
   text-transform: none;
 }
+
 .x-portal-space {
   margin-bottom: 5px;
 }
+
 /* grid checker */
 .x-grid3-body .x-grid3-td-checker {
   background-image: none !important;
 }
+
 /* combo tpl stuff */
 .modx-combo-desc {
   color: gray;
   font-size: .9em;
   font-style: italic;
 }
+
 .modx-combo-title {
   font-weight: bold;
 }
+
 /* draggable grids */
 .modx-grid-draggable .x-grid3-row {
   cursor: move;
diff --git a/_build/templates/default/sass/components/_primary-button.scss b/_build/templates/default/sass/components/_primary-button.scss
index d785cb64ded..d601e0d2b28 100644
--- a/_build/templates/default/sass/components/_primary-button.scss
+++ b/_build/templates/default/sass/components/_primary-button.scss
@@ -25,7 +25,7 @@
         background: $green;
         box-shadow: none;
         color: $buttonColorPrimaryDisabled;
-        opacity: 0.6;
+        opacity: .6;
         filter: alpha(opacity=60); /* for IE <= 8 */
     }
 }
diff --git a/_build/templates/default/sass/components/_secondary-button.scss b/_build/templates/default/sass/components/_secondary-button.scss
index 6e5b9a60a95..5d2d29c464b 100644
--- a/_build/templates/default/sass/components/_secondary-button.scss
+++ b/_build/templates/default/sass/components/_secondary-button.scss
@@ -98,7 +98,7 @@
     background-color: $buttonBgDisabled;
     color: $buttonColorDisabled;
     box-shadow: $shadowBorderDisabled;
-    opacity: 0.6; /* extjs default theme is also 0.6 */
+    opacity: .6; /* extjs default theme is also 0.6 */
     filter: alpha(opacity=60); /* for IE <= 8 */
   }
 
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index 8f02abf2fbe..e752336f637 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -11,7 +11,9 @@ $fa-font-path: "../fonts" !default;
 @import "font-awesome/brands";
 @import "font-awesome/shims";
 
-.#{$fa-css-prefix}-large { @extend .#{$fa-css-prefix}-lg; }
+.#{$fa-css-prefix}-large {
+  @extend .#{$fa-css-prefix}-lg;
+}
 
 $fa-css-prefix: icon;
 @import "font-awesome/fontawesome";
@@ -19,7 +21,10 @@ $fa-css-prefix: icon;
 @import "font-awesome/regular";
 @import "font-awesome/brands";
 @import "font-awesome/shims";
-.#{$fa-css-prefix}-large { @extend .#{$fa-css-prefix}-lg; }
+
+.#{$fa-css-prefix}-large {
+  @extend .#{$fa-css-prefix}-lg;
+}
 
 $fa-css-prefix: fa;
 
@@ -29,7 +34,8 @@ $fa-css-prefix: fa;
 @import "xtheme-modx";
 @import "components/components";
 @import "buttons";
-@import "forms"; /* needs to come after the button styles! */
+@import "forms";
+/* needs to come after the button styles! */
 @import "tabs";
 @import "navbar";
 @import "uberbar";
@@ -43,12 +49,12 @@ $fa-css-prefix: fa;
 @import "trash";
 
 .icon {
-    @extend %pseudo-font;
+  @extend %pseudo-font;
 }
 
 body {
   color: $mainText;
-  font:  $baseText;
+  font: $baseText;
   -webkit-font-smoothing: antialiased;
 
   a {
@@ -61,11 +67,14 @@ body {
 }
 
 /* TODO: conver font heirarchy into a vertical rhythm formula */
-h2, h3 {
-  color:  $treeHeaderText;
-  font:   $fontH2;
-  margin: 0 0 8px -1px; /* align main titles with treetabs and left panel edge */
+h2,
+h3 {
+  color: $treeHeaderText;
+  font: $fontH2;
+  margin: 0 0 8px -1px;
+  /* align main titles with treetabs and left panel edge */
 }
+
 h3 {
   font: $fontH3;
 }
@@ -85,6 +94,7 @@ hr {
   height: 1px;
   margin: 20px 0;
 }
+
 .aleft {
   text-align: left;
 }
@@ -135,7 +145,7 @@ hr {
 }
 
 .primary {
-	color: $primary1 !important;
+  color: $primary1 !important;
 }
 
 .centered {
@@ -151,7 +161,7 @@ hr {
 }
 
 .padding {
-  background-color: #fff;
+  background-color: $white;
   padding: 11px;
 }
 
@@ -159,8 +169,9 @@ hr {
   border-bottom: 1px #90b1b9 dashed;
 }
 
-.x-form-text, textarea.x-form-field {
-	border-color:$borderColor;
+.x-form-text,
+textarea.x-form-field {
+  border-color: $borderColor;
 }
 
 /* panel setups */
@@ -169,9 +180,11 @@ hr {
   transition: left .2s ease;
   position: absolute;
 }
+
 #modx-leftbar-tabpanel {
   transition: all .6s ease;
 }
+
 #modx-content {
   width: calc(100% - 390px);
   right: 0;
@@ -190,74 +203,89 @@ jumping around */
 
 #modx-resource-content {
   .x-panel-header {
-      margin: 0;
-      padding: 15px;
+    margin: 0;
+    padding: 15px;
   }
+
   .x-panel-bwrap {
-      border: 0;
+    border: 0;
   }
+
   .modx-tv .modx-tv-label {
-      width: auto;
-      float: none;
-      clear: none;
-      padding: 15px 0 4px;
-      position: static;
+    width: auto;
+    float: none;
+    clear: none;
+    padding: 15px 0 4px;
+    position: static;
   }
 }
 
-#modx-content-above, #modx-content-below {
-	.x-panel-bwrap {
-		border: 0;
-	}
+#modx-content-above,
+#modx-content-below {
+  .x-panel-bwrap {
+    border: 0;
+  }
 }
 
 .x-tab-panel-header {
-	box-sizing:border-box;
-	.x-tab-strip {
-		li {
-			box-sizing:border-box;
-		}
-	}
+  box-sizing: border-box;
+
+  .x-tab-strip {
+    li {
+      box-sizing: border-box;
+    }
+  }
 }
 
 .x-viewport {
-	@include grid-media($mobile) {
-		overflow-y:auto;
-	}
-	body {
-		@include grid-media($mobile) {
-			height:auto;
-		}
-	}
+  @include grid-media($mobile) {
+    overflow-y: auto;
+  }
+
+  body {
+    @include grid-media($mobile) {
+      height: auto;
+    }
+  }
 }
 
 #modx-container {
   height: 100%; //maybe this should be min-height instead? - jp
   width: 100%;
   background: $mainBg;
+
   @include grid-media($mobile) {
-	  height:auto;
+    height: auto;
   }
 }
 
-#modx-resource-main-left, #modx-resource-main-right, #modx-page-settings-left, #modx-page-settings-right {
+#modx-resource-main-left,
+#modx-resource-main-right,
+#modx-page-settings-left,
+#modx-page-settings-right {
   @include grid-media($mobile) {
     box-sizing: border-box;
     width: 100% !important;
   }
 }
 
-#modx-template-form, #modx-chunk-form, #modx-tv-tabs, #modx-snippet-form, #modx-panel-plugin {
-	.main-wrapper {
-		@include grid-media($mobile) {
-			width:100% !important;
-			padding:0;
-			> .x-panel-bwrap {
-				padding:1em;
-			}
-		}
-	}
+#modx-template-form,
+#modx-chunk-form,
+#modx-tv-tabs,
+#modx-snippet-form,
+#modx-panel-plugin {
+  .main-wrapper {
+    @include grid-media($mobile) {
+      width: 100% !important;
+      padding: 0;
+
+      >.x-panel-bwrap {
+        padding: 1em;
+      }
+    }
+  }
 }
+
 #modx-resource-main-right {
   @include grid-media($mobile) {
     margin-top: 15px;
@@ -265,155 +293,182 @@ jumping around */
 }
 
 #modx-grid-lexicon {
-	.x-toolbar-ct {
-		@include grid-media($mobile) {
-			display:block;
-			tbody {
-				display:block;
-				tr {
-					display:block;
-					td {
-						display:block;
-						width:100%;
-						table {
-							width:100%;
-							.x-form-field-wrap {
-								width:100% !important;
-								margin-bottom:1em;
-							}
-							.x-btn, .x-form-text {
-								width:100% !important;
-								margin-bottom:1em;
-								box-sizing:border-box;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-#modx-panel-contexts, #modx-panel-namespaces {
-	.main-wrapper {
-		> .x-panel-bwrap {
-			> .x-panel-tbar {
-				@include grid-media($mobile) {
-					width:auto !important;
-					@include responsive-table-bar;
-
-					#modx-ctx-search {
-						width:100% !important;
-						box-sizing:border-box;
-						margin-left:0;
-					}
-				}
-			}
-		}
-	}
+  .x-toolbar-ct {
+    @include grid-media($mobile) {
+      display: block;
+
+      tbody {
+        display: block;
+
+        tr {
+          display: block;
+
+          td {
+            display: block;
+            width: 100%;
+
+            table {
+              width: 100%;
+
+              .x-form-field-wrap {
+                width: 100% !important;
+                margin-bottom: 1em;
+              }
+
+              .x-btn,
+              .x-form-text {
+                width: 100% !important;
+                margin-bottom: 1em;
+                box-sizing: border-box;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+#modx-panel-contexts,
+#modx-panel-namespaces {
+  .main-wrapper {
+    >.x-panel-bwrap {
+      >.x-panel-tbar {
+        @include grid-media($mobile) {
+          width: auto !important;
+          @include responsive-table-bar;
+
+          #modx-ctx-search {
+            width: 100% !important;
+            box-sizing: border-box;
+            margin-left: 0;
+          }
+        }
+      }
+    }
+  }
 }
 
 #modx-panel-namespaces {
-	@include grid-media($mobile) {
-		.main-wrapper {
-			.x-toolbar-left {
-				margin-bottom:0 !important;
-			}
-		}
-	}
+  @include grid-media($mobile) {
+    .main-wrapper {
+      .x-toolbar-left {
+        margin-bottom: 0 !important;
+      }
+    }
+  }
 }
 
 #modx-namespace-search {
-	@include grid-media($mobile) {
-		width:100% !important;
-		margin-left:0;
-		box-sizing:border-box;
-	}
+  @include grid-media($mobile) {
+    width: 100% !important;
+    margin-left: 0;
+    box-sizing: border-box;
+  }
 }
 
 #modx-filter-clear {
-	@include grid-media($mobile) {
-		width:100% !important;
-		box-sizing:border-box;
-	}
+  @include grid-media($mobile) {
+    width: 100% !important;
+    box-sizing: border-box;
+  }
 }
 
 #modx-tree-panel-usergroup {
-	.main-wrapper {
-		@include grid-media($mobile) {
-			position:relative;
-		}
-	}
+  .main-wrapper {
+    @include grid-media($mobile) {
+      position: relative;
+    }
+  }
 }
 
 #modx-property-set-form {
-	@include grid-media($mobile) {
-		.left-col, .x-col {
-			float:none;
-		}
-		#right-column, #modx-grid-element-properties {
-			width:100% !important;
-		}
-	}
+  @include grid-media($mobile) {
+
+    .left-col,
+    .x-col {
+      float: none;
+    }
+
+    #right-column,
+    #modx-grid-element-properties {
+      width: 100% !important;
+    }
+  }
 }
 
 .x-window {
-	@include grid-media($mobile) {
-		width:auto !important;
-		max-width:100vh !important;
-		left:0.5em !important;
-		right:0.5em !important;
-		.x-window-body {
-			width:100% !important;
-			height:auto !important;
-			box-sizing:border-box !important;
-		}
-		.x-form-field-wrap {
-			width:auto !important;
-		}
-		input {
-			width:100% !important;
-			box-sizing:border-box;
-			height:auto !important;
-		}
-	}
+  @include grid-media($mobile) {
+    width: auto !important;
+    max-width: 100vh !important;
+    left: 0.5em !important;
+    right: 0.5em !important;
+
+    .x-window-body {
+      width: 100% !important;
+      height: auto !important;
+      box-sizing: border-box !important;
+    }
+
+    .x-form-field-wrap {
+      width: auto !important;
+    }
+
+    input {
+      width: 100% !important;
+      box-sizing: border-box;
+      height: auto !important;
+    }
+  }
 }
 
 #modx-template-form .main-wrapper {
-	input {
-		max-width:100% !important;
-	}
+  input {
+    max-width: 100% !important;
+  }
 }
 
-.x-column-inner > .x-column ~ .x-column {
-	@include grid-media($mobile) {
-		margin-left:0;
-	}
+.x-column-inner>.x-column~.x-column {
+  @include grid-media($mobile) {
+    margin-left: 0;
+  }
 }
 
-.x-form-item label.x-form-item-label[for="modx-import-base-path"], .x-form-item label.x-form-item-label[for="modx-import-resource-class"], .x-form-item label.x-form-item-label[for="modx-import-element"], .x-form-item label.x-form-item-label[for="modx-import-parent"], .x-form-item label.x-form-item-label[for="modx-import-allowed-extensions"], #modx-import-base-path {
-	@include grid-media($mobile) {
-		width:auto !important;
-		float:none;
-	}
+.x-form-item label.x-form-item-label[for="modx-import-base-path"],
+.x-form-item label.x-form-item-label[for="modx-import-resource-class"],
+.x-form-item label.x-form-item-label[for="modx-import-element"],
+.x-form-item label.x-form-item-label[for="modx-import-parent"],
+.x-form-item label.x-form-item-label[for="modx-import-allowed-extensions"],
+#modx-import-base-path {
+  @include grid-media($mobile) {
+    width: auto !important;
+    float: none;
+  }
 }
 
-#modx-import-base-path, #modx-import-resource-class, #modx-import-allowed-extensions, #modx-import-element {
-	height:auto;
-	width:100% !important;
-	box-sizing:border-box;
+#modx-import-base-path,
+#modx-import-resource-class,
+#modx-import-allowed-extensions,
+#modx-import-element {
+  height: auto;
+  width: 100% !important;
+  box-sizing: border-box;
 }
 
-#x-form-el-modx-import-base-path, #x-form-el-modx-import-resource-class, #x-form-el-modx-import-allowed-extensions, #x-form-el-modx-import-element {
-	@include grid-media($mobile) {
-		width:100% !important;
-		padding-left:0 !important;
-	}
+#x-form-el-modx-import-base-path,
+#x-form-el-modx-import-resource-class,
+#x-form-el-modx-import-allowed-extensions,
+#x-form-el-modx-import-element {
+  @include grid-media($mobile) {
+    width: 100% !important;
+    padding-left: 0 !important;
+  }
 }
 
 .x-panel {
   &.drag-n-drop {
     z-index: 0;
+
     &:before {
       position: absolute;
       top: 0;
@@ -427,14 +482,17 @@ jumping around */
       opacity: .1;
       z-index: -5;
     }
-    & > .x-panel-bwrap {
+
+    &>.x-panel-bwrap {
       background: transparent;
     }
   }
+
   &.drag-over {
     .x-form-field {
       background: transparent;
     }
+
     &:after {
       content: "";
       top: 0;
@@ -443,9 +501,9 @@ jumping around */
       left: 0;
       position: absolute;
       display: block;
-      opacity: 0.1;
-      background: forestgreen;
-      border: 5px solid darkgreen;
+      opacity: .1;
+      background: $green;
+      border: 5px solid $green;
     }
   }
 }
@@ -456,39 +514,50 @@ jumping around */
   font-size: 16px;
   margin: 0 0 0 0;
   padding: 0 0 10px 0;
+
   #modx-resource-tabs & {
     display: flex;
     color: $darkGray;
     margin-bottom: 5px;
     border-bottom: 1px solid $borderColor;
+
     .x-panel-header-text {
       order: 0;
       font-size: 14px;
       flex: 1;
     }
+
     .x-tool.x-tool-toggle {
       order: 1;
       margin-left: auto;
     }
   }
+
   #modx-resource-main-left & {
     border-bottom: 0;
     padding-top: 15px !important;
     right: 15px;
     position: absolute;
     z-index: 20;
-    .x-panel-header-text { display: none; }
-    .x-tool.x-tool-toggle {}
+
+    .x-panel-header-text {
+      display: none;
+    }
   }
+
   #modx-resource-main-left.x-panel-collapsed &,
   #modx-resource-main-left.x-panel-animated & {
     position: relative;
     padding-top: 15px !important;
     width: 100%;
     right: 0;
-    .x-panel-header-text { display: block; }
+
+    .x-panel-header-text {
+      display: block;
+    }
   }
 }
+
 .x-panel-collapsed {
   #modx-resource-tabs & {
     .x-panel-header {
@@ -508,36 +577,51 @@ jumping around */
   color: #999 !important;
 }
 
-a.x-grid-link{ color:$mainText; text-decoration: none; }
-a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
+a.x-grid-link {
+  color: $mainText;
+  text-decoration: none;
+}
+
+a.x-grid-link:hover,
+a.x-grid-link:focus {
+  text-decoration: underline;
+}
 
 /* panel stylings */
-.modx-page-header, .modx-page-header div {
+.modx-page-header,
+.modx-page-header div {
   background-color: transparent !important;
+
   #modx-panel-welcome & {
     margin: 0 1rem 1rem 1rem;
   }
 }
 
 @include grid-media($gtDesktop) {
+
   // New header
-  #modx-content > .x-panel-bwrap > .x-panel-body > .x-panel {
+  #modx-content>.x-panel-bwrap>.x-panel-body>.x-panel {
     margin: 0;
-    .modx-page-header, #modx-resource-breadcrumbs {
+
+    .modx-page-header,
+    #modx-resource-breadcrumbs {
       margin-top: 1.25rem;
       font-weight: bold;
       box-sizing: border-box;
       padding-left: 15px;
       font-size: 16px;
-      & + div {
+
+      &+div {
         margin: 1rem;
       }
     }
+
     #modx-resource-breadcrumbs {
       width: 100% !important;
     }
   }
 }
+
 #modx-content form.x-panel-body {
   background-color: transparent !important;
 }
@@ -546,34 +630,41 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 
 #modx-content {
   @include grid-media($mobile) {
-    position:relative;
-    width:auto !important;
-    top:auto !important;
-    left:auto !important;
+    position: relative;
+    width: auto !important;
+    top: auto !important;
+    left: auto !important;
   }
+
   .modx_error {
     width: 95%;
     margin: 26px 0 0 15px;
+
     h2 {
       margin: 0 0 14px 0;
     }
+
     .error_container {
       padding: 10px;
-      border: 2px solid #f22;
+      border: 2px solid $red;
       background: #f99;
       @include border-top-radius(3px);
       @include border-bottom-radius(3px);
+
       ul {
         list-style: none;
         margin-top: 6px;
         margin-left: 0;
+
         li {
           margin-bottom: 6px;
+
           &:last-child {
             margin-bottom: 0;
           }
         }
       }
+
       &.multiple {
         p:first-child {
           font-size: 1.4em;
@@ -582,11 +673,12 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
       }
     }
   }
+
   .x-panel-body {
-	@include grid-media($mobile) {
-	  height: auto !important;
-	  width: auto !important;
-	}
+    @include grid-media($mobile) {
+      height: auto !important;
+      width: auto !important;
+    }
   }
 }
 
@@ -598,7 +690,7 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 
 /* news articles */
 .news_article {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid $alto;
   padding: 10px 0 33px;
 }
 
@@ -607,7 +699,7 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 }
 
 .news_article .content {
-  color: #444;
+  color: $tundora;
 }
 
 .news_article a {
@@ -702,7 +794,7 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 
 .x-column-tree .x-tree-node .x-tree-selected a span {
   background: transparent;
-  color: #000;
+  color: $darkGray;
 }
 
 .x-tree-col {
@@ -712,8 +804,9 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
   zoom: 1;
 }
 
-.x-tree-col-text,.x-tree-hd-text {
-  color: #000;
+.x-tree-col-text,
+.x-tree-hd-text {
+  color: $darkGray;
   font: $fontSmall;
   overflow: hidden;
   padding: 3px 3px 3px 5px;
@@ -728,7 +821,7 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 }
 
 .x-tree-hd {
-  border-left: 1px solid #eee;
+  border-left: 1px solid $gallery;
   border-right: 1px solid #d0d0d0;
   float: left;
   overflow: hidden;
@@ -809,23 +902,23 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 }
 
 .ux-row-action-item:hover {
-  background: #dfdfdf;
-  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, white 100%) repeat scroll 0 0 transparent;
-  background: -ms-linear-gradient(center bottom, #dfdfdf 0%, white 100%);
-  background: -o-linear-gradient(center bottom, #dfdfdf 0%, white 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #dfdfdf));
-  background: -webkit-linear-gradient(center bottom, #dfdfdf 0%, white 100%);
-  background: linear-gradient(center bottom, #dfdfdf 0%, white 100%);
+  background: $alto;
+  background: -moz-linear-gradient(center bottom, $alto 0%, white 100%) repeat scroll 0 0 transparent;
+  background: -ms-linear-gradient(center bottom, $alto 0%, white 100%);
+  background: -o-linear-gradient(center bottom, $alto 0%, white 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, $alto));
+  background: -webkit-linear-gradient(center bottom, $alto 0%, white 100%);
+  background: linear-gradient(center bottom, $alto 0%, white 100%);
   border: 1px solid #9caf78;
   color: #636f4c !important;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#dfdfdf,GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$white, endColorstr=$alto, GradientType=0);
 }
 
 .ux-row-action-item:active {
-  background-color: #ffffff;
+  background-color: $white;
   background-image: none;
   border-color: #CFCFCF #C0C0C0 #AAAAAA;
-  box-shadow: 0 0 3px #aaaaaa inset;
+  box-shadow: 0 0 3px #AAAAAA inset;
   margin: 2px 1px 0;
 }
 
@@ -847,16 +940,16 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
   border-style: solid;
   border-width: 1px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 0 1px;
-  color: #444;
+  color: $tundora;
   cursor: pointer;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fcfcfc,endColorstr=#dcdcdc,GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fcfcfc, endColorstr=#dcdcdc, GradientType=0);
   float: left;
   font-weight: bold;
   margin: 2px 1px 0;
   overflow: hidden;
   padding: 3px;
   position: relative;
-  text-shadow: 0 1px 0 #FAFAFA;
+  text-shadow: 0 1px 0 $alabastersolid;
 }
 
 /* checkbox tree */
@@ -871,12 +964,15 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 .x-tree-checkbox-over .x-tree-checkbox {
   background-position: -13px 0;
 }
+
 .x-tree-checkbox-down .x-tree-checkbox {
   background-position: -26px 0;
 }
+
 .x-tree-node-disabled .x-tree-checkbox {
   background-position: -39px 0;
 }
+
 .x-tree-node-checked {
   background-position: 0 -13px;
 }
@@ -884,9 +980,11 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 .x-tree-checkbox-over .x-tree-node-checked {
   background-position: -13px -13px;
 }
+
 .x-tree-checkbox-down .x-tree-node-checked {
   background-position: -26px -13px;
 }
+
 .x-tree-node-disabled .x-tree-node-checked {
   background-position: -39px -13px;
 }
@@ -894,39 +992,64 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 .x-tree-node-grayed {
   background-position: 0 -26px;
 }
+
 .x-tree-checkbox-over .x-tree-node-grayed {
   background-position: -13px -26px;
 }
+
 .x-tree-checkbox-down .x-tree-node-grayed {
   background-position: -26px -26px;
 }
+
 .x-tree-node-disabled .x-tree-node-grayed {
   background-position: -39px -26px;
 }
 
-.x-tree-branch-unchecked .x-tree-checkbox,.x-tree-branch-unchecked .x-tree-node-checked,.x-tree-branch-unchecked .x-tree-node-grayed {
+.x-tree-branch-unchecked .x-tree-checkbox,
+.x-tree-branch-unchecked .x-tree-node-checked,
+.x-tree-branch-unchecked .x-tree-node-grayed {
   background-position: 0 0;
 }
-.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-checkbox,.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-checked,.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-grayed {
+
+.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-checkbox,
+.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-checked,
+.x-tree-branch-unchecked .x-tree-checkbox-over .x-tree-node-grayed {
   background-position: -13px 0;
 }
-.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-checkbox,.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-checked,.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-grayed {
+
+.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-checkbox,
+.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-checked,
+.x-tree-branch-unchecked .x-tree-checkbox-down .x-tree-node-grayed {
   background-position: -26px 0;
 }
-.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-checkbox,.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-checked,.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-grayed {
+
+.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-checkbox,
+.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-checked,
+.x-tree-branch-unchecked .x-tree-node-disabled .x-tree-node-grayed {
   background-position: -39px 0;
 }
 
-.x-tree-branch-checked .x-tree-checkbox,.x-tree-branch-checked .x-tree-node-checked,.x-tree-branch-checked .x-tree-node-grayed {
+.x-tree-branch-checked .x-tree-checkbox,
+.x-tree-branch-checked .x-tree-node-checked,
+.x-tree-branch-checked .x-tree-node-grayed {
   background-position: 0 -13px;
 }
-.x-tree-branch-checked .x-tree-checkbox-over .x-tree-checkbox,.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-checked,.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-grayed {
+
+.x-tree-branch-checked .x-tree-checkbox-over .x-tree-checkbox,
+.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-checked,
+.x-tree-branch-checked .x-tree-checkbox-over .x-tree-node-grayed {
   background-position: -13px -13px;
 }
-.x-tree-branch-checked .x-tree-checkbox-down .x-tree-checkbox,.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-checked,.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-grayed {
+
+.x-tree-branch-checked .x-tree-checkbox-down .x-tree-checkbox,
+.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-checked,
+.x-tree-branch-checked .x-tree-checkbox-down .x-tree-node-grayed {
   background-position: -26px -13px;
 }
-.x-tree-branch-checked .x-tree-node-disabled .x-tree-checkbox,.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-checked,.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-grayed {
+
+.x-tree-branch-checked .x-tree-node-disabled .x-tree-checkbox,
+.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-checked,
+.x-tree-branch-checked .x-tree-node-disabled .x-tree-node-grayed {
   background-position: -39px -13px;
 }
 
@@ -1011,8 +1134,9 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 .ux-up-indicator {
   background-color: #FF0;
   height: 17px;
-  opacity: 0.4;
-  filter: alpha(opacity=40); /* for IE <= 8 */
+  opacity: .4;
+  filter: alpha(opacity=40);
+  /* for IE <= 8 */
   position: absolute;
   width: 40px;
   /*filter: alpha(opacity=40);*/
@@ -1051,7 +1175,7 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 }
 
 .ux-ftm-nodename {
-  color: #000;
+  color: $darkGray;
   cursor: default !important;
   font-weight: 700;
 }
@@ -1080,9 +1204,10 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 
 /* status messages */
 .modx-status-msg {
-    @include grid-media($mobile) {
-        max-width: 100%;
-    }
+  @include grid-media($mobile) {
+    max-width: 100%;
+  }
+
   background: $statusMessageBg;
   border-radius: $borderRadius;
   box-sizing: border-box;
@@ -1094,64 +1219,68 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
   right: 15px;
   width: 25%;
   z-index: 20000;
+
   &:before {
-      position: relative;
+    position: relative;
   }
+
   &:after {
-      background: $statusMessageIconBg;
-      border-radius: 50%;
-      color: $statusMessageIconText;
-      @extend %pseudo-font;
-      content: fa-content($fa-var-check);
-      display: inline-block;
-      font-size: 16px;
-      height: 38px;
-      left: 15px;
-      line-height: 36px;
-      margin-right: 13px;
-      position: absolute;
-      text-align: center;
-      top: 15px;
-      vertical-align: middle;
-      width: 38px;
+    background: $statusMessageIconBg;
+    border-radius: 50%;
+    color: $statusMessageIconText;
+    @extend %pseudo-font;
+    content: fa-content($fa-var-check);
+    display: inline-block;
+    font-size: 16px;
+    height: 38px;
+    left: 15px;
+    line-height: 36px;
+    margin-right: 13px;
+    position: absolute;
+    text-align: center;
+    top: 15px;
+    vertical-align: middle;
+    width: 38px;
   }
+
   h3,
   span {
-      font-size: 14px;
+    font-size: 14px;
   }
+
   h3 {
-     color: $statusMessageText;
-     margin: 0;
+    color: $statusMessageText;
+    margin: 0;
   }
 
 }
 
 // position the success message in the center of the screen
 .modx-status-msg.has-position-center-center {
-    bottom: auto;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    right: 0;
-    top: 50%;
-    transform: translateY(-50%);
+  bottom: auto;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 // position the success message center top of the screen
 .modx-status-msg.has-position-center-top {
-    bottom: auto;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-    right: 0;
-    top: 15px;
+  bottom: auto;
+  left: 0;
+  margin-left: auto;
+  margin-right: auto;
+  right: 0;
+  top: 15px;
 }
 
 .modx-status-msg.has-position-right-top {
-    bottom: auto;
-    left: auto;
-    right: 15px;
-    top: 15px;
+  bottom: auto;
+  left: auto;
+  right: 15px;
+  top: 15px;
 }
 
 /* status messages mobile view */
@@ -1159,14 +1288,14 @@ a.x-grid-link:hover, a.x-grid-link:focus{ text-decoration: underline; }
 .modx-status-msg.has-position-center-center,
 .modx-status-msg.has-position-center-top,
 .modx-status-msg.has-position-right-top {
-    @include grid-media($mobile) {
-        border-radius: 0;
-        top: auto;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 100%;
-    }
+  @include grid-media($mobile) {
+    border-radius: 0;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
 }
 
 iframe[classname="x-hidden"] {
@@ -1285,16 +1414,18 @@ iframe[classname="x-hidden"] {
 
 #modx-grid-policy-permissions,
 #modx-grid-template-permissions {
-    .x-grid3-cell-inner,
-    .x-grid3-hd-inner {
-        white-space: normal;
-    }
+
+  .x-grid3-cell-inner,
+  .x-grid3-hd-inner {
+    white-space: normal;
+  }
 }
 
 /* MODExt common classes */
 .container {
   margin: 20px 15px 20px;
 }
+
 /* prevent cut off box shadows */
 .container,
 .x-plain-bwrap,
@@ -1351,16 +1482,16 @@ iframe[classname="x-hidden"] {
 
 /* description panels in windows are styled by panel-desc styles, they seem to always have this class */
 /*.win-desc {
-  background: #DFDFDF;
-  background: -moz-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%) repeat scroll 0 0 transparent;
-  background: -ms-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -o-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f4f4), color-stop(100%, #dfdfdf));
-  background: -webkit-linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  background: linear-gradient(center bottom, #dfdfdf 0%, #f4f4f4 100%);
-  border-bottom: 1px solid #CCC !important;
+  background: $alto;
+  background: -moz-linear-gradient(center bottom, $alto 0%, $wildSand 100%) repeat scroll 0 0 transparent;
+  background: -ms-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -o-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $wildSand), color-stop(100%, $alto));
+  background: -webkit-linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  background: linear-gradient(center bottom, $alto 0%, $wildSand 100%);
+  border-bottom: 1px solid $silver !important;
   border: 0 none;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F4F4F4,endColorstr=#DFDFDF,GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$wildSand,endColorstr=$alto,GradientType=0);
   margin-top: 0;
   padding: 10px 0 0 !important;
 }
@@ -1371,7 +1502,7 @@ iframe[classname="x-hidden"] {
   font-style: italic;
   line-height: 1.4;
   padding: 0 10px 10px;
-  text-shadow: 0 1px 0 #fff;
+  text-shadow: 0 1px 0 $white
 }*/
 
 /* All the other wrapped element (forms need to be wrapped in a panel isolated from the other components) */
@@ -1404,6 +1535,7 @@ iframe[classname="x-hidden"] {
       color: $darkestGray;
       margin: 0;
       padding-left: 0;
+
       @include grid-media($mobile) {
         width: 100%;
         margin-top: 15px;
@@ -1412,30 +1544,38 @@ iframe[classname="x-hidden"] {
       }
     }
   }
+
   ul {
     order: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
+
     li {
       font: normal 16px $bodyfonts;
       color: $darkestGray;
+
       a {
         font: normal 16px $bodyfonts;
         text-decoration: none;
+
         &.not_published {
           font-style: $unpubText;
+
           &:hover {
             color: darken($colorSplash, 10%);
           }
         }
+
         &.menu_hidden {
           color: $hidden;
+
           &:hover {
             color: darken($colorSplash, 10%) !important;
           }
         }
       }
+
       &:after {
         @extend %pseudo-font;
         content: fa-content($fa-var-chevron-right);
@@ -1450,24 +1590,30 @@ iframe[classname="x-hidden"] {
 #modx-abtn-menu-list {
   .x-menu-item {
     padding: 10px 20px;
+
     .x-menu-item-text {
       display: flex;
       align-items: baseline;
       justify-content: space-between;
+
       .icon {
         text-align: center;
         margin-left: 10px;
       }
     }
   }
+
   #modx-abtn-delete {
     color: $red;
+
     &:hover {
       color: $red;
     }
   }
+
   #modx-abtn-undelete {
     color: $green;
+
     &:hover {
       color: $green;
     }
@@ -1478,18 +1624,24 @@ iframe[classname="x-hidden"] {
   .x-tab-panel-bwrap {
     box-shadow: none;
   }
-  .x-tab-panel-bwrap, .x-tab-panel-body {
+
+  .x-tab-panel-bwrap,
+  .x-tab-panel-body {
     overflow: visible !important;
   }
-  & > .x-tab-panel-bwrap > .x-tab-panel-body > .x-panel:not(#modx-resource-settings) {
+
+  &>.x-tab-panel-bwrap>.x-tab-panel-body>.x-panel:not(#modx-resource-settings) {
     box-shadow: $boxShadow;
+
     .panel-desc {
       margin-top: 0;
     }
   }
 }
+
 #modx-resource-settings {
   background: #F2F2F2;
+
   #modx-resource-main-left {
     padding: 0 15px 15px 15px;
     background: $white;
@@ -1499,33 +1651,47 @@ iframe[classname="x-hidden"] {
     box-shadow: $boxShadow;
     position: relative;
   }
+
   #modx-resource-main-right {
     .modx-resource-panel {
       &:not(:last-child) {
         margin-bottom: 15px;
       }
+
       padding: 15px;
       background: $white;
       border-radius: $borderRadius;
       box-shadow: $boxShadow;
     }
   }
+
   .main-wrapper {
     padding: 0;
     background: transparent;
   }
+
   .x-datetime-wrap {
     table {
       width: 100%;
+
       td {
         width: 50% !important;
         max-width: 50% !important;
+
         input {
           width: calc(100% - 30px);
         }
-        &:first-child { padding-right: 5px !important; }
-        &:last-child { padding-left: 5px !important;; }
+
+        &:first-child {
+          padding-right: 5px !important;
+        }
+
+        &:last-child {
+          padding-left: 5px !important;
+          ;
+        }
       }
+
       .x-form-field-trigger-wrap {
         width: 100% !important;
       }
@@ -1555,7 +1721,8 @@ iframe[classname="x-hidden"] {
 
 #modx-resource-tvs-div {
   border-top-width: 0;
-  visibility: hidden; /* prevent flash of unstyled tv from elements on page load */
+  visibility: hidden;
+  /* prevent flash of unstyled tv from elements on page load */
 }
 
 .modx-permissions-list {
@@ -1569,9 +1736,10 @@ iframe[classname="x-hidden"] {
 }
 
 /* for selectability in ext grids */
-.x-selectable, .x-selectable * {
+.x-selectable,
+.x-selectable * {
   -khtml-user-select: all !important;
-  user-select:text !important;
+  user-select: text !important;
 }
 
 /* Lightbox */
@@ -1583,13 +1751,16 @@ iframe[classname="x-hidden"] {
   width: 100%;
   z-index: 15000;
 }
+
 #ux-lightbox img {
   height: auto;
   width: auto;
 }
+
 #ux-lightbox a img {
   border: medium none;
 }
+
 #ux-lightbox-outerImageContainer {
   background-color: $white;
   height: 250px;
@@ -1597,9 +1768,11 @@ iframe[classname="x-hidden"] {
   position: relative;
   width: 250px;
 }
+
 #ux-lightbox-imageContainer {
   padding: 10px;
 }
+
 #ux-lightbox-loading {
   background: url($imgPath + 'style/loading.gif') no-repeat scroll center 15% transparent;
   height: 25%;
@@ -1610,6 +1783,7 @@ iframe[classname="x-hidden"] {
   top: 40%;
   width: 100%;
 }
+
 #ux-lightbox-hoverNav {
   height: 100%;
   left: 0;
@@ -1618,61 +1792,75 @@ iframe[classname="x-hidden"] {
   width: 100%;
   z-index: 10;
 }
+
 #ux-lightbox-hoverNav a {
   outline: medium none;
 }
-#ux-lightbox-imageContainer > #ux-lightbox-hoverNav {
+
+#ux-lightbox-imageContainer>#ux-lightbox-hoverNav {
   left: 0;
 }
+
 #ux-lightbox-navPrev,
 #ux-lightbox-navNext {
   display: block;
   height: 100%;
   width: 49%;
 }
+
 #ux-lightbox-navPrev {
   float: left;
   left: 0;
 }
+
 #ux-lightbox-navPrev:hover,
 #ux-lightbox-navPrev:visited:hover {
   background: transparent url('images/lb-prev.png') no-repeat scroll left 33%;
 }
+
 #ux-lightbox-navNext {
   float: right;
   right: 0;
 }
+
 #ux-lightbox-navNext:hover,
 #ux-lightbox-navNext:visited:hover {
   background: transparent url('images/lb-next.png') no-repeat scroll right 33%;
 }
+
 #ux-lightbox-outerDataContainer {
   margin: 0 auto;
   width: 100%;
 }
+
 #ux-lightbox-dataContainer {
-  background-color: #ffffff;
+  background-color: $white;
   font: $fontSmall;
   font-size: 10px;
   overflow: auto;
 }
+
 #ux-lightbox-data {
   color: #666;
   padding: 0 10px;
 }
+
 #ux-lightbox-data #ux-lightbox-details {
   float: left;
   text-align: left;
   width: 80%;
 }
+
 #ux-lightbox-data #ux-lightbox-caption {
   font-weight: bold;
 }
+
 #ux-lightbox-data #ux-lightbox-imageNumber {
   clear: left;
   display: block;
   padding-bottom: 1em;
 }
+
 #ux-lightbox-data #ux-lightbox-navClose {
   background: transparent url($imgPath + 'style/close.png') no-repeat scroll 0 0;
   float: right;
@@ -1681,9 +1869,10 @@ iframe[classname="x-hidden"] {
   padding-bottom: 0.7em;
   width: 16px;
 }
+
 #ux-lightbox-overlay,
 #ux-lightbox-shim {
-  background-color: #000;
+  background-color: $darkGray;
   border: 0 none;
   height: 500px;
   left: 0;
@@ -1694,17 +1883,21 @@ iframe[classname="x-hidden"] {
   width: 100%;
   z-index: 14999;
 }
+
 #ux-lightbox-shim {
   background-color: transparent;
   z-index: 89;
 }
+
 /* Card Layout (ex. Package Manager) */
 .x-panel-body-noheader .x-grid3-row {
   position: relative;
 }
+
 .x-grid3-col-main {
   padding: 10px 5px 35px;
 }
+
 .x-grid3-cell-inner.x-grid3-col-main h3 {
   color: #555555;
   font: $baseText;
@@ -1712,41 +1905,52 @@ iframe[classname="x-hidden"] {
   line-height: 1;
   margin: 0 0 5px 0;
 }
-.x-grid3-cell-inner.x-grid3-col-main  .not-installed {
+
+.x-grid3-cell-inner.x-grid3-col-main .not-installed {
   color: #999999;
 }
+
 .package-installed {
-  color: gray;
-  opacity: 0.5;
+  color: $gray;
+  opacity: .5;
   filter: alpha(opacity=50); /* for IE <= 8 */
 }
+
 #modx-grid-package .green {
   text-align: center;
 }
+
 #modx-grid-package .green a {
   color: $red !important;
 }
+
 #modx-grid-package .red {
   color: $green !important;
   text-align: center;
 }
+
 .grid-with-buttons .x-grid3-row-expanded .x-grid3-row-body {
   margin: -45px 2px 0 -20px;
   padding: 18px 25px 40px;
 }
+
 /* Package browser */
 .home-panel ol {
   border-top: 1px solid #CACACA;
 }
+
 .home-panel ol li {
   border-bottom: 1px solid #e0e0e0;
 }
+
 .home-panel ol li:first-child {
   border-top-color: 0 none;
 }
+
 .home-panel ol li:last-child {
   border-bottom: 0 none;
 }
+
 .home-panel ol li button {
   background-color: transparent;
   border: 0 none;
@@ -1759,6 +1963,7 @@ iframe[classname="x-hidden"] {
   position: relative;
   text-decoration: none;
 }
+
 .home-panel ol li:hover button {
   /*background: transparent url($imgPath + 'style/search.png') no-repeat scroll right center;*/
   color: $colorSplash;
@@ -1769,74 +1974,93 @@ iframe[classname="x-hidden"] {
     content: fa-content($fa-var-search);
     font-size: 14px;
     margin-top: -7px; /* half of the height to center vertically with top 50% */
-    opacity: 0.6;
+    opacity: .6;
     filter: alpha(opacity=60); /* for IE <= 8 */
-    position: absolute; top: 50%; right: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
     text-align: center;
     width: 20px;
     transition: opacity 0.25s;
   }
 }
+
 .home-panel ol li .highlighted {
   color: #909090;
   float: right;
   font-size: 10px;
   padding: 13px 10px 0;
 }
+
 .home-panel ol li button .ct {
   color: #AAA;
   margin-right: 10px;
 }
+
 .home-panel .one_half {
   overflow: hidden;
 }
+
 .home-panel .desc-wrapper {
   margin-top: 38px;
 }
+
 .home-panel .text-wrapper {
   font-style: normal;
   max-height: none;
 }
+
 .home-panel .provider_name {
   background-color: #9bb3bf;
   line-height: 1.8;
 }
+
 .home-panel .pnl_instructions {
   margin: 20px 0;
 }
+
 .home-panel .stats {
   clear: both;
   display: inline-block;
   margin-top: 15px;
 }
+
 .home-panel .stats p {
   color: #777777;
   font-size: 12px;
   font-style: italic;
   line-height: 1.5;
 }
+
 .pbr-provider-box {
   float: left;
   margin-top: 10px;
   width: 250px;
 }
+
 .pbr-provider-home {
   padding: 10px;
 }
+
 .pbr-repository-view {
   padding: 10px;
 }
+
 .pbr-tag-view {
   padding: 10px;
 }
+
 .pbr-details-right {
   float: right !important;
   text-align: right !important;
 }
+
 .pbr-thumb-downloaded {
-  opacity: 0.5;
-  filter: alpha(opacity=50); /* for IE <= 8 */
+  opacity: .5;
+  filter: alpha(opacity=50);
+  /* for IE <= 8 */
 }
+
 /*#package-browser-card-container {
   margin: 0;
 }*/
@@ -1846,13 +2070,16 @@ iframe[classname="x-hidden"] {
   position: relative;
   width: 48%;
 }
+
 .last {
   clear: right;
   margin-right: 0 !important;
 }
+
 .package-readme {
   padding: 8px 11px 0px;
 }
+
 /* Template sidebar */
 #modx-package-browser-home {
   margin-top: 5px;
@@ -1866,6 +2093,7 @@ iframe[classname="x-hidden"] {
   line-height: 1.4;
   padding: 12px;
 }
+
 .aside-details {
   background-color: transparent;
   /*background-color: #FDFDFD;*/
@@ -1873,44 +2101,54 @@ iframe[classname="x-hidden"] {
   border-radius: $borderRadius;
   margin-right: 0;
 }
+
 .aside-details .selected h5 {
   color: $darkestGray;
   font-size: 14px;
   margin: 10px 0;
 }
+
 .aside-details .selected img {
   border-radius: $borderRadius;
   border: 1px solid $lightGray;
   height: 80px;
   width: 90px;
 }
+
 .aside-details .item {
   margin-bottom: 25px;
 }
-.aside-details .item p, .aside-details .item li {
+
+.aside-details .item p,
+.aside-details .item li {
   color: #888;
   line-height: 1.4;
 }
+
 .aside-details .item a {
   color: $darkestGray;
   font-style: italic;
 }
+
 .aside-details h4 {
   color: $darkestGray;
   font-size: 14px;
   margin: 10px 0;
   text-transform: uppercase;
 }
+
 .aside-details .aside-details h4 {
   font-size: 12px;
   margin-top: 0;
 }
+
 .aside-details .selected {
   border-bottom: 1px solid $lightGray;
   color: $black;
   padding: 15px;
   text-align: center;
 }
+
 .aside-details .description,
 .aside-details .instructions {
   background-color: $lightestGray;
@@ -1919,25 +2157,30 @@ iframe[classname="x-hidden"] {
   line-height: 1.2;
   padding: 15px;
 }
+
 .aside-details .infos {
   padding: 15px;
   font-size: 12px;
   line-height: 1.2;
   color: $darkestGray;
 }
+
 .aside-details .infos ul li {
   font-size: 12px;
 }
+
 .aside-details .infos ul li .infoname {
   color: $mediumGray;
   font-weight: bold;
   width: 50%;
 }
+
 .aside-details .infos ul li .infovalue {
   max-width: 50%;
   padding: 0 8px;
   word-wrap: break-word;
 }
+
 .aside-details .infos ul li span {
   display: inline-block;
   padding: 0;
@@ -1947,7 +2190,7 @@ iframe[classname="x-hidden"] {
 .thumb-wrapper {
   background-color: #F5F5F5;
   border-radius: $borderRadius;
-  border: 1px solid #ccc;
+  border: 1px solid $silver;
   cursor: pointer;
   float: left;
   margin: 0 15px 15px 0;
@@ -1956,21 +2199,25 @@ iframe[classname="x-hidden"] {
   position: relative;
   width: 250px;
   box-sizing: border-box;
+
   * {
     box-sizing: border-box;
   }
+
   .thumb {
-    background-color: #fff;
-    border-bottom: 1px solid #ccc;
+    background-color: $white;
+    border-bottom: 1px solid $silver;
     height: 170px;
     margin: 0 auto;
     width: 100%;
     text-align: center;
     position: relative;
+
     img {
       max-height: 100%;
       max-width: 100%;
     }
+
     .no-preview {
       color: #888;
       display: inline-block;
@@ -1981,9 +2228,11 @@ iframe[classname="x-hidden"] {
       text-transform: uppercase;
     }
   }
-  span.downloaded, span.featured {
-    background-color: #658F1A;
-    color: #fff;
+
+  span.downloaded,
+  span.featured {
+    background-color: $green;
+    color: $white;
     font-weight: bold;
     padding: 5px 0;
     position: absolute;
@@ -1992,21 +2241,24 @@ iframe[classname="x-hidden"] {
     top: 68px;
     width: 100%;
   }
+
   span.featured {
     background-color: $colorSplash;
     color: $colorSplashContrast;
     top: initial;
     bottom: 0;
   }
+
   span {
     display: block;
     overflow: hidden;
     text-align: left;
-    text-shadow: 0 1px 0 #fff;
+    text-shadow: 0 1px 0 $white;
     margin: 0;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
   .name {
     color: $darkestGray;
     font-size: 12px;
@@ -2015,6 +2267,7 @@ iframe[classname="x-hidden"] {
     padding: 12px 8px 12px 12px;
     width: 55%;
   }
+
   .downloads {
     color: #999;
     font-size: 9px;
@@ -2024,6 +2277,7 @@ iframe[classname="x-hidden"] {
     padding: 8px 12px 8px 8px;
     width: 45%;
   }
+
   .thumb-description {
     clear: both;
     padding: 0 12px;
@@ -2031,6 +2285,7 @@ iframe[classname="x-hidden"] {
     overflow: hidden;
     height: 50px;
   }
+
   .thumb-footer {
     color: #999;
     font-size: 9px;
@@ -2040,9 +2295,10 @@ iframe[classname="x-hidden"] {
   }
 
   &.selected {
-    background-color: #fff;
+    background-color: $white;
     padding: 0 0 12px;
     border-color: $colorSplash;
+
     img {
       border: 0 none;
     }
@@ -2050,36 +2306,47 @@ iframe[classname="x-hidden"] {
 }
 
 .pbr-thumb {
-  background: #ddd;
+  background: $alto;
   height: 80px;
   padding: 3px;
   width: 100px;
 }
+
 .pbr-thumb img {
   height: 80px;
   width: 100px;
 }
-.x-grid3-hd-text-col,.x-grid3-hd-meta-col,.x-grid3-hd-info-col {
+
+.x-grid3-hd-text-col,
+.x-grid3-hd-meta-col,
+.x-grid3-hd-info-col {
   text-align: center;
 }
+
 .x-grid3-col-text-col {
   font-size: 11px;
   text-align: center;
 }
-.x-grid3-col-info-col, .x-grid3-col-meta-col {
+
+.x-grid3-col-info-col,
+.x-grid3-col-meta-col {
   font-size: 11px;
   font-weight: bold;
   text-align: center;
 }
+
 .x-grid3-col-meta-col {
   color: $darkestGray;
 }
+
 .x-grid3-col-info-col {
   color: $green;
 }
+
 .not-installed .x-grid3-col-info-col {
   color: $red;
 }
+
 .inline-button {
   -webkit-box-align: center;
   display: inline;
@@ -2087,20 +2354,28 @@ iframe[classname="x-hidden"] {
   padding: 8px;
   text-align: center;
 }
+
 .meta-wrapper {
   color: #808080;
   max-height: 400px;
   overflow: auto;
   padding: 15px;
   word-wrap: break-word;
+
   ul {
     list-style: disc inside;
     padding-left: 15px;
   }
-  h1, h2, h3, h4, h5 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
     margin-top: 5px;
   }
 }
+
 .window-no-padding {
   .x-panel-mc {
     padding: 0 !important;
@@ -2120,19 +2395,19 @@ iframe[classname="x-hidden"] {
 }
 
 
-.upload-error{
-  color: #f00;
+.upload-error {
+  color: $red;
 }
 
-.upload-success{
-  color: #090;
+.upload-success {
+  color: $green;
 }
 
-.upload-status-text{
+.upload-status-text {
   white-space: normal;
 }
 
-.upload-thumb{
+.upload-thumb {
   float: right;
 }
 
diff --git a/_build/templates/default/sass/login.scss b/_build/templates/default/sass/login.scss
index 8399a43e199..975a809f168 100644
--- a/_build/templates/default/sass/login.scss
+++ b/_build/templates/default/sass/login.scss
@@ -21,7 +21,9 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
   outline: 0;
 }
@@ -30,7 +32,17 @@ html {
   box-shadow: 0 0 0 0.125rem $blue;
 }
 
-body, h1, h2, h3, h4, h5, h6, p, ol, ul, form {
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul,
+form {
   margin: 0;
   padding: 0;
   font-weight: normal;
@@ -56,7 +68,7 @@ body {
   width: calc(100% - 30rem);
   background: $lightGray no-repeat center center;
   background-size: cover;
-  opacity: 0.8;
+  opacity: .8;
 }
 
 .l-main {
@@ -136,8 +148,9 @@ p {
 a {
   color: $blue;
   text-decoration: none;
+
   &:hover {
-    opacity: 0.8;
+    opacity: .8;
   }
 }
 
@@ -159,6 +172,7 @@ label {
   color: $darkestGray;
   cursor: pointer;
   font-weight: 500;
+
   a {
     font-weight: 400;
   }
@@ -177,7 +191,7 @@ input {
   outline-color: $green;
 }
 
-label > input {
+label>input {
   margin-top: 0.25rem;
 }
 
@@ -228,6 +242,7 @@ input[type="checkbox"] {
   color: $blue;
   background: transparent;
   border: none;
+
   .c-arrow {
     stroke: $blue;
   }
@@ -236,11 +251,14 @@ input[type="checkbox"] {
 #modx-login-btn,
 #modx-fl-btn {
   border: 1px solid transparent;
-  &:hover, &:focus {
+
+  &:hover,
+  &:focus {
     background: $greener;
     color: $buttonColorPrimaryHover;
     transition: background-color .2s ease-out;
   }
+
   &:hover {
     box-shadow: none;
   }
@@ -270,6 +288,7 @@ input[type="checkbox"] {
   border: 0.125rem solid $green;
   padding: 0 1rem;
   border-radius: $borderRadius;
+
   &.is-visible {
     display: block;
   }
@@ -335,7 +354,7 @@ input[type="checkbox"] {
   transition: left 0.4s ease-in-out, right 0.4s ease-in-out;
   right: 0;
 
-  a:hover > & {
+  a:hover>& {
     right: -0.5rem;
   }
 
@@ -343,7 +362,7 @@ input[type="checkbox"] {
     transform: rotate(180deg);
     left: 0;
 
-    a:hover > & {
+    a:hover>& {
       left: -0.5rem;
       right: 0;
     }

From 13f04b0fa98623ce625a6d0b8d2300fa4d420d1e Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Sun, 17 Mar 2019 05:48:23 +0600
Subject: [PATCH 03/12] Small fix

---
 .../templates/default/sass/_breadcrumbs.scss  |  3 +--
 _build/templates/default/sass/_tabs.scss      | 12 ++++--------
 _build/templates/default/sass/_windows.scss   | 19 +++++++------------
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/_build/templates/default/sass/_breadcrumbs.scss b/_build/templates/default/sass/_breadcrumbs.scss
index af8628c9da2..dcf521a11c3 100644
--- a/_build/templates/default/sass/_breadcrumbs.scss
+++ b/_build/templates/default/sass/_breadcrumbs.scss
@@ -34,8 +34,7 @@
       }*/
 
       &.first {
-        padding: 0;
-        /* neutralize the normal li padding and give it to the inner element */
+        padding: 0; /* neutralize the normal li padding and give it to the inner element */
 
         /* the home breadcrumb with the house icon */
         &:before {
diff --git a/_build/templates/default/sass/_tabs.scss b/_build/templates/default/sass/_tabs.scss
index 3e222c3e746..dbf633f61dc 100644
--- a/_build/templates/default/sass/_tabs.scss
+++ b/_build/templates/default/sass/_tabs.scss
@@ -25,8 +25,7 @@
 }
 
 .x-tab-panel-header ul.x-tab-strip {
-  background-color: $tabStripBg !important;
-  /* override !important extjs default theme style */
+  background-color: $tabStripBg !important; * override !important extjs default theme style */
   /*border-bottom-color: $white;*/
   border: 0; /* prevent overflowing border, add to .x-tab-strip-wrap if necessary */
   margin: 0; /* was -1px */
@@ -59,8 +58,7 @@
       margin: 0; /* revert margin from main tabs for nested ones */
 
       .x-tab-strip {
-        background-color: $lightestGray !important;
-        /* override !important rule defined by extjs default theme */
+        background-color: $lightestGray !important; /* override !important rule defined by extjs default theme */
       }
     }
 
@@ -69,15 +67,13 @@
 
 .x-tab-panel-header,
 .x-tab-strip {
-  padding-left: 0;
-  /* was 1px */
+  padding-left: 0; /* was 1px */
 }
 
 .x-tab-panel-bwrap {
   box-shadow: $boxShadow;
   border-radius: $borderRadius;
-  overflow: visible;
-  /* prevent cut off box-shadow */
+  overflow: visible; /* prevent cut off box-shadow */
 
   /* no box-shadows on nested tab panels, MIGX for example */
   .x-tab-panel-bwrap {
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index 33970932fe6..3a9dcdfa99a 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -69,8 +69,7 @@
   /* the window content wrapper */
   .x-window-bwrap {
     /*background: $white;*/
-    overflow: visible;
-    /* prevent box-shadow from tabs and panel being cut off */
+    overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
     /*z-index: 2;*/
 
     /* the window main container */
@@ -101,10 +100,8 @@
   /* .x-window-bwrap */
 
   .x-window-body {
-    background-color: $winBodyBg !important;
-    /* override extjs default theme transparent !important style from .x-window-plain */
-    border: 0;
-    /* override extjs default theme border for .x-window-plain */
+    background-color: $winBodyBg !important; /* override extjs default theme transparent !important style from .x-window-plain */
+    border: 0; /* override extjs default theme border for .x-window-plain */
     /*overflow: visible; /* prevent box-shadow from tabs and panel being cut off */
     overflow-y: auto;
     padding: 15px;
@@ -172,7 +169,7 @@
 
 
       .x-tab-strip-wrap {
-        padding-top: 3px;  /* account for the 3px boxshadow for active tabs */
+        padding-top: 3px; /* account for the 3px boxshadow for active tabs */
 
         .x-tab-strip {
           border: 0; /* override extjs default theme of 1px solid white */
@@ -248,8 +245,7 @@
       background-color: $white;
       border: none;
       font: 12px $codefonts;
-      height: auto !important;
-      /* override extjs default theme */
+      height: auto !important; /* override extjs default theme */
       /*padding: 8px;*/
     }
 
@@ -323,8 +319,7 @@
   display: inline-block;
   float: left;
   position: relative;
-  width: 40px !important;
-  /* override extjs default theme style */
+  width: 40px !important; /* override extjs default theme style */
 
   &:before {
     @extend %pseudo-font;
@@ -627,7 +622,7 @@ body.x-body-masked .x-window-plain .x-window-mc {
   padding: 8px;
 }
 .x-window .x-dlg-mask {
-  background-color: $silverccc;
+  background-color: $silver;
 }
 .x-window-maximized .x-window-tc {
   padding-left: 0;

From 01fe2687c39197cf9d6278e1608d64a95feac0ac Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Sun, 17 Mar 2019 13:23:48 +0600
Subject: [PATCH 04/12] Additional changes in styles

---
 .../templates/default/sass/_breadcrumbs.scss  |  8 -----
 _build/templates/default/sass/_buttons.scss   |  4 ---
 _build/templates/default/sass/_forms.scss     | 32 ++++++++-----------
 _build/templates/default/sass/_help.scss      |  2 +-
 _build/templates/default/sass/_tabs.scss      | 13 ++++----
 _build/templates/default/sass/_tree.scss      |  9 ++----
 _build/templates/default/sass/_utility.scss   |  4 +--
 _build/templates/default/sass/_windows.scss   |  2 --
 .../templates/default/sass/_xtheme-modx.scss  |  7 ++--
 _build/templates/default/sass/index.scss      | 27 ++++++++--------
 10 files changed, 41 insertions(+), 67 deletions(-)

diff --git a/_build/templates/default/sass/_breadcrumbs.scss b/_build/templates/default/sass/_breadcrumbs.scss
index dcf521a11c3..f17eb9f3dd3 100644
--- a/_build/templates/default/sass/_breadcrumbs.scss
+++ b/_build/templates/default/sass/_breadcrumbs.scss
@@ -25,14 +25,6 @@
       position: relative;
       z-index: 1;
 
-      /*&.first {
-        padding: 0;
-
-        button {
-          padding: 8px 16px 8px 20px;
-        }
-      }*/
-
       &.first {
         padding: 0; /* neutralize the normal li padding and give it to the inner element */
 
diff --git a/_build/templates/default/sass/_buttons.scss b/_build/templates/default/sass/_buttons.scss
index 6d3b20befc8..e330c35ffab 100644
--- a/_build/templates/default/sass/_buttons.scss
+++ b/_build/templates/default/sass/_buttons.scss
@@ -110,7 +110,6 @@ button {
     &:focus {
       background: darken($green, 5%);
       box-shadow: 0 0 0 1px darken($green, 5%);
-      ;
     }
 
     &:active {
@@ -128,7 +127,6 @@ button {
     &:focus {
       background: darken($blue, 5%);
       box-shadow: 0 0 0 1px darken($blue, 5%);
-      ;
     }
 
     &:active {
@@ -333,8 +331,6 @@ button {
 }
 
 html.ext-strict body #modx-container .x-small-editor .x-form-text {
-
-  // #janky
   @include grid-media($mobile) {
     height: auto !important;
   }
diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 104392671ef..4290a6beb6d 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -34,7 +34,7 @@ textarea.x-form-field,
   border-radius: $borderRadius;
   border: 1px solid $borderColor;
   position: relative;
-  transition: border-color 0.25s;
+  transition: border-color .25s;
 }
 
 .x-viewport .x-trigger-wrap-focus,
@@ -100,8 +100,8 @@ input::-moz-focus-inner {
       padding: 17px 8px 0 0;
       position: relative;
       top: 0;
-      right: 0px;
-      transition: all 0.25s;
+      right: 0;
+      transition: all .25s;
       width: 16px;
 
       &:before {
@@ -139,7 +139,7 @@ input::-moz-focus-inner {
   /* label.x-form-item-label */
 
   &.modx-tv {
-    padding: 0 0 0 0px !important;
+    padding: 0 0 0 0 !important;
   }
 
   /* is outside of the label */
@@ -227,7 +227,7 @@ input::-moz-focus-inner {
     border: 1px solid $borderColor;
     border-radius: $borderRadius;
     padding: 5px;
-    transition: all 0.25s;
+    transition: all .25s;
 
     &:focus {
       border: 1px solid $borderColorFocus;
@@ -254,7 +254,7 @@ input::-moz-focus-inner {
     label.x-form-item-label {
       display: inline-block; /* override extjs default theme styles */
       margin: 0; /* override extjs default theme styles */
-      padding: 7px 0px 7px 0px;
+      padding: 7px 0 7px 0;
     }
   }
 
@@ -400,7 +400,6 @@ input::-moz-focus-inner {
   }
 }
 
-/* issue #5505 */
 .x-form-text {
   /*box-sizing: border-box;*/
   /* we cannot use this because extjs calculates widths with the old box-model */
@@ -443,7 +442,7 @@ input::-moz-focus-inner {
       right: 0;
       text-align: center;
       width: 30px;
-      transition: opacity 0.25s;
+      transition: opacity .25s;
     }
 
     &.x-form-trigger-over,
@@ -617,8 +616,7 @@ input::-moz-focus-inner {
 
   /* checkbox & radio button replacement */
   .x-form-checkbox,
-  input[type="checkbox"],
-  /* we need this to catch un-classed checkboxes in fieldset legends */
+  input[type="checkbox"], /* we need this to catch un-classed checkboxes in fieldset legends */
   .x-form-radio {
     /*display: none;*/
     cursor: pointer;
@@ -682,10 +680,8 @@ input::-moz-focus-inner {
   .x-form-check-wrap,
   .x-fieldset-checkbox-toggle legend,
   .x-fieldset legend {
-    [type="checkbox"]
+    [type="checkbox"]{
 
-    /*, [type="radio"]*/
-      {
       position: absolute;
       left: -9999px;
 
@@ -870,7 +866,7 @@ input::-moz-focus-inner {
           position: absolute;
           top: 0;
           right: 0;
-          transition: opacity 0.25s;
+          transition: opacity .25s;
           width: 16px;
           height: 100%;
 
@@ -1084,7 +1080,7 @@ input::-moz-focus-inner {
 
 /* fix combo on grid editor bug */
 .x-grid-editor .x-form-field-wrap {
-  background: #f6f2f7 url($imgPath + 'modx-theme/form/combo-bck.png') repeat-x scroll 0px 100%;
+  background: #f6f2f7 url($imgPath + 'modx-theme/form/combo-bck.png') repeat-x scroll 0 100%;
 }
 
 .x-grid-editor .x-form-field-wrap input {
@@ -1092,7 +1088,7 @@ input::-moz-focus-inner {
 }
 
 .x-grid-editor .x-form-field-wrap img {
-  background-color: white;
+  background-color: $white;
   background-image: url($imgPath + 'modx-theme/form/trigger.png');
 }
 
@@ -1350,7 +1346,7 @@ input::-moz-focus-inner {
     /* the refresh button */
     .x-toolbar-cell:last-child {
       opacity: 0;
-      transition: opacity 0.25s;
+      transition: opacity .25s;
 
       .x-btn {
         font-size: 12px;
@@ -1452,7 +1448,7 @@ input::-moz-focus-inner {
   filter: alpha(opacity=60); /* for IE <= 8 */
   margin: 0 auto;
   position: relative;
-  transition: opacity 0.25s;
+  transition: opacity .25s;
 
   &:before {
     @extend %pseudo-font;
diff --git a/_build/templates/default/sass/_help.scss b/_build/templates/default/sass/_help.scss
index 59fcb3e92ef..6200491a5ec 100644
--- a/_build/templates/default/sass/_help.scss
+++ b/_build/templates/default/sass/_help.scss
@@ -46,7 +46,7 @@
 }
 
 #managerbuttons ul li a {
-  background: linear-gradient(top, white, whitesmoke);
+  background: linear-gradient(top, $white, whitesmoke);
   border-radius: $borderRadius;
   border: 1px solid $borderColor;
   box-shadow: 0 1px 0 $borderColor;
diff --git a/_build/templates/default/sass/_tabs.scss b/_build/templates/default/sass/_tabs.scss
index dbf633f61dc..9e46a413d8d 100644
--- a/_build/templates/default/sass/_tabs.scss
+++ b/_build/templates/default/sass/_tabs.scss
@@ -25,7 +25,7 @@
 }
 
 .x-tab-panel-header ul.x-tab-strip {
-  background-color: $tabStripBg !important; * override !important extjs default theme style */
+  background-color: $tabStripBg !important; /* override !important extjs default theme style */
   /*border-bottom-color: $white;*/
   border: 0; /* prevent overflowing border, add to .x-tab-strip-wrap if necessary */
   margin: 0; /* was -1px */
@@ -129,7 +129,7 @@ ul.x-tab-strip li {
 
 .x-tab-strip-wrap {
   overflow: hidden;
-  padding: 2px 5px 0px 5px; /* keep the tab box-shadows visible */
+  padding: 2px 5px 0 5px; /* keep the tab box-shadows visible */
   margin-left: -5px; /* and move the tab strip back into place */
 }
 
@@ -144,7 +144,6 @@ ul.x-tab-strip li {
 }
 
 ul.x-tab-strip-top li:first-child {
-  /*margin-left: -1px*/
   margin-left: 0;
 }
 
@@ -195,7 +194,7 @@ ul.x-tab-strip-bottom {
     right: 0;
     text-align: center;
     width: 18px;
-    transition: opacity 0.25s;
+    transition: opacity .25s;
   }
 
   &-over {
@@ -285,7 +284,7 @@ ul.x-tab-strip-bottom {
           margin: 0; /* override default extjs theme value of 2px */
           overflow: hidden;
           padding: 10px 15px 10px 15px;
-          transition: background-color 0.25s, color 0.25s;
+          transition: background-color .25s, color .25s;
 
           &:hover {
             background: $white;
@@ -364,11 +363,11 @@ ul.x-tab-strip-bottom {
 
 .window-vtabs {
   .x-panel-mr {
-    padding-right: 0px;
+    padding-right: 0;
   }
 
   .vertical-tabs-panel {
     width: 100% !important;
-    margin: 0px;
+    margin: 0;
   }
 }
diff --git a/_build/templates/default/sass/_tree.scss b/_build/templates/default/sass/_tree.scss
index 8c6378ec8c5..56df0385784 100644
--- a/_build/templates/default/sass/_tree.scss
+++ b/_build/templates/default/sass/_tree.scss
@@ -330,7 +330,7 @@
 
     &:hover,
     &:focus {
-      color: $primary2 !important;
+      color: $green !important;
     }
   }
 }
@@ -344,12 +344,12 @@
     bottom: 0;
     line-height: 30px;
     opacity: 0;
-    transition: opacity 0.4s ease-in;
+    transition: opacity .4s ease-in;
 
     .x-btn {
       color: $darkGray;
       opacity: .4;
-      transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
+      transition: opacity .2s ease-in-out, color .2s ease-in-out;
 
       &:hover,
       &:focus {
@@ -495,8 +495,6 @@
   left: -1px;
 }
 
-
-
 /* drag and drop styles */
 .x-tree-node a,
 .x-dd-drag-ghost a,
@@ -839,7 +837,6 @@
   margin: 0;
 }
 
-
 .x-tree-arrows .x-tree-elbow-plus,
 .x-tree-arrows .x-tree-elbow-minus,
 .x-tree-arrows .x-tree-elbow-end-plus,
diff --git a/_build/templates/default/sass/_utility.scss b/_build/templates/default/sass/_utility.scss
index 4d8a672e98a..a5e8a5c0d38 100644
--- a/_build/templates/default/sass/_utility.scss
+++ b/_build/templates/default/sass/_utility.scss
@@ -61,7 +61,7 @@
 %pseudo-font-x-btn {
   @extend %pseudo-font;
   position: absolute;
-  top: 0px;
+  top: 0;
   left: 0;
   right: 0;
   bottom: 0;
@@ -158,7 +158,7 @@
     float: left;
 
     &:last-child {
-      margin-right: 0px;
+      margin-right: 0;
     }
   }
 }
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index 3a9dcdfa99a..59a3603f8a3 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -166,8 +166,6 @@
     /*overflow-y: scroll;*/
 
     .x-tab-panel-header {
-
-
       .x-tab-strip-wrap {
         padding-top: 3px; /* account for the 3px boxshadow for active tabs */
 
diff --git a/_build/templates/default/sass/_xtheme-modx.scss b/_build/templates/default/sass/_xtheme-modx.scss
index 6c88f848d41..84d266f5cd8 100644
--- a/_build/templates/default/sass/_xtheme-modx.scss
+++ b/_build/templates/default/sass/_xtheme-modx.scss
@@ -950,9 +950,6 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
   }
 }
 
-
-
-
 .x-grid-panel .x-panel-body {
   background-color: #F5F5F5;
   border-bottom: 1px solid #E4E4E4;
@@ -1540,7 +1537,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 .x-portal .x-panel-body {
   font-weight: normal;
   margin-bottom: 5px;
-  padding: 0px;
+  padding: 0;
   text-transform: none;
 }
 
@@ -1555,7 +1552,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 
 /* combo tpl stuff */
 .modx-combo-desc {
-  color: gray;
+  color: $gray;
   font-size: .9em;
   font-style: italic;
 }
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index e752336f637..771fe38abcf 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -744,7 +744,7 @@ a.x-grid-link:focus {
 }
 
 .x-portlet .x-panel-body {
-  background: white;
+  background: $white;
 }
 
 .x-portlet .x-panel-mc {
@@ -767,8 +767,8 @@ a.x-grid-link:focus {
 
 /* column tree */
 .x-column-tree .x-panel-header {
-  border-bottom-width: 0px;
-  padding: 3px 0px 0px 0px;
+  border-bottom-width: 0;
+  padding: 3px 0 0 0;
 }
 
 .x-column-tree .x-panel-header .x-panel-header-text {
@@ -903,12 +903,12 @@ a.x-grid-link:focus {
 
 .ux-row-action-item:hover {
   background: $alto;
-  background: -moz-linear-gradient(center bottom, $alto 0%, white 100%) repeat scroll 0 0 transparent;
-  background: -ms-linear-gradient(center bottom, $alto 0%, white 100%);
-  background: -o-linear-gradient(center bottom, $alto 0%, white 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, $alto));
-  background: -webkit-linear-gradient(center bottom, $alto 0%, white 100%);
-  background: linear-gradient(center bottom, $alto 0%, white 100%);
+  background: -moz-linear-gradient(center bottom, $alto 0%, $white 100%) repeat scroll 0 0 transparent;
+  background: -ms-linear-gradient(center bottom, $alto 0%, $white 100%);
+  background: -o-linear-gradient(center bottom, $alto 0%, $white 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $white), color-stop(100%, $alto));
+  background: -webkit-linear-gradient(center bottom, $alto 0%, $white 100%);
+  background: linear-gradient(center bottom, $alto 0%, $white 100%);
   border: 1px solid #9caf78;
   color: #636f4c !important;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$white, endColorstr=$alto, GradientType=0);
@@ -1367,9 +1367,9 @@ iframe[classname="x-hidden"] {
 }
 
 .ext-ie7 .ext-ux-uploaddialog-dialog .x-progress-text-back {
-  left: 0px;
+  left: 0;
   position: absolute;
-  right: 0px;
+  right: 0;
 }
 
 .ext-ie7 .ext-ux-uploaddialog-dialog .x-progress-text-back div {
@@ -1414,7 +1414,6 @@ iframe[classname="x-hidden"] {
 
 #modx-grid-policy-permissions,
 #modx-grid-template-permissions {
-
   .x-grid3-cell-inner,
   .x-grid3-hd-inner {
     white-space: normal;
@@ -1981,7 +1980,7 @@ iframe[classname="x-hidden"] {
     right: 0;
     text-align: center;
     width: 20px;
-    transition: opacity 0.25s;
+    transition: opacity .25s;
   }
 }
 
@@ -2077,7 +2076,7 @@ iframe[classname="x-hidden"] {
 }
 
 .package-readme {
-  padding: 8px 11px 0px;
+  padding: 8px 11px 0;
 }
 
 /* Template sidebar */

From 9e880667862875b7a16dc6a57b4fb5c93d148a53 Mon Sep 17 00:00:00 2001
From: Bochkarev Ivan <ivanx86@gmail.com>
Date: Sun, 17 Mar 2019 18:04:15 +0600
Subject: [PATCH 05/12] Adding padding between selectors

---
 _build/templates/default/sass/_browser.scss   | 20 +++++-----
 _build/templates/default/sass/_buttons.scss   | 38 +++++++++----------
 _build/templates/default/sass/_forms.scss     | 37 +++++++++---------
 _build/templates/default/sass/_navbar.scss    |  8 ++--
 _build/templates/default/sass/_tabs.scss      |  1 -
 _build/templates/default/sass/_toolbars.scss  |  2 -
 _build/templates/default/sass/_tree.scss      |  9 ++---
 _build/templates/default/sass/_windows.scss   |  5 +--
 .../templates/default/sass/_xtheme-modx.scss  |  3 +-
 _build/templates/default/sass/index.scss      | 29 +++++++-------
 _build/templates/default/sass/login.scss      | 21 +++-------
 11 files changed, 77 insertions(+), 96 deletions(-)

diff --git a/_build/templates/default/sass/_browser.scss b/_build/templates/default/sass/_browser.scss
index 40f72fcd8b1..8b80e0fbdf1 100644
--- a/_build/templates/default/sass/_browser.scss
+++ b/_build/templates/default/sass/_browser.scss
@@ -39,22 +39,22 @@
   user-select: none;
 }
 
-.modx-browser-thumb-wrap.x-view-over {
+.modx-browser-thumb-wrap .x-view-over {
   border: 1px solid $brandSelectedColor;
   padding: 4px;
 }
 
-.modx-browser-thumb-wrap.x-view-selected {
+.modx-browser-thumb-wrap .x-view-selected {
   background: $brandSelectedBg;
   border: 1px solid $brandSelectedColor;
   padding: 4px;
 }
 
-.modx-browser-thumb-wrap.x-view-selected .modx-browser-thumb {
+.modx-browser-thumb-wrap .x-view-selected .modx-browser-thumb {
   background: $white;
 }
 
-.modx-browser-thumb-wrap.x-view-selected span {
+.modx-browser-thumb-wrap .x-view-selected span {
   color: $brandSelectedColor;
 }
 
@@ -99,11 +99,11 @@
   padding: 0 5px 0 5px;
 }
 
-.modx-browser-list-item.x-view-over>span {
+.modx-browser-list-item .x-view-over>span {
   background: $brandHover;
 }
 
-.modx-browser-list-item.x-view-selected>span {
+.modx-browser-list-item .x-view-selected>span {
   background: $brandSelectedBg;
   border-bottom: 1px solid $brandSelectedColor;
   color: $brandSelectedColor;
@@ -119,20 +119,20 @@
   position: relative;
 }
 
-.modx-browser-list-item>span:before {
+.modx-browser-list-item > span:before {
   font-size: 14px;
   position: absolute;
   left: 2px;
 }
 
-.modx-browser-list-item>span span {
+.modx-browser-list-item > span span {
   display: inline-block;
   font: $fontSmall;
   padding-top: 2px;
 }
 
-.modx-browser-list-item>span span.file-size,
-.modx-browser-list-item>span span.image-size {
+.modx-browser-list-item > span span.file-size,
+.modx-browser-list-item > span span.image-size {
   float: right;
   width: 13%;
 }
diff --git a/_build/templates/default/sass/_buttons.scss b/_build/templates/default/sass/_buttons.scss
index e330c35ffab..b97dc351c33 100644
--- a/_build/templates/default/sass/_buttons.scss
+++ b/_build/templates/default/sass/_buttons.scss
@@ -563,13 +563,13 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text {
     .x-toolbar-right .x-btn {
 
       /* the resource trash button in the tree */
-      &>em>button {
+      & > em > button {
         /*color: #96A9BB;*/
         /* not sure why the trash needs a different color when active? */
         font-size: 20px; /* trash icon is a bit smaller than the others at 18px */
       }
 
-      &#emptifier.x-item-disabled {
+      &#emptifier .x-item-disabled {
         color: $treeColorDesaturated !important; /* !important prevents hover / active styles */
         opacity: .6;
         filter: alpha(opacity=60); /* for IE <= 8 */
@@ -583,97 +583,97 @@ html.ext-strict body #modx-container .x-small-editor .x-form-text {
 }
 
 /* resource tree toolbar icons */
-.tree-new-resource>em>button:before {
+.tree-new-resource > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file);
 }
 
-.tree-new-weblink>em>button:before {
+.tree-new-weblink > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-link);
 }
 
-.tree-new-symlink>em>button:before {
+.tree-new-symlink > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-copy);
   font-weight: 400;
 }
 
-.tree-new-static-resource>em>button:before {
+.tree-new-static-resource > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-alt);
   font-weight: 400;
 }
 
-.tree-trash>em>button:before {
+.tree-trash > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-trash-alt);
   font-weight: 400;
 }
 
 /* alignment overrides */
-#modx-leftbar .x-toolbar-ct .x-btn.tree-new-symlink>em>button {
+#modx-leftbar .x-toolbar-ct .x-btn .tree-new-symlink > em > button {
   top: 4px;
   left: 2px;
 }
 
-#modx-leftbar .x-toolbar-ct .x-btn.tree-new-weblink>em>button {
+#modx-leftbar .x-toolbar-ct .x-btn .tree-new-weblink > em > button {
   left: 2px;
 }
 
 /* media browser tree toolbar */
-.x-btn-icon.icon-folder button:before {
+.x-btn-icon .icon-folder button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-folder);
 }
 
-.x-btn-icon.icon-page_white button:before {
+.x-btn-icon .icon-page_white button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-file-alt);
   font-weight: 400;
 }
 
-.x-btn-icon.icon-file_upload button:before {
+.x-btn-icon .icon-file_upload button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-arrow-alt-circle-up);
   font-weight: 400;
 }
 
-.x-btn-icon.icon-file_manager button:before {
+.x-btn-icon .icon-file_manager button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-share-square);
   font-weight: 400;
 }
 
 /* element tree toolbar */
-.tree-new-template>em>button:before {
+.tree-new-template > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-columns);
 }
 
-.tree-new-tv>em>button:before {
+.tree-new-tv > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-list-alt);
   font-weight: 400;
 }
 
-.tree-new-chunk>em>button:before {
+.tree-new-chunk > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-th-large);
   font-weight: 900;
 }
 
-.tree-new-snippet>em>button:before {
+.tree-new-snippet > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-code);
 }
 
-.tree-new-plugin>em>button:before {
+.tree-new-plugin > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-cogs);
 }
 
-.tree-new-category>em>button:before {
+.tree-new-category > em > button:before {
   @extend %pseudo-font;
   content: fa-content($fa-var-folder);
 }
diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 4290a6beb6d..53918639244 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -40,7 +40,7 @@ textarea.x-form-field,
 .x-viewport .x-trigger-wrap-focus,
 .x-viewport input.x-form-focus,
 .x-viewport textarea.x-form-focus,
-.x-viewport .x-form-textarea.x-form-focus {
+.x-viewport .x-form-textarea .x-form-focus {
   border-color: $mediumGray;
 }
 
@@ -303,7 +303,7 @@ input::-moz-focus-inner {
   /* .x-form-element */
 
   /* prevent columns used inside form elements to have too much spacing, some custom TV types need this */
-  .x-column-inner>.x-column {
+  .x-column-inner > .x-column {
 
     ~.x-column {
       margin-left: 5px;
@@ -368,7 +368,6 @@ input::-moz-focus-inner {
   }
 
   .x-fieldset-bwrap {
-
     .x-fieldset-body {
       overflow-x: hidden !important; /* prevent unnecessary horizontal scrollbars */
       padding: 0 10px 10px 10px;
@@ -637,37 +636,37 @@ input::-moz-focus-inner {
       height: 13px;
     }
 
-    &:hover+.x-form-cb-label:before,
-    &:hover+.x-fieldset-header-text:before,
-    &:focus+.x-form-cb-label:before,
-    &:focus+.x-fieldset-header-text:before {
+    &:hover + .x-form-cb-label:before,
+    &:hover + .x-fieldset-header-text:before,
+    &:focus + .x-form-cb-label:before,
+    &:focus + .x-fieldset-header-text:before {
       color: $colorSplash;
     }
 
-    &:active+.x-form-cb-label:before,
-    &:active+.x-fieldset-header-text:before {
+    &:active + .x-form-cb-label:before,
+    &:active + .x-fieldset-header-text:before {
       color: darken($colorSplash, 6%);
     }
   }
 
-  .x-form-checkbox+.x-form-cb-label:before,
-  input[type="checkbox"]+.x-fieldset-header-text:before {
+  .x-form-checkbox + .x-form-cb-label:before,
+  input[type="checkbox"] + .x-fieldset-header-text:before {
     content: fa-content($fa-var-square);
     font-weight: 400;
   }
 
-  .x-form-checkbox:checked+.x-form-cb-label:before,
-  input[type="checkbox"]:checked+.x-fieldset-header-text:before {
+  .x-form-checkbox:checked + .x-form-cb-label:before,
+  input[type="checkbox"]:checked + .x-fieldset-header-text:before {
     content: fa-content($fa-var-check-square);
     font-weight: 400;
   }
 
-  .x-form-radio+.x-form-cb-label:before {
+  .x-form-radio + .x-form-cb-label:before {
     content: fa-content($fa-var-circle);
     font-weight: 400;
   }
 
-  .x-form-radio:checked+.x-form-cb-label:before {
+  .x-form-radio:checked + .x-form-cb-label:before {
     content: fa-content($fa-var-dot-circle);
     font-weight: 400;
   }
@@ -808,7 +807,7 @@ input::-moz-focus-inner {
   white-space: normal; /* make selected options wrap */
   width: auto !important; /* prevents the right border to be cut off */
 
-  .ext-strict .x-toolbar.x-small-editor & {
+  .ext-strict .x-toolbar .x-small-editor & {
     height: auto !important; /* override the extjs default theme style high specifiy + !important rule, wtf... */
   }
 
@@ -1314,7 +1313,7 @@ input::-moz-focus-inner {
     }
 
     /* the first text cell, "Page" */
-    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
+    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
       .xtb-text {
         display: none;
         position: absolute;
@@ -1325,7 +1324,7 @@ input::-moz-focus-inner {
     }
 
     /* the second text cell, "of X" */
-    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
+    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
       .xtb-text {
         display: inline-block;
         position: absolute;
@@ -1337,7 +1336,7 @@ input::-moz-focus-inner {
     }
 
     /* the last regular button >>, yes, I know it's ugly but tell that Microsoft and say thanks for IE8 =) */
-    .x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell+.x-toolbar-cell {
+    .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell + .x-toolbar-cell {
       .x-btn {
         margin-right: 0;
       }
diff --git a/_build/templates/default/sass/_navbar.scss b/_build/templates/default/sass/_navbar.scss
index 1f5f850f3a4..b24f6246d06 100644
--- a/_build/templates/default/sass/_navbar.scss
+++ b/_build/templates/default/sass/_navbar.scss
@@ -103,21 +103,21 @@
       }
     }
 
-    #limenu-site>a:before {
+    #limenu-site > a:before {
       content: fa-content($fa-var-file-alt);
       font-weight: 300 !important;
     }
 
-    #limenu-media>a:before {
+    #limenu-media > a:before {
       content: fa-content($fa-var-file-image);
       font-weight: 300 !important;
     }
 
-    #limenu-components>a:before {
+    #limenu-components > a:before {
       content: fa-content($fa-var-cube);
     }
 
-    #limenu-manage>a:before {
+    #limenu-manage > a:before {
       content: fa-content($fa-var-sliders-h);
     }
   }
diff --git a/_build/templates/default/sass/_tabs.scss b/_build/templates/default/sass/_tabs.scss
index 9e46a413d8d..a1bb880daf6 100644
--- a/_build/templates/default/sass/_tabs.scss
+++ b/_build/templates/default/sass/_tabs.scss
@@ -360,7 +360,6 @@ ul.x-tab-strip-bottom {
   }
 }
 
-
 .window-vtabs {
   .x-panel-mr {
     padding-right: 0;
diff --git a/_build/templates/default/sass/_toolbars.scss b/_build/templates/default/sass/_toolbars.scss
index 48c6942ff9b..8ba4d969b4b 100644
--- a/_build/templates/default/sass/_toolbars.scss
+++ b/_build/templates/default/sass/_toolbars.scss
@@ -210,8 +210,6 @@
   padding: 5px 0;
 }
 
-
-
 .x-toolbar td,
 .x-toolbar span,
 .x-toolbar input,
diff --git a/_build/templates/default/sass/_tree.scss b/_build/templates/default/sass/_tree.scss
index 56df0385784..dce5896c20b 100644
--- a/_build/templates/default/sass/_tree.scss
+++ b/_build/templates/default/sass/_tree.scss
@@ -77,8 +77,8 @@
   flex-wrap: wrap;
 }
 
-#modx-resource-tree-tbar .x-toolbar-left .x-btn.tree-new-resource,
-#modx-tree-element .x-toolbar-left .x-btn.tree-new-template {
+#modx-resource-tree-tbar .x-toolbar-left .x-btn .tree-new-resource,
+#modx-tree-element .x-toolbar-left .x-btn .tree-new-template {
   margin-left: 16px;
 }
 
@@ -403,7 +403,7 @@
 
   &.x-tree-node-expanded,
   &.x-tree-node-expanded span,
-  &.x-tree-node-expanded>.icon {
+  &.x-tree-node-expanded > .icon {
     color: $treePseudoRootColor; //background-color: $treePseudoRootBg;
   }
 
@@ -413,7 +413,7 @@
   }
 
   +.x-tree-node-ct,
-  +div>.x-tree-node-ct {
+  +div > .x-tree-node-ct {
     background: $treeBg; //padding: 5px 0;
     overflow-x: auto;
 
@@ -738,7 +738,6 @@
   content: fa-content($fa-var-file-code);
 }
 
-
 .icon-action {
   background-image: url($imgPath + 'restyle/icons/application_osx_terminal.png') !important;
   @include legacy-tree-icon;
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index 59a3603f8a3..246a72a3053 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -273,12 +273,10 @@
 
   .x-progress-inner {
     background-color: $colorSplashLight;
-    /*background-image: url($imgPath + 'modx-theme/qtip/bg.gif');*/
   }
 
   .x-progress-bar {
     background-color: $colorSplash;
-    /*background-image: url($imgPath + 'modx-theme/progress/progress-bg.gif');*/
     border: 0;
   }
 
@@ -387,13 +385,12 @@
   font: $fontSmall;
 }
 
-.ext-el-mask-msg.modx-lockmask div {
+.ext-el-mask-msg .modx-lockmask div {
   color: $red;
 }
 
 /* the loading indicator when refreshing a grid or component */
 .x-mask-loading div {
-  /*background-color: $lightestGray;*/
   background-image: url($imgPath + 'modx-theme/grid/loading.gif');
 }
 
diff --git a/_build/templates/default/sass/_xtheme-modx.scss b/_build/templates/default/sass/_xtheme-modx.scss
index 84d266f5cd8..73829914e3e 100644
--- a/_build/templates/default/sass/_xtheme-modx.scss
+++ b/_build/templates/default/sass/_xtheme-modx.scss
@@ -308,7 +308,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 }
 
 .x-grid3-row-last,
-.x-grid3-row-last.x-grid3-row-selected {
+.x-grid3-row-last .x-grid3-row-selected {
   border-bottom-color: transparent !important;
 }
 
@@ -871,7 +871,6 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 }
 
 .x-box-bl {
-  background-color: $gallery;
   background-color: rgba(230, 230, 230, 0.8);
   border-bottom: 1px solid #DEDEDE;
   border-left: 1px solid #DEDEDE;
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index 771fe38abcf..921c57d6a5c 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -189,8 +189,7 @@ textarea.x-form-field {
   width: calc(100% - 390px);
   right: 0;
   padding-left: 0.5rem;
-  left: 310px; /* give #modx-content an initial left value to prevent the panel from
-jumping around */
+  left: 310px; /* give #modx-content an initial left value to prevent the panel from jumping around */
 }
 
 .modx-form p {
@@ -545,8 +544,8 @@ jumping around */
     }
   }
 
-  #modx-resource-main-left.x-panel-collapsed &,
-  #modx-resource-main-left.x-panel-animated & {
+  #modx-resource-main-left .x-panel-collapsed &,
+  #modx-resource-main-left .x-panel-animated & {
     position: relative;
     padding-top: 15px !important;
     width: 100%;
@@ -600,7 +599,7 @@ a.x-grid-link:focus {
 @include grid-media($gtDesktop) {
 
   // New header
-  #modx-content>.x-panel-bwrap>.x-panel-body>.x-panel {
+  #modx-content > .x-panel-bwrap > .x-panel-body > .x-panel {
     margin: 0;
 
     .modx-page-header,
@@ -1256,7 +1255,7 @@ a.x-grid-link:focus {
 }
 
 // position the success message in the center of the screen
-.modx-status-msg.has-position-center-center {
+.modx-status-msg .has-position-center-center {
   bottom: auto;
   left: 0;
   margin-left: auto;
@@ -1267,7 +1266,7 @@ a.x-grid-link:focus {
 }
 
 // position the success message center top of the screen
-.modx-status-msg.has-position-center-top {
+.modx-status-msg .has-position-center-top {
   bottom: auto;
   left: 0;
   margin-left: auto;
@@ -1276,7 +1275,7 @@ a.x-grid-link:focus {
   top: 15px;
 }
 
-.modx-status-msg.has-position-right-top {
+.modx-status-msg .has-position-right-top {
   bottom: auto;
   left: auto;
   right: 15px;
@@ -1285,9 +1284,9 @@ a.x-grid-link:focus {
 
 /* status messages mobile view */
 .modx-status-msg,
-.modx-status-msg.has-position-center-center,
-.modx-status-msg.has-position-center-top,
-.modx-status-msg.has-position-right-top {
+.modx-status-msg .has-position-center-center,
+.modx-status-msg .has-position-center-top,
+.modx-status-msg .has-position-right-top {
   @include grid-media($mobile) {
     border-radius: 0;
     top: auto;
@@ -1629,7 +1628,7 @@ iframe[classname="x-hidden"] {
     overflow: visible !important;
   }
 
-  &>.x-tab-panel-bwrap>.x-tab-panel-body>.x-panel:not(#modx-resource-settings) {
+  &>.x-tab-panel-bwrap > .x-tab-panel-body > .x-panel:not(#modx-resource-settings) {
     box-shadow: $boxShadow;
 
     .panel-desc {
@@ -1796,7 +1795,7 @@ iframe[classname="x-hidden"] {
   outline: medium none;
 }
 
-#ux-lightbox-imageContainer>#ux-lightbox-hoverNav {
+#ux-lightbox-imageContainer > #ux-lightbox-hoverNav {
   left: 0;
 }
 
@@ -1897,7 +1896,7 @@ iframe[classname="x-hidden"] {
   padding: 10px 5px 35px;
 }
 
-.x-grid3-cell-inner.x-grid3-col-main h3 {
+.x-grid3-cell-inner .x-grid3-col-main h3 {
   color: #555555;
   font: $baseText;
   font-size: 20px;
@@ -1905,7 +1904,7 @@ iframe[classname="x-hidden"] {
   margin: 0 0 5px 0;
 }
 
-.x-grid3-cell-inner.x-grid3-col-main .not-installed {
+.x-grid3-cell-inner .x-grid3-col-main .not-installed {
   color: #999999;
 }
 
diff --git a/_build/templates/default/sass/login.scss b/_build/templates/default/sass/login.scss
index 975a809f168..ff22f999f34 100644
--- a/_build/templates/default/sass/login.scss
+++ b/_build/templates/default/sass/login.scss
@@ -191,7 +191,7 @@ input {
   outline-color: $green;
 }
 
-label>input {
+label > input {
   margin-top: 0.25rem;
 }
 
@@ -295,13 +295,9 @@ input[type="checkbox"] {
 }
 
 .l-footer {
-  display: -ms-flexbox;
   display: flex;
-  -ms-flex-direction: row;
   flex-direction: row;
-  -ms-flex-pack: justify;
   justify-content: flex-end;
-  -ms-flex-align: center;
   align-items: center;
   position: relative;
   margin-bottom: 1rem;
@@ -316,12 +312,7 @@ input[type="checkbox"] {
   background: transparent;
   border: none;
   border-radius: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   cursor: pointer;
   font-family: inherit;
@@ -351,10 +342,10 @@ input[type="checkbox"] {
   vertical-align: middle;
   position: relative;
   top: -2px;
-  transition: left 0.4s ease-in-out, right 0.4s ease-in-out;
+  transition: left .4s ease-in-out, right .4s ease-in-out;
   right: 0;
 
-  a:hover>& {
+  a:hover > & {
     right: -0.5rem;
   }
 
@@ -362,7 +353,7 @@ input[type="checkbox"] {
     transform: rotate(180deg);
     left: 0;
 
-    a:hover>& {
+    a:hover > & {
       left: -0.5rem;
       right: 0;
     }
@@ -376,13 +367,13 @@ input[type="checkbox"] {
 .can-toggle {
   max-height: 50rem;
   overflow: hidden;
-  transition: max-height 0.4s ease-in-out;
+  transition: max-height .4s ease-in-out;
 }
 
 .is-hidden {
   max-height: 0;
   visibility: hidden;
-  transition: max-height 0.4s ease-in-out, 0s visibility 0.7s;
+  transition: max-height .4s ease-in-out, 0s visibility .7s;
 }
 
 .is-error {

From 6607e89898badbbc1575a3493a16cd768163cd81 Mon Sep 17 00:00:00 2001
From: Dettroxx <roxxdett@gmail.com>
Date: Tue, 2 Apr 2019 21:13:40 +0300
Subject: [PATCH 06/12] Fixed issue #14452

---
 manager/assets/modext/core/modx.js      | 33 +++++++++++++++++++++++++
 manager/templates/default/css/index.css |  5 ++++
 2 files changed, 38 insertions(+)

diff --git a/manager/assets/modext/core/modx.js b/manager/assets/modext/core/modx.js
index c59af4c80ef..d91bfafbb7d 100644
--- a/manager/assets/modext/core/modx.js
+++ b/manager/assets/modext/core/modx.js
@@ -36,6 +36,7 @@ Ext.extend(MODx,Ext.Component,{
 
     ,startup: function() {
         this.initQuickTips();
+        this.initMarkRequiredFields();
         this.request = this.getURLParameters();
         this.Ajax = this.load({ xtype: 'modx-ajax' });
         Ext.override(Ext.form.Field,{
@@ -95,6 +96,38 @@ Ext.extend(MODx,Ext.Component,{
         });
     }
 
+    ,initMarkRequiredFields: function() {
+        var markdom = '<span class=\"field-required-mark\">*</span> ';
+            
+        var MarkRequiredFieldPlugin = function (config) { 
+            config = config || {};
+            Ext.apply(config, {
+                init: function(cmp) {
+                    if (cmp.allowBlank !== false) return;
+
+                    var applyTo = cmp.applyTo;
+                    if (!applyTo) {
+                        var label = cmp.fieldLabel;
+                        cmp.fieldLabel = markdom+label;
+                    } else if (applyTo && applyTo.match(/^tv[\d]*$/i)) { 
+                        var label = document.getElementById(applyTo+'-caption');
+                        var html = markdom+label.innerHTML;
+                        label.innerHTML = html;
+                    }
+                }
+            });
+            MarkRequiredFieldPlugin.superclass.constructor.call(this, config); 
+        }
+        Ext.extend(MarkRequiredFieldPlugin, Ext.BoxComponent); 
+        Ext.ComponentMgr.registerPlugin('markrequiredfields',MarkRequiredFieldPlugin);
+        
+        if (!Array.isArray(Ext.form.Field.prototype.plugins)) {
+            Ext.form.Field.prototype.plugins = [];
+        }
+        var plugins = Ext.form.Field.prototype.plugins;
+        Ext.form.Field.prototype.plugins = Ext.form.Field.prototype.plugins.concat(['markrequiredfields'], plugins);
+    }
+
     ,getURLParameters: function() {
         var arg = {};
         var href = window.location.search;
diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
index 840e555c60d..bd03c3a0502 100644
--- a/manager/templates/default/css/index.css
+++ b/manager/templates/default/css/index.css
@@ -23889,3 +23889,8 @@ iframe[classname="x-hidden"] {
 
 .x-datetime-inline-editor .x-datetime-wrap {
   margin-top: 0 !important; }
+
+/*mark required fields*/
+.field-required-mark {
+  color: red;
+}

From 1dfaaa8c0d4c0eb43d49b5481ea4a2f55aaf3d9d Mon Sep 17 00:00:00 2001
From: Dettroxx <roxxdett@gmail.com>
Date: Wed, 3 Apr 2019 01:13:45 +0300
Subject: [PATCH 07/12] removed too expressive css style for 'required' asterix

---
 manager/templates/default/css/index.css | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/manager/templates/default/css/index.css b/manager/templates/default/css/index.css
index bd03c3a0502..840e555c60d 100644
--- a/manager/templates/default/css/index.css
+++ b/manager/templates/default/css/index.css
@@ -23889,8 +23889,3 @@ iframe[classname="x-hidden"] {
 
 .x-datetime-inline-editor .x-datetime-wrap {
   margin-top: 0 !important; }
-
-/*mark required fields*/
-.field-required-mark {
-  color: red;
-}

From a0196ea93a127a5d2ad29df8aff3770089df65ee Mon Sep 17 00:00:00 2001
From: Ruslan Aleev <aleev.insmile@gmail.com>
Date: Thu, 4 Apr 2019 21:06:50 +0400
Subject: [PATCH 08/12] Added an icon in the menu tree

---
 manager/assets/modext/widgets/system/modx.tree.menu.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/manager/assets/modext/widgets/system/modx.tree.menu.js b/manager/assets/modext/widgets/system/modx.tree.menu.js
index 11cf248b2a2..844d02bf96d 100644
--- a/manager/assets/modext/widgets/system/modx.tree.menu.js
+++ b/manager/assets/modext/widgets/system/modx.tree.menu.js
@@ -9,8 +9,9 @@
 MODx.tree.Menu = function(config) {
     config = config || {};
     Ext.applyIf(config,{
-        root_id: 'n_'
-        ,root_name: _('menu_top')
+        rootIconCls: 'icon-navicon'
+        ,rootId: 'n_'
+        ,rootName: _('menu_top')
         ,rootVisible: true
         ,expandFirst: true
         ,enableDrag: true

From be9eeeda4351652fa2a5072db9bef6638007fe0d Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Tue, 14 May 2019 13:24:00 +0600
Subject: [PATCH 09/12] Corrections after review

---
 _build/templates/default/sass/_dashboard.scss | 457 +++++++++---------
 _build/templates/default/sass/_forms.scss     |   2 +-
 _build/templates/default/sass/_tree.scss      |   4 +-
 _build/templates/default/sass/_windows.scss   |   2 +-
 .../templates/default/sass/_xtheme-modx.scss  |   4 +-
 _build/templates/default/sass/index.scss      |   2 +-
 6 files changed, 241 insertions(+), 230 deletions(-)

diff --git a/_build/templates/default/sass/_dashboard.scss b/_build/templates/default/sass/_dashboard.scss
index 55c4331de8f..c96fa168d3a 100644
--- a/_build/templates/default/sass/_dashboard.scss
+++ b/_build/templates/default/sass/_dashboard.scss
@@ -212,6 +212,7 @@
     width: 100%;
     border: 1px solid #ddd;
     border-radius: 5px;
+
     th {
       font-weight: bold;
       padding: 10px;
@@ -234,280 +235,290 @@
         text-decoration: $delTextDeco;
       }
     }
+
     tr:last-child {
       td {
         border: none;
-    tr:last-child td {
-      border: none;
-      &:first-child {
-        border-bottom-left-radius: 10px;
-      }
-      &:last-child {
-        border-bottom-right-radius: 10px;
-      }
-    }
-  }
 
-  .widget-footer {
-    padding-top: 10px;
-    border-top: 1px solid $lighterGray;
+        tr:last-child td {
+          border: none;
 
-    a {
-      display: block;
-      padding-bottom: 5px;
-      padding-top: 5px;
-      color: $blue;
-      font-size: 14px;
-      font-weight: bold;
-      text-decoration: none;
-      text-align: center;
-      text-transform: uppercase;
-    }
-  }
+          &:first-child {
+            border-bottom-left-radius: 10px;
+          }
 
-  .widget-actions {
-    a {
-      display: inline-block;
-      padding: 3px 5px;
-      border: 1px solid $lightGray;
-      border-radius: $borderRadius;
-      margin-left: 5px;
-      text-decoration: none;
+          &:last-child {
+            border-bottom-right-radius: 10px;
+          }
+        }
+      }
 
-      &:first-child {
-        margin-left: 0;
+      .widget-footer {
+        padding-top: 10px;
+        border-top: 1px solid $lighterGray;
+
+        a {
+          display: block;
+          padding-bottom: 5px;
+          padding-top: 5px;
+          color: $blue;
+          font-size: 14px;
+          font-weight: bold;
+          text-decoration: none;
+          text-align: center;
+          text-transform: uppercase;
+        }
       }
 
-      &:hover {
-        background: $lighterGray;
+      .widget-actions {
+        a {
+          display: inline-block;
+          padding: 3px 5px;
+          border: 1px solid $lightGray;
+          border-radius: $borderRadius;
+          margin-left: 5px;
+          text-decoration: none;
+
+          &:first-child {
+            margin-left: 0;
+          }
+
+          &:hover {
+            background: $lighterGray;
+          }
+
+          .icon {
+            width: 12px;
+            height: 12px;
+            text-align: center;
+            display: inline-block;
+          }
+        }
       }
 
-      .icon {
-        width: 12px;
-        height: 12px;
+      .no-results {
+        padding: 10px;
         text-align: center;
-        display: inline-block;
+        color: $mediumGray;
       }
-    }
-  }
 
-  .no-results {
-    padding: 10px;
-    text-align: center;
-    color: $mediumGray;
-  }
+      .user-with-avatar {
+        display: flex;
+        align-items: center;
 
-  .user-with-avatar {
-    display: flex;
-    align-items: center;
+        .user-avatar {
+          margin-right: 5px;
 
-    .user-avatar {
-      margin-right: 5px;
+          img {
+            border-radius: 30px;
+          }
+        }
 
-      img {
-        border-radius: 30px;
+        .user-name {
+          color: $colorSplash;
+          font-weight: 500;
+        }
+
+        .user-group {
+          color: $mediumGray;
+        }
       }
-    }
 
-    .user-name {
-      color: $colorSplash;
-      font-weight: 500;
-    }
+      .resource {
+        .title {
+          color: $colorSplash;
+          font-weight: 500;
+        }
+      }
 
-    .user-group {
-      color: $mediumGray;
-    }
-  }
-  .resource{
-    .title{
-      color: $colorSplash;
-      font-weight: 500;
-    }
-  }
-  .occurred {
-    &-date{
-      color: $colorSplash;
-      font-weight: 500;
-    }
-    &-time {
-      color: $mediumGray;
+      .occurred {
+        &-date {
+          color: $colorSplash;
+          font-weight: 500;
+        }
+
+        &-time {
+          color: $mediumGray;
+        }
+      }
     }
-  }
-}
 
-#modx-news-feed-container {
-  img {
-    max-width: 100%;
-  }
-}
+    #modx-news-feed-container {
+      img {
+        max-width: 100%;
+      }
+    }
 
-#modx-resource-access-permissions,
-#modx-panel-users,
-#modx-panel-content-type,
-#modx-panel-resource-groups,
-#modx-panel-import-resources,
-#modx-panel-import-html,
-#modx-panel-property-sets,
-#modx-panel-namespaces,
-#modx-panel-actions,
-#modx-panel-contexts {
-  .x-panel-body {
-    padding-top: 15px;
-  }
-}
+    #modx-resource-access-permissions,
+    #modx-panel-users,
+    #modx-panel-content-type,
+    #modx-panel-resource-groups,
+    #modx-panel-import-resources,
+    #modx-panel-import-html,
+    #modx-panel-property-sets,
+    #modx-panel-namespaces,
+    #modx-panel-actions,
+    #modx-panel-contexts {
+      .x-panel-body {
+        padding-top: 15px;
+      }
+    }
 
-.dashboard-buttons {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  width: calc(100% + 1rem);
-  margin: -1rem 0 0 -1rem;
+    .dashboard-buttons {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      width: calc(100% + 1rem);
+      margin: -1rem 0 0 -1rem;
+
+      .dashboard-button {
+        display: flex;
+        align-items: center;
+        background-color: $white;
+        border-radius: $borderRadius;
+        box-shadow: $boxShadow;
+        margin: 1rem 0 0 1rem;
+        padding: 20px;
+        text-decoration: none;
+        color: $darkestGray;
+        flex: 1;
+
+        &:hover {
+          color: $black;
+
+          .icon {
+            opacity: .7;
+          }
+        }
 
-  .dashboard-button {
-    display: flex;
-    align-items: center;
-    background-color: $white;
-    border-radius: $borderRadius;
-    box-shadow: $boxShadow;
-    margin: 1rem 0 0 1rem;
-    padding: 20px;
-    text-decoration: none;
-    color: $darkestGray;
-    flex: 1;
+        &-icon {
+          border-radius: 20px;
+          border: 1px solid $green;
+          background: rgba(108, 178, 74, .2);
+          padding: 10px;
+          text-align: center;
+
+          .icon {
+            font-weight: bold;
+            display: block;
+            color: $green;
+            font-size: 16px;
+            width: 16px;
+            height: 16px;
+            text-align: center;
+          }
+        }
 
-    &:hover {
-      color: $black;
+        &-wrapper {
+          margin-left: 10px;
+        }
 
-      .icon {
-        opacity: .7;
+        &-title {
+          font-weight: bold;
+        }
       }
     }
 
-    &-icon {
-      border-radius: 20px;
-      border: 1px solid $green;
-      background: rgba(108, 178, 74, .2);
-      padding: 10px;
-      text-align: center;
-
-      .icon {
-        font-weight: bold;
-        display: block;
-        color: $green;
-        font-size: 16px;
-        width: 16px;
-        height: 16px;
-        text-align: center;
-      }
+    ::-webkit-scrollbar,
+    ::-webkit-scrollbar-thumb {
+      width: 1rem;
+      height: 1rem;
+      border: .25rem solid transparent;
+      border-radius: .5rem;
+      background-color: transparent;
     }
 
-    &-wrapper {
-      margin-left: 10px;
+    ::-webkit-scrollbar-thumb {
+      box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .1);
     }
 
-    &-title {
-      font-weight: bold;
+    ::-webkit-scrollbar-thumb:hover {
+      box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .2);
     }
-  }
-}
-
-::-webkit-scrollbar,
-::-webkit-scrollbar-thumb {
-  width: 1rem;
-  height: 1rem;
-  border: .25rem solid transparent;
-  border-radius: .5rem;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .1);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .2);
-}
-
-::-webkit-resizer,
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
 
-.updates-widget {
-  .updates-title {
-    font-weight: 500;
-    color: $colorSplash;
-  }
-  .updates-updateable {
-    display: inline-block;
-    background: $blue;
-    color: $white;
-    border-radius: 20px;
-    padding: 2px 8px;
-    font-weight: bold;
-  }
+    ::-webkit-resizer,
+    ::-webkit-scrollbar-corner {
+      background-color: transparent;
+    }
 
-  .updates-ok,
-  .updates-available {
-    padding: 3px 8px;
-    color: $white;
-    border-radius: $borderRadius;
-    text-transform: uppercase;
-    font-size: 10px;
-  }
+    .updates-widget {
+      .updates-title {
+        font-weight: 500;
+        color: $colorSplash;
+      }
 
-  .updates-ok {
-    background: $green;
-  }
+      .updates-updateable {
+        display: inline-block;
+        background: $blue;
+        color: $white;
+        border-radius: 20px;
+        padding: 2px 8px;
+        font-weight: bold;
+      }
 
-  .updates-available {
-    background: $red;
-  }
-}
+      .updates-ok,
+      .updates-available {
+        padding: 3px 8px;
+        color: $white;
+        border-radius: $borderRadius;
+        text-transform: uppercase;
+        font-size: 10px;
+      }
 
-#modx-panel-system-info {
-  .x-form-label-left .x-form-item {
-    padding: 0;
-  }
-}
+      .updates-ok {
+        background: $green;
+      }
 
-@media screen and (max-width: 1023px) {
-  .dashboard-buttons {
-    .dashboard-button {
-      flex-wrap: wrap;
-      flex-direction: column;
-      text-align: center;
-      align-items: center;
+      .updates-available {
+        background: $red;
+      }
+    }
 
-      &-wrapper {
-        margin-left: 0;
-        margin-top: 5px;
+    #modx-panel-system-info {
+      .x-form-label-left .x-form-item {
+        padding: 0;
       }
     }
-  }
-}
 
-@media screen and (max-width: 640px) {
-  .dashboard {
-    .dashboard-block {
+    @media screen and (max-width: 1023px) {
+      .dashboard-buttons {
+        .dashboard-button {
+          flex-wrap: wrap;
+          flex-direction: column;
+          text-align: center;
+          align-items: center;
 
-      &.quarter,
-      &.one-third,
-      &.half,
-      &.two-thirds {
-        width: calc(100% - 1rem);
+          &-wrapper {
+            margin-left: 0;
+            margin-top: 5px;
+          }
+        }
       }
     }
-  }
 
-  .dashboard-buttons {
-    flex-wrap: wrap;
+    @media screen and (max-width: 640px) {
+      .dashboard {
+        .dashboard-block {
+
+          &.quarter,
+          &.one-third,
+          &.half,
+          &.two-thirds {
+            width: calc(100% - 1rem);
+          }
+        }
+      }
 
-    .dashboard-button {
-      padding: 10px;
+      .dashboard-buttons {
+        flex-wrap: wrap;
+
+        .dashboard-button {
+          padding: 10px;
 
-      &-wrapper {
-        display: none;
+          &-wrapper {
+            display: none;
+          }
+        }
       }
     }
   }
diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 2761c6b0b34..208ecdadf00 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -1177,7 +1177,7 @@ input::-moz-focus-inner {
 }
 
 .x-form-empty-field {
-  color: $gray;
+  color: $lighterGray;
 }
 
 .x-grid3 {
diff --git a/_build/templates/default/sass/_tree.scss b/_build/templates/default/sass/_tree.scss
index d824f65c7e1..096f78a8be4 100644
--- a/_build/templates/default/sass/_tree.scss
+++ b/_build/templates/default/sass/_tree.scss
@@ -446,7 +446,7 @@
 }
 
 .x-tree-node-loading a span {
-  color: $tundora444;
+  color: $tundora;
   font-style: italic;
 }
 
@@ -815,7 +815,7 @@
 }
 
 .x-tree-node-loading a span {
-  color: $tundora444;
+  color: $tundora;
   font-style: italic;
 }
 
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index 579a10ebcf7..9c47be2b3da 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -248,7 +248,7 @@
     }
 
     .debug {
-      color: $gray;
+      color: $lighterGray;
     }
 
     .success {
diff --git a/_build/templates/default/sass/_xtheme-modx.scss b/_build/templates/default/sass/_xtheme-modx.scss
index cdf75295de8..175c01fe054 100644
--- a/_build/templates/default/sass/_xtheme-modx.scss
+++ b/_build/templates/default/sass/_xtheme-modx.scss
@@ -620,7 +620,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 }
 
 .x-grid-empty {
-  color: $gray;
+  color: $lighterGray;
   font: $fontSmall;
   text-align: center;
 }
@@ -1551,7 +1551,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 
 /* combo tpl stuff */
 .modx-combo-desc {
-  color: $gray;
+  color: $lighterGray;
   font-size: .9em;
   font-style: italic;
 }
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index 68262e45f2b..a5e3a14fc0c 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -1909,7 +1909,7 @@ iframe[classname="x-hidden"] {
 }
 
 .package-installed {
-  color: $gray;
+  color: $lighterGray;
   opacity: .5;
   filter: alpha(opacity=50); /* for IE <= 8 */
 }

From f3bc19313f2ef20762dca93e25a32427657e1397 Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Tue, 14 May 2019 13:36:58 +0600
Subject: [PATCH 10/12] Corrections after review

---
 .../default/sass/_colors-and-vars.scss        |   4 +-
 _build/templates/default/sass/_dashboard.scss | 290 +++++++++---------
 2 files changed, 147 insertions(+), 147 deletions(-)

diff --git a/_build/templates/default/sass/_colors-and-vars.scss b/_build/templates/default/sass/_colors-and-vars.scss
index 53288ae7a95..1b19740b42d 100644
--- a/_build/templates/default/sass/_colors-and-vars.scss
+++ b/_build/templates/default/sass/_colors-and-vars.scss
@@ -21,7 +21,7 @@ $white: #FFFFFF;
 $alabastersolid: #FAFAFA;
 $tundora: #444444;
 $black: darken($colorSplash, 42.5%); /* generate the black from the $colorSplash */
-$darkGray: #000;
+$darkBlack: #000;
 $lighterRed: #FFEEEE;
 $green: #6CB24A;
 $greener: darken($green, 12%);
@@ -228,4 +228,4 @@ $gtDesktop: (media: 'min-width 961px',  columns: 12);
 $gtCinema:  (media: 'min-width 1401px', columns: 12);
 
 /* Path for background-images */
-$imgPath: '../images/';
\ No newline at end of file
+$imgPath: '../images/';
diff --git a/_build/templates/default/sass/_dashboard.scss b/_build/templates/default/sass/_dashboard.scss
index c96fa168d3a..70b5a96ac90 100644
--- a/_build/templates/default/sass/_dashboard.scss
+++ b/_build/templates/default/sass/_dashboard.scss
@@ -342,183 +342,183 @@
         }
       }
     }
+  }
+}
 
-    #modx-news-feed-container {
-      img {
-        max-width: 100%;
-      }
-    }
-
-    #modx-resource-access-permissions,
-    #modx-panel-users,
-    #modx-panel-content-type,
-    #modx-panel-resource-groups,
-    #modx-panel-import-resources,
-    #modx-panel-import-html,
-    #modx-panel-property-sets,
-    #modx-panel-namespaces,
-    #modx-panel-actions,
-    #modx-panel-contexts {
-      .x-panel-body {
-        padding-top: 15px;
-      }
-    }
-
-    .dashboard-buttons {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
-      width: calc(100% + 1rem);
-      margin: -1rem 0 0 -1rem;
+#modx-news-feed-container {
+  img {
+    max-width: 100%;
+  }
+}
 
-      .dashboard-button {
-        display: flex;
-        align-items: center;
-        background-color: $white;
-        border-radius: $borderRadius;
-        box-shadow: $boxShadow;
-        margin: 1rem 0 0 1rem;
-        padding: 20px;
-        text-decoration: none;
-        color: $darkestGray;
-        flex: 1;
+#modx-resource-access-permissions,
+#modx-panel-users,
+#modx-panel-content-type,
+#modx-panel-resource-groups,
+#modx-panel-import-resources,
+#modx-panel-import-html,
+#modx-panel-property-sets,
+#modx-panel-namespaces,
+#modx-panel-actions,
+#modx-panel-contexts {
+  .x-panel-body {
+    padding-top: 15px;
+  }
+}
 
-        &:hover {
-          color: $black;
+.dashboard-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: calc(100% + 1rem);
+  margin: -1rem 0 0 -1rem;
 
-          .icon {
-            opacity: .7;
-          }
-        }
+  .dashboard-button {
+    display: flex;
+    align-items: center;
+    background-color: $white;
+    border-radius: $borderRadius;
+    box-shadow: $boxShadow;
+    margin: 1rem 0 0 1rem;
+    padding: 20px;
+    text-decoration: none;
+    color: $darkestGray;
+    flex: 1;
 
-        &-icon {
-          border-radius: 20px;
-          border: 1px solid $green;
-          background: rgba(108, 178, 74, .2);
-          padding: 10px;
-          text-align: center;
+    &:hover {
+      color: $black;
 
-          .icon {
-            font-weight: bold;
-            display: block;
-            color: $green;
-            font-size: 16px;
-            width: 16px;
-            height: 16px;
-            text-align: center;
-          }
-        }
+      .icon {
+        opacity: .7;
+      }
+    }
 
-        &-wrapper {
-          margin-left: 10px;
-        }
+    &-icon {
+      border-radius: 20px;
+      border: 1px solid $green;
+      background: rgba(108, 178, 74, .2);
+      padding: 10px;
+      text-align: center;
 
-        &-title {
-          font-weight: bold;
-        }
+      .icon {
+        font-weight: bold;
+        display: block;
+        color: $green;
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        text-align: center;
       }
     }
 
-    ::-webkit-scrollbar,
-    ::-webkit-scrollbar-thumb {
-      width: 1rem;
-      height: 1rem;
-      border: .25rem solid transparent;
-      border-radius: .5rem;
-      background-color: transparent;
+    &-wrapper {
+      margin-left: 10px;
     }
 
-    ::-webkit-scrollbar-thumb {
-      box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .1);
+    &-title {
+      font-weight: bold;
     }
+  }
+}
 
-    ::-webkit-scrollbar-thumb:hover {
-      box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .2);
-    }
+::-webkit-scrollbar,
+::-webkit-scrollbar-thumb {
+  width: 1rem;
+  height: 1rem;
+  border: .25rem solid transparent;
+  border-radius: .5rem;
+  background-color: transparent;
+}
 
-    ::-webkit-resizer,
-    ::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .1);
+}
 
-    .updates-widget {
-      .updates-title {
-        font-weight: 500;
-        color: $colorSplash;
-      }
+::-webkit-scrollbar-thumb:hover {
+  box-shadow: inset 0 0 0 1rem rgba(85, 108, 136, .2);
+}
 
-      .updates-updateable {
-        display: inline-block;
-        background: $blue;
-        color: $white;
-        border-radius: 20px;
-        padding: 2px 8px;
-        font-weight: bold;
-      }
+::-webkit-resizer,
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
 
-      .updates-ok,
-      .updates-available {
-        padding: 3px 8px;
-        color: $white;
-        border-radius: $borderRadius;
-        text-transform: uppercase;
-        font-size: 10px;
-      }
+.updates-widget {
+  .updates-title {
+    font-weight: 500;
+    color: $colorSplash;
+  }
 
-      .updates-ok {
-        background: $green;
-      }
+  .updates-updateable {
+    display: inline-block;
+    background: $blue;
+    color: $white;
+    border-radius: 20px;
+    padding: 2px 8px;
+    font-weight: bold;
+  }
 
-      .updates-available {
-        background: $red;
-      }
-    }
+  .updates-ok,
+  .updates-available {
+    padding: 3px 8px;
+    color: $white;
+    border-radius: $borderRadius;
+    text-transform: uppercase;
+    font-size: 10px;
+  }
 
-    #modx-panel-system-info {
-      .x-form-label-left .x-form-item {
-        padding: 0;
-      }
-    }
+  .updates-ok {
+    background: $green;
+  }
 
-    @media screen and (max-width: 1023px) {
-      .dashboard-buttons {
-        .dashboard-button {
-          flex-wrap: wrap;
-          flex-direction: column;
-          text-align: center;
-          align-items: center;
+  .updates-available {
+    background: $red;
+  }
+}
 
-          &-wrapper {
-            margin-left: 0;
-            margin-top: 5px;
-          }
-        }
+#modx-panel-system-info {
+  .x-form-label-left .x-form-item {
+    padding: 0;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  .dashboard-buttons {
+    .dashboard-button {
+      flex-wrap: wrap;
+      flex-direction: column;
+      text-align: center;
+      align-items: center;
+
+      &-wrapper {
+        margin-left: 0;
+        margin-top: 5px;
       }
     }
+  }
+}
 
-    @media screen and (max-width: 640px) {
-      .dashboard {
-        .dashboard-block {
+@media screen and (max-width: 640px) {
+  .dashboard {
+    .dashboard-block {
 
-          &.quarter,
-          &.one-third,
-          &.half,
-          &.two-thirds {
-            width: calc(100% - 1rem);
-          }
-        }
+      &.quarter,
+      &.one-third,
+      &.half,
+      &.two-thirds {
+        width: calc(100% - 1rem);
       }
+    }
+  }
 
-      .dashboard-buttons {
-        flex-wrap: wrap;
+  .dashboard-buttons {
+    flex-wrap: wrap;
 
-        .dashboard-button {
-          padding: 10px;
+    .dashboard-button {
+      padding: 10px;
 
-          &-wrapper {
-            display: none;
-          }
-        }
+      &-wrapper {
+        display: none;
       }
     }
   }

From 0e912b1c3163acf15545cd23fb9c9865ea930268 Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Tue, 14 May 2019 13:42:28 +0600
Subject: [PATCH 11/12] Change color $gray -> $darkGray

---
 _build/templates/default/sass/_forms.scss       | 2 +-
 _build/templates/default/sass/_windows.scss     | 2 +-
 _build/templates/default/sass/_xtheme-modx.scss | 4 ++--
 _build/templates/default/sass/index.scss        | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 208ecdadf00..cc56ced3aa9 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -1177,7 +1177,7 @@ input::-moz-focus-inner {
 }
 
 .x-form-empty-field {
-  color: $lighterGray;
+  color: $darkGray;
 }
 
 .x-grid3 {
diff --git a/_build/templates/default/sass/_windows.scss b/_build/templates/default/sass/_windows.scss
index 9c47be2b3da..0213efd791b 100644
--- a/_build/templates/default/sass/_windows.scss
+++ b/_build/templates/default/sass/_windows.scss
@@ -248,7 +248,7 @@
     }
 
     .debug {
-      color: $lighterGray;
+      color: $darkGray;
     }
 
     .success {
diff --git a/_build/templates/default/sass/_xtheme-modx.scss b/_build/templates/default/sass/_xtheme-modx.scss
index 175c01fe054..5a2313e5191 100644
--- a/_build/templates/default/sass/_xtheme-modx.scss
+++ b/_build/templates/default/sass/_xtheme-modx.scss
@@ -620,7 +620,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 }
 
 .x-grid-empty {
-  color: $lighterGray;
+  color: $darkGray;
   font: $fontSmall;
   text-align: center;
 }
@@ -1551,7 +1551,7 @@ td.x-grid3-hd-menu-open .x-grid3-hd-inner {
 
 /* combo tpl stuff */
 .modx-combo-desc {
-  color: $lighterGray;
+  color: $darkGray;
   font-size: .9em;
   font-style: italic;
 }
diff --git a/_build/templates/default/sass/index.scss b/_build/templates/default/sass/index.scss
index a5e3a14fc0c..20c61934083 100644
--- a/_build/templates/default/sass/index.scss
+++ b/_build/templates/default/sass/index.scss
@@ -1909,7 +1909,7 @@ iframe[classname="x-hidden"] {
 }
 
 .package-installed {
-  color: $lighterGray;
+  color: $darkGray;
   opacity: .5;
   filter: alpha(opacity=50); /* for IE <= 8 */
 }

From 71ac60ac48027775d7a0ebbca225db243ba5e837 Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Tue, 14 May 2019 13:56:26 +0600
Subject: [PATCH 12/12] Final fix

---
 _build/templates/default/sass/_dashboard.scss | 144 +++++++++---------
 1 file changed, 72 insertions(+), 72 deletions(-)

diff --git a/_build/templates/default/sass/_dashboard.scss b/_build/templates/default/sass/_dashboard.scss
index 70b5a96ac90..abe5a18b5f6 100644
--- a/_build/templates/default/sass/_dashboard.scss
+++ b/_build/templates/default/sass/_dashboard.scss
@@ -252,95 +252,95 @@
           }
         }
       }
+    }
+  }
 
-      .widget-footer {
-        padding-top: 10px;
-        border-top: 1px solid $lighterGray;
-
-        a {
-          display: block;
-          padding-bottom: 5px;
-          padding-top: 5px;
-          color: $blue;
-          font-size: 14px;
-          font-weight: bold;
-          text-decoration: none;
-          text-align: center;
-          text-transform: uppercase;
-        }
-      }
+  .widget-footer {
+    padding-top: 10px;
+    border-top: 1px solid $lighterGray;
 
-      .widget-actions {
-        a {
-          display: inline-block;
-          padding: 3px 5px;
-          border: 1px solid $lightGray;
-          border-radius: $borderRadius;
-          margin-left: 5px;
-          text-decoration: none;
+    a {
+      display: block;
+      padding-bottom: 5px;
+      padding-top: 5px;
+      color: $blue;
+      font-size: 14px;
+      font-weight: bold;
+      text-decoration: none;
+      text-align: center;
+      text-transform: uppercase;
+    }
+  }
 
-          &:first-child {
-            margin-left: 0;
-          }
+  .widget-actions {
+    a {
+      display: inline-block;
+      padding: 3px 5px;
+      border: 1px solid $lightGray;
+      border-radius: $borderRadius;
+      margin-left: 5px;
+      text-decoration: none;
 
-          &:hover {
-            background: $lighterGray;
-          }
+      &:first-child {
+        margin-left: 0;
+      }
 
-          .icon {
-            width: 12px;
-            height: 12px;
-            text-align: center;
-            display: inline-block;
-          }
-        }
+      &:hover {
+        background: $lighterGray;
       }
 
-      .no-results {
-        padding: 10px;
+      .icon {
+        width: 12px;
+        height: 12px;
         text-align: center;
-        color: $mediumGray;
+        display: inline-block;
       }
+    }
+  }
 
-      .user-with-avatar {
-        display: flex;
-        align-items: center;
-
-        .user-avatar {
-          margin-right: 5px;
+  .no-results {
+    padding: 10px;
+    text-align: center;
+    color: $mediumGray;
+  }
 
-          img {
-            border-radius: 30px;
-          }
-        }
+  .user-with-avatar {
+    display: flex;
+    align-items: center;
 
-        .user-name {
-          color: $colorSplash;
-          font-weight: 500;
-        }
+    .user-avatar {
+      margin-right: 5px;
 
-        .user-group {
-          color: $mediumGray;
-        }
+      img {
+        border-radius: 30px;
       }
+    }
 
-      .resource {
-        .title {
-          color: $colorSplash;
-          font-weight: 500;
-        }
-      }
+    .user-name {
+      color: $colorSplash;
+      font-weight: 500;
+    }
 
-      .occurred {
-        &-date {
-          color: $colorSplash;
-          font-weight: 500;
-        }
+    .user-group {
+      color: $mediumGray;
+    }
+  }
 
-        &-time {
-          color: $mediumGray;
-        }
-      }
+  .resource {
+    .title {
+      color: $colorSplash;
+      font-weight: 500;
+    }
+  }
+
+  .occurred {
+    &-date {
+      color: $colorSplash;
+      font-weight: 500;
+    }
+
+    &-time {
+      color: $mediumGray;
     }
   }
 }