New: Add support for vertical accordion items and custom title icons (f…

…ixes #529) (#530) * Add support for vertical accordion items and custom title icons * Moved structural vertical styles to plugin * Updated class name
adaptlearning · Nov 20, 2024 · f70bd70 · f70bd70
1 parent 324b1fa
commit f70bd70
Showing 1 changed file with 29 additions and 2 deletions.
diff --git a/less/plugins/adapt-contrib-accordion/accordion.less b/less/plugins/adapt-contrib-accordion/accordion.less
@@ -5,7 +5,8 @@
     position: relative;
     padding-top: @item-padding;
     padding-bottom: @item-padding;
-    padding-inline: @item-padding (@icon-size + (@item-padding * 2));
+    padding-inline-start: @item-padding;
+    padding-inline-end: @icon-size + (@item-padding * 2);
     text-align: start;
     background-color: @item-color;
     color: @item-color-inverted;
@@ -18,6 +19,10 @@
     }
   }
 
+  &__btn.has-title-icon {
+    padding-inline-start: @icon-size + (@item-padding * 2);
+  }
+
   &__btn.is-visited {
     background-color: @visited;
     color: @visited-inverted;
@@ -28,7 +33,19 @@
     color: @item-color-inverted-selected;
   }
 
-  &__icon {
+  &:not(.is-center-aligned) &__title-icon {
+    position: absolute;
+    top: 50%;
+    left: @item-padding;
+    .transform(translateY(-50%));
+
+    .dir-rtl & {
+      left: inherit;
+      right: @item-padding;
+    }
+  }
+
+  &:not(.is-center-aligned) &__icon {
     position: absolute;
     top: 50%;
     right: @item-padding;
@@ -52,4 +69,14 @@
   &.has-img-zoom &__image-container {
     .img-zoom();
   }
+
+  // vertical items
+  &.is-center-aligned &__btn {
+    padding-inline: @item-padding;
+  }
+
+  &.is-center-aligned &__title-icon,
+  &.is-center-aligned &__title {
+    padding-bottom: @icon-padding / 2;
+  }
 }