Dashboard Package

Package for NFQ Dashboard Projects.

Table of contents

• Components
  • Structure
• CSS styles
  • Global Variables
  • Component Variables

Components

Structure

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

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.

    // 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.

Below are written variables for each component.

Table component:

    --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:

    --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:

    --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:

    --content-block-color-heading: #1a1a1a;
    --content-block-background: #ffffff;

Layer component:

    --layer-color-default: #1a1a1a;
    --layer-border-double: 2px solid #ff6200;

Upload component:

    --upload-color-label: #1a1a1a;
    --upload-color-droptext: #1a1a1a;
    --upload-border-default: 2px dashed #a6a6a6;
    --upload-border-filled: 2px dashed #7cc592;

Fieldset component:

    --fieldset-color-label: #1a1a1a;
    --fieldset-border-input: 1px solid #a6a6a6;
    --fieldset-border-focus: 1px solid #ff6200;

Range slider component:

    --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:

    --search-color-label: #1a1a1a;
    --search-color-text: #1a1a1a;
    --search-border-default: 1px solid #a6a6a6;

Time component:

    --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:

    --tabs-color-head: #a6a6a6;
    --tabs-color-active: #ff6200;
    --tabs-border-default: 1px solid #acacac;
    --tabs-border-active: 1px solid #ffffff;

Select component:

    --select-border-default: 1px solid #a6a6a6;
    --select-border-primary: 1px solid #ff6200;
    --select-border-secondary: 1px solid #0090d0;

Error message component:

    --error-message-color: #ff3d1a;
    --error-message-border: 1px solid #ff3d1a;

State button component:

    --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.