mirror of
https://github.com/discourse/discourse.git
synced 2026-08-11 01:57:29 +08:00
9433cadcdbEvents, Polls, and Dates all have "advanced mode" toggles, but they're all just a little different. This unifies them behind one reusable core component. Now they're all consisently toggling between "advanced mode" and "simple mode" Before: <img width="700" alt="image" src="https://github.com/user-attachments/assets/0b92e8f1-1dd0-4617-8ab6-6d968ca980cc" /> <img width="350" alt="image" src="https://github.com/user-attachments/assets/d02a8464-b782-4c1e-a7f0-d1a90e87798d" /> <img width="800" alt="image" src="https://github.com/user-attachments/assets/f5d074d3-0e32-41e6-a3fb-f6a3b0f32ae3" /> After: <img width="600" alt="image" src="https://github.com/user-attachments/assets/c25cd693-d4e7-4906-a346-197dcf6d5f6e" /> <img width="600" alt="image" src="https://github.com/user-attachments/assets/a3e1d7c3-f796-448d-83bb-cae611114030" /> <img width="600" alt="image" src="https://github.com/user-attachments/assets/90eecacb-9868-4fd3-b74f-722b32b9425e" /> <img width="600" alt="image" src="https://github.com/user-attachments/assets/881b5a8a-7731-40f1-af33-ba6bc94910de" />
100 lines
1.7 KiB
SCSS
Vendored
100 lines
1.7 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.post-event-builder-modal {
|
|
[name="attendanceMode"] {
|
|
.form-kit__control-radio-description {
|
|
margin-top: var(--space-2);
|
|
}
|
|
}
|
|
|
|
.reminder-item {
|
|
display: flex;
|
|
gap: var(--space-half);
|
|
|
|
.form-kit__container {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.d-select {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.form-kit__field-input-number {
|
|
flex: 0;
|
|
|
|
@include viewport.until(md) {
|
|
min-width: 4em !important; // overrides another important
|
|
}
|
|
|
|
input {
|
|
width: inherit;
|
|
}
|
|
}
|
|
}
|
|
|
|
.conditional-loading-section {
|
|
background: transparent;
|
|
}
|
|
|
|
.reminders {
|
|
.form-kit__container-content {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.reminder-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1 0 auto;
|
|
padding: 0.25em 0;
|
|
gap: var(--space-1);
|
|
margin-bottom: var(--space-2);
|
|
|
|
@include viewport.until(sm) {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
input {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.select-kit-header {
|
|
height: 100%;
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
.reminder-type {
|
|
width: 320px;
|
|
}
|
|
|
|
.reminder-value {
|
|
min-width: unset !important; // overrides another important
|
|
}
|
|
|
|
.reminder-unit {
|
|
width: 140px;
|
|
}
|
|
}
|
|
|
|
.reminder-period {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.remove-reminder {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.form-kit__collection + .add-reminder {
|
|
align-self: flex-start;
|
|
margin-top: var(--form-kit-gutter-y);
|
|
}
|
|
}
|
|
|
|
.d-date-time-input {
|
|
width: 100%;
|
|
}
|
|
}
|
