discourse/app/assets/stylesheets/common/admin/admin_emojis.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

71 lines
1.3 KiB
SCSS

.admin-contents.admin-emojis {
.select-kit {
max-width: 210px;
}
#custom_emoji td.action {
text-align: right;
}
#emoji-uploader {
transition: box-shadow ease-in-out 0.25s;
}
.uppy-is-drag-over {
box-shadow: 0 0px 52px 0 #ffffff, 0px 7px 33px 0 var(--tertiary-low);
pointer-events: none;
}
#custom_emoji.highlighted {
background: var(--tertiary-very-low);
@media (prefers-reduced-motion: no-preference) {
animation: background-fade-highlight 2.5s ease-out;
}
}
.emoji-uploader.form-horizontal {
padding: var(--space-3);
margin-top: var(--space-2);
background: var(--primary-very-low);
display: flex;
gap: var(--space-3);
flex-direction: row;
align-items: end;
@include breakpoint("tablet") {
flex-direction: column;
align-items: normal;
}
.control-group {
margin-bottom: 0;
}
.label {
font-weight: bold;
margin-right: var(--space-2);
color: var(--primary-high);
}
}
}
.d-admin-table {
.d-admin-row__content td {
vertical-align: middle;
}
.d-admin-row__overview {
width: 20%;
@include breakpoint("tablet") {
width: auto;
}
}
}
.admin-emojis__header {
display: flex;
justify-content: space-between;
align-items: center;
a {
font-size: var(--font-up-1);
margin-bottom: 10px;
}
}