From c0de6790d98985e62f339f3a125e8dbea4140031 Mon Sep 17 00:00:00 2001 From: Goldman Kim Date: Tue, 25 Jun 2024 11:26:11 +0900 Subject: [PATCH] Working on removing Material Design 2 --- src/main/resources/static/css/common.pub.css | 5 +- .../static/html/com/app/sample/type0401.html | 7 +- .../static/html/com/app/sample/type0402.html | 7 +- .../static/html/com/app/sample/type0501.html | 7 +- .../static/js/natural_js/css/natural.ui.css | 68 ++++++++++++++++++- 5 files changed, 80 insertions(+), 14 deletions(-) diff --git a/src/main/resources/static/css/common.pub.css b/src/main/resources/static/css/common.pub.css index cb619ef..6cad56e 100644 --- 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); } \ No newline at end of file diff --git a/src/main/resources/static/html/com/app/sample/type0401.html b/src/main/resources/static/html/com/app/sample/type0401.html index c1c97f5..f5c8c4e 100644 --- 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 @@
  • -
    • diff --git a/src/main/resources/static/html/com/app/sample/type0402.html b/src/main/resources/static/html/com/app/sample/type0402.html index b51d7d4..75c936d 100644 --- 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 @@
  • -
    • diff --git a/src/main/resources/static/html/com/app/sample/type0501.html b/src/main/resources/static/html/com/app/sample/type0501.html index 8c3d250..6cecc88 100644 --- 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 @@
  • -
    • 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 index 30dede7..843f907 100644 --- 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 + + */ +.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); } \ No newline at end of file