npm package: @nfq/dashboard-ui
Description: Set of components for nfqDashboards
Author: NFQ | Digital Creatives
Latest version: 3.23.0

# Dashboard Package

### Package for NFQ Dashboard Projects.

## Table of contents

* Components
  * Structure
* CSS styles
  * Global Variables
  * Component Variables

## Components
### Structure

@nfq/dashboard-ui<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;{All Components}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;| -Action {Checkbox, Fieldset, Upload, Button, ErrorMessage, FocusButton, RangeSlider, Search, StateButton, Time}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;| -Form {Checkbox, Fieldset, Upload}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;| -Data {Charts, Table}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;| -Filter {Cluster, Select, Times}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;| -Layout {ContentBlock, Layer, Tabs, Header}<br/>
|&nbsp;&nbsp;&nbsp;&nbsp;| -Menu {MenuItem, Profile}<br/>

In order to work correctly, **imports-loader** has to be installed.

## SCSS styles

## Global variables

**Global variables** take impact on all variables, because they are written as fallback for component variables. Their names do not include component name prefix.

Below are written all global variables. <br />

```scss
    // colors
    --default-color: #ffffff;
    --primary-color: #ff6200;
    --secondary-color: #0090d0;
    --passive-color: #a6a6a6;
    --error-color: #ff3d1a;
    --color-text-default: #1a1a1a;
    --lightblue-color: #60a6da;
    --color-label-default: #1a1a1a;
    --color-icon-selected: #434343;
    --color-profile: #666666;
    --color-disabled: #cccccc;
    --color-muted: #999999;
    --color-headings: #333333;

    //background-colors
    --default-background: #ffffff;
    --primary-background: #ff6200;
    --secondary-background: #0090d0;
    --error-background: #ff3d1a;
    --even-background: #f0f0f0;
    --lightblue-background: #60a6da;
    --active-background: #fcfcfc;
    --passive-background: #aaaaaa;
    --daypicker-highlighted: rgba(255, 98, 0, 0.2);
    --daypicker-hover: rgba(255, 98, 0, 0.4);

    // borders
    --border-default: 1px solid #a6a6a6;
    --border-primary: 1px solid #ff6200;
    --border-custom: 1px solid #0090d0;
    --border-secondary: 1px solid #acacac;
    --border-error: 1px solid #ff3d1a;
    --border-douple-primary: 2px solid #ff6200;
    --border-double-default: 2px dashed #a6a6a6;
    --border-double-filled: 2px dashed #7cc592;
    --border-before-slider: 1px solid #8f8f8f;
    --border-inline: 1px solid #cccccc;
    --border-white: 1px solid #ffffff;
    --border-dark: 1px solid #3f3f3f;
    --border-light: 1px solid #d5d5d5;

    // fonts
    --font-family-default: 'INGMe';
    --font-family-fallback: Arial;
    --font-family-icons: 'ing';
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-size-extrasmall: 12px;
    --font-size-small: 14px;
    --font-size-normal: 16px;
    --font-size-large: 24px;
    --font-size-mega: 32px;
```

In the case that component variable do not exist or is wrong setted, the *global variable* will be set.


## Component variables

**Component variables** are more specific and they affect only one component.<br />

Below are written variables for each component.

*Table component:*
```scss
    --table-color-text: #1a1a1a;
    --table-color-icon-default: #a6a6a6;
    --table-color-icon-selected: #434343;
    --table-background-even: #f0f0f0;
    --table-border-wrapper: 1px solid #acacac;
    --table-border-header: 1px solid #acacac;
    --table-border-row: 1px solid #a6a6a6;
    --table-focus-row-color: #ffffff;
    --table-focus-row-background: #ff6200;
```

*Checkbox component:*
```scss
    --checkbox-color-label: #1a1a1a;
    --checkbox-background-default: #ffffff;
    --checkbox-border-default: 1px solid #acacac;
    --checkbox-checked-background-primary: #ff6200;
    --checkbox-checked-background-secondary: #0090d0;
    --checkbox-checked-border-color-primary: #ff6200;
    --checkbox-checked-border-color-secondary: #0090d0;
```

*Menu component:*
```scss
    --menu-background-wrapper: #333333;
    --menu-background-profile: #666666;
    --menu-background-active-link: #1a1a1a;
    --menu-background-default: #ffffff;
    --menu-color-active-link: #ffffff;
    --menu-color-passive-link: #a6a6a6;
```

*Content block component:*
```scss
    --content-block-color-heading: #1a1a1a;
    --content-block-background: #ffffff;
```

*Layer component:*
```scss
    --layer-color-default: #1a1a1a;
    --layer-border-double: 2px solid #ff6200;
```

*Upload component:*
```scss
    --upload-color-label: #1a1a1a;
    --upload-color-droptext: #1a1a1a;
    --upload-border-default: 2px dashed #a6a6a6;
    --upload-border-filled: 2px dashed #7cc592;
```
*Fieldset component:*
```scss
    --fieldset-color-label: #1a1a1a;
    --fieldset-border-input: 1px solid #a6a6a6;
    --fieldset-border-focus: 1px solid #ff6200;
```
*Range slider component:*
```scss
    --rangeslider-color-label: #1a1a1a;
    --rangeslider-color-number: #1a1a1a;
    --rangeslider-background-active: #fcfcfc;
    --rangeslider-background-after: #a6a6a6;
    --rangeslider-border-default: 1px solid #a6a6a6;
    --rangeslider-border-before: 1px solid #8f8f8f;
```
*Search component:*
```scss
    --search-color-label: #1a1a1a;
    --search-color-text: #1a1a1a;
    --search-border-default: 1px solid #a6a6a6;
```
*Time component:*
```scss
    --time-color-text: #1a1a1a;
    --time-color-datepicker-disabled: #cccccc;
    --time-color-datepicker-muted: #999999;
    --time-border-default: 1px solid #a6a6a6;
    --time-border-inline: 1px solid #cccccc;
    --time-background-datepicker-highlighted: rgba(255, 98, 0, 0.2);
    --time-background-datepicker-hover: rgba(255, 98, 0, 0.4);
```
*Tabs component:*
```scss
    --tabs-color-head: #a6a6a6;
    --tabs-color-active: #ff6200;
    --tabs-border-default: 1px solid #acacac;
    --tabs-border-active: 1px solid #ffffff;
```

*Select component:*
```scss
    --select-border-default: 1px solid #a6a6a6;
    --select-border-primary: 1px solid #ff6200;
    --select-border-secondary: 1px solid #0090d0;
```

*Error message component:*
```scss
    --error-message-color: #ff3d1a;
    --error-message-border: 1px solid #ff3d1a;
```

*State button component:*
```scss
    --header-background-default: #ffffff;
    --header-background-line: #1a1a1a;
    --header-color-heading: #333333;
    --header-font-family: 'franklin-gd-regular';
    --header-border-menu: 1px solid #3f3f3f;
    --header-border-header: 1px solid #d5d5d5;

*Login component:*
```scss
    --login-color-default: #333333;
    --login-color-label: #1a1a1a;
    --login-backgorund-default: #ffffff;
    --login-background-form-heading: #aaaaaa;
    --login-font-family: 'franklin-gd-regular';
    --login-input-border: 1px solid #a6a6a6;
    --login-head-font-size: 32px;
    --login-input-placeholder-color: #aaaaaa;
```

This variables sets variables only for itself. Other components are not affected.