From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id EFC031FF13C for ; Thu, 05 Mar 2026 12:21:04 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 7ED59605C; Thu, 5 Mar 2026 12:22:10 +0100 (CET) From: Shannon Sterz To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 3/3] docs: run `make refresh` Date: Thu, 5 Mar 2026 12:21:57 +0100 Message-ID: <20260305112158.220557-4-s.sterz@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260305112158.220557-1-s.sterz@proxmox.com> References: <20260305112158.220557-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1772709694995 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.096 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment 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: 7LC2FBWT6EMU6MZVOIB65L7U7L2NXJIG X-Message-ID-Hash: 7LC2FBWT6EMU6MZVOIB65L7U7L2NXJIG X-MailFrom: s.sterz@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: Signed-off-by: Shannon Sterz --- Documentation.md | 26 ++++++- docs/css/crisp-yew-style.css | 115 +++++++++++++++++++++++------ docs/css/desktop-yew-style.css | 115 +++++++++++++++++++++++------ docs/css/material-yew-style.css | 126 +++++++++++++++++++++++++------- 4 files changed, 306 insertions(+), 76 deletions(-) diff --git a/Documentation.md b/Documentation.md index c37d823..8d139d5 100644 --- a/Documentation.md +++ b/Documentation.md @@ -108,6 +108,10 @@ changes the colors of the widget. The `pwt-scheme-` and `pwt-scheme--container` helper classes can be used to set those variables. +There is also the `pwt-default-colors` class to set the `color` and +`background-color` properties directly to the `--pwt-color` and +`--pwt-color-background` respectively. + A similar scheme is used for widgets with an associated accent color, using the following CSS variables: @@ -234,6 +238,8 @@ This theme uses the [material design baseline colors](https://m3.material.io/sty - use elevated box with box-shadow +`pwt-side-dialog-bottom` +: overwrite corner radius ### The "Crisp" Theme @@ -397,6 +403,7 @@ For the following elevation levels: 0, 1, 2, 3, 4, 5 - `pwt-opacity-`: set `opacity` property to percentage for values in - 0, 25, 50, 75, 100 +- `pwt-delay-visibility`: delay visibility by animating opacity from 0 to 1 ## Content Spacer Class @@ -456,9 +463,26 @@ The following classes can be used to adopt the button style for mobile/touch dev ##### FAB Menus +Class `pwt-fab-menu-outer` + +This class is used to arrange the FAB and the menu. + +Class `pwt-fab-menu-main` + +This class is the container for the main button, and uses for aligning +the close button correctly for different directions and sizes. + Class `pwt-fab-menu-container` -This class is used to arrange FABs as a menu. +This class is the container for the fab menu items. + +Classes `pwt-fab-direction-{up,down}` + +These are used to control the layout of the FAB to the menu and the direction of the animations + +Classes `pwt-fab-align-{start,end}` + +These are used to align the button according to the alignment ## Panel Widget diff --git a/docs/css/crisp-yew-style.css b/docs/css/crisp-yew-style.css index 3f2f310..7485308 100644 --- a/docs/css/crisp-yew-style.css +++ b/docs/css/crisp-yew-style.css @@ -359,6 +359,11 @@ table { --pwt-state-layer-opacity-5: 14%; } +/* Opacity of elements in certain states. */ +:root { + --pwt-disabled-opacity: 0.38; +} + /* Font setup */ @font-face { font-family: "Roboto Flex"; @@ -4013,7 +4018,7 @@ h6, --pwt-color-background: var(--pwt-color-inverse-surface) ; --pwt-color: var(--pwt-color-on-inverse-surface) ; cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } button, @@ -4049,7 +4054,7 @@ button, } .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0); } .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) { @@ -4815,6 +4820,68 @@ tr.row-cursor { cursor: pointer; } +.pwt-date-panel { + display: grid; + text-align: center; + align-items: center; +} +.pwt-date-panel .pwt-date-panel-item { + font-family: "Roboto Flex"; + font-size: 14px; + font-weight: 500; + font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500; + line-height: 17px; + --pwt-color-background: var(--pwt-color-neutral) ; + --pwt-color: var(--pwt-color-on-neutral) ; + color: var(--pwt-color); + background-color: var(--pwt-color-background); + cursor: pointer; + padding: var(--pwt-spacer-1); + border-radius: var(--pwt-shape-corner-small) !important; + min-width: 2em; +} +.pwt-date-panel .pwt-date-panel-item:hover { + --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) ); + background-color: var(--pwt-elevated-background-color); +} +.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused { + outline: 2px solid var(--pwt-color-on-surface); + outline-offset: -2px; +} +.pwt-date-panel .pwt-date-panel-item.selected { + --pwt-color-background: var(--pwt-color-primary) ; + --pwt-color: var(--pwt-color-on-primary) ; +} +.pwt-date-panel .pwt-date-panel-item.disabled { + opacity: var(--pwt-disabled-opacity); + cursor: default !important; +} +.pwt-date-panel .pwt-date-panel-item.other-month { + opacity: 0.5; +} +.pwt-date-panel .pwt-date-panel-item.pwt-today { + --pwt-color-background: var(--pwt-color-secondary-container) ; + --pwt-color: var(--pwt-color-on-secondary-container) ; +} +.pwt-date-panel .pwt-date-panel-header { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 400; + font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400; + line-height: 14px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} +.pwt-date-panel .pwt-date-panel-week-number { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 400; + font-variation-settings: "opsz" 11, "wdth" 100, "wght" 400; + line-height: 14px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} + dialog.pwt-outer-dialog { overflow: visible; background-color: transparent; @@ -4862,33 +4929,33 @@ dialog.pwt-outer-dialog > .pwt-dialog { touch-action: none; } .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - width: 5px; + width: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - height: 5px; + height: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.west { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); left: 0px; cursor: w-resize; } .pwt-dialog .dialog-resize-handle.east { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); right: 0px; cursor: e-resize; } .pwt-dialog .dialog-resize-handle.north { top: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: n-resize; } .pwt-dialog .dialog-resize-handle.south { bottom: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: s-resize; } .pwt-dialog .dialog-resize-handle.north-west { @@ -5153,7 +5220,7 @@ input[aria-disabled=true] { } .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input.pwt-input-type-number .spinner i { @@ -5180,7 +5247,7 @@ input[aria-disabled=true] { } .pwt-label-disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-switch { @@ -5234,7 +5301,7 @@ input[aria-disabled=true] { } .pwt-switch.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox-state { @@ -5288,7 +5355,7 @@ input[aria-disabled=true] { } .pwt-checkbox.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox.disabled.checked { color: var(--pwt-color); @@ -5329,7 +5396,7 @@ input[aria-disabled=true] { } .pwt-radio-button.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-textarea { @@ -5357,7 +5424,7 @@ input[aria-disabled=true] { } .pwt-textarea.disabled, .pwt-textarea:disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input-display { @@ -5475,7 +5542,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible { } ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menubar .pwt-menubar-item-icon { font-size: 16px; @@ -5513,7 +5580,7 @@ ul.pwt-menu .pwt-menu-item { } ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menu .pwt-menu-item:focus-visible { outline: 2px solid var(--pwt-color-focus); @@ -5653,7 +5720,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-mini-scroll .pwt-mini-scroll-right-arrow { overflow: hidden; @@ -5678,7 +5745,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } /* Miscellaneous helper classes */ @@ -5888,7 +5955,7 @@ a:focus-within, a:hover { background-color: var(--pwt-elevated-background-color); } .pwt-nav-pills .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-nav-pills a { @@ -5945,7 +6012,7 @@ a:focus-within, a:hover { color: var(--pwt-color-primary); } .pwt-tab-material .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-tab-material a { diff --git a/docs/css/desktop-yew-style.css b/docs/css/desktop-yew-style.css index 9304118..a388821 100644 --- a/docs/css/desktop-yew-style.css +++ b/docs/css/desktop-yew-style.css @@ -366,6 +366,11 @@ table { --pwt-state-layer-opacity-5: 14%; } +/* Opacity of elements in certain states. */ +:root { + --pwt-disabled-opacity: 0.38; +} + /* Font setup */ @font-face { font-family: "Roboto Flex"; @@ -4020,7 +4025,7 @@ h6, --pwt-color-background: var(--pwt-color-inverse-surface) ; --pwt-color: var(--pwt-color-on-inverse-surface) ; cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } button, @@ -4056,7 +4061,7 @@ button, } .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0); } .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) { @@ -4822,6 +4827,68 @@ tr.row-cursor { cursor: pointer; } +.pwt-date-panel { + display: grid; + text-align: center; + align-items: center; +} +.pwt-date-panel .pwt-date-panel-item { + font-family: "Roboto Flex"; + font-size: 14px; + font-weight: 500; + font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500; + line-height: 20px; + --pwt-color-background: var(--pwt-color-neutral) ; + --pwt-color: var(--pwt-color-on-neutral) ; + color: var(--pwt-color); + background-color: var(--pwt-color-background); + cursor: pointer; + padding: var(--pwt-spacer-1); + border-radius: var(--pwt-shape-corner-small) !important; + min-width: 2em; +} +.pwt-date-panel .pwt-date-panel-item:hover { + --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) ); + background-color: var(--pwt-elevated-background-color); +} +.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused { + outline: 2px solid var(--pwt-color-on-surface); + outline-offset: -2px; +} +.pwt-date-panel .pwt-date-panel-item.selected { + --pwt-color-background: var(--pwt-color-primary) ; + --pwt-color: var(--pwt-color-on-primary) ; +} +.pwt-date-panel .pwt-date-panel-item.disabled { + opacity: var(--pwt-disabled-opacity); + cursor: default !important; +} +.pwt-date-panel .pwt-date-panel-item.other-month { + opacity: 0.5; +} +.pwt-date-panel .pwt-date-panel-item.pwt-today { + --pwt-color-background: var(--pwt-color-secondary-container) ; + --pwt-color: var(--pwt-color-on-secondary-container) ; +} +.pwt-date-panel .pwt-date-panel-header { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 500; + font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500; + line-height: 16px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} +.pwt-date-panel .pwt-date-panel-week-number { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 500; + font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500; + line-height: 16px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} + dialog.pwt-outer-dialog { overflow: visible; background-color: transparent; @@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog { touch-action: none; } .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - width: 5px; + width: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - height: 5px; + height: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.west { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); left: 0px; cursor: w-resize; } .pwt-dialog .dialog-resize-handle.east { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); right: 0px; cursor: e-resize; } .pwt-dialog .dialog-resize-handle.north { top: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: n-resize; } .pwt-dialog .dialog-resize-handle.south { bottom: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: s-resize; } .pwt-dialog .dialog-resize-handle.north-west { @@ -5160,7 +5227,7 @@ input[aria-disabled=true] { } .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input.pwt-input-type-number .spinner i { @@ -5187,7 +5254,7 @@ input[aria-disabled=true] { } .pwt-label-disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-switch { @@ -5241,7 +5308,7 @@ input[aria-disabled=true] { } .pwt-switch.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox-state { @@ -5295,7 +5362,7 @@ input[aria-disabled=true] { } .pwt-checkbox.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox.disabled.checked { color: var(--pwt-color); @@ -5336,7 +5403,7 @@ input[aria-disabled=true] { } .pwt-radio-button.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-textarea { @@ -5364,7 +5431,7 @@ input[aria-disabled=true] { } .pwt-textarea.disabled, .pwt-textarea:disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input-display { @@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible { } ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menubar .pwt-menubar-item-icon { font-size: 16px; @@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item { } ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menu .pwt-menu-item:focus-visible { outline: 2px solid var(--pwt-color-focus); @@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-mini-scroll .pwt-mini-scroll-right-arrow { overflow: hidden; @@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } /* Miscellaneous helper classes */ @@ -5895,7 +5962,7 @@ a:focus-within, a:hover { background-color: var(--pwt-elevated-background-color); } .pwt-nav-pills .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-nav-pills a { @@ -5952,7 +6019,7 @@ a:focus-within, a:hover { color: var(--pwt-color-primary); } .pwt-tab-material .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-tab-material a { diff --git a/docs/css/material-yew-style.css b/docs/css/material-yew-style.css index 112e241..b43c220 100644 --- a/docs/css/material-yew-style.css +++ b/docs/css/material-yew-style.css @@ -366,6 +366,11 @@ table { --pwt-state-layer-opacity-5: 14%; } +/* Opacity of elements in certain states. */ +:root { + --pwt-disabled-opacity: 0.38; +} + /* Font setup */ @font-face { font-family: "Roboto Flex"; @@ -4020,7 +4025,7 @@ h6, --pwt-color-background: var(--pwt-color-inverse-surface) ; --pwt-color: var(--pwt-color-on-inverse-surface) ; cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } button, @@ -4056,7 +4061,7 @@ button, } .pwt-button.disabled, .pwt-button:disabled, .pwt-button[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); box-shadow: var(--pwt-color-shadow) 0px calc(var(--pwt-elevation-level-0) / 2) var(--pwt-elevation-level-0); } .pwt-button.disabled:not(.pwt-button-text), .pwt-button:disabled:not(.pwt-button-text), .pwt-button[aria-disabled=true]:not(.pwt-button-text) { @@ -4822,6 +4827,68 @@ tr.row-cursor { cursor: pointer; } +.pwt-date-panel { + display: grid; + text-align: center; + align-items: center; +} +.pwt-date-panel .pwt-date-panel-item { + font-family: "Roboto Flex"; + font-size: 14px; + font-weight: 500; + font-variation-settings: "opsz" 14, "wdth" 110, "wght" 500; + line-height: 20px; + --pwt-color-background: var(--pwt-color-neutral) ; + --pwt-color: var(--pwt-color-on-neutral) ; + color: var(--pwt-color); + background-color: var(--pwt-color-background); + cursor: pointer; + padding: var(--pwt-spacer-1); + border-radius: var(--pwt-shape-corner-small) !important; + min-width: 2em; +} +.pwt-date-panel .pwt-date-panel-item:hover { + --pwt-elevated-background-color: color-mix( in srgb, var(--pwt-color) var(--pwt-state-layer-opacity-hover), var(--pwt-color-background) ); + background-color: var(--pwt-elevated-background-color); +} +.pwt-date-panel .pwt-date-panel-item:focus, .pwt-date-panel .pwt-date-panel-item.focused { + outline: 2px solid var(--pwt-color-on-surface); + outline-offset: -2px; +} +.pwt-date-panel .pwt-date-panel-item.selected { + --pwt-color-background: var(--pwt-color-primary) ; + --pwt-color: var(--pwt-color-on-primary) ; +} +.pwt-date-panel .pwt-date-panel-item.disabled { + opacity: var(--pwt-disabled-opacity); + cursor: default !important; +} +.pwt-date-panel .pwt-date-panel-item.other-month { + opacity: 0.5; +} +.pwt-date-panel .pwt-date-panel-item.pwt-today { + --pwt-color-background: var(--pwt-color-secondary-container) ; + --pwt-color: var(--pwt-color-on-secondary-container) ; +} +.pwt-date-panel .pwt-date-panel-header { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 500; + font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500; + line-height: 16px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} +.pwt-date-panel .pwt-date-panel-week-number { + font-family: "Roboto Flex"; + font-size: 11px; + font-weight: 500; + font-variation-settings: "opsz" 11, "wdth" 130, "wght" 500; + line-height: 16px; + opacity: 0.5; + padding: var(--pwt-spacer-1); +} + dialog.pwt-outer-dialog { overflow: visible; background-color: transparent; @@ -4869,33 +4936,33 @@ dialog.pwt-outer-dialog > .pwt-dialog { touch-action: none; } .pwt-dialog .dialog-resize-handle.west, .pwt-dialog .dialog-resize-handle.east, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - width: 5px; + width: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.north, .pwt-dialog .dialog-resize-handle.south, .pwt-dialog .dialog-resize-handle.north-east, .pwt-dialog .dialog-resize-handle.north-west, .pwt-dialog .dialog-resize-handle.south-east, .pwt-dialog .dialog-resize-handle.south-west { - height: 5px; + height: var(--pwt-spacer-2); } .pwt-dialog .dialog-resize-handle.west { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); left: 0px; cursor: w-resize; } .pwt-dialog .dialog-resize-handle.east { - top: 5px; - bottom: 5px; + top: var(--pwt-spacer-2); + bottom: var(--pwt-spacer-2); right: 0px; cursor: e-resize; } .pwt-dialog .dialog-resize-handle.north { top: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: n-resize; } .pwt-dialog .dialog-resize-handle.south { bottom: 0px; - left: 5px; - right: 5px; + left: var(--pwt-spacer-2); + right: var(--pwt-spacer-2); cursor: s-resize; } .pwt-dialog .dialog-resize-handle.north-west { @@ -5160,7 +5227,7 @@ input[aria-disabled=true] { } .pwt-input.disabled, .pwt-input:disabled, .pwt-input[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input.pwt-input-type-number .spinner i { @@ -5187,7 +5254,7 @@ input[aria-disabled=true] { } .pwt-label-disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-switch { @@ -5241,7 +5308,7 @@ input[aria-disabled=true] { } .pwt-switch.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox-state { @@ -5295,7 +5362,7 @@ input[aria-disabled=true] { } .pwt-checkbox.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-checkbox.disabled.checked { color: var(--pwt-color); @@ -5336,7 +5403,7 @@ input[aria-disabled=true] { } .pwt-radio-button.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-textarea { @@ -5364,7 +5431,7 @@ input[aria-disabled=true] { } .pwt-textarea.disabled, .pwt-textarea:disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-input-display { @@ -5482,7 +5549,7 @@ ul.pwt-menubar .pwt-menubar-item:focus-visible { } ul.pwt-menubar .pwt-menubar-item[disabled], ul.pwt-menubar .pwt-menubar-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menubar .pwt-menubar-item-icon { font-size: 16px; @@ -5520,7 +5587,7 @@ ul.pwt-menu .pwt-menu-item { } ul.pwt-menu .pwt-menu-item[disabled], ul.pwt-menu .pwt-menu-item[aria-disabled=true] { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } ul.pwt-menu .pwt-menu-item:focus-visible { outline: 2px solid var(--pwt-color-focus); @@ -5660,7 +5727,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-left-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } .pwt-mini-scroll .pwt-mini-scroll-right-arrow { overflow: hidden; @@ -5685,7 +5752,7 @@ ul.pwt-menu .pwt-menu-item-arrow:dir(rtl) { } .pwt-mini-scroll .pwt-mini-scroll-right-arrow.visible.disabled { cursor: auto; - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); } /* Miscellaneous helper classes */ @@ -5895,7 +5962,7 @@ a:focus-within, a:hover { background-color: var(--pwt-elevated-background-color); } .pwt-nav-pills .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-nav-pills a { @@ -5952,7 +6019,7 @@ a:focus-within, a:hover { color: var(--pwt-color-primary); } .pwt-tab-material .pwt-nav-link.disabled { - opacity: 0.5; + opacity: var(--pwt-disabled-opacity); cursor: auto; } .pwt-tab-material a { @@ -6754,13 +6821,18 @@ ul.pwt-menubar { } .pwt-tab-material .pwt-nav-link span { display: flex; - flex-direction: column; align-items: center; - gap: 0; } -.pwt-tab-material .pwt-nav-link span:before { +.pwt-tab-material.primary .pwt-nav-link span { + gap: 0; + flex-direction: column; +} +.pwt-tab-material.primary .pwt-nav-link span:before { font-size: 20px; } +.pwt-tab-material.secondary span { + flex-direction: row; +} .pwt-datatable-content:not(.table-borderless) tr { border-color: var(--pwt-elevated-background-color); -- 2.47.3