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>
.folder {
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 {
@ -115,13 +103,25 @@ export default class Folder extends Mixins(GlobalMixin) {
width: 100%; height: 100%;
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; }
.name { color: white; }
}
.folder.hasPreview:hover & { opacity: 0; }
.folder.hasPreview:hover > & { opacity: 0; }
.icon-folder {
> .icon-folder {
cursor: pointer;
height: 65%; width: 100%;
opacity: 0.3;
@ -138,7 +138,7 @@ export default class Folder extends Mixins(GlobalMixin) {
width: calc(100% - 4px);
top: 2px; left: 2px;
.img-outer {
> .img-outer {
background-color: var(--color-loading-light);
padding: 0;
margin: 0;
@ -146,26 +146,26 @@ export default class Folder extends Mixins(GlobalMixin) {
height: 50%;
display: inline-block;
.folder.onePreview & {
.folder.onePreview > & {
width: 100%; height: 100%;
}
}
img {
padding: 0;
width: 100%;
height: 100%;
filter: brightness(50%);
> img {
padding: 0;
width: 100%;
height: 100%;
filter: brightness(50%);
opacity: 1;
transition: opacity 0.15s ease, filter 0.2s ease-in-out;
will-change: opacity, filter;
transform: translateZ(0);
&.p-loading { opacity: 0; }
&.p-load-fail { display: none; }
opacity: 1;
transition: opacity 0.15s ease, filter 0.2s ease-in-out;
will-change: opacity, filter;
transform: translateZ(0);
&.p-loading { opacity: 0; }
&.p-load-fail { display: none; }
.folder:hover & {
filter: brightness(100%);
.folder:hover & {
filter: brightness(100%);
}
}
}
}

37
src/components/Photo.vue
View File

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