diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius index c847f086e..221f5d231 100644 --- a/templates/default-layout.lucius +++ b/templates/default-layout.lucius @@ -254,3 +254,79 @@ a.btn.btn-info:hover, .btn.btn-info:hover { background-color: var(--color-grey) } + +/* GENERAL TABLE STYLES */ +.table { + margin: 21px 0; + width: 100%; +} + +.table--striped { + + .table__row:not(.no-stripe):nth-child(even) { + background-color: rgba(0, 0, 0, 0.03); + } +} + +.table--hover { + + .table__row:not(.no-hover):not(.table__row--head):hover { + background-color: rgba(0, 0, 0, 0.07); + } +} + +/* TABLE DESIGN */ +.table__row { + + /* TODO: move outside of table__row as soon as tds and ths get their own class */ + /* .table__td, .table__th { */ + td, th { + padding-top: 14px; + padding-bottom: 10px; + padding-left: 10px; + padding-right: 10px; + max-width: 300px; + } + + /* .table__td { */ + td { + font-size: 16px; + color: #808080; + line-height: 1.4; + vertical-align: top; + } + + /* .table__th { */ + th { + background-color: var(--color-dark); + position: relative; + font-size: 16px; + color: #fff; + line-height: 1.4; + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; + text-align: left; + } +} + +@media (max-width: 1200px) { + + .table th { + padding: 4px 6px; + } +} + +.table__td-content { + max-height: 100px; + overflow-y: auto; +} + +.table__th-link { + color: white; + font-weight: bold; + + &:hover { + color: inherit; + } +} diff --git a/templates/profile.hamlet b/templates/profile.hamlet index f81cfb2a8..debcdaf90 100644 --- a/templates/profile.hamlet +++ b/templates/profile.hamlet @@ -1,79 +1,76 @@ -