Fix toggle preview in structure field #2291

getkirby · Nov 26, 2019 · f156a7c · f156a7c
1 parent 8dd31b0
commit f156a7c
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/panel/src/components/Forms/Field/StructureField.vue b/panel/src/components/Forms/Field/StructureField.vue
@@ -675,6 +675,10 @@ $structure-item-height: 38px;
       text-align: left;
     }
   }
+  .k-structure-table-column[data-align="right"] > .k-input {
+    flex-direction: column;
+    align-items: flex-end;
+  }
 
   /* column widths */
   .k-structure-table-column[data-width="1/2"] {

diff --git a/panel/src/components/Forms/Previews/ToggleFieldPreview.vue b/panel/src/components/Forms/Previews/ToggleFieldPreview.vue
@@ -25,14 +25,34 @@ export default {
 
 <style lang="scss">
 .k-toggle-field-preview label {
-  padding: 0 .25rem 0 .75rem;
+  [dir="ltr"] & {
+    padding: 0 .25rem 0 .75rem;
+  }
+
+  [dir="rtl"] & {
+    padding: 0 .75rem 0 .25rem;
+  }
+
+  [data-align="right"] & {
+    padding: 0 .25rem 0 .75rem;
+  }
+
   display: flex;
   height: 38px;
   cursor: pointer;
   overflow: hidden;
   white-space: nowrap;
 }
 .k-toggle-field-preview .k-toggle-input-label {
-  padding-left: .5rem;
+  [dir="ltr"] & {
+    padding-left: .5rem;
+  }
+
+  [dir="rtl"] & {
+    padding-right: .5rem;
+  }
+}
+[data-align="right"] > .k-toggle-field-preview .k-toggle-input-label {
+  padding-right: .5rem;
 }
 </style>