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

Border radius fix, forecast example, disabled classes, tabs example, buttons example

Browse Source
This commit is contained in:
Vinícius Biavatti 2021-01-06 20:34:44 +00:00
parent 2fcb4261e9
commit d91cd6a15a
20 changed files with 352 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -1,6 +1,15 @@
# TuiCss ChangeLog
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
#### 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

29
dist/tuicss.css vendored
View File

@ -587,6 +587,9 @@ input, select, textarea {
.no-padding {
padding: 0px !important; }
.no-border {
border: none !important; }
.content {
padding: 12px; }
@ -603,6 +606,9 @@ input, select, textarea {
.cursor-default {
cursor: default !important; }
.disabled {
cursor: not-allowed !important; }
/* Components */
.tui-button {
display: inline-block;
@ -614,11 +620,14 @@ input, select, textarea {
cursor: pointer;
text-align: center;
box-shadow: 10px 10px black;
border-radius: 0px;
user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-button.disabled {
text-decoration: line-through; }
.tui-button:active {
background-color: #00a8a8 !important;
@ -648,13 +657,16 @@ input[type=button] {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-checkbox.disabled {
color: #a8a8a8; }
.tui-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
top: 0px;
left: 0px; }
left: 0px;
pointer-events: none; }
.tui-checkbox span {
position: absolute;
@ -787,7 +799,10 @@ input[type=button] {
color: white;
outline: 0;
border: none;
padding: 1px; }
border-radius: 0px; }
.tui-input.disabled {
background-color: #a8a8a8;
color: black; }
.tui-input:focus {
background-color: yellow !important;
@ -888,13 +903,16 @@ input[type=button] {
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none; }
.tui-radio.disabled {
color: #a8a8a8; }
.tui-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
top: 0px;
left: 0px; }
left: 0px;
pointer-events: none; }
.tui-radio span {
position: absolute;
@ -1172,6 +1190,8 @@ input[type=button] {
.tui-tab.active {
background-color: #a8a8a8;
color: #0000a8; }
.tui-tab.disabled {
text-decoration: line-through; }
.tui-tab-content {
display: none; }
@ -1182,6 +1202,9 @@ input[type=button] {
padding: 0px;
color: yellow;
outline: none; }
.tui-textarea.disabled {
background-color: #a8a8a8;
color: black; }
.tui-window {
background-color: #0000a8;

6
dist/tuicss.js vendored
View File

@ -30,6 +30,12 @@ function tabsController() {
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');

2
dist/tuicss.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/tuicss.min.js vendored
View File

@ -1 +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){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){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}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()});
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){const t=setInterval(()=>{if(null===e)return void clearInterval(t);let o=e.getAttribute("data-format");const n=new Date,a=2===(n.getMonth()+"").length?n.getMonth()+1:"0"+(n.getMonth()+1),s=2===(n.getDay()+"").length?n.getDay()+1:"0"+(n.getDay()+1),c=n.getFullYear()+"",l=2===(n.getHours()+"").length?n.getHours():"0"+n.getHours(),i=(parseInt(l)+24)%"12"||"12",r=2===(n.getMinutes()+"").length?n.getMinutes():"0"+n.getMinutes(),d=2===(n.getSeconds()+"").length?n.getSeconds():"0"+n.getSeconds(),u=parseInt(l)>=12?"PM":"AM";o=(o=(o=(o=(o=(o=(o=(o=o.replace("M",a)).replace("d",s)).replace("y",c)).replace("H",l)).replace("h",i)).replace("m",r)).replace("s",d)).replace("a",u),e.innerHTML=o})}}t.length&&(e(),setInterval(e,1e3))}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()});

33
examples/buttons.html Normal file
View File

@ -0,0 +1,33 @@
<!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 red-168">Custom</button><br>
<button class="tui-button red-168 disabled" disabled style="margin-bottom: 5px;">Disabled</button><br>
</fieldset>
</div>
</div>
</body>
</html>

4
examples/chart.html
View File

@ -13,7 +13,7 @@
<div class="tui-window black-168 left-align">
<fieldset class="tui-fieldset">
<legend class="">Chart</legend>
<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>
@ -49,7 +49,7 @@
<div class="tui-window black-168 left-align">
<fieldset class="tui-fieldset">
<legend class="">Horizontal Bar Chart</legend>
<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>

172
examples/forecast.html Normal file
View File

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

28
examples/input.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="tui-bg-blue-black">
<html lang="en" class="tui-bg-blue-black tui-cursor">
<head>
<meta charset="UTF-8">
@ -8,7 +8,7 @@
<link rel="stylesheet" href="../dist/tuicss.min.css">
<style>
.tui-input {
width: 300px;
width: 430px;
}
</style>
</head>
@ -18,6 +18,7 @@
<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>
@ -25,6 +26,11 @@
<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" />
@ -39,8 +45,8 @@
<input type="checkbox" />
<span></span>
</label>
<label class="tui-checkbox">Third
<input type="checkbox" />
<label class="tui-checkbox disabled">Disabled
<input type="checkbox" disabled />
<span></span>
</label>
</fieldset>
@ -55,14 +61,17 @@
<input type="radio" name="radio" />
<span></span>
</label>
<label class="tui-radio">Third
<input type="radio" name="radio" />
<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%"></textarea>
<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%">
@ -70,6 +79,11 @@
<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>

40
examples/tabs.html Normal file
View File

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

8
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "tuicss",
"version": "2.0.0",
"version": "2.0.1",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -2301,9 +2301,9 @@
}
},
"gulp-rename": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz",
"integrity": "sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg==",
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-2.0.0.tgz",
"integrity": "sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==",
"dev": true
},
"gulp-sass": {

BIN
resources/forecast.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

4
src/components/button.scss
View File

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

4
src/components/checkbox.scss
View File

@ -8,6 +8,9 @@
color: white;
padding-left: 30px;
@include disable-select;
&.disabled {
color: rgb(168, 168, 168)
}
}
.tui-checkbox input {
position: absolute;
@ -15,6 +18,7 @@
cursor: pointer;
top: 0px;
left: 0px;
pointer-events: none;
}
.tui-checkbox span {
position: absolute;

6
src/components/input.scss
View File

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

4
src/components/radio.scss
View File

@ -8,6 +8,9 @@
color: white;
padding-left: 30px;
@include disable-select;
&.disabled {
color: rgb(168, 168, 168)
}
}
.tui-radio input {
position: absolute;
@ -15,6 +18,7 @@
cursor: pointer;
top: 0px;
left: 0px;
pointer-events: none;
}
.tui-radio span {
position: absolute;

3
src/components/tabs.scss
View File

@ -20,6 +20,9 @@
background-color: rgb(168, 168, 168);
color: rgb(0, 0, 168);
}
&.disabled {
text-decoration: line-through;
}
}
.tui-tab-content {
display: none;

4
src/components/textarea.scss
View File

@ -4,4 +4,8 @@
padding: 0px;
color: rgb(255, 255, 0);
outline: none;
&.disabled {
background-color: rgb(168, 168, 168);
color: black;
}
}

6
src/js/tuicss.js
View File

@ -30,6 +30,12 @@ function tabsController() {
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');

7
src/styles/util.scss
View File

@ -65,6 +65,9 @@
.no-padding {
padding: 0px!important;
}
.no-border {
border: none!important;
}
.content {
padding: 12px;
}
@ -77,4 +80,8 @@
}
.cursor-default {
cursor: default !important;
}
.disabled {
cursor: not-allowed!important;
}