From 62de708b2b0f9cb6afd0408219919c52a6142851 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 19 Oct 2022 10:49:47 +0200 Subject: [PATCH] Align border radius (#14124) --- src/components/ha-expansion-panel.ts | 2 +- src/panels/config/areas/ha-config-area-page.ts | 2 +- .../automation/condition/ha-automation-condition-row.ts | 4 ++-- .../automation/trigger/ha-automation-trigger-row.ts | 4 ++-- src/panels/config/ha-panel-config.ts | 4 ---- src/panels/config/integrations/ha-integration-card.ts | 4 ++++ src/panels/config/integrations/ha-integration-header.ts | 4 ++-- src/panels/lovelace/cards/hui-entities-card.ts | 8 ++++---- src/panels/lovelace/editor/card-editor/hui-card-picker.ts | 4 ++-- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts index 8c0fd25539..d6e792bf52 100644 --- a/src/components/ha-expansion-panel.ts +++ b/src/components/ha-expansion-panel.ts @@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement { --ha-card-border-color, var(--divider-color, #e0e0e0) ); - border-radius: var(--ha-card-border-radius, 4px); + border-radius: var(--ha-card-border-radius, 16px); } .summary-icon { diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts index bf3cbacac8..c3ff340692 100644 --- a/src/panels/config/areas/ha-config-area-page.ts +++ b/src/panels/config/areas/ha-config-area-page.ts @@ -647,7 +647,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) { } img { - border-radius: var(--ha-card-border-radius, 4px); + border-radius: var(--ha-card-border-radius, 16px); width: 100%; } diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts index 9fe75cd479..e1b861358d 100644 --- a/src/panels/config/automation/condition/ha-automation-condition-row.ts +++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts @@ -493,8 +493,8 @@ export default class HaAutomationConditionRow extends LitElement { overflow: hidden; transition: max-height 0.3s; text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 4px); - border-top-left-radius: var(--ha-card-border-radius, 4px); + border-top-right-radius: var(--ha-card-border-radius, 16px); + border-top-left-radius: var(--ha-card-border-radius, 16px); } .testing.active { max-height: 100px; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index 9ac8ad7f9d..1e448766c9 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -605,8 +605,8 @@ export default class HaAutomationTriggerRow extends LitElement { overflow: hidden; transition: max-height 0.3s; text-align: center; - border-top-right-radius: var(--ha-card-border-radius, 4px); - border-top-left-radius: var(--ha-card-border-radius, 4px); + border-top-right-radius: var(--ha-card-border-radius, 16px); + border-top-left-radius: var(--ha-card-border-radius, 16px); } .triggered.active { max-height: 100px; diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index eb952f4b6c..f1d4f62a60 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -542,10 +542,6 @@ class HaPanelConfig extends HassRouterPage { "--app-header-border-bottom", "1px solid var(--divider-color)" ); - this.style.setProperty( - "--ha-card-border-radius", - "var(--ha-config-card-border-radius, 8px)" - ); } protected updatePageEl(el) { diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts index b1bdf91318..911c5af383 100644 --- a/src/panels/config/integrations/ha-integration-card.ts +++ b/src/panels/config/integrations/ha-integration-card.ts @@ -929,6 +929,10 @@ export class HaIntegrationCard extends LitElement { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; } + paper-listbox { + border-radius: 0 0 var(--ha-card-border-radius, 16px) + var(--ha-card-border-radius, 16px); + } @media (min-width: 563px) { ha-card.group { position: relative; diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts index f954b5adf0..46f156152f 100644 --- a/src/panels/config/integrations/ha-integration-header.ts +++ b/src/panels/config/integrations/ha-integration-header.ts @@ -129,8 +129,8 @@ export class HaIntegrationHeader extends LitElement { color: var(--text-on-state-color); text-align: center; padding: 2px; - border-top-left-radius: var(--ha-card-border-radius, 4px); - border-top-right-radius: var(--ha-card-border-radius, 4px); + border-top-left-radius: var(--ha-card-border-radius, 16px); + border-top-right-radius: var(--ha-card-border-radius, 16px); } .header { display: flex; diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts index d5bbd66b3d..2a2bc515e2 100644 --- a/src/panels/lovelace/cards/hui-entities-card.ts +++ b/src/panels/lovelace/cards/hui-entities-card.ts @@ -278,15 +278,15 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard { } .header { - border-top-left-radius: var(--ha-card-border-radius, 2px); - border-top-right-radius: var(--ha-card-border-radius, 2px); + border-top-left-radius: var(--ha-card-border-radius, 16px); + border-top-right-radius: var(--ha-card-border-radius, 16px); margin-bottom: 16px; overflow: hidden; } .footer { - border-bottom-left-radius: var(--ha-card-border-radius, 2px); - border-bottom-right-radius: var(--ha-card-border-radius, 2px); + border-bottom-left-radius: var(--ha-card-border-radius, 16px); + border-bottom-right-radius: var(--ha-card-border-radius, 16px); margin-top: -16px; overflow: hidden; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 049064281d..1190fc1154 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -352,7 +352,7 @@ export class HuiCardPicker extends LitElement { max-width: 500px; display: flex; flex-direction: column; - border-radius: var(--ha-card-border-radius, 4px); + border-radius: var(--ha-card-border-radius, 16px); background: var(--primary-background-color, #fafafa); cursor: pointer; position: relative; @@ -407,7 +407,7 @@ export class HuiCardPicker extends LitElement { box-sizing: border-box; border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color)); - border-radius: var(--ha-card-border-radius, 4px); + border-radius: var(--ha-card-border-radius, 16px); } .manual {