mirror of
https://github.com/discourse/discourse.git
synced 2025-02-10 05:14:59 +00:00
335c3f4621
Behavior should be very similar but the code is simplified and it should fix various bugs where the card was showing out of screen even if we had available space.
108 lines
2.2 KiB
SCSS
108 lines
2.2 KiB
SCSS
$avatar_width: 120px;
|
|
|
|
// shared styles for user and group cards
|
|
.user-card,
|
|
.group-card {
|
|
// mobile cards should always be on top of everything - 1102
|
|
z-index: z("mobile-composer") + 2;
|
|
max-width: 95vw;
|
|
margin: 0 2.5vw;
|
|
max-height: 85vh; // 2.5vh margin-top and margin-bottom. 10vh top
|
|
// avatar - names - controls
|
|
.first-row {
|
|
flex-wrap: wrap;
|
|
.names {
|
|
flex: 1 1 calc(100% - #{$avatar_width});
|
|
box-sizing: border-box;
|
|
}
|
|
.usercard-controls {
|
|
--usercard-control-margin: 0.25em;
|
|
display: flex;
|
|
flex: 1;
|
|
flex-wrap: wrap;
|
|
margin: 1em calc(var(--usercard-control-margin) * -1) 0;
|
|
li {
|
|
flex: 1 0 calc(50% - (var(--usercard-control-margin) * 2));
|
|
min-width: 0;
|
|
margin: 0 var(--usercard-control-margin);
|
|
&:empty {
|
|
display: none;
|
|
}
|
|
button {
|
|
@include ellipsis;
|
|
margin-bottom: calc(var(--usercard-control-margin) * 2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
h1 {
|
|
font-size: var(--font-up-3);
|
|
.d-icon {
|
|
font-size: var(--font-down-2);
|
|
}
|
|
}
|
|
h2 {
|
|
font-size: var(--font-0);
|
|
}
|
|
h3 {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
// styles for user cards only
|
|
.user-card {
|
|
// badges
|
|
.badge-section {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
.user-card-badge-link,
|
|
.more-user-badges {
|
|
display: flex;
|
|
flex: 0 1 50%;
|
|
max-width: 50%; // for text ellipsis
|
|
padding: 2px 0;
|
|
box-sizing: border-box;
|
|
&:nth-child(odd) {
|
|
padding-right: 4px;
|
|
}
|
|
a {
|
|
width: 100%;
|
|
display: flex;
|
|
}
|
|
}
|
|
.user-badge {
|
|
display: flex;
|
|
margin: 0;
|
|
width: 100%;
|
|
.badge-display-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.public-user-fields {
|
|
@media screen and (max-height: 550px) {
|
|
max-height: 12vh;
|
|
}
|
|
max-height: 40vh;
|
|
overflow-y: auto;
|
|
.public-user-field {
|
|
@include line-clamp(3);
|
|
}
|
|
}
|
|
}
|
|
|
|
// mobile card cloak
|
|
.card-cloak {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: z("mobile-composer") + 1; // 1101
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-color: rgba(black, 0.5);
|
|
animation: fadein 0.2s;
|
|
}
|