CoastalCommitsPastes/client/app/(posts)/components/file-tree/file-tree.module.css
2022-11-12 00:58:21 -08:00

109 lines
1.5 KiB
CSS

.fileTreeWrapper {
display: block;
position: absolute;
left: 0;
height: 100%;
}
.fileTreeWrapper h5 {
text-align: center;
}
.fileTree {
list-style: none;
width: 100%;
}
.fileTree li {
transition: var(--transition);
border-radius: var(--radius);
margin: 0;
padding: var(--gap-half) 0;
}
.fileTree li a {
margin: 0px;
display: block;
width: 100%;
height: 100%;
padding: var(--gap-half);
}
.fileTree li:hover,
.fileTree li:focus,
.fileTree li:active {
background: var(--lighter-gray);
}
.fileTree li .fileTreeIcon {
display: inline-block;
padding-right: var(--gap-half);
padding-left: var(--gap-half);
}
.fileTree li .fileTreeTitle {
font-size: 1.1rem;
}
.fileTree li::before {
content: "";
padding: 0;
margin: 0;
}
.card {
top: 0;
overflow-y: scroll;
overflow-x: hidden;
position: fixed;
}
.cardContent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--gap-half);
padding-top: 200px;
}
@media screen and (max-width: 82rem) {
.fileTreeWrapper {
position: relative;
width: 100%;
height: auto;
margin-top: var(--gap);
}
.card {
position: relative;
padding: 0;
}
.cardContent {
margin: var(--gap);
padding: 0;
}
.fileTree {
width: 100%;
}
.fileTree li {
padding: 0.5rem 0;
}
.fileTree li .fileTreeIcon {
margin-right: var(--gap-half);
}
.fileTree li .fileTreeTitle {
font-size: 1.2rem;
}
.fileTree li::before {
content: "";
padding: 0;
margin: 0;
}
}