.TableComponent { .octo-table-cell { flex: 0 0 auto; display: flex; flex-direction: row; color: rgb(var(--main-fg)); border-right: solid 1px rgba(var(--main-fg), 0.09); box-sizing: border-box; padding: 5px 8px 6px 8px; min-height: 32px; font-size: 14px; line-height: 21px; position: relative; .octo-icontitle { flex: 1 1 auto; .octo-icon { min-width: 20px; } .Editable { flex: 1 1 auto; } } &.header-cell { padding-right: 0; } &:focus-within { background-color: rgba(46, 170, 220, 0.15); border: 1px solid rgba(46, 170, 220, 0.6); } .octo-editable { padding: 0 5px; display: relative; left: -5px; } .octo-editable.octo-editable.active { overflow: hidden; } .octo-propertyvalue { line-height: 17px; } .octo-editable, .octo-propertyvalue { text-align: left; white-space: nowrap; } } .octo-table-body { display: flex; flex-direction: column; padding: 0 10px; } .octo-table-header, .octo-table-row, .octo-table-footer { display: flex; flex-direction: row; border-bottom: solid 1px rgba(var(--main-fg), 0.09); } .octo-table-header { .octo-table-cell { color: rgba(var(--main-fg), 0.6); .octo-label { color: rgba(var(--main-fg), 0.6); } } } .octo-table-footer { .octo-table-cell { color: rgba(var(--main-fg), 0.6); cursor: pointer; width: 100%; border-right: none; padding-left: 15px; &:hover { background-color: rgba(var(--main-fg), 0.08); } } } }