Skip to content

CSS Template Literals and Classes using LitElement and LitHTML

Notifications You must be signed in to change notification settings

tsavo-vdb-knott/lit-shadow-literals

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Shadow Style Literals and Classes for LitElements

**Ported from https://tailwindcss.com/docs/shadows/, Configured for LitElement, LitHtml, and Constructable Style Sheets**

Usage With Classes

import {LitElement, html} from 'lit-element';
import {SmallShadowClasses} from 'lit-shadow-literals';

class MyElement extends LitElement {
  static get styles() {
    return [SmallShadowClasses];
  }

  render() {
    return html`
      <div class="small-shadow"></div>
    `;
  }
}

Usage With Literals

import {LitElement, html, css} from 'lit-element';
import {
  smallShadowLightTheme,
  largeShadowDarkTheme,
  noShadow,
} from 'lit-shadow-literals';

class MyElement extends LitElement {
  static get styles() {
    return css`
      :host {
        ${smallShadowLightTheme}
      }

      :host([darkMode]) {
        ${largeShadowDarkTheme}
      }

      div {
        ${noShadow}
      }
    `;
  }

  render() {
    return html`
      <div></div>
    `;
  }
}

About

CSS Template Literals and Classes using LitElement and LitHTML

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published