Power-styles NPM

The power styles provides dynamic style properties for svelte

Prerequisites

This library requires Svelte 3.x.x (version 3 or later). Svelte are really easy to install.

Power Styles

Getting Started

Provide style actions for each css rule. Provide style actions for each css rule. and can be applied to any HTML element by applying svelte's reactivity to css properties.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install power-styles

Or if you prefer using Yarn:

$ yarn add power-styles

Usage for Svelte Kit

`Font.svelte`:

Font

<!-- Font.svelte -->
<script>
  import powerStyles from "power-styles";
	import { browser } from '$app/env';
	const { FontSize } = powerStyles();

  export let fontSize = CSS.em(2);
</script>

<p use:FontSize={fontSize}>
  <slot />
</p>

you can use like that

<script>
  import Font from "./Font.svelte";
</script>

<main>
  <Font fontSize={CSS.em(4)}> Ex fugiat laboris dolore id culpa. </Font>

  <Font>
    Pariatur reprehenderit pariatur voluptate ea ipsum ullamco Lorem aliquip
    magna duis qui proident.
  </Font>
</main>

Usage for Svelte

`Font.svelte`:

Font

<!-- Font.svelte -->
<script>
  import powerStyles from "power-styles";
  const { FontSize } = powerStyles();

  export let fontSize = CSS.em(2);
</script>

<p use:FontSize={fontSize}>
  <slot />
</p>

you can use like that

<script>
  import Font from "./Font.svelte";
</script>

<main>
  <Font fontSize={CSS.em(4)}> Ex fugiat laboris dolore id culpa. </Font>

  <Font>
    Pariatur reprehenderit pariatur voluptate ea ipsum ullamco Lorem aliquip
    magna duis qui proident.
  </Font>
</main>

`Flip.svelte:`

Flip

<!-- Flip.svelte -->
<script>
  import powerStyles from "power-styles";
  export let onActive = new Function();

  const ACTIVE = 0,
    MOVE = 90,
    INACTIVE = 180;

  const { CustomRotateFlip } = powerStyles();
  let customRotateFlip = CSS.deg(90);

  const launchOnActive = () => {
    if (onActive instanceof Function) {
      onActive(customRotateFlip.value === ACTIVE);
    }
  };

  const activeOff = () => {
    customRotateFlip =
      customRotateFlip.value == INACTIVE
        ? CSS.deg(90)
        : CSS.deg(customRotateFlip.value + MOVE);
    launchOnActive();
  };

  const activeOn = () => {
    customRotateFlip =
      customRotateFlip.value == ACTIVE
        ? CSS.deg(MOVE)
        : CSS.deg(customRotateFlip.value - MOVE);
    launchOnActive();
  };
</script>

<div class="flip">
  <span class="on" on:click={activeOn}>ON</span>
  <span class="off" on:click={activeOff}>OFF</span>
  <div class="door" use:CustomRotateFlip={customRotateFlip} />
</div>

<style>
  .flip {
    margin: auto;
    height: 100px;
    width: 400px;
    display: grid;
    position: relative;
    grid-template-columns: repeat(2, 1fr);
    border-radius: 25px;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
  }
  .flip :is(.on, .off, .door) {
    color: aliceblue;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2em;
    font-weight: 900;
    word-spacing: 0pt;
    display: grid;
    place-content: center;
    background-color: brown;
  }
  .flip .on {
    background-color: green;
  }
  .door {
    box-shadow: -1px 0px 0px 0px aliceblue;
    position: absolute;
    transition: 300ms all;
    left: 50%;
    height: 100%;
    width: 50%;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(var(--rotate-flip));
  }
  .door:after {
    position: absolute;
    background-color: green;
    content: "";
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
  }
</style>

you can use like that

<script>
  import Flip from "./Flip.svelte";
</script>

<main>
  <Flip />
</main>

<script>
  import Flip from "./Flip.svelte";
  const onActive = (state) => {
    console.log(state ? "Is active" : "Is not active");
  };
</script>

<main>
  <Flip onActive={onActive} />
</main>