From 6113a38e094cbaccb8272684557f011c3d90e2ba Mon Sep 17 00:00:00 2001 From: Guangrong Fu Date: Tue, 5 Sep 2017 19:39:27 +0800 Subject: Initial Submission of Holmes GUI Change-Id: I0659887e99d122bc667409964f06a003799da272 Issue-ID: HOLMES-50 Signed-off-by: Guangrong Fu --- .../webapp/public/thirdparty/css/magic-check.css | 123 +++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 usecaseui-holmes/src/main/webapp/public/thirdparty/css/magic-check.css (limited to 'usecaseui-holmes/src/main/webapp/public/thirdparty/css/magic-check.css') diff --git a/usecaseui-holmes/src/main/webapp/public/thirdparty/css/magic-check.css b/usecaseui-holmes/src/main/webapp/public/thirdparty/css/magic-check.css new file mode 100644 index 00000000..4a4ccf70 --- /dev/null +++ b/usecaseui-holmes/src/main/webapp/public/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; +} -- cgit 1.2.3-korg