From a21a6cbec52f3e5d24879adcfa1c04e5a1a6bcf0 Mon Sep 17 00:00:00 2001 From: hengsin Date: Wed, 17 Apr 2024 12:53:54 +0800 Subject: [PATCH] Improve consistency of alignment between field input box and editor button #10 --- .../src/metainfo/zk/lang-addon.xml | 2 +- .../iceblue_c/css/fragment/button.css.dsp | 61 ++---------- .../css/fragment/field-editor.css.dsp | 96 ++++++++++--------- .../css/fragment/input-element.css.dsp | 36 +++++-- .../iceblue_c/css/fragment/window.css.dsp | 22 ----- .../src/web/theme/iceblue_c/css/theme.css.dsp | 2 +- 6 files changed, 89 insertions(+), 130 deletions(-) diff --git a/org.idempiere.zk.iceblue_c.theme/src/metainfo/zk/lang-addon.xml b/org.idempiere.zk.iceblue_c.theme/src/metainfo/zk/lang-addon.xml index 240e7e6..e106354 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/metainfo/zk/lang-addon.xml +++ b/org.idempiere.zk.iceblue_c.theme/src/metainfo/zk/lang-addon.xml @@ -6,5 +6,5 @@ - + diff --git a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/button.css.dsp b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/button.css.dsp index 8ee3d05..147763a 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/button.css.dsp +++ b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/button.css.dsp @@ -1,54 +1,16 @@ -.z-button { +.z-button, .z-button-os { display: inline-block; padding: 4px 20px; text-align: center; cursor: pointer; } - -.z-button-hover, -.z-button-focus, -.z-button-click, -.z-button-disabled { - color: #333333; - background-color: #dde4e6 !important; -} - -.z-button-click { - background-color: #cccccc \9; -} - -.z-button-hover, -.z-button-focus { - border-color: transparent !important; - color: #333333; - text-decoration: none; - background-position: 0 -15px; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; -} - -.z-button-focus { - outline: 5px auto -webkit-focus-ring-color; +.z-button-os { + border-radius: 4px; } - -.z-button-click { - background-image: none; - outline: 0; - -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.z-button-disabled { - cursor: default; - background-image: none; - opacity: 0.65; - filter: alpha(opacity=65); - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; +.z-button-os:hover { + color: #FFFFFF; + border-color: transparent; + background-color: #7ac8ff; } .z-button.btn-small { @@ -58,10 +20,6 @@ padding: 2px 10px; } -.z-button-disabled { - color: black; cursor: default; opacity: .6; -moz-opacity: .6; -khtml-opacity: .6; filter: alpha(opacity=60); -} - .img-btn img { height: 22px; width: 22px; @@ -114,8 +72,3 @@ .btn-cancel.z-button [class^="z-icon-"]:before { color: white; } -.z-datebox-button { - background-color: #0093f9 !important; - color: white !important; -} - diff --git a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/field-editor.css.dsp b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/field-editor.css.dsp index 64b4f2d..d74398e 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/field-editor.css.dsp +++ b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/field-editor.css.dsp @@ -3,11 +3,11 @@ } .editor-box { - display: inline-block; + display: inline-flex; padding: 0px; - padding-right: 23px; margin: 0px; position: relative; + align-items: center; } .editor-input { @@ -15,6 +15,7 @@ -moz-box-sizing: border-box; /* Firefox */ display: inline-block; width: 100%; + flex: auto; } .editor-input.mobile.z-decimalbox { padding-right: 5px; @@ -23,22 +24,27 @@ .editor-input:focus { } -.editor-box:has(> .editor-input-disd) { - padding-right: 0px !important; -} - .editor-button { padding: 0px; margin: 0px; - display: inline-block; - background-color: #0093f9; + display: inline-block; + background-color: transparent; background-image: none; - width: 20px; - min-height: 23px; - border: 1px solid transparent; - position: absolute; - right: 1px; - top: 2px; + width: 24px; + min-width: 24px; + height: 24px; + min-height: 24px; + border: none; + box-shadow: none; + flex: auto; +} +.z-button.editor-button > i, +.z-button-os.editor-button > i { + color: #333; +} +.z-button.editor-button:hover > i, +.z-button-os.editor-button:hover > i { + color: #fff; } .z-chosenbox { @@ -91,7 +97,6 @@ padding: 1px 1px; } - .editor-box .grid-editor-input.z-textbox { } @@ -101,18 +106,6 @@ .grid-editor-button img { } -.number-box { - display: inline-block; - white-space:nowrap; -} -.number-box.editor-box > .editor-input { - margin-right: 23px; - width: 100%; - padding-right: 2px; - padding-top: 4px; - padding-bottom: 4px; -} - .datetime-box { white-space:nowrap; } @@ -149,14 +142,9 @@ span.grid-combobox-editor { border-left: 1px solid #0000ff; } -.editor-input.z-combobox > .z-combobox-input { - border-bottom-right-radius: 0; - border-top-right-radius: 0; -} - <%-- payment rule --%> .payment-rule-editor { - display: inline-block; + display: inline-flex; padding: 0px; margin: 0px; position: relative; @@ -231,11 +219,6 @@ span.grid-combobox-editor { border-color:red; } -.editor-button.z-button-os{ - top: 0px; - background-color: #ffffff00 !important; -} - .idempiere-mandatory-label{ color: red!important; } @@ -248,16 +231,37 @@ span.grid-combobox-editor { color: #fff; } -.z-icon-Online { - color : #0093f9 !important; -} - <%-- range button for datebox --%> .z-toolbarbutton:has(> span > i.z-icon-History) { - padding: 2px 4px; - background-color: #0093f9 !important; - color: white !important; + padding: 2px; + min-width: 24px; + border: none; } .z-toolbarbutton:has(> span > i.z-icon-History):hover { - background-color: #7ac8ff !important; + background-color: #7ac8ff !important; +} + +<%-- record id editor --%> +.recordid-editor { + display: inline-flex; + position: relative; + align-items: center; +} +.recordid-editor > input { + flex: auto; +} +.recordid-editor .z-toolbarbutton { + margin: 0px; + background-image: none; + position: relative; + width: 24px; + min-width: 24px; + height: 24px; + min-height: 24px; + right: auto !important; + padding: 0px; + flex: auto; +} +.recordid-editor .z-toolbarbutton:hover { + background-color: #7ac8ff } diff --git a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/input-element.css.dsp b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/input-element.css.dsp index 74575d2..79afca6 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/input-element.css.dsp +++ b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/input-element.css.dsp @@ -35,7 +35,6 @@ } <%-- highlight focus form element --%> input:focus, textarea:focus, .z-combobox-input:focus, z-datebox-input:focus, select:focus { - border: 1px solid #0000ff; background: #FFFFCC; } @@ -68,18 +67,43 @@ input:focus, textarea:focus, .z-combobox-input:focus, z-datebox-input:focus, sel <%-- datebox --%> .z-datebox { - padding-right: 25px; + display: inline-flex; + align-items: center; } .z-datebox-input { padding-right: 5px; + flex: auto; +} +.z-datebox-input:focus + .z-datebox-button { + border: none; } .z-datebox-button { border: none; border-radius: 4px; - margin-right: 1px; - min-width: 20px; - height: 22px; + position: relative; + width: 24px; + min-width: 24px; + height: 24px; + min-height: 24px; + flex: auto; + color: #333; + padding: 0px; } .z-datebox-button:hover { - background-color: #7ac8ff !important; + background-color: #7ac8ff !important; +} +.z-datebox-button > i { + line-height: 24px; + font-size: 14px; +} +.z-datebox-button:hover > i { + color: #fff; +} + +.z-timebox { + display: inline-flex; +} +.z-timebox-button>a>i { + line-height: 12px; + transform:translateY(-1px); } diff --git a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/window.css.dsp b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/window.css.dsp index 1abdc38..4539d1f 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/window.css.dsp +++ b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/fragment/window.css.dsp @@ -146,28 +146,6 @@ div.wc-modal, div.wc-modal-none, div.wc-highlighted, div.wc-highlighted-none { margin: 5px; } -.recordid-editor { - display: inline-block; - position: relative; -} -.recordid-editor .z-toolbarbutton { - margin: 0px; - background-image: none; - background-color: #0093f9; - position: absolute; - width: 21px; - min-height: 20px; - right: 2px; - top: 4px; - color: white; - padding: 1px; - border-radius: 0px; - border: none; -} -.recordid-editor .z-toolbarbutton:hover { - background-color: #7ac8ff -} - .recordid-dialog { min-width: 400px; } diff --git a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/theme.css.dsp b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/theme.css.dsp index 8a11377..0f7885e 100644 --- a/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/theme.css.dsp +++ b/org.idempiere.zk.iceblue_c.theme/src/web/theme/iceblue_c/css/theme.css.dsp @@ -40,7 +40,7 @@ html,body { font-size: 12px; } } -.z-datebox-button [class*="z-icon-"], .z-bandbox-button [class*="z-icon-"], .z-combobox-button [class*="z-icon-"] { +.z-bandbox-button [class*="z-icon-"], .z-combobox-button [class*="z-icon-"] { font-size: 18px; }