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

62
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,26 +146,26 @@ 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%;
filter: brightness(50%); filter: brightness(50%);
opacity: 1; opacity: 1;
transition: opacity 0.15s ease, filter 0.2s ease-in-out; transition: opacity 0.15s ease, filter 0.2s ease-in-out;
will-change: opacity, filter; will-change: opacity, filter;
transform: translateZ(0); transform: translateZ(0);
&.p-loading { opacity: 0; } &.p-loading { opacity: 0; }
&.p-load-fail { display: none; } &.p-load-fail { display: none; }
.folder:hover & { .folder:hover & {
filter: brightness(100%); filter: brightness(100%);
}
} }
} }
} }

37
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,23 +271,24 @@ 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 {
background-clip: content-box;
object-fit: cover;
cursor: pointer;
width: 100%; height: 100%;
opacity: 1;
transition: opacity 0.15s ease;
will-change: opacity;
transform: translateZ(0);
-webkit-tap-highlight-color: transparent; > img {
-webkit-touch-callout: none; background-clip: content-box;
user-select: none; object-fit: cover;
cursor: pointer;
width: 100%; height: 100%;
opacity: 1;
transition: opacity 0.15s ease;
will-change: opacity;
transform: translateZ(0);
.selected & { box-shadow: 0 0 6px 2px var(--color-primary); } -webkit-tap-highlight-color: transparent;
.p-loading & { opacity: 0; } -webkit-touch-callout: none;
user-select: none;
.selected > & { box-shadow: 0 0 6px 2px var(--color-primary); }
.p-loading > & { opacity: 0; }
}
} }
</style> </style>