@sandlada/mdc

Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
mdc.sandlada.com
66 lines (60 loc) • 3.36 kB
JavaScript
import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{BadgeDefinition as i}from"../../component-definitions/badge.definition.js";import"../../definitions.js";const a=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--md-badge`}),o=n(a,!0).join(``),s=[e`:host {${t(o)};}`,e`
        :host {
            box-sizing: border-box;
            position: relative;
            vertical-align: top;
            display: inline-flex;
            -webkit-tap-highlight-color: transparent;
        }

        .container {
            box-sizing: border-box;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container.large {
            height: var(--_large-container-size);
            min-width: var(--_large-container-size);
            background: var(--_enabled-large-container-color);
            border-start-start-radius: var(--_large-container-shape-start-start);
            border-start-end-radius: var(--_large-container-shape-start-end);
            border-end-end-radius: var(--_large-container-shape-end-end);
            border-end-start-radius: var(--_large-container-shape-end-start);

            padding-block-start: var(--_large-container-block-leading-padding-space);
            padding-block-end: var(--_large-container-block-trailing-padding-space);
            padding-inline-start: var(--_large-container-inline-leading-padding-space);
            padding-inline-end: var(--_large-container-inline-trailing-padding-space);
        }
        .container.small {
            height: var(--_small-container-size);
            min-width: var(--_small-container-size);
            background: var(--_enabled-small-container-color);
            border-start-start-radius: var(--_small-container-shape-start-start);
            border-start-end-radius: var(--_small-container-shape-start-end);
            border-end-end-radius: var(--_small-container-shape-end-end);
            border-end-start-radius: var(--_small-container-shape-end-start);
            padding-block-start: var(--_small-container-block-leading-padding-space);
            padding-block-end: var(--_small-container-block-trailing-padding-space);
            padding-inline-start: var(--_small-container-inline-leading-padding-space);
            padding-inline-end: var(--_small-container-inline-trailing-padding-space);
        }

        .label {
            display: inline-flex;
            transform: scale(1);
            transform-origin: center;
            transition-duration: 100ms;
        }

        .container.large {
            color: var(--_enabled-large-label-color);
            font-family: var(--_large-label-font);
            line-height: var(--_large-label-line-height);
            font-size: var(--_large-label-size);
            letter-spacing: var(--_large-label-tracking);
            font-weight: var(--_large-label-weight);
        }
        .container.small .label {
            transform: scale(0);
        }

    `];export{s as BadgeStyles};
//# sourceMappingURL=badge.style.js.map