ui-lit/note/stules.js

UI Elements on LIT

import { makeCSSNameProxy, makeCSSProxy } from '../helpers/cssproxy';
import { css } from 'lit';
const noteCSSVars = {
    color: {
        name: "color",
        default: "#333",
    },
    height: {
        name: "height",
        default: "1px",
    },
    margin: {
        name: "margin",
        default: "10px 0",
    },
};
const _v = makeCSSProxy(noteCSSVars, "--lit-noye-");
export const noteCSSValues = _v;
export const noteCSSVarsNames = makeCSSNameProxy(noteCSSVars, "--lit-noye-");
export const noteStyles = css `
:host{
    display: block;
    position: absolute;
    transition: 0.4s ease-in;
    border: 1px solid var(--lit-note-border);
    z-index: 10;
    padding: 5px;
    border-radius: 1px;
    box-sizing: border-box;
    background-color: var(--lit-note-background, rgba(255,255,255,0.85));
    color: var(--lit-note-color);
}
:host(.visible){
    visibility: visible;
    opacity: 1;
}
:host(.error){
    background-color: var(--lit-note-error-background, #fff);
    color: var(--lit-note-error-color, red);
    border: 1px solid var(--lit-note-error-border, #ff7e6d);
}
`;