RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor scss a bit

pull/62/head
Varun Patil 2022-09-15 10:20:02 -07:00
parent 702ddf1bc9
commit f522f7c87b
2 changed files with 50 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Folder.vue
View File

@ -93,18 +93,6 @@ export default class Folder extends Mixins(GlobalMixin) {
<style lang="scss" scoped> <style lang="scss" scoped>
.folder { .folder {
cursor: pointer; cursor: pointer;
.name {
cursor: pointer;
width: 100%;
padding: 0 5%;
text-align: center;
font-size: 1.08em;
word-wrap: break-word;
text-overflow: ellipsis;
max-height: 35%;
line-height: 1em;
}
} }
.big-icon { .big-icon {
@ -115,13 +103,25 @@ export default class Folder extends Mixins(GlobalMixin) {
width: 100%; height: 100%; width: 100%; height: 100%;
transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
.folder.hasPreview & { > .name {
cursor: pointer;
width: 100%;
padding: 0 5%;
text-align: center;
font-size: 1.08em;
word-wrap: break-word;
text-overflow: ellipsis;
max-height: 35%;
line-height: 1em;
}
.folder.hasPreview > & {
.icon-folder { opacity: 1; } .icon-folder { opacity: 1; }
.name { color: white; } .name { color: white; }
} }
.folder.hasPreview:hover & { opacity: 0; } .folder.hasPreview:hover > & { opacity: 0; }
.icon-folder { > .icon-folder {
cursor: pointer; cursor: pointer;
height: 65%; width: 100%; height: 65%; width: 100%;
opacity: 0.3; opacity: 0.3;
@ -138,7 +138,7 @@ export default class Folder extends Mixins(GlobalMixin) {
width: calc(100% - 4px); width: calc(100% - 4px);
top: 2px; left: 2px; top: 2px; left: 2px;
.img-outer { > .img-outer {
background-color: var(--color-loading-light); background-color: var(--color-loading-light);
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -146,12 +146,11 @@ export default class Folder extends Mixins(GlobalMixin) {
height: 50%; height: 50%;
display: inline-block; display: inline-block;
.folder.onePreview & { .folder.onePreview > & {
width: 100%; height: 100%; width: 100%; height: 100%;
} }
}
img { > img {
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -169,4 +168,5 @@ export default class Folder extends Mixins(GlobalMixin) {
} }
} }
} }
}
</style> </style>

15
src/components/Photo.vue
View File

@ -248,8 +248,8 @@ export default class Photo extends Mixins(GlobalMixin) {
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
.p-outer:hover & { opacity: 0.7; } .p-outer:hover > & { opacity: 0.7; }
.selected & { opacity: 0.9; filter: invert(1); } .selected > & { opacity: 0.9; filter: invert(1); }
} }
.icon-video-white { .icon-video-white {
position: absolute; position: absolute;
@ -271,9 +271,9 @@ div.img-outer {
background-clip: content-box, padding-box; background-clip: content-box, padding-box;
background-color: var(--color-loading-light); background-color: var(--color-loading-light);
.selected & { padding: 6%; } .selected > & { padding: 6%; }
}
img { > img {
background-clip: content-box; background-clip: content-box;
object-fit: cover; object-fit: cover;
cursor: pointer; cursor: pointer;
@ -287,7 +287,8 @@ img {
-webkit-touch-callout: none; -webkit-touch-callout: none;
user-select: none; user-select: none;
.selected & { box-shadow: 0 0 6px 2px var(--color-primary); } .selected > & { box-shadow: 0 0 6px 2px var(--color-primary); }
.p-loading & { opacity: 0; } .p-loading > & { opacity: 0; }
}
} }
</style> </style>