flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Rename classes internally to better support rtl languages (#1756)

Browse Source
This commit is contained in:
Dermot Duffy
2024-12-14 12:17:17 -08:00
committed by GitHub
parent fdb25f32ce
commit dc5de02e02
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/next-prev-control.ts
+2 -2
View File
@@ -53,8 +53,8 @@ export class FrigateCardNextPreviousControl extends LitElement {
const classes = { const classes = {
controls: true, controls: true,
previous: this.direction === 'previous', left: this.direction === 'previous',
next: this.direction === 'next', right: this.direction === 'next',
thumbnails: !renderIcon, thumbnails: !renderIcon,
icons: renderIcon, icons: renderIcon,
button: renderIcon, button: renderIcon,
src/scss/next-previous-control.scss
+8 -8
View File
@@ -3,8 +3,8 @@
:host { :host {
--frigate-card-next-prev-size: 48px; --frigate-card-next-prev-size: 48px;
--frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2); --frigate-card-next-prev-size-hover: calc(var(--frigate-card-next-prev-size) * 2);
--frigate-card-prev-position: 45px; --frigate-card-left-position: 45px;
--frigate-card-next-position: 45px; --frigate-card-right-position: 45px;
--mdc-icon-button-size: var(--frigate-card-next-prev-size); --mdc-icon-button-size: var(--frigate-card-next-prev-size);
--mdc-icon-size: calc(var(--mdc-icon-button-size) / 2); --mdc-icon-size: calc(var(--mdc-icon-button-size) / 2);
} }
@@ -14,11 +14,11 @@
z-index: 1; z-index: 1;
overflow: hidden; overflow: hidden;
} }
.controls.previous { .controls.left {
left: var(--frigate-card-prev-position); left: var(--frigate-card-left-position);
} }
.controls.next { .controls.right {
right: var(--frigate-card-next-position); right: var(--frigate-card-right-position);
} }
.controls.icons { .controls.icons {
@@ -42,14 +42,14 @@
.controls.previous.thumbnails:hover { .controls.previous.thumbnails:hover {
left: calc( left: calc(
var(--frigate-card-prev-position) - var(--frigate-card-left-position) -
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2 (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
); );
} }
.controls.next.thumbnails:hover { .controls.next.thumbnails:hover {
right: calc( right: calc(
var(--frigate-card-next-position) - var(--frigate-card-right-position) -
(var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2 (var(--frigate-card-next-prev-size-hover) - var(--frigate-card-next-prev-size)) / 2
); );
} }