Project refactored to use NPM package manager, jquery and created new features

src/components/button.scss

@@ -0,0 +1,22 @@
+@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;
+    @include disable-select;
+}
+.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;
+}

src/components/checkbox.scss

@@ -0,0 +1,33 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-checkbox {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+}
+.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: $checkbox-on;
+    color: rgb(0, 255, 255);
+}
+.tui-checkbox input:not(checked) ~ span::after {
+    content: $checkbox-off;
+}

src/components/date.scss

@@ -0,0 +1,5 @@
+.tui-date {
+    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,26 @@
+@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:hover > .tui-dropdown-content:first-of-type {
+    display: block;
+}

src/components/fieldset.scss

@@ -0,0 +1,65 @@
+.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;
+
+    &.right {
+        left: initial;
+        right: 16px;
+    }
+}
+.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;
+}

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,11 @@
+.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;
+}

src/components/navbar.scss

@@ -0,0 +1,24 @@
+@import '../mixins.scss';
+
+.tui-nav {
+    width: 100%;
+    background-color: rgb(168, 168, 168);
+    padding: 0px 2px;
+    z-index: 9;
+    display: block;
+}
+.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;
+    @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,30 @@
+.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%}
+}

src/components/radio.scss

@@ -0,0 +1,33 @@
+@import '../variables.scss';
+@import '../mixins.scss';
+
+.tui-radio {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    color: white;
+    padding-left: 30px;
+    @include disable-select;
+}
+.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: $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,21 @@
+.tui-screen-640-360 {
+    width: 640px;
+    height: 360px;
+}
+.tui-screen-800-600 {
+    width: 800px;
+    height: 600px;
+}
+.tui-screen-1024-768 {
+    width: 1024px;
+    height: 768px;
+}
+
+.tui-screen-640-360,
+.tui-screen-800-600,
+.tui-screen-1024-768 {
+    position: relative;
+    &.bordered{
+        border: 2px solid black;
+    }
+}

src/components/scrollbar.scss

@@ -0,0 +1,13 @@
+::-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);
+}

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,22 @@
+.tui-table {
+    border: 2px solid rgb(168, 168, 168);
+    padding: 5px;
+    border-collapse: collapse;
+}
+.tui-table-hover tbody tr:hover {
+    background-color: rgb(0, 255, 255);
+    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;
+}

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,26 @@
+@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);
+    }
+}
+.tui-tab-content {
+    display: none;
+}

src/components/textarea.scss

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

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;
+}