Merge pull request #25 from vinibiavatti1/develop

Develop to Master
vinibiavatti1 · Jun 4, 2021 · b7ef555 · b7ef555
2 parents b214b7e + 5dbfa6d
commit b7ef555
Show file tree

Hide file tree

Showing 19 changed files with 348 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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

diff --git a/dist/tuicss.css b/dist/tuicss.css
@@ -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;

diff --git a/dist/tuicss.js b/dist/tuicss.js
@@ -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');

diff --git a/dist/tuicss.min.css b/dist/tuicss.min.css
diff --git a/dist/tuicss.min.js b/dist/tuicss.min.js
diff --git a/examples/buttons.html b/examples/buttons.html
@@ -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>
diff --git a/examples/chart.html b/examples/chart.html
@@ -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>

diff --git a/examples/forecast.html b/examples/forecast.html
@@ -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>