diff --git a/ui/demo-pwa/src/page-chat.ts b/ui/demo-pwa/src/page-chat.ts index 291cab18f..44dda671d 100644 --- a/ui/demo-pwa/src/page-chat.ts +++ b/ui/demo-pwa/src/page-chat.ts @@ -136,8 +136,10 @@ export class AlwatrPageHome extends AlwatrSmartElement {
icon buttons
+
diff --git a/ui/ui-kit/src/icon-button/standard-icon-button.ts b/ui/ui-kit/src/icon-button/standard-icon-button.ts
index 3084545e2..e6e8445c9 100644
--- a/ui/ui-kit/src/icon-button/standard-icon-button.ts
+++ b/ui/ui-kit/src/icon-button/standard-icon-button.ts
@@ -15,60 +15,67 @@ declare global {
export class AlwatrStandardIconButton extends AlwatrDummyElement {
static override styles = css`
:host {
+ position: relative;
display: inline-flex;
user-select: none;
align-items: center;
justify-content: center;
vertical-align: middle;
- flex: 0 0 auto;
-
- position: relative;
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: auto;
cursor: pointer;
color: var(--md-sys-color-on-surface-variant);
- font-size: var(--md-sys-spacing-track-3);
- width: var(--md-sys-spacing-track-6);
- height: var(--md-sys-spacing-track-6);
+ background-color: transparent;
+ width: var(--md-sys-spacing-track-5);
+ height: var(--md-sys-spacing-track-5);
border-radius: 50%;
- outline: none;
+ outline: 0;
overflow: hidden;
- z-index: 1;
-
+ overflow: clip;
+ z-index: var(--md-sys-zindex-default);
-webkit-tap-highlight-color: transparent;
}
+
:host::before {
content: '';
position: absolute;
- z-index: -1;
+ z-index: var(--md-sys-zindex-below);
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
inset: 0;
opacity: 0;
-
- transition: opacity 150ms linear;
-
+ transition: opacity var(--md-sys-motion-duration-small-out) var(--md-sys-motion-easing-linear);
background-color: var(--md-sys-color-on-surface-variant);
}
+
:host(:hover)::before {
opacity: var(--md-sys-state-hover-state-layer-opacity);
+ transition-duration: var(--md-sys-motion-duration-small-in);
}
- :host(:focus)::before {
- opacity: var(--md-sys-state-focus-state-layer-opacity);
- }
+
:host(:active)::before {
- transition: opacity 50ms linear;
opacity: var(--md-sys-state-pressed-state-layer-opacity);
+ transition-duration: 0ms;
+ }
+
+ :host(:focus)::before {
+ opacity: var(--md-sys-state-focus-state-layer-opacity);
+ transition-duration: var(--md-sys-motion-duration-small-in);
}
- /* :host(:hover) alwatr-icon {
- color: var(--md-sys-color-surface-variant);
+ alwatr-icon {
+ width: var(--md-sys-spacing-track-3);
+ height: var(--md-sys-spacing-track-3);
}
- :host(:focus) alwatr-icon {
- color: var(--md-sys-color-primary);
- } */
`;
@property() icon?: string;
override render(): unknown {
- return html`