discourse/app/assets/stylesheets/common/admin/admin_table.scss
Ella E. 98a3e7d6e2
UX: Consistent styling for admin tables on mobile (#29360)
* UX: Apply admin table classes for consistent mobile styling on custom flags

* UX: Apply admin table classes for consistent mobile styling on custom flags

* UX: Apply admin table classes for consistent mobile styling on backups

* UX: Apply admin table classes for consistent mobile styling on plugins list

* DEV: tweaks on admin table

* UX: Apply admin table classes for consistent mobile styling on chat plugin

* apply prettier

* apply lint

* DEV: removed commented out code

* DEV: removed unnecessary div element

* scroll to the element

* remove the workaround

* revert

* add an extra assertion

* add enabled check

* improve switching

* rm

---------

Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2024-10-23 16:26:21 -06:00

114 lines
1.9 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);
box-shadow: var(--shadow-card);
}
}
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__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 {
@include breakpoint("tablet") {
position: absolute;
top: 0;
right: 0;
}
&-options {
text-align: right;
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);
}
}