mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-28 13:16:34 +08:00
122 lines
2.2 KiB
SCSS
Vendored
122 lines
2.2 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.form-kit__container {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
|
|
&.--full {
|
|
width: 100%;
|
|
}
|
|
|
|
@include viewport.until(sm) {
|
|
width: 100%;
|
|
}
|
|
|
|
&.--column {
|
|
.form-kit__container-content {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
display: inline;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
font-size: var(--font-down-1-rem);
|
|
color: var(--primary);
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
&-subtitle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
font-size: var(--font-down-1-rem);
|
|
color: var(--primary-medium);
|
|
|
|
> * {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&-optional {
|
|
font-size: var(--font-down-2-rem);
|
|
color: var(--primary-high-or-secondary-low);
|
|
font-weight: normal;
|
|
}
|
|
|
|
&-content {
|
|
display: flex;
|
|
gap: 0.25em;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
max-width: 100%;
|
|
width: var(--form-kit-medium-input);
|
|
|
|
@include viewport.until(sm) {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-kit__container-title,
|
|
.form-kit__container-description,
|
|
.form-kit__container-content {
|
|
.--small & {
|
|
width: var(--form-kit-small-input);
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
.--medium & {
|
|
width: var(--form-kit-medium-input);
|
|
}
|
|
|
|
.--large & {
|
|
width: var(--form-kit-large-input);
|
|
}
|
|
|
|
.--max & {
|
|
max-width: var(--form-kit-max-input);
|
|
width: 100%;
|
|
}
|
|
|
|
.--full & {
|
|
width: 100%;
|
|
min-width: var(--form-kit-small-input);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Override: child has its own modifier from @titleFormat / @descriptionFormat.
|
|
// Lives in a separate block AFTER the cascade so on equal specificity, source
|
|
// order makes the explicit override win. Yes, this one sucks a bit. I know.
|
|
.form-kit__container-title,
|
|
.form-kit__container-description,
|
|
.form-kit__container-content {
|
|
&.--small {
|
|
width: var(--form-kit-small-input);
|
|
}
|
|
|
|
@include viewport.from(sm) {
|
|
&.--medium {
|
|
width: var(--form-kit-medium-input);
|
|
}
|
|
|
|
&.--large {
|
|
width: var(--form-kit-large-input);
|
|
}
|
|
|
|
&.--max {
|
|
max-width: var(--form-kit-max-input);
|
|
width: 100%;
|
|
}
|
|
|
|
&.--full {
|
|
width: 100%;
|
|
min-width: var(--form-kit-small-input);
|
|
}
|
|
}
|
|
}
|
