Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created examples

Browse Source
This commit is contained in:
vinibiavatti 2019-09-06 00:07:44 -03:00
parent 2e1b284d12
commit 075b56fcc6
48 changed files with 2558 additions and 1378 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
dist/images/bg-black.png → dist/images/bg-blue-black.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 B

After

Width:  |  Height:  |  Size: 166 B

0
dist/images/bg.png → dist/images/bg-blue-white.png vendored
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 B

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/bg-cyan-black.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/bg-cyan-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
dist/images/bg-green-black.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/bg-green-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
dist/images/bg-purple-black.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/bg-purple-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
dist/images/bg-red-black.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 B

BIN
dist/images/bg-red-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
dist/images/bg-yellow-black.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
dist/images/bg-yellow-white.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

1831
dist/tuicss.css vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/tuicss.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
examples/general.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="tui-blue-bg"> <html lang="en" class="tui-bg-blue-black">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -320,7 +320,7 @@
<!-- WINDOW EXAMPLE 6 --> <!-- WINDOW EXAMPLE 6 -->
<div class="tui-window red-168"> <div class="tui-window red-168">
<fieldset class="tui-window-fieldset tui-window-fieldset-no-legend tui-border-solid"> <fieldset class="tui-window-fieldset no-legend tui-border-solid">
<span class="red-255 yellow-255-text">Warning! There are pendencies</span><br><br> <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 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. lorem.<br> Aliquam urna lorem, placerat et varius et, aliquam ac libero.

79
examples/inputs.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
<title>Inputs Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script>
<script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.tui-input {
width: 300px;
}
</style>
</head>
<body class="center" style="padding: 50px">
<div class="tui-window" style="text-align: left">
<fieldset class="tui-window-fieldset">
<legend class="center">Form</legend>
Text.......: <input class="tui-input" value="text" /><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>
</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">Third
<input type="checkbox" />
<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">Third
<input type="radio" name="radio" />
<span></span>
</label>
</fieldset>
<br>
Textarea<br>
<textarea class="tui-input" style="width: 100%"></textarea>
<br>
Multiple<br>
<select multiple class="tui-input" style="width: 100%">
<option>---</option>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select><br>
</fieldset>
</div>
</body>
</html>

2
examples/pc-startup.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>PC Startup</title> <title>PC Startup Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script> <script src="plugins/jquery-3.4.1.min.js"></script>
<script src="../dist/tuicss.min.js"></script> <script src="../dist/tuicss.min.js"></script>
<link rel="stylesheet" href="../dist/tuicss.min.css"> <link rel="stylesheet" href="../dist/tuicss.min.css">

55
examples/pocket-calculator.html
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pocket Calculator Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script>
<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-window-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 = $("#display").val();
$("#display").val(digit + "" + val);
}
function clearDisplay() {
$("#display").val("");
}
</script>
</body>
</html>

52
examples/scandisk.html
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scandisk Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script>
<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 right tui-texturized-blue-black" style="width: 550px; ">
<span style="width: 75%" class="yellow-255"></span>
</span>
</div>
</div>
</body>
</html>

171
examples/window-and-panels.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<head>
<meta charset="UTF-8">
<title>Window and Panels Example</title>
<script src="plugins/jquery-3.4.1.min.js"></script>
<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-window-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-window-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-window-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-statusbar">Text format: UTF-8</div>
<div class="tui-fieldset-statusbar 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-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>
</ul>
</fieldset>
</div>
<!-- Window textarea -->
<div class="info-text">Window textarea</div>
<div class="tui-window">
<fieldset class="tui-window-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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Curabitur id vestibulum libero, id fermentum lorem.
<br><br>
<div class="center">
<button class="tui-button white-255" style="width: 80px">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>

1492
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -4,7 +4,8 @@
"description": "Text-based user interface CSS framework", "description": "Text-based user interface CSS framework",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"build": "gulp"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

17
src/components/background.scss Normal file
View File

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

15
src/components/border.scss Normal file
View File

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

16
src/components/fieldset.scss
View File

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

8
src/components/progressbar.scss
View File

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

8
src/components/scrollbar.scss
View File

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

43
src/components/shadow.scss Normal file
View File

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

3
src/components/shortcut.scss Normal file
View File

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

17
src/components/texture.scss Normal file
View File

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

0
src/images/bg-black.png → src/images/bg-blue-black.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 166 B

After

Width:  |  Height:  |  Size: 166 B

0
src/images/bg.png → src/images/bg-blue-white.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 168 B

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/bg-cyan-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/bg-cyan-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
src/images/bg-green-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/bg-green-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
src/images/bg-purple-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/bg-purple-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
src/images/bg-red-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 166 B

BIN
src/images/bg-red-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

BIN
src/images/bg-yellow-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 B

BIN
src/images/bg-yellow-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 B

43
src/styles/colors.scss → src/styles/color.scss
View File

