Working on removing Material Design 2

bbalganjjm · Jun 25, 2024 · c0de679 · c0de679
1 parent bfc3a34
commit c0de679
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 14 deletions.
diff --git a/src/main/resources/static/css/common.pub.css b/src/main/resources/static/css/common.pub.css
@@ -19,7 +19,7 @@
     border-radius: var(--njs-border-radius-m);
     background-color: var(--md-sys-color-surface-container-low);
 }
-.view_context__ .search-panel>ul>li>label>span {
+.view_context__ .search-panel>ul>li>label>span:first-child {
     display: block;
     color: var(--md-sys-color-on-surface-variant);
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
@@ -55,7 +55,7 @@
     border-radius: var(--njs-border-radius-m);
     background-color: var(--md-sys-color-surface-container-low);
 }
-.view_context__ ul.form__>li>label>span {
+.view_context__ ul.form__>li>label>span:first-child {
     display: block;
     color: var(--md-sys-color-on-surface-variant);
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
@@ -109,7 +109,6 @@ thead:first-child  tr:first-child th:last-child {
 .list__>li:first-child {
     border-radius: var(--njs-border-radius-l) var(--njs-border-radius-l) 0 0;
 }
-
 .list__>li:last-child {
     border-radius: 0 0 var(--njs-border-radius-l) var(--njs-border-radius-l);
 }
diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html
@@ -139,9 +139,10 @@
                     </label>
                 </li>
                 <li>
-                    <label>
-                        <span>Attachments</span>
-                        <button id="btnFile">File</button>
+                    <label for="isActive"><span>Active</span></label>
+                    <label class="toggle-switch">
+                        <input id="isActive" type="checkbox">
+                        <span class="slider"></span>
                     </label>
                 </li>
             </ul>

diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html
@@ -146,9 +146,10 @@
                 </label>
             </li>
             <li>
-                <label>
-                    <span>Attachments</span>
-                    <button id="btnFile">File</button>
+                <label for="isActive"><span>Active</span></label>
+                <label class="toggle-switch">
+                    <input id="isActive" type="checkbox">
+                    <span class="slider"></span>
                 </label>
             </li>
         </ul>

diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html
@@ -145,9 +145,10 @@
                     </label>
                 </li>
                 <li>
-                    <label>
-                        <span>Attachments</span>
-                        <button id="btnFile">File</button>
+                    <label for="isActive"><span>Active</span></label>
+                    <label class="toggle-switch">
+                        <input id="isActive" type="checkbox">
+                        <span class="slider"></span>
                     </label>
                 </li>
             </ul>

diff --git a/src/main/resources/static/js/natural_js/css/natural.ui.css b/src/main/resources/static/js/natural_js/css/natural.ui.css
@@ -673,7 +673,7 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
 }
 
 .thead_wrap__ thead th .asc__ {
-    color: blue;
+    color: var(--md-sys-color-on-primary-container);
 }
 
 .thead_wrap__ thead th .desc__ {
@@ -795,7 +795,7 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
 }
 
 .grid_more_popup_contents__ > .grid_more_contents__ > table {
-	width: auto;
+    width: auto;
 }
 
 .grid_more_popup_contents__ > .grid_more_contents__ th {
@@ -1819,4 +1819,68 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
 .context_wrap__:hover::-webkit-scrollbar-thumb,
 .grid_wrap__::-webkit-scrollbar-thumb {
     background-color: var(--md-sys-color-surface-container-highest);
+}
+
+/* Checkbox toggle switch */
+/* HTML Template
+<label class="toggle-switch">
+    <input id="${id}" type="checkbox">
+    <span class="slider"></span>
+</label>
+ */
+.toggle-switch {
+    --njs-toggle-switch-height: 26px;
+    position: relative;
+    display: inline-block;
+    width: calc(var(--njs-toggle-switch-height) * 2);
+    height: var(--njs-toggle-switch-height);
+}
+.toggle-switch input {
+    display: none;
+}
+.toggle-switch .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--md-sys-color-primary-container);
+    transition: var(--njs-motion-duration-fast);
+    border-radius: 999999px;
+}
+.toggle-switch .slider:before {
+    position: absolute;
+    content: "";
+    height: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-height) / 4));
+    width: calc(var(--njs-toggle-switch-height) - (var(--njs-toggle-switch-height) / 4));
+    left: calc(((var(--njs-toggle-switch-height) / 4) / 2) + 1px);
+    bottom: calc(((var(--njs-toggle-switch-height) / 4) / 2) + 0.5px);
+    background-color: var(--md-sys-color-inverse-on-surface);
+    transition: var(--njs-motion-duration-normal);
+    border-radius: 999999px;
+}
+.toggle-switch input:checked+.slider {
+    background-color: var(--md-sys-color-primary);
+}
+.toggle-switch input:focus+.slider {
+    box-shadow: 0 0 1px var(--md-sys-color-shadow);
+}
+.toggle-switch input:checked+.slider:before {
+    transform: translateX(calc(var(--njs-toggle-switch-height) - 1px));
+}
+.toggle-switch .slider::after {
+    content: "OFF";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: calc(100% - var(--njs-toggle-switch-height));
+    transform: translateY(-50%);
+    font-size: 75%;
+    color: var(--md-sys-color-on-primary-container);
+}
+.toggle-switch input:checked+.slider::after {
+    content: "ON";
+    left: calc((var(--njs-toggle-switch-height) / 4) + ((var(--njs-toggle-switch-height) / 4) / 2));
+    color: var(--md-sys-color-on-primary);
 }