Remove unnecessary box-sizing: border-box declarations

- box-sizing: border-box added to all elements globally in #8921
- Relates to #9031

CHANGELOG.txt

@@ -23,6 +23,7 @@ Changelog
  * Ensure that the `rebuild_references_index` command can run without console output if called with `--verbosity 0` (Omerzahid Ali, Aman Pandey)
  * Add development (contributing to Wagtail) documentation notes for development on Windows (Akua Dokua Asiedu)
  * Clean up linting on legacy code and add shared util `hasOwn` in TypeScript (Loveth Omokaro)
+ * Remove unnecessary box-sizing: border-box declarations in SCSS (Albina Starykova)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)
  * Fix: Ensure authentication forms (login, password reset) have a visible border in Windows high-contrast mode (Loveth Omokaro)
  * Fix: Ensure visual consistency between buttons and links as buttons in Windows high-contrast mode (Albina Starykova)

client/scss/components/_dropdown.legacy.scss

@@ -76,7 +76,6 @@
     }
 
     a {
-      box-sizing: border-box;
       white-space: nowrap;
       position: relative;
       text-decoration: none;
@@ -223,7 +222,6 @@
       // Media for Windows High Contrast
       @media (forced-colors: $media-forced-colours) {
         background: transparent;
-        box-sizing: border-box;
         border: 1px solid ActiveText;
       }
     }

client/scss/components/_dropdown.scss

