.request-list { &-item { // Header Section // -------------- &-header { display: block; padding: .5em 1em; color: @request-item-active-color; background-color: @request-item-active-background; border: 1px solid @request-item-active-border-color; &:hover, &:active, &:focus { color: @request-item-active-color; text-decoration: none; } &.collapsed { background-color: @request-item-background; &:hover { background-color: @request-item-hover-background; } &:hover, &:active, &:focus { color: @request-item-color; } } &-row { display: block; & + & { margin-top: .4em; } } &-method, &-uri, &-type, &-timestamp, &-size, &-ip { display: inline-block; .icon { margin: 0 .2em; } } &-type, &-timestamp, &-size, &-ip { color: @request-item-secondary-color; font-size: @font-size-small; } &-method { font-weight: bold; } &-type, &-size { width: 30%; } &-ip, &-timestamp { float: right; } } // Detail section // -------------- &-detail { background-color: @request-detail-background; border: 1px solid @request-item-border-color; padding: 1em; &-headers { &:extend(.table all); &:extend(.table-bordered all); background: white; &-key { width: 30%; } } &-body { margin-bottom: 1em; } &-button { &:extend(.button all); &:extend(.button-brand all); display: block; margin-bottom: 1em; } } // Border overrides // ---------------- // Remove bottom border from header for all but last request-item. &:not(:last-child) &-header { border-bottom: 0; } // Remove top border from detail element for last request-item. &:last-child &-detail { border-top: 0; } // Remove bottom border from detail element for all but last request-item. &:not(:last-child) &-detail { border-bottom: 0; } } }