From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from gate001.proxmox.com (gate001.proxmox.com [45.144.208.40]) by lore.proxmox.com (Postfix) with ESMTPS id 2C2AF1FF15B for ; Mon, 10 Aug 2026 16:35:41 +0200 (CEST) Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1]) by gate001.proxmox.com (Proxmox) with ESMTP id D1F4021796; Mon, 10 Aug 2026 16:35:40 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 1/4] navigation rail: style the expand button Date: Mon, 10 Aug 2026 16:34:51 +0200 Message-ID: <20260810143536.31163-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260810143536.31163-1-d.csapak@proxmox.com> References: <20260810143536.31163-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 1.077 Adjusted score from AWL reputation of From: address DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment (newer systems) RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: FOTTRPVCX7RRXTC723QPKNU66IAEDJIH X-Message-ID-Hash: FOTTRPVCX7RRXTC723QPKNU66IAEDJIH X-MailFrom: d.csapak@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: Style the optional expand button the widget toolkit's NavigationRail renders at the top of the rail. The action icon defaults to the accent color, which would compete with the selected item, so draw it in the rail's own foreground color instead. Following Material, the expanded variant aligns it at the inline start, lined up with the item icons. Also remove the background circle color that stems from the ActionIcon. Signed-off-by: Dominik Csapak --- scss/_navigation_rail.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/scss/_navigation_rail.scss b/scss/_navigation_rail.scss index 588fab7..9bb664a 100644 --- a/scss/_navigation_rail.scss +++ b/scss/_navigation_rail.scss @@ -17,6 +17,16 @@ @include elevation-background-color($level: 0); + .pwt-navigation-rail-expand-button { + .pwt-action-icon { + // the accent color is reserved for the selected item + color: var(--pwt-color-on-surface); + + // hide the background for the action icon + @include state-layer($base: transparent, $color: transparent); + } + } + .pwt-navigation-rail-tabs { display: flex; flex-direction: column; @@ -99,6 +109,13 @@ min-width: 220px; max-width: 360px; + // the expanded rail lines its content up at the inline start, the margin matches the item + // padding so the button keeps sitting above the item icons + .pwt-navigation-rail-expand-button { + align-self: flex-start; + margin-inline-start: var(--pwt-spacer-2); + } + .pwt-navigation-rail-tabs { align-self: stretch; -- 2.47.3