Retrospring/app/assets/stylesheets/components/_collapse.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;
}
}
&.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);
}