Neo supplies

Install

npm install neo_supplies --save

Once installed, you need import SCSS in your main styles file:

@import "~neo_supplies/styles/styles.scss";

Usage

Basic

Fonts:

<span class="font-regular">Lorem</span>

There are 3 font types:

• font-regular
• font-medium
• font-bold

Color:

<span class="red-color">Lorem</span>

available colors:

• red-color
• red-dark-color
• white-color
• black-color
• gray-color
• gray-light-color
• gray-dark-color
• water-color
• orange-color
• blue-color
• green-color

Background color

<span class="red-bg-color">Lorem</span>

Available background colors:

• red-bg-color
• red-dark-bg-color
• white-bg-color
• black-bg-color
• gray-bg-color
• gray-light-bg-color
• gray-dark-bg-color
• water-bg-color
• orange-bg-color
• blue-bg-color
• green-bg-color

Mixins

textfield

<div class="textfield">
  <input type="text" placeholder="Agregar">
  <div class="border">
    <div class="static-border-bottom"></div>
    <div class="border-bottom">&nbsp;</div>
  </div>
</div>

Buttons

<input type="button" value="enviar">

Radio button

<span class="radio-btn">
  <input type="radio" id="r1" name="gr" checked="true">
  <label class="icon custom-radio" for="r1">
    No molestar
  </label>
</span>

Select

<div class="select-container">
  <label class="font-regular black-color">Tipo</label>
  <div class="custom-select">
    <select class="font-regular" id="select-type">
      <option value="">lorem</option>
      <option value="">ipsum</option>
      <option value="">lorem</option>
      <option value="">ipsum</option>
    </select>
    <span for="select-type" class="icon arrowdown-2"></span>
  </div>
</div>

Icon

<i class="icon calculator"></i>

Table Home Scroll

<perfect-scrollbar class="table-home-scroll">
  <table class="font-medium fs-12">
    <thead>
      <tr>
        <th width="68px">Buc</th>
        <th width="134px">Nombre</th>
        <th width="100px">Acción</th>
        <th width="100px">Resultados</th>
      </tr>
    </thead>
    <tbody class="font-regular gray-dark-color">
      <tr>
        <td width="68px" class="font-bold">546467575</td>
        <td width="134px">Name Name name name</td>
        <td width="100px">Entry First Line 3</td>
        <td width="100px">Entry First Line 4</td>
      </tr>	
    </tbody>
  </table>
</perfect-scrollbar>

Input Search

<div class="input-search">
  <input type="text" placeholder="Buscar">
  <i class="icon search red-color"></i>
</div>

Toggle Icons

<div class="toggle-icons">
  <div class="tab">
    <input type="radio" id="activos" name="menuTable" 
      [(ngModel)]="tabSelected" value="activos">
    <label for="activos"><i class="icon calculator"></i></label>
  </div>
  <div class="tab">
    <input type="radio" id="inactivos" name="menuTable"
    [(ngModel)]="tabSelected" value="inactivos">
    <label for="inactivos"><i class="icon calculator"></i></label>
  </div>				
</div>

Tabs Line

<div class="tabs-line">
  <div class="tab">
    <input type="radio" name="selector" id="id1" 
    [(ngModel)]="tabSelected" value="id1">
    <label for="id1">tab1</label>
  </div>
  <div class="tab">
    <input type="radio" name="selector" id="id2" 
    [(ngModel)]="tabSelected" value="id2">
    <label for="id2">tab2</label>
  </div>
  <div class="tab">
    <input type="radio" name="selector" id="id3" 
    [(ngModel)]="tabSelected" value="id3">
    <label for="id3">tab3</label>
  </div>
  
</div>

Tabs Cricle

<div class="tabs-circle">
  <div class="tab">
    <input type="radio" id="tendencia" name="menuActivos" 
      [(ngModel)]="tabSelected" value="tendencia">
    <label for="tendencia">Tendencia</label>
  </div>
  <div class="tab">
    <input type="radio" id="clientes" name="menuActivos"
    [(ngModel)]="tabSelected" value="clientes">
    <label for="clientes">Clientes</label>
  </div>				
</div>

Changelog

1.3.2

• Set default display to div element
• Set default display to span element

1.4.0

• Add new class - "radio-tabs"
• Add classes - fs(font-size) and lh(line-height)

1.5.0

• Add new class - "table-home-scroll"
• Add new class - "input-search"
• Add new class - "toggle-icons"
• Add new class - "tabs-line"
• Refactor class - "radio-tabs" to "tabs-circle"

1.5.2

• add values of fonts and box shadow on varibles
• add miscellaneous class of font-size and line-height
• add new class - "justify-center"
• add new class - "justify-end"
• add new class - "align-center"
• add new class - "align-end"
• add new class - "cursor-pointer"
• add new class - "space-between"
• add new class - "hide"

1.6.0

• add elements module
• add icon-buttons component

1.7.0

• add tabs-line component
• add tabs-round component
• add chips class
• add switch class
• add text-icon-button class
• add validations class

1.8.9

• add calendar component