mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-06-19 08:23:45 +08:00
d97ec2c1ad
**Previously**, plugins had no generic way to present the category visibility (public vs group-restricted) option as locked or to intercept a change to it, and a controlled `ConditionalContent` left a radio visually selected when its `@onChange` rejected the change. **In this update**, adds a `category-visibility-private-locked` value transformer and a `category-visibility-change` behavior transformer (with a `@locked` radio state), and re-syncs `ConditionalContent` radios to `activeName` after `onChange` settles so a rejected selection reverts.
102 lines
1.9 KiB
SCSS
Vendored
102 lines
1.9 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.form-kit__conditional-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
}
|
|
}
|
|
|
|
.--radio-cards {
|
|
width: 100%;
|
|
|
|
.form-kit__conditional-display,
|
|
.form-kit__field.--large .form-kit__container-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.form-kit__inline-radio {
|
|
gap: var(--space-2);
|
|
width: 100%;
|
|
|
|
.form-kit__control-radio-label:not(.--disabled):hover {
|
|
cursor: pointer;
|
|
border-color: var(--tertiary);
|
|
}
|
|
|
|
> * {
|
|
width: 50%;
|
|
}
|
|
|
|
.fk-d-tooltip__trigger-container {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.form-kit__control-radio-label {
|
|
flex: 1 1 50%;
|
|
padding: 0.5em var(--space-2);
|
|
border: 1px solid var(--primary-low-mid);
|
|
border-radius: var(--d-input-border-radius);
|
|
justify-content: center;
|
|
position: relative;
|
|
line-height: normal;
|
|
|
|
&:has(:focus-visible) {
|
|
outline: 1px solid var(--d-input-focused-color);
|
|
border: 1px solid var(--d-input-focused-color);
|
|
}
|
|
|
|
&.--disabled {
|
|
color: var(--primary-medium);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// Like --disabled, but the option stays clickable.
|
|
&.--locked {
|
|
color: var(--primary-medium);
|
|
background: var(--d-input-bg-color--disabled);
|
|
|
|
.d-icon {
|
|
color: currentcolor;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.d-icon {
|
|
display: none;
|
|
}
|
|
|
|
input {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
opacity: 0;
|
|
}
|
|
|
|
&:has(input[disabled]) {
|
|
background: var(--d-input-bg-color--disabled);
|
|
|
|
.d-icon {
|
|
color: currentcolor;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&:has(input:checked) {
|
|
color: var(--tertiary);
|
|
border-color: var(--tertiary);
|
|
background: var(--tertiary-very-low);
|
|
|
|
.d-icon {
|
|
color: currentcolor;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
