Working on removing Material Design 2

bbalganjjm · Jun 24, 2024 · fea2cce · fea2cce
1 parent 50d0df3
commit fea2cce
Show file tree

Hide file tree

Showing 12 changed files with 95 additions and 28 deletions.
diff --git a/src/main/resources/static/css/common.css b/src/main/resources/static/css/common.css
@@ -43,19 +43,20 @@ html [lang] {
 }
 
 /* input element styles */
-input[type='text'], input[type='number'], input[type='tel'], input[type='password'], select, textarea {
+input:not([type='radio'], [type='checkbox']), select, textarea {
     color: var(--md-sys-color-on-surface);
     vertical-align: middle;
     box-sizing: border-box;
     width: 100%;
     padding: 3px;
     border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--njs-border-radius-m);
     line-height: 19px;
     margin: 2px 0;
 }
 
-input[type='text']:hover, input[type='number']:hover, input[type='tel']:hover, input[type='password']:hover, select:hover, textarea:hover,
-input[type='text']:focus, input[type='number']:focus, input[type='tel']:focus, input[type='password']:focus, select:focus, textarea:focus {
+input:not([type='radio'], [type='checkbox']):hover, select:hover, textarea:hover,
+input:not([type='radio'], [type='checkbox']):focus, select:focus, textarea:focus {
     border: 1px solid var(--md-sys-color-outline-variant);
 }
 
@@ -98,7 +99,6 @@ textarea[disabled]:focus {
 
 input[type='radio'], input[type='checkbox'] {
     vertical-align: middle;
-    border: none;
 }
 
 .select_input_label__ input[type='radio'], .select_input_label__ input[type='checkbox'] {
@@ -171,6 +171,14 @@ th, tfoot td {
     list-style: none;
 }
 
+.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);
+}
+
 .list__>li {
     margin: 0;
     padding: 0px 5px;
@@ -342,10 +350,6 @@ th, tfoot td {
     margin: 0 0 10px 0;
 }
 
-.view_context__ *:last-child {
-    /*margin: 0;*/
-}
-
 .view_context__ .pagination-box {
     margin-top: 16px;
 }

diff --git a/src/main/resources/static/css/common.pub.css b/src/main/resources/static/css/common.pub.css
@@ -1,11 +1,16 @@
 @charset "utf-8";
 
+/* search-panel */
+.view_context__ form:not(.select_input_container__) label {
+    white-space: nowrap;
+}
 .view_context__ .search-panel>ul {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     margin: 0 0 10px 0;
     border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--njs-border-radius-l);
 }
 .view_context__ .search-panel>ul>li {
     list-style: none;
@@ -16,24 +21,28 @@
 }
 .view_context__ .search-panel>ul>li>label>span {
     display: block;
+    color: var(--md-sys-color-on-surface-variant);
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
     padding-bottom: 2px;
     margin-bottom: 5px;
     font-size: 90%;
 }
 
+/* button-panel */
 .view_context__ .button-panel {
     text-align: right;
     margin-bottom: 10px;
     line-height: 40px;
 }
 
+/* N.form */
 .view_context__ ul.form__ {
     display: flex;
     flex-wrap: wrap;
     padding: 5px;
     margin: 0;
     border: 1px solid var(--md-sys-color-outline-variant);
+    border-radius: var(--njs-border-radius-l);
 }
 .view_context__ ul.form__>li {
     flex: 22%;
@@ -45,8 +54,49 @@
 }
 .view_context__ ul.form__>li>label>span {
     display: block;
+    color: var(--md-sys-color-on-surface-variant);
     border-bottom: 1px solid var(--md-sys-color-outline-variant);
     padding-bottom: 2px;
     margin-bottom: 5px;
     font-size: 90%;
+}
+
+/* N.grid */
+.grid_wrap__ {
+    border-radius: var(--njs-border-radius-l) var(--njs-border-radius-l) 0 0;
+}
+.grid_wrap__ > .thead_wrap__ table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border-top-left-radius: var(--njs-border-radius-l);
+    border-top-right-radius: var(--njs-border-radius-l);
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-bottom: none;
+}
+.grid_wrap__ > .thead_wrap__ table thead tr:first-child th:first-child {
+    border-top-left-radius: var(--njs-border-radius-l);
+}
+.grid_wrap__ > .thead_wrap__ table thead tr:first-child th:last-child {
+    border-top-right-radius: var(--njs-border-radius-l);
+}
+.grid_wrap__ > .thead_wrap__ table thead tr th {
+    border-top-style: hidden;
+}
+.grid_wrap__ > .tbody_wrap__ table {
+    border-collapse: separate;
+    border-spacing: 0;
+    border: 1px solid var(--md-sys-color-outline-variant);
+    border-top: none;
+}
+.tbody_wrap__>.grid__>tbody td.empty__ {
+    border-bottom: none;
+}
+.grid_container__ .grid_wrap__ {
+    border-top-left-radius: 0;
+}
+thead:first-child  tr:first-child th:first-child {
+    border-top-left-radius: var(--njs-border-radius-l);
+}
+thead:first-child  tr:first-child th:last-child {
+    border-top-right-radius: var(--njs-border-radius-l);
 }
