From 28cc73e936c708d864c4563b1b6c62d0033f070d Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Wed, 21 Feb 2024 00:54:54 +0000 Subject: [PATCH] feat(cxl-lumo-styles): add button pending state --- packages/cxl-lumo-styles/scss/global.scss | 40 +++++++++++++++++++ packages/cxl-lumo-styles/scss/loading.css | 2 +- .../cxl-lumo-styles/elements.stories.js | 8 ++++ 3 files changed, 49 insertions(+), 1 deletion(-) diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index 8e750b2e9..d0a449feb 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -320,3 +320,43 @@ ul.courses-list { } } + +/** + * Set button cursor to pointer, and add pending state. + * + * @see https://app.clickup.com/t/86azbhexr + * @since 2024.02.20 + */ +vaadin-button { + cursor: pointer; + + &[pending] { + &::before{ + background-color: var(--lumo-base-color); + opacity: initial; + } + + &[theme~="primary"] { + color: var(--lumo-primary-color); + background-color: var(--lumo-primary-color); + + &::before { + mask: var(--cxl-loading-spinner-url); + mask-size: 24px; + mask-repeat: no-repeat; + mask-position: center; + } + } + + &[theme~="secondary"] { + &::before { + background-color: var(--lumo-base-color); + background-image: var(--cxl-loading-spinner-url); + background-repeat: no-repeat; + background-position: center; + background-size: 24px; + border: 1px solid var(--lumo-primary-color); + } + } + } +} diff --git a/packages/cxl-lumo-styles/scss/loading.css b/packages/cxl-lumo-styles/scss/loading.css index abd609f8f..e8caab3a4 100644 --- a/packages/cxl-lumo-styles/scss/loading.css +++ b/packages/cxl-lumo-styles/scss/loading.css @@ -2,7 +2,7 @@ * App should inline this in `
Basic
${Label}
Disabled
@@ -25,8 +29,12 @@ export const VaadinButton = ({ Label }) => html` ${Label}
Primary Contrast
${Label} +
Primary Pending
+ ${Label}
Secondary
${Label} +
Secondary Pending
+ ${Label}
Tertiary
${Label}
Tertiary inline