discourse/plugins/chat/assets/stylesheets/common/chat-form.scss
Joffrey JAFFEUX 42801c950f
UI: redesigned settings/members (#23804)
This PR is a first step towards private groups. It redesigns settings/members area of a channel and also drops the "about" page which is now mixed into settings.

This commit is also:
- introducing chat-form, a small DSL to create forms, ideally I would want something in core for this
- introducing a DToggleSwitch page object component to simplify testing toggles
- migrating various components to gjs
2023-10-09 14:11:16 +02:00

87 lines
1.3 KiB
SCSS

.chat-form {
display: flex;
flex-direction: column;
}
.chat-form__row {
&.-separator {
border-bottom: 1px solid var(--primary-low);
}
}
.chat-form__section {
display: flex;
flex-direction: column;
width: 100%;
& + .chat-form__section {
margin-top: 1rem;
}
&-title {
font-weight: 700;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
&-title + &-content {
margin-top: 0.25rem;
}
&-content {
background: var(--primary-very-low);
gap: 1rem;
display: flex;
padding: 1rem;
flex-direction: column;
}
}
.chat-form__row {
display: flex;
width: 100%;
// background: green;
flex-direction: column;
justify-content: center;
label,
.d-toggle-switch__checkbox-slider {
margin: 0;
}
&-action {
.chat-form__btn:first-child {
padding-left: 0;
}
}
&-label + &-action {
margin-left: auto;
}
&.-link {
color: var(--primary);
.d-icon {
color: var(--primary-medium);
}
}
&-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-height: 40px;
gap: 0.25rem;
}
&-description {
display: flex;
padding-top: 3px;
color: var(--primary-medium);
font-size: var(--font-down-1);
}
}