Created examples

src/components/background.scss

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

src/components/border.scss

@@ -0,0 +1,15 @@
+.tui-border-solid {
+    border: 2px solid;
+}
+
+.tui-border-dashed {
+    border: 2px dashed;
+}
+
+.tui-border-dotted {
+    border: 2px dotted;
+}
+
+.tui-border-double {
+    border: 2px double;
+}

src/components/fieldset.scss

@@ -1,11 +1,12 @@
 .tui-window-fieldset {
     border: 6px white double;
-    padding: 10px;
+    padding: 12px;
     background-color: inherit;
     margin-bottom: 6px;
-}
-.tui-window-fieldset-no-legend {
-    margin-top: 6px;
+
+    &.no-legend {
+        margin-top: 6px;
+    }
 }
 .tui-input-fieldset {
     border-top: 6px white double;
@@ -35,6 +36,11 @@
     cursor: pointer;
     outline:0;
     padding: 2px;
+    
+    &.left {
+        right: initial;
+        left: 16px !important;
+    }
 }
 .tui-fieldset-statusbar {
     position: absolute;
@@ -50,10 +56,6 @@
         right: 16px;
     }
 }
-.tui-fieldset-button-left {
-    left: 16px!important;
-    right: initial;
-}
 .tui-fieldset-button::before {
     content: "[";
 }

src/components/progressbar.scss

@@ -1,7 +1,7 @@
 .tui-progress {
     display: block;
     position: relative;
-    height: 16px;
+    height: 20px;
     width: 200px;
     background-color: rgb(0, 168, 168);
     overflow: hidden;
@@ -10,15 +10,15 @@
     position: absolute;
     left: 0px;
     background-color: rgb(0, 255, 255);
-    height: 16px;
+    height: 20px;
     display: inline-block;
 }
 .tui-progress .tui-indeterminate {
     position: absolute;
     left: 0px;
     background-color: rgb(0, 255, 255);
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    width: 20px;
     display: inline-block;
     animation: indeterminate 1s backwards;
     animation-iteration-count: infinite;

src/components/scrollbar.scss

@@ -1,13 +1,15 @@
+@import '../variables.scss';
+
 ::-webkit-scrollbar {
     width: 10px;
 }
 ::-webkit-scrollbar-track {
-    background-image: url("images/scroll.png");
+    background-image: $scrool-image;
     background-repeat: repeat;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: rgb(0, 168, 168);
+    background-color: $scrool-color;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(0, 168, 168);
+    background-color: $scrool-color;
 }

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/texture.scss

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

src/styles/color.scss

@@ -52,6 +52,7 @@
 .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}
+.orange-168                      {background-color: rgb(168, 86, 0)!important}
 
 .black-168-text                 {color: rgb(0, 0, 0)!important}
 .blue-168-text                  {color: rgb(0, 0, 168)!important}
@@ -61,6 +62,7 @@
 .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}
+.orange-168-text                {color: rgb(168, 86, 0)!important}
 
 .black-168-border               {border-color: rgb(0, 0, 0)!important}
 .blue-168-border                {border-color: rgb(0, 0, 168)!important}
@@ -70,6 +72,7 @@
 .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}
+.orange-168-border              {border-color: rgb(168, 86, 0)!important}
 
 .black-168-hover:hover          {background-color: rgb(0, 0, 0)!important}
 .blue-168-hover:hover           {background-color: rgb(0, 0, 168)!important}
@@ -79,15 +82,17 @@
 .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}
+.orange-168-hover:hover         {background-color: rgb(168, 86, 0)!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}
+.purple-168-text-hover:hover    {color: rgb(168, 0, 168)!important}
+.yellow-168-text-hover:hover    {color: rgb(168, 168, 0)!important}
+.white-168-text-hover:hover     {color: rgb(168, 168, 168)!important}
+.orange-168-text-hover:hover    {color: rgb(168, 86, 0)!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}
@@ -97,6 +102,7 @@
 .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}
+.orange-168-border-hover:hover  {border-color: rgb(168, 86, 0)!important}
 
 /* 255 */
 .black-255                      {background-color: rgb(0, 0, 0)!important}
@@ -154,16 +160,23 @@
 .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; }
+.black                      { background-color: black!important }
+.black-text                 { color: black!important }
+.black-border               { border-color: black!important }
+.black-hover:hover          { background-color: black!important }
+.black-text-hover:hover     { color: black!important }
+.black-border-hover:hover   { border-color: black!important }
 
-.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; }
+.white                      { background-color: white!important }
+.white-text                 { color: white!important }
+.white-border               { border-color: white!important }
+.white-hover:hover          { background-color: white!important }
+.white-text-hover:hover     { color: white!important }
+.white-border-hover:hover   { border-color: white!important }
+
+.orange                      { background-color: rgb(168, 86, 0)!important }
+.orange-text                 { color: rgb(168, 86, 0)!important }
+.orange-border               { border-color: rgb(168, 86, 0)!important }
+.orange-hover:hover          { background-color: rgb(168, 86, 0)!important }
+.orange-text-hover:hover     { color: rgb(168, 86, 0)!important }
+.orange-border-hover:hover   { border-color: rgb(168, 86, 0)!important }

src/styles/shadow.scss

@@ -1,23 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-.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/util.scss

@@ -50,19 +50,9 @@
     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');
 }

src/tuicss.scss

@@ -1,3 +1,8 @@
+/* Styles */
+@import './styles/global.scss';
+@import './styles/color.scss';
+@import './styles/util.scss';
+
 /* Components */
 @import './components/button.scss';
 @import './components/checkbox.scss';
@@ -19,10 +24,9 @@
 @import './components/window.scss';
 @import './components/screen.scss';
 @import './components/date.scss';
-
-/* Styles */
-@import './styles/colors.scss';
-@import './styles/global.scss';
-@import './styles/shadow.scss';
-@import './styles/textures.scss';
-@import './styles/utils.scss';
+@import './components/shortcut.scss';
+@import './components/shadow.scss';
+@import './components/texture.scss';
+@import './components/background.scss';
+@import './components/border.scss';
+@import './components/grid.scss';

src/variables.scss

@@ -28,4 +28,14 @@ $large-and-up: "only screen and (min-width : #{$medium-screen-up})";
 $extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
 $small-and-down: "only screen and (max-width : #{$small-screen})";
 $medium-and-down: "only screen and (max-width : #{$medium-screen})";
-$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";
+$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-width : #{$medium-screen})";
+
+/* Scrool */
+$scrool-image: url(images/scroll.png);
+$scrool-color: rgb(0, 168, 168);
+
+/* Grid */
+$num-cols: 12;
+$gutter-width: 1.5rem;
+$element-top-margin: $gutter-width/3;
+$element-bottom-margin: ($gutter-width*2)/3;