discourse/app/assets/stylesheets/common/components/user-info.scss

98 lines
1.7 KiB
SCSS

// Common styles for "user-info" component
.user-info {
display: inline-block;
clear: both;
margin-bottom: 1em;
.user-image {
float: left;
padding-right: 4px;
margin-right: 10px;
}
.user-image-inner {
position: relative;
display: inline-block;
}
.user-detail {
float: left;
width: 70%;
padding-left: 5px;
@media screen and (max-width: 600px) {
font-size: $font-down-1;
}
.name-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.username a {
font-weight: bold;
color: dark-light-choose($primary-high, $secondary-low);
}
.name {
margin-left: 5px;
color: dark-light-choose($primary-high, $secondary-low);
}
.title {
margin-top: 3px;
color: dark-light-choose($primary-medium, $secondary-medium);
}
}
.avatar-flair {
background-repeat: no-repeat;
background-position: center;
position: absolute;
bottom: -2px;
right: -8px;
background-size: 18px 18px;
border-radius: 12px;
width: 24px;
height: 24px;
}
&.small {
width: 333px;
@media screen and (max-width: $small-width) {
width: auto;
display: flex;
}
@media screen and (max-width: 600px) {
width: 100%;
}
}
&.medium {
min-height: 60px;
.username,
.name {
display: block;
}
.name {
margin-left: 0;
}
&.badge-info {
min-height: 80px;
min-width: 250px;
.granted-on {
color: dark-light-choose($primary-medium, $secondary-medium);
}
.post-link {
display: block;
margin-top: 0.2em;
}
}
}
}