app/assets/stylesheets/alchemy/tables.scss
table {
border-style: none;
border-spacing: 0 $default-padding;
padding: 0;
font-size: inherit;
width: 100%;
&.list .tools {
background-color: transparent;
padding: 2 * $default-padding;
}
}
.table {
display: flex;
flex-direction: column;
row-gap: $default-padding;
.row,
header {
display: flex;
}
.col {
flex: 1;
}
.tools {
flex: 0;
white-space: nowrap;
}
}
.list td,
.list th,
.table .col {
padding: 2 * $default-padding 3 * $default-padding;
vertical-align: top;
line-height: 22px;
border-right: 1px solid $medium-gray;
transition: background-color $transition-duration;
&:last-child {
border-right: 0 none;
}
&.wrap-text {
white-space: normal !important;
}
&.icon {
width: 16px;
text-align: center;
background-color: transparent;
}
}
.list th {
position: relative;
&.icon {
border-bottom: 1px solid $medium-gray;
}
}
th,
.table header .col {
white-space: nowrap;
text-align: left;
vertical-align: top;
border-bottom: 1px solid $medium-gray;
font-weight: bold;
}
tr.even td,
.table .row.even .col {
background-color: $table-row-even-background-color;
}
tr.odd td,
.table .row.odd .col {
background-color: $table-row-odd-background-color;
}
.list tr .tools,
.table .row .col.tools {
padding: $default-padding 2 * $default-padding;
white-space: nowrap;
@extend .disable-user-select;
background-color: transparent;
}
.list tr .tools {
width: 40px;
&.long {
width: 60px;
}
}
td.heading {
padding: $default-padding 0;
font-weight: bold;
text-decoration: underline;
}
.list .tools alchemy-icon,
.list td.icon alchemy-icon {
@extend .disable-user-select;
margin: 2px 0;
}
.list tr:hover td,
.table .row:hover .col {
background-color: $table-row-hover-color;
}
td,
th,
.table .col {
&.center,
&.boolean {
text-align: center;
}
&.right {
text-align: right;
}
}
td,
.table .col {
&.file_name {
white-space: nowrap;
}
&.file_type {
width: 130px;
}
&.file_size {
width: 80px;
}
&.date,
&.datetime {
width: 150px;
}
&.login {
width: 100px;
}
&.email {
width: 270px;
}
&.role {
width: 10%;
}
&.rights {
width: 60px;
}
&.page_layout {
width: 10%;
}
&.url {
width: 15%;
white-space: nowrap;
}
&.status {
width: 5%;
white-space: nowrap;
.page_status {
margin: 0 $default-margin;
}
}
&.tags {
width: 180px;
.tag {
margin: 0;
padding: 0 2 + $default-padding;
&:before {
padding-right: $default-padding;
}
}
}
}
th.count,
td.count {
width: 10%;
text-align: right;
padding-right: 16px;
}
.list .login_status {
width: 16px;
}
td#user_roles {
padding: 9px 0;
label {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
min-width: 40%;
}
}
.sort_link {
display: inline-flex;
align-items: center;
}