# @drivania/styles-common

> ![npm](https://img.shields.io/npm/v/@drivania/styles-common.svg?style=flat-square)

Latest version **1.3.1** (published 2020-04-09) · UNLICENSED license · 0 weekly downloads

## Install

```sh
npm install @drivania/styles-common
pnpm add @drivania/styles-common
yarn add @drivania/styles-common
bun add @drivania/styles-common
```

## 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.3.1 |
| Published | 2020-04-09 |
| First published | 2019-03-05 |
| Weekly downloads | 0 |
| License | UNLICENSED |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | eballaradrivania, jdomenechdrivania, raul-iggeos |

## Links

- npm: https://www.npmjs.com/package/@drivania/styles-common
- npm.io page: https://npm.io/package/@drivania/styles-common

## Recent versions

- 1.3.1 (latest) — 2020-04-09
- 1.3.0 — 2019-10-15
- 1.2.1 — 2019-10-03
- 1.2.0 — 2019-07-31
- 1.1.16 — 2019-06-27
- 1.1.15 — 2019-03-25
- 1.1.14 — 2019-03-24
- 1.1.13 — 2019-03-23
- 1.1.12 — 2019-03-23
- 1.1.11 — 2019-03-21
- 1.1.10 — 2019-03-21
- 1.1.9 — 2019-03-21
- 1.1.8 — 2019-03-20
- 1.1.7 — 2019-03-20
- 1.1.6 — 2019-03-20
- … 14 more at https://npm.io/package/@drivania/styles-common/versions

## README

# Drivania common styles
![npm](https://img.shields.io/npm/v/@drivania/styles-common.svg?style=flat-square)

## Installation
In your `js/app.js` file:

```javascript
import '@drivania/styles-common/js/main'; 
``` 

In your `scss/app.scss` file, at the top of the file:

```scss
@import "~@drivania/styles-common/scss/main-dark";
```

### Using tiny-date-picker

Run:

```bash
npm i tiny-date-picker --save-dev
```   

Add to your SCSS:

```scss
@import '~tiny-date-picker/date-range-picker.css';
@import '~tiny-date-picker/tiny-date-picker.css';
@import "~@drivania/styles-common/scss/tiny-date-picker";
```

Add to your JS:

```javascript
import {DateRangePicker} from 'tiny-date-picker/dist/date-range-picker';
```

Example of usage:

```javascript
const root = document.querySelector('.event-dates');
const startDateInput = root.querySelector('#eventStart');
const endDateInput = root.querySelector('#eventEnd');
const container = root.querySelector('.datepicker-range');

DateRangePicker(container)
    .on('statechange', function (_, rp) {
        // Update the inputs when the state changes
        var range = rp.state;
        startDateInput.value = range.start ? range.start.toDateString() : '';
        endDateInput.value = range.end ? range.end.toDateString() : '';

        if (range.end) {
            container.classList.remove('ex-inputs-picker-visible');
        }
    });

startDateInput.addEventListener('focus', showPicker);
endDateInput.addEventListener('focus', showPicker);

function showPicker() {
    container.classList.add('ex-inputs-picker-visible');
}


// If focus leaves the root element, it is not in the date
// picker or the inputs, so we should hide the date picker
// we do this in a setTimeout because redraws cause temporary
// loss of focus.
let previousTimeout;
root.addEventListener('focusout', function hidePicker() {
    clearTimeout(previousTimeout);
    previousTimeout = setTimeout(function() {
        if (!root.contains(document.activeElement)) {
            container.classList.remove('ex-inputs-picker-visible');
        }
    }, 10);
});
```

---
_Source: https://npm.io/package/@drivania/styles-common · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._