# undefault

> CSS framework for simple, customizable form elements

Latest version **0.1.20** (published 2020-02-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install undefault
pnpm add undefault
yarn add undefault
bun add undefault
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.20 |
| Published | 2020-02-23 |
| First published | 2019-12-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 30.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Carmen Scholte Lubberink |
| Maintainers | carmenscholte |
| Keywords | css, js, front-end, angular |

## Links

- npm: https://www.npmjs.com/package/undefault
- Repository: https://github.com/CarmenScholte/Undefault
- Homepage: https://github.com/CarmenScholte/Undefault#readme
- Issues: https://github.com/CarmenScholte/Undefault/issues
- npm.io page: https://npm.io/package/undefault

## Dependencies (3)

- [node-sass](https://npm.io/package/node-sass.md) ^4.13.1
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.9.0

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.20 (latest) — 2020-02-23
- 0.1.19 — 2020-02-15
- 0.1.18 — 2020-02-15
- 0.1.17 — 2020-02-15
- 0.1.16 — 2020-01-01
- 0.1.15 — 2020-01-01
- 0.1.14 — 2019-12-30
- 0.1.13 — 2019-12-29
- 0.1.12 — 2019-12-29
- 0.1.11 — 2019-12-29
- 0.1.10 — 2019-12-29
- 0.1.9 — 2019-12-29
- 0.1.8 — 2019-12-29
- 0.1.7 — 2019-12-29
- 0.1.6 — 2019-12-29
- … 6 more at https://npm.io/package/undefault/versions

## README

# Undefault
CSS framework for simple, pretty form elements whose default properties are easily overwritten. Undefault tries to provide a consistent look independent of browsers. Tested on Chrome, Firefox and Safari.

## Usage 
Use npm to install Undefault in your Angular application:
```
npm install undefault
```

Import Undefault in your top level styling file, by default 'styles.scss':
```
@import 'undefault';
```

To overwrite Undefault's default variables, define the variable in your top level styling file before importing Undefault: 
```
$form-element-background-color: pink;

@import 'undefault';
```

To overwrite element specific styling, define the lower level variables in your top level styling file. Overwriting more specific variables will cause more general variables to be overwritten. Variables like `$form-element-text-color` style all types of form elements like `<input>` and `<select>`, whereas variables like `$input-border-color` will only affect `<input>` elements. For example, you can overwrite `$form-element-height` and `$input-height` in any order, but `$input-height` will win. 
```
$input-height: 50px;
$form-element-height: 48px;

@import 'undefault';
```

## Soon
This package is brand new and is still in development. Next up is styling textareas, and testing on IE and Edge.

## Variable list
### General
```
$undefault-font-family
$undefault-font-size
```
### Form elments
```
$form-element-border-color
$form-element-border-radius
$form-element-border-style
$form-element-border-width
$form-element-font-size
$form-element-font-family
$form-element-background-color
$form-element-height
$form-element-padding
$form-element-placeholder-color
$form-element-text-color

$form-element-focus-color
$form-element-focus-shadow

$form-element-text-color-hover
$form-element-background-color-hover
$form-element-border-color-hover

$form-element-text-color-disabled
$form-element-background-color-disabled
$form-element-border-color-disabled
```

### Select
```
$select-arrow-url
$select-arrow-url-disabled

$select-border-color
$select-border-radius
$select-border-style
$select-border-width
$select-background-color
$select-height
$select-padding
$select-placeholder-color:
$select-text-color

$select-focus-color
$select-focus-shadow

$select-text-color-hover
$select-background-color-hover
$select-border-color-hover

$select-text-color-disabled
$select-background-color-disabled
$select-border-color-disabled
```

### Input
```
$input-border-color
$input-border-radius
$input-border-style
$input-border-width
$input-background-color
$input-height
$input-padding
$input-placeholder-color
$input-text-color

$input-focus-color
$input-focus-shadow

$input-text-color-hover
$input-background-color-hover
$input-border-color-hover

$input-text-color-disabled
$input-background-color-disabled
$input-border-color-disabled
```

### Checkbox
```
$checkbox-check-url;
$checkbox-check-url-disabled;

$checkbox-border-color
$checkbox-border-radius
$checkbox-border-style
$checkbox-border-width
$checkbox-background-color
$checkbox-size

$checkbox-focus-color
$checkbox-focus-shadow

$checkbox-background-color-hover
$checkbox-border-color-hover

$checkbox-background-color-disabled
$checkbox-border-color-disabled
```

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