Updated styles to use logical properties/values

[bookstack] / resources / sass / _lists.scss

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 2e8fa257aebcf270e87bf438b00659ca85efcebd..7beb63d4e57b01ad1840a8425ba7e365ec4efb93 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -6,7 +6,7 @@
     justify-self: stretch;
     align-self: stretch;
     height: auto;
-    margin-right: $-l;
+    margin-inline-end: $-l;
   }
   .icon:after {
     opacity: 0.5;
@@ -60,7 +60,7 @@
     border-radius: 0 4px 4px 0;
     padding: $-xs $-m;
     width: 100%;
-    text-align: left;
+    text-align: start;
   }
   .chapter-expansion-toggle:hover {
     background-color: rgba(0, 0, 0, 0.06);
@@ -88,13 +88,17 @@
 .sidebar-page-nav {
   $nav-indent: $-m;
   list-style: none;
-  margin: $-s 0 $-m $-xs;
+  @include margin($-s, 0, $-m, $-xs);
   position: relative;
   &:after {
     content: '';
     display: block;
     position: absolute;
     left: 0;
+    @include rtl {
+      left: auto;
+      right: 0;
+    }
     background-color: rgba(0, 0, 0, 0.2);
     width: 2px;
     top: 5px;
@@ -107,22 +111,22 @@
     position: relative;
   }
   .h1 {
-    padding-left: $nav-indent;
+    padding-inline-start: $nav-indent;
   }
   .h2 {
-    padding-left: $nav-indent * 1.5;
+    padding-inline-start: $nav-indent * 1.5;
   }
   .h3 {
-    padding-left: $nav-indent * 2;
+    padding-inline-start: $nav-indent * 2;
   }
   .h4 {
-    padding-left: $nav-indent * 2.5;
+    padding-inline-start: $nav-indent * 2.5;
   }
   .h5 {
-    padding-left: $nav-indent*3;
+    padding-inline-start: $nav-indent*3;
   }
   .h6 {
-    padding-left: $nav-indent*3.5;
+    padding-inline-start: $nav-indent*3.5;
   }
   .current-heading {
     font-weight: bold;
@@ -139,15 +143,19 @@
     border-radius: 50%;
     box-shadow: 0 0 0 6px #F2F2F2;
     z-index: 1;
+    @include rtl {
+      left: auto;
+      right: -2px;
+    }
   }
 }
 
 // Sidebar list
 .book-tree .sidebar-page-list  {
   list-style: none;
-  margin: $-xs -$-s 0 -$-s;
-  padding-left: 0;
-  padding-right: 0;
+  @include margin($-xs, -$-s, 0, -$-s);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
   position: relative;
 
   &:after, .sub-menu:after {
@@ -157,14 +165,18 @@
     left: $-m;
     top: 1rem;
     bottom: 1rem;
-    border-left: 4px solid rgba(0, 0, 0, 0.1);
+    border-inline-start: 4px solid rgba(0, 0, 0, 0.1);
     z-index: 0;
+    @include rtl {
+      left: auto;
+      right: $-m;
+    }
   }
 
   ul {
     list-style: none;
-    padding-left: 1rem;
-    padding-right: 0;
+    padding-inline-start: 1rem;
+    padding-inline-end: 0;
   }
 
   .entity-list-item {
@@ -183,7 +195,7 @@
   }
   .entity-list-item.no-hover {
     margin-top: -$-xs;
-    padding-right: 0;
+    padding-inline-end: 0;
   }
   .entity-list-item-name {
     font-size: 1em;
@@ -192,10 +204,10 @@
   .chapter-child-menu {
     font-size: .8rem;
     margin-top: -.2rem;
-    margin-left: -1rem;
+    margin-inline-start: -1rem;
   }
   [chapter-toggle] {
-    padding-left: .7rem;
+    padding-inline-start: .7rem;
     padding-bottom: .2rem;
   }
   .entity-list-item .icon {
@@ -218,7 +230,7 @@
 .chapter-child-menu {
   ul.sub-menu {
     display: none;
-    padding-left: 0;
+    padding-inline-start: 0;
     position: relative;
   }
   [chapter-toggle].open + .sub-menu {
@@ -254,10 +266,10 @@
   justify-content: space-between;
 }
 .sort-box-options .button {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .sortable-page-list {
-  margin-left: 0;
+  margin-inline-start: 0;
   padding: 0;
   .entity-list-item > span:first-child {
     align-self: flex-start;
@@ -267,12 +279,12 @@
     flex: 1;
   }
   > ul {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   ul {
     margin-bottom: $-m;
     margin-top: 0;
-    padding-left: $-m;
+    padding-inline-start: $-m;
   }
   li {
     border: 1px solid #DDD;
@@ -280,7 +292,7 @@
     min-height: 38px;
   }
   li.text-page, li.text-chapter {
-    border-left: 2px solid currentColor;
+    border-inline-start: 2px solid currentColor;
   }
   li:first-child {
     margin-top: $-xs;
@@ -320,7 +332,7 @@ ul.pagination {
   display: inline-block;
   list-style: none;
   margin: $-m 0;
-  padding-left: 1px;
+  padding-inline-start: 1px;
   li {
     float: left;
   }
@@ -338,7 +350,7 @@ ul.pagination {
     display: block;
     padding: $-xxs $-s;
     border: 1px solid #CCC;
-    margin-left: -1px;
+    margin-inline-start: -1px;
     user-select: none;
     &.disabled {
       cursor: not-allowed;
@@ -402,13 +414,13 @@ ul.pagination {
     color: #666;
   }
   > span:first-child {
-    margin-right: $-m;
+    margin-inline-end: $-m;
     flex-basis: 1.88em;
     flex: none;
   }
   > span:last-child {
     flex: 1;
-    text-align: left;
+    text-align: start;
   }
   &:not(.no-hover) {
     cursor: pointer;
@@ -438,7 +450,7 @@ ul.pagination {
   position: relative;
   top: 1px;
   svg {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 
@@ -460,7 +472,7 @@ ul.pagination {
     text-overflow: ellipsis;
     height: 2.5em;
     overflow: hidden;
-    text-align: left;
+    text-align: start;
     display: block;
     white-space: nowrap;
   }
@@ -474,7 +486,7 @@ ul.pagination {
   background-position: 50% 50%;
   border-radius: 3px;
   position: relative;
-  margin-right: $-l;
+  margin-inline-end: $-l;
 
   &.entity-list-item-image-wide {
     width: 220px;
@@ -484,7 +496,7 @@ ul.pagination {
     color: #FFF;
     fill: #FFF;
     font-size: 1.66rem;
-    margin-right: 0;
+    margin-inline-end: 0;
     position: absolute;
     bottom: $-xs;
     left: $-xs;
@@ -550,7 +562,7 @@ ul.pagination {
   padding: $-xs 0;
   color: #555;
   fill: #555;
-  text-align: left !important;
+  text-align: start !important;
   &.wide {
     min-width: 220px;
   }
@@ -577,14 +589,14 @@ ul.pagination {
       outline-offset: -2px;
     }
     svg {
-      margin-right: $-s;
+      margin-inline-end: $-s;
       display: inline-block;
       width: 16px;
     }
   }
   button {
     width: 100%;
-    text-align: left;
+    text-align: start;
   }
   li.border-bottom {
     border-bottom: 1px solid #DDD;
@@ -615,7 +627,7 @@ ul.pagination {
     color: #FFF;
     fill: #FFF;
     font-size: 2rem;
-    margin-right: 0;
+    margin-inline-end: 0;
     position: absolute;
     bottom: 10px;
     left: 6px;