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

src/styles/colors.scss

@@ -0,0 +1,169 @@
+@import '../variables.scss';
+
+/* Theme */
+.primary                        { background-color: $primary }
+.primary-text                   { color: $primary }
+.primary-border                 { border-color: $primary }
+.primary-hover:hover            { background-color: $primary }
+.primary-text-hover:hover       { color: $primary }
+.primary-border-hover:hover     { border-color: $primary }
+
+.secondary                      { background-color: $secondary }
+.secondary-text                 { color: $secondary }
+.secondary-border               { border-color: $secondary }
+.secondary-hover:hover          { background-color: $secondary }
+.secondary-text-hover:hover     { color: $secondary }
+.secondary-border-hover:hover   { border-color: $secondary }
+
+.success                        { background-color: $success }
+.success-text                   { color: $success }
+.success-border                 { border-color: $success }
+.success-hover:hover            { background-color: $success }
+.success-text-hover:hover       { color: $success }
+.success-border-hover:hover     { border-color: $success }
+
+.danger                         { background-color: $danger }
+.danger-text                    { color: $danger }
+.danger-border                  { border-color: $danger }
+.danger-hover:hover             { background-color: $danger }
+.danger-text-hover:hover        { color: $danger }
+.danger-border-hover:hover      { border-color: $danger }
+
+.warning                        { background-color: $warning }
+.warning-text                   { color: $warning }
+.warning-border                 { border-color: $warning }
+.warning-hover:hover            { background-color: $warning }
+.warning-text-hover:hover       { color: $warning }
+.warning-border-hover:hover     { border-color: $warning }
+
+.info                           { background-color: $info }
+.info-text                      { color: $info }
+.info-border                    { border-color: $info }
+.info-hover:hover               { background-color: $info }
+.info-text-hover:hover          { color: $info }
+.info-border-hover:hover        { border-color: $info }
+
+/* 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}
+
+.black-168-border-hover:hover   {border-color: rgb(0, 0, 0)!important}
+.blue-168-border-hover:hover    {border-color: rgb(0, 0, 168)!important}
+.green-168-border-hover:hover   {border-color: rgb(0, 168, 0)!important}
+.cyan-168-border-hover:hover    {border-color: rgb(0, 168, 168)!important}
+.red-168-border-hover:hover     {border-color: rgb(168, 0, 0)!important}
+.purple-168-border-hover:hover  {border-color: rgb(168, 0, 168)!important}
+.yellow-168-border-hover:hover  {border-color: rgb(168, 168, 0)!important}
+.white-168-border-hover:hover   {border-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}
+
+.black-255-border-hover:hover   {border-color: rgb(0, 0, 0)!important}
+.blue-255-border-hover:hover    {border-color: rgb(0, 0, 255)!important}
+.green-255-border-hover:hover   {border-color: rgb(0, 255, 0)!important}
+.cyan-255-border-hover:hover    {border-color: rgb(0, 255, 255)!important}
+.red-255-border-hover:hover     {border-color: rgb(255, 0, 0)!important}
+.purple-255-border-hover:hover  {border-color: rgb(255, 0, 255)!important}
+.yellow-255-border-hover:hover  {border-color: rgb(255, 255, 0)!important}
+.white-255-border-hover:hover   {border-color: rgb(255, 255, 255)!important}
+
+/* Misc */
+.black                      { background-color: black; }
+.black-text                 { color: black }
+.black-border               { border-color: black; }
+.black-hover:hover          { background-color: black; }
+.black-text-hover:hover     { color: black }
+.black-border-hover:hover   { border-color: black; }
+
+.white                      { background-color: white; }
+.white-text                 { color: white }
+.white-border               { border-color: white; }
+.white-hover:hover          { background-color: white; }
+.white-text-hover:hover     { color: white }
+.white-border-hover:hover   { border-color: white; }

src/styles/global.scss

@@ -0,0 +1,54 @@
+@import '../variables.scss';
+@font-face {
+  font-family: 'DOS';
+  src: url('./fonts/Perfect DOS VGA 437 Win.ttf');
+}
+
+/* Global Definitions */
+html {
+    font-family: $font, 'monospace';
+    font-size: $font-size;
+    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;
+}

src/styles/media.scss

@@ -0,0 +1,62 @@
+@import '../variables.scss';
+
+.hide-on-small-only, .hide-on-small-and-down {
+  @media #{$small-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-down {
+  @media #{$medium-and-down} {
+    display: none !important;
+  }
+}
+.hide-on-med-and-up {
+  @media #{$medium-and-up} {
+    display: none !important;
+  }
+}
+.hide-on-med-only {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: none !important;
+  }
+}
+.hide-on-large-only {
+  @media #{$large-and-up} {
+    display: none !important;
+  }
+}
+.hide-on-extra-large-only {
+  @media #{$extra-large-and-up} {
+    display: none !important;
+  }
+}
+.show-on-extra-large {
+  @media #{$extra-large-and-up} {
+    display: block !important;
+  }
+}
+.show-on-large {
+  @media #{$large-and-up} {
+    display: block !important;
+  }
+}
+.show-on-medium {
+  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+    display: block !important;
+  }
+}
+.show-on-small {
+  @media #{$small-and-down} {
+    display: block !important;
+  }
+}
+.show-on-medium-and-up {
+  @media #{$medium-and-up} {
+    display: block !important;
+  }
+}
+.show-on-medium-and-down {
+  @media #{$medium-and-down} {
+    display: block !important;
+  }
+}

src/styles/shadow.scss

@@ -0,0 +1,23 @@
+.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-no-shadow {
+    box-shadow: none!important;
+}

src/styles/textures.scss

@@ -0,0 +1,8 @@
+.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;
+}

src/styles/utils.scss

@@ -0,0 +1,68 @@
+@import '../mixins.scss';
+
+.tui-no-padding {
+    padding: 0px!important;
+}
+
+.left {
+    float: left!important;
+}
+.right {
+    float: right!important;
+}
+.center {
+    text-align: center;
+}
+.left-align {
+    text-align: left;
+}
+.right-align {
+    text-align: right;
+}
+.center-align {
+    text-align: center;
+}
+
+.full-width {
+    width: 100%!important;
+}
+.full-height {
+    height: 100%!important;
+}
+
+.inline {
+    display: inline!important;
+}
+.block {
+    display: block!important;
+}
+
+.fixed {
+    position: fixed!important;
+}
+.absolute {
+    position: absolute!important;
+}
+.relative {
+    position: relative!important;
+}
+.static {
+    position: static!important;
+}
+
+.tui-shortcut {
+    float: right;
+}
+.tui-content {
+    padding: 12px;
+}
+.tui-disable-select {
+    @include disable-select;
+}
+
+.texturized {
+    background-image: url('./images/bg.png');
+    }
+.texturized-black {
+    background-image: url('./images/bg-black.png');
+}