From a73c5dd0521667ba63688eb880acce70ae52adad Mon Sep 17 00:00:00 2001 From: seshukm Date: Tue, 24 Jan 2017 10:53:07 +0530 Subject: styling for the CLIENT FW Unified Framework for the OPEN-O GUI. Issue-ID : CLIENT-11 and its sub stories Change-Id: I86e7943dd1882d40341bd312e7e7fc452e2f4310 Signed-off-by: seshukm --- .../browser/thirdparty/css/magic-check.css | 123 +++++++++++++++++++++ .../browser/thirdparty/css/zTreeStyle.css | 97 ++++++++++++++++ 2 files changed, 220 insertions(+) create mode 100644 portal-common/src/main/webapp/framework/browser/thirdparty/css/magic-check.css create mode 100644 portal-common/src/main/webapp/framework/browser/thirdparty/css/zTreeStyle.css diff --git a/portal-common/src/main/webapp/framework/browser/thirdparty/css/magic-check.css b/portal-common/src/main/webapp/framework/browser/thirdparty/css/magic-check.css new file mode 100644 index 00000000..10178af3 --- /dev/null +++ b/portal-common/src/main/webapp/framework/browser/thirdparty/css/magic-check.css @@ -0,0 +1,123 @@ +@keyframes hover-color { + from { + border-color: #c0c0c0; } + to { + border-color: #3e97eb; } } + +.magic-radio, +.magic-checkbox { + position: absolute; + display: none; } + +.magic-radio[disabled], +.magic-checkbox[disabled] { + cursor: not-allowed; } + +.magic-radio + label, +.magic-checkbox + label { + position: relative; + display: block; + padding-left: 30px; + cursor: pointer; + vertical-align: middle; + font-weight:normal; + text-align: left;} +.magic-radio + label:hover:before, +.magic-checkbox + label:hover:before { + animation-duration: 0.4s; + animation-fill-mode: both; + animation-name: hover-color; } +.magic-radio + label:before, +.magic-checkbox + label:before { + position: absolute; + top: 0; + left: 0; + display: inline-block; + width: 20px; + height: 20px; + content: ''; + border: 1px solid #4ac9ff; } +.magic-radio + label:after, +.magic-checkbox + label:after { + position: absolute; + display: none; + content: ''; } + +.magic-radio[disabled] + label, +.magic-checkbox[disabled] + label { + cursor: not-allowed; + color: #e4e4e4; } +.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after, +.magic-checkbox[disabled] + label:hover, +.magic-checkbox[disabled] + label:before, +.magic-checkbox[disabled] + label:after { + cursor: not-allowed; } +.magic-radio[disabled] + label:hover:before, +.magic-checkbox[disabled] + label:hover:before { + border: 1px solid #e4e4e4; + animation-name: none; } +.magic-radio[disabled] + label:before, +.magic-checkbox[disabled] + label:before { + border-color: #e4e4e4; } + +.magic-radio:checked + label:before, +.magic-checkbox:checked + label:before { + animation-name: none; } + +.magic-radio:checked + label:after, +.magic-checkbox:checked + label:after { + display: block; } + +.magic-radio + label:before { + border-radius: 50%; } + +.magic-radio + label:after { + top: 6px; + left: 6px; + width: 8px; + height: 8px; + border-radius: 50%; + background: #3e97eb; } + +.magic-radio:checked + label:before { + border: 1px solid #3e97eb; } + +.magic-radio:checked[disabled] + label:before { + border: 1px solid #c9e2f9; } + +.magic-radio:checked[disabled] + label:after { + background: #c9e2f9; } + +.magic-checkbox + label:before { + border-radius: 3px; } + +.magic-checkbox + label:after { + top: 2px; + left: 7px; + box-sizing: border-box; + width: 6px; + height: 12px; + transform: rotate(45deg); + border-width: 2px; + border-style: solid; + border-color: #fff; + border-top: 0; + border-left: 0; } + +.magic-checkbox:checked + label:before { + border: #3e97eb; + background: #3e97eb; } + +.magic-checkbox:checked[disabled] + label:before { + border: #c9e2f9; + background: #c9e2f9; } + +.radio-toolbar label { + background:Red; + border:1px solid green; + padding:2px 10px; +} + +.magic-radio:checked + label { + font-weight: bold; +} diff --git a/portal-common/src/main/webapp/framework/browser/thirdparty/css/zTreeStyle.css b/portal-common/src/main/webapp/framework/browser/thirdparty/css/zTreeStyle.css new file mode 100644 index 00000000..4a1705b1 --- /dev/null +++ b/portal-common/src/main/webapp/framework/browser/thirdparty/css/zTreeStyle.css @@ -0,0 +1,97 @@ +/*------------------------------------- +zTree Style + +version: 3.5.19 +author: Hunter.z +email: hunter.z@263.net +website: http://code.google.com/p/jquerytree/ + +-------------------------------------*/ + +.ztree * {padding:0; margin:0; font-size:12px; font-family: Verdana, Arial, Helvetica, AppleGothic, sans-serif} +.ztree {margin:0; padding:5px; color:#333} +.ztree li{padding:0; margin:0; list-style:none; line-height:14px; text-align:left; white-space:nowrap; outline:0} +.ztree li ul{ margin:0; padding:0 0 0 18px} +.ztree li ul.line{ background:url(./img/line_conn.gif) 0 0 repeat-y;} + +.ztree li a {padding:1px 3px 0 0; margin:0; cursor:pointer; height:17px; color:#333; background-color: transparent; + text-decoration:none; vertical-align:top; display: inline-block} +.ztree li a:hover {text-decoration:underline} +.ztree li a.curSelectedNode {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;} +.ztree li a.curSelectedNode_Edit {padding-top:0px; background-color:#FFE6B0; color:black; height:16px; border:1px #FFB951 solid; opacity:0.8;} +.ztree li a.tmpTargetNode_inner {padding-top:0px; background-color:#316AC5; color:white; height:16px; border:1px #316AC5 solid; + opacity:0.8; filter:alpha(opacity=80)} +.ztree li a.tmpTargetNode_prev {} +.ztree li a.tmpTargetNode_next {} +.ztree li a input.rename {height:14px; width:80px; padding:0; margin:0; + font-size:12px; border:1px #7EC4CC solid; *border:0px} +.ztree li span {line-height:16px; margin-right:2px} +.ztree li span.button {line-height:0; margin:0; width:16px; height:16px; display: inline-block; vertical-align:middle; + border:0 none; cursor: pointer;outline:none; + background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; + background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")} + +.ztree li span.button.chk {width:13px; height:13px; margin:0 3px 0 0; cursor: auto} +.ztree li span.button.chk.checkbox_false_full {background-position:0 0} +.ztree li span.button.chk.checkbox_false_full_focus {background-position:0 -14px} +.ztree li span.button.chk.checkbox_false_part {background-position:0 -28px} +.ztree li span.button.chk.checkbox_false_part_focus {background-position:0 -42px} +.ztree li span.button.chk.checkbox_false_disable {background-position:0 -56px} +.ztree li span.button.chk.checkbox_true_full {background-position:-14px 0} +.ztree li span.button.chk.checkbox_true_full_focus {background-position:-14px -14px} +.ztree li span.button.chk.checkbox_true_part {background-position:-14px -28px} +.ztree li span.button.chk.checkbox_true_part_focus {background-position:-14px -42px} +.ztree li span.button.chk.checkbox_true_disable {background-position:-14px -56px} +.ztree li span.button.chk.radio_false_full {background-position:-28px 0} +.ztree li span.button.chk.radio_false_full_focus {background-position:-28px -14px} +.ztree li span.button.chk.radio_false_part {background-position:-28px -28px} +.ztree li span.button.chk.radio_false_part_focus {background-position:-28px -42px} +.ztree li span.button.chk.radio_false_disable {background-position:-28px -56px} +.ztree li span.button.chk.radio_true_full {background-position:-42px 0} +.ztree li span.button.chk.radio_true_full_focus {background-position:-42px -14px} +.ztree li span.button.chk.radio_true_part {background-position:-42px -28px} +.ztree li span.button.chk.radio_true_part_focus {background-position:-42px -42px} +.ztree li span.button.chk.radio_true_disable {background-position:-42px -56px} + +.ztree li span.button.switch {width:18px; height:18px} +.ztree li span.button.root_open{background-position:-92px -54px} +.ztree li span.button.root_close{background-position:-74px -54px} +.ztree li span.button.roots_open{background-position:-92px 0} +.ztree li span.button.roots_close{background-position:-74px 0} +.ztree li span.button.center_open{background-position:-92px -18px} +.ztree li span.button.center_close{background-position:-74px -18px} +.ztree li span.button.bottom_open{background-position:-92px -36px} +.ztree li span.button.bottom_close{background-position:-74px -36px} +.ztree li span.button.noline_open{background-position:-92px -72px} +.ztree li span.button.noline_close{background-position:-74px -72px} +.ztree li span.button.root_docu{ background:none;} +.ztree li span.button.roots_docu{background-position:-56px 0} +.ztree li span.button.center_docu{background-position:-56px -18px} +.ztree li span.button.bottom_docu{background-position:-56px -36px} +.ztree li span.button.noline_docu{ background:none;} + +.ztree li span.button.ico_open{margin-right:2px; background-position:-110px -16px; vertical-align:top; *vertical-align:middle} +.ztree li span.button.ico_close{margin-right:2px; background-position:-110px 0; vertical-align:top; *vertical-align:middle} +.ztree li span.button.ico_docu{margin-right:2px; background-position:-110px -32px; vertical-align:top; *vertical-align:middle} +.ztree li span.button.edit {margin-right:2px; background-position:-110px -48px; vertical-align:top; *vertical-align:middle} +.ztree li span.button.remove {margin-right:2px; background-position:-110px -64px; vertical-align:top; *vertical-align:middle} + +.ztree li span.button.ico_loading{margin-right:2px; background:url(./img/loading.gif) no-repeat scroll 0 0 transparent; vertical-align:top; *vertical-align:middle} + +ul.tmpTargetzTree {background-color:#FFE6B0; opacity:0.8; filter:alpha(opacity=80)} + +span.tmpzTreeMove_arrow {width:16px; height:16px; display: inline-block; padding:0; margin:2px 0 0 1px; border:0 none; position:absolute; + background-color:transparent; background-repeat:no-repeat; background-attachment: scroll; + background-position:-110px -80px; background-image:url("./img/zTreeStandard.png"); *background-image:url("./img/zTreeStandard.gif")} + +ul.ztree.zTreeDragUL {margin:0; padding:0; position:absolute; width:auto; height:auto;overflow:hidden; background-color:#cfcfcf; border:1px #00B83F dotted; opacity:0.8; filter:alpha(opacity=80)} +.zTreeMask {z-index:10000; background-color:#cfcfcf; opacity:0.0; filter:alpha(opacity=0); position:absolute} + +/* level style*/ +/*.ztree li span.button.level0 { + display:none; +} +.ztree li ul.level0 { + padding:0; + background:none; +}*/ \ No newline at end of file -- cgit 1.2.3-korg