Skip to content

Commit 64e0a06

Browse files
DBuitDBuit
committed
Fix different size widths
1 parent 8b8e00e commit 64e0a06

File tree

2 files changed

+82
-83
lines changed

2 files changed

+82
-83
lines changed

‎dist/homekit-panel-card.js‎

Lines changed: 42 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/homekit-panel-card.ts‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -967,67 +967,67 @@ class HomeKitCard extends LitElement {
967967
}
968968
969969
.button.size-2 {
970-
width: calc(var(--tile-width, 100px) * 2 + (20px * 1) + (6px * 2));
970+
width: calc(var(--tile-width, 100px) * 2 + (20px * 1) + (5px * 2));
971971
}
972972
.button.size-3 {
973-
width: calc(var(--tile-width, 100px) * 3 + (20px * 2) + (6px * 3));
973+
width: calc(var(--tile-width, 100px) * 3 + (20px * 2) + (5px * 3));
974974
}
975975
.button.size-4 {
976-
width: calc(var(--tile-width, 100px) * 4 + (20px * 3) + (6px * 4));
976+
width: calc(var(--tile-width, 100px) * 4 + (20px * 3) + (5px * 4));
977977
}
978978
.button.size-5 {
979-
width: calc(var(--tile-width, 100px) * 5 + (20px * 4) + (6px * 5));
979+
width: calc(var(--tile-width, 100px) * 5 + (20px * 4) + (5px * 5));
980980
}
981981
.button.size-6 {
982-
width: calc(var(--tile-width, 100px) * 6 + (20px * 5) + (6px * 6));
982+
width: calc(var(--tile-width, 100px) * 6 + (20px * 5) + (5px * 6));
983983
}
984984
985985
.button.height-2 {
986-
height: calc(var(--tile-height, 100px) * 2 + (20px * 1) + (6px * 2));
986+
height: calc(var(--tile-height, 100px) * 2 + (20px * 1) + (5px * 2));
987987
}
988988
.button.height-3 {
989-
height: calc(var(--tile-height, 100px) * 3 + (20px * 2) + (6px * 3));
989+
height: calc(var(--tile-height, 100px) * 3 + (20px * 2) + (5px * 3));
990990
}
991991
.button.height-4 {
992-
height: calc(var(--tile-height, 100px) * 4 + (20px * 3) + (6px * 4));
992+
height: calc(var(--tile-height, 100px) * 4 + (20px * 3) + (5px * 4));
993993
}
994994
.button.height-5 {
995-
height: calc(var(--tile-height, 100px) * 5 + (20px * 4) + (6px * 5));
995+
height: calc(var(--tile-height, 100px) * 5 + (20px * 4) + (5px * 5));
996996
}
997997
.button.height-6 {
998-
height: calc(var(--tile-height, 100px) * 6 + (20px * 5) + (6px * 6));
998+
height: calc(var(--tile-height, 100px) * 6 + (20px * 5) + (5px * 6));
999999
}
10001000
10011001
.button.size-2.no-padding {
1002-
width: calc((var(--tile-width, 100px) * 2) + (20px * 1) + (6px * 2) + 20px);
1002+
width: calc((var(--tile-width, 100px) * 2) + (20px * 1) + (5px * 2) + 20px);
10031003
}
10041004
.button.size-3.no-padding {
1005-
width: calc((var(--tile-width, 100px) * 3) + (20px * 2) + (6px * 3) + 20px);
1005+
width: calc((var(--tile-width, 100px) * 3) + (20px * 2) + (5px * 3) + 20px);
10061006
}
10071007
.button.size-4.no-padding {
1008-
width: calc((var(--tile-width, 100px) * 4) + (20px * 3) + (6px * 4) + 20px);
1008+
width: calc((var(--tile-width, 100px) * 4) + (20px * 3) + (5px * 4) + 20px);
10091009
}
10101010
.button.size-5.no-padding {
1011-
width: calc((var(--tile-width, 100px) * 5) + (20px * 4) + (6px * 5) + 20px);
1011+
width: calc((var(--tile-width, 100px) * 5) + (20px * 4) + (5px * 5) + 20px);
10121012
}
10131013
.button.size-6.no-padding {
1014-
width: calc((var(--tile-width, 100px) * 6) + (20px * 5) + (6px * 6) + 20px);
1014+
width: calc((var(--tile-width, 100px) * 6) + (20px * 5) + (5px * 6) + 20px);
10151015
}
10161016
10171017
.button.height-2.no-padding {
1018-
height: calc((var(--tile-height, 100px) * 2) + (20px * 1) + (6px * 2) + 20px);
1018+
height: calc((var(--tile-height, 100px) * 2) + (20px * 1) + (5px * 2) + 20px);
10191019
}
10201020
.button.height-3.no-padding {
1021-
height: calc((var(--tile-height, 100px) * 3) + (20px * 2) + (6px * 3) + 20px);
1021+
height: calc((var(--tile-height, 100px) * 3) + (20px * 2) + (5px * 3) + 20px);
10221022
}
10231023
.button.height-4.no-padding {
1024-
height: calc((var(--tile-height, 100px) * 4) + (20px * 3) + (6px * 4) + 20px);
1024+
height: calc((var(--tile-height, 100px) * 4) + (20px * 3) + (5px * 4) + 20px);
10251025
}
10261026
.button.height-5.no-padding {
1027-
height: calc((var(--tile-height, 100px) * 5) + (20px * 4) + (6px * 5) + 20px);
1027+
height: calc((var(--tile-height, 100px) * 5) + (20px * 4) + (5px * 5) + 20px);
10281028
}
10291029
.button.height-6.no-padding {
1030-
height: calc((var(--tile-height, 100px) * 6) + (20px * 5) + (6px * 6) + 20px);
1030+
height: calc((var(--tile-height, 100px) * 6) + (20px * 5) + (5px * 6) + 20px);
10311031
}
10321032
10331033
.button input[type="range"] {
@@ -1351,67 +1351,67 @@ class HomeKitCard extends LitElement {
13511351
}
13521352
13531353
.button.size-2 {
1354-
width: calc(var(--tile-width-mobile, 90px) * 2 + (20px * 1) + (6px * 2));
1354+
width: calc(var(--tile-width-mobile, 90px) * 2 + (20px * 1) + (5px * 2));
13551355
}
13561356
.button.size-3 {
1357-
width: calc(var(--tile-width-mobile, 90px) * 3 + (20px * 2) + (6px * 3));
1357+
width: calc(var(--tile-width-mobile, 90px) * 3 + (20px * 2) + (5px * 3));
13581358
}
13591359
.button.size-4 {
1360-
width: calc(var(--tile-width-mobile, 90px) * 4 + (20px * 3) + (6px * 4));
1360+
width: calc(var(--tile-width-mobile, 90px) * 4 + (20px * 3) + (5px * 4));
13611361
}
13621362
.button.size-5 {
1363-
width: calc(var(--tile-width-mobile, 90px) * 5 + (20px * 4) + (6px * 5));
1363+
width: calc(var(--tile-width-mobile, 90px) * 5 + (20px * 4) + (5px * 5));
13641364
}
13651365
.button.size-6 {
1366-
width: calc(var(--tile-width-mobile, 90px) * 6 + (20px * 5) + (6px * 6));
1366+
width: calc(var(--tile-width-mobile, 90px) * 6 + (20px * 5) + (5px * 6));
13671367
}
13681368
13691369
.button.height-2 {
1370-
height: calc(var(--tile-height-mobile, 90px) * 2 + (20px * 1) + (6px * 2));
1370+
height: calc(var(--tile-height-mobile, 90px) * 2 + (20px * 1) + (5px * 2));
13711371
}
13721372
.button.height-3 {
1373-
height: calc(var(--tile-height-mobile, 90px) * 3 + (20px * 2) + (6px * 3));
1373+
height: calc(var(--tile-height-mobile, 90px) * 3 + (20px * 2) + (5px * 3));
13741374
}
13751375
.button.height-4 {
1376-
height: calc(var(--tile-height-mobile, 90px) * 4 + (20px * 3) + (6px * 4));
1376+
height: calc(var(--tile-height-mobile, 90px) * 4 + (20px * 3) + (5px * 4));
13771377
}
13781378
.button.height-5 {
1379-
height: calc(var(--tile-height-mobile, 90px) * 5 + (20px * 4) + (6px * 5));
1379+
height: calc(var(--tile-height-mobile, 90px) * 5 + (20px * 4) + (5px * 5));
13801380
}
13811381
.button.height-6 {
1382-
height: calc(var(--tile-height-mobile, 90px) * 6 + (20px * 5) + (6px * 6));
1382+
height: calc(var(--tile-height-mobile, 90px) * 6 + (20px * 5) + (5px * 6));
13831383
}
13841384
13851385
.button.size-2.no-padding {
1386-
width: calc((var(--tile-width-mobile, 90px) * 2) + (20px * 1) + (6px * 2) + 20px);
1386+
width: calc((var(--tile-width-mobile, 90px) * 2) + (20px * 1) + (5px * 2) + 20px);
13871387
}
13881388
.button.size-3.no-padding {
1389-
width: calc((var(--tile-width-mobile, 90px) * 3) + (20px * 2) + (6px * 3) + 20px);
1389+
width: calc((var(--tile-width-mobile, 90px) * 3) + (20px * 2) + (5px * 3) + 20px);
13901390
}
13911391
.button.size-4.no-padding {
1392-
width: calc((var(--tile-width-mobile, 90px) * 4) + (20px * 3) + (6px * 4) + 20px);
1392+
width: calc((var(--tile-width-mobile, 90px) * 4) + (20px * 3) + (5px * 4) + 20px);
13931393
}
13941394
.button.size-5.no-padding {
1395-
width: calc((var(--tile-width-mobile, 90px) * 5) + (20px * 4) + (6px * 5) + 20px);
1395+
width: calc((var(--tile-width-mobile, 90px) * 5) + (20px * 4) + (5px * 5) + 20px);
13961396
}
13971397
.button.size-6.no-padding {
1398-
width: calc((var(--tile-width-mobile, 90px) * 6) + (20px * 5) + (6px * 6) + 20px);
1398+
width: calc((var(--tile-width-mobile, 90px) * 6) + (20px * 5) + (5px * 6) + 20px);
13991399
}
14001400
14011401
.button.height-2.no-padding {
1402-
height: calc((var(--tile-height-mobile, 90px) * 2) + (20px * 1) + (6px * 2) + 20px);
1402+
height: calc((var(--tile-height-mobile, 90px) * 2) + (20px * 1) + (5px * 2) + 20px);
14031403
}
14041404
.button.height-3.no-padding {
1405-
height: calc((var(--tile-height-mobile, 90px) * 3) + (20px * 2) + (6px * 3) + 20px);
1405+
height: calc((var(--tile-height-mobile, 90px) * 3) + (20px * 2) + (5px * 3) + 20px);
14061406
}
14071407
.button.height-4.no-padding {
1408-
height: calc((var(--tile-height-mobile, 90px) * 4) + (20px * 3) + (6px * 4) + 20px);
1408+
height: calc((var(--tile-height-mobile, 90px) * 4) + (20px * 3) + (5px * 4) + 20px);
14091409
}
14101410
.button.height-5.no-padding {
1411-
height: calc((var(--tile-height-mobile, 90px) * 5) + (20px * 4) + (6px * 5) + 20px);
1411+
height: calc((var(--tile-height-mobile, 90px) * 5) + (20px * 4) + (5px * 5) + 20px);
14121412
}
14131413
.button.height-6.no-padding {
1414-
height: calc((var(--tile-height-mobile, 90px) * 6) + (20px * 5) + (6px * 6) + 20px);
1414+
height: calc((var(--tile-height-mobile, 90px) * 6) + (20px * 5) + (5px * 6) + 20px);
14151415
}
14161416
14171417
.container {

0 commit comments

Comments
 (0)