feat(quasar): Adjust CSS for QSelect with chips

pdanpdan · Jul 9, 2019 · df418f8 · df418f8
1 parent 4352bab
commit df418f8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
@@ -145,7 +145,7 @@ export default Vue.extend({
 
   computed: {
     fieldClass () {
-      return `q-select q-field--auto-height q-select--with${this.useInput !== true ? 'out' : ''}-input`
+      return `q-select q-field--auto-height q-select--with${this.useInput !== true ? 'out' : ''}-input${this.useChips === true ? ' q-select--with-chips' : ''}`
     },
 
     menuClass () {

diff --git a/ui/src/components/select/select.styl b/ui/src/components/select/select.styl
@@ -6,6 +6,27 @@
     .q-field__control
       cursor text
 
+  &--with-chips
+    .q-select__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-select__input
+        margin 2px 0
+
+      &.q-field--labeled
+        .q-field__native
+          margin-top 0
+
   &__input
     border 0
     outline 0 !important // needed for FF