Use logical properties for margin and padding on facet layout

This better supports rtl writing modes
projectblacklight · Jun 13, 2024 · 943e723 · 943e723
1 parent b6c8d96
commit 943e723
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 18 deletions.
diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
@@ -224,16 +224,16 @@ $facet-toggle-width: 1em !default;
 $facet-toggle-height: $facet-toggle-width !default;
 
 .facet-toggle-handle {
-  @extend .my-0;
-  @extend .py-0;
-  @extend .px-2;
+  margin-block: 0;
+  padding-block: 0;
+  padding-inline: 0.5rem;
 
   // keep the icon span centered in the button, but shift to the left for equal spacing inside row
-  margin-left: -1 * $btn-padding-x;
+  margin-inline-start: -1 * $btn-padding-x;
 
   .pivot-facet & {
     // shift pivot values a little more aggressively for better compact display
-    margin-left: -2 * $btn-padding-x;
+    margin-inline-start: -2 * $btn-padding-x;
   }
 
   &.collapsed {

diff --git a/app/assets/stylesheets/blacklight/build.scss b/app/assets/stylesheets/blacklight/build.scss
@@ -2,10 +2,6 @@
 @import "bootstrap/scss/mixins/breakpoints";
 @import "bootstrap/scss/variables";
 
-.py-2 {
-  padding-block: 0.5rem; /* https://github.com/projectblacklight/blacklight/pull/3186 */
-}
-
 /* These classes are all the BS things that Blacklight depends on (via @extend) */
 .col-md-12 {
 }
@@ -38,12 +34,6 @@ h5 {
 .h6 {
 }
 
-.list-unstyled {
-}
-
-.d-flex {
-}
-
 .my-0 {
 }
 
@@ -58,7 +48,4 @@ h5 {
 .px-4 {
 }
 
-.text-muted {
-}
-
 @import "blacklight";