diff --git a/src/main/resources/static/html/com/app/sample/type0101.html b/src/main/resources/static/html/com/app/sample/type0101.html
@@ -9,7 +9,7 @@
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch">조회</button>
+        <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
         <button id="btnExcel">엑셀</button>
     </div>
 

diff --git a/src/main/resources/static/html/com/app/sample/type0201.html b/src/main/resources/static/html/com/app/sample/type0201.html
@@ -9,7 +9,7 @@
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch">조회</button>
+        <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
         <button id="btnExcelImport">엑셀임포트</button>
         <button id="btnExcel">엑셀다운로드</button>
         <button id="btnAdd">추가</button>

diff --git a/src/main/resources/static/html/com/app/sample/type0301.html b/src/main/resources/static/html/com/app/sample/type0301.html
@@ -9,7 +9,7 @@
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch">조회</button>
+        <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
         <button id="btnExcel">엑셀</button>
     </div>
 

diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html
@@ -13,7 +13,7 @@
     <div class="flex-horizental">
         <div style="max-width: 33%;">
             <div class="button-panel">
-                <button id="btnSearch">조회</button>
+                <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
                 <button id="btnSave">저장</button>
             </div>
             <table id="master" class="grid__">
@@ -99,14 +99,14 @@
                 <li>
                     <label>
                         <span>Gender</span>
-                        <input id="gender" type="radio">
                     </label>
+                    <input id="gender" type="radio">
                 </li>
                 <li>
                     <label>
                         <span>Favorite Fruit</span>
-                        <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
                     </label>
+                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
                 </li>
                 <li>
                     <label>
