feat(select/text-field): added new functionality, **solo-inverted**

produces a lower opacity background and inverts color on focus, similar to Google Keep/Contacts

src/components/VSelect/VSelect.js

@@ -1,3 +1,4 @@
+// Styles
 require('../../stylus/components/_text-fields.styl')
 require('../../stylus/components/_input-groups.styl')
 require('../../stylus/components/_select.styl')
@@ -22,6 +23,7 @@ import Dependent from '../../mixins/dependent'
 import Filterable from '../../mixins/filterable'
 import Input from '../../mixins/input'
 import Maskable from '../../mixins/maskable'
+import Soloable from '../../mixins/soloable'
 
 // Component level mixins
 import Autocomplete from './mixins/select-autocomplete'
@@ -70,6 +72,7 @@ export default {
     Maskable,
     Menu,
     Props,
+    Soloable,
     Watchers,
     // Input and Computed both
     // contain isDirty props

src/components/VSelect/mixins/select-computed.js

@@ -10,6 +10,7 @@ export default {
   computed: {
     classes () {
       const classes = {
+        ...this.genSoloClasses(),
         'input-group--text-field input-group--select': true,
         'input-group--auto': this.auto,
         'input-group--overflow': this.overflow,
@@ -19,7 +20,6 @@ export default {
         'input-group--single-line': this.singleLine || this.isDropdown,
         'input-group--multi-line': this.multiLine,
         'input-group--chips': this.chips,
-        'input-group--solo': this.solo,
         'input-group--multiple': this.multiple,
         'input-group--open': this.menuIsVisible
       }
@@ -88,7 +88,7 @@ export default {
         (this.isAutocomplete && this.searchValue)
     },
     isDropdown () {
-      return this.segmented || this.overflow || this.editable || this.solo
+      return this.segmented || this.overflow || this.editable || this.isSolo
     },
     isMultiple () {
       return this.multiple || this.tags
@@ -109,7 +109,7 @@ export default {
     nudgeTop () {
       let nudgeTop = -18
 
-      if (this.solo) nudgeTop = 0
+      if (this.isSolo) nudgeTop = 0
       else if (this.shouldOffset) {
         nudgeTop += 44
 

src/components/VSelect/mixins/select-props.js

@@ -63,7 +63,6 @@ export default {
     },
     segmented: Boolean,
     singleLine: Boolean,
-    solo: Boolean,
     tags: Boolean,
     valueComparator: {
       type: Function,

src/components/VTextField/VTextField.js

@@ -1,15 +1,23 @@
+// Styles
 require('../../stylus/components/_input-groups.styl')
 require('../../stylus/components/_text-fields.styl')
 
+// Mixins
 import Colorable from '../../mixins/colorable'
 import Input from '../../mixins/input'
 import Maskable from '../../mixins/maskable'
+import Soloable from '../../mixins/soloable'
 import { isMaskDelimiter } from '../../util/mask'
 
 export default {
   name: 'v-text-field',
 
-  mixins: [Colorable, Input, Maskable],
+  mixins: [
+    Colorable,
+    Input,
+    Maskable,
+    Soloable
+  ],
 
   inheritAttrs: false,
 
@@ -41,7 +49,6 @@ export default {
       default: 5
     },
     singleLine: Boolean,
-    solo: Boolean,
     suffix: String,
     textarea: Boolean,
     type: {
@@ -53,10 +60,10 @@ export default {
   computed: {
     classes () {
       const classes = {
+        ...this.genSoloClasses(),
         'input-group--text-field': true,
         'input-group--text-field-box': this.box,
-        'input-group--single-line': this.singleLine || this.solo,
-        'input-group--solo': this.solo,
+        'input-group--single-line': this.singleLine || this.isSolo,
         'input-group--multi-line': this.multiLine,
         'input-group--full-width': this.fullWidth,
         'input-group--prefix': this.prefix,

src/mixins/soloable.js

@@ -0,0 +1,23 @@
+export default {
+  props: {
+    flat: Boolean,
+    soloInverted: Boolean,
+    solo: Boolean
+  },
+
+  computed: {
+    isSolo () {
+      return this.solo || this.soloInverted
+    }
+  },
+
+  methods: {
+    genSoloClasses () {
+      return {
+        'input-group--solo': this.isSolo,
+        'input-group--solo-inverted': this.soloInverted,
+        'elevation-0': this.flat
+      }
+    }
+  }
+}

src/stylus/components/_input-groups.styl

@@ -22,7 +22,6 @@ input-group($material)
 
   &.input-group--solo-inverted
     background: rgba($material.inputs.solo-inverted)
-    transition: 0.3s cubic-bezier(0.4, 0, 0.6, 1)
 
     &.input-group--focused
       background: rgba($material.inputs.solo-inverted-focused)
@@ -163,7 +162,6 @@ theme(input-group, "input-group")
 
   .input-group__append-icon
     padding: 0 6px
-    transition: .3s $transition.ease-in-out
 
   .input-group__append-icon,
   .input-group__prepend-icon
@@ -184,6 +182,7 @@ theme(input-group, "input-group")
     min-height: 46px
     border-radius: $card-border-radius
     padding: 0
+    transition: $primary-transition
     elevation(2)
 
     label

src/stylus/components/_text-fields.styl

@@ -24,6 +24,11 @@ theme(textfield, "input-group--text-field")
 
 /** Input */
 .input-group--text-field
+  // TODO: Revisit in 1.1 refactor
+  // Input was mis-aligned by 1px
+  input
+    padding-bottom: 1px
+
   input,
   textarea
     font-size: $input-font-size
@@ -105,7 +110,6 @@ theme(textfield, "input-group--text-field")
       display: flex
       justify-content: flex-start
       min-width: 40px
-      transition: .3s $transition.fast-in-fast-out
 
     .input-group__details
       margin-left: auto

src/stylus/settings/_theme.styl

@@ -33,6 +33,11 @@ $material-light := {
     active: rgba(#000, .54),
     inactive: rgba(#000, .38)
   },
+  inputs: {
+    solo-inverted: rgba(#000, .16),
+    solo-inverted-focused: #424242,
+    solo-inverted-focused-text: #fff
+  },
   buttons: {
     disabled: rgba(#000, .26),
     focused: rgba(#000, .12),
@@ -112,6 +117,11 @@ $material-dark := {
     active: #fff,
     inactive: rgba(#fff, .5)
   },
+  inputs: {
+    solo-inverted: rgba(#fff, .16),
+    solo-inverted-focused: #fff,
+    solo-inverted-focused-text: $material-light.text.primary
+  },
   buttons: {
     disabled: rgba(#fff, .3),
     focused: rgba(#fff, .12),