Justin Edmund
9e6c9a2108
Parties can now be set to be private or unlisted. Private parties cannot be shared with anyone while Unlisted parties can be seen by those with the link. We implemented a dialog to change visibility, notices to let users know if a party isn't public, and icons on the GridRep so users can see at a glance which of their parties has different visibility on their profile.   
83 lines
1.7 KiB
SCSS
83 lines
1.7 KiB
SCSS
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-4x;
|
|
padding: 0 $unit-4x $unit-2x;
|
|
|
|
.description {
|
|
color: var(--text-primary);
|
|
font-size: $font-regular;
|
|
}
|
|
|
|
.radioGroup {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-2x;
|
|
|
|
.radioSet {
|
|
display: flex;
|
|
gap: $unit;
|
|
|
|
.radioItem {
|
|
align-items: center;
|
|
background: var(--radio-button-bg);
|
|
border-radius: $full-corner;
|
|
border: none;
|
|
display: flex;
|
|
border: 2px solid transparent;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
height: $unit-4x;
|
|
width: $unit-4x;
|
|
min-height: $unit-4x;
|
|
min-width: $unit-4x;
|
|
|
|
&:focus {
|
|
outline: 2px solid var(--radio-active-bg);
|
|
|
|
&:hover {
|
|
outline-color: var(--radio-active-bg-hover);
|
|
}
|
|
}
|
|
|
|
[data-state='checked'] {
|
|
background-color: var(--radio-active-bg);
|
|
border-radius: $full-corner;
|
|
display: block;
|
|
height: $unit-2x;
|
|
width: $unit-2x;
|
|
}
|
|
|
|
&[data-state='checked']:hover [data-state='checked'] {
|
|
background-color: var(--radio-active-bg-hover);
|
|
}
|
|
|
|
&:hover {
|
|
background: var(--radio-button-bg-hover);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: $unit-half;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
h4 {
|
|
color: var(--text-primary);
|
|
font-size: $font-regular;
|
|
font-weight: $bold;
|
|
}
|
|
|
|
p {
|
|
color: var(--text-tertiary);
|
|
font-size: $font-small;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|