fix(b-dropdown-form): fix SCSS styling when placed in a nav dropdown (f…

…ixes #4220) (#4223)
bootstrap-vue · Oct 9, 2019 · b852bba · b852bba
1 parent 9f216df
commit b852bba
Showing 1 changed file with 25 additions and 27 deletions.
diff --git a/src/components/dropdown/_dropdown-form.scss b/src/components/dropdown/_dropdown-form.scss
@@ -6,35 +6,33 @@ $bv-dropdown-form-defined: false !default;
 
   // Custom styles for <b-dropdown-form>
   // Based on class `.dropdown-item`
-  .dropdown.b-dropdown {
-    .b-dropdown-form {
-      display: inline-block;
-      padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-      width: 100%;
-      clear: both;
-      font-weight: $font-weight-normal;
+  .b-dropdown-form {
+    display: inline-block;
+    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+    width: 100%;
+    clear: both;
+    font-weight: $font-weight-normal;
 
-      &:focus {
-        // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
-        // mimicking button:focus styling.
-        // We add important here as anything with tabindex `-1` and focused will not
-        // have a focus ring due to reboot.scss and it's `!important` override.
-        // Needed for keyboard navigation high-lighting
-        outline: 1px dotted !important;
-        outline: 5px auto -webkit-focus-ring-color !important;
-      }
+    &:focus {
+      // From https://github.com/twbs/bootstrap/blob/master/scss/_reboot.scss
+      // mimicking button:focus styling.
+      // We add important here as anything with tabindex `-1` and focused will not
+      // have a focus ring due to reboot.scss and it's `!important` override.
+      // Needed for keyboard navigation high-lighting
+      outline: 1px dotted !important;
+      outline: 5px auto -webkit-focus-ring-color !important;
+    }
 
-      &.disabled,
-      &:disabled {
-        outline: 0 !important;
-        color: $dropdown-link-disabled-color;
-        pointer-events: none;
-        // background-color: transparent;
-        // Remove CSS gradients if they're enabled
-        // @if $enable-gradients {
-        //   background-image: none;
-        // }
-      }
+    &.disabled,
+    &:disabled {
+      outline: 0 !important;
+      color: $dropdown-link-disabled-color;
+      pointer-events: none;
+      // background-color: transparent;
+      // Remove CSS gradients if they're enabled
+      // @if $enable-gradients {
+      //   background-image: none;
+      // }
     }
   }
 }