FIX Update CSS after PR

silverstripe · Mar 17, 2023 · cc63942 · cc63942
1 parent a396a90
commit cc63942
Show file tree

Hide file tree

Showing 18 changed files with 51 additions and 62 deletions.
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/Accordion/Accordion.scss b/client/src/components/Accordion/Accordion.scss
@@ -1,7 +1,7 @@
 // Accordion based off Bootstrap collapse
 
 .accordion__block {
-  margin-top: $spacer-div-two;
+  margin-top: map_get($spacers, 2);
 }
 
 .accordion__title {

diff --git a/client/src/components/Button/BackButton.scss b/client/src/components/Button/BackButton.scss
@@ -1,6 +1,6 @@
 .back-button {
-  padding-left: $spacer-div-four;
-  padding-right: $spacer-div-four;
+  padding-left: map_get($spacers, 1);
+  padding-right: map_get($spacers, 1);
   min-width: 24px; // Safari fix
   color: $text-muted; // TEMP: Needed for anchor buttons to override legacy styles
   margin-left: -$spacer-xs;

diff --git a/client/src/components/FieldGroup/FieldGroup.scss b/client/src/components/FieldGroup/FieldGroup.scss
@@ -3,7 +3,7 @@
   > .form-group {
     margin-top: 0;
     display: inline-block;
-    margin-right: $spacer-div-two;
+    margin-right: map_get($spacers, 2);
     vertical-align: bottom; // Align fields with no labels
   }
 

diff --git a/client/src/components/Form/Form.scss b/client/src/components/Form/Form.scss
@@ -184,7 +184,7 @@ input.radio {
 // Nested as only as a fix for date fields within the filter panel
 .form__fieldgroup > .form__fieldgroup-item {
   display: inline-block;
-  margin-right: $spacer-div-two;
+  margin-right: map_get($spacers, 2);
   margin-top: 8px;
   min-width: 166px;
   vertical-align: bottom; // Align fields with no labels

diff --git a/client/src/components/Modal/Modal.scss b/client/src/components/Modal/Modal.scss
@@ -175,11 +175,3 @@
   content: "#";
   color: $brand-danger;
 }
-
-// Fix for IE11 showing the split view preview iframe above the modal
-// We need to use this unorthodox selector for the js reactstrap created
-// <div tabindex="-1" style="position: relative; z-index: 1050;">
-.insert-link__dialog-wrapper + div[tabindex="-1"][style*="z-index: 1050"],
-#insert-embed-react__dialog-wrapper + div[tabindex="-1"][style*="z-index: 1050"] {// sass-lint:disable-line no-ids
-  position: absolute !important;// sass-lint:disable-line no-important
-}
diff --git a/client/src/components/Search/SearchForm.scss b/client/src/components/Search/SearchForm.scss
@@ -30,7 +30,7 @@
 
 // Fixes search date range inputs overflow
 .search-form .fieldgroup .field.date {
-  max-width: calc(50% - #{$spacer-div-four});
+  max-width: calc(50% - map_get($spacers, 1));
 }
 
 .search-form__wrapper {

diff --git a/client/src/components/Tabs/Tabs.scss b/client/src/components/Tabs/Tabs.scss
@@ -5,7 +5,7 @@
 
   // Spacing between items
   .nav-item + .nav-item {
-    margin-left: $spacer-div-two;
+    margin-left: map_get($spacers, 2);
   }
 
   .nav-link {

diff --git a/client/src/components/TreeDropdownField/TreeDropdownField.scss b/client/src/components/TreeDropdownField/TreeDropdownField.scss
@@ -55,7 +55,7 @@
 }
 
 .treedropdownfield__option-count-icon {
-  padding: 0 $spacer-div-two;
+  padding: 0 map_get($spacers, 2);
   line-height: 0.8;
 }
 

diff --git a/client/src/styles/_bootstrap-variables.scss b/client/src/styles/_bootstrap-variables.scss
@@ -143,6 +143,7 @@ $spacers: (
   3: $spacer,
   4: ($spacer * 1.5),
   5: ($spacer * 3),
+  xl: $spacer * 2.5, // 40px - custom
   lg: $spacer * 1.5, // 24px - custom
   sm: $spacer * .75, // 12px - custom
   xs: $spacer * .625 // 10px - custom
@@ -220,7 +221,7 @@ $container-max-widths: (
 // Set the number of columns and specify the width of the gutters.
 
 //$grid-columns: 12 !default;
-$grid-gutter-width: $spacer * 2.5; // 40px
+$grid-gutter-width: map_get($spacers, xl); // 40px
 
 // Components
 //
@@ -553,7 +554,7 @@ $dropdown-item-padding-x:        1.3rem !default;
 // Navs
 
 $nav-link-padding-y:            $spacer; // .5rem !default;
-$nav-link-padding-x:            #{calc($spacer / 4)}; // 1rem !default;
+$nav-link-padding-x:            map_get($spacers, 1); // 1rem !default;
 //$nav-link-disabled-color:       $gray-600 !default;
 
 $nav-tabs-border-color: $border-color;
@@ -680,7 +681,7 @@ $popover-bg:                        $white; // SS custom
 
 $popover-header-bg:                 $popover-bg; // SS custom
 //$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          $spacer * .75; // SS custom: 12px
+$popover-header-padding-y:          map_get($spacers, sm); // SS custom: 12px
 $popover-header-padding-x:          $spacer; // SS custom: 16px
 
 //$popover-body-color:                $body-color !default;
@@ -733,7 +734,7 @@ $modal-footer-border-color: #e5e5e5;
 //$modal-footer-border-width:   $modal-header-border-width !default;
 $modal-header-padding: map_get($spacers, xs) #{calc($grid-gutter-width / 2)};
 
-$modal-xl: calc(100% - #{calc($spacer * 4)});
+$modal-xl: calc(100% - map_get($spacers, xs));
 $modal-lg: 900px;
 $modal-md: 600px;
 //$modal-sm:                    300px !default;

diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
@@ -41,10 +41,6 @@ $border-color-dark: darken($border-color, 4);
 $spacer-sm: calc($spacer * .75); // 12px
 $spacer-xs: calc($spacer * .625); // 10px
 
-//Divided spacers
-$spacer-div-two: calc($spacer / 2);
-$spacer-div-four: calc($spacer / 4);
-
 // Grid columns
 
 // Panel padding

diff --git a/client/src/styles/legacy/GridField.scss b/client/src/styles/legacy/GridField.scss
@@ -54,11 +54,11 @@
 
     .pull-xs-right > * {
       float: right;
-      margin-left: $spacer-div-two;
+      margin-left: map_get($spacers, 2);
     }
 
     .pull-xs-left > * {
-      margin-right: $spacer-div-two;
+      margin-right: map_get($spacers, 2);
       float: left;
     }
 

diff --git a/client/src/styles/legacy/_SecurityAdmin.scss b/client/src/styles/legacy/_SecurityAdmin.scss
@@ -77,8 +77,8 @@ green tick icon as a background this is created using gulp-sprity generated clas
   .cms-content-fields {
     overflow-y:auto;
     .aligned-right-label { //align the label with the parent group field in add new group
-      margin-left: calc($spacer-div-two * 23);
-      padding: calc($spacer-div-two) 0;
+      margin-left: calc(map_get($spacers, 2) * 23);
+      padding: map_get($spacers, 2) 0;
     }
   }
 }

diff --git a/client/src/styles/legacy/_actionTabs.scss b/client/src/styles/legacy/_actionTabs.scss
@@ -206,9 +206,9 @@ $border: 1px solid darken(#D9D9D9, 15%);
             border: none;
           }
           &.loading {
-            background: transparent url('../../images/network-save.gif') no-repeat $spacer-div-two center;
+            background: transparent url('../../images/network-save.gif') no-repeat map_get($spacers, 2) center;
             .ui-button-text {
-              padding-left: $spacer /* icon */ + $spacer-div-four;
+              padding-left: calc($spacer * 1.25);
             }
           }
         }

diff --git a/client/src/styles/legacy/_forms.scss b/client/src/styles/legacy/_forms.scss
@@ -36,7 +36,7 @@ fieldset {
     margin-top: 7px;
 
     label.right {
-      margin: $spacer-div-four 0 0 0;
+      margin: map_get($spacers, 1) 0 0 0;
       display: inline;
       font-style: normal;
       color: $body-color;
@@ -45,7 +45,7 @@ fieldset {
   }
 
   span.readonly {
-    padding-top: $spacer-div-two;
+    padding-top: map_get($spacers, 2);
     display: block;
   }
 
@@ -177,7 +177,7 @@ form.small .field, .field.small {
     li {
       font-size: 11px;
       line-height: $spacer;
-      padding: $spacer-div-two;
+      padding: map_get($spacers, 2);
     }
   }
 }
@@ -253,16 +253,16 @@ form.small .field, .field.small {
 
   /* Date Fields */
   input.month, input.day {
-    width: calc($spacer-div-two * 7);
+    width: calc(map_get($spacers, 2) * 7);
     display: inline;
   }
   input.year {
-    width: calc($spacer-div-two * 9);
+    width: calc(map_get($spacers, 2) * 9);
     display: inline;
   }
 
   input.time {
-    width: calc($spacer-div-two * 17); // smaller time field, since input is restricted
+    width: calc(map_get($spacers, 2) * 17); // smaller time field, since input is restricted
   }
 
   /* Hides borders in settings/access. Activated from JS */
@@ -487,15 +487,15 @@ button.loading {
   .fieldgroup-field {
     float: left;
     display: block;
-    padding: $spacer-div-two $spacer-div-two 0 0;
+    padding: map_get($spacers, 2) map_get($spacers, 2) 0 0;
 
     .field {
       border: none;
       padding-bottom: 0;
     }
 
     .fieldholder-small {
-      padding: 0 0 $spacer-div-two 0;
+      padding: 0 0 map_get($spacers, 2) 0;
     }
 
     .fieldgroup input.text, .fieldgroup textarea, .fieldgroup select {
@@ -509,7 +509,7 @@ button.loading {
     }
 
     label {
-      padding: $spacer-div-two $spacer-div-two $spacer-div-two 0;
+      padding: map_get($spacers, 2) map_get($spacers, 2) map_get($spacers, 2) 0;
       margin-left: 0;
       margin-right: 1em;
       width: auto;
@@ -532,7 +532,7 @@ button.loading {
 }
 
 .ss-toggle {
-  margin: $spacer-div-two 0;
+  margin: map_get($spacers, 2) 0;
 
   .ui-accordion-header {
     padding-top: $spacer * .75;
@@ -559,12 +559,12 @@ button.loading {
   }
 
   .ui-accordion-content {
-    padding: $spacer-div-two 0 calc($spacer * 0.75);
+    padding: map_get($spacers, 2) 0 map_get($spacers, sm);
 
     .field {
       box-shadow: none;
-      padding-left: calc($spacer-div-two *1.5);
-      padding-right: calc($spacer-div-two *1.5);
+      padding-left: calc(map_get($spacers, 2) *1.5);
+      padding-right: calc(map_get($spacers, 2) *1.5);
 
       &:last-child {
         margin-bottom: 0;

diff --git a/client/src/styles/legacy/_mixins.scss b/client/src/styles/legacy/_mixins.scss
@@ -55,7 +55,7 @@
       float: none;
       width: auto;
       font-size: 12px;
-      padding: 0 $spacer-div-two 4px 0;
+      padding: 0 map_get($spacers, 2) 4px 0;
 
       &.extra-details{
         overflow:hidden;