discourse/app/assets/stylesheets/common/admin/admin_table.scss
Ella E. 37f032752e
UX: Apply admin table to webhooks (#30317)
* UX: Apply admin table classes for consistent mobile styling on the web hooks page

* DEV: Remove icon on the status component; update status classes

* DEV: Update tests for webhook status component

* DEV: add space var with a smaller value

* DEV: Add styling for different status labels
2024-12-17 08:52:29 -07:00

196 lines
3.5 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: middle;
@include breakpoint("tablet") {
display: block;
border-top: 1px solid var(--primary-low);
}
&:first-child {
@include breakpoint("tablet") {
border-top: 0;
}
}
&.d-admin-row__overview {
@include breakpoint("tablet") {
width: auto;
border-top: 0;
}
}
&.d-admin-row__detail {
@include breakpoint("tablet") {
display: flex;
justify-content: space-between;
}
}
&.d-admin-row__controls {
text-align: right;
width: auto;
@include breakpoint("tablet") {
position: absolute;
top: -3px;
right: 0;
border-top: 0;
width: auto;
}
}
}
// Default
.status-label {
--d-border-radius: var(--space-4);
--status-icon-diameter: 8px;
display: flex;
flex-wrap: nowrap;
width: fit-content;
background-color: var(--primary-low);
padding: var(--space-0) var(--space-2);
border-radius: var(--d-border-radius);
.status-label-indicator {
display: inline-block;
width: var(--status-icon-diameter);
height: var(--status-icon-diameter);
border-radius: 50%;
background-color: var(--primary-high);
flex-shrink: 0;
margin-right: var(--space-1);
margin-top: 0.35rem;
}
.status-label-text {
color: var(--primary-high);
font-size: var(--font-down-1);
}
}
// Success badge
.status-label.--success {
background-color: var(--success-low);
.status-label-indicator {
background-color: var(--success);
}
.status-label-text {
color: var(--success-hover);
}
}
// Critical badge
.status-label.--critical {
background-color: var(--danger-low);
.status-label-indicator {
background-color: var(--danger);
}
.status-label-text {
color: var(--danger-hover);
}
}
// Inactive badge
.status-label.--inactive {
background-color: var(--primary-low);
.status-label-indicator {
background-color: var(--primary-high);
}
.status-label-text {
color: var(--primary-high);
}
}
}
.d-admin-row__overview {
&-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;
}
}
&-flags {
color: var(--primary-high);
font-size: var(--font-down-1);
text-transform: lowercase;
&::first-letter {
text-transform: uppercase;
}
}
}
.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);
}
}