discourse/app/assets/stylesheets/common/admin/admin_table.scss
Ella E. 13c7773036
UX: Make the emojis in the admin page table list work better on mobile (#29619)
* UX: Apply admin table classes for consistent mobile styling on the emojis page

* UX: remove icon from the button

* UX: styling tweaks on the emoji uploader form

* UX: right align table button controls

* apply prettier
2024-11-06 10:25:03 -07:00

118 lines
2.0 KiB
SCSS

.d-admin-table {
@include breakpoint("tablet") {
border-collapse: collapse;
margin-bottom: var(--space-3);
}
thead {
@include breakpoint("tablet") {
display: none;
}
}
th {
color: var(--primary-high);
}
.d-admin-row__content {
position: relative;
padding: var(--space-1) 0;
@include breakpoint("tablet") {
display: block;
margin-bottom: var(--space-3);
border: 1px solid var(--primary-low);
}
}
td {
vertical-align: top;
padding-top: var(--space-3);
padding-bottom: var(--space-3);
@include breakpoint("tablet") {
display: block;
border-top: 1px solid var(--primary-low);
}
&:first-child {
@include breakpoint("tablet") {
border-top: 0;
}
}
&.d-admin-row__detail {
@include breakpoint("tablet") {
display: flex;
justify-content: space-between;
}
}
&.d-admin-row__controls {
text-align: right;
@include breakpoint("tablet") {
position: absolute;
top: -3px;
right: 0;
border-top: 0;
}
}
}
}
.d-admin-row__overview {
width: 55%;
@include breakpoint("tablet") {
width: auto;
border-top: 0;
}
&-name {
font-weight: 700;
max-width: 80%;
margin-bottom: var(--space-1);
}
&-author {
font-size: var(--font-down-1);
margin-bottom: var(--space-1);
}
&-about {
padding-right: var(--space-4);
@include breakpoint("tablet") {
padding-top: var(--space-1);
}
.d-icon {
font-size: var(--font-down-3);
margin-bottom: 0.1em;
}
}
}
.d-admin-row__controls {
&-options {
display: flex;
flex-direction: row;
gap: 0.5em;
justify-content: flex-end;
.fk-d-menu__trigger {
font-size: var(--font-down-1);
}
}
}
.d-admin-row__mobile-label {
display: none;
@include breakpoint("tablet") {
display: inline-flex;
color: var(--primary-high);
}
}