2.1.2

Fix DateTime day

.github/ISSUE_TEMPLATE/showcase-proposal.md

@@ -0,0 +1,39 @@
+---
+name: Showcase Proposal
+about: Proposal to publish a new content into wiki's Showcase page.
+title: Proposal of showcase project - PROJECT_NAME
+labels: showcase
+assignees: ''
+
+---
+
+> Showcase proposal template
+> Note: "*" fields are mandatory.
+
+> Project Name: The name of the project that will be used as title of the section of the showcase. 
+
+Project Name *: 
+
+> Project Description: The description of the project that will be used as a paragraph after the title of the showcase.
+
+Project Description *: 
+
+> Project Author: The author of the project that will be informed after the project description. (Keep if blank to don't show the author)
+
+Project Author: 
+
+> Project Links: Links to access the project showcase. These links will be shown after project description.
+
+Project Links: 
+
+> Project Images: Images of the project (can be the images with legends, or the links to it).
+
+Project Images *:
+
+> Additional Information: Other relevant information.
+
+Additional Information: 
+
+> Feedback: If you want to give a feedback to the project, or a suggestion, please, enjoy this field!
+
+Feedback:

.github/ISSUE_TEMPLATE/showcase-removal.md

@@ -0,0 +1,19 @@
+---
+name: Showcase Removal
+about: Remove a published content from wiki's Showcase page.
+title: Removal of showcase project - PROJECT_NAME
+labels: showcase
+assignees: ''
+
+---
+
+> Remove showcase project template
+> "*" fields are mandatory.
+
+> Project Name: The name of the project to be removed from showcase page. 
+
+Project Name *:
+
+> Reason: The reason for removal
+
+Reason *:

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.idea

CHANGELOG.md

@@ -0,0 +1,60 @@
+# TuiCss ChangeLog
+### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
+
+#### 2.1.1
+
+Bugs
+- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29
+- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30
+
+Examples
+- Created the mobile example
+
+#### 2.1.0
+- .disabled classes
+- Fixed the default radius border of inputs
+- Removed pointer events of checkbox and radio button
+- Tabs and buttons example pages
+- Remove padding of inputs
+- .no-border util
+- Forecast example
+
+#### 2.0.0
+- Jquery removed (Now use vanilla Javascript)
+- Chart example page
+- Readme update
+- Changelog markdown
+- Chart component
+- NPM Package
+
+#### 1.0.0
+- Utilities
+- Examples
+- DOS font
+- Wiki documentation
+- Button component
+- Checkbox component
+- Divider component
+- Dropdown component
+- Fieldset component
+- Input component
+- Navbar component
+- Panel component
+- Progressbar component
+- Radio component
+- Scrollbar component
+- Sidenav component
+- Statusbar component
+- Table component
+- Tablegrid component
+- Tabs component
+- Textarea component
+- Window component
+- Screen component
+- Datetime component
+- Shortcut component
+- Shadow component
+- Background component
+- Border component
+- Grid component
+- Modal component

CONTRIBUTING.md

@@ -0,0 +1 @@
+Click [here](https://github.com/vinibiavatti1/TuiCss/wiki/Contributing) to access the contributing page on the wiki!

LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Vinicius Reif Biavatti
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,327 +1,37 @@
-# TuiCss
-Text-based user interface CSS framework
+<p align="center">
+  <a href="https://github.com/vinibiavatti1/TuiCss">
+    <img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Logo%20160x160%20transparent.png" />
+  </a>
+</p>
 
-TuiCss is a framework to create web applications using an interface based in ASCII text like MS-DOS applications. This kind of interface is very eligible because the ultra-contrast colors used. This framework was created following the <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision UI Framework</a> and other applications based on TUI.
+<h3 align="center">TuiCss</h3>
 
-![TuiCss](https://image.ibb.co/gdAYN9/tuiCSS.png)
+<p align="center">
+  Text-based user interface CSS library
+  <br>
+  <a href="https://github.com/vinibiavatti1/TuiCss/wiki"><strong>-- Documentation --</strong></a>
+  <br>
+  <a href="https://github.com/vinibiavatti1/TuiCss/wiki/Showcase"><strong>-- Showcase --</strong></a>
+  <br><br>
+  <a href="https://badge.fury.io/js/tuicss">
+    <img src="https://badge.fury.io/js/tuicss.svg" alt="npm version badge"> 
+  </a>
+</p>
 
-## Getting Started
-To use TuiCss, you have to download the TuiCss folder of the repository and import the tuicss.css to your html page using this tag:
+### About
 
-```html
-<link rel="stylesheet" href="TuiCss/tuicss.css" />
+TuiCss is a library focused to create web applications using an interface based on ASCII table, like the old MS-DOS applications. This kind of interface is very legible because the ultra-contrast colors used and because the reduced effects used on the components in the view. The base of this project is  <a href="https://en.wikipedia.org/wiki/Turbo_Vision">Turbo Vision Framework</a>, but some other frameworks were also checked to introduce some features to TuiCss, like [curses](https://en.wikipedia.org/wiki/Curses_(programming_library)), [ncurses](https://en.wikipedia.org/wiki/Ncurses), [Newt](https://en.wikipedia.org/wiki/Newt_(programming_library)), etc. Check the examples page in the wiki to stay on top of some creations, or check the getting started page to start using this library!
+
+<img src="https://raw.githubusercontent.com/vinibiavatti1/TuiCss/develop/resources/TUICSS%20Demo.png" width="676">
+
+### Getting Started
+To start to use TuiCss in your project, you can just download the repository content and import the files that are in the dist folder with the html directives. Alternatively, you can install the package with NPM using the following command:
+
+```bash
+$ npm install tuicss
 ```
 
-Don't forget to keep the images folder in the same folder of the css file because the css uses this folder as reference to get the images for some classes.
+For more details, visit the [Getting Started Page](https://github.com/vinibiavatti1/TuiCss/wiki/Getting-Started) in the repository wiki.
 
-## Components
-
-This is a simple doc for the avaiable components in the framework. For more details, download the repository and run example.html to check the full code.
-
-### Navbar
-<img src="https://image.ibb.co/fACzUp/tui_nav.png"/>
-
-```html
-<nav class="tui-nav tui-nav-fixed">
-    <span class="tui-clock" id="clock"></span>
-    <ul>
-        <li>
-            ...
-        </li>
-    </ul>
-</nav>
-```
-
-### Navbar Menu
-<img src="https://image.ibb.co/kv0Tpp/tui_menu.png"/>
-
-```html
-<li class="tui-dropdown">
-    <span class="red-168-text">F</span>ile
-    <div class="tui-dropdown-content">
-        <ul>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">O</span>pen
-                    <span class="tui-shortcut">ctrl+o</span>
-                </a>
-            </li>
-            <div class="tui-black-divider"></div>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">Q</span>uit
-                    <span class="tui-shortcut">F4</span>
-                </a>
-            </li>
-        </ul>
-    </div>
-</li>
-```
-
-### Sidenav
-<img src="https://image.ibb.co/ci06aU/tui_sidenav.png"/>
-
-```html
-<nav class="tui-sidenav">
-    <ul>
-        <li>
-            <a href="#!">Open</a>
-            ...
-        </li>
-    </ul>
-</nav>
-```
-
-### Window
-<img src="https://image.ibb.co/jcRMs9/tui_window.png"/>
-
-```html
-<div class="tui-window">
-    <fieldset class="tui-window-fieldset">
-        <legend>Window</legend>
-        <button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
-        ...
-    </fieldset>
-</div>
-```
-
-### Fieldset Status Bar
-<img src="https://image.ibb.co/grD4ep/tui_fieldset_statusbar.png"/>
-
-```html
-<div class="tui-window">
-    <fieldset class="tui-window-fieldset">
-        ...
-        <div class="tui-fieldset-statusbar">Text format: UTF-8</div>
-        ...
-    </fieldset>
-</div>
-```
-
-### Buttons
-<img src="https://image.ibb.co/dqaLkU/tui_buttons.png" />
-
-```html
-<a href="#!" class="tui-button">button</a>
-<button class="tui-button">button</button>
-```
-
-### Status Bar
-<img src="https://image.ibb.co/egTHX9/tui_statusbar.png" />
-
-```html
-<div class="tui-statusbar">
-    <ul>
-        <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
-        <li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
-        <li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
-        <span class="tui-statusbar-divider"></span>
-        <li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
-    </ul>
-</div>
-```
-
-### Menu List
-<img src="https://image.ibb.co/ihphX9/tui_menu_list.png" />
-
-```html
-<div class="tui-window">
-    <fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
-        <ul>
-            <li class="cyan-255-hover black-255-text-hover">
-                <span class="tui-shortcut">A</span>
-                <span>Register Tables</span>
-            </li>
-            <li class="cyan-255-hover black-255-text-hover">
-                <span class="tui-shortcut">B</span>
-                <span>Quit</span>
-            </li>
-        </ul>
-    </fieldset>
-</div>
-```
-
-### Panel
-<img src="https://image.ibb.co/dapGs9/tui_panel.png" />
-
-```html
-<div class="tui-panel">
-    ...
-</div>
-```
-
-### Inputs
-<img src="https://image.ibb.co/fCRFKp/tui_inputs.png" />
-
-```html
-<!-- Input -->
-<input class="tui-input" type="text" />
-<input class="tui-input" type="number" />
-<input class="tui-input" type="email" />
-<input class="tui-input" type="password" />
-<input class="tui-input" type="color" />
-<input class="tui-input" type="date" />
-<input class="tui-input" type="datetime-local" />
-
-<!-- Select -->
-<select class="tui-input">
-    <option selected>-- SELECT --</option>
-    <option>Option 1</option>
-    <option>Option 2</option>
-    <option>Option 3</option>
-</select>
-<select class="tui-input" multiple>
-    <option>Option 1</option>
-    <option>Option 2</option>
-    <option>Option 3</option>
-</select>
-
-<!-- Checkbox -->
-<label class="tui-checkbox">
-    Checkbox
-    <input type="checkbox"/>
-    <span></span>
-</label>
-
-<!-- Radio -->
-<fieldset class="tui-input-fieldset">
-    <legend>Radios</legend>
-    <label class="tui-radio">
-        Option 1
-        <input type="radio" name="radio" checked />
-        <span></span>
-    </label>
-    <label class="tui-radio">
-        Option 2
-        <input type="radio" name="radio" />
-        <span></span>
-    </label>
-</fieldset>
-
-<!-- Textarea -->
-<textarea class="tui-input"></textarea>
-```
-
-### Window Textarea
-<img src="https://image.ibb.co/gzkxX9/tui_win_textarea.png" />
-
-```html
-<div class="tui-window">
-    <fieldset class="tui-window-fieldset">
-        <legend align="center">FILE.C</legend>
-        <button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
-        <button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
-        <textarea class="tui-textarea"></textarea>
-    </fieldset>
-</div>
-```
-
-### Table
-<img src="https://image.ibb.co/cN8nzp/tui_table.png" />
-
-```html
-<table class="tui-table tui-table-hover">
-    <thead>
-        <tr>
-            <td>Name</td>
-            <td>Size</td>
-            <td>MTime</td>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>/.mc</td>
-            <td>1024</td>
-            <td>Apr 24 01:24</td>
-        </tr>
-    </tbody>
-</table>
-```
-
-### Progress Bar
-<img src="https://image.ibb.co/moYRs9/tui_progress.png" />
-
-```html
-<!-- Determinate -->
-<div class="tui-progress">
-    <span style="width: 25%"></span>
-</div>
-
-<!-- Indeterminate -->
-<div class="tui-progress">
-    <span class="tui-indeterminate"></span>
-</div>
-```
-
-## CSS Classes
-| Class | Description |
-| --- | --- |
-| `.tui-divider` | Create a white bottom divider |
-| `.tui-black-divider` | Create a black bottom divider |
-| `.tui-no-shadow` | Remove the shadow |
-| `.tui-no-padding` | Remove padding |
-| `.tui-shadow` | Create a shadow in the element |
-| `.tui-white-bg` | Used in html tag to create a white 168 dot background |
-| `.tui-blue-bg` | Used in html tag to create a blue 168 dot background |
-| `.left` | Quick left float |
-| `.right` | Quick right float |
-| `.inline` | Quick inline display |
-| `.block` | Quick block display |
-| `.tui-shortcut` | Used in lists to put some text like shortcuts on the right side of the main text |
-| `.tui-content` | Put a default padding in the container |
-| `.tui-nav` | Create a navbar |
-| `.tui-nav-fixed` | Change the navbar to a fixed position |
-| `.tui-statusbar` | Create a status bar |
-| `.tui-statusbar-divider` | Put a vertical divider in the status bar |
-| `.tui-input` | Create a TUI theme input like inputs, selects, textareas... |
-| `.tui-button` | Create a TUI button. It can be used to a, buttons, input[type="button"] |
-| `.tui-panel` | Create a TUI panel |
-| `.tui-window` | Create a TUI window |
-| `.tui-window-fieldset` | Put the border for the TUI window |
-| `.tui-input-fieldset` | Used to create a container for the inputs like checkboxes and radios |
-| `.tui-border-solid` | Change the border like fieldset borders to a solid border |
-| `.tui-fieldset-button` | Create a action button in the fieldset like buttons to close, minimize, maximize... |
-| `.tui-fieldset-button-left` | Change the position of the fieldset button to the left side |
-| `.tui-fieldset-statusbar` | Create a bottom status bar in the fieldset |
-| `.tui-checkbox` | Create TUI checkbox |
-| `.tui-radio` | Create TUI radio |
-| `.tui-progress` | Create a TUI progress bar |
-| `.tui-indeterminate` | Set the progress bar to indeterminate property |
-| `.tui-dropdown` | Create a menu dropdown. It can be used to the navbar itens, buttons... |
-| `.tui-dropdown-content` | The content that will be displayed for the dropdown |
-| `.tui-sidenav` | Create a left sidenav. To active, just move the cursor for the left side of the screen |
-| `.tui-table` | Create a table |
-| `.tui-table-hover` | Add an hover effect for the table rows |
-| `.tui-textarea` | Create a textarea without background |
-| `.tui-clock` | Create a clock space in the navbar |
-
-## CSS Colors
-| Colors | 168 Value | 255 Value |
-| --- | --- | --- |
-| `black` |  `rgb(0, 0, 0)` | `rgb(0, 0, 0)` |
-| `blue` | `rgb(0, 0, 168)` | `rgb(0, 0, 255)` |
-| `green` | `rgb(0, 168, 0)` | `rgb(0, 255, 0)` |
-| `cyan` | `rgb(0, 168, 168)` | `rgb(0, 255, 255)` |
-| `red` | `rgb(168, 0, 0)` | `rgb(255, 0, 0)` |
-| `purple` | `rgb(168, 0, 168)` | `rgb(255, 0, 255)` |
-| `yellow` | `rgb(168, 168, 0)` | `rgb(255, 255, 0)` |
-| `white` |`rgb(168, 168, 168)` | `rgb(255, 255, 255)` |
-
-## CSS Color Classes
-| Class | Description |
-| --- | --- |
-| `.<color>-168` | Change the background color to a specified color name with value 168 |
-| `.<color>-255` | Change the background color to a specified color name with value 255 |
-| `.<color>-168-text` | Change the foreground color to a specified color name with value 168 |
-| `.<color>-255-text` | Change the foreground color to a specified color name with value 255 |
-| `.<color>-168-border` | Change the border color to a specified color name with value 168 |
-| `.<color>-255-border` | Change the border color to a specified color name with value 255 |
-| `.<color>-168-hover` | Change the background color to a specified color name with value 168 on mouse hover |
-| `.<color>-255-hover` | Change the background color to a specified color name with value 255 on mouse hover |
-| `.<color>-168-text-hover` | Change the foreground color to a specified color name with value 168 on mouse hover |
-| `.<color>-255-text-hover` | Change the foreground color to a specified color name with value 255 on mouse hover | 
-
-## Credit
-TuiCss Framework &copy; Copyright 2018<br>
-by Vinícius Reif Biavatti<br>
-VBFoundation
+### Documentation
+Check the [repository wiki](https://github.com/vinibiavatti1/TuiCss/wiki) to access the documentation, components index, examples, styles, or to know how to contribute to this project.

TuiCss/tuicss.css

@@ -1,540 +0,0 @@
-/*
-    TuiCSS - (c) Copyright 2018
-    by Vinícius Reif Biavatti
-    VBFoundation
-*/
-
-/* 168 */
-.black-168                   {background-color: rgb(0, 0, 0)!important}
-.blue-168                    {background-color: rgb(0, 0, 168)!important}
-.green-168                   {background-color: rgb(0, 168, 0)!important}
-.cyan-168                    {background-color: rgb(0, 168, 168)!important}
-.red-168                     {background-color: rgb(168, 0, 0)!important}
-.purple-168                  {background-color: rgb(168, 0, 168)!important}
-.yellow-168                  {background-color: rgb(168, 168, 0)!important}
-.white-168                   {background-color: rgb(168, 168, 168)!important}
-.black-168-text              {color: rgb(0, 0, 0)!important}
-.blue-168-text               {color: rgb(0, 0, 168)!important}
-.green-168-text              {color: rgb(0, 168, 0)!important}
-.cyan-168-text               {color: rgb(0, 168, 168)!important}
-.red-168-text                {color: rgb(168, 0, 0)!important}
-.purple-168-text             {color: rgb(168, 0, 168)!important}
-.yellow-168-text             {color: rgb(168, 168, 0)!important}
-.white-168-text              {color: rgb(168, 168, 168)!important}
-.black-168-border            {border-color: rgb(0, 0, 0)!important}
-.blue-168-border             {border-color: rgb(0, 0, 168)!important}
-.green-168-border            {border-color: rgb(0, 168, 0)!important}
-.cyan-168-border             {border-color: rgb(0, 168, 168)!important}
-.red-168-border              {border-color: rgb(168, 0, 0)!important}
-.purple-168-border           {border-color: rgb(168, 0, 168)!important}
-.yellow-168-border           {border-color: rgb(168, 168, 0)!important}
-.white-168-border            {border-color: rgb(168, 168, 168)!important}
-.black-168-hover:hover       {background-color: rgb(0, 0, 0)!important}
-.blue-168-hover:hover        {background-color: rgb(0, 0, 168)!important}
-.green-168-hover:hover       {background-color: rgb(0, 168, 0)!important}
-.cyan-168-hover:hover        {background-color: rgb(0, 168, 168)!important}
-.red-168-hover:hover         {background-color: rgb(168, 0, 0)!important}
-.purple-168-hover:hover      {background-color: rgb(168, 0, 168)!important}
-.yellow-168-hover:hover      {background-color: rgb(168, 168, 0)!important}
-.white-168-hover:hover       {background-color: rgb(168, 168, 168)!important}
-.black-168-text-hover:hover  {color: rgb(0, 0, 0)!important}
-.blue-168-text-hover:hover   {color: rgb(0, 0, 168)!important}
-.green-168-text-hover:hover  {color: rgb(0, 168, 0)!important}
-.cyan-168-text-hover:hover   {color: rgb(0, 168, 168)!important}
-.red-168-text-hover:hover    {color: rgb(168, 0, 0)!important}
-.purple-text-168-hover:hover {color: rgb(168, 0, 168)!important}
-.yellow-text-168-hover:hover {color: rgb(168, 168, 0)!important}
-.white-text-168-hover:hover  {color: rgb(168, 168, 168)!important}
-
-/* 255 */
-.black-255          {background-color: rgb(0, 0, 0)!important}
-.blue-255           {background-color: rgb(0, 0, 255)!important}
-.green-255          {background-color: rgb(0, 255, 0)!important}
-.cyan-255           {background-color: rgb(0, 255, 255)!important}
-.red-255            {background-color: rgb(255, 0, 0)!important}
-.purple-255         {background-color: rgb(255, 0, 255)!important}
-.yellow-255         {background-color: rgb(255, 255, 0)!important}
-.white-255          {background-color: rgb(255, 255, 255)!important}
-.black-255-text     {color: rgb(0, 0, 0)!important}
-.blue-255-text      {color: rgb(0, 0, 255)!important}
-.green-255-text     {color: rgb(0, 255, 0)!important}
-.cyan-255-text      {color: rgb(0, 255, 255)!important}
-.red-255-text       {color: rgb(255, 0, 0)!important}
-.purple-255-text    {color: rgb(255, 0, 255)!important}
-.yellow-255-text    {color: rgb(255, 255, 0)!important}
-.white-255-text     {color: rgb(255, 255, 255)!important}
-.black-255-border   {border-color: rgb(0, 0, 0)!important}
-.blue-255-border    {border-color: rgb(0, 0, 255)!important}
-.green-255-border   {border-color: rgb(0, 255, 0)!important}
-.cyan-255-border    {border-color: rgb(0, 255, 255)!important}
-.red-255-border     {border-color: rgb(255, 0, 0)!important}
-.purple-255-border  {border-color: rgb(255, 0, 255)!important}
-.yellow-255-border  {border-color: rgb(255, 255, 0)!important}
-.white-255-border   {border-color: rgb(255, 255, 255)!important}
-.black-255-hover:hover  {background-color: rgb(0, 0, 0)!important}
-.blue-255-hover:hover   {background-color: rgb(0, 0, 255)!important}
-.green-255-hover:hover  {background-color: rgb(0, 255, 0)!important}
-.cyan-255-hover:hover   {background-color: rgb(0, 255, 255)!important}
-.red-255-hover:hover    {background-color: rgb(255, 0, 0)!important}
-.purple-255-hover:hover {background-color: rgb(255, 0, 255)!important}
-.yellow-255-hover:hover {background-color: rgb(255, 255, 0)!important}
-.white-255-hover:hover  {background-color: rgb(255, 255, 255)!important}
-.black-255-text-hover:hover  {color: rgb(0, 0, 0)!important}
-.blue-255-text-hover:hover   {color: rgb(0, 0, 255)!important}
-.green-255-text-hover:hover  {color: rgb(0, 255, 0)!important}
-.cyan-255-text-hover:hover   {color: rgb(0, 255, 255)!important}
-.red-255-text-hover:hover    {color: rgb(255, 0, 0)!important}
-.purple-text-255-hover:hover {color: rgb(255, 0, 255)!important}
-.yellow-text-255-hover:hover {color: rgb(255, 255, 0)!important}
-.white-text-255-hover:hover  {color: rgb(255, 255, 255)!important}
-
-/* GLOBAL */
-html {
-    font-family: 'Lucida Console';
-    font-size: 18px;
-    box-sizing: border-box;
-}
-body {
-    margin: 0px;
-}
-*, *:before, *:after {
-    font-family: inherit;
-    font-size: inherit;
-    box-sizing: inherit;
-}
-ul {
-    margin: 0px;
-    padding: 0px;
-    list-style-type: none;
-}
-ul li {
-    list-style-type: none;
-}
-ul li a {
-    display: block;
-}
-a {
-    color: inherit;
-    text-decoration: none;
-}
-span {
-    margin: 0px;
-}
-hr {
-    border: none;
-    border-bottom: 2px solid rgb(255, 255, 255);
-}
-input, select, textarea {
-    width: 200px;
-}
-
-/* TUI UTILS */
-.tui-divider {
-    border-bottom: 2px solid rgb(255, 255, 255);
-    display: block;
-}
-.tui-black-divider {
-    border-bottom: 2px solid rgb(0, 0, 0);
-    display: block;
-}
-.tui-no-shadow {
-    box-shadow: none!important;
-}
-.tui-no-padding {
-    padding: 0px!important;
-}
-.tui-shadow {
-    box-shadow: 10px 10px black!important;
-}
-.tui-white-bg {
-    background-image: url("images/bg.png");
-    background-repeat: repeat;
-}
-.tui-blue-bg {
-    background-image: url("images/bg-black.png");
-    background-repeat: repeat;
-}
-.left {
-    float: left!important;
-}
-.right {
-    float: right!important;
-}
-.inline {
-    display: inline!important;
-}
-.block {
-    display: block!important;
-}
-.tui-shortcut {
-    float: right;
-}
-.tui-content {
-    padding: 10px;
-}
-
-/* NAV */
-.tui-nav {
-    width: 100%;
-    background-color: rgb(168, 168, 168);
-    padding: 0px 1px;
-    z-index: 9;
-}
-.tui-nav-fixed {
-    position: fixed;
-}
-.tui-nav ul li {
-    display: inline-block;
-    margin-left: 10px;
-    padding: 1px 3px;
-}
-.tui-nav ul li a {
-    display: block;
-}
-.tui-nav ul li:hover {
-    background-color: rgb(0, 168, 0);
-}
-
-/* STATUSBAR */
-.tui-statusbar {
-    width: 100%;
-    background-color: rgb(168, 168, 168);
-    padding: 0px 1px;
-    position: fixed;
-    left: 0px;
-    bottom: 0px;
-    z-index: 9;
-}
-.tui-statusbar ul li {
-    display: inline-block;
-    margin-left: 10px;
-    padding: 1px 3px;
-}
-.tui-statusbar ul li:active {
-    background-color: rgb(0, 0, 168);
-    color: white;
-}
-.tui-statusbar .tui-statusbar-divider {
-    border-right: 2px black solid;
-    display: inline;
-    margin: 0px 3px;
-} 
-
-/* TUI INPUT */
-.tui-input {
-    background-color: rgb(0, 0, 0);
-    color: white;
-    outline:0;
-    border: none;
-    padding: 1px;
-}
-.tui-input:focus {
-    background-color: rgb(255, 255, 0)!important;
-    color: black!important;
-}
-
-/* TUI BUTTON */
-.tui-button {
-	display: inline-block;
-    outline:0;
-    padding: 1px 10px;
-    background-color: rgb(0, 168, 0);
-    color: black;
-    border: none;
-    cursor: pointer;
-    text-align: center;
-    box-shadow: 10px 10px black;
-}
-.tui-button:active {
-    background-color: rgb(0, 168, 168)!important;
-    color: black!important;
-    box-shadow: none!important;
-}
-.tui-button:focus {
-    color: rgb(0, 255, 255)!important;
-}
-
-/* TUI PANEL */
-.tui-panel {
-    background-color: rgb(0, 0, 168);
-    padding: 12px;
-    display: inline-block;
-    color: white;
-    box-shadow: 6px 6px black;
-}
-
-/* TUI WINDOW */
-.tui-window {
-    background-color: rgb(0, 0, 168);
-    padding: 1px;
-    display: inline-block;
-    position: relative;
-    box-shadow: 10px 10px black;
-    color: white;
-}
-
-/* TUI FIELDSET */
-.tui-window-fieldset {
-    border: 6px white double;
-    padding: 10px;
-    background-color: inherit;
-    margin-bottom: 6px;
-}
-.tui-window-fieldset-no-legend {
-    margin-top: 6px;
-}
-.tui-input-fieldset {
-    border-top: 6px white double;
-    border-bottom: 6px white double;
-    border-left: 2px white solid;
-    border-right: 2px white solid;
-    padding: 5px;
-    background-color: inherit;
-}
-.tui-input-fieldset:hover {
-    border-color: yellow!important;
-}
-.tui-input-fieldset:hover legend {
-    color: yellow!important;
-}
-.tui-border-solid {
-    border: 2px white solid;
-}
-.tui-fieldset-button {
-    position: absolute;
-    top: 0px;
-    right: 16px;
-    color: white;
-    background-color: inherit;
-    z-index: 2;
-    border: none;
-    cursor: pointer;
-    outline:0;
-    padding: 2px;
-}
-.tui-fieldset-statusbar {
-    position: absolute;
-    bottom: 0px;
-    left: 16px;
-    color: white;
-    background-color: inherit;
-    z-index: 2;
-    padding: 2px;
-}
-.tui-fieldset-button-left {
-    left: 16px!important;
-    right: initial;
-}
-.tui-fieldset-button::before {
-    content: "[";
-}
-.tui-fieldset-button::after {
-    content: "]";
-}
-.tui-fieldset-button:active {
-    color: rgb(0, 255, 255)!important;
-}
-
-/* CHECKBOX */
-.tui-checkbox {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    color: white;
-    padding-left: 30px;
-}
-.tui-checkbox input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    top: 0px;
-    left: 0px;
-}
-.tui-checkbox span {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    cursor: pointer;
-    top: 0px;
-    left: 0px;
-}
-.tui-checkbox input:checked ~ span::after {
-    content: "[√]";
-    color: rgb(0, 255, 255);
-}
-.tui-checkbox input:not(checked) ~ span::after {
-    content: "[\00a0]";
-}
-
-/* RADIO */
-.tui-radio {
-    display: block;
-    position: relative;
-    cursor: pointer;
-    color: white;
-    padding-left: 30px;
-}
-.tui-radio input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    top: 0px;
-    left: 0px;
-}
-.tui-radio span {
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    cursor: pointer;
-    top: 0px;
-    left: 0px;
-}
-.tui-radio input:checked ~ span:after {
-    content: "(•)";
-    color: rgb(0, 255, 255)!important;
-}
-.tui-radio input:not(checked) ~ span:after {
-    content: "(\00a0)";
-}
-
-/* PROGRESS BAR */
-.tui-progress {
-    display: block;
-    position: relative;
-    height: 16px;
-    width: 200px;
-    background-color: rgb(0, 168, 168);
-    overflow: hidden;
-}
-.tui-progress span {
-    position: absolute;
-    left: 0px;
-    background-color: rgb(0, 255, 255);
-    height: 16px;
-    display: inline-block;
-}
-.tui-progress .tui-indeterminate {
-    position: absolute;
-    left: 0px;
-    background-color: rgb(0, 255, 255);
-    height: 16px;
-    width: 16px;
-    display: inline-block;
-    animation: indeterminate 1s backwards;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}
-@keyframes indeterminate {
-    from {margin-left: -10%; }
-    to {margin-left: 100%}
-}
-
-/* DROPDOWN */
-.tui-dropdown {
-    position: relative;
-    display: inline-block;
-    cursor: pointer;
-}
-.tui-dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: rgb(168, 168, 168);
-    min-width: 200px;
-    padding: 6px;
-    z-index: 9;
-}
-.tui-dropdown-content ul {
-    border: 2px black solid;
-}
-.tui-dropdown-content ul li {
-    display: block;
-    margin: 6px;
-}
-.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
-    display: block;
-}
-
-/* SCROLLBAR */
-::-webkit-scrollbar {
-    width: 10px;
-}
-::-webkit-scrollbar-track {
-    background-image: url("images/scroll.png");
-    background-repeat: repeat;
-}
-::-webkit-scrollbar-thumb {
-    background-color: rgb(0, 168, 168);
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(0, 168, 168);
-}
-
-/* SIDENAV */
-.tui-sidenav {
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    background-color: rgb(0, 168, 168);
-    width: 1px;
-    z-index: 10;
-    height: 100%;
-    overflow: hidden;
-}
-.tui-sidenav:hover {
-    min-width: 200px;
-    box-shadow: 10px 10px black!important;
-    padding: 6px;
-}
-.tui-sidenav ul {
-    border: 2px black solid;
-}
-.tui-sidenav ul li {
-    display: block;
-    margin: 6px;
-}
-.tui-sidenav ul li a {
-    display: block;
-}
-.tui-sidenav ul li:hover {
-    background-color: rgb(255, 255, 0);
-}
-
-/* TABLE */
-.tui-table {
-    border: 2px solid rgb(168, 168, 168);
-    padding: 5px;
-    border-collapse: collapse;
-}
-.tui-table-hover tbody tr:hover {
-    background-color: rgb(0, 168, 168);
-    color: black;
-}
-.tui-table tbody {
-    background-color: inherit;
-    color: white;
-}
-.tui-table tbody tr td {
-    border-right: 2px solid rgb(168, 168, 168);
-    padding: 0px 2px;
-}
-.tui-table thead {
-    background-color: inherit;
-    color: rgb(255, 255, 0);
-    text-align: center;
-}
-
-/* TEXTAREA */
-.tui-textarea {
-    background-color: inherit;
-    border: none;
-    padding: 0px;
-    color: rgb(255, 255, 0);
-    outline: none;
-}
-
-/* CLOCK */
-.tui-clock {
-    padding: 1px 0px;
-    margin-right: 10px;
-    float:right;
-}

dist/fonts/dos437.txt

@@ -0,0 +1,72 @@
+ /
+/(_____________            ____
+\              /______)\  |    |        
+:\      |     /         \:|    |:::::::::: : .. . : ..  . .  :.    .
+  \_____|    /      |    \|    |______  
+___ /               ________          \...     .     .      .
+\______________     \       |  |      /.. . .   .   .             .
+               \            |__|     /
+--x--x-----x----\______     |-/_____/-x--x-xx--x-- - -x -- - -   --  - - - 
+. . . . . . . . . . . .\____|. . . . . .
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - general information  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ "Perfect DOS VGA 437" and "Perfect DOS VGA 437 Win" are truetype fonts
+ designed to emulate the MS-DOS/Text mode standard font, used on VGA monitors,
+ with the 437 Codepage (standard US/International). This is a "bitmap" font,
+ meaning it emulates a bitmap font and can only be used at a given size (8 or
+ multiples of it like 16, 24, 32, etc). It's optimized for Flash too, so it
+ won't produce antialias if used at round positions.
+ 
+ There are two fonts available. "Perfect DOS VGA 437" uses the original DOS
+ codepage 437. It should be used, for example, if you're opening DOS ASCII
+ files on notepad or another windows-based editor. Since it's faithful to the
+ original DOS codes, it won't accent correctly in windows ("é" would produce
+ something different, not an "e" with an acute).
+ 
+ There's also "Perfect DOS VGA 437 Win" which is the exactly same font adapted
+ to a windows codepage. This should use accented characters correctly but won't
+ work if you're opening a DOS-based text file.
+ 
+ UPDATE: this is a new version, updated in august/2008. It has fixed leading
+ metrics for Mac systems.
+
+-------------------------------------------------------------------------------
+>> perfect dos vga 437 - creation process >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+ 
+ This font was created to be used on a Flash-based ANSi viewer I'm working. To
+ create it, I created a small Quick Basic program to write all characters on
+ screen,
+ 
+  CLS
+  FOR l = 0 TO 255
+    charWrite 1 + (l MOD 20), 1 + (l \ 20) * 6 + (l MOD 2), LTRIM$(RTRIM$(STR$(l))) + CHR$(l)
+  NEXT
+  SUB charWrite (lin, col, char$)
+    DEF SEG = &HB800
+    FOR i = 1 TO LEN(char$)
+      POKE ((lin - 1) * 160) + ((col - 2 + i) * 2), ASC(MID$(char$, i, 1))
+      IF (i = LEN(char$)) THEN POKE ((lin - 1) * 160) + ((col - 2 + i) * 2) + 1, 113
+    NEXT
+  END SUB
+  
+ Then captured the text screen using SCREEN THIEF (a very, very old screen
+ capture TSR program which converts text screens to images accurately). I then
+ recreated the font polygon by polygon on Fontlab, while looking at the image
+ on Photoshop. No conversion took place.
+
+-------------------------------------------------------------------------------
+>> author >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
+-------------------------------------------------------------------------------
+
+ zeh fernando remembers the old days. SMASH DAH FUCKING ENTAH.
+
+ http://www.fatorcaos.com.br
+
+ rorshack ^ maiden brazil
+
+-------------------------------------------------------------------------------
+^zehPULLSdahTRICK^kudosOUTtoWHOkeepsITreal^smashDAHfuckingENTAH!!!^lowres4ever^
+-------------------------------------------------------------------------------

dist/tuicss.js

@@ -0,0 +1,256 @@
+/**
+ * Replacement for jQuery's $(document).ready() function.
+ * This is handy in making sure stuff fires after the DOM is ready to be touched.
+ * Stolen from:https://stackoverflow.com/a/53601942/344028
+ *
+ * @param fn Callback.
+ */
+function domReady(fn) {
+    // If we're early to the party
+    document.addEventListener('DOMContentLoaded', fn);
+
+    // If late; I mean on time.
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+}
+
+/**
+ * TuiTabs controller
+ */
+function tabsController() {
+    // Get all the tab elements (typically li tags).
+    const tabs = document.getElementsByClassName('tui-tab');
+
+    if (!tabs.length) {
+        // No tabs found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    for (const tab of tabs) {
+        // Add click listeners to them.
+        tab.addEventListener('click', function (e) {
+
+            // Check if the clicked tab is disabled
+            if(e.target.classList.contains("disabled")) {
+                return;
+            }
+
+            // Remove the 'active' class from any and all tabs.
+            for (const otherTab of tabs) {
+                otherTab.classList.remove('active');
+            }
+
+            // Get the content element.
+            const tabContents = document.getElementsByClassName('tui-tab-content');
+
+            if (tabContents) {
+                for (const tabContent of tabContents) {
+                    // Hide all tab contents.
+                    tabContent.style.display = 'none';
+                }
+            } else {
+                throw 'No tab content elements found.'
+            }
+
+            // Get the id of the tab contents we want to show.
+            const tabContentId = e.target.getAttribute('data-tab-content');
+
+            if (tabContentId) {
+                const tabContent = document.getElementById(tabContentId);
+                if (tabContent) {
+                    // Show the tab contents.
+                    tabContent.style.display = 'block';
+                } else {
+                    throw 'No tab content element with id "' + tabContentId + '" found.';
+                }
+            }
+            // We are not going to throw an error here, since we could make the tab do something else that a tab
+            // normally wouldn't do.
+
+            // Set the clicked tab to have the 'active' class so we can use it in the next part.
+            e.target.classList.add('active');
+
+        });
+    }
+
+    // Grab the first tab with the active class.
+    const activeTab = document.querySelector('.tui-tab.active');
+    if (activeTab) {
+        // Now click it 'click' it.
+        activeTab.click();
+    } else {
+        // Nothing found, just click the first tab foud.
+        tabs[0].click()
+    }
+}
+
+/**
+ * Date/time field controller
+ */
+function datetimeController() {
+    // Get date/time elements.
+    const clocks = document.getElementsByClassName('tui-datetime');
+
+    if (!clocks.length) {
+        // No date time elements found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Kick off our clock interval stuff.
+    datetimeInterval();
+
+    // Synchronize time and set interval to control the clocks
+    setTimeout(() => {
+        setInterval(datetimeInterval, 1000);
+    }, 1000 - new Date().getMilliseconds());
+
+    function datetimeInterval() {
+        for (const clock of clocks) {
+            if (clock === null) {
+                continue;
+            }
+
+            // Get the format we want to display in the element.
+            let format = clock.getAttribute('data-format');
+
+            // parse out the date and time into constants.
+            const today     = new Date();
+            const month     = (today.getMonth() + 1).toString().padStart(2, '0');
+            const day       = today.getDate().toString().padStart(2, '0');
+            const dayOfWeek = (today.getDay() + 1).toString().padStart(2, '0');
+            const year      = today.getFullYear().toString();
+            const hour      = today.getHours().toString().padStart(2, '0');
+            const hour12    = (parseInt(hour) + 24) % '12' || '12';
+            const minute    = today.getMinutes().toString().padStart(2, '0');
+            const second    = today.getSeconds().toString().padStart(2, '0');
+            const ampm      = parseInt(hour) >= 12 ? 'PM' : 'AM';
+
+            // Replace based on the format.
+            format = format.replace('M', month);
+            format = format.replace('d', day);
+            format = format.replace('e', dayOfWeek);
+            format = format.replace('y', year);
+            format = format.replace('H', hour);
+            format = format.replace('h', hour12);
+            format = format.replace('m', minute);
+            format = format.replace('s', second);
+            format = format.replace('a', ampm);
+
+            // Show it in the element.
+            clock.innerHTML = format;
+        }
+    }
+}
+
+/**
+ * Sidenav Controller
+ * There should only side navigation element at the moment.
+ */
+function sidenavController() {
+    // Get the side navigation button (there should be only one, but if not, we are getting the first one).
+    const sideNavButton = document.querySelector('.tui-sidenav-button');
+
+    if (!sideNavButton) {
+        // No side navigation button found, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Add the click event listener to the buttons.
+    sideNavButton.addEventListener('click', () => {
+        // Get the side navigation element (there should be only one, but if not, we are getting the first one).
+        const sideNav = document.querySelector('.tui-sidenav');
+
+        if (sideNav) {
+            if (sideNav.classList.contains('active')) {
+                sideNav.classList.remove('active');
+            } else {
+                sideNav.classList.add('active');
+            }
+        } else {
+            throw 'No sidenav element found.'
+        }
+    });
+}
+
+/**
+ * Modal controller
+ */
+function modalController() {
+    // Get the overlap (overlay) element (there should be only one, but if not, we are getting the first one).
+    const tuiOverlap = document.querySelector('.tui-overlap');
+
+    if (!tuiOverlap) {
+        // No overlap found element, return early and save a couple CPU cycles.
+        return;
+    }
+
+    // Find modal buttons.
+    const modalButtons = document.getElementsByClassName('tui-modal-button');
+    for (const modalButton of modalButtons) {
+        // Add the click event listener to the buttons.
+        modalButton.addEventListener('click', (e) => {
+            // Show the overlap.
+            tuiOverlap.classList.add('active');
+
+            // Get the display element for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Show it.
+                    modal.classList.add('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+
+    // Find the close modal buttons.
+    const modalCloseButtons = document.getElementsByClassName('tui-modal-close-button');
+
+    if (modalButtons.length > 0 && !modalCloseButtons.length) {
+        // A modal without a close button, is a bad modal.
+        throw 'No modal close buttons found.'
+    }
+
+    for (const modalCloseButton of modalCloseButtons) {
+        // Add the click event listener to the buttons.
+        modalCloseButton.addEventListener('click', (e) => {
+            // Hide the the overlap.
+            tuiOverlap.classList.remove('active');
+
+            // Get the display element id for the modal.
+            const modalId = e.target.getAttribute('data-modal');
+
+            if (modalId) {
+                // Get the modal element.
+                const modal = document.getElementById(modalId);
+
+                if (modal) {
+                    // Hide it.
+                    modal.classList.remove('active');
+                } else {
+                    throw 'No modal element with id of "' + modalId + '" found.';
+                }
+            } else {
+                throw 'Modal close button data-modal attribute is empty or not set.'
+            }
+        });
+    }
+}
+
+/**
+ * Init: This is at the bottom to make sure it is fired correctly.
+ */
+domReady(function () {
+    tabsController();
+    datetimeController();
+    sidenavController();
+    modalController();
+});

dist/tuicss.min.js

@@ -0,0 +1 @@
+function domReady(t){document.addEventListener("DOMContentLoaded",t),"interactive"!==document.readyState&&"complete"!==document.readyState||t()}function tabsController(){const t=document.getElementsByClassName("tui-tab");if(!t.length)return;for(const e of t)e.addEventListener("click",function(e){if(e.target.classList.contains("disabled"))return;for(const e of t)e.classList.remove("active");const o=document.getElementsByClassName("tui-tab-content");if(!o)throw"No tab content elements found.";for(const t of o)t.style.display="none";const n=e.target.getAttribute("data-tab-content");if(n){const t=document.getElementById(n);if(!t)throw'No tab content element with id "'+n+'" found.';t.style.display="block"}e.target.classList.add("active")});const e=document.querySelector(".tui-tab.active");e?e.click():t[0].click()}function datetimeController(){const t=document.getElementsByClassName("tui-datetime");function e(){for(const e of t){if(null===e)continue;let t=e.getAttribute("data-format");const o=new Date,n=(o.getMonth()+1).toString().padStart(2,"0"),a=o.getDate().toString().padStart(2,"0"),c=(o.getDay()+1).toString().padStart(2,"0"),s=o.getFullYear().toString(),i=o.getHours().toString().padStart(2,"0"),l=(parseInt(i)+24)%"12"||"12",r=o.getMinutes().toString().padStart(2,"0"),d=o.getSeconds().toString().padStart(2,"0"),u=parseInt(i)>=12?"PM":"AM";t=(t=(t=(t=(t=(t=(t=(t=(t=t.replace("M",n)).replace("d",a)).replace("e",c)).replace("y",s)).replace("H",i)).replace("h",l)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=t}}t.length&&(e(),setTimeout(()=>{setInterval(e,1e3)},1e3-(new Date).getMilliseconds()))}function sidenavController(){const t=document.querySelector(".tui-sidenav-button");t&&t.addEventListener("click",()=>{const t=document.querySelector(".tui-sidenav");if(!t)throw"No sidenav element found.";t.classList.contains("active")?t.classList.remove("active"):t.classList.add("active")})}function modalController(){const t=document.querySelector(".tui-overlap");if(!t)return;const e=document.getElementsByClassName("tui-modal-button");for(const o of e)o.addEventListener("click",e=>{t.classList.add("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.add("active")}});const o=document.getElementsByClassName("tui-modal-close-button");if(e.length>0&&!o.length)throw"No modal close buttons found.";for(const e of o)e.addEventListener("click",e=>{t.classList.remove("active");const o=e.target.getAttribute("data-modal");if(!o)throw"Modal close button data-modal attribute is empty or not set.";{const t=document.getElementById(o);if(!t)throw'No modal element with id of "'+o+'" found.';t.classList.remove("active")}})}domReady(function(){tabsController(),datetimeController(),sidenavController(),modalController()});

examples.html

@@ -1,796 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" class="tui-blue-bg">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>TUI</title>
-    <link rel="stylesheet" href="TuiCss/tuicss.css">
-</head>
-
-<body>
-
-    <!-- SIDENAV -->
-    <nav class="tui-sidenav">
-        <ul>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">O</span>pen
-                    <span class="tui-shortcut">ctrl+o</span>
-                </a>
-            </li>
-            <li>
-                <a href="#!">OS Shell</a>
-            </li>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">C</span>opy
-                    <span class="tui-shortcut">ctrl+c</span>
-                </a>
-            </li>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">P</span>aste
-                    <span class="tui-shortcut">ctrl+v</span>
-                </a>
-            </li>
-            <li>
-                <a href="#!">C<span class="red-168-text">u</span>t
-                    <span class="tui-shortcut">ctrl+x</span>
-                </a>
-            </li>
-            <div class="tui-black-divider"></div>
-            <li>
-                <a href="#!">Insert</a>
-            </li>
-            <li>
-                <a href="#!">Delete</a>
-            </li>
-            <li>
-                <a href="#!">Go...</a>
-            </li>
-            <div class="tui-black-divider"></div>
-            <li>
-                <a href="#!">
-                    <span class="red-168-text">S</span>earch
-                    <span class="tui-shortcut">ctrl+p</span>
-                </a>
-            </li>
-            <div class="tui-black-divider"></div>
-            <li>
-                <a href="#!">Exit <span class="tui-shortcut">F10</span></a>
-            </li>
-        </ul>
-    </nav>
-
-    <!-- NAV -->
-    <nav class="tui-nav tui-nav-fixed">
-        <span class="tui-clock" id="clock"></span>
-        <ul>
-            <li class="tui-dropdown">
-                <span class="red-168-text">≡</span>
-                <div class="tui-dropdown-content">
-                    <ul>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">R</span>epaint desktop
-                            </a>
-                        </li>
-                        <div class="tui-black-divider"></div>
-                        <li>
-                            <a href="#!">
-                                R<span class="red-168-text">e</span>load
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                Re<span class="red-168-text">s</span>tore
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-            <li class="tui-dropdown">
-                <span class="red-168-text">F</span>ile
-                <div class="tui-dropdown-content">
-                    <ul>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">N</span>ew
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">O</span>pen...
-                                <span class="tui-shortcut">F3</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">S</span>ave
-                                <span class="tui-shortcut">F2</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                S<span class="red-168-text">a</span>ve as...
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                Save a<span class="red-168-text">l</span>l
-                            </a>
-                        </li>
-                        <div class="tui-black-divider"></div>
-
-                        <!-- SUBMENU EXAMPLE -->
-                        <li class="tui-dropdown">
-                            <span class="right">►</span>
-                            <span class="red-168-text">M</span>ore
-                            <div class="tui-dropdown-content">
-                                <ul>
-                                    <li>
-                                        <a href="#!">
-                                            <span class="red-168-text">C</span>hange dir...
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#!">
-                                            <span class="red-168-text">P</span>rint
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a href="#!">
-                                            <span class="red-168-text">D</span>OS shell
-                                        </a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </li>
-
-                        <div class="tui-black-divider"></div>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">Q</span>uit
-                                <span class="tui-shortcut">F10</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-            <li class="tui-dropdown">
-                <span class="red-168-text">E</span>dit
-                <div class="tui-dropdown-content">
-                    <ul>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">C</span>opy
-                                <span class="tui-shortcut">ctrl+c</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">P</span>aste
-                                <span class="tui-shortcut">ctrl+v</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">C<span class="red-168-text">u</span>t
-                                <span class="tui-shortcut">ctrl+x</span>
-                            </a>
-                        </li>
-                        <div class="tui-black-divider"></div>
-                        <li>
-                            <a href="#!">Insert</a>
-                        </li>
-                        <li>
-                            <a href="#!">Delete</a>
-                        </li>
-                        <li>
-                            <a href="#!">Go...</a>
-                        </li>
-                        <div class="tui-black-divider"></div>
-                        <li>
-                            <a href="#!">
-                                <span class="red-168-text">S</span>earch
-                                <span class="tui-shortcut">ctrl+p</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-            <li class="tui-dropdown">
-                <span class="red-168-text">E</span>dit Styled
-                <div class="tui-dropdown-content blue-168 white-255-text">
-                    <ul class="white-255-border">
-                        <li>
-                            <a href="#!">
-                                <span class="green-255-text">C</span>opy
-                                <span class="tui-shortcut">ctrl+c</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">
-                                <span class="green-255-text">P</span>aste
-                                <span class="tui-shortcut">ctrl+v</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#!">C<span class="green-255-text">u</span>t
-                                <span class="tui-shortcut">ctrl+x</span>
-                            </a>
-                        </li>
-                        <div class="tui-divider"></div>
-                        <li>
-                            <a href="#!">Insert</a>
-                        </li>
-                        <li>
-                            <a href="#!">Delete</a>
-                        </li>
-                        <li>
-                            <a href="#!">Go...</a>
-                        </li>
-                        <div class="tui-divider"></div>
-                        <li>
-                            <a href="#!">
-                                <span class="green-255-text">S</span>earch
-                                <span class="tui-shortcut">ctrl+p</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-            <li><a href="#!"><span class="red-168-text">H</span>elp</a></li>
-        </ul>
-    </nav>
-    <br>
-
-    <!-- CONTENT -->
-    <div class="tui-content">
-
-        <!-- WINDOW EXAMPLE 1 -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend>Window</legend>
-                <button class="tui-fieldset-button tui-fieldset-button-right"><span class="green-255-text">■</span></button>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                Curabitur id vestibulum libero, id fermentum lorem.<br>
-                Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
-                Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
-                In quis bibendum libero. Donec nec egestas ipsum.<br>
-                Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
-                <br>
-                <div class="tui-divider"></div>
-                <br>
-                <button class="tui-button">more...</button>
-                <button class="tui-button purple-168 white-255-text">share</button>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW EXAMPLE 2 -->
-        <div class="tui-window white-168 black-255-text">
-            <fieldset class="tui-window-fieldset">
-                <legend class="white-255-text">Window</legend>
-                <div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                    Curabitur id vestibulum libero, id fermentum lorem.<br>
-                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
-                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
-                    In quis bibendum libero. Donec nec egestas ipsum.<br>
-                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                    Curabitur id vestibulum libero, id fermentum lorem.<br>
-                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
-                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
-                    In quis bibendum libero. Donec nec egestas ipsum.<br>
-                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                    Curabitur id vestibulum libero, id fermentum lorem.<br>
-                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
-                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
-                    In quis bibendum libero. Donec nec egestas ipsum.<br>
-                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
-                </div>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW EXAMPLE 3 -->
-        <div class="tui-window cyan-168 black-255-text">
-            <fieldset class="tui-window-fieldset">
-                <legend class="white-255-text">Window</legend>
-                <span class="tui-shadow">The Lorem Ipsum </span><br><br>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
-                Curabitur id vestibulum libero, id fermentum lorem.<br>
-                Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
-                Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
-                In quis bibendum libero. Donec nec egestas ipsum.<br>
-                Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
-                <br>
-                <div class="tui-divider"></div>
-                <br>
-                <a class="tui-button white-168">accept</a>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW EXAMPLE 4 -->
-        <div class="tui-window red-168">
-            <fieldset class="tui-window-fieldset">
-                <legend>Error!</legend>
-                An ERROR ocurred while processing!
-                <br><br>
-                <button class="tui-button white-168"><span class="yellow-255-text">o</span>k</button>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW EXAMPLE 5 -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset tui-border-solid">
-                <legend align="center">Window</legend>
-                <button class="tui-fieldset-button tui-fieldset-button-left">X</button>
-                <div class="tui-fieldset-statusbar">Text format: UTF-8</div>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec placerat
-                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
-                <br><br>
-                <span class="tui-divider"></span>
-                <br>Author: Lorem Ipsum<br><br>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW EXAMPLE 6 -->
-        <div class="tui-window red-168">
-            <fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid">
-                <span class="red-255 yellow-255-text">Warning! There are pendencies</span><br><br>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec placerat
-                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
-            </fieldset>
-        </div><br><br>
-
-        <!-- LIST -->
-        <div class="tui-window purple-168">
-            <fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid" style="width: 300px">
-                <ul>
-                    <li class="cyan-255-hover black-255-text-hover">
-                        <a href="#!">
-                            <span class="tui-shortcut">A</span>
-                            <span>Register Tables</span>
-                        </a>
-                    </li>
-                    <li class="cyan-255-hover black-255-text-hover">
-                        <a href="#!">
-                            <span class="tui-shortcut">B</span>
-                            <span>Register Consumers</span>
-                        </a>
-                    </li>
-                    <li class="cyan-255-hover black-255-text-hover">
-                        <a href="#!">
-                            <span class="tui-shortcut">C</span>
-                            <span>Register Companies</span>
-                        </a>
-                    </li>
-                    <li class="cyan-255-hover black-255-text-hover">
-                        <a href="#!">
-                            <span class="tui-shortcut">D</span>
-                            <span>Search Windows</span>
-                        </a>
-                    </li>
-                    <li class="cyan-255-hover black-255-text-hover">
-                        <a href="#!">
-                            <span class="tui-shortcut">E</span>
-                            <span>Quit</span>
-                        </a>
-                    </li>
-                </ul>
-            </fieldset>
-        </div><br><br>
-
-        <!-- PANEL EXAMPLE 1 -->
-        <div class="tui-panel">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec placerat
-            lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
-        </div><br><br>
-
-        <!-- PANEL EXAMPLE 2 -->
-        <div class="tui-panel yellow-168 black-255-text">
-            NOTE: Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec
-            placerat
-            lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
-        </div><br><br>
-
-        <!-- INPUTS -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend>Inputs</legend>
-                TEXT:<br><input class="tui-input" /><br>
-                NUMBER:<br><input class="tui-input" type="number" /><br>
-                DATE:<br><input class="tui-input" type="date" /><br>
-                DATETIME:<br><input class="tui-input" type="datetime-local" /><br>
-                PASSWORD:<br><input class="tui-input" type="password" /><br>
-                SELECT:<br>
-                <select class="tui-input">
-                    <option selected>-- SELECT --</option>
-                    <option>Option 1</option>
-                    <option>Option 2</option>
-                    <option>Option 3</option>
-                </select>
-                <fieldset class="tui-input-fieldset">
-                    <legend>Checkboxes</legend>
-                    <label class="tui-checkbox">One
-                        <input type="checkbox" checked />
-                        <span></span>
-                    </label>
-                    <label class="tui-checkbox">Second
-                        <input type="checkbox" />
-                        <span></span>
-                    </label>
-                </fieldset>
-                <fieldset class="tui-input-fieldset">
-                    <legend>Radios</legend>
-                    <label class="tui-radio">One
-                        <input type="radio" name="radio" checked />
-                        <span></span>
-                    </label>
-                    <label class="tui-radio">Second
-                        <input type="radio" name="radio" />
-                        <span></span>
-                    </label>
-                    <label class="tui-radio">Third
-                        <input type="radio" name="radio" />
-                        <span></span>
-                    </label>
-                </fieldset>
-                TEXTAREA:<br>
-                <textarea class="tui-input"></textarea><br>
-                COLOR:<br>
-                <input class="tui-input" type="color" /><br>
-                MULTIPLE:<br>
-                <select class="tui-input" multiple>
-                    <option selected>-- SELECT --</option>
-                    <option>Option 1</option>
-                    <option>Option 2</option>
-                    <option>Option 3</option>
-                    <option>Option 4</option>
-                    <option>Option 5</option>
-                </select>
-            </fieldset>
-        </div><br><br>
-
-        <!--PROGRESS -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend>Progress</legend>
-                0%
-                <div class="tui-progress">
-                    <span style="width: 0%"></span>
-                </div>
-                25%
-                <div class="tui-progress">
-                    <span style="width: 25%"></span>
-                </div>
-                50%
-                <div class="tui-progress">
-                    <span style="width: 50%"></span>
-                </div>
-                75%
-                <div class="tui-progress">
-                    <span style="width: 75%"></span>
-                </div>
-                100%
-                <div class="tui-progress">
-                    <span style="width: 100%"></span>
-                </div>
-                Indeterminate
-                <div class="tui-progress">
-                    <span class="tui-indeterminate"></span>
-                </div>
-                Custom
-                <div class="tui-progress red-255">
-                    <span class="green-255" style="width: 75%"></span>
-                </div>
-            </fieldset>
-        </div><br><br>
-
-        <!-- TABLE -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend>Table</legend>
-                <table class="tui-table tui-table-hover" style="width: 600px">
-                    <thead>
-                        <tr>
-                            <td>Name</td>
-                            <td>Size</td>
-                            <td>MTime</td>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>/.mc</td>
-                            <td>1024</td>
-                            <td>Apr 24 01:24</td>
-                        </tr>
-                        <tr>
-                            <td>/bin</td>
-                            <td>3072</td>
-                            <td>Jun 12 11:01</td>
-                        </tr>
-                        <tr>
-                            <td>/boot</td>
-                            <td>1024</td>
-                            <td>Apr 24 01:24</td>
-                        </tr>
-                        <tr>
-                            <td>~cdrom</td>
-                            <td>256</td>
-                            <td>May 24 01:24</td>
-                        </tr>
-                        <tr>
-                            <td>/disk</td>
-                            <td>10258</td>
-                            <td>May 12 11:01</td>
-                        </tr>
-                        <tr>
-                            <td>/win32</td>
-                            <td>4056</td>
-                            <td>Apr 24 01:24</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </fieldset>
-        </div><br><br>
-
-        <!-- CALCULATOR EXAMPLE -->
-        <div class="tui-window white-168">
-            <fieldset class="tui-window-fieldset">
-                <legend align="center">Pocket Calculator</legend>
-                <input class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
-                <br><br>
-                <button class="tui-button">C&nbsp;</button>
-                <button class="tui-button">&#60;-</button>
-                <button class="tui-button">%&nbsp;</button>
-                <button class="tui-button">+-</button><br><br>
-                <button class="tui-button">7&nbsp;</button>
-                <button class="tui-button">8&nbsp;</button>
-                <button class="tui-button">9&nbsp;</button>
-                <button class="tui-button">/&nbsp;</button><br><br>
-                <button class="tui-button">4&nbsp;</button>
-                <button class="tui-button">5&nbsp;</button>
-                <button class="tui-button">6&nbsp;</button>
-                <button class="tui-button">*&nbsp;</button><br><br>
-                <button class="tui-button">1&nbsp;</button>
-                <button class="tui-button">2&nbsp;</button>
-                <button class="tui-button">3&nbsp;</button>
-                <button class="tui-button">-&nbsp;</button><br><br>
-                <button class="tui-button">0&nbsp;</button>
-                <button class="tui-button">.&nbsp;</button>
-                <button class="tui-button">=&nbsp;</button>
-                <button class="tui-button">+&nbsp;</button>
-            </fieldset>
-        </div><br><br>
-
-        <!-- WINDOW TEXTAREA -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend align="center">MYAPP.CPP</legend>
-                <button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
-                <button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
-                <textarea class="tui-textarea" style="width: 400px; height: 200px;">#include &#60;iostream&#62;
-using namespace std;
-
-int main() 
-{
-    cout &#60;&#60; "Hello, World!";
-    return 0;
-}</textarea>
-            </fieldset>
-        </div><br><br>
-
-        <!--HELP -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset tui-window-fieldset-no-legend yellow-255-border">
-                <br><br>
-                <center>
-                    TuiCSS<br><br>
-                    Version: 0.1.0<br>
-                    Copyright (c) 2018 by VBFoundation
-                </center>
-                <br><br>
-            </fieldset>
-        </div><br><br>
-
-        <!--REGISTER EXAMPLE 1 -->
-        <div class="tui-window white-168">
-            <fieldset class="tui-window-fieldset black-255-text">
-                <legend align="center" class="white-255-text">Register / 106</legend>
-                <div style="display: inline-block; width: 500px">
-                    <span class="yellow-255-text">N</span>umber.....:
-                    <input style="width: 100px" class="tui-input blue-168" type="number" value="106" /><br>
-                    <span class="yellow-255-text">D</span>ocument...:
-                    <input style="width: 150px" class="tui-input blue-168" value="1.504.00.1-00" /><br>
-                    <span class="yellow-255-text">F</span>irst Name.:
-                    <input style="width: 250px" class="tui-input blue-168" value="Robert" /><br>
-                    <span class="yellow-255-text">S</span>econd Name:
-                    <input style="width: 250px" class="tui-input blue-168" value="Munique Steffens" /><br>
-                    <span class="yellow-255-text">C</span>ity.......:
-                    <input style="width: 150px" class="tui-input blue-168" value="Blumenau" /><br>
-                    S<span class="yellow-255-text">t</span>ate......:
-                    <input style="width: 50px" class="tui-input blue-168" value="SC" /><br>
-                    C<span class="yellow-255-text">o</span>ntry.....:
-                    <input style="width: 100px" class="tui-input blue-168" value="Brazil" /><br><br>
-                    P<span class="yellow-255-text">h</span>one......:
-                    <input style="width: 200px" class="tui-input blue-168" value="(47) 3 3784-2134" /><br>
-                    F<span class="yellow-255-text">a</span>x........:
-                    <input style="width: 200px" class="tui-input blue-168" value="" /><br>
-                    E<span class="yellow-255-text">m</span>ail......:
-                    <input style="width: 250px" class="tui-input blue-168" value="robert@email.com" /><br><br>
-                    <span class="yellow-255-text">G</span>roup......:
-                    <select class="tui-input blue-168">
-                        <option>Awner</option>
-                        <option>Administrators</option>
-                        <option>Common Users</option>
-                    </select>
-                </div>
-                <div style="display: inline-block; width: 200px; vertical-align: top">
-                    <span>Locale</span>
-                    <div class="cyan-168">
-                        <label class="tui-radio black-255-text"> en-US
-                            <input type="radio" name="locale" checked>
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> pt-BR
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> ch-CH
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> none
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                    </div>
-                    <div class="right">
-                        <span>...Cod:</span><input style="width: 30px" class="tui-input blue-168">
-                    </div>
-                    <br><br>
-                    <span>Currency</span>
-                    <div class="cyan-168 black-255-text">
-                        <label class="tui-radio black-255-text"> USD
-                            <input type="radio" name="currency" checked>
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> R$
-                            <input type="radio" name="currency">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> none
-                            <input type="radio" name="currency">
-                            <span></span>
-                        </label>
-                    </div>
-                    <br>
-                    Registered at: 11/09/2018 12:50:15
-                </div>
-                <br><br>
-                <button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
-                <button class="tui-button"><span class="yellow-255-text">d</span>el</button>
-                <button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
-                <button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
-                <button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
-                <br><br>
-            </fieldset>
-        </div><br><br>
-
-        <!--REGISTER EXAMPLE 2 -->
-        <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
-                <legend align="center" class="white-255-text">Register / 106</legend>
-                <div style="display: inline-block; width: 500px">
-                    <span class="yellow-255-text">N</span>umber.....:
-                    <input style="width: 100px" class="tui-input" type="number" value="106" /><br>
-                    <span class="yellow-255-text">D</span>ocument...:
-                    <input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
-                    <span class="yellow-255-text">F</span>irst Name.:
-                    <input style="width: 250px" class="tui-input" value="Robert" /><br>
-                    <span class="yellow-255-text">S</span>econd Name:
-                    <input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
-                    <span class="yellow-255-text">C</span>ity.......:
-                    <input style="width: 150px" class="tui-input" value="Blumenau" /><br>
-                    S<span class="yellow-255-text">t</span>ate......:
-                    <input style="width: 50px" class="tui-input" value="SC" /><br>
-                    C<span class="yellow-255-text">o</span>ntry.....:
-                    <input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
-                    P<span class="yellow-255-text">h</span>one......:
-                    <input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
-                    F<span class="yellow-255-text">a</span>x........:
-                    <input style="width: 200px" class="tui-input" value="" /><br>
-                    E<span class="yellow-255-text">m</span>ail......:
-                    <input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
-                    <span class="yellow-255-text">G</span>roup......:
-                    <select class="tui-input">
-                        <option>Awner</option>
-                        <option>Administrators</option>
-                        <option>Common Users</option>
-                    </select>
-                </div>
-                <div style="display: inline-block; width: 200px; vertical-align: top">
-                    <span>Locale</span>
-                    <div class="cyan-168">
-                        <label class="tui-radio black-255-text"> en-US
-                            <input type="radio" name="locale" checked>
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> pt-BR
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> ch-CH
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> none
-                            <input type="radio" name="locale">
-                            <span></span>
-                        </label>
-                    </div>
-                    <div class="right">
-                        <span>...Cod:</span><input style="width: 30px" class="tui-input blue-168">
-                    </div>
-                    <br><br>
-                    <span>Currency</span>
-                    <div class="cyan-168 black-255-text">
-                        <label class="tui-radio black-255-text"> USD
-                            <input type="radio" name="currency" checked>
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> R$
-                            <input type="radio" name="currency">
-                            <span></span>
-                        </label>
-                        <label class="tui-radio black-255-text"> none
-                            <input type="radio" name="currency">
-                            <span></span>
-                        </label>
-                    </div>
-                    <br>
-                    Registered at: 11/09/2018 12:50:15
-                </div>
-                <br><br>
-                <button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
-                <button class="tui-button"><span class="yellow-255-text">d</span>el</button>
-                <button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
-                <button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
-                <button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
-                <br><br>
-            </fieldset>
-        </div><br><br>
-
-        <!-- STATUSBAR -->
-        <div class="tui-statusbar">
-            <ul>
-                <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
-                <li><a href="#!"><span class="red-168-text">F2</span> Shell</a></li>
-                <li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
-                <span class="tui-statusbar-divider"></span>
-                <li><a href="#!"><span class="red-168-text">F10</span> Exit</a></li>
-            </ul>
-        </div><br><br>
-
-    </div>
-    <br><br>
-
-</body>
-<script>
-    window.onload = function () {
-        setInterval(function () {
-            var today = new Date();
-            var clock = document.getElementById("clock");
-            var hour = (today.getHours() + "").length == 2 ? today.getHours() : "0" + today.getHours();
-            var minute = (today.getMinutes() + "").length == 2 ? today.getMinutes() : "0" + today.getMinutes();
-            var second = (today.getSeconds() + "").length == 2 ? today.getSeconds() : "0" + today.getSeconds();
-            clock.innerHTML = hour + ":" + minute + ":" + second;
-        });
-    };
-</script>
-
-</html>

examples/bios.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>BIOS Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered white-168">
+        <div class="tui-panel cyan-168 full-width black-255-text tui-no-shadow center">
+            BIOS
+        </div>
+        <div class="tui-tabs">
+            <ul>
+                <li><a class="tui-tab active" data-tab-content="tab-1-content">Main</a></li>
+                <li><a class="tui-tab" data-tab-content="tab-2-content">Exit</a></li>
+            </ul>
+        </div>
+        <div class="tui-tab-content tui-content" id="tab-1-content">
+            <table class="tui-table-grid">
+                <tbody>
+                    <tr>
+                        <td rowspan="2" width="60%" class="blue-168-text">
+                            <br>System Time.........:<input type="text" class="tui-input white-168 black-text" value="[09:21:30]" style="width: 150px" />
+                            <br>System Date.........:<input type="text" class="tui-input white-168 black-text" value="[15/09/1994]" style="width: 150px" />
+                            <br>
+                            <br>Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text" value="[1.44/1.25 MB]" style="width: 150px" />
+                            <br>Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text" value="[disabeld]" style="width: 150px" />
+                            <br>
+                            <br>Primary Master......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
+                            <br>Primary Slave.......:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
+                            <br>Secondary Master....:<input type="text" class="tui-input white-168 black-text" value="[CD-ROM]" style="width: 150px" />
+                            <br>Secondary Slave.....:<input type="text" class="tui-input white-168 black-text" value="[None]" style="width: 150px" />
+                            <br>
+                            <br>Keyboard Features...:<input type="text" class="tui-input white-168 black-text" value="[Enter]" style="width: 150px" />
+                            <br>
+                            <br>System Memory.......:<input type="text" class="tui-input white-168 black-text" value="[640 KB]" style="width: 150px" />
+                            <br>Extended Memory.....:<input type="text" class="tui-input white-168 black-text" value="[3568410 KB]" style="width: 150px" />
+                            <br>Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text" value="[Enabled]" style="width: 150px" />
+                        </td>
+                        <td width="40%" class="center">Item Specified Help</td>
+                    </tr>
+                    <tr>
+                        <td width="25" height="448px">
+                            <br>&#60;Tab&#62;, &#60;Shift-Tab&#62; or &#60;Enter&#62; selects field.
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="tui-tab-content tui-content" id="tab-2-content">
+        </div>
+        <div class="tui-statusbar absolute cyan-168">
+            <ul>
+                <li><a href="#!"><span class="white-255-text">F1</span> Help</a></li>
+                <li><a href="#!"><span class="white-255-text">↑↓</span> Select Item</a></li>
+                <li><a href="#!"><span class="white-255-text">-/+</span> Change Values</a></li>
+                <li><a href="#!"><span class="white-255-text">F9</span> Setup Defaults</a></li>
+                <br>
+                <li><a href="#!"><span class="white-255-text">Esc</span> Exit</a></li>
+                <li><a href="#!"><span class="white-255-text">←→</span> Select Menu</a></li>
+                <li><a href="#!"><span class="white-255-text">Enter</span> Select Sub-Menu</a></li>
+                <li><a href="#!"><span class="white-255-text">F10</span> Save and Exit</a></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>

examples/buttons.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Buttons Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .tui-button {
+            width: 100% !important;
+            margin-bottom: 20px;
+        }
+    </style>
+</head>
+<style>
+</style>
+<body>
+    <div class="center" style="margin-top: 100px;">
+        <div class="tui-window blue-168" style="width: 200px;">
+            <fieldset class="tui-fieldset">
+                <legend>Buttons</legend>
+                <button class="tui-button">Button</button><br>
+                <input type="button" class="tui-button" value="Input" /><br>
+                <a href="#!" class="tui-button">Anchor</a><br>
+                <button class="tui-button orange-168 white-text">Custom</button><br>
+                <button class="tui-button red-168 disabled" disabled>Disabled</button><br>
+				<button class="tui-button" style="margin-bottom: 5px;">Focused</button><br>
+            </fieldset>
+        </div>
+    </div>
+</body>
+
+</html>

examples/chart.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Chart Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body class="center">
+    <div style="margin-top: 50px"></div>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Vertical Chart</legend>
+            <div class="tui-chart-vertical" style="width: 500px; height: 200px;">
+                <div class="tui-chart-display">
+                    <div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
+                    <div class="tui-chart-value green-168" style="height: 30%;">30%</div>
+                    <div class="tui-chart-value blue-168" style="height: 50%;">50%</div>
+                    <div class="tui-chart-value yellow-168" style="height: 90%;">90%</div>
+                    <div class="tui-chart-value purple-168" style="height: 60%;">60%</div>
+                    <div class="tui-chart-value orange-168" style="height: 100%;">100%</div>
+                    <div class="tui-chart-value cyan-168" style="height: 10%;">10%</div>
+                    <div class="tui-chart-value red-168" style="height: 75%;">75%</div>
+                </div>
+                <div class="tui-chart-y-axis">
+                    <div class="tui-chart-legend">100%</div>
+                    <div class="tui-chart-legend">80%</div>
+                    <div class="tui-chart-legend">60%</div>
+                    <div class="tui-chart-legend">40%</div>
+                    <div class="tui-chart-legend">20%</div>
+                </div>
+                <div class="tui-chart-x-axis">
+                    <div class="tui-chart-legend">s1</div>
+                    <div class="tui-chart-legend">s2</div>
+                    <div class="tui-chart-legend">s3</div>
+                    <div class="tui-chart-legend">s4</div>
+                    <div class="tui-chart-legend">s5</div>
+                    <div class="tui-chart-legend">s6</div>
+                    <div class="tui-chart-legend">s7</div>
+                    <div class="tui-chart-legend">s8</div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+    <br><br>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Horizontal Chart</legend>
+            <div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
+                <div class="tui-chart-display">
+                    <div class="tui-chart-value red-168" style="width: 80%;">80%</div>
+                    <div class="tui-chart-value green-168" style="width: 60%;">60%</div>
+                    <div class="tui-chart-value blue-168" style="width: 100%;">100%</div>
+                </div>
+                <div class="tui-chart-y-axis">
+                    <div class="tui-chart-legend">2018</div>
+                    <div class="tui-chart-legend">2019</div>
+                    <div class="tui-chart-legend">2020</div>
+                </div>
+                <div class="tui-chart-x-axis">
+                    <div class="tui-chart-legend">25%</div>
+                    <div class="tui-chart-legend">50%</div>
+                    <div class="tui-chart-legend">75%</div>
+                    <div class="tui-chart-legend">100%</div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+    <br><br>
+
+    <div class="tui-window black-168 left-align">
+        <fieldset class="tui-fieldset">
+            <legend class="">Chart (no axis legend)</legend>
+            <div class="tui-chart-vertical" style="width: 500px; height: 200px;">
+                <div class="tui-chart-display no-x-axis no-y-axis">
+                    <div class="tui-chart-value red-168 animated" style="height: 50%;">50%</div>
+                    <div class="tui-chart-value green-168" style="height: 70%;">70%</div>
+                    <div class="tui-chart-value blue-168" style="height: 30%;">30%</div>
+                    <div class="tui-chart-value yellow-168" style="height: 100%;">100%</div>
+                </div>
+            </div>
+        </fieldset>
+    </div>
+    <br><br>
+
+</body>
+</html>

examples/forecast.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Forecast Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        th, td {
+            padding: 10px!important;
+            border: none!important;
+        }
+        .tui-progress-bar {
+            margin-bottom: -4px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered black-255" style="padding: 2px;">
+        <div class="red-168 full-width white-text" style="padding: 0px 10px;">
+            FORECAST 1.0
+        </div>
+        <br>
+        <table class="tui-table full-width no-border">
+            <thead class="white-255-text tui-border-double orange-168-border" style="margin-bottom: 5px;">
+                <tr class="left-align">
+                    <th>#</th>
+                    <th>LOCATION</th>
+                    <th>TEMPERATURE</th>
+                    <th>STATUS</th>
+                </tr>
+            </thead>
+            <tbody class="tui-border-double orange-168-border">
+                <tr>
+                    <td class="red-168-text">1</td>
+                    <td>Lisbon</td>
+                    <td>
+                        <span class="green-168-text">&nbsp;8.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 58%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="blue-255-text">COLD</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">2</td>
+                    <td>Vancouver</td>
+                    <td>
+                        <span class="green-168-text">&nbsp;9.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 59%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="blue-255-text">COLD</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">3</td>
+                    <td>Rio</td>
+                    <td>
+                        <span class="green-168-text">31.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 81%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="yellow-255-text">WARM</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">4</td>
+                    <td>Sydney</td>
+                    <td>
+                        <span class="green-168-text">22.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 72%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="yellow-255-text">WARM</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">5</td>
+                    <td>New York</td>
+                    <td>
+                        <span class="green-168-text">&nbsp;7.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 57%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="blue-255-text">COLD</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">6</td>
+                    <td>London</td>
+                    <td>
+                        <span class="green-168-text">&nbsp;6.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 56%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="blue-255-text">COLD</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">7</td>
+                    <td>Paris</td>
+                    <td>
+                        <span class="green-168-text">&nbsp;4.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 54%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="cyan-255-text">VERY COLD</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">8</td>
+                    <td>Casablanca</td>
+                    <td>
+                        <span class="green-168-text">17.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 67%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="green-168-text">NORMAL</td>
+                </tr>
+                <tr>
+                    <td class="red-168-text">9</td>
+                    <td>Reykjavik</td>
+                    <td>
+                        <span class="green-168-text">-1.0</span> 
+                        [
+                        <div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
+                            <span class="tui-progress red-255" style="width: 49%"></span>
+                        </div> 
+                        ]
+                    </td>
+                    <td class="cyan-255-text">VERY COLD</td>
+                </tr>
+            </tbody>
+        </table>
+        <div class="purple-168 full-width white-text" style="padding: 0px 10px; margin-top: 2px;">
+            <span class="red-168">HIGH</span>: Rio 31.0<br>
+            <span class="cyan-168">LESS</span>: Reykjavik -1.0
+        </div>
+        <br>
+        <div class="tui-window full-width no-shadow black">
+            <fieldset class="tui-fieldset center">
+                <button class="tui-button left">Previous</button>
+                <span class="center">9/201 records</span>
+                <button class="tui-button right">Next</button>
+            </fieldset>
+        </div>
+        <div class="red-168 full-width white-text" style="padding: 0px 10px;">
+            FORECAST 1.0
+        </div>
+    </div>
+</body>
+</html>

examples/input.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black tui-cursor">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Input Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .tui-input {
+            width: 430px;
+        }
+    </style>
+</head>
+
+<body class="center" style="padding: 50px">
+    <div class="tui-window" style="text-align: left">
+        <fieldset class="tui-fieldset">
+            <legend class="center">Form</legend>
+            Text.......: <input class="tui-input" value="text" /><br>
+            Disabled...: <input class="tui-input disabled" disabled value="disabled" /><br>
+            Number.....: <input class="tui-input" type="number" value="25" /><br>
+            Password...: <input class="tui-input" type="password" value="12345" /><br>
+            Color......: <input class="tui-input" type="color" value="#00FF00" /><br>
+            Select.....: <select class="tui-input">
+                <option>First</option>
+                <option>Second</option>
+                <option>Third</option>
+                <optgroup label="Group">
+                    <option>First</option>
+                    <option>Second</option>
+                    <option>Third</option>
+                </optgroup>
+            </select><br>
+            Date.......: <input class="tui-input" type="date" value="2019-01-01" /><br>
+            Time.......: <input class="tui-input" type="datetime-local" value="2019-01-01T12:00" />
+            <br><br>
+            <fieldset class="tui-input-fieldset">
+                <legend>Checkboxes</legend>
+                <label class="tui-checkbox">First
+                    <input type="checkbox" checked />
+                    <span></span>
+                </label>
+                <label class="tui-checkbox">Second
+                    <input type="checkbox" />
+                    <span></span>
+                </label>
+                <label class="tui-checkbox disabled">Disabled
+                    <input type="checkbox" disabled />
+                    <span></span>
+                </label>
+            </fieldset>
+            <br>
+            <fieldset class="tui-input-fieldset">
+                <legend>Radios</legend>
+                <label class="tui-radio">First
+                    <input type="radio" name="radio" checked />
+                    <span></span>
+                </label>
+                <label class="tui-radio">Second
+                    <input type="radio" name="radio" />
+                    <span></span>
+                </label>
+                <label class="tui-radio disabled">Disabled
+                    <input type="radio" name="radio" disabled />
+                    <span></span>
+                </label>
+            </fieldset>
+            <br>
+            Textarea<br>
+            <textarea class="tui-input" style="width: 100%">Content ...</textarea>
+            <br>
+            Disabled Textarea<br>
+            <textarea class="tui-input disabled" disabled style="width: 100%">Disabled</textarea>
+            <br>
+            Multiple<br>
+            <select multiple class="tui-input" style="width: 100%">
+                <option>---</option>
+                <option>First</option>
+                <option>Second</option>
+                <option>Third</option>
+                <optgroup label="Group">
+                    <option>First</option>
+                    <option>Second</option>
+                    <option>Third</option>
+                </optgroup>
+            </select><br>
+            File <input class="tui-input full-width" type="file" />
+        </fieldset>
+    </div>
+</body>
+
+</html>

examples/mobile.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en" class="no-tui-scroll">
+
+<head>
+    <meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mobile Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .content {
+            padding: 40px 0px;
+        }
+        .post-img {
+            width: 100%; 
+            border: 4px solid black;
+        }
+        .add-btn {
+            bottom: 0px; 
+            left: 0; 
+            right: 0;
+            margin-left: auto; 
+            margin-right: auto; 
+            z-index: 999;
+            width: 50px;
+            height: 50px;
+        }
+        .post {
+            margin-bottom: 5px;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body class="tui-bg-blue-black relative">
+	<!-- Sidenav -->
+	<nav class="tui-sidenav absolute">
+		<ul>
+			<li>
+				<a href="#!">
+					<span class="red-168-text">P</span>rofile
+					<span class="tui-shortcut">ctrl+p</span>
+				</a>
+			</li>
+			<li>
+				<a href="#!">
+					<span class="red-168-text">S</span>earch
+					<span class="tui-shortcut">ctrl+s</span>
+				</a>
+			</li>
+			<li>
+				<a href="#!">
+					S<span class="red-168-text">t</span>ory
+					<span class="tui-shortcut">ctrl+t</span>
+				</a>
+			</li>
+		</ul>
+	</nav>
+
+	<!-- Navbar -->
+	<nav class="tui-nav">
+		<span class="tui-datetime" data-format="h:m:s a"></span>
+		<ul>
+			<li class="tui-sidenav-button red-168-text">≡</li>
+			<li class="tui-dropdown hide-on-med-and-down">
+				<span class="red-168-text">P</span>rofile
+				<div class="tui-dropdown-content">
+					<ul>
+						<li>
+							<a href="#!">
+								<span class="red-168-text">A</span>vatar
+							</a>
+						</li>
+						<li>
+							<a href="#!">
+								P<span class="red-168-text">r</span>eferences
+								<span class="tui-shortcut">F3</span>
+							</a>
+						</li>
+						<li class="tui-dropdown block">
+							<span class="right">►</span>
+							<span class="red-168-text">M</span>ore
+							<div class="tui-dropdown-content">
+								<ul>
+									<li>
+										<a href="#!">
+											<span class="red-168-text">I</span>diom
+										</a>
+									</li>
+									<li>
+										<a href="#!">
+											<span class="red-168-text">B</span>locked Users
+										</a>
+									</li>
+								</ul>
+							</div>
+						</li>
+
+						<div class="tui-black-divider"></div>
+						<li>
+							<a href="#!">
+								<span class="red-168-text">S</span>tories
+								<span class="tui-shortcut">F10</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</li>
+			<li class="tui-dropdown hide-on-med-and-down">
+				<span class="red-168-text">H</span>elp
+			</li>
+		</ul>
+	</nav>
+
+	<!-- Edit panel -->
+	<div class="content container">
+        <div class="row">
+            <div class="col s12 m12 l12 white-text center">
+                <h3>InstaTui</h3>
+                <hr>
+                The best old-school social network<br>
+                <span class="orange-255 black-text hide-on-small-only">(Try this in a mobile view)</span>
+                <span class="green-255 black-text hide-on-med-and-up">(√ Mobile view)</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        John Due says:
+                        <hr>
+                        <img class="post-img" src="resources/winxp.png" />
+                        The winxp bg is amazing!
+                    </fieldset>
+                </div>
+            </div>
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        Jane Due says:
+                        <hr>
+                        <img class="post-img" src="resources/disks.png" />
+                        Bought my first 2 PC games!
+                    </fieldset>
+                </div>
+            </div>
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        Astronaut says:
+                        <hr>
+                        <img class="post-img" src="resources/step.png" />
+                        One small step for man one giant leap for mankind
+                    </fieldset>
+                </div>
+            </div>
+        </div>
+	</div>
+
+	<!-- Status bar -->
+	<div class="tui-statusbar fixed" style="bottom: 0px;">
+		<ul>
+            <li class="right" style="margin-right: 10px;"><a href="#!">Search</a></li>
+			<li><a href="#!">Profile</a></li>
+		</ul>
+	</div>
+
+    <button class="tui-button red-168 white-255-text fixed add-btn">+</button>
+</body>
+
+</html>

examples/modal.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Modal Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body class="center">
+    <div style="margin-top: 300px"></div>
+
+    <!-- Button -->
+    <button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>
+
+    <!-- Overlap -->
+    <div class="tui-overlap"></div>
+
+    <!-- Modal window -->
+    <div id="modal" class="tui-modal">
+        <div class="tui-window red-168 left-align">
+            <fieldset class="tui-fieldset">
+                <legend class="red-255 yellow-255-text">Alert</legend>
+                This is an example of a modal window.
+                <br><br>
+                <div class="tui-divider"></div>
+                <br>
+                <button class="tui-button cyan-168 white-255-text tui-modal-close-button right" data-modal="modal">close</button>
+            </fieldset>
+        </div>
+    </div>
+</body>
+</html>

examples/pc-startup.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>PC Startup Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 black white-text" style="padding: 2px">
+        <img src="./resources/pcstartup1.png" width="40px" height="40px" style="float: left" />
+        <img src="./resources/pcstartup2.png" width="200px" height="150px" style="float: right" />
+        <div style="margin-top: 4px"></div>
+        Award Medallion BIOS v6.0, An Energy Star Ally<br>
+        Copyright (C) 1984-2001, Award Software, Inc.<br><br>
+        ASUS P4T533-C ACPI BIOS Revision 1007 Beta 001<br><br>
+        Intel(R) Pentium(R) 4 2800 MHz Processor<br>
+        Memory Test : &nbsp;&nbsp; 262144K OK<br><br>
+        <div id="session-1" style="display: none">
+            Award Plug and Play BIOS Extension v1.0A<br>
+            Initialize Plug and Play Cards...<br>
+            PNP init Completed<br><br>
+        </div>
+        <div id="session-2" style="display: none">
+            Detecting Primary Master .....: MAXTOR 6L040J2<br>
+        </div>
+        <div id="session-3" style="display: none">
+            Detecting Primary Slave ......: ASUS CD-S520/A<br>
+        </div>
+        <div id="session-4" style="display: none">
+            Detecting Secondary Master ...: Skip<br>
+            Detecting Secondaty Slave ....: None
+        </div>
+        <div id="session-5" style="display: none">
+            <br>Found virus! The PC cannot be started. I'm Sorry :(
+        </div>
+        <div class="tui-statusbar absolute black white-text">
+            <ul>
+                <li style="margin-left: 0px">Press <b>DEL</b> to enter SETUP, <b>Alt+F2</b> to enter EZ flash utility
+                </li>
+            </ul>
+            <ul>
+                <li style="margin-left: 0px">08/20/2002-1850E/ICH2/W627-P4T533-C</li>
+            </ul>
+        </div>
+    </div>
+</body>
+<script>
+    window.onload = function() {
+        setTimeout(function() { showSession("session-1"); }, 300);
+        setTimeout(function() { showSession("session-2"); }, 400);
+        setTimeout(function() { showSession("session-3"); }, 450);
+        setTimeout(function() { showSession("session-4"); }, 870);
+        setTimeout(function() { showSession("session-5"); }, 1500);
+    };
+    function showSession(id) {
+        const session = document.getElementById(id);
+        session.style.display = "block";
+    }
+</script>
+</html>

examples/pocket-calculator.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Pocket Calculator Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
+        <div class="center" style="margin-top: 100px;">
+            <div class="tui-window white-168">
+                <fieldset class="tui-fieldset">
+                    <legend align="center">Pocket Calculator</legend>
+                    &nbsp;<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
+                    <br><br>
+                    <button class="tui-button" onclick="clearDisplay()">C&nbsp;</button>
+                    <button class="tui-button">&#60;-</button>
+                    <button class="tui-button">%&nbsp;</button>
+                    <button class="tui-button">+-</button><br><br>
+                    <button class="tui-button" onclick="digit('7')">7&nbsp;</button>
+                    <button class="tui-button" onclick="digit('8')">8&nbsp;</button>
+                    <button class="tui-button" onclick="digit('9')">9&nbsp;</button>
+                    <button class="tui-button">/&nbsp;</button><br><br>
+                    <button class="tui-button" onclick="digit('4')">4&nbsp;</button>
+                    <button class="tui-button" onclick="digit('5')">5&nbsp;</button>
+                    <button class="tui-button" onclick="digit('6')">6&nbsp;</button>
+                    <button class="tui-button">*&nbsp;</button><br><br>
+                    <button class="tui-button" onclick="digit('1')">1&nbsp;</button>
+                    <button class="tui-button" onclick="digit('2')">2&nbsp;</button>
+                    <button class="tui-button" onclick="digit('3')">3&nbsp;</button>
+                    <button class="tui-button">-&nbsp;</button><br><br>
+                    <button class="tui-button" onclick="digit('0')">0&nbsp;</button>
+                    <button class="tui-button" onclick="digit('.')">.&nbsp;</button>
+                    <button class="tui-button">=&nbsp;</button>
+                    <button class="tui-button">+&nbsp;</button>
+                </fieldset>
+            </div>
+        </div>
+    </div>
+    <script>
+        function digit(digit) {
+            let val = document.getElementById("display").value;
+            document.getElementById("display").value = digit + "" + val;
+        }
+        function clearDisplay() {
+            document.getElementById("display").value = "";
+        }
+    </script>
+</body>
+
+</html>

examples/progress-bar.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Progress Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+
+    <body class="center" style="padding: 50px">
+        <div class="tui-window" style="text-align: left;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Progress</legend>
+                0% ............:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress" style="width: 0%"></span>
+                </div><br><br>
+                25% ...........:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress" style="width: 25%"></span>
+                </div><br><br>
+                50% ...........:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress" style="width: 50%"></span>
+                </div><br><br>
+                75% ...........:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress" style="width: 75%"></span>
+                </div><br><br>
+                100% ..........:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress" style="width: 100%"></span>
+                </div><br><br>
+                Texture bg ....:
+                <div class="tui-progress-bar inline-block valign-middle tui-bg-blue-black">
+                    <span class="tui-progress" style="width: 50%"></span>
+                </div><br><br>
+                Indeterminate .:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-indeterminate"></span>
+                </div><br><br>
+                Labeled .......:
+                <div class="tui-progress-bar inline-block valign-middle">
+                    <span class="tui-progress-label black-text">75%</span>
+                    <span class="tui-progress" style="width: 75%"></span>
+                </div><br><br>
+                Custom ........:
+                <div class="tui-progress-bar inline-block valign-middle red-255">
+                    <span class="tui-progress green-255" style="width: 50%"></span>
+                </div>
+            </fieldset>
+        </div>
+        </div>
+    </body>
+
+</html>

examples/register.html

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Register Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        ul li {
+            display: inline-block;
+            margin-right: 60px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
+
+        <div class="tui-window full-width tui-no-shadow left-align">
+            <fieldset class="tui-fieldset no-legend">
+                <ul>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Tables</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Reports</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Print</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Admin</a></li>
+                </ul>
+            </fieldset>
+        </div>
+
+        <div class="tui-window left-align" style="margin-top: 60px;">
+            <fieldset class="tui-fieldset">
+                <legend class="white-255-text center">Register</legend>
+                <div style="display: inline-block; width: 500px">
+                    <span class="yellow-255-text">N</span>umber.....:
+                    <input style="width: 100px" class="tui-input" type="number" value="106" /><br>
+                    <span class="yellow-255-text">D</span>ocument...:
+                    <input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
+                    <span class="yellow-255-text">F</span>irst Name.:
+                    <input style="width: 250px" class="tui-input" value="Robert" /><br>
+                    <span class="yellow-255-text">S</span>econd Name:
+                    <input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
+                    <span class="yellow-255-text">C</span>ity.......:
+                    <input style="width: 150px" class="tui-input" value="Blumenau" /><br>
+                    S<span class="yellow-255-text">t</span>ate......:
+                    <input style="width: 50px" class="tui-input" value="SC" /><br>
+                    C<span class="yellow-255-text">o</span>ntry.....:
+                    <input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
+                    P<span class="yellow-255-text">h</span>one......:
+                    <input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
+                    F<span class="yellow-255-text">a</span>x........:
+                    <input style="width: 200px" class="tui-input" value="" /><br>
+                    E<span class="yellow-255-text">m</span>ail......:
+                    <input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
+                    <span class="yellow-255-text">G</span>roup......:
+                    <select class="tui-input">
+                        <option>Owner</option>
+                        <option>Administrators</option>
+                        <option>Common Users</option>
+                    </select>
+                </div>
+                <div style="display: inline-block; width: 200px; vertical-align: top">
+                    <span>Locale</span>
+                    <div class="cyan-168">
+                        <label class="tui-radio black-255-text"> en-US
+                            <input type="radio" name="locale" checked>
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> pt-BR
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> es-EC
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> none
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                    </div>
+                    <div class="right">
+                        <span>...Cod:</span><input style="width: 30px" class="tui-input">
+                    </div>
+                    <br><br>
+                    <span>Currency</span>
+                    <div class="cyan-168 black-255-text">
+                        <label class="tui-radio black-255-text"> USD
+                            <input type="radio" name="currency" checked>
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> R$
+                            <input type="radio" name="currency">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> none
+                            <input type="radio" name="currency">
+                            <span></span>
+                        </label>
+                    </div>
+                    <br>
+                    Registered at: 09/06/2019 09:38:00 PM
+                </div>
+                <br><br>
+                <button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
+                <button class="tui-button"><span class="yellow-255-text">d</span>el</button>
+                <button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
+                <button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
+                <button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
+                <br><br>
+            </fieldset>
+        </div>
+
+        <div class="tui-statusbar blue-255 white-255-text absolute left-align">
+            <ul>
+                <li><a>09/06/2019</a></li>
+                <li><a>Service Orders Count: 2</a></li>
+                <li><a>10:43:00 PM</a></li>
+            </ul>
+        </div>
+
+    </div>
+</body>
+</html>

examples/scandisk.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Scandisk Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .scandisk-button {
+            background-color: rgb(80, 80, 80);
+            color: rgb(168, 168, 168);
+            margin-right: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
+        <span class="cyan-255-text">Microsoft ScanDisk</span>
+        <br><br>
+        <span class="tui-divider cyan-255-border"></span>
+        <br><br>
+        <span class="white-168-text">ScanDisk is now checking the following areas of drive C:</span>
+        <br><br>
+        <div class="white-168-text" style="padding-left: 80px">
+            <span class="cyan-255-text">√</span><span style="margin-left: 30px">Media descriptor</span><br>
+            <span class="cyan-255-text">√</span><span style="margin-left: 30px">Files allocation tables</span><br>
+            <span class="cyan-255-text">»</span><span style="margin-left: 30px">Directory structure</span><br>
+            <span class="cyan-255-text">&nbsp;</span><span style="margin-left: 30px">File system</span><br>
+            <span class="cyan-255-text">&nbsp;</span><span style="margin-left: 30px">Free space</span><br>
+            <span class="cyan-255-text">&nbsp;</span><span style="margin-left: 30px">Surface scan</span><br>
+        </div>
+        <div style="height: 220px"></div>
+        <div>
+            <button class="tui-button scandisk-button white-text">◄ Pause ►</button>
+            <button class="tui-button scandisk-button"><span class="white-text">M</span>ore info</button>
+            <button class="tui-button scandisk-button">E<span class="white-text">x</span>it</button>
+        </div>
+        <br><br>
+        <span class="tui-divider cyan-255-border"></span>
+        <br>
+        <div>
+            <span class="cyan-255-text">75% complete</span>
+            <span class="tui-progress-bar right tui-bg-blue-black" style="width: 550px; ">
+                <span class="tui-progress yellow-255" style="width: 75%"></span>
+            </span>
+        </div>
+    </div>
+</body>
+</html>

examples/table.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Table Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .tui-window {
+            margin-bottom: 40px;
+        }
+    </style>
+</head>
+
+<body>
+
+    <body class="center" style="padding: 50px">
+        <div class="tui-window" style="text-align: left;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Table</legend>
+                <table class="tui-table" style="width: 700px">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>PID</th>
+                            <th>CPU</th>
+                            <th>Memory</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </fieldset>
+        </div><br>
+
+        <div class="tui-window" style="text-align: left;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Table hovered</legend>
+                <table class="tui-table hovered-cyan" style="width: 700px">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>PID</th>
+                            <th>CPU</th>
+                            <th>Memory</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </fieldset>
+        </div><br>
+
+        <div class="tui-window" style="text-align: left;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">Table striped</legend>
+                <table class="tui-table striped-purple" style="width: 700px">
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>PID</th>
+                            <th>CPU</th>
+                            <th>Memory</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>conhost.exe</td>
+                            <td>25768</td>
+                            <td>00</td>
+                            <td>1.748 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>msdos.exe</td>
+                            <td>748</td>
+                            <td>00</td>
+                            <td>22.216 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>System</td>
+                            <td>25000</td>
+                            <td>12</td>
+                            <td>112 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>svchost.exe</td>
+                            <td>580</td>
+                            <td>01</td>
+                            <td>9.440 Kb</td>
+                        </tr>
+                        <tr>
+                            <td>explorer.exe</td>
+                            <td>4</td>
+                            <td>00</td>
+                            <td>53.740 Kb</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </fieldset>
+        </div>
+    </div>
+</body>
+
+</html>

examples/tabs.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Tabs Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+<style>
+</style>
+<body>
+    <div class="center" style="margin-top: 100px; margin-bottom: 100px;">
+        <div class="tui-panel white-168" style="width: 400px;">
+            <div class="tui-tabs red-168">
+                <ul>
+                    <li><a class="tui-tab active" data-tab-content="tab-1-content">Tab 1</a></li>
+                    <li><a class="tui-tab" data-tab-content="tab-2-content">Tab 2</a></li>
+                    <li><a class="tui-tab disabled" data-tab-content="tab-3-content">Disabled</a></li>
+                </ul>
+            </div>
+            <div class="content black-255-text">
+                <div class="tui-tab-content" id="tab-1-content">
+                    <h3>Content 1</h3>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id. Temporibus, impedit reiciendis quidem ea quasi fugiat! Illum unde eaque porro sint voluptates corporis reiciendis tempora?
+                </div>
+                <div class="tui-tab-content" id="tab-2-content">
+                    <h3>Content 2</h3>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit incidunt ullam nemo ad id.
+                </div>
+                <div class="tui-tab-content" id="tab-3-content">
+                    <h3>Content 3</h3>
+                    You could not see it!
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

examples/turbo-vision.html

@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="en" class="no-tui-scroll">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Turbo Vision Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered tui-bg-blue-black">
+
+        <!-- Sidenav -->
+        <nav class="tui-sidenav absolute">
+            <ul>
+                <li>
+                    <a href="#!">
+                        <span class="red-168-text">O</span>pen
+                        <span class="tui-shortcut">ctrl+o</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#!">OS Shell</a>
+                </li>
+                <li>
+                    <a href="#!">
+                        <span class="red-168-text">C</span>opy
+                        <span class="tui-shortcut">ctrl+c</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#!">
+                        <span class="red-168-text">P</span>aste
+                        <span class="tui-shortcut">ctrl+v</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#!">C<span class="red-168-text">u</span>t
+                        <span class="tui-shortcut">ctrl+x</span>
+                    </a>
+                </li>
+                <div class="tui-black-divider"></div>
+                <li>
+                    <a href="#!">Insert</a>
+                </li>
+                <li>
+                    <a href="#!">Delete</a>
+                </li>
+                <li>
+                    <a href="#!">Go...</a>
+                </li>
+                <div class="tui-black-divider"></div>
+                <li>
+                    <a href="#!">
+                        <span class="red-168-text">S</span>earch
+                        <span class="tui-shortcut">ctrl+p</span>
+                    </a>
+                </li>
+                <div class="tui-black-divider"></div>
+                <li>
+                    <a href="#!">Exit <span class="tui-shortcut">F10</span></a>
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Navbar -->
+        <nav class="tui-nav absolute">
+            <span class="tui-datetime" data-format="h:m:s a"></span>
+            <ul>
+                <li class="tui-sidenav-button red-168-text">≡</li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">F</span>ile
+                    <div class="tui-dropdown-content">
+                        <ul>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">N</span>ew
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">O</span>pen...
+                                    <span class="tui-shortcut">F3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">S</span>ave
+                                    <span class="tui-shortcut">F2</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    S<span class="red-168-text">a</span>ve as...
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    Save a<span class="red-168-text">l</span>l
+                                </a>
+                            </li>
+                            <div class="tui-black-divider"></div>
+
+                            <!-- SUBMENU EXAMPLE -->
+
+                            <li class="tui-dropdown block">
+                                <span class="right">►</span>
+                                <span class="red-168-text">M</span>ore
+                                <div class="tui-dropdown-content">
+                                    <ul>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">C</span>hange dir...
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">P</span>rint
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">D</span>OS shell
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+
+                            <div class="tui-black-divider"></div>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">Q</span>uit
+                                    <span class="tui-shortcut">F10</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">E</span>dit
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">V</span>iew
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">H</span>elp
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Edit panel -->
+        <div class="tui-window full-width tui-no-shadow" style="margin-top: 20px;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">MYAPP.CPP</legend>
+                <span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
+                <span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
+                <span class="tui-fieldset-text top right" style="margin-right: 50px">1</span>
+                <span class="tui-fieldset-text" style="margin-left: 50px;">&nbsp;1:1&nbsp;</span>
+                <textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include &#60;iostream&#62;
+using namespace std;
+
+int main()
+{
+    cout &#60;&#60; "Hello, World!";
+    return 0;
+}</textarea>
+            </fieldset>
+        </div>
+
+        <!-- Status bar -->
+        <div class="tui-statusbar absolute">
+            <ul>
+                <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
+                <li><a href="#!"><span class="red-168-text">F2</span> Save</a></li>
+                <li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
+                <li><a href="#!"><span class="red-168-text">Alt+F9</span> Compile</a></li>
+                <span class="tui-statusbar-divider"></span>
+                <li><a href="#!"><span class="red-168-text">F10</span> Menu</a></li>
+            </ul>
+        </div>
+
+    </div>
+</body>
+
+</html>

examples/window-and-panels.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Window and Panels Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .tui-window, .tui-panel {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+
+        .info-text {
+            margin-bottom: 10px;
+            color: white;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="center" style="margin-top: 100px; margin-bottom: 100px">
+
+        <!-- Simple window -->
+        <div class="info-text">Simple window</div>
+        <div class="tui-window">
+            <fieldset class="tui-fieldset">
+                <legend>Window</legend>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                Curabitur id vestibulum libero, id fermentum lorem.<br>
+                Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
+                Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
+                In quis bibendum libero. Donec nec egestas ipsum.<br>
+                Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
+                <br>
+                <div class="tui-divider"></div>
+                <br>
+                <button class="tui-button white-255-text">more...</button>
+                <button class="tui-button purple-168 white-255-text">share</button>
+            </fieldset>
+        </div>
+
+        <!-- Scrool window -->
+        <div class="info-text">Scrool window</div>
+        <div class="tui-window white-168 black-255-text">
+            <fieldset class="tui-fieldset">
+                <legend class="white-255-text">Window</legend>
+                <div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
+                    <span class="tui-shadow">The Lorem Ipsum </span><br><br>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                    Curabitur id vestibulum libero, id fermentum lorem.<br>
+                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
+                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
+                    In quis bibendum libero. Donec nec egestas ipsum.<br>
+                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                    Curabitur id vestibulum libero, id fermentum lorem.<br>
+                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
+                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
+                    In quis bibendum libero. Donec nec egestas ipsum.<br>
+                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                    Curabitur id vestibulum libero, id fermentum lorem.<br>
+                    Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
+                    Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
+                    In quis bibendum libero. Donec nec egestas ipsum.<br>
+                    Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
+                </div>
+            </fieldset>
+        </div>
+
+        <!-- Fieldset features -->
+        <div class="info-text">Fieldset features</div>
+        <div class="tui-window orange-168 black-255-text">
+            <fieldset class="tui-fieldset tui-border-solid white-border">
+                <legend class="center white-255-text">Window</legend>
+                <button class="tui-fieldset-button left"><span class="green-255-text">↑</span></button>
+                <button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
+                Curabitur id vestibulum libero, id fermentum lorem.<br>
+                Aenean aliquam erat leo, eu tempus ex ornare eu.<br>
+                Sed ut lacus libero. Etiam rhoncus ipsum arcu.<br>
+                In quis bibendum libero. Donec nec egestas ipsum.<br>
+                Sed in venenatis diam. Nullam sollicitudin risus vel.<br>
+                <br>
+                <div class="tui-divider"></div>
+                <br>
+                <a class="tui-button white-168">Copy</a>
+                <a class="tui-button white-168">Paste</a>
+                <br><br>
+                <div class="tui-fieldset-text">Text format: UTF-8</div>
+                <div class="tui-fieldset-text right">Ln: 2, Col: 5</div>
+            </fieldset>
+        </div>
+
+        <!-- Item select -->
+        <div class="info-text">Item select</div>
+        <div class="tui-window purple-168">
+            <fieldset class="tui-fieldset no-legend tui-border-solid" style="width: 300px">
+                <ul>
+                    <li class="cyan-255-hover black-255-text-hover">
+                        <a href="#!">
+                            <span class="tui-shortcut">A</span>
+                            <span>Register Tables</span>
+                        </a>
+                    </li>
+                    <li class="cyan-255-hover black-255-text-hover">
+                        <a href="#!">
+                            <span class="tui-shortcut">B</span>
+                            <span>Register Consumers</span>
+                        </a>
+                    </li>
+                    <li class="cyan-255-hover black-255-text-hover">
+                        <a href="#!">
+                            <span class="tui-shortcut">C</span>
+                            <span>Register Companies</span>
+                        </a>
+                    </li>
+                </ul>
+            </fieldset>
+        </div>
+
+        <!-- Window textarea -->
+        <div class="info-text">Window textarea</div>
+        <div class="tui-window">
+            <fieldset class="tui-fieldset">
+                <legend class="center">MYAPP.CPP</legend>
+                <button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
+                <button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>
+                <textarea class="tui-textarea" style="width: 400px; height: 200px;">#include &#60;iostream&#62;
+using namespace std;
+
+int main()
+{
+    cout &#60;&#60; "Hello, World!";
+    return 0;
+}</textarea>
+            </fieldset>
+        </div>
+
+        <!-- Simple panel -->
+        <div class="info-text">Simple panel</div>
+        <div class="tui-panel cyan-168 black-255-text">
+            <div class="tui-panel-content">
+                <b>NOTE:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Vestibulum a posuere sapien, nec
+                placerat
+                lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.
+            </div>
+        </div>
+
+        <!-- Panel title -->
+        <div class="info-text">Panel title</div>
+        <div class="tui-panel white-168 black-255-text">
+            <div class="tui-panel-header">
+                About
+            </div>
+            <div class="tui-panel-content">
+                TuiCss v2.0.0 Made with ♥
+                <br><br>
+                <div class="center">
+                    <button class="tui-button white-255" style="width: 80px">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

gulpfile.js

@@ -0,0 +1,67 @@
+const { series, src, dest } = require('gulp');
+// const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
+const gulpClean = require('gulp-clean');
+const gulpMinify = require('gulp-minify');
+const cleanCss = require('gulp-clean-css');
+const gulpRename = require("gulp-rename");
+const distPath = "./dist";
+
+// Clear dist folder
+function clean() {
+  return src(distPath + "/*", {read: false})
+        .pipe(gulpClean());
+}
+
+// Compile scss and copy to dist folder (.css)
+function sassCompile() {
+    return src('src/tuicss.scss')
+        .pipe(sass())
+        .pipe(dest(distPath));
+}
+
+// Minify css and copy to dist folder (.min.css)
+function minifyCss() {
+    return src(distPath + '/tuicss.css')
+        .pipe(cleanCss())
+        .pipe(gulpRename({
+            suffix: ".min"
+        }))
+        .pipe(dest(distPath));
+}
+
+// Copy js script to dist folder (.js)
+function copyScript() {
+    return src('src/js/tuicss.js')
+        .pipe(dest(distPath));
+}
+
+// Minify js script and copy to dist folder (.min.js)
+function minifyJs() {
+    return src(distPath + '/tuicss.js')
+        .pipe(gulpMinify({
+            ext:{
+                min:'.min.js'
+            }
+        }))
+        .pipe(dest(distPath));
+}
+
+// Copy images to dist folder (/images)
+function copyImages() {
+    return src('src/images/*')
+        .pipe(dest(distPath + "/images"));
+}
+
+// Copy fonts to dist folder (/fonts)
+function copyFonts() {
+    return src('src/fonts/*')
+        .pipe(dest(distPath + "/fonts"));
+}
+
+// Export
+exports.default = series(clean, sassCompile, minifyCss, copyScript, minifyJs, copyImages, copyFonts);
+
+
+
+

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "tuicss",
+  "version": "2.1.2",
+  "description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
+  "keywords": [
+    "tui",
+    "text based user interface",
+    "frontend",
+    "css",
+    "frameword",
+    "turbo vision",
+    "tuicss",
+    "ncurses",
+    "msdos",
+    "ascii"
+  ],
+  "main": "dist/tuicss.min.css",
+  "scripts": {
+    "build": "gulp"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vinibiavatti1/TuiCss.git"
+  },
+  "author": "Vinícius Reif Biavatti",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vinibiavatti1/TuiCss/issues"
+  },
+  "homepage": "https://github.com/vinibiavatti1/TuiCss#readme",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-copy": "^4.0.1",
+    "gulp-minify": "^3.1.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.62.1"
+  }
+}

src/components/background.scss

@@ -0,0 +1,20 @@
+.tui-bg-blue-white { background-image: url('./images/bg-blue-white.png'); background-repeat: repeat; }
+.tui-bg-blue-black { background-image: url('./images/bg-blue-black.png'); background-repeat: repeat; }
+
+.tui-bg-green-white { background-image: url('./images/bg-green-white.png'); background-repeat: repeat; }
+.tui-bg-green-black { background-image: url('./images/bg-green-black.png'); background-repeat: repeat; }
+
+.tui-bg-cyan-white { background-image: url('./images/bg-cyan-white.png'); background-repeat: repeat; }
+.tui-bg-cyan-black { background-image: url('./images/bg-cyan-black.png'); background-repeat: repeat; }
+
+.tui-bg-red-white { background-image: url('./images/bg-red-white.png'); background-repeat: repeat; }
+.tui-bg-red-black { background-image: url('./images/bg-red-black.png'); background-repeat: repeat; }
+
+.tui-bg-purple-white { background-image: url('./images/bg-purple-white.png'); background-repeat: repeat; }
+.tui-bg-purple-black { background-image: url('./images/bg-purple-black.png'); background-repeat: repeat; }
+
+.tui-bg-yellow-white { background-image: url('./images/bg-yellow-white.png'); background-repeat: repeat; }
+.tui-bg-yellow-black { background-image: url('./images/bg-yellow-black.png'); background-repeat: repeat; }
+
+.tui-bg-orange-white { background-image: url('./images/bg-orange-white.png'); background-repeat: repeat; }
+.tui-bg-orange-black { background-image: url('./images/bg-orange-black.png'); background-repeat: repeat; }

src/components/border.scss

@@ -0,0 +1,19 @@
+.tui-border-solid {
+    border-style: solid !important;
+    border-width: 2px !important;
+}
+
+.tui-border-dashed {
+    border-style: dashed !important;
+    border-width: 2px !important;
+}
+
+.tui-border-dotted {
+    border-style: dotted !important;
+    border-width: 2px !important;
+}
+
+.tui-border-double {
+    border-style: double !important;
+    border-width: 6px !important;
+}

src/components/button.scss

@@ -0,0 +1,29 @@
+@import '../mixins.scss';
+
+.tui-button {
+	display: inline-block;
+    outline:0;
+    padding: 1px 10px;
+    background-color: rgb(0, 168, 0);
+    color: black;
+    border: none;
+    cursor: pointer;
+    text-align: center;
+    box-shadow: 10px 10px black;
+    border-radius: 0px;
+    @include disable-select;
+    &.disabled {
+        text-decoration: line-through;
+    }
+}
+.tui-button:active {
+    background-color: rgb(0, 168, 168)!important;
+    color: black!important;
+    box-shadow: none!important;
+}
+.tui-button:focus {
+    color: rgb(0, 255, 255)!important;
+}
+input[type=button] {
+    width: initial;
+}

src/components/chart.scss

@@ -0,0 +1,112 @@
+/* Chart container */
+.tui-chart-vertical {
+    position: relative;
+    background-color: black;
+}
+.tui-chart-horizontal {
+    position: relative;
+    background-color: black;
+}
+
+/* Chart display */
+.tui-chart-vertical .tui-chart-display {
+    display: flex;
+    position: absolute;
+    top: 0px;
+    left: 50px;
+    right: 0px;
+    bottom: 30px;
+    align-items: flex-end;
+    border-bottom: 2px solid white;
+    border-left: 2px solid white;
+
+    &.no-x-axis {
+        bottom: 0px;
+    }
+    &.no-y-axis {
+        left: 0px;
+    }
+}
+.tui-chart-horizontal .tui-chart-display {
+    display: flex;
+    position: absolute;
+    flex-direction: column;
+    top: 0px;
+    left: 50px;
+    right: 0px;
+    bottom: 30px;
+    align-items: stretch;
+    border-bottom: 2px solid white;
+    border-left: 2px solid white;
+
+    &.no-x-axis {
+        bottom: 0px;
+    }
+    &.no-y-axis {
+        left: 0px;
+    }
+}
+
+/* Chart X axis */
+.tui-chart-x-axis {
+    display: flex;
+    position: absolute;
+    height: 30px;
+    left: 50px;
+    right: 0px;
+    bottom: 0px;
+    line-height: 30px;
+}
+
+/* Chart Y axis */
+.tui-chart-y-axis {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 30px;
+    width: 50px;
+}
+
+/* Chart legends */
+.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend {
+    flex: 0 1 100%;
+    text-align: center;
+}
+.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend {
+    flex: 1;
+    text-align: right;
+    padding-right: 2px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+}
+.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend {
+    flex: 0 1 100%;
+    text-align: right;
+}
+.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend {
+    flex: 1;
+    text-align: right;
+    padding-right: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Chart value */
+.tui-chart-vertical .tui-chart-display .tui-chart-value {
+    flex: 0 1 100%;
+    text-align: center;
+    overflow: hidden;
+}
+.tui-chart-horizontal .tui-chart-display .tui-chart-value {
+    flex: 1;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    align-content: flex-start;
+    justify-content: flex-end;
+    overflow: hidden;
+}

src/components/checkbox.scss

@@ -0,0 +1,37 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-checkbox {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+    &.disabled {
+        color: rgb(168, 168, 168)
+    }
+}
+.tui-checkbox input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+    pointer-events: none;
+}
+.tui-checkbox span {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-checkbox input:checked ~ span::after {
+    content: $checkbox-on;
+    color: rgb(0, 255, 255);
+}
+.tui-checkbox input:not(checked) ~ span::after {
+    content: $checkbox-off;
+}

src/components/datetime.scss

@@ -0,0 +1,5 @@
+.tui-datetime {
+    padding: 1px 0px 1px 0px;
+    margin-right: 10px;
+    float:right;
+}

src/components/divider.scss

@@ -0,0 +1,8 @@
+.tui-divider {
+    border-bottom: 2px solid rgb(255, 255, 255);
+    display: block;
+}
+.tui-black-divider {
+    border-bottom: 2px solid rgb(0, 0, 0);
+    display: block;
+}

src/components/dropdown.scss

@@ -0,0 +1,29 @@
+@import '../mixins.scss';
+
+.tui-dropdown {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+    @include disable-select;
+}
+.tui-dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: rgb(168, 168, 168);
+    min-width: 200px;
+    padding: 6px;
+    z-index: 9;
+}
+.tui-dropdown-content ul {
+    border: 2px black solid;
+}
+.tui-dropdown-content ul li {
+    display: block!important;
+    margin: 6px;
+}
+.tui-dropdown-content ul li a:hover {
+    background-color: rgb(0, 168, 0);
+}
+.tui-dropdown:hover > .tui-dropdown-content:first-of-type {
+    display: block;
+}

src/components/fieldset.scss

@@ -0,0 +1,78 @@
+@import '../mixins.scss';
+
+.tui-fieldset {
+    border: 6px white double;
+    padding: 12px;
+    background-color: inherit;
+    margin-bottom: 6px;
+
+    &.no-legend {
+        margin-top: 6px;
+    }
+}
+.tui-input-fieldset {
+    border-top: 6px white double;
+    border-bottom: 6px white double;
+    border-left: 2px white solid;
+    border-right: 2px white solid;
+    padding: 5px;
+    background-color: inherit;
+}
+.tui-input-fieldset legend {
+    color: white;
+}
+.tui-input-fieldset:hover {
+    border-color: yellow;
+}
+.tui-input-fieldset:hover legend {
+    color: yellow;
+}
+.tui-fieldset-button {
+    position: absolute;
+    top: 0px;
+    right: 16px;
+    color: white;
+    background-color: inherit;
+    z-index: 2;
+    border: none;
+    cursor: pointer;
+    outline:0;
+    padding: 2px;
+    @include disable-select;
+    
+    &.left {
+        right: initial;
+        left: 16px !important;
+    }
+    &.bottom {
+        bottom: 0px;
+        top: initial;
+    }
+}
+.tui-fieldset-text {
+    position: absolute;
+    bottom: 0px;
+    left: 16px;
+    color: white;
+    background-color: inherit;
+    z-index: 2;
+    padding: 2px;
+
+    &.right {
+        left: initial;
+        right: 16px;
+    }
+    &.top {
+        top: 0px;
+        bottom: initial;
+    }
+}
+.tui-fieldset-button::before {
+    content: "[";
+}
+.tui-fieldset-button::after {
+    content: "]";
+}
+.tui-fieldset-button:active {
+    color: rgb(0, 255, 255)!important;
+}

src/components/grid.scss

@@ -0,0 +1,158 @@
+@import '../variables.scss';
+
+.container {
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 90%;
+}
+@media #{$medium-and-up} {
+  .container {
+    width: 85%;
+  }
+}
+@media #{$large-and-up} {
+  .container {
+    width: 70%;
+  }
+}
+.col .row {
+  margin-left: (-1 * $gutter-width / 2);
+  margin-right: (-1 * $gutter-width / 2);
+}
+
+.section {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+
+  &.no-pad {
+    padding: 0;
+  }
+  &.no-pad-bot {
+    padding-bottom: 0;
+  }
+  &.no-pad-top {
+    padding-top: 0;
+  }
+}
+
+
+// Mixins to eliminate code repitition
+@mixin reset-offset {
+  margin-left: auto;
+  left: auto;
+  right: auto;
+}
+@mixin grid-classes($size, $i, $perc) {
+  &.offset-#{$size}#{$i} {
+    margin-left: $perc;
+  }
+  &.pull-#{$size}#{$i} {
+    right: $perc;
+  }
+  &.push-#{$size}#{$i} {
+    left: $perc;
+  }
+}
+
+
+.row {
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+
+  // Clear floating children
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+
+  .col {
+    float: left;
+    box-sizing: border-box;
+    padding: 0 $gutter-width / 2;
+    min-height: 1px;
+
+    &[class*="push-"],
+    &[class*="pull-"] {
+      position: relative;
+    }
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      &.s#{$i} {
+        width: $perc;
+        @include reset-offset;
+      }
+      $i: $i + 1;
+    }
+
+    $i: 1;
+    @while $i <= $num-cols {
+      $perc: unquote((100 / ($num-cols / $i)) + "%");
+      @include grid-classes("s", $i, $perc);
+      $i: $i + 1;
+    }
+
+    @media #{$medium-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.m#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("m", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+
+    @media #{$large-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.l#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1;
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("l", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+
+    @media #{$extra-large-and-up} {
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        &.xl#{$i} {
+          width: $perc;
+          @include reset-offset;
+        }
+        $i: $i + 1;
+      }
+
+      $i: 1;
+      @while $i <= $num-cols {
+        $perc: unquote((100 / ($num-cols / $i)) + "%");
+        @include grid-classes("xl", $i, $perc);
+        $i: $i + 1;
+      }
+    }
+  }
+}

src/components/input.scss

@@ -0,0 +1,15 @@
+.tui-input {
+    background-color: rgb(0, 0, 0);
+    color: white;
+    outline:0;
+    border: none;
+    border-radius: 0px;
+    &.disabled {
+        background-color: rgb(168, 168, 168);
+        color: black;
+    }
+}
+.tui-input:focus {
+    background-color: rgb(255, 255, 0)!important;
+    color: black!important;
+}

src/components/modal.scss

@@ -0,0 +1,25 @@
+.tui-modal {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 100px;
+    z-index: 101;
+    display: none;
+    &.active {
+        display: block !important;
+    }
+}
+.tui-overlap {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 100;
+    display: none;
+    &.active {
+        display: block !important;
+    }
+}
+.tui-modal-button {}
+.tui-modal-close-button {}

src/components/navbar.scss

@@ -0,0 +1,22 @@
+@import '../mixins.scss';
+
+.tui-nav {
+    width: 100%;
+    background-color: rgb(168, 168, 168);
+    padding: 0px 2px;
+    z-index: 9;
+    display: block;
+    position: fixed;
+}
+.tui-nav ul li {
+    display: inline-block;
+    margin-left: 10px;
+    padding: 1px 3px;
+}
+.tui-nav ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-nav ul li:hover {
+    background-color: rgb(0, 168, 0);
+}

src/components/panel.scss

@@ -0,0 +1,17 @@
+.tui-panel {
+    background-color: rgb(0, 0, 168);
+    display: inline-block;
+    color: white;
+    box-shadow: 10px 10px black;
+}
+
+.tui-panel-content {
+    padding: 12px;
+}
+
+.tui-panel-header {
+    padding-top: 2px;
+    display: block;
+    background: white;
+    text-align: center;
+}

src/components/progressbar.scss

@@ -0,0 +1,37 @@
+.tui-progress-bar {
+    display: block;
+    position: relative;
+    height: 20px;
+    width: 200px;
+    background-color: rgb(0, 168, 168);
+    overflow: hidden;
+}
+.tui-progress {
+    position: absolute;
+    left: 0px;
+    background-color: rgb(0, 255, 255);
+    height: 100%;
+    display: inline-block;
+}
+.tui-progress-bar .tui-indeterminate {
+    position: absolute;
+    left: 0px;
+    background-color: rgb(0, 255, 255);
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    animation: indeterminate 1s backwards;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+.tui-progress-label {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: 1;
+}
+@keyframes indeterminate {
+    from {margin-left: -10%; }
+    to {margin-left: 100%}
+}

src/components/radio.scss

@@ -0,0 +1,37 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-radio {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+    &.disabled {
+        color: rgb(168, 168, 168)
+    }
+}
+.tui-radio input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+    pointer-events: none;
+}
+.tui-radio span {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    cursor: pointer;
+    top: 0px;
+    left: 0px;
+}
+.tui-radio input:checked ~ span:after {
+    content: $radio-on;
+    color: rgb(0, 255, 255)!important;
+}
+.tui-radio input:not(checked) ~ span:after {
+    content: $radio-off;
+}

src/components/screen.scss

@@ -0,0 +1,26 @@
+.tui-screen-640-480 {
+    width: 640px;
+    height: 480px;
+}
+.tui-screen-800-600 {
+    width: 800px;
+    height: 600px;
+}
+.tui-screen-1024-768 {
+    width: 1024px;
+    height: 768px;
+}
+
+.tui-screen-640-480,
+.tui-screen-800-600,
+.tui-screen-1024-768 {
+    position: relative;
+    overflow: hidden;
+    &.bordered{
+        border: 2px solid black;
+    }
+    &.centered {
+        margin: auto;
+        margin-top: 20px;
+    }
+}

src/components/scrollbar.scss

@@ -0,0 +1,105 @@
+@import '../variables.scss';
+
+@if $scroll-default-tui {
+
+    /* Default */
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+    ::-webkit-scrollbar-track {
+        background-image: $scroll-default-image;
+        background-repeat: repeat;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: $scroll-default-color;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: $scroll-default-color;
+    }
+
+}
+
+/* Styles */
+.tui-scroll-blue {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-blue.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(0, 0, 168);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(0, 0, 168);
+    }
+}
+
+.tui-scroll-green {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-green.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(0, 168, 0);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(0, 168, 0);
+    }
+}
+
+.tui-scroll-cyan {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-cyan.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(0, 168, 168);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(0, 168, 168);
+    }
+}
+
+.tui-scroll-red {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-red.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(168, 0, 0);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(168, 0, 0);
+    }
+}
+
+.tui-scroll-purple {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-purple.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(168, 0, 168);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(168, 0, 168);
+    }
+}
+
+.tui-scroll-yellow {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-yellow.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(168, 168, 0);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(168, 168, 0);
+    }
+}
+
+.tui-scroll-white {
+    ::-webkit-scrollbar-track {
+        background-image: url(images/scroll-white.png);
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(168, 168, 168);
+    }
+    ::-webkit-scrollbar-thumb:hover {
+        background-color: rgb(168, 168, 168);
+    }
+}

src/components/shadow.scss

@@ -0,0 +1,43 @@
+.tui-shadow, .tui-shadow-1 {
+    box-shadow: 10px 10px black!important;
+}
+
+.tui-shadow-2 {
+    box-shadow: 15px 15px black;
+}
+
+.tui-shadow-3 {
+    box-shadow: 20px 20px black;
+}
+
+.tui-shadow-4 {
+    box-shadow: 25px 25px black;
+}
+
+.tui-shadow-5 {
+    box-shadow: 30px 30px black;
+}
+
+.tui-shadow-left, .tui-shadow-left-1 {
+    box-shadow: -10px 10px black!important;
+}
+
+.tui-shadow-left-2 {
+    box-shadow: -15px 15px black!important;
+}
+
+.tui-shadow-left-3 {
+    box-shadow: -20px 20px black!important;
+}
+
+.tui-shadow-left-4 {
+    box-shadow: -25px 25px black!important;
+}
+
+.tui-shadow-left-5 {
+    box-shadow: -30px 30px black!important;
+}
+
+.tui-no-shadow {
+    box-shadow: none!important;
+}

src/components/shortcut.scss

@@ -0,0 +1,3 @@
+.tui-shortcut {
+    float: right;
+}

src/components/sidenav.scss

@@ -0,0 +1,41 @@
+@import '../mixins.scss';
+
+.tui-sidenav {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    background-color: rgb(0, 168, 168);
+    min-width: 200px;
+    box-shadow: 10px 10px black!important;
+    padding: 6px;
+    z-index: 10;
+    height: 100%;
+    z-index: 8;
+    display: none;
+    &.right {
+        left: initial;
+        right: 0px;
+    }
+    &.active {
+        display: block !important;
+    }
+}
+.tui-sidenav ul {
+    margin-top: 20px;
+    border: 2px black solid;
+}
+.tui-sidenav ul li {
+    display: block;
+    margin: 6px;
+}
+.tui-sidenav ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-sidenav ul li:hover {
+    background-color: rgb(255, 255, 0);
+}
+.tui-sidenav-button {
+    cursor: pointer;
+    @include disable-select;
+}

src/components/statusbar.scss

@@ -0,0 +1,28 @@
+@import '../mixins.scss';
+
+.tui-statusbar {
+    width: 100%;
+    background-color: rgb(168, 168, 168);
+    padding: 0px 1px;
+    left: 0px;
+    bottom: 0px;
+    z-index: 9;
+    position: fixed;
+}
+.tui-statusbar ul li {
+    display: inline-block;
+    margin-left: 10px;
+    padding: 2px 3px;
+}
+.tui-statusbar ul li:active {
+    background-color: rgb(0, 0, 168);
+    color: white;
+}
+.tui-statusbar ul li a {
+    @include disable-select;
+}
+.tui-statusbar-divider {
+    border-right: 2px black solid;
+    display: inline;
+    margin: 0px 3px;
+} 

src/components/table.scss

@@ -0,0 +1,101 @@
+.tui-table {
+    border: 2px solid rgb(168, 168, 168);
+    padding: 5px;
+    border-collapse: collapse;
+
+    &.hovered-blue tbody tr:hover {
+        background-color: rgb(0, 0, 255) !important;
+        color: black;
+    }
+
+    &.hovered-green tbody tr:hover {
+        background-color: rgb(0, 255, 0) !important;
+        color: black;
+    }
+
+    &.hovered-cyan tbody tr:hover {
+        background-color: rgb(0, 255, 255) !important;
+        color: black;
+    }
+
+    &.hovered-red tbody tr:hover {
+        background-color: rgb(255, 0, 0) !important;
+        color: white;
+    }
+
+    &.hovered-purple tbody tr:hover {
+        background-color: rgb(255, 0, 255) !important;
+        color: white;
+    }
+
+    &.hovered-yellow tbody tr:hover {
+        background-color: rgb(255, 255, 0) !important;
+        color: black;
+    }
+
+    &.hovered-white tbody tr:hover {
+        background-color: rgb(255, 255, 255) !important;
+        color: black;
+    }
+
+    &.hovered-orange tbody tr:hover {
+        background-color: rgb(255, 168, 0) !important;
+        color: black;
+    }
+
+    &.hovered tbody tr:hover {
+        background-color: rgb(0, 255, 255) !important;
+        color: black;
+    }
+
+    &.striped-blue tbody tr:nth-child(even) {
+        background-color: rgb(0, 0, 168);
+    }
+
+    &.striped-green tbody tr:nth-child(even) {
+        background-color: rgb(0, 168, 0);
+    }
+
+    &.striped-cyan tbody tr:nth-child(even) {
+        background-color: rgb(0, 168, 168);
+    }
+
+    &.striped-red tbody tr:nth-child(even) {
+        background-color: rgb(168, 0, 0);
+    }
+
+    &.striped-purple tbody tr:nth-child(even) {
+        background-color: rgb(168, 0, 168);
+    }
+
+    &.striped-yellow tbody tr:nth-child(even) {
+        background-color: rgb(168, 168, 0);
+    }
+
+    &.striped-white tbody tr:nth-child(even) {
+        background-color: rgb(168, 168, 168);
+        color: black;
+    }
+
+    &.striped-orange tbody tr:nth-child(even) {
+        background-color: rgb(168, 86, 0);
+    }
+}
+.tui-table tbody {
+    background-color: inherit;
+    color: white;
+}
+.tui-table tbody tr td {
+    border-right: 2px solid rgb(168, 168, 168);
+    padding: 0px 2px;
+}
+.tui-table thead {
+    background-color: inherit;
+    color: rgb(255, 255, 0);
+    text-align: center;
+}
+.tui-table tfoot {
+    background-color: inherit;
+    color: rgb(255, 255, 0);
+    text-align: center;
+}

src/components/tablegrid.scss

@@ -0,0 +1,13 @@
+.tui-table-grid {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.tui-table-grid thead tr td,
+.tui-table-grid tbody tr td,
+.tui-table-grid thead tr th,
+.tui-table-grid tbody tr th {
+    border: 2px solid black;
+    padding: 10px;
+    vertical-align: top;
+}

src/components/tabs.scss

@@ -0,0 +1,29 @@
+@import '../mixins.scss';
+
+.tui-tabs {
+    background-color: rgb(0, 0, 168);
+    width: 100%;
+    padding: 0px 10px 0px 10px;
+}
+.tui-tabs ul li {
+    display: inline-block;
+}
+.tui-tabs ul li a {
+    display: block;
+    @include disable-select;
+}
+.tui-tab {
+    padding: 2px 10px 0px 10px;
+    color: rgb(168, 168, 168);
+    cursor: pointer;
+    &.active {
+        background-color: rgb(168, 168, 168);
+        color: rgb(0, 0, 168);
+    }
+    &.disabled {
+        text-decoration: line-through;
+    }
+}
+.tui-tab-content {
+    display: none;
+}

src/components/textarea.scss

@@ -0,0 +1,11 @@
+.tui-textarea {
+    background-color: inherit;
+    border: none;
+    padding: 0px;
+    color: rgb(255, 255, 0);
+    outline: none;
+    &.disabled {
+        background-color: rgb(168, 168, 168);
+        color: black;
+    }
+}

src/components/window.scss

@@ -0,0 +1,8 @@
+.tui-window {
+    background-color: rgb(0, 0, 168);
+    padding: 1px;
+    display: inline-block;
+    position: relative;
+    box-shadow: 10px 10px black;
+    color: white;
+}