@@ -179,7 +179,7 @@
                 autoUnbind : true
             },
             "p.grid.master" : {
-                height : 500,
+                height : 450,
                 select : true,
                 selectScroll : false,
                 onSelect : function(index, rowEle, data, beforeRow, e) {

diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html
@@ -11,7 +11,7 @@
     </div>
 
     <div class="button-panel">
-        <button id="btnSearch">조회</button>
+        <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
         <button id="btnExcel">엑셀</button>
         <button id="btnSave">저장</button>
     </div>
@@ -106,14 +106,14 @@
             <li>
                 <label>
                     <span>Gender</span>
-                    <input id="gender" type="radio">
                 </label>
+                <input id="gender" type="radio">
             </li>
             <li>
                 <label>
                     <span>Favorite Fruit</span>
-                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
                 </label>
+                <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
             </li>
             <li>
                 <label>

diff --git a/src/main/resources/static/html/com/app/sample/type04P0.html b/src/main/resources/static/html/com/app/sample/type04P0.html
@@ -18,7 +18,7 @@
     </div>
 
     <div class="button-panel">
-        <button id="btnSearch">조회</button>
+        <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
     </div>
 
     <table id="master" class="grid__">

diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html
@@ -10,7 +10,7 @@
     <div class="flex-horizental">
         <div style="flex: 1">
             <div class="button-panel">
-                <button id="btnSearch">조회</button>
+                <button id="btnSearch" data-opts='{ "color": "primary" }'>조회</button>
                 <button id="btnExcelList">엑셀</button>
             </div>
             <ul id="codeMaster" class="list__">
@@ -105,14 +105,14 @@
                 <li>
                     <label>
                         <span>Gender</span>
-                        <input id="gender" type="radio">
                     </label>
+                    <input id="gender" type="radio">
                 </li>
                 <li>
                     <label>
                         <span>Favorite Fruit</span>
-                        <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
                     </label>
+                    <input id="favoriteFruit" type="checkbox" data-validate='[["required"]]'>
                 </li>
                 <li>
                     <label>
@@ -196,7 +196,7 @@
             }
         },
         "p.grid.master" : {
-            height : 500,
+            height : 450,
             select : true,
             selectScroll : false,
             onSelect : function(index, rowEle, data, beforeRow, e) {

diff --git a/src/main/resources/static/html/com/app/sample/type0601.html b/src/main/resources/static/html/com/app/sample/type0601.html
@@ -1,3 +1,11 @@
+<style>
+    .type0601 #master {
+        border: 1px solid var(--md-sys-color-outline-variant);
+        min-height: 484px;
+        border-radius: var(--njs-border-radius-l);
+    }
+</style>
+
 <article class="type0601">
     <div class="flex-horizental">
         <div style="max-width: 218px;">
@@ -7,7 +15,7 @@
                     <button id="btnOpen">+</button>
                 </div>
             </div>
-            <div id="master" style="min-height: 676px;"></div>
+            <div id="master"></div>
         </div>
         <div>
             <div class="button-panel">
@@ -91,7 +99,7 @@
         },
         "p.grid.detail" : {
             "action" : [ "hide", [ 9, 10 ] ],
-            height : 650,
+            height : 450,
             filter : false,
             checkAll : "#checkAll",
             checkAllTarget : ".checkAllTarget"

diff --git a/src/main/resources/static/html/com/app/sample/type0701.html b/src/main/resources/static/html/com/app/sample/type0701.html
@@ -9,7 +9,7 @@
         </div>
     </div>
     <div class="button-panel">
-        <button id="btnSearch" href="#" class="btn-search--raised">조회</button>
+        <button id="btnSearch" href="#" data-opts='{ "color": "primary" }'>조회</button>
     </div>
     <div id="master">
         <a href="#"><span></span></a> <!-- 맨 앞으로 가기 버튼 -->

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
@@ -232,11 +232,11 @@ a.btn_common__, input[type='button'].btn_common__, button.btn_common__ {
 }
 
 a.btn_common__:hover, input[type='button'].btn_common__:hover, button.btn_common__:hover {
-    /*opacity: 0.9;*/
+    opacity: 0.9;
 }
 
 a.btn_common__:active, input[type='button'].btn_common__:active, button.btn_common__:active {
-    /*opacity: 0.8;*/
+    opacity: 0.8;
 }
 
 a.btn_disabled__, input.btn_disabled__, button.btn_disabled__ {
@@ -467,6 +467,10 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
     text-align: center;
 }
 
+.tbody_wrap__ > .grid__ {
+    border-bottom: 1px solid var(--md-sys-color-outline-variant);
+}
+
 .tbody_wrap__>.grid__>tbody td.empty__ {
     border-top: none;
     text-align: center;
@@ -678,6 +682,7 @@ a.btn_elevated__, input[type='button'].btn_elevated__, button.btn_elevated__ {
 
 .tbody_wrap__ {
     position: relative;
+    background-color: var(--md-sys-color-surface);
     -webkit-overflow-scrolling: touch;
 }