@logo-elements/logo-elements-styles/mixins/field-button.js

Logo Elements Design System is a design system library for modern web applications which gives your web apps Logo Applications look and feel, used by Logo Elements

/**
 * @license
 * Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş.
 *
 * Save to the extent permitted by law, you may not use, copy, modify,
 * distribute or create derivative works of this material or any part
 * of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
 * Any reproduction of this material must contain this notice.
 */
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
import '../color.js';
import '../font-icons.js';
import '../sizing.js';
import '../style.js';

const fieldButton = css`
  [part$='button'] {
    flex: none;
    width: 1em;
    height: 1em;
    line-height: 1;
    font-size: var(--leds-icon-size-m);
    text-align: center;
    color: var(--leds-contrast-60pct);
    transition: 0.2s color;
    cursor: var(--leds-clickable-cursor);
  }

  [part$='button']:hover {
    color: var(--leds-contrast-90pct);
  }

  :host([disabled]) [part$='button'],
  :host([readonly]) [part$='button'] {
    color: var(--leds-contrast-20pct);
    cursor: default;
  }

  [part$='button']::before {
    font-family: 'leds-icons';
    display: block;
  }
`;
registerStyles('', fieldButton, { moduleId: 'leds-field-button' });

export { fieldButton };