95 lines
1.5 KiB
SCSS
95 lines
1.5 KiB
SCSS
@use "sass:map";
|
|
|
|
.collapsed {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
&.answerbox__answer-text {
|
|
max-height: 18rem;
|
|
|
|
@include media-breakpoint-up('sm') {
|
|
max-height: 10.5rem;
|
|
}
|
|
}
|
|
|
|
&.answerbox__question-text {
|
|
max-height: 15rem;
|
|
|
|
@include media-breakpoint-up('sm') {
|
|
max-height: 7.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.collapser {
|
|
$this: &;
|
|
|
|
display: flex;
|
|
position: sticky;
|
|
justify-content: center;
|
|
width: 100%;
|
|
padding: map.get($spacers, 2);
|
|
bottom: calc($nav-link-height + 10px);
|
|
z-index: 0;
|
|
|
|
@include media-breakpoint-up('sm') {
|
|
bottom: 10px;
|
|
}
|
|
|
|
& .collapsed-text {
|
|
display: none;
|
|
}
|
|
|
|
& .shown-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.collapsed ~ & {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
&:before {
|
|
content: "";
|
|
}
|
|
|
|
& .collapsed-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
& .shown-text {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:before {
|
|
position: absolute;
|
|
background: linear-gradient(0deg, rgba(var(--gradient-base),1) 0%, rgba(var(--gradient-base),0) 100%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.btn {
|
|
@extend .btn-primary;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.inbox-entry--new .collapser .btn {
|
|
@extend .btn-light;
|
|
}
|
|
|
|
.inbox-entry .card-header .collapser,
|
|
.answerbox .card-header .collapser {
|
|
--gradient-base: var(--raised-accent-rgb);
|
|
}
|
|
|
|
.question--fixed .card-body .collapser,
|
|
.answerbox .card-body .collapser {
|
|
--gradient-base: var(--raised-bg-rgb);
|
|
}
|
|
|
|
.inbox-entry--new .card-header .collapser {
|
|
--gradient-base: var(--primary-rgb);
|
|
}
|