.files-view { .table; .table-hover; background: #fff; white-space: pre; td:nth-child(1) { width: 80px; border-right: 1px solid #ddd; border-left: 1px solid #ddd; } td:nth-child(2) { width: 28px; } td:nth-child(4) { width: 180px; } td:nth-child(5) { width: 80px; border-right: 1px solid #ddd; } .folder { cursor: pointer; } .glyphicon { margin-right: 10px; } } .files-view-pathctrl { border: 1px solid #ccc; padding: 7px 10px 6px 10px; background: #fafafa; position: relative; left: -4px; top: 2px; border-left: 0; border-top-right-radius: 5px; border-bottom-right-radius: 5px; box-shadow: inset 2px 0 3px rgba(0,0,0,0.15); color: #666; } .files-view-changes { margin: 0 0 12px; & > div { display: flex; & > div { overflow: hidden; text-overflow: ellipsis; border-top: 1px solid; border-right: 1px solid; padding: 5px; &:first-child { border-left: 1px solid; } } &:last-child > div { border-bottom: 1px solid; } } .action { flex: 0 0 30px; font-weight: bold; text-align: center; } .path { flex: 1; } .size { flex: 0 0 80px; } .type { flex: 0 0 180px; } .add { background: #efe; color: green; } .mod { background: #eef; color: blue; } .del { background: #fee; color: red; } }