npm install neo_supplies --save
Once installed, you need import SCSS in your main styles file:
@import "~neo_supplies/styles/styles.scss";
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
<div class="textfield">
<input type="text" placeholder="Agregar">
<div class="border">
<div class="static-border-bottom"></div>
<div class="border-bottom"> </div>
</div>
</div>
<input type="button" value="enviar">
<span class="radio-btn">
<input type="radio" id="r1" name="gr" checked="true">
<label class="icon custom-radio" for="r1">
No molestar
</label>
</span>
<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>
<i class="icon calculator"></i>
<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>
<div class="input-search">
<input type="text" placeholder="Buscar">
<i class="icon search red-color"></i>
</div>
<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>
<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>
<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>
- Set default display to div element
- Set default display to span element
- Add new class - "radio-tabs"
- Add classes - fs(font-size) and lh(line-height)
- 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"
- 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"
- add elements module
- add icon-buttons component
- add tabs-line component
- add tabs-round component
- add chips class
- add switch class
- add text-icon-button class
- add validations class
- add calendar component