buttonpackage.theme.lumo.vaadin-button-styles.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-webcomponents Show documentation
Show all versions of vaadin-webcomponents Show documentation
Mvnpm composite: Vaadin webcomponents
The newest version!
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
const button = css`
:host {
/* Sizing */
--lumo-button-size: var(--lumo-size-m);
min-width: var(--vaadin-button-min-width, calc(var(--_button-size) * 2));
height: var(--_button-size);
padding: var(--vaadin-button-padding, 0 calc(var(--_button-size) / 3 + var(--lumo-border-radius-m) / 2));
margin: var(--vaadin-button-margin, var(--lumo-space-xs) 0);
box-sizing: border-box;
/* Style */
font-family: var(--lumo-font-family);
font-size: var(--vaadin-button-font-size, var(--lumo-font-size-m));
font-weight: var(--vaadin-button-font-weight, 500);
color: var(--_lumo-button-text-color);
background: var(--_lumo-button-background);
border: var(--vaadin-button-border, none);
border-radius: var(--vaadin-button-border-radius, var(--lumo-border-radius-m));
cursor: var(--lumo-clickable-cursor);
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
flex-shrink: 0;
--_button-size: var(--vaadin-button-height, var(--lumo-button-size));
--_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
--_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
/* Used by notification */
--_lumo-button-background: var(--vaadin-button-background, var(--lumo-contrast-5pct));
--_lumo-button-text-color: var(--vaadin-button-text-color, var(--lumo-primary-text-color));
--_lumo-button-primary-background: var(--vaadin-button-primary-background, var(--lumo-primary-color));
--_lumo-button-primary-text-color: var(--vaadin-button-primary-text-color, var(--lumo-primary-contrast-color));
}
/* Set only for the internal parts so we don't affect the host vertical alignment */
[part='label'],
[part='prefix'],
[part='suffix'] {
line-height: var(--lumo-line-height-xs);
}
[part='label'] {
padding: calc(var(--lumo-button-size) / 6) 0;
}
:host([theme~='small']) {
font-size: var(--lumo-font-size-s);
--lumo-button-size: var(--lumo-size-s);
}
:host([theme~='large']) {
font-size: var(--lumo-font-size-l);
--lumo-button-size: var(--lumo-size-l);
}
/* For interaction states */
:host::before,
:host::after {
content: '';
/* We rely on the host always being relative */
position: absolute;
z-index: 1;
inset: 0;
background-color: currentColor;
border-radius: inherit;
opacity: 0;
pointer-events: none;
}
/* Hover */
@media (any-hover: hover) {
:host(:hover)::before {
opacity: 0.02;
}
}
/* Active */
:host::after {
transition:
opacity 1.4s,
transform 0.1s;
filter: blur(8px);
}
:host([active])::before {
opacity: 0.05;
transition-duration: 0s;
}
:host([active])::after {
opacity: 0.1;
transition-duration: 0s, 0s;
transform: scale(0);
}
/* Keyboard focus */
:host([focus-ring]) {
box-shadow:
0 0 0 calc(1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-gap-color, var(--lumo-base-color)),
0 0 0 calc(var(--_focus-ring-width) + 1px * var(--_focus-ring-gap-on, 0)) var(--_focus-ring-color);
}
:host([theme~='primary'][focus-ring]) {
--_focus-ring-gap-on: 1;
}
/* Types (primary, tertiary, tertiary-inline */
:host([theme~='tertiary']),
:host([theme~='tertiary-inline']) {
--_background: transparent !important;
background: var(--vaadin-button-tertiary-background, var(--_background));
min-width: 0;
}
:host([theme~='tertiary']) {
border: var(--vaadin-button-tertiary-border, none);
color: var(--vaadin-button-tertiary-text-color, var(--lumo-primary-text-color));
font-weight: var(--vaadin-button-tertiary-font-weight, 500);
padding: var(--vaadin-button-tertiary-padding, 0 calc(var(--_button-size) / 6));
}
:host([theme~='tertiary-inline'])::before {
display: none;
}
:host([theme~='tertiary-inline']) {
margin: 0;
height: auto;
padding: 0;
line-height: inherit;
font-size: inherit;
}
:host([theme~='tertiary-inline']) [part='label'] {
padding: 0;
overflow: visible;
line-height: inherit;
}
:host([theme~='primary']) {
background: var(--_lumo-button-primary-background);
border: var(--vaadin-button-primary-border, none);
color: var(--_lumo-button-primary-text-color);
font-weight: var(--vaadin-button-primary-font-weight, 600);
min-width: calc(var(--lumo-button-size) * 2.5);
}
:host([theme~='primary'])::before {
background-color: black;
}
@media (any-hover: hover) {
:host([theme~='primary']:hover)::before {
opacity: 0.05;
}
}
:host([theme~='primary'][active])::before {
opacity: 0.1;
}
:host([theme~='primary'][active])::after {
opacity: 0.2;
}
/* Colors (success, warning, error, contrast) */
:host([theme~='success']) {
color: var(--lumo-success-text-color);
}
:host([theme~='success'][theme~='primary']) {
background-color: var(--lumo-success-color);
color: var(--lumo-success-contrast-color);
}
:host([theme~='warning']) {
color: var(--lumo-warning-text-color);
}
:host([theme~='warning'][theme~='primary']) {
background-color: var(--lumo-warning-color);
color: var(--lumo-warning-contrast-color);
}
:host([theme~='error']) {
color: var(--lumo-error-text-color);
}
:host([theme~='error'][theme~='primary']) {
background-color: var(--lumo-error-color);
color: var(--lumo-error-contrast-color);
}
:host([theme~='contrast']) {
color: var(--lumo-contrast);
}
:host([theme~='contrast'][theme~='primary']) {
background-color: var(--lumo-contrast);
color: var(--lumo-base-color);
}
/* Disabled state. Keep selectors after other color variants. */
:host([disabled]) {
pointer-events: none;
color: var(--lumo-disabled-text-color);
}
:host([theme~='primary'][disabled]) {
background-color: var(--lumo-contrast-30pct);
color: var(--lumo-base-color);
}
:host([theme~='primary'][disabled]) [part] {
opacity: 0.7;
}
/* Icons */
[part] ::slotted(vaadin-icon) {
display: inline-block;
width: var(--lumo-icon-size-m);
height: var(--lumo-icon-size-m);
}
/* Vaadin icons are based on a 16x16 grid (unlike Lumo and Material icons with 24x24), so they look too big by default */
[part] ::slotted(vaadin-icon[icon^='vaadin:']) {
padding: 0.25em;
box-sizing: border-box !important;
}
[part='prefix'] {
margin-left: -0.25em;
margin-right: 0.25em;
}
[part='suffix'] {
margin-left: 0.25em;
margin-right: -0.25em;
}
/* Icon-only */
:host([theme~='icon']:not([theme~='tertiary-inline'])) {
min-width: var(--lumo-button-size);
padding-left: calc(var(--lumo-button-size) / 4);
padding-right: calc(var(--lumo-button-size) / 4);
}
:host([theme~='icon']) [part='prefix'],
:host([theme~='icon']) [part='suffix'] {
margin-left: 0;
margin-right: 0;
}
/* RTL specific styles */
:host([dir='rtl']) [part='prefix'] {
margin-left: 0.25em;
margin-right: -0.25em;
}
:host([dir='rtl']) [part='suffix'] {
margin-left: -0.25em;
margin-right: 0.25em;
}
:host([dir='rtl'][theme~='icon']) [part='prefix'],
:host([dir='rtl'][theme~='icon']) [part='suffix'] {
margin-left: 0;
margin-right: 0;
}
`;
registerStyles('vaadin-button', button, { moduleId: 'lumo-button' });
export { button };