Merge pull request #1394 from plone/sass-179-compat

SASS 1.79 compatibility
plone · Sep 23, 2024 · 9e88e9a · 9e88e9a
2 parents 1c48549 + 2ca17d2
commit 9e88e9a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 18 deletions.
diff --git a/src/pat/relateditems/relateditems.scss b/src/pat/relateditems/relateditems.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .pat-relateditems-container {
     position: relative;
     display: inline-block;
@@ -184,7 +186,7 @@
             padding: 0 0.15em 0 0.1em;
 
             &:hover {
-                background-color: lighten(#d8d8d8, 5%);
+                background-color: color.scale(#d8d8d8, $lightness: 5%);
             }
 
             span {

diff --git a/src/pat/structure/structure.scss b/src/pat/structure/structure.scss
@@ -1,8 +1,3 @@
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/forms/form-control";
-
 .pat-structure {
     input.has-filter {
         border: 1px solid orange;
@@ -72,7 +67,7 @@
             border-bottom-width: 2px;
 
             th.sorting_disabled {
-                padding-right: $table-cell-padding-x !important;
+                padding-right: var(--bs-table-cell-padding-x) !important;
 
                 &:after,
                 &:before {
@@ -230,14 +225,14 @@
         }
 
         .popover-content {
-            padding: $popover-body-padding-y $popover-body-padding-x;
+            padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
 
             form {
-                padding: $popover-body-padding-y $popover-body-padding-x;
+                padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
                 max-height: 500px;
                 overflow-y: auto;
                 overflow-x: hidden;
-                margin: $popover-body-padding-y * -1 $popover-body-padding-x * -1 $popover-body-padding-y;
+                margin: calc(var(--bs-popover-body-padding-y) * -1) calc(var(--bs-popover-body-padding-x) * -1) var(--bs-popover-body-padding-y);
             }
         }
 
@@ -264,7 +259,7 @@
 
                 .lead-img {
                     flex-shrink: 0;
-                    margin-left: $spacer;
+                    margin-left: 1rem;
                 }
             }
 
@@ -278,9 +273,9 @@
         }
 
         &.default-page .title>div>*:first-child:before {
-            color: $danger;
+            color: var(--bs-danger);
             content: "•";
-            font-size: $font-size-lg;
+            font-size: calc(var(--bs-body-font-size) * 1.25);
             line-height: 1;
         }
     }
@@ -334,9 +329,13 @@
 
     #popover-rename {
         .form-control {
-            @extend .form-control-sm;
+            // copied from .form-control-sm from Bootstrap to avoid including
+            // bootstrap.scss only for this.
+            min-height: calc(1.5em + .5rem + calc(var(--bs-border-width) * 2));
+            padding: .25rem .5rem;
+            font-size: calc(var(--bs-body-font-size) * .875);
+            border-radius: var(--bs-border-radius-sm);
         }
-
         div.item {
             border-bottom: 1px solid var(--bs-primary);
             margin-bottom: 5px;

diff --git a/src/pat/upload/upload.scss b/src/pat/upload/upload.scss
@@ -1,6 +1,3 @@
-// Bootstrap dependencies:
-// - _progress.scss
-
 .upload-container {
     .upload-area {
         border: 3px dashed #ccc;