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

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');

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