@ -52,6 +52,7 @@
.purple-168 {background-color: rgb(168, 0, 168)!important} .purple-168 {background-color: rgb(168, 0, 168)!important}
.yellow-168 {background-color: rgb(168, 168, 0)!important} .yellow-168 {background-color: rgb(168, 168, 0)!important}
.white-168 {background-color: rgb(168, 168, 168)!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} .black-168-text {color: rgb(0, 0, 0)!important}
.blue-168-text {color: rgb(0, 0, 168)!important} .blue-168-text {color: rgb(0, 0, 168)!important}
@ -61,6 +62,7 @@
.purple-168-text {color: rgb(168, 0, 168)!important} .purple-168-text {color: rgb(168, 0, 168)!important}
.yellow-168-text {color: rgb(168, 168, 0)!important} .yellow-168-text {color: rgb(168, 168, 0)!important}
.white-168-text {color: rgb(168, 168, 168)!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} .black-168-border {border-color: rgb(0, 0, 0)!important}
.blue-168-border {border-color: rgb(0, 0, 168)!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} .purple-168-border {border-color: rgb(168, 0, 168)!important}
.yellow-168-border {border-color: rgb(168, 168, 0)!important} .yellow-168-border {border-color: rgb(168, 168, 0)!important}
.white-168-border {border-color: rgb(168, 168, 168)!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} .black-168-hover:hover {background-color: rgb(0, 0, 0)!important}
.blue-168-hover:hover {background-color: rgb(0, 0, 168)!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} .purple-168-hover:hover {background-color: rgb(168, 0, 168)!important}
.yellow-168-hover:hover {background-color: rgb(168, 168, 0)!important} .yellow-168-hover:hover {background-color: rgb(168, 168, 0)!important}
.white-168-hover:hover {background-color: rgb(168, 168, 168)!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} .black-168-text-hover:hover {color: rgb(0, 0, 0)!important}
.blue-168-text-hover:hover {color: rgb(0, 0, 168)!important} .blue-168-text-hover:hover {color: rgb(0, 0, 168)!important}
.green-168-text-hover:hover {color: rgb(0, 168, 0)!important} .green-168-text-hover:hover {color: rgb(0, 168, 0)!important}
.cyan-168-text-hover:hover {color: rgb(0, 168, 168)!important} .cyan-168-text-hover:hover {color: rgb(0, 168, 168)!important}
.red-168-text-hover:hover {color: rgb(168, 0, 0)!important} .red-168-text-hover:hover {color: rgb(168, 0, 0)!important}
.purple-text-168-hover:hover {color: rgb(168, 0, 168)!important} .purple-168-text-hover:hover {color: rgb(168, 0, 168)!important}
.yellow-text-168-hover:hover {color: rgb(168, 168, 0)!important} .yellow-168-text-hover:hover {color: rgb(168, 168, 0)!important}
.white-text-168-hover:hover {color: rgb(168, 168, 168)!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} .black-168-border-hover:hover {border-color: rgb(0, 0, 0)!important}
.blue-168-border-hover:hover {border-color: rgb(0, 0, 168)!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} .purple-168-border-hover:hover {border-color: rgb(168, 0, 168)!important}
.yellow-168-border-hover:hover {border-color: rgb(168, 168, 0)!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} .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 */ /* 255 */
.black-255 {background-color: rgb(0, 0, 0)!important} .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} .white-255-border-hover:hover {border-color: rgb(255, 255, 255)!important}
/* Misc */ /* Misc */
.black { background-color: black; } .black { background-color: black!important }
.black-text { color: black } .black-text { color: black!important }
.black-border { border-color: black; } .black-border { border-color: black!important }
.black-hover:hover { background-color: black; } .black-hover:hover { background-color: black!important }
.black-text-hover:hover { color: black } .black-text-hover:hover { color: black!important }
.black-border-hover:hover { border-color: black; } .black-border-hover:hover { border-color: black!important }
.white { background-color: white; } .white { background-color: white!important }
.white-text { color: white } .white-text { color: white!important }
.white-border { border-color: white; } .white-border { border-color: white!important }
.white-hover:hover { background-color: white; } .white-hover:hover { background-color: white!important }
.white-text-hover:hover { color: white } .white-text-hover:hover { color: white!important }
.white-border-hover:hover { border-color: white; } .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 }

23
src/styles/shadow.scss
View File

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

8
src/styles/textures.scss
View File

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

10
src/styles/utils.scss → src/styles/util.scss
View File

@ -50,19 +50,9 @@
position: static!important; position: static!important;
} }
.tui-shortcut {
float: right;
}
.tui-content { .tui-content {
padding: 12px; padding: 12px;
} }
.tui-disable-select { .tui-disable-select {
@include disable-select; @include disable-select;
} }
.texturized {
background-image: url('./images/bg.png');
}
.texturized-black {
background-image: url('./images/bg-black.png');
}

18
src/tuicss.scss
View File

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

10
src/variables.scss
View File

@ -29,3 +29,13 @@ $extra-large-and-up: "only screen and (min-width : #{$large-screen-up})";
$small-and-down: "only screen and (max-width : #{$small-screen})"; $small-and-down: "only screen and (max-width : #{$small-screen})";
$medium-and-down: "only screen and (max-width : #{$medium-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;