cute-css

1.0.0 • Public • Published

Cute CSS in JS

  Price npm License: APACHE

<Cute>

Live Demo ↗

cute`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;     
    `
    .querySelector('.wrapper');

  cute`
    padding: 4em;
    background: papayawhip;
    `
    .querySelector('.title');
<div class="wrapper">
  <div class="title">Hello!!! I am Cute</div>
</div>

The above code's result is:

Screenshot of Cute CSS

 cute`
      display: inline-block;
      border-radius: 3px;
      padding: 0.5rem 0;
      text-decoration: none;
      text-align: center;
      font-size: 18px;
      line-height: 1.6;
      margin: 0.5rem 1rem;
      width: 11rem;
      cursor: pointer;
      background: #3F51B5;
      color: #fff;
      border: 2px solid #3F51B5;
      transition: all 0.2s;

      ${properties => properties.secondary ? cute.css`
        background: white;
        color: #3F51B5;
      ` : ''}

      ${onhover => cute.css`
        background: #444;
        color: #fff;
        border-color: #444;
      `}    

      ${onactive => cute.css`
        background: #007ACC;
        color: #fff;
        border-color: #007ACC;
      `}                  
    `
    .okButton()
    .cancelButton({secondary: true})
   <primary-button id="okButton">OK</primary-button>
   <secondary-button id="cancelButton">CANCEL</secondary-button>

Screenshot of Cute CSS

Readme

Keywords

Package Sidebar

Install

npm i cute-css

Weekly Downloads

2

Version

1.0.0

License

https://github.com/bmarkov/cute-css/blob/master/LICENSE

Unpacked Size

43.6 kB

Total Files

8

Last publish

Collaborators

  • smart-webcomponents