feat(QSelect): Adjust CSS for QSelect with chips

pdanpdan · Mar 31, 2023 · 6adf20d · 6adf20d
1 parent df3b657
commit 6adf20d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/ui/src/components/select/QSelect.sass b/ui/src/components/select/QSelect.sass
@@ -6,6 +6,27 @@
     .q-field__control
       cursor: text
 
+  &--with-chips
+    .q-field__input
+      margin: 7px 0
+
+    &.q-field--labeled
+      .q-field__native
+        margin-top: -6px
+        padding-bottom: 0
+
+    &.q-field--dense
+      .q-chip--dense
+        margin: 1px 4px
+        height: 20px
+
+      .q-field__input
+        margin: 0
+
+      &.q-field--labeled
+        .q-field__native
+          margin-top: 0
+
   .q-field__input
     min-width: 50px !important
     cursor: text

diff --git a/ui/src/components/select/QSelect.styl b/ui/src/components/select/QSelect.styl
@@ -6,6 +6,27 @@
     .q-field__control
       cursor: text
 
+  &--with-chips
+    .q-field__input
+      margin: 7px 0
+
+    &.q-field--labeled
+      .q-field__native
+        margin-top: -6px
+        padding-bottom: 0
+
+    &.q-field--dense
+      .q-chip--dense
+        margin: 1px 4px
+        height: 20px
+
+      .q-field__input
+        margin: 0
+
+      &.q-field--labeled
+        .q-field__native
+          margin-top: 0
+
   .q-field__input
     min-width: 50px !important
     cursor: text