feat(QSelect): Adjust CSS for QSelect with chips

pdanpdan · May 4, 2023 · 9a83281 · 9a83281
1 parent e638fce
commit 9a83281
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