Merge pull request #31 from vinibiavatti1/develop

Develop to Master

CHANGELOG.md

@@ -1,6 +1,24 @@
 # TuiCss ChangeLog
 ### This is the change log of TuiCss. Here you can find the documentations of the feature of each released version
 
+#### 2.1.1
+
+Bugs
+- Fixed memory leak due to setinterval for clocks: https://github.com/vinibiavatti1/TuiCss/pull/29
+- Imported media queries classes to tuicss.scss: https://github.com/vinibiavatti1/TuiCss/issues/30
+
+Examples
+- Created the mobile example
+
+#### 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

dist/tuicss.css

@@ -49,6 +49,60 @@ hr {
 input, select, textarea {
   width: 200px; }
 
+/* Font (Options: 'Lucida Console' or 'DOS') */
+/* Characters */
+/* Theme */
+/* Responsive */
+/* Scrool */
+/* Grid */
+@media only screen and (max-width: 600px) {
+  .hide-on-small-only, .hide-on-small-and-down {
+    display: none !important; } }
+
+@media only screen and (max-width: 992px) {
+  .hide-on-med-and-down {
+    display: none !important; } }
+
+@media only screen and (min-width: 601px) {
+  .hide-on-med-and-up {
+    display: none !important; } }
+
+@media only screen and (min-width: 600px) and (max-width: 992px) {
+  .hide-on-med-only {
+    display: none !important; } }
+
+@media only screen and (min-width: 993px) {
+  .hide-on-large-only {
+    display: none !important; } }
+
+@media only screen and (min-width: 1201px) {
+  .hide-on-extra-large-only {
+    display: none !important; } }
+
+@media only screen and (min-width: 1201px) {
+  .show-on-extra-large {
+    display: block !important; } }
+
+@media only screen and (min-width: 993px) {
+  .show-on-large {
+    display: block !important; } }
+
+@media only screen and (min-width: 600px) and (max-width: 992px) {
+  .show-on-medium {
+    display: block !important; } }
+
+@media only screen and (max-width: 600px) {
+  .show-on-small {
+    display: block !important; } }
+
+@media only screen and (min-width: 601px) {
+  .show-on-medium-and-up {
+    display: block !important; } }
+
+@media only screen and (max-width: 992px) {
+  .show-on-medium-and-down {
+    display: block !important; } }
+
 /* Font (Options: 'Lucida Console' or 'DOS') */
 /* Characters */
 /* Theme */
@@ -587,6 +641,9 @@ input, select, textarea {
 .no-padding {
   padding: 0px !important; }
 
+.no-border {
+  border: none !important; }
+
 .content {
   padding: 12px; }
 
@@ -603,6 +660,9 @@ input, select, textarea {
 .cursor-default {
   cursor: default !important; }
 
+.disabled {
+  cursor: not-allowed !important; }
+
 /* Components */
 .tui-button {
   display: inline-block;
@@ -614,11 +674,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 +711,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 +853,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 +957,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 +1244,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 +1256,9 @@ input[type=button] {
   padding: 0px;
   color: yellow;
   outline: none; }
+  .tui-textarea.disabled {
+    background-color: #a8a8a8;
+    color: black; }
 
 .tui-window {
   background-color: #0000a8;

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');
@@ -93,45 +99,44 @@ function datetimeController() {
 
     // Kick off our clock interval stuff.
     datetimeInterval();
-    setInterval(datetimeInterval, 1000);
+
+    // Synchronize time and set interval to control the clocks
+    setTimeout(() => {
+        setInterval(datetimeInterval, 1000);
+    }, 1000 - new Date().getMilliseconds());
 
     function datetimeInterval() {
         for (const clock of clocks) {
-            // Set the interval.
-            const interval = setInterval(() => {
-                // Technically we should have already returned earlier in the code, but to be on the safe side.
-                if (clock === null) {
-                    clearInterval(interval);
-                    return;
-                }
+            if (clock === null) {
+                continue;
+            }
 
-                // Get the format we want to display in the element.
-                let format = clock.getAttribute('data-format');
+            // Get the format we want to display in the element.
+            let format = clock.getAttribute('data-format');
 
-                // parse out the date and time into constants.
-                const today  = new Date();
-                const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-                const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-                const year   = today.getFullYear() + '';
-                const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
-                const hour12 = (parseInt(hour) + 24) % '12' || '12';
-                const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
-                const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
-                const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
+            // parse out the date and time into constants.
+            const today  = new Date();
+            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
+            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
+            const year   = today.getFullYear() + '';
+            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const hour12 = (parseInt(hour) + 24) % '12' || '12';
+            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
-                // Replace based on the format.
-                format = format.replace('M', month);
-                format = format.replace('d', day);
-                format = format.replace('y', year);
-                format = format.replace('H', hour);
-                format = format.replace('h', hour12);
-                format = format.replace('m', minute);
-                format = format.replace('s', second);
-                format = format.replace('a', ampm);
+            // Replace based on the format.
+            format = format.replace('M', month);
+            format = format.replace('d', day);
+            format = format.replace('y', year);
+            format = format.replace('H', hour);
+            format = format.replace('h', hour12);
+            format = format.replace('m', minute);
+            format = format.replace('s', second);
+            format = format.replace('a', ampm);
 
-                // Show it in the element.
-                clock.innerHTML = format;
-            });
+            // Show it in the element.
+            clock.innerHTML = format;
         }
     }
 }

dist/tuicss.min.js

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

examples/buttons.html

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

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>

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>

examples/input.html

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

examples/mobile.html

@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en" class="no-tui-scroll">
+
+<head>
+    <meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mobile Example</title>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        .content {
+            padding: 40px 0px;
+        }
+        .post-img {
+            width: 100%; 
+            border: 4px solid black;
+        }
+        .add-btn {
+            bottom: 0px; 
+            left: 0; 
+            right: 0;
+            margin-left: auto; 
+            margin-right: auto; 
+            z-index: 999;
+            width: 50px;
+            height: 50px;
+        }
+        .post {
+            margin-bottom: 5px;
+            width: 100%;
+        }
+    </style>
+</head>
+
+<body class="tui-bg-blue-black relative">
+	<!-- Sidenav -->
+	<nav class="tui-sidenav absolute">
+		<ul>
+			<li>
+				<a href="#!">
+					<span class="red-168-text">P</span>rofile
+					<span class="tui-shortcut">ctrl+p</span>
+				</a>
+			</li>
+			<li>
+				<a href="#!">
+					<span class="red-168-text">S</span>earch
+					<span class="tui-shortcut">ctrl+s</span>
+				</a>
+			</li>
+			<li>
+				<a href="#!">
+					S<span class="red-168-text">t</span>ory
+					<span class="tui-shortcut">ctrl+t</span>
+				</a>
+			</li>
+		</ul>
+	</nav>
+
+	<!-- Navbar -->
+	<nav class="tui-nav">
+		<span class="tui-datetime" data-format="h:m:s a"></span>
+		<ul>
+			<li class="tui-sidenav-button red-168-text">≡</li>
+			<li class="tui-dropdown hide-on-med-and-down">
+				<span class="red-168-text">P</span>rofile
+				<div class="tui-dropdown-content">
+					<ul>
+						<li>
+							<a href="#!">
+								<span class="red-168-text">A</span>vatar
+							</a>
+						</li>
+						<li>
+							<a href="#!">
+								P<span class="red-168-text">r</span>eferences
+								<span class="tui-shortcut">F3</span>
+							</a>
+						</li>
+						<li class="tui-dropdown block">
+							<span class="right">►</span>
+							<span class="red-168-text">M</span>ore
+							<div class="tui-dropdown-content">
+								<ul>
+									<li>
+										<a href="#!">
+											<span class="red-168-text">I</span>diom
+										</a>
+									</li>
+									<li>
+										<a href="#!">
+											<span class="red-168-text">B</span>locked Users
+										</a>
+									</li>
+								</ul>
+							</div>
+						</li>
+
+						<div class="tui-black-divider"></div>
+						<li>
+							<a href="#!">
+								<span class="red-168-text">S</span>tories
+								<span class="tui-shortcut">F10</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</li>
+			<li class="tui-dropdown hide-on-med-and-down">
+				<span class="red-168-text">H</span>elp
+			</li>
+		</ul>
+	</nav>
+
+	<!-- Edit panel -->
+	<div class="content container">
+        <div class="row">
+            <div class="col s12 m12 l12 white-text center">
+                <h3>InstaTui</h3>
+                <hr>
+                The best old-school social network<br>
+                <span class="orange-255 black-text hide-on-small-only">(Try this in a mobile view)</span>
+                <span class="green-255 black-text hide-on-med-and-up">(√ Mobile view)</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        John Due says:
+                        <hr>
+                        <img class="post-img" src="resources/winxp.png" />
+                        The winxp bg is amazing!
+                    </fieldset>
+                </div>
+            </div>
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        Jane Due says:
+                        <hr>
+                        <img class="post-img" src="resources/disks.png" />
+                        Bought my first 2 PC games!
+                    </fieldset>
+                </div>
+            </div>
+            <div class="col s12 m4 l4">
+                <div class="post tui-window">
+                    <fieldset class="tui-fieldset">
+                        Astronaut says:
+                        <hr>
+                        <img class="post-img" src="resources/step.png" />
+                        One small step for man one giant leap for mankind
+                    </fieldset>
+                </div>
+            </div>
+        </div>
+	</div>
+
+	<!-- Status bar -->
+	<div class="tui-statusbar fixed" style="bottom: 0px;">
+		<ul>
+            <li class="right" style="margin-right: 10px;"><a href="#!">Search</a></li>
+			<li><a href="#!">Profile</a></li>
+		</ul>
+	</div>
+
+    <button class="tui-button red-168 white-255-text fixed add-btn">+</button>
+</body>
+
+</html>

examples/tabs.html

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

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "tuicss",
-  "version": "2.0.0",
+  "version": "2.1.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": {
@@ -2433,9 +2433,9 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.4",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.4.tgz",
-      "integrity": "sha512-pzXIvANXEFrc5oFFXRMkbLPQ2rXRoDERwDLyrcUxGhaZhgP54BBSl9Oheh7Vv0T090cszWBxPjkQQ5Sq1PbBRQ==",
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
     "http-signature": {
@@ -2870,9 +2870,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
     "loud-rejection": {
@@ -3483,9 +3483,9 @@
       "dev": true
     },
     "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
     "path-root": {
@@ -4846,9 +4846,9 @@
       "dev": true
     },
     "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz",
+      "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==",
       "dev": true
     },
     "yallist": {
@@ -4879,12 +4879,13 @@
       }
     },
     "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.1.tgz",
+      "integrity": "sha512-wpav5XYiddjXxirPoCTUPbqM0PXvJ9hiBMvuJgInvo4/lAOTZzUprArw17q2O1P2+GHhbBr18/iQwjL5Z9BqfA==",
       "dev": true,
       "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^3.0.0",
+        "object.assign": "^4.1.0"
       }
     }
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuicss",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style",
   "keywords": [
     "tui",

src/components/button.scss

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

src/components/checkbox.scss

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

src/components/input.scss

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

src/components/radio.scss

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

src/components/tabs.scss

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

src/components/textarea.scss

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

src/js/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');
@@ -93,45 +99,44 @@ function datetimeController() {
 
     // Kick off our clock interval stuff.
     datetimeInterval();
-    setInterval(datetimeInterval, 1000);
+
+    // Synchronize time and set interval to control the clocks
+    setTimeout(() => {
+        setInterval(datetimeInterval, 1000);
+    }, 1000 - new Date().getMilliseconds());
 
     function datetimeInterval() {
         for (const clock of clocks) {
-            // Set the interval.
-            const interval = setInterval(() => {
-                // Technically we should have already returned earlier in the code, but to be on the safe side.
-                if (clock === null) {
-                    clearInterval(interval);
-                    return;
-                }
+            if (clock === null) {
+                continue;
+            }
 
-                // Get the format we want to display in the element.
-                let format = clock.getAttribute('data-format');
+            // Get the format we want to display in the element.
+            let format = clock.getAttribute('data-format');
 
-                // parse out the date and time into constants.
-                const today  = new Date();
-                const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
-                const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
-                const year   = today.getFullYear() + '';
-                const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
-                const hour12 = (parseInt(hour) + 24) % '12' || '12';
-                const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
-                const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
-                const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
+            // parse out the date and time into constants.
+            const today  = new Date();
+            const month  = (today.getMonth() + '').length === 2 ? today.getMonth() + 1 : '0' + (today.getMonth() + 1);
+            const day    = (today.getDay() + '').length === 2 ? today.getDay() + 1 : '0' + (today.getDay() + 1);
+            const year   = today.getFullYear() + '';
+            const hour   = (today.getHours() + '').length === 2 ? today.getHours() : '0' + today.getHours();
+            const hour12 = (parseInt(hour) + 24) % '12' || '12';
+            const minute = (today.getMinutes() + '').length === 2 ? today.getMinutes() : '0' + today.getMinutes();
+            const second = (today.getSeconds() + '').length === 2 ? today.getSeconds() : '0' + today.getSeconds();
+            const ampm   = parseInt(hour) >= 12 ? 'PM' : 'AM';
 
-                // Replace based on the format.
-                format = format.replace('M', month);
-                format = format.replace('d', day);
-                format = format.replace('y', year);
-                format = format.replace('H', hour);
-                format = format.replace('h', hour12);
-                format = format.replace('m', minute);
-                format = format.replace('s', second);
-                format = format.replace('a', ampm);
+            // Replace based on the format.
+            format = format.replace('M', month);
+            format = format.replace('d', day);
+            format = format.replace('y', year);
+            format = format.replace('H', hour);
+            format = format.replace('h', hour12);
+            format = format.replace('m', minute);
+            format = format.replace('s', second);
+            format = format.replace('a', ampm);
 
-                // Show it in the element.
-                clock.innerHTML = format;
-            });
+            // Show it in the element.
+            clock.innerHTML = format;
         }
     }
 }

src/styles/util.scss

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

src/tuicss.scss

@@ -1,5 +1,6 @@
 /* Styles */
 @import './styles/global.scss';
+@import './styles/media.scss';
 @import './styles/color.scss';
 @import './styles/util.scss';