feat: Add Django 4.2 admin support

CHANGELOG.rst

@@ -2,6 +2,13 @@
 Changelog
 =========
 
+unreleased
+==========
+
+* Style delete links
+* Fix read-only fields overlapping with their labels
+* Adjust flex-container in newer Django versions
+
 3.2.6 (2023-09-18)
 ==================
 

djangocms_admin_style/sass/components/_content.scss

@@ -304,14 +304,14 @@ ul.messagelist + #content {
     box-shadow: none;
     .deletelink-box {
         margin: 0;
-        .deletelink {
-            @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
-            @include icon(trash-o);
-            display: block;
-            padding: 9px 20px !important;
-            height: 36px;
-            box-sizing: border-box;
-        }
+    }
+    .deletelink {
+        @include button-variant($btn-default-color, $btn-default-bgcolor, $btn-default-border, true);
+        @include icon(trash-o);
+        display: block;
+        padding: 9px 20px !important;
+        height: 36px;
+        box-sizing: border-box;
     }
     input[type="submit"] {
         padding: 10px 20px !important;

djangocms_admin_style/sass/components/_forms.scss

@@ -6,7 +6,7 @@ form {
     padding: 25px 25px;
     background-color: $white;
     box-shadow: $base-box-shadow;
-    fieldset {
+    fieldset, .inline-group {
         width: 80%;
     }
     // only uses this styles if form-row is not set on a table row because before and after breaks tables #247
@@ -21,7 +21,7 @@ form {
     }
     .form-row {
         // Improve readability by increasing contrast
-        & > div > label:not(.vCheckboxLabel) {
+        & div > label:not(.vCheckboxLabel) {
             color: $gray-darker !important;
             font-weight: bold !important;
             width: 100% !important;
@@ -100,13 +100,15 @@ form {
         }
 
         // only affects field boxes when they are next to each other
-        .fieldBox {
+        & > .fieldBox, & > div > .fieldBox,
+        & > div > .flex-container > div:not(.related-widget-wrapper, .cke, .widget),
+        .form-multiline > div:not(.related-widget-wrapper, .cke, .widget) {
             margin-right: 0px;
             box-sizing: border-box;
             width: 50%;
             max-width: 500px;
 
-            & > label {
+            & > label {
                 text-transform: inherit;
             }
             & + .fieldBox {
@@ -115,7 +117,7 @@ form {
 
             &:not(:first-child) {
                 border-top: none;
-                padding-right: 2vw;
+                // padding-right: 2vw;
             }
 
             &:nth-of-type(1) {
@@ -186,7 +188,7 @@ form {
     .cke {
         box-sizing: border-box;
     }
-    .aligned {
+    & {
         .field-number_of_visits p {
             margin-left: 0;
             padding-left: 0;
@@ -222,7 +224,7 @@ form {
                 content: none;
             }
             & + div.readonly {
-                margin-top: -30px;
+                margin-top: -5px;
             }
         }
         label + label {
@@ -466,6 +468,15 @@ form {
 
 .form-row .select2-container {
     min-width: 250px + 12px;
+    &.select2-container--admin-autocomplete .select2-selection {
+        min-height: 36px;
+        .select2-selection__arrow {
+            height: 32px;
+        }
+        .select2-selection__clear {
+            margin-top: 5px;
+        }
+    }
 } // standard input width + default input padding
 
 .inline-group .module:not(.aligned) .form-row input,

djangocms_admin_style/sass/components/_header.scss

@@ -84,7 +84,8 @@
                 border: 1px solid $white;
                 border-top: none;
                 border-radius: 0 0 4px 4px;
-                background: rgba($white, .97);
+                background: $white;
+                filter: opacity(.95);
                 box-shadow: 0 1px 1px rgba($black-fallback, .4);
                 &.submenu-open {
                     display: block;

djangocms_admin_style/sass/components/_tables.scss

@@ -200,7 +200,7 @@
             select {
                 float: none;
                 vertical-align: top;
-                width: auto !important;
+                // width: auto !important;
             }
         }
         &.delete {