Full width field in settings (#19454)

* added: full width field in settings

* removed fixed width for full width multi pair

* added: full width multi pair demo

1 files changed, 45 insertions, 28 deletions

diff --git a/plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less b/plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less
index 3a2f34c736..fbefc3e97e 100644
--- a/plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less
+++ b/plugins/CoreHome/vue/src/MultiPairField/MultiPairField.less
@@ -7,14 +7,13 @@
   }
 
   .multiPairFieldTable {
-    
+
     &.has1Fields {
       .fieldUiControl1{
-        width: ~"calc(100% - 60px)";
         padding-right: 0.75rem;
       }
     }
-  
+
     &:not(.has1Fields) {
       .fieldUiControl {
         display: inline-block;
@@ -23,38 +22,56 @@
     }
 
     &.has2Fields {
-      .fieldUiControl1 {
-        width: 160px;
-      }
       .fieldUiControl2 {
-        width: ~"calc(100% - 190px)";
         padding: 0.75rem;
       }
     }
-  
-    &.has3Fields {
-      .fieldUiControl1 {
-        width: 120px;
+  }
+
+  .icon-minus {
+    cursor: pointer;
+  }
+}
+
+.col.m6 {
+  .multiPairField {
+    .multiPairFieldTable {
+
+      &.has1Fields {
+        .fieldUiControl1{
+          width: ~"calc(100% - 60px)";
+        }
       }
-      .fieldUiControl2,
-      .fieldUiControl3 {
-        width: 220px;
+
+      &.has2Fields {
+        .fieldUiControl1 {
+          width: 160px;
+        }
+        .fieldUiControl2 {
+          width: ~"calc(100% - 190px)";
+        }
       }
-    }
-  
-    &.has4Fields {
-      .fieldUiControl1 {
-        width: 120px;
+
+      &.has3Fields {
+        .fieldUiControl1 {
+          width: 120px;
+        }
+        .fieldUiControl2,
+        .fieldUiControl3 {
+          width: 220px;
+        }
       }
-      .fieldUiControl2,
-      .fieldUiControl3,
-      .fieldUiControl4 {
-        width: 148px;
+
+      &.has4Fields {
+        .fieldUiControl1 {
+          width: 120px;
+        }
+        .fieldUiControl2,
+        .fieldUiControl3,
+        .fieldUiControl4 {
+          width: 148px;
+        }
       }
     }
   }
-
-  .icon-minus {
-    cursor: pointer;
-  }
-}
\ No newline at end of file
+}