From 648b19a4c26cb7d4a24594955e401da5935c7167 Mon Sep 17 00:00:00 2001
From: Jim Graham <info@sparkmediagroup.com>
Date: Mon, 31 Jan 2022 00:56:29 -0500
Subject: [PATCH] Update _forms.scss

---
 _build/templates/default/sass/_forms.scss | 235 ++++++++++++----------
 1 file changed, 128 insertions(+), 107 deletions(-)

diff --git a/_build/templates/default/sass/_forms.scss b/_build/templates/default/sass/_forms.scss
index 0930f095964..b4402900284 100644
--- a/_build/templates/default/sass/_forms.scss
+++ b/_build/templates/default/sass/_forms.scss
@@ -35,7 +35,7 @@ textarea.x-form-field,
   border-radius: $borderRadius;
   border: 1px solid $borderColor;
   position: relative;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
 }
 
 .x-viewport .x-trigger-wrap-focus,
@@ -101,7 +101,7 @@ input::-moz-focus-inner {
       padding: 0 0 0 3px;
       top: 0;
       right: 0;
-      transition: all .25s;
+      transition: all 0.25s;
       width: 16px;
       height: 16px;
 
@@ -109,7 +109,9 @@ input::-moz-focus-inner {
         @extend %pseudo-font;
         box-sizing: border-box;
         color: scale-color($coreFieldLabelColor, $lightness: 50%);
-        content: fa-content($fa-var-undo-alt); /* better match IMO for the action being taken */
+        content: fa-content(
+          $fa-var-undo-alt
+        ); /* better match IMO for the action being taken */
         font-size: 14px;
         position: relative;
         bottom: 2px;
@@ -120,12 +122,12 @@ input::-moz-focus-inner {
         height: 16px;
       }
       &.modx-field-reset {
-          &::before {
-            content: fa-content($fa-var-undo-alt);
-          }
-          &:hover::before {
-            color: $green;
-          }
+        &::before {
+          content: fa-content($fa-var-undo-alt);
+        }
+        &:hover::before {
+          color: $green;
+        }
       }
       &.modx-field-clear {
         &::before {
@@ -199,19 +201,21 @@ input::-moz-focus-inner {
         border-style: solid;
         border-width: 10px 10px 10px 0;
         border-color: transparent $lightGray transparent transparent;
-        content: '';
+        content: "";
         position: absolute;
         top: 0;
         left: -10px;
-        transform: rotate(360deg); /* for better anti-aliasing in webkit browsers */
+        transform: rotate(
+          360deg
+        ); /* for better anti-aliasing in webkit browsers */
         width: 0;
         height: 0;
       }
 
       &:after {
         background-color: $white;
-        border-radius: 50%;  /* make a circle */
-        content: '';
+        border-radius: 50%; /* make a circle */
+        content: "";
         position: absolute;
         top: 8px;
         left: -4px;
@@ -233,7 +237,8 @@ input::-moz-focus-inner {
           background-color: darken($colorSplash, 6%);
 
           &:before {
-            border-color: transparent darken($colorSplash, 6%) transparent transparent;
+            border-color: transparent darken($colorSplash, 6%) transparent
+              transparent;
           }
         }
       }
@@ -245,7 +250,7 @@ input::-moz-focus-inner {
     border: 1px solid $borderColor;
     border-radius: $borderRadius;
     padding: 5px;
-    transition: all .25s;
+    transition: all 0.25s;
 
     &:focus {
       border: 1px solid $borderColorFocus;
@@ -289,7 +294,6 @@ input::-moz-focus-inner {
   }
 
   .x-window & {
-
     .x-form-item-label {
       padding: 10px 0 4px 0; /* move the form fields a bit tighter together inside windows */
     }
@@ -309,21 +313,25 @@ input::-moz-focus-inner {
 
   &.disabled {
     label {
-        color: scale-color($coreFieldLabelColor, $lightness: 50%);
+      color: scale-color($coreFieldLabelColor, $lightness: 50%);
     }
   }
 
   .x-form-element {
     padding: 0;
     font: $baseText;
+    /* add margin to element without label, primarily for checkboxes/radios appearing after a regular field or help element */
+    &.add-label-space {
+      margin-top: 28px;
+    }
     .x-form-invalid-icon {
-        color: $red;
-        &::before {
-            @extend %pseudo-font;
-            content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
-            position: absolute;
-            left: 3px;
-        }
+      color: $red;
+      &::before {
+        @extend %pseudo-font;
+        content: fa-content($fa-var-exclamation-triangle); /* : "\f071" */
+        position: absolute;
+        left: 3px;
+      }
     }
   }
 
@@ -331,8 +339,7 @@ input::-moz-focus-inner {
 
   /* prevent columns used inside form elements to have too much spacing, some custom TV types need this */
   .x-column-inner > .x-column {
-
-    ~.x-column {
+    ~ .x-column {
       margin-left: 5px;
     }
 
@@ -358,10 +365,10 @@ input::-moz-focus-inner {
   display: block;
   font-size: 12px;
   font-style: italic;
-  margin: .4em 0 0 0;
+  margin: 0.4em 0 0 0;
 
   &.toggle-slider-above {
-    margin: .3em 0;
+    margin: 0.3em 0;
     padding-left: 3.9em;
   }
 
@@ -373,15 +380,15 @@ input::-moz-focus-inner {
 
   .example-list {
     ul {
-      margin: .4em 0;
+      margin: 0.4em 0;
       li {
         position: relative;
-        margin-bottom: .25em;
+        margin-bottom: 0.25em;
         padding-left: 1.25em;
         &::before {
           @extend %pseudo-font;
           position: absolute;
-          left: .2em;
+          left: 0.2em;
           top: 0;
           content: fa-content($fa-var-angle-double-right);
           color: scale-color($mediumGray, $lightness: 20%);
@@ -391,7 +398,7 @@ input::-moz-focus-inner {
   }
   .example-input,
   .copy-this {
-    padding: 0 .3em;
+    padding: 0 0.3em;
     border-radius: 2px;
     transition: width 1s;
   }
@@ -407,35 +414,35 @@ input::-moz-focus-inner {
   }
 
   .copy-this {
-      color: scale-color($blue, $lightness: -5%, $saturation: -40%);
-      background-color: scale-color($blue, $lightness: 92%, $saturation: -15%);
-      &:hover {
-          background-color: scale-color($blue, $lightness: 87%, $saturation: 5%);
-          color: scale-color($blue, $lightness: -35%);
-          cursor: pointer;
-          &::after {
-              @extend %pseudo-font;
-              content: fa-content($fa-var-copy);
-              color: scale-color($blue, $saturation: -40%);
-              display: inherit;
-              margin-left: .5em;
-          }
-          &:active {
-              color: $darkGray;
-              &::after {
-                  color: $darkGray;
-              }
-          }
+    color: scale-color($blue, $lightness: -5%, $saturation: -40%);
+    background-color: scale-color($blue, $lightness: 92%, $saturation: -15%);
+    &:hover {
+      background-color: scale-color($blue, $lightness: 87%, $saturation: 5%);
+      color: scale-color($blue, $lightness: -35%);
+      cursor: pointer;
+      &::after {
+        @extend %pseudo-font;
+        content: fa-content($fa-var-copy);
+        color: scale-color($blue, $saturation: -40%);
+        display: inherit;
+        margin-left: 0.5em;
       }
+      &:active {
+        color: $darkGray;
+        &::after {
+          color: $darkGray;
+        }
+      }
+    }
   }
   .feedback {
-      margin-left: .75em;
-      color: scale-color($blue, $lightness: -35%);
-      font-style: normal;
-      &.item-copied {
-          opacity: 1;
-          transition: opacity 1.5s;
-      }
+    margin-left: 0.75em;
+    color: scale-color($blue, $lightness: -35%);
+    font-style: normal;
+    &.item-copied {
+      opacity: 1;
+      transition: opacity 1.5s;
+    }
   }
 
   a {
@@ -450,13 +457,12 @@ input::-moz-focus-inner {
   .deemphasize {
     font-style: normal;
   }
-
 }
 
 .fs-toggle {
   padding-top: 1em;
   margin-top: 2em;
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
   border-top: 1px dashed $borderColor;
 }
 
@@ -515,7 +521,6 @@ input::-moz-focus-inner {
       }
     }
   }
-
 }
 
 .x-form-field {
@@ -585,7 +590,7 @@ input::-moz-focus-inner {
       transform: translate(-50%, -50%);
       text-align: center;
       width: 30px;
-      transition: opacity .25s;
+      transition: opacity 0.25s;
     }
 
     &.x-form-trigger-over,
@@ -631,7 +636,6 @@ input::-moz-focus-inner {
       content: fa-content($fa-var-file-code);
       font-weight: 400;
     }
-
   }
 
   &.x-datetime-wrap {
@@ -753,7 +757,7 @@ input::-moz-focus-inner {
       padding-left: 3px;
 
       &:before {
-        content: '';
+        content: "";
       }
     }
 
@@ -761,7 +765,7 @@ input::-moz-focus-inner {
       @extend %pseudo-font;
 
       box-sizing: border-box;
-      content: '';
+      content: "";
       font-size: 18px;
       padding-right: 3px;
       position: absolute;
@@ -847,12 +851,10 @@ input::-moz-focus-inner {
 #modx-resource-tabs,
 #modx-tv-tabs,
 .x-window {
-
   .x-form-check-wrap,
   .x-fieldset-checkbox-toggle legend,
-  .x-fieldset legend{
-    [type="checkbox"]{
-
+  .x-fieldset legend {
+    [type="checkbox"] {
       position: absolute;
       left: -9999px;
       html[dir="rtl"] & {
@@ -860,11 +862,11 @@ input::-moz-focus-inner {
         left: unset;
       }
 
-      &+.x-form-cb-label,
-      &+.x-fieldset-header-text {
+      & + .x-form-cb-label,
+      & + .x-fieldset-header-text {
         position: relative;
         padding-left: 3.6em;
-        padding-top: .2em;
+        padding-top: 0.2em;
         margin-left: 0;
         cursor: pointer;
         box-sizing: border-box;
@@ -872,9 +874,9 @@ input::-moz-focus-inner {
 
         &:before,
         &:after {
-          content: '';
+          content: "";
           position: absolute;
-          transition: all .2s ease;
+          transition: all 0.2s ease;
           font-size: inherit;
         }
 
@@ -891,7 +893,7 @@ input::-moz-focus-inner {
         &:after {
           left: 0.1em;
           top: 0.8em;
-          margin-top: -.65em;
+          margin-top: -0.65em;
           height: 1.3em;
           width: 1.3em;
           border-radius: 50%;
@@ -901,9 +903,8 @@ input::-moz-focus-inner {
       }
 
       &:checked {
-
-        &+.x-form-cb-label,
-        &+.x-fieldset-header-text {
+        & + .x-form-cb-label,
+        & + .x-fieldset-header-text {
           &:after {
             left: 1.6em;
             top: 0.8em;
@@ -917,9 +918,8 @@ input::-moz-focus-inner {
       }
 
       &.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;
@@ -928,9 +928,8 @@ input::-moz-focus-inner {
       }
 
       &.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;
@@ -941,6 +940,17 @@ input::-moz-focus-inner {
   }
 }
 
+.x-window-footer {
+  .cb-clear-cache {
+    .x-form-check-wrap {
+      label {
+        font-size: $bodyFontSize * .92;
+        font-weight: 500;
+      }
+    }
+  }
+}
+
 .x-form-check-group,
 .x-form-radio-group {
   /*overflow: visible; /* do not cut off the bottom of the input elements */
@@ -958,12 +968,11 @@ input::-moz-focus-inner {
   }
   /* applies to new xcheckboxgroup custom checkbox group */
   &.aggregated-group {
-      padding-left: 1em;
-      padding-right: 1em;
+    padding-left: 1em;
+    padding-right: 1em;
   }
 }
 
-
 /* superboxselect / multi-select field */
 .x-superboxselect {
   height: auto !important; /* override the extjs default theme style of 18px */
@@ -1013,13 +1022,13 @@ input::-moz-focus-inner {
           cursor: pointer;
           display: inline-block; /*font-size: 1px;*/
           outline: 0; /* fix firefox dotted outlines */
-          opacity: .6;
+          opacity: 0.6;
           filter: alpha(opacity=60); /* for IE <= 8 */
           padding: 0;
           position: absolute;
           top: 0;
           right: 0;
-          transition: opacity .25s;
+          transition: opacity 0.25s;
           width: 16px;
           height: 100%;
 
@@ -1102,7 +1111,7 @@ input::-moz-focus-inner {
     margin-bottom: 2px;
   }
 
-  input[type=text],
+  input[type="text"],
   textarea {
     background-color: $coreFieldBg;
     background-image: none;
@@ -1112,7 +1121,7 @@ input::-moz-focus-inner {
     width: 97%;
   }
 
-  input[type=text] {
+  input[type="text"] {
     font-size: 13px;
     height: 20px !important;
     padding: 5px;
@@ -1150,12 +1159,13 @@ input::-moz-focus-inner {
 }
 
 .x-editor .x-form-check-wrap {
-  background-color: $white
+  background-color: $white;
 }
 
 /* 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 0 100%;
+  background: #f6f2f7 url($imgPath+"modx-theme/form/combo-bck.png") repeat-x
+    scroll 0 100%;
 }
 
 .x-grid-editor .x-form-field-wrap input {
@@ -1164,7 +1174,7 @@ input::-moz-focus-inner {
 
 .x-grid-editor .x-form-field-wrap img {
   background-color: $white;
-  background-image: url($imgPath + 'modx-theme/form/trigger.png');
+  background-image: url($imgPath+"modx-theme/form/trigger.png");
 }
 
 .x-form-grow-sizer {
@@ -1194,7 +1204,6 @@ input::-moz-focus-inner {
 
 .x-grid3 {
   .x-small-editor {
-
     .x-form-text,
     .x-form-field-wrap {
       font: $fontSmall;
@@ -1298,7 +1307,7 @@ input::-moz-focus-inner {
 
       .x-btn {
         padding: 1px;
-        transition: color .25s;
+        transition: color 0.25s;
 
         &.x-btn-over,
         &:hover,
@@ -1313,7 +1322,7 @@ input::-moz-focus-inner {
 
         &.x-item-disabled {
           color: $buttonColor;
-          opacity: .4;
+          opacity: 0.4;
         }
 
         button:before {
@@ -1357,7 +1366,11 @@ 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;
@@ -1369,7 +1382,15 @@ 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;
       }
@@ -1378,13 +1399,13 @@ input::-moz-focus-inner {
     /* the refresh button */
     .x-toolbar-cell:last-child {
       opacity: 0;
-      transition: opacity .25s;
+      transition: opacity 0.25s;
 
       .x-btn {
         font-size: 12px;
         line-height: 1;
         margin: 0;
-        opacity: .4;
+        opacity: 0.4;
         padding: 0;
         position: absolute;
         bottom: 2px;
@@ -1426,7 +1447,7 @@ input::-moz-focus-inner {
 }
 
 .x-combo-list-hd {
-  background-image: url($imgPath + 'modx-theme/layout/panel-title-light-bg.gif');
+  background-image: url($imgPath+"modx-theme/layout/panel-title-light-bg.gif");
   border-bottom-color: #bcbcbc;
   color: #464646;
 }
@@ -1473,18 +1494,18 @@ input::-moz-focus-inner {
 .x-date-mp-ybtn a.x-date-mp-prev,
 .x-date-mp-ybtn a.x-date-mp-next {
   display: inline-block;
-  opacity: .6;
+  opacity: 0.6;
   filter: alpha(opacity=60); /* for IE <= 8 */
   margin: 0 auto;
   position: relative;
-  transition: opacity .25s;
+  transition: opacity 0.25s;
 
   &:before {
     @extend %pseudo-font;
 
     box-sizing: border-box;
     color: $colorSplash;
-    content: '';
+    content: "";
     font-size: 18px;
     position: absolute;
     top: 0;
@@ -1713,7 +1734,7 @@ td.x-date-mp-sep {
   border-radius: $borderRadius;
   background-color: $coreFieldBg;
   border: 1px solid $borderColor;
-  background: url('../images/tp-no-preview.png') no-repeat center center;
+  background: url("../images/tp-no-preview.png") no-repeat center center;
   overflow: hidden;
 
   .x-panel-bwrap,
@@ -1734,6 +1755,6 @@ td.x-date-mp-sep {
     bottom: 0;
     padding: 10px 20px;
     color: #fff;
-    background-color: rgba(0, 0, 0, .8);
+    background-color: rgba(0, 0, 0, 0.8);
   }
 }