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

Use css var for dist

pull/162/head
Varun Patil 2022-10-30 15:32:07 -07:00
parent 8bf0fa7267
commit 0ea4168a37
1 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/frame/Photo.vue
View File

@ -221,18 +221,22 @@ export default class Photo extends Mixins(GlobalMixin) {
background-color: var(--color-primary-select-light); background-color: var(--color-primary-select-light);
background-clip: content-box; background-clip: content-box;
} }
--icon-dist: 8px;
@media (max-width: 768px) {
--icon-dist: 4px;
}
} }
// Distance of icon from border // Distance of icon from border
$icon-dist: min(4%, 8px); $icon-half-size: 6px;
$icon-half-size: 5px;
$icon-size: $icon-half-size * 2; $icon-size: $icon-half-size * 2;
/* Extra icons */ /* Extra icons */
.check-circle-icon.select { .check-circle-icon.select {
position: absolute; position: absolute;
top: $icon-dist; top: calc(var(--icon-dist) + 2px);
left: $icon-dist; left: calc(var(--icon-dist) + 2px);
z-index: 100; z-index: 100;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
@ -251,7 +255,7 @@ $icon-size: $icon-half-size * 2;
// Extremely ugly way to fill up the space // Extremely ugly way to fill up the space
// If this isn't done, bg has a border // If this isn't done, bg has a border
:deep path { :deep path {
transform: scale(1.215) translate(-2px, -2px); transform: scale(1.2) translate(-1.8px, -1.8px);
} }
filter: invert(1) brightness(100); filter: invert(1) brightness(100);
@ -271,15 +275,15 @@ $icon-size: $icon-half-size * 2;
filter: invert(1) brightness(100); filter: invert(1) brightness(100);
} }
.play-circle-outline-icon { .play-circle-outline-icon {
top: $icon-dist; top: var(--icon-dist);
right: $icon-dist; right: var(--icon-dist);
.p-outer.selected > & { .p-outer.selected > & {
transform: translate(-$icon-size, $icon-size); transform: translate(-$icon-size, $icon-size);
} }
} }
.star-icon { .star-icon {
bottom: $icon-dist; bottom: var(--icon-dist);
left: $icon-dist; left: var(--icon-dist);
.p-outer.selected > & { .p-outer.selected > & {
transform: translate($icon-size, -$icon-size); transform: translate($icon-size, -$icon-size);
} }
@ -292,7 +296,7 @@ div.img-outer {
transition: padding 0.15s ease; transition: padding 0.15s ease;
.p-outer.selected > & { .p-outer.selected > & {
padding: calc($icon-dist + $icon-half-size); padding: calc(var(--icon-dist) + $icon-half-size);
} }
.p-outer.placeholder > & { .p-outer.placeholder > & {