The power styles provides dynamic style properties for svelte
This library requires Svelte 3.x.x (version 3 or later). Svelte are really easy to install.
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.
BEFORE YOU INSTALL: please read the prerequisites
To install and set up the library, run:
$ npm install power-stylesOr if you prefer using Yarn:
$ yarn add power-styles
<!-- 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>
<!-- 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 -->
<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>or
<script>
import Flip from "./Flip.svelte";
const onActive = (state) => {
console.log(state ? "Is active" : "Is not active");
};
</script>
<main>
<Flip onActive={onActive} />
</main>Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Add your changes:
git add . - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request 😎
We use SemVer for versioning. For the versions available, see the tags on this repository.
Juan David Avila - JuanDAC
See also the list of contributors who participated in this project.