fix(datatable): add padding so search clear button doesn't obstruct t…

…ext (#5145)
carbon-design-system · Jan 27, 2020 · c39173f · c39173f
1 parent f03a0a1
commit c39173f
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/packages/components/src/components/data-table/_data-table-action.scss b/packages/components/src/components/data-table/_data-table-action.scss
@@ -123,6 +123,12 @@
  }
  }
 
+ .#{$prefix}--toolbar-search-container-expandable
+ .#{$prefix}--search
+ .#{$prefix}--search-close:focus::before {
+ background-color: $focus;
+ }
+
  //-------------------------------------------------
  //ACTIVE SEARCH - DEFAULT TOOLBAR
  //-------------------------------------------------
@@ -141,7 +147,7 @@
  .#{$prefix}--toolbar-search-container-active
  .#{$prefix}--search
  .#{$prefix}--search-input {
- padding-left: $spacing-09;
+ padding: 0 $spacing-09;
  visibility: inherit;
  }
 
@@ -197,6 +203,11 @@
  background-color: transparent;
  }
 
+ .#{$prefix}--toolbar-search-container-persistent
+ .#{$prefix}--search-close::before {
+ display: none;
+ }
+
  //-------------------------------------------------
  //TOOLBAR BUTTONS
  //-------------------------------------------------
@@ -296,7 +307,7 @@
  .#{$prefix}--search
  .#{$prefix}--search-input {
  height: $layout-04;
- padding-left: $spacing-09;
+ padding: 0 $spacing-09;
  border: none;
  }
 
@@ -513,7 +524,7 @@
  .#{$prefix}--toolbar-search-container-expandable
  .#{$prefix}--search
  .#{$prefix}--search-input {
- padding-left: $spacing-xl;
+ padding: 0 $spacing-09;
  }
 
  //active