Merge #452

452: Remove !important from scss r=bidoubiwa a=ColinFrick

This removes all usages of `!important` from the scss.
Additionally it removes the inline styling for `left` and `right` from the dropdown element.

Closes #352 

Co-authored-by: Colin Frick <[email protected]>

Author: bors[bot]

src/lib/DocsSearchBar.js

@@ -135,6 +135,12 @@ class DocsSearchBar {
       },
     ])
 
+    // We remove the inline styles of the wrapper element for left / right
+    $(`.${this.autocompleteOptions.cssClasses.root} > [role='listbox']`).css({
+      left: false,
+      right: false,
+    })
+
     const customHandleSelected = handleSelected
     this.handleSelected = customHandleSelected || this.handleSelected
 

src/styles/_dropdown.scss

@@ -52,17 +52,17 @@
 // Alignment type
 @mixin alignment-type($type) {
   @if $type == 'left' {
-    left: 0 !important;
-    right: inherit !important;
+    left: 0;
+    right: inherit;
   }
   @if $type == 'right' {
-    right: 0 !important;
-    left: inherit !important;
+    right: 0;
+    left: inherit;
   }
   @if $type == 'center' {
-    left: 0 !important;
-    right: 0 !important;
-    margin: auto !important;
+    left: 0;
+    right: 0;
+    margin: auto;
   }
 }
 
@@ -473,7 +473,7 @@
 
         &--duplicate-content,
         &--subcategory-inline {
-          display: none !important;
+          display: none;
         }
 
         &--title {

src/styles/_searchbox.scss

@@ -45,10 +45,10 @@
     display: inline-block;
     position: relative;
     width: $input-width;
-    height: even-px($input-height) !important;
+    height: even-px($input-height);
     white-space: nowrap;
     box-sizing: border-box;
-    visibility: visible !important;
+    visibility: visible;
 
     .meilisearch-autocomplete {
       display: block;
@@ -71,7 +71,7 @@
       border: 0;
       border-radius: even-px($border-radius);
       box-shadow: inset 0 0 0 $border-width $input-border-color;
-      background: $input-background !important;
+      background: $input-background;
       padding: 0;
       padding-right: if(
           $icon-position == 'right',