Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2026-05-08 17:28:46 +01:00
Code Activity

Use space vars (#27623)

Browse Source 
Co-authored-by: Aidan Timson <aidan@timmo.dev>
This commit is contained in:
Wendelin
2025-10-24 11:43:49 +02:00
committed by GitHub
parent a6ef3a26da
commit c139ec22f9
2 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ha-sidebar.ts
+52 -30
View File
@@ -29,6 +29,7 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { toggleAttribute } from "../common/dom/toggle_attribute";
import { stringCompare } from "../common/string/compare";
import { computeRTL } from "../common/util/compute_rtl";
import { throttle } from "../common/util/throttle";
import { subscribeFrontendUserData } from "../data/frontend";
import type { ActionHandlerDetail } from "../data/lovelace/action_handler";
@@ -536,11 +537,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private _renderUserItem(selectedPanel: string) {
const isRTL = computeRTL(this.hass);
return html`
<ha-md-list-item
href="/profile"
type="link"
class="user ${selectedPanel === "profile" ? " selected" : ""}"
class=${classMap({
user: true,
selected: selectedPanel === "profile",
rtl: isRTL,
})}
@mouseenter=${this._itemMouseEnter}
@mouseleave=${this._itemMouseLeave}
>
@@ -666,7 +673,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
tooltip.style.display = "block";
tooltip.style.position = "fixed";
tooltip.style.top = `${top}px`;
tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`;
}
private _hideTooltip() {
@@ -705,13 +712,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
background-color: var(--sidebar-background-color);
width: 100%;
box-sizing: border-box;
padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
padding-bottom: calc(
14px + var(--safe-area-inset-bottom, var(--ha-space-0))
);
}
.menu {
height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
height: calc(
var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
);
box-sizing: border-box;
display: flex;
padding: 0 4px;
padding: 0 var(--ha-space-1);
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: var(--ha-font-weight-normal);
@@ -726,13 +737,17 @@ class HaSidebar extends SubscribeMixin(LitElement) {
);
font-size: var(--ha-font-size-xl);
align-items: center;
padding-left: calc(4px + var(--safe-area-inset-left, 0px));
padding-inline-start: calc(4px + var(--safe-area-inset-left, 0px));
padding-left: calc(
var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
);
padding-inline-start: calc(
var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
);
padding-inline-end: initial;
padding-top: var(--safe-area-inset-top, 0px);
padding-top: var(--safe-area-inset-top, var(--ha-space-0));
}
:host([expanded]) .menu {
width: calc(256px + var(--safe-area-inset-left, 0px));
width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0)));
}
:host([narrow][expanded]) .menu {
width: 100%;
@@ -748,8 +763,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
display: none;
}
:host([narrow]) .title {
margin: 0;
padding: 0 16px;
margin: var(--ha-space-0);
padding: var(--ha-space-0) var(--ha-space-4);
}
:host([expanded]) .title {
display: initial;
@@ -761,13 +776,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-fade-in,
ha-md-list {
height: calc(
100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
100% - var(--header-height) - var(
--safe-area-inset-top,
var(--ha-space-0)
) -
132px
);
}
ha-fade-in {
padding: 4px 0;
padding: var(--ha-space-1) var(--ha-space-0);
box-sizing: border-box;
display: flex;
justify-content: center;
@@ -777,29 +795,29 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-md-list {
overflow-x: hidden;
background: none;
margin-left: var(--safe-area-inset-left, 0px);
margin-left: var(--safe-area-inset-left, var(--ha-space-0));
}
ha-md-list-item {
flex-shrink: 0;
box-sizing: border-box;
margin: 4px;
margin: var(--ha-space-1);
border-radius: var(--ha-border-radius-sm);
--md-list-item-one-line-container-height: 40px;
--md-list-item-one-line-container-height: var(--ha-space-10);
--md-list-item-top-space: 0;
--md-list-item-bottom-space: 0;
width: 48px;
width: var(--ha-space-12);
position: relative;
--md-list-item-label-text-color: var(--sidebar-text-color);
--md-list-item-leading-space: 12px;
--md-list-item-trailing-space: 12px;
--md-list-item-leading-icon-size: 24px;
--md-list-item-leading-space: var(--ha-space-3);
--md-list-item-trailing-space: var(--ha-space-3);
--md-list-item-leading-icon-size: var(--ha-space-6);
}
:host([expanded]) ha-md-list-item {
width: 248px;
}
:host([narrow][expanded]) ha-md-list-item {
width: calc(240px - var(--safe-area-inset-left, 0px));
width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0)));
}
ha-md-list-item.selected {
@@ -823,7 +841,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-icon[slot="start"],
ha-svg-icon[slot="start"] {
width: 24px;
width: var(--ha-space-6);
flex-shrink: 0;
color: var(--sidebar-icon-color);
}
@@ -856,7 +874,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
display: flex;
justify-content: center;
align-items: center;
min-width: 8px;
min-width: var(--ha-space-2);
border-radius: var(--ha-border-radius-xl);
font-weight: var(--ha-font-weight-normal);
line-height: normal;
@@ -867,22 +885,26 @@ class HaSidebar extends SubscribeMixin(LitElement) {
ha-svg-icon + .badge {
position: absolute;
top: 4px;
top: var(--ha-space-1);
left: 26px;
border-radius: var(--ha-border-radius-md);
font-size: 0.65em;
line-height: var(--ha-line-height-expanded);
padding: 0 4px;
padding: var(--ha-space-0) var(--ha-space-1);
}
ha-md-list-item.user {
--md-list-item-leading-icon-size: 40px;
--md-list-item-leading-space: 4px;
--md-list-item-leading-icon-size: var(--ha-space-10);
--md-list-item-leading-space: var(--ha-space-1);
}
ha-md-list-item.user.rtl {
--md-list-item-leading-space: var(--ha-space-3);
}
ha-user-badge {
flex-shrink: 0;
margin-right: -8px;
margin-right: calc(var(--ha-space-2) * -1);
}
.spacer {
@@ -894,7 +916,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
color: var(--sidebar-text-color);
font-size: var(--ha-font-size-m);
font-weight: var(--ha-font-weight-medium);
padding: 16px;
padding: var(--ha-space-4);
white-space: nowrap;
}
@@ -906,7 +928,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
white-space: nowrap;
color: var(--sidebar-background-color);
background-color: var(--sidebar-text-color);
padding: 4px;
padding: var(--ha-space-1);
font-weight: var(--ha-font-weight-medium);
}
src/panels/config/labels/ha-config-labels.ts
+2 -2
View File
@@ -115,8 +115,8 @@ export class HaConfigLabels extends LitElement {
borderRadius: "var(--ha-border-radius-md)",
border: "1px solid var(--outline-color)",
boxSizing: "border-box",
width: "20px",
height: "20px",
width: "var(--ha-space-5)",
height: "var(--ha-space-5)",
})}
></div>`
: nothing,