.view-details-sized(@size) { .item { .label, .date, .size { line-height: @size + 14px; } } .square { width: @size; height: @size; img { width: @size; height: @size; } } .label { margin: 0 246px 0 (@size + 32px); } } #view.view-details { margin: 16px; #items { .rounded(); box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2); } .header { position: relative; white-space: nowrap; display: list-item; background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.07); border-radius: 2px 2px 0 0; .label, .date, .size { line-height: 46px; opacity: 0.4; outline: 0; .transition(all 0.2s ease-in-out); &:hover { opacity: 1; color: @col-hover; } } .sort { display: none; position: relative; top: -2px; width: 20px; height: 20px; padding: 0 4px; } .ascending .sort { display: inline; } .descending .sort { display: inline; .transform(rotate(180deg)); } } .item { overflow: hidden; border-bottom: 1px solid rgba(0,0,0,0.07); &:hover { .raised(); z-index: 1; } &:last-child { border-radius: 0 0 2px 2px; } } .square { display: inline-block; position: absolute; left: 16px; top: -1px; padding: 8px; .thumb { .rounded(); box-shadow: 0 0 1px 0 rgba(0,0,0,0.2); } } .label, .date, .size { padding: 0 8px; } .date { position: absolute; right: 116px; top: 0; } .size { position: absolute; right: 16px; top: 0; } .view-details-sized(16px) }