@@ -7,7 +7,6 @@
 
 .c-dropdown__button {
   display: inline-block;
-  box-sizing: border-box;
   padding-inline-start: 0.5rem;
   padding-inline-end: 0.25rem;
   // Make this the same as the other buttons

client/scss/components/_grid.legacy.scss

@@ -30,7 +30,6 @@
 .content-wrapper {
   @include slim-header-scroll-offset();
   scroll-behavior: smooth;
-  box-sizing: border-box;
   width: 100%;
   height: 100%; // this has no effect on desktop, but on mobile it helps aesthetics of menu popout action
   float: left;

client/scss/components/_modals.scss

@@ -20,7 +20,6 @@ $zindex-modal-background: 500;
 
 // Container that the modal scrolls within
 .modal {
-  box-sizing: border-box;
   display: none;
   overflow: auto;
   overflow-y: scroll;
@@ -34,7 +33,6 @@ $zindex-modal-background: 500;
 
 // Shell div to position the modal with bottom padding
 .modal-dialog {
-  box-sizing: border-box;
   margin-inline-start: auto;
   margin-inline-end: auto;
   padding: 0;
@@ -53,7 +51,6 @@ $zindex-modal-background: 500;
 
 // Actual modal
 .modal-content {
-  box-sizing: border-box;
   border-radius: 3px;
   width: 98.7%;
   position: relative;

client/scss/components/_preview-panel.scss

@@ -49,7 +49,6 @@
     width: 2rem;
     height: 2rem;
     background: transparent;
-    box-sizing: border-box;
     padding: 0;
     border-radius: 5px;
     display: grid;

client/scss/components/_progressbar.scss

@@ -13,7 +13,6 @@
     @include transition(width 0.3s ease);
     border-radius: 1.5em;
     overflow: hidden;
-    box-sizing: border-box;
     text-align: end;
     line-height: 1.2em;
     color: $color-white;

client/scss/components/_workflow-tasks.scss

@@ -10,7 +10,6 @@
     border: 2px solid theme('colors.secondary.100');
     border-radius: 5px;
     color: $color-teal;
-    box-sizing: border-box;
     width: $task-width;
     height: $task-height;
     margin: 7px;

client/scss/components/forms/_switch.scss

@@ -50,7 +50,6 @@ $switch-border-radius: math.div(($switch-height + $switch-border * 2), 2);
     }
 
     &::after {
-      box-sizing: border-box;
       position: absolute;
       top: 50%;
       transform: translate($switch-border, -50%);

client/scss/generic/_normalize.scss

@@ -447,18 +447,16 @@ input[type="submit"] {
 }
 
 /**
- * 1. Address box sizing set to content-box in IE 8/9.
- * 2. Remove excess padding in IE 8/9.
- * 3. Remove excess padding in IE 7.
+ * 1. Remove excess padding in IE 8/9.
+ * 2. Remove excess padding in IE 7.
  *    Known issue: excess padding remains in IE 6.
  */
 
 input[type='checkbox'],
 input[type='radio'] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-  *height: 13px; /* 3 */
-  *width: 13px; /* 3 */
+  padding: 0; /* 1 */
+  *height: 13px; /* 2 */
+  *width: 13px; /* 2 */
 }
 
 /**

client/scss/layouts/_modeladmin.scss

@@ -94,7 +94,6 @@
       text-decoration: none;
       position: relative;
       overflow: hidden;
-      box-sizing: border-box;
       -webkit-font-smoothing: auto;
       // stylelint-disable-next-line property-no-vendor-prefix
       -moz-appearance: none;

client/scss/overrides/_vendor.datetimepicker.scss

@@ -9,7 +9,6 @@
   padding-top: 2px;
   position: absolute;
   z-index: 5;
-  box-sizing: border-box;
   display: none;
 
   .w-dialog & {
@@ -17,7 +16,6 @@
   }
 
   * {
-    box-sizing: border-box;
     padding: 0;
     margin: 0;
   }

client/scss/tools/_mixins.grid.scss

@@ -6,7 +6,6 @@ $padding: math.div($grid-gutter-width, 2);
 // Our row container
 @mixin row($padding: 0) {
   @include clearfix();
-  box-sizing: border-box;
   display: block;
   margin-inline-end: auto;
   margin-inline-start: auto;
@@ -21,7 +20,6 @@ $padding: math.div($grid-gutter-width, 2);
 
 // Our column container
 @mixin column($x, $padding: $padding, $grid-columns: $grid-columns) {
-  box-sizing: border-box;
   display: inline;
   float: left;
   width: 100% * math.div($x, $grid-columns);
@@ -30,7 +28,6 @@ $padding: math.div($grid-gutter-width, 2);
 }
 
 @mixin table-column($x, $padding: $padding, $grid-columns: $grid-columns) {
-  box-sizing: border-box;
   width: 100% * math.div($x, $grid-columns);
 }
 

client/src/components/CommentApp/components/Comment/style.scss

@@ -7,7 +7,6 @@
   transition: top 0.5s ease 0s, inset-inline-end 0.5s ease 0s,
     height 0.5s ease 0s;
   pointer-events: auto;
-  box-sizing: border-box;
   padding-bottom: 0;
   inset-inline-end: -2000px;
   background-color: theme('colors.white.DEFAULT');

client/src/components/CommentApp/components/CommentHeader/style.scss

@@ -50,7 +50,6 @@
       background-color: unset;
       border: unset;
       padding: 0;
-      box-sizing: border-box;
 
       svg {
         position: absolute;

client/src/components/CommentApp/main.scss

@@ -35,7 +35,6 @@ $box-padding: 10px;
     width: 100%;
     background-color: $color-textarea-background;
     border: 1px solid $color-textarea-border;
-    box-sizing: border-box;
     border-radius: 5px;
     color: $color-box-text;
 
@@ -61,7 +60,6 @@ $box-padding: 10px;
     bottom: 0;
     width: calc(100% + #{$box-padding} * 2);
     padding: 5px 10px;
-    box-sizing: border-box;
 
     svg.icon {
       color: theme('colors.warning.100');

client/src/components/Sidebar/Sidebar.scss

@@ -7,7 +7,6 @@
   color: $color-white;
   width: $sidebar-toggle-size;
   height: $sidebar-toggle-size;
-  box-sizing: border-box;
   background: transparent;
   place-items: center;
   padding: 0;

client/src/components/Sidebar/menu/MenuItem.scss

@@ -14,7 +14,6 @@
     justify-content: flex-start;
     align-items: center;
     width: 100%;
-    box-sizing: border-box;
     white-space: nowrap;
     border-inline-start: 3px solid transparent;
     border-inline-end: 3px solid transparent;

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -25,7 +25,6 @@ $logo-size: 110px;
   transition: transform 150ms cubic-bezier(0.28, 0.15, 0, 2.1),
     width $menu-transition-duration ease, height $menu-transition-duration ease,
     padding-top $menu-transition-duration ease;
-  box-sizing: border-box;
   border-radius: 100%;
 
   @include media-breakpoint-up(sm) {

docs/releases/4.2.md

@@ -32,6 +32,7 @@ depth: 1
  * Ensure that the `rebuild_references_index` command can run without console output if called with `--verbosity 0` (Omerzahid Ali, Aman Pandey)
  * Add development (contributing to Wagtail) documentation notes for [development on Windows](development_on_windows) (Akua Dokua Asiedu)
  * Clean up linting on legacy code and add shared util `hasOwn` in TypeScript (Loveth Omokaro)
+ * Remove unnecessary box-sizing: border-box declarations in SCSS (Albina Starykova)
 
 ### Bug fixes
 

wagtail/admin/static_src/wagtailadmin/scss/userbar.scss

@@ -137,7 +137,6 @@ $positions: (
   visibility: hidden;
   font-family: $font-sans;
   font-size: 14px;
-  box-sizing: border-box;
   padding-inline-start: 0;
   text-decoration: none;