Opensearch: Fixed XML declaration when php short tags enabled

[bookstack] / resources / sass / _lists.scss

diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 5e251f9c7c1faa7d61c4a4054b394c0a3170b042..1e503dd0ffe50a54eb428c2ca19e63ece3737afe 100644 (file)
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 
 .book-contents .entity-list-item {
   .icon {
@@ -6,7 +9,7 @@
     justify-self: stretch;
     align-self: stretch;
     height: auto;
-    margin-inline-end: $-xs;
+    margin-inline-end: vars.$xs;
   }
   .icon:after {
     opacity: 0.5;
@@ -25,7 +28,7 @@
 
 .entity-list-item + .chapter-expansion {
   display: flex;
-  padding: 0 $-m $-m $-m;
+  padding: 0 vars.$m vars.$m vars.$m;
   align-items: center;
   border: 0;
   width: 100%;
@@ -58,7 +61,7 @@
   }
   .chapter-contents-toggle {
     border-radius: 0 4px 4px 0;
-    padding: $-xs ($-m + $-xxs);
+    padding: vars.$xs (vars.$m + vars.$xxs);
     width: 100%;
     text-align: start;
   }
@@ -86,20 +89,20 @@
 }
 
 .sidebar-page-nav {
-  $nav-indent: $-m;
+  $nav-indent: vars.$m;
   list-style: none;
-  @include margin($-s, 0, $-m, $-xs);
+  @include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);
   position: relative;
   &:after {
     content: '';
     display: block;
     position: absolute;
     left: 0;
-    @include rtl {
+    @include mixins.rtl {
       left: auto;
       right: 0;
     }
-    @include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
     width: 2px;
     top: 5px;
     bottom: 5px;
@@ -132,7 +135,7 @@
     font-weight: bold;
   }
   li:not(.current-heading) .sidebar-page-nav-bullet {
-    @include lightDark(background-color, #BBB, #666, true);
+    @include mixins.lightDark(background-color, #BBB, #666, true);
   }
   .sidebar-page-nav-bullet {
     width: 6px;
@@ -142,9 +145,9 @@
     top: 30%;
     border-radius: 50%;
     box-shadow: 0 0 0 6px #F2F2F2;
-    @include lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
+    @include mixins.lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
     z-index: 1;
-    @include rtl {
+    @include mixins.rtl {
       left: auto;
       right: -2px;
     }
@@ -154,7 +157,7 @@
 // Sidebar list
 .book-tree .sidebar-page-list  {
   list-style: none;
-  @include margin($-xs, -$-s, 0, -$-s);
+  @include mixins.margin(vars.$xs, -(vars.$s), 0, -(vars.$s));
   padding-inline-start: 0;
   padding-inline-end: 0;
 
@@ -172,22 +175,22 @@
     padding-inline-end: 0;
     .content {
       width: 100%;
-      padding-top: $-xs;
-      padding-bottom: $-xs;
+      padding-top: vars.$xs;
+      padding-bottom: vars.$xs;
       max-width: calc(100% - 20px);
     }
   }
   .entity-list-item.selected {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
   .entity-list-item.no-hover {
-    margin-top: -$-xs;
+    margin-top: -(vars.$xs);
     padding-inline-end: 0;
   }
   .entity-list-item-name {
     font-size: 1em;
     margin: 0;
-    margin-inline-end: $-m;
+    margin-inline-end: vars.$m;
   }
   .chapter-child-menu {
     font-size: .8rem;
@@ -197,14 +200,14 @@
   .chapter-contents-toggle {
     display: block;
     width: 100%;
-    text-align: left;
-    padding: $-xxs $-s ($-xxs * 2) $-s;
+    text-align: start;
+    padding: vars.$xxs vars.$s (vars.$xxs * 2) vars.$s;
     border-radius: 0 3px 3px 0;
     line-height: 1;
-    margin-top: -$-xxs;
-    margin-bottom: -$-xxs;
+    margin-top: -(vars.$xxs);
+    margin-bottom: -(vars.$xxs);
     &:hover {
-      @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+      @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
     }
   }
   .entity-list-item .icon {
@@ -232,13 +235,17 @@
 }
 
 // Sortable Lists
-.sortable-page-list, .sortable-page-list ul {
+.sortable-page-list, .sortable-page-sublist {
   list-style: none;
 }
 .sort-box {
-  margin-bottom: $-m;
-  padding: $-m $-xl;
+  margin-bottom: vars.$m;
+  padding: vars.$m vars.$xl;
   position: relative;
+  summary:focus {
+    outline: 1px dashed var(--color-primary);
+    outline-offset: 5px;
+  }
   &::before {
     pointer-events: none;
     content: '';
@@ -267,7 +274,7 @@
   .entity-list-item > span:first-child {
     align-self: flex-start;
   }
-  .sortable-selected  .entity-list-item, .sortable-selected  .entity-list-item:hover {
+  .sortable-selected, .sortable-selected:hover {
     outline: 1px dotted var(--color-primary);
     background-color: var(--color-primary-light) !important;
   }
@@ -278,13 +285,15 @@
   > ul {
     margin-inline-start: 0;
   }
-  ul {
-    margin-bottom: $-m;
+  .sortable-page-sublist {
+    margin-bottom: vars.$m;
     margin-top: 0;
-    padding-inline-start: $-m;
+    padding-inline-start: vars.$m;
   }
   li {
-    border: 1px solid #DDD;
+    @include mixins.lightDark(background-color, #FFF, #222);
+    border: 1px solid;
+    @include mixins.lightDark(border-color, #DDD, #666);
     margin-top: -1px;
     min-height: 38px;
   }
@@ -292,7 +301,7 @@
     border-inline-start: 2px solid currentColor;
   }
   li:first-child {
-    margin-top: $-xs;
+    margin-top: vars.$xs;
   }
 }
 .sortable-page-list li.placeholder {
@@ -301,23 +310,53 @@
 .sortable-page-list li.placeholder:before {
   position: absolute;
 }
+.sort-box summary {
+  list-style: none;
+  font-size: .9rem;
+  cursor: pointer;
+}
+.sort-box summary::-webkit-details-marker {
+  display: none;
+}
+details.sort-box summary .caret-container svg {
+  transition: transform ease-in-out 120ms;
+}
+details.sort-box[open] summary .caret-container svg {
+  transform: rotate(90deg);
+}
+.sort-box-actions .icon-button {
+  opacity: .6;
+}
+.sort-box .flex-container-row:hover .sort-box-actions .icon-button,
+.sort-box .flex-container-row:focus-within .sort-box-actions .icon-button {
+  opacity: 1;
+}
+.sort-box-actions .icon-button[disabled] {
+  visibility: hidden;
+}
+.sort-box-actions .dropdown-menu button[disabled] {
+  display: none;
+}
+.sort-list-handle {
+  cursor: grab;
+}
 
 .activity-list-item {
-  padding: $-s 0;
+  padding: vars.$s 0;
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-column-gap: $-m;
+  grid-column-gap: vars.$m;
   font-size: 0.9em;
 }
 .card .activity-list-item {
-  padding: $-s $-m;
+  padding-block: vars.$s;
 }
 
 .user-list-item {
   display: inline-grid;
-  padding: $-s;
+  padding: vars.$s;
   grid-template-columns: min-content 1fr;
-  grid-column-gap: $-m;
+  grid-column-gap: vars.$m;
   font-size: 0.9em;
   align-items: center;
   > div:first-child {
@@ -326,13 +365,10 @@
 }
 
 ul.pagination {
-  display: inline-block;
+  display: inline-flex;
   list-style: none;
-  margin: $-m 0;
+  margin: vars.$m 0;
   padding-inline-start: 1px;
-  li {
-    float: left;
-  }
   li:first-child {
     a, span {
       border-radius: 3px 0 0 3px;
@@ -345,19 +381,19 @@ ul.pagination {
   }
   a, span {
     display: block;
-    padding: $-xxs $-s;
+    padding: vars.$xxs vars.$s;
     border: 1px solid #CCC;
     margin-inline-start: -1px;
     user-select: none;
-    @include lightDark(color, #555, #eee);
-    @include lightDark(border-color, #ccc, #666);
+    @include mixins.lightDark(color, #555, #eee);
+    @include mixins.lightDark(border-color, #ccc, #666);
   }
   li.disabled {
     cursor: not-allowed;
   }
   li.active span {
-    @include lightDark(color, #111, #eee);
-    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
+    @include mixins.lightDark(color, #111, #eee);
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
   }
 }
 
@@ -366,7 +402,7 @@ ul.pagination {
 }
 
 .entity-list, .icon-list {
-  margin: 0 (-$-m);
+  margin: 0 (-(vars.$m));
   h4 {
     margin: 0;
   }
@@ -376,7 +412,7 @@ ul.pagination {
   .text-small.text-muted {
     color: #AAA;
     font-size: 0.75em;
-    margin-top: $-xs;
+    margin-top: vars.$xs;
   }
   .text-muted p.text-muted {
     margin-top: 0;
@@ -391,7 +427,7 @@ ul.pagination {
 }
 
 .icon-list hr {
-  margin: $-s $-m;
+  margin: vars.$s vars.$m;
   max-width: 140px;
   opacity: 0.25;
   height: 1.1px;
@@ -402,10 +438,10 @@ ul.pagination {
 }
 
 .entity-list-item, .icon-list-item {
-  padding: $-s $-m;
+  padding: vars.$s vars.$m;
   display: flex;
   align-items: center;
-  gap: $-m;
+  gap: vars.$m;
   background-color: transparent;
   border: 0;
   width: 100%;
@@ -429,7 +465,7 @@ ul.pagination {
     cursor: pointer;
   }
   &:not(.no-hover):hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
     text-decoration: none;
     border-radius: 4px;
   }
@@ -437,7 +473,7 @@ ul.pagination {
     background-color: transparent;
   }
   &:focus {
-    @include lightDark(background-color, #eee, #222);
+    @include mixins.lightDark(background-color, #eee, #222);
     outline: 1px dotted #666;
     outline-offset: -2px;
   }
@@ -464,7 +500,7 @@ ul.pagination {
 .split-icon-list-item {
   display: flex;
   align-items: center;
-  gap: $-m;
+  gap: vars.$m;
   background-color: transparent;
   border: 0;
   width: 100%;
@@ -472,10 +508,10 @@ ul.pagination {
   word-break: break-word;
   border-radius: 4px;
   > a {
-    padding: $-s $-m;
+    padding: vars.$s vars.$m;
     display: flex;
     align-items: center;
-    gap: $-m;
+    gap: vars.$m;
     flex: 1;
   }
   > a:hover {
@@ -486,7 +522,7 @@ ul.pagination {
     flex: none;
   }
   &:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
 }
 
@@ -503,21 +539,21 @@ ul.pagination {
   visibility: visible;
 }
 .icon-list-item-dropdown-toggle {
-  padding: $-xs;
+  padding: vars.$xs;
   display: flex;
   align-items: center;
   cursor: pointer;
-  @include lightDark(color, #888, #999);
+  @include mixins.lightDark(color, #888, #999);
   svg {
     margin: 0;
   }
   &:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
 }
 
 .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
-  @include lightDark(background-color, #F2F2F2, #2d2d2d);
+  @include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);
   border-radius: 0;
 }
 .card .entity-list-item .entity-list-item:hover {
@@ -525,10 +561,10 @@ ul.pagination {
 }
 
 .entity-list-item-children {
-  padding: $-m $-l;
+  padding: vars.$m vars.$l;
   > div {
     overflow: hidden;
-    padding: 0 0 $-xs 0;
+    padding: 0 0 vars.$xs 0;
   }
   .entity-chip {
     text-overflow: ellipsis;
@@ -539,7 +575,7 @@ ul.pagination {
     white-space: nowrap;
   }
   > .entity-list > .entity-list-item:last-child {
-    margin-bottom: -$-xs;
+    margin-bottom: -(vars.$xs);
   }
 }
 
@@ -551,22 +587,22 @@ ul.pagination {
   background-position: 50% 50%;
   border-radius: 3px;
   position: relative;
-  margin-inline-end: $-l;
+  margin-inline-end: vars.$l;
 
   &.entity-list-item-image-wide {
     width: 220px;
   }
 
   .svg-icon {
-    @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+    @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
     font-size: 1.66rem;
     margin-inline-end: 0;
     position: absolute;
-    bottom: $-xs;
-    left: $-xs;
+    bottom: vars.$xs;
+    left: vars.$xs;
   }
 
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     width: 80px;
   }
 }
@@ -576,7 +612,7 @@ ul.pagination {
 }
 
 .entity-list.compact {
-  font-size: 0.6 * $fs-m;
+  font-size: 0.6 * vars.$fs-m;
   h4, a {
     line-height: 1.2;
   }
@@ -584,8 +620,8 @@ ul.pagination {
     display: none;
   }
   .entity-list-item p {
-    font-size: $fs-m * 0.8;
-    padding-top: $-xs;
+    font-size: vars.$fs-m * 0.8;
+    padding-top: vars.$xs;
   }
   .entity-list-item p:empty {
     padding-top: 0;
@@ -595,12 +631,12 @@ ul.pagination {
   }
   > p.empty-text {
     display: block;
-    font-size: $fs-m;
+    font-size: vars.$fs-m;
   }
   hr {
     margin: 0;
   }
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     h4 {
       font-size: 1.666em;
     }
@@ -630,21 +666,29 @@ ul.pagination {
   z-index: 999;
   top: 0;
   list-style: none;
-  right: 0;
-  margin: $-m 0;
-  @include lightDark(background-color, #fff, #333);
+  inset-inline-end: 0;
+  margin: vars.$m 0;
+  @include mixins.lightDark(background-color, #fff, #333);
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
   border-radius: 3px;
   min-width: 180px;
-  padding: $-xs 0;
-  @include lightDark(color, #555, #eee);
+  padding: vars.$xs 0;
+  @include mixins.lightDark(color, #555, #eee);
   fill: currentColor;
   text-align: start !important;
   max-height: 500px;
   overflow-y: auto;
+  &.anchor-left {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+  }
   &.wide {
     min-width: 220px;
   }
+  &.xl-limited {
+    width: 280px;
+    max-width: 100%;
+  }
   .text-muted {
     color: #999;
     fill: #999;
@@ -660,15 +704,20 @@ ul.pagination {
     border-bottom: 1px solid #DDD;
   }
   li hr {
-    margin: $-xs 0;
+    margin: vars.$xs 0;
   }
   .icon-item, .text-item, .label-item {
-    padding: 8px $-m;
-    @include lightDark(color, #555, #eee);
+    padding: 8px vars.$m;
+    @include mixins.lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
     line-height: 1.4;
     cursor: pointer;
+    &.break-text {
+      white-space: normal;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
     &:hover, &:focus {
       text-decoration: none;
       background-color: var(--color-primary-light);
@@ -679,7 +728,7 @@ ul.pagination {
       outline-offset: -2px;
     }
     svg {
-      margin-inline-end: $-s;
+      margin-inline-end: vars.$s;
       display: inline-block;
       width: 16px;
     }
@@ -691,7 +740,7 @@ ul.pagination {
     display: grid;
     align-items: center;
     grid-template-columns: auto min-content;
-    gap: $-m;
+    gap: vars.$m;
   }
   .label-item > *:nth-child(2) {
     opacity: 0.7;
@@ -703,7 +752,7 @@ ul.pagination {
     display: grid;
     align-items: start;
     grid-template-columns: 16px auto;
-    gap: $-m;
+    gap: vars.$m;
     svg {
       margin-inline-end: 0;
       margin-block-start: 1px;
@@ -715,7 +764,7 @@ ul.pagination {
 // being cut by scrollable container.
 .tri-layout-right .dropdown-menu,
 .tri-layout-left .dropdown-menu {
-  right: $-xs;
+  inset-inline-end: vars.$xs;
 }
 
 // Books grid view
@@ -739,7 +788,7 @@ ul.pagination {
 .featured-image-container-wrap {
   position: relative;
   .svg-icon {
-    @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+    @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
     font-size: 2rem;
     margin-inline-end: 0;
     position: absolute;
@@ -758,30 +807,30 @@ ul.pagination {
   background: transparent;
   border: none;
   color: currentColor;
-  padding: $-m 0;
+  padding: vars.$m 0;
 }
 
 .active-link-list {
   a {
     display: inline-block;
-    padding: $-s;
+    padding: vars.$s;
   }
   a:not(.active) {
-    @include lightDark(color, #444, #888);
+    @include mixins.lightDark(color, #444, #888);
   }
   a:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
     border-radius: 4px;
     text-decoration: none;
   }
   &.in-sidebar {
     a {
       display: block;
-      margin-bottom: $-xs;
+      margin-bottom: vars.$xs;
     }
     a.active {
       border-radius: 4px;
-      @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+      @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
     }
   }
 }
@@ -791,7 +840,7 @@ ul.pagination {
   line-height: 1.2;
   margin: 0.6em 0;
   align-content: start;
-  gap: $-s;
+  gap: vars.$s;
   a {
     line-height: 1.2;
   }