fix(data-table-v2): update data-table-v2 styles (#388)

carbon-design-system · Oct 26, 2017 · e7a2c60 · e7a2c60
1 parent 2687daf
commit e7a2c60
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 26 deletions.
diff --git a/src/components/data-table-v2/_data-table-v2-action.scss b/src/components/data-table-v2/_data-table-v2-action.scss
@@ -1,5 +1,6 @@
 .bx--table-toolbar {
   display: flex;
+  padding-top: rem(8px);
   padding-bottom: rem(8px);
   width: 100%;
   position: relative;
@@ -59,6 +60,7 @@
   width: auto;
   max-width: 16px;
   fill: $ui-05;
+  transition: $transition--base;
 }
 
 .bx--batch-actions {

diff --git a/src/components/data-table-v2/_data-table-v2-core.scss b/src/components/data-table-v2/_data-table-v2-core.scss
@@ -39,6 +39,10 @@
           border-right: 1px solid $brand-01;
         }
       }
+
+      .bx--overflow-menu {
+        opacity: 1;
+      }
     }
   }
 
@@ -50,7 +54,6 @@
   td {
     border-top: 1px solid $ui-04;
     padding-left: rem(12px);
-    padding-right: rem(12px);
     vertical-align: middle;
     text-align: left;
 
@@ -70,14 +73,6 @@
     margin-right: 0;
   }
 
-  .bx--table-overflow {
-    &:hover {
-      .bx--overflow-menu {
-        opacity: 1;
-      }
-    }
-  }
-
   .bx--overflow-menu {
     opacity: 0;
 

diff --git a/src/components/data-table-v2/data-table-v2--pagination.html b/src/components/data-table-v2/data-table-v2--pagination.html
@@ -16,21 +16,22 @@
 
     <div class="bx--toolbar-content">
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-          <path d="M19 9.4l-1.2-1.1L13 13V0h-2v13L6.2 8.3 5 9.4l7 6.6z"></path>
-          <path d="M22 14v6H2v-6H0v10H24V14z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
+          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
         </svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="29" height="29" viewBox="0 0 29 29" fill-rule="evenodd">
-          <path d="M20.297 2.932l2.9-2.9 5.806 5.805-2.9 2.9zM3.867 19.385l5.8 5.807 14.5-14.517-5.8-5.806-14.5 14.516zm5.8 3.069L6.6 19.385 18.367 7.607l3.066 3.068L9.667 22.454zM0 29.063l4.833-1.936-2.9-2.903z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
         </svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-          <path d="M21.2 12c0-.5 0-1-.1-1.4L24 8l-2.5-4.1L18 5.1c-.8-.7-1.8-1.3-2.9-1.7L14.4 0H9.6l-.8 3.4c-1.1.4-2 1-2.9 1.7L2.5 3.9 0 8l2.9 2.6c-.1.4-.1.9-.1 1.4 0 .5 0 1 .1 1.4L0 16l2.5 4.1L6 18.9c.8.7 1.8 1.3 2.9 1.7l.7 3.4h4.8l.8-3.4c1.1-.4 2-1 2.9-1.7l3.5 1.1 2.4-4-2.9-2.6c.1-.4.1-.9.1-1.4zM12 15c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+          />
         </svg>
       </button>
 
@@ -406,4 +407,4 @@
       </svg>
     </button>
   </div>
-</div>
+</div>
diff --git a/src/components/data-table-v2/data-table-v2.html b/src/components/data-table-v2/data-table-v2.html
@@ -16,21 +16,22 @@
 
     <div class="bx--toolbar-content">
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-          <path d="M19 9.4l-1.2-1.1L13 13V0h-2v13L6.2 8.3 5 9.4l7 6.6z"></path>
-          <path d="M22 14v6H2v-6H0v10H24V14z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
+          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
         </svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="29" height="29" viewBox="0 0 29 29" fill-rule="evenodd">
-          <path d="M20.297 2.932l2.9-2.9 5.806 5.805-2.9 2.9zM3.867 19.385l5.8 5.807 14.5-14.517-5.8-5.806-14.5 14.516zm5.8 3.069L6.6 19.385 18.367 7.607l3.066 3.068L9.667 22.454zM0 29.063l4.833-1.936-2.9-2.903z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
         </svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-          <path d="M21.2 12c0-.5 0-1-.1-1.4L24 8l-2.5-4.1L18 5.1c-.8-.7-1.8-1.3-2.9-1.7L14.4 0H9.6l-.8 3.4c-1.1.4-2 1-2.9 1.7L2.5 3.9 0 8l2.9 2.6c-.1.4-.1.9-.1 1.4 0 .5 0 1 .1 1.4L0 16l2.5 4.1L6 18.9c.8.7 1.8 1.3 2.9 1.7l.7 3.4h4.8l.8-3.4c1.1-.4 2-1 2.9-1.7l3.5 1.1 2.4-4-2.9-2.6c.1-.4.1-.9.1-1.4zM12 15c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
+        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
+          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+          />
         </svg>
       </button>
 
@@ -355,4 +356,4 @@
       </tr>
     </tbody>
   </table>
-</div>
+</div>
diff --git a/src/components/pagination/_pagination.scss b/src/components/pagination/_pagination.scss
@@ -52,7 +52,7 @@ $css--helpers: true;
   .bx--pagination__button-icon {
     height: rem(12px);
     width: rem(12px);
-    fill: $text-02;
+    fill: $ui-05;
     pointer-events: none;
     transition: $transition--base;
   }