fix(VTextField): css rules were applied to checkboxes in v-select menu (

#5595) fixes #5508
vuetifyjs · Dec 9, 2018 · 37c46b6 · 37c46b6
1 parent 993fa6d
commit 37c46b6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 64 deletions.
diff --git a/packages/vuetify/src/stylus/components/_inputs.styl b/packages/vuetify/src/stylus/components/_inputs.styl
@@ -100,14 +100,13 @@ theme(v-input, "v-input")
   &--is-disabled:not(.v-input--is-readonly)
     pointer-events: none
 
-  &--is-loading
-    .v-input__slot:before,
-    .v-input__slot:after
+  &--is-loading > .v-input__control > .v-input__slot
+    &:before,
+    &:after
       display: none
 
-  &--hide-details
-    .v-input__slot
-      margin-bottom: 0
+  &--hide-details > .v-input__control > .v-input__slot
+    margin-bottom: 0
 
   &--has-state
     &.error--text .v-label

diff --git a/packages/vuetify/src/stylus/components/_text-fields.styl b/packages/vuetify/src/stylus/components/_text-fields.styl
@@ -2,22 +2,20 @@
 @import '../theme'
 
 v-text-field($material)
-  .v-input__slot:before
+  & > .v-input__control > .v-input__slot:before
     border-color: $material.input-bottom-line
 
-  &:not(.v-input--has-state)
-    .v-input__slot:hover:before
-      border-color: $material.text.primary
+  &:not(.v-input--has-state) > .v-input__control > .v-input__slot:hover:before
+    border-color: $material.text.primary
 
-  &.v-input--is-disabled
-    .v-input__slot:before
-      border-image: repeating-linear-gradient(
-        to right,
-        $material.text.disabled 0px,
-        $material.text.disabled 2px,
-        transparent 2px,
-        transparent 4px
-      ) 1 repeat
+  &.v-input--is-disabled > .v-input__control > .v-input__slot:before
+    border-image: repeating-linear-gradient(
+      to right,
+      $material.text.disabled 0px,
+      $material.text.disabled 2px,
+      transparent 2px,
+      transparent 4px
+    ) 1 repeat
 
     .v-text-field__prefix,
     .v-text-field__suffix
@@ -27,25 +25,23 @@ v-text-field($material)
   &__suffix
     color: $material.text.secondary
 
-  &--solo
-    .v-input__slot
-      border-radius: 2px
-      background: $material.cards
+  &--solo > .v-input__control > .v-input__slot
+    border-radius: 2px
+    background: $material.cards
 
   &--solo-inverted.v-text-field--solo
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       background: rgba($material.inputs.solo-inverted)
 
-    &.v-input--is-focused
-      .v-input__slot
-        background: rgba($material.inputs.solo-inverted-focused)
+    &.v-input--is-focused > .v-input__control > .v-input__slot
+      background: rgba($material.inputs.solo-inverted-focused)
 
-        .v-label,
-        input
+      .v-label,
+      input
           color: $material.inputs.solo-inverted-focused-text
 
   &--box
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       background: $material.text-fields.box
 
     .v-text-field__prefix
@@ -59,18 +55,15 @@ v-text-field($material)
         margin-top: 22px
         transition: $primary-transition
 
-
-    &:not(.v-input--is-focused)
-      .v-input__slot:hover
-        background: $material.text-fields.box-hover
+    &:not(.v-input--is-focused) > .v-input__control > .v-input__slot:hover
+      background: $material.text-fields.box-hover
 
   &--outline
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       border: 2px solid $material.text.secondary
 
-    &:not(.v-input--is-focused):not(.v-input--has-state)
-      .v-input__slot:hover
-        border: 2px solid $material.text.primary
+    &:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot:hover
+      border: 2px solid $material.text.primary
 
 v-text-field-rtl()
   .v-label
@@ -215,7 +208,7 @@ rtl(v-text-field-rtl, "v-text-field")
       padding-left: 0
       padding-right: 4px
 
-  &__slot
+  & > .v-input__control > .v-input__slot
     display: flex
     flex: 1 1 auto
     position: relative
@@ -224,8 +217,9 @@ rtl(v-text-field-rtl, "v-text-field")
   &--outline
     position: relative
 
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       align-items: stretch
+      min-height: 56px
 
     input
       margin-top: 22px
@@ -240,17 +234,13 @@ rtl(v-text-field-rtl, "v-text-field")
       &--active
         transform: translateY(-6px) scale(.75)
 
-    .v-input__slot
-      min-height: 56px
+  &--box > .v-input__control > .v-input__slot
+    border-top-left-radius: 4px
+    border-top-right-radius: 4px
 
-  &--box
-    .v-input__slot
-      border-top-left-radius: 4px
-      border-top-right-radius: 4px
-
-      &:before
-        border-style: solid
-        border-width: thin 0 thin 0
+    &:before
+      border-style: solid
+      border-width: thin 0 thin 0
 
   &.v-text-field--enclosed
     margin: 0
@@ -267,7 +257,7 @@ rtl(v-text-field-rtl, "v-text-field")
       margin-top: 16px
 
     .v-text-field__details,
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       padding: 0 12px
 
     .v-text-field__details
@@ -299,14 +289,14 @@ rtl(v-text-field-rtl, "v-text-field")
     .v-label
       transform-origin: top right
 
-    .v-input__slot,
+    & > .v-input__control > .v-input__slot,
     .v-text-field__slot
       flex-direction: row-reverse
 
   &--solo,
   &--outline,
   &--full-width
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       &:before,
       &:after
         display: none
@@ -315,7 +305,7 @@ rtl(v-text-field-rtl, "v-text-field")
     margin-bottom: 16px
     transition: border $primary-transition
 
-    .v-input__slot
+    & > .v-input__control > .v-input__slot
       background: transparent !important
       border-radius: 4px
 
@@ -334,7 +324,7 @@ rtl(v-text-field-rtl, "v-text-field")
         transition: $primary-transition
 
     &.v-input--is-focused, &.v-input--has-state
-      .v-input__slot
+      & > .v-input__control > .v-input__slot
         border: 2px solid currentColor
         transition: border $primary-transition
 
@@ -346,9 +336,8 @@ rtl(v-text-field-rtl, "v-text-field")
       min-height: 48px
       padding: 0
 
-    &:not(.v-text-field--solo-flat)
-      .v-input__slot
-        elevation(2)
+    &:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot
+      elevation(2)
 
     .v-text-field__slot
       align-items: center
@@ -362,10 +351,8 @@ rtl(v-text-field-rtl, "v-text-field")
     .v-input__append-outer
       margin-top: 12px
 
-  &.v-input--is-focused
-    .v-input__slot:after
-      transform: scaleX(1)
+  &.v-input--is-focused > .v-input__control > .v-input__slot:after
+    transform: scaleX(1)
 
-  &.v-input--has-state
-    .v-input__slot:before
-      border-color: currentColor
+  &.v-input--has-state > .v-input__control > .v-input__slot:before
+    border-color: currentColor