Change selected color of table row

How do I change the default v.selected color in a given table.
I tried to add a copy from the Chrome developer tools and added the style rule to my dashboard.scss file and deploy. Nothing happen. Any Ideas.


.halo .view-table [class*="-row"].v-selected {
    background-color: white;
    //background-image: -webkit-linear-gradient(top,#4263a4 2%,#2f4982 98%);
    //background-image: linear-gradient(to bottom,#4263a4 2%,#2f4982 98%);
    background-origin: border-box;
    color: black;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
  }

Hi!
I’ve prepared an example for you. Let’s imagine that we have a table that has “employee-table” style name (you can set this style name in xml screen descriptor or via the addStyleName() method).
To override default background color we should add the following lines to our SCSS file:

.employees-table {
  .v-table-row,
  .v-table-row-odd {
    &.v-selected {
      background-color: red;
      background-image: none;
    }
  }
}

In addition, we should override default cell border color and selected row outline. So the final stylesheet will be:

.employees-table {
  .v-table-row,
  .v-table-row-odd {
    &.v-selected {
      background-color: red;
      background-image: none;

      .v-table-cell-content {
        border-left-color: #a70101;
      }

      .v-table-cell-content:first-child {
        border-left-color: transparent;
      }
    }

    &.v-table-focus {
      outline: 1px solid #a70101;
    }
  }
}