mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 15:47:53 -05:00
style selection tiles
This commit is contained in:
parent
5811332cd7
commit
d0d32e81e9
2 changed files with 35 additions and 5 deletions
|
@ -36,7 +36,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner {
|
.inner {
|
||||||
padding: 2rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transfer-ownership-alert-wrapper .alert-wrapper {
|
.transfer-ownership-alert-wrapper .alert-wrapper {
|
||||||
|
@ -88,8 +88,27 @@
|
||||||
@media #{$intermediate-and-smaller} {
|
@media #{$intermediate-and-smaller} {
|
||||||
& { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
& { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
||||||
}
|
}
|
||||||
column-gap: 20px;
|
column-gap: 12px;
|
||||||
row-gap: 20px;
|
row-gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-ownership-tile-info {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-left: 8px;
|
||||||
|
flex-grow: 1; /* Grow to fill available space */
|
||||||
|
min-width: 0; /* Prevents within from expanding beyond bounds */
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-ownership-name-selected {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transfer-selection-icon {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transfer-ownership-tile-selected {
|
.transfer-ownership-tile-selected {
|
||||||
|
|
|
@ -14,8 +14,19 @@ const TransferOwnershipTile = ({
|
||||||
className="studio-member-image"
|
className="studio-member-image"
|
||||||
src={image}
|
src={image}
|
||||||
/>
|
/>
|
||||||
<div className="studio-member-info">
|
<div className="transfer-ownership-tile-info">
|
||||||
|
<div
|
||||||
|
className={classNames('studio-member-name',
|
||||||
|
{'transfer-ownership-name-selected': selected}
|
||||||
|
)}
|
||||||
|
|
||||||
|
>
|
||||||
{username}
|
{username}
|
||||||
|
</div>
|
||||||
|
{selected &&
|
||||||
|
<div className="transfer-selection-icon">
|
||||||
|
<img src="/svgs/studio/check-icon-white.svg" />
|
||||||
|
</div>}
|
||||||
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
|
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue