# libj-vue-comp-backdrops

> Two vue components for showing `overlay` and `loading` effects over body or an `element relative position`

Latest version **1.1.0** (published 2019-08-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install libj-vue-comp-backdrops
pnpm add libj-vue-comp-backdrops
yarn add libj-vue-comp-backdrops
bun add libj-vue-comp-backdrops
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-08-16 |
| First published | 2019-08-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 221 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | saeidfarahi |

## Links

- npm: https://www.npmjs.com/package/libj-vue-comp-backdrops
- Repository: https://saeidfarahi@dev.azure.com/saeidfarahi/libj-vue-comp-backdrops/_git/libj-vue-comp-backdrops
- npm.io page: https://npm.io/package/libj-vue-comp-backdrops

## Dependencies (2)

- [libj-guid](https://npm.io/package/libj-guid.md) ^1.3.0
- [libj-opacity-css](https://npm.io/package/libj-opacity-css.md) ^1.2.0

## Recent versions

- 1.1.0 (latest) — 2019-08-16
- 1.0.3 — 2019-08-14

## README

# libj-vue-comp-backdrops
### Part of libj tools

Two vue components for showing `overlay` and `loading` effects over body or an `element relative position`

## Usage
```
npm install libj-vue-comp-backdrops
```

## With default theme
```
import 'libj-vue-comp-backdrops/dist/libj-vue-comp-backdrops.default.min.css'
import 'libj-vue-comp-backdrops'
//Now, j-overlay and j-loading components are available globally
```

## Customize theme
You'll need a separate .scss file like (showcase/showcase.scss):
```
// Set variables here
.
.
.
@import 'libj-vue-comp-backdrops/index.scss';
// Now override classes
.
.
.
```

### SCSS Variables:
```
$j-overlay-bg: black !default;
$j-loading-background-color: rgba(0,0,0,0.25) !default;
$j-loading-color: white !default;
$j-loading-z-index: 1040 !default;
$j-loading-spinner-size: 2rem !default;
$j-loading-border-width: 5px !default;
```

## Test
- Run this in a separate command line to start node server
```
node server.js
```
- Run one of the following to re-create bundles
```
npm run dev
npm run dev:watch
```
- Navigate to http://localhost:3000

## Build
```
npm run build
npm run build:watch
```

---
_Source: https://npm.io/package/libj-vue-comp-backdrops · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._