105 lines
2.1 KiB
SCSS
105 lines
2.1 KiB
SCSS
@import "slovenscina-elements.scss";
|
|
|
|
.history-item {
|
|
background:white;
|
|
min-height:2.875rem;
|
|
max-height:2.875rem;
|
|
padding:1rem 1.5rem;
|
|
position:relative;
|
|
transition: max-height 1s ease-out;
|
|
cursor:pointer;
|
|
overflow:hidden;
|
|
.history-item-chevron {
|
|
position:absolute;
|
|
bottom:1rem;
|
|
right:1rem;
|
|
}
|
|
.history-item-date {
|
|
text-transform: uppercase;
|
|
display: inline-block;
|
|
color:$grey-dark;
|
|
line-height: 1rem;
|
|
font-weight: 400;
|
|
font-size:0.875rem;
|
|
}
|
|
.history-item-uploader {
|
|
display: inline-block;
|
|
padding-left:1rem;
|
|
margin-left:1rem;
|
|
border-left: 1px solid $grey-dark;
|
|
color:$grey-dark;
|
|
line-height: 1rem;
|
|
font-weight: 400;
|
|
font-size:0.875rem;
|
|
}
|
|
.history-item-filecount {
|
|
position:absolute;
|
|
top:1rem;
|
|
right:1rem;
|
|
color:$blue;
|
|
line-height: 1rem;
|
|
font-weight: 400;
|
|
font-size:0.875rem;
|
|
}
|
|
.history-item-desc {
|
|
position:absolute;
|
|
bottom:1rem;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-size: 1rem;
|
|
line-height: 1.25rem;
|
|
color:$black;
|
|
}
|
|
.history-item-desc-full {
|
|
display: none;
|
|
margin-top:1rem;
|
|
}
|
|
.history-item-files-full {
|
|
display: none;
|
|
.file-item {
|
|
position:relative;
|
|
height:3.125rem;
|
|
border-bottom: 1px solid $grey-dark;
|
|
.file-icon {
|
|
position:absolute;
|
|
width:1.5rem;
|
|
height:1.5rem;
|
|
left:0;
|
|
top:1rem;
|
|
}
|
|
.file-name {
|
|
position:absolute;
|
|
left:3rem;
|
|
top:1rem;
|
|
color:$black;
|
|
text-decoration: none;
|
|
cursor:pointer;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.open {
|
|
max-height: 20rem;
|
|
.history-item-date {display:block;}
|
|
.history-item-uploader {
|
|
display:block;
|
|
padding-left:0;
|
|
margin-left:0;
|
|
border-left: none;
|
|
}
|
|
.history-item-desc {
|
|
display: none;
|
|
}
|
|
.history-item-desc-full {
|
|
display: block;
|
|
}
|
|
.history-item-files-full {
|
|
display: block;
|
|
}
|
|
.history-item-chevron {
|
|
transform:rotate(180deg);
|
|
}
|
|
}
|
|
} |