Interactive GRID | Windows List View Style – Checkbox visible on hover

Referred from John’s cookbook sample app.

  • Interactive GRID
  • Appearance
  • CSS Classes – ig-windows-style
  • Page Inline CSS
.ig-windows-style .a-GV-table .a-GV-cell,
.ig-windows-style .a-GV-table .a-GV-controlBreakHeader {
    border-color: transparent;
}
.ig-windows-style .a-GV-w-frozen .a-GV-table {
    border-right: none;
}
.ig-windows-style .a-GV-table tr.is-hover .a-GV-cell,
.ig-windows-style .a-GV-table tr.is-hover.is-selected .a-GV-cell {
    background-color: #f2f6ff;
}
.ig-windows-style .a-GV-table tr.is-selected .a-GV-cell,
.ig-windows-style .a-GV-table tr.is-hover.is-selected .a-GV-cell {
    background-color: #dbe8ff;
}
.ig-windows-style .a-GV-hdr {
    background-color: #fcfcfc;
}
.a-IG-contentContainer {
    margin-top: 0;
}

.ig-windows-style .u-selector {
    box-shadow: none;
    border: 1px transparent;
}

.ig-windows-style .a-GV-hdr tr .u-selector,
.ig-windows-style tr.is-selected .u-selector,
.ig-windows-style tr.is-hover .u-selector {
    box-shadow: 0 1px 1px rgba(0,0,0,.05) inset;
    border: 1px solid #404040;
}


Referenced/Copied from John’s Cookbook

We can refer above CSS snippet for other CSS tricks in GRID.