Add updated table styles

  - Refer below link for styles:
      https://ibm.invisionapp.com/share/D8O06PPE32B#/screens

Signed-off-by: Sukanya Pandey <[email protected]>
Change-Id: I6dcc3b8d0fb7ef19388b5bfeaf87fce78725b638

Author: Sukanya Pandey

src/assets/styles/bmc/custom/_tables.scss

@@ -17,6 +17,9 @@
   .thead-light th {
     border: none;
     color: theme-color("dark");
+    &:focus {
+      outline: none;
+    }
   }
 
   .status-icon svg {
@@ -60,6 +63,17 @@
       fill: theme-color("dark");
     }
   }
+  .b-table-sort-icon-left {
+    background-position: left calc(1.5rem / 2) center !important;
+    padding-left: calc(1.2rem + 0.65em) !important;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
+    }
+    &:hover {
+      background-color: theme-color-dark('light');
+    }
+  }
 }
 
 .b-table-sticky-header td {

src/assets/styles/bmc/helpers/_functions.scss

@@ -2,4 +2,8 @@
 // theme variant color to use as a background color
 @function theme-color-light($variant) {
   @return theme-color-level($variant, -11.3);
+}
+
+@function theme-color-dark($variant) {
+  @return theme-color-level($variant, 2);
 }

src/views/AccessControl/Ldap/TableRoleGroups.vue

@@ -34,6 +34,7 @@
           selectable
           show-empty
           no-select-on-click
+          hover
           no-sort-reset
           sort-icon-left
           :items="tableItems"

src/views/AccessControl/LocalUserManagement/LocalUserManagement.vue

@@ -32,6 +32,7 @@
           selectable
           show-empty
           no-select-on-click
+          hover
           :fields="fields"
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"

src/views/AccessControl/LocalUserManagement/TableRoles.vue

@@ -1,5 +1,5 @@
 <template>
-  <b-table stacked="sm" small :items="items" :fields="fields">
+  <b-table stacked="sm" hover small :items="items" :fields="fields">
     <template v-slot:cell(administrator)="data">
       <template v-if="data.value">
         <checkmark20 />

src/views/AccessControl/SslCertificates/SslCertificates.vue

@@ -56,6 +56,7 @@
         <b-table
           responsive="md"
           show-empty
+          hover
           :fields="fields"
           :items="tableItems"
           :empty-text="$t('global.table.emptyMessage')"

src/views/Configuration/NetworkSettings/NetworkSettings.vue

@@ -104,6 +104,7 @@
             <b-col lg="9" class="mb-3">
               <b-table
                 responsive="md"
+                hover
                 :fields="ipv4StaticTableFields"
                 :items="form.ipv4StaticTableItems"
                 class="mb-0"
@@ -217,6 +218,7 @@
             <b-col lg="4" class="mb-3">
               <b-table
                 responsive
+                hover
                 :fields="dnsTableFields"
                 :items="form.dnsStaticTableItems"
                 class="mb-0"

src/views/Health/EventLogs/EventLogs.vue

@@ -47,6 +47,7 @@
           selectable
           no-select-on-click
           sort-icon-left
+          hover
           no-sort-reset
           sort-desc
           show-empty

src/views/Health/HardwareStatus/HardwareStatusTableBmcManager.vue

@@ -2,6 +2,7 @@
   <page-section :section-title="$t('pageHardwareStatus.bmcManager')">
     <b-table
       responsive="md"
+      hover
       :items="items"
       :fields="fields"
       show-empty

src/views/Health/HardwareStatus/HardwareStatusTableChassis.vue

@@ -2,6 +2,7 @@
   <page-section :section-title="$t('pageHardwareStatus.chassis')">
     <b-table
       responsive="md"
+      hover
       :items="chassis"
       :fields="fields"
       show-empty