discourse/app/assets/stylesheets/common/admin/admin_config_area.scss
Jordan Vidrine 3ad2fd032b
FEATURE: Initial themes config area with grid (#28828)
* UX: More additions

* UX: more

* DEV: Add admin/config/themes route

* UX: Use admin config card

* syntax merge fixes

* cleanup

* cleanup

* checkbox

* more

* error

* save on click

* more

* fix setter

* DEV: Implement vanilla checkbox

* cleanup

* UX: save themes as default

* DEV: Add component list to card

* DEV: Add placeholder for no screenshots

* DEV: Fix default theme reactivity

Also add content/optionalAction yields to config area
card and put the theme user selectable checkbox there,
along with adding styles.

* DEV: Change to generic "look and feel" config area

* DEV: Auto redirect to themes on base look and feel route

* UX: Remove computed from sorted themes

* linting

* UX: Turn update icon into button that routes to settings

* DEV: remove unused function

* UX: center icons with title

* DEV: Lint

* UX: Hook up theme preview button

* DEV: Minor fixes

---------

Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
2024-10-15 10:54:38 -05:00

106 lines
1.7 KiB
SCSS

.admin-config-area {
.btn-back {
margin-bottom: 1em;
}
}
.admin-config-area-card {
padding: 20px;
border: 1px solid var(--primary-low);
border-radius: 2px;
background-color: var(--secondary);
margin-bottom: 1em;
&__label-optional {
color: var(--primary-medium);
font-size: var(--font-down-1);
margin-left: 5px;
}
&__additional-help {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
&__warning-banner {
color: var(--primary-high);
background-color: var(--danger-low);
font-size: var(--font-down-1);
padding: 10px 10px;
}
&__control-group-horizontal {
display: flex;
margin-bottom: 18px;
label {
margin-right: 1em;
}
}
&__title {
flex: 2;
margin-bottom: 0;
}
&__header-wrapper {
display: flex;
align-items: baseline;
flex: 1;
margin-bottom: 0.5rem;
}
}
.admin-config-page {
&__main-area {
.admin-detail {
padding-top: 15px;
border-left: 0;
padding-left: 0;
width: 100%;
}
}
}
.admin-config-area {
display: flex;
flex-wrap: nowrap;
gap: var(--space-4);
align-items: flex-start;
@media (max-width: $mobile-breakpoint) {
flex-direction: column;
}
&__primary-content {
flex: 0 1 70%;
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__aside {
/* use for help inset */
flex: 0 1 30%;
padding: var(--space-2);
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__settings {
.admin-site-settings-filter-controls {
margin-bottom: 1em;
}
.setting-label {
margin-left: 18px;
}
}
&__empty-list {
padding: 1em;
border: 1px solid var(--primary-low);
}
}