discourse/app/assets/stylesheets/mobile/components/user-card.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

108 lines
2.1 KiB
SCSS
Raw Normal View History

$avatar_width: 120px;
// shared styles for user and group cards
.user-card,
.group-card {
position: fixed;
// 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 auto;
min-width: 0;
margin: 0 var(--usercard-control-margin);
&:empty {
display: none;
}
button {
@include ellipsis;
}
}
}
}
h1 {
font-size: $font-up-3;
.d-icon {
font-size: $font-down-2;
}
}
h2 {
font-size: $font-0;
}
h3 {
font-size: $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;
}