Skip to content

Commit b7ef555

Browse files
vinibiavatti1vinibiavatti1
authored
Merge pull request #25 from vinibiavatti1/develop
Develop to Master
2 parents b214b7e + 5dbfa6d commit b7ef555

19 files changed

+348
-15
lines changed

Diff for: ‎CHANGELOG.md

+9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
# TuiCss ChangeLog
22
### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
33

4+
#### 2.1.0
5+
- .disabled classes
6+
- Fixed the default radius border of inputs
7+
- Removed pointer events of checkbox and radio button
8+
- Tabs and buttons example pages
9+
- Remove padding of inputs
10+
- .no-border util
11+
- Forecast example
12+
413
#### 2.0.0
514
- Jquery removed (Now use vanilla Javascript)
615
- Chart example page

Diff for: ‎dist/tuicss.css

+26-3
Original file line numberDiff line numberDiff line change
@@ -587,6 +587,9 @@ input, select, textarea {
587587
.no-padding {
588588
padding: 0px !important; }
589589

590+
.no-border {
591+
border: none !important; }
592+
590593
.content {
591594
padding: 12px; }
592595

@@ -603,6 +606,9 @@ input, select, textarea {
603606
.cursor-default {
604607
cursor: default !important; }
605608

609+
.disabled {
610+
cursor: not-allowed !important; }
611+
606612
/* Components */
607613
.tui-button {
608614
display: inline-block;
@@ -614,11 +620,14 @@ input, select, textarea {
614620
cursor: pointer;
615621
text-align: center;
616622
box-shadow: 10px 10px black;
623+
border-radius: 0px;
617624
user-select: none;
618625
-webkit-user-select: none;
619626
-khtml-user-select: none;
620627
-moz-user-select: none;
621628
-ms-user-select: none; }
629+
.tui-button.disabled {
630+
text-decoration: line-through; }
622631

623632
.tui-button:active {
624633
background-color: #00a8a8 !important;
@@ -648,13 +657,16 @@ input[type=button] {
648657
-khtml-user-select: none;
649658
-moz-user-select: none;
650659
-ms-user-select: none; }
660+
.tui-checkbox.disabled {
661+
color: #a8a8a8; }
651662

652663
.tui-checkbox input {
653664
position: absolute;
654665
opacity: 0;
655666
cursor: pointer;
656667
top: 0px;
657-
left: 0px; }
668+
left: 0px;
669+
pointer-events: none; }
658670

659671
.tui-checkbox span {
660672
position: absolute;
@@ -787,7 +799,10 @@ input[type=button] {
787799
color: white;
788800
outline: 0;
789801
border: none;
790-
padding: 1px; }
802+
border-radius: 0px; }
803+
.tui-input.disabled {
804+
background-color: #a8a8a8;
805+
color: black; }
791806

792807
.tui-input:focus {
793808
background-color: yellow !important;
@@ -888,13 +903,16 @@ input[type=button] {
888903
-khtml-user-select: none;
889904
-moz-user-select: none;
890905
-ms-user-select: none; }
906+
.tui-radio.disabled {
907+
color: #a8a8a8; }
891908

892909
.tui-radio input {
893910
position: absolute;
894911
opacity: 0;
895912
cursor: pointer;
896913
top: 0px;
897-
left: 0px; }
914+
left: 0px;
915+
pointer-events: none; }
898916

899917
.tui-radio span {
900918
position: absolute;
@@ -1172,6 +1190,8 @@ input[type=button] {
11721190
.tui-tab.active {
11731191
background-color: #a8a8a8;
11741192
color: #0000a8; }
1193+
.tui-tab.disabled {
1194+
text-decoration: line-through; }
11751195

11761196
.tui-tab-content {
11771197
display: none; }
@@ -1182,6 +1202,9 @@ input[type=button] {
11821202
padding: 0px;
11831203
color: yellow;
11841204
outline: none; }
1205+
.tui-textarea.disabled {
1206+
background-color: #a8a8a8;
1207+
color: black; }
11851208

11861209
.tui-window {
11871210
background-color: #0000a8;

Diff for: ‎dist/tuicss.js

+6
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ function tabsController() {
3030
for (const tab of tabs) {
3131
// Add click listeners to them.
3232
tab.addEventListener('click', function (e) {
33+
34+
// Check if the clicked tab is disabled
35+
if(e.target.classList.contains("disabled")) {
36+
return;
37+
}
38+
3339
// Remove the 'active' class from any and all tabs.
3440
for (const otherTab of tabs) {
3541
otherTab.classList.remove('active');

Diff for: ‎dist/tuicss.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎dist/tuicss.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎examples/buttons.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="tui-bg-blue-black">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Buttons Example</title>
7+
<script src="../dist/tuicss.min.js"></script>
8+
<link rel="stylesheet" href="../dist/tuicss.min.css">
9+
<style>
10+
.tui-button {
11+
width: 100% !important;
12+
margin-bottom: 20px;
13+
}
14+
</style>
15+
</head>
16+
<style>
17+
</style>
18+
<body>
19+
<div class="center" style="margin-top: 100px;">
20+
<div class="tui-window blue-168" style="width: 200px;">
21+
<fieldset class="tui-fieldset">
22+
<legend>Buttons</legend>
23+
<button class="tui-button">Button</button><br>
24+
<input type="button" class="tui-button" value="Input" /><br>
25+
<a href="#!" class="tui-button">Anchor</a><br>
26+
<button class="tui-button red-168">Custom</button><br>
27+
<button class="tui-button red-168 disabled" disabled style="margin-bottom: 5px;">Disabled</button><br>
28+
</fieldset>
29+
</div>
30+
</div>
31+
</body>
32+
33+
</html>

Diff for: ‎examples/chart.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<div class="tui-window black-168 left-align">
1515
<fieldset class="tui-fieldset">
16-
<legend class="">Chart</legend>
16+
<legend class="">Vertical Chart</legend>
1717
<div class="tui-chart-vertical" style="width: 500px; height: 200px;">
1818
<div class="tui-chart-display">
1919
<div class="tui-chart-value red-168 animated" style="height: 80%;">80%</div>
@@ -49,7 +49,7 @@
4949

5050
<div class="tui-window black-168 left-align">
5151
<fieldset class="tui-fieldset">
52-
<legend class="">Horizontal Bar Chart</legend>
52+
<legend class="">Horizontal Chart</legend>
5353
<div class="tui-chart-horizontal" style="width: 500px; height: 200px;">
5454
<div class="tui-chart-display">
5555
<div class="tui-chart-value red-168" style="width: 80%;">80%</div>

Diff for: ‎examples/forecast.html

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Forecast Example</title>
7+
<script src="../dist/tuicss.min.js"></script>
8+
<link rel="stylesheet" href="../dist/tuicss.min.css">
9+
<style>
10+
th, td {
11+
padding: 10px!important;
12+
border: none!important;
13+
}
14+
.tui-progress-bar {
15+
margin-bottom: -4px;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div class="tui-screen-800-600 bordered black-255" style="padding: 2px;">
22+
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
23+
FORECAST 1.0
24+
</div>
25+
<br>
26+
<table class="tui-table full-width no-border">
27+
<thead class="white-255-text tui-border-double orange-168-border" style="margin-bottom: 5px;">
28+
<tr class="left-align">
29+
<th>#</th>
30+
<th>LOCATION</th>
31+
<th>TEMPERATURE</th>
32+
<th>STATUS</th>
33+
</tr>
34+
</thead>
35+
<tbody class="tui-border-double orange-168-border">
36+
<tr>
37+
<td class="red-168-text">1</td>
38+
<td>Lisbon</td>
39+
<td>
40+
<span class="green-168-text">&nbsp;8.0</span>
41+
[
42+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
43+
<span class="tui-progress red-255" style="width: 58%"></span>
44+
</div>
45+
]
46+
</td>
47+
<td class="blue-255-text">COLD</td>
48+
</tr>
49+
<tr>
50+
<td class="red-168-text">2</td>
51+
<td>Vancouver</td>
52+
<td>
53+
<span class="green-168-text">&nbsp;9.0</span>
54+
[
55+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
56+
<span class="tui-progress red-255" style="width: 59%"></span>
57+
</div>
58+
]
59+
</td>
60+
<td class="blue-255-text">COLD</td>
61+
</tr>
62+
<tr>
63+
<td class="red-168-text">3</td>
64+
<td>Rio</td>
65+
<td>
66+
<span class="green-168-text">31.0</span>
67+
[
68+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
69+
<span class="tui-progress red-255" style="width: 81%"></span>
70+
</div>
71+
]
72+
</td>
73+
<td class="yellow-255-text">WARM</td>
74+
</tr>
75+
<tr>
76+
<td class="red-168-text">4</td>
77+
<td>Sydney</td>
78+
<td>
79+
<span class="green-168-text">22.0</span>
80+
[
81+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
82+
<span class="tui-progress red-255" style="width: 72%"></span>
83+
</div>
84+
]
85+
</td>
86+
<td class="yellow-255-text">WARM</td>
87+
</tr>
88+
<tr>
89+
<td class="red-168-text">5</td>
90+
<td>New York</td>
91+
<td>
92+
<span class="green-168-text">&nbsp;7.0</span>
93+
[
94+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
95+
<span class="tui-progress red-255" style="width: 57%"></span>
96+
</div>
97+
]
98+
</td>
99+
<td class="blue-255-text">COLD</td>
100+
</tr>
101+
<tr>
102+
<td class="red-168-text">6</td>
103+
<td>London</td>
104+
<td>
105+
<span class="green-168-text">&nbsp;6.0</span>
106+
[
107+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
108+
<span class="tui-progress red-255" style="width: 56%"></span>
109+
</div>
110+
]
111+
</td>
112+
<td class="blue-255-text">COLD</td>
113+
</tr>
114+
<tr>
115+
<td class="red-168-text">7</td>
116+
<td>Paris</td>
117+
<td>
118+
<span class="green-168-text">&nbsp;4.0</span>
119+
[
120+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
121+
<span class="tui-progress red-255" style="width: 54%"></span>
122+
</div>
123+
]
124+
</td>
125+
<td class="cyan-255-text">VERY COLD</td>
126+
</tr>
127+
<tr>
128+
<td class="red-168-text">8</td>
129+
<td>Casablanca</td>
130+
<td>
131+
<span class="green-168-text">17.0</span>
132+
[
133+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
134+
<span class="tui-progress red-255" style="width: 67%"></span>
135+
</div>
136+
]
137+
</td>
138+
<td class="green-168-text">NORMAL</td>
139+
</tr>
140+
<tr>
141+
<td class="red-168-text">9</td>
142+
<td>Reykjavik</td>
143+
<td>
144+
<span class="green-168-text">-1.0</span>
145+
[
146+
<div class="tui-progress-bar inline-block tui-bg-red-black" style="width: 350px;">
147+
<span class="tui-progress red-255" style="width: 49%"></span>
148+
</div>
149+
]
150+
</td>
151+
<td class="cyan-255-text">VERY COLD</td>
152+
</tr>
153+
</tbody>
154+
</table>
155+
<div class="purple-168 full-width white-text" style="padding: 0px 10px; margin-top: 2px;">
156+
<span class="red-168">HIGH</span>: Rio 31.0<br>
157+
<span class="cyan-168">LESS</span>: Reykjavik -1.0
158+
</div>
159+
<br>
160+
<div class="tui-window full-width no-shadow black">
161+
<fieldset class="tui-fieldset center">
162+
<button class="tui-button left">Previous</button>
163+
<span class="center">9/201 records</span>
164+
<button class="tui-button right">Next</button>
165+
</fieldset>
166+
</div>
167+
<div class="red-168 full-width white-text" style="padding: 0px 10px;">
168+
FORECAST 1.0
169+
</div>
170+
</div>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)