@vonage/vivid 3.0.0-next.48 → 3.0.0-next.49
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fab/index.js +1 -1
- package/package.json +1 -1
package/fab/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/object-keys.js';
|
|
|
20
20
|
import '../shared/form-associated.js';
|
|
21
21
|
import '../shared/aria-global.js';
|
|
22
22
|
|
|
23
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n font-size:
|
|
23
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .control {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n.density-extended .icon {\n font-size: 24px;\n}\n.icon:not(.density-extended) .icon {\n font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
24
24
|
styleInject(css_248z);
|
|
25
25
|
|
|
26
26
|
class Fab extends Button {}
|