From 86d4114ab61f9cb00c1d01f91e81e9a38c6ba2f6 Mon Sep 17 00:00:00 2001 From: opensource-tnbt Date: Thu, 10 Sep 2020 12:23:34 +0530 Subject: SDV: Platform Description Implementation. This patch includes PDF Template and a tool to create PDF. Signed-off-by: Sridhar K. N. Rao Change-Id: Ib702ff42352d584cb9146ff1959258c558e06615 --- sdv/pdf/site/assets/pdfrep.png | Bin 0 -> 158477 bytes sdv/pdf/site/assets/plus-circle-solid.svg | 59 + sdv/pdf/site/assets/plus-square-regular.svg | 1 + sdv/pdf/site/assets/redo-alt-solid.svg | 1 + sdv/pdf/site/assets/trash-alt-regular.svg | 59 + sdv/pdf/site/index.html | 1797 +++++++++++++++++++++++++++ sdv/pdf/site/scripts/actions.js | 24 + sdv/pdf/site/scripts/createfile.js | 13 + sdv/pdf/site/scripts/mergeDeep.js | 31 + sdv/pdf/site/scripts/readFromHTML.js | 57 + sdv/pdf/site/scripts/writeToHTML.js | 117 ++ sdv/pdf/site/style/array.css | 55 + sdv/pdf/site/style/multitab.css | 109 ++ 13 files changed, 2323 insertions(+) create mode 100755 sdv/pdf/site/assets/pdfrep.png create mode 100644 sdv/pdf/site/assets/plus-circle-solid.svg create mode 100644 sdv/pdf/site/assets/plus-square-regular.svg create mode 100644 sdv/pdf/site/assets/redo-alt-solid.svg create mode 100644 sdv/pdf/site/assets/trash-alt-regular.svg create mode 100644 sdv/pdf/site/index.html create mode 100644 sdv/pdf/site/scripts/actions.js create mode 100644 sdv/pdf/site/scripts/createfile.js create mode 100644 sdv/pdf/site/scripts/mergeDeep.js create mode 100644 sdv/pdf/site/scripts/readFromHTML.js create mode 100644 sdv/pdf/site/scripts/writeToHTML.js create mode 100644 sdv/pdf/site/style/array.css create mode 100644 sdv/pdf/site/style/multitab.css (limited to 'sdv/pdf/site') diff --git a/sdv/pdf/site/assets/pdfrep.png b/sdv/pdf/site/assets/pdfrep.png new file mode 100755 index 0000000..ed144f3 Binary files /dev/null and b/sdv/pdf/site/assets/pdfrep.png differ diff --git a/sdv/pdf/site/assets/plus-circle-solid.svg b/sdv/pdf/site/assets/plus-circle-solid.svg new file mode 100644 index 0000000..39a0f8e --- /dev/null +++ b/sdv/pdf/site/assets/plus-circle-solid.svg @@ -0,0 +1,59 @@ + + diff --git a/sdv/pdf/site/assets/plus-square-regular.svg b/sdv/pdf/site/assets/plus-square-regular.svg new file mode 100644 index 0000000..b9e300d --- /dev/null +++ b/sdv/pdf/site/assets/plus-square-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sdv/pdf/site/assets/redo-alt-solid.svg b/sdv/pdf/site/assets/redo-alt-solid.svg new file mode 100644 index 0000000..b8e9455 --- /dev/null +++ b/sdv/pdf/site/assets/redo-alt-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/sdv/pdf/site/assets/trash-alt-regular.svg b/sdv/pdf/site/assets/trash-alt-regular.svg new file mode 100644 index 0000000..fbce77b --- /dev/null +++ b/sdv/pdf/site/assets/trash-alt-regular.svg @@ -0,0 +1,59 @@ + + diff --git a/sdv/pdf/site/index.html b/sdv/pdf/site/index.html new file mode 100644 index 0000000..fe88f29 --- /dev/null +++ b/sdv/pdf/site/index.html @@ -0,0 +1,1797 @@ + + + + +Cloud Platform Description + + + + + + + + + + + + + + +
+
+
+
+
+ +
+

Cloud Platform Description

+
+
+
+
+ About PDF ? +
+
+
+
+
+
+
+
+

Guidelines:

+
    +
  • Please add the values correctly - No validations are included in this version.
    • +
  • The Deployment can be OOO, OOK, OWK or OaV. In the first three deployments, openstack services are deployed as containers.
    • +
  • Block Storage method is either rbd or iscsi
    • +
  • Example Power-state prefetcher setting: C4_C6_MLC-STR_MLC-SPA_DCU_DCA_RAS_TURBO
    • +
  • Under Physical Network please include IPMI Network Information too.
    • +
  • A network link could be a trunk, bond, interface or a bridge.
    • +
  • Please click of Submit button before clicking the Dowload button.
    • + +
+
+
+
+ +
+
+
+
+ +
+
+
+

PDF 2.0

+

Platform Description Categories

+
+ +
+
+
+
+

Management Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

User Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ Next +
+
+
+
+

NTP Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

DNS Information

+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+
+ Next +
+
+
+
+

Proxy Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

LDAP Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

VIM Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

VIM Functional Information

+
+
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

Deployment Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

Jump Host Information

+
+
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

Rack Information

+
+
+
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ Next +
+
+
+
+

Storage Cluster Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+ Next +
+
+
+
+

BIOS Profiles

+
+
+
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ Next +
+
+
+
+

Processor Profiles

+
+
+
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Disk Profiles

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

NIC Profiles

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Hardware Profiles

+
+
+
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ Next +
+
+
+
+

Storage Profiles

+
+
+
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Virtual Networks

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Physical Networks

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ Next +
+
+ +
+
+

Network-Interface Mapping

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Platform Profiles

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Undercloud: Openstack Over Kubernetes

+
+
+
+ +
+ + +
+
+ + +
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ + +
+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+ Next +
+
+
+
+

Undercloud: Openstack Over Openstack

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ Next +
+
+
+
+

Undercloud Software

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Openstack Software

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Infrastructure Software

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Software Set

+
+
+
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+ Next +
+
+
+
+

Roles

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+
+ Next +
+
+
+
+

Extrapolation Information

+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ Next +
+
+
+
+

Host Aggregates

+
+
+
+
+ + +
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+
+
+
+ +
+
+ +
+ + Download JSON +
+
+
+

*Please fill values correctly. No field is mandatory.

+
+
+
+
+ +
+

This is Part of OPNFV-CIRV SDV Project

+
+ +
+ + + + + + + diff --git a/sdv/pdf/site/scripts/actions.js b/sdv/pdf/site/scripts/actions.js new file mode 100644 index 0000000..464c57f --- /dev/null +++ b/sdv/pdf/site/scripts/actions.js @@ -0,0 +1,24 @@ + +// expand-arrow button +function toggleClass(element, classname){ + element.classList.toggle(classname) +} + +// Add button +function duplicate(button){ + if (button.previousElementSibling.hasAttribute('name') && + button.previousElementSibling.getAttribute('name') != null) + { + newdiv = button.previousElementSibling.cloneNode(true); + if (!newdiv.lastElementChild.classList.contains('del-button')){ + del ='
' + newdiv.innerHTML += del; + } + button.parentNode.insertBefore(newdiv, button) + } +} + +// Delete Button +function remove(button){ + button.parentNode.parentNode.removeChild(button.parentNode); +} \ No newline at end of file diff --git a/sdv/pdf/site/scripts/createfile.js b/sdv/pdf/site/scripts/createfile.js new file mode 100644 index 0000000..2e13f2f --- /dev/null +++ b/sdv/pdf/site/scripts/createfile.js @@ -0,0 +1,13 @@ +/** + * This function creates a Json file to support client-side file download + */ + +function createjson() { + element=document.getElementById('pdfform') + data = objectifyDiv(element); + jsonstr = JSON.stringify(data); + var data = new Blob([jsonstr], {type: 'application/json'}); + var url = window.URL.createObjectURL(data); + document.getElementById('download_link').href = url; + console.log(jsonstr); +} diff --git a/sdv/pdf/site/scripts/mergeDeep.js b/sdv/pdf/site/scripts/mergeDeep.js new file mode 100644 index 0000000..ebede4e --- /dev/null +++ b/sdv/pdf/site/scripts/mergeDeep.js @@ -0,0 +1,31 @@ + +/** +* Performs a deep merge of objects and returns new object. Does not modify +* objects (immutable) and merges arrays via concatenation. +* +* @param {...object} objects - Objects to merge +* @returns {object} New object with merged key/values +*/ +function mergeDeep(...objects) { + const isObject = obj => obj && typeof obj === 'object'; + + return objects.reduce((prev, obj) => { + Object.keys(obj).forEach(key => { + const pVal = prev[key]; + const oVal = obj[key]; + + if (Array.isArray(pVal) && Array.isArray(oVal)) { + prev[key] = pVal.concat(...oVal); + } + else if (isObject(pVal) && isObject(oVal)) { + prev[key] = mergeDeep(pVal, oVal); + } + else { + prev[key] = oVal; + } + }); + + return prev; + }, {}); +} + diff --git a/sdv/pdf/site/scripts/readFromHTML.js b/sdv/pdf/site/scripts/readFromHTML.js new file mode 100644 index 0000000..3255e79 --- /dev/null +++ b/sdv/pdf/site/scripts/readFromHTML.js @@ -0,0 +1,57 @@ + +/** +* Reads HTML contents into javascript object +* +* +* @param {element} element to read, can be input or div element +* @returns {object} New object with values read +*/ +function objectifyDiv(element){ + var obj = {}; + var el = element.childNodes; + for(var i in el){ + + if(el[i] instanceof HTMLInputElement && el[i].hasAttribute('name')) { + + if(el[i].type == 'text') + obj = mergeDeep(obj, objectify(el[i].name, el[i].value)); + + } + if(el[i] instanceof HTMLSelectElement && el[i].hasAttribute('name')){ + obj = mergeDeep(obj, objectify(el[i].name, el[i].value)); + } + if(el[i] instanceof HTMLDivElement){ + + if(el[i].classList.contains('arr')){ + var key = el[i].getAttribute('name'); + var value = objectifyDiv(el[i]); + if(obj[key] == undefined) + obj[key] =[]; + obj[key].push(value[key]); + } + else + obj = mergeDeep(obj, objectifyDiv(el[i])); + + } + } + + if(element.hasAttribute('name')){ + var newobj = {}; + newobj[element.getAttribute('name')] = obj; + return newobj; + } + return obj; +} + + + +function objectify(key, value){ + var obj = {}; + var keys = key.split('.'); + for(var i = keys.length-1; i >= 0; i--){ + obj[keys[i]] = value; + value = obj; + obj = {}; + } + return value; +} diff --git a/sdv/pdf/site/scripts/writeToHTML.js b/sdv/pdf/site/scripts/writeToHTML.js new file mode 100644 index 0000000..8eb8c29 --- /dev/null +++ b/sdv/pdf/site/scripts/writeToHTML.js @@ -0,0 +1,117 @@ + +/** +* Processes target HTML element and fill with values passed in +* javascript object +* +* @param {element} element to update with values +* @param {obj} Object from which values will be read +*/ + function writeToHTML(element, obj){ + + var el = element.childNodes; + for(var i in el) + { + + if(el[i] instanceof HTMLInputElement && el[i].hasAttribute('name')){ + + if(el[i].type == 'text') + el[i].value = getValue(obj, el[i].name); + + } + if(el[i] instanceof HTMLSelectElement && el[i].hasAttribute('name')){ + + var option = getValue(obj, el[i].name); + var defaultValue = el[i].value; + el[i].value = option; + if ( el[i].value != option){ + el[i].focus(); + alert(option + " is an invalid value! Setting to default"); + el[i].value = defaultValue; + } + + } + if(el[i] instanceof HTMLDivElement){ + + if(el[i].hasAttribute('name')) + { + if(el[i].classList.contains('arr')){ + + name = el[i].getAttribute('name'); + values = getValue(obj, name); + + // Sync number of Arr div with name inside element with number of values + syncArr(element, name, values.length); + + // Update value inside all divs + var i = 0; + for(var div of element.getElementsByClassName('arr')) + if(div.getAttribute("name") == name) + writeToHTML(div , values[i++]); + + } //else-if single div + else + writeToHTML(el[i], getValue(obj, el[i].getAttribute('name'))); + + }//else-if blank div without attribute name, then simply pass values to next child + else + writeToHTML(el[i], obj); + } + + } + } + + // Reads value from obj with string 'key1.key2.key3' convention + function getValue(obj, str) { + str = str.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties + str = str.replace(/^\./, ''); // strip a leading dot + var a = str.split('.'); + for (var i = 0; i < a.length; ++i) { + var key = a[i]; + if (key in obj) { + obj = obj[key]; + } else { + alert('Invalid PDF file! Key '+key+ ' not Found'); + return ""; + } + } + return obj; + } + +function syncArr(el, name, length){ + + // count number of arr-div with name present inside el + var count = 0; + var cp = null; + for(var div of el.getElementsByClassName('arr')){ + if(div.getAttribute("name") == name){ + count++; + cp = div; + } + } + + // balance loop + while(count - length){ + if((count - length) < 0) + { // add more div + newdiv = cp.cloneNode(true); + if (!newdiv.lastElementChild.classList.contains('del-button')){ + del ='
' + newdiv.innerHTML += del; + } + cp.after(newdiv); + count++; + } + else + { // remove div + for(var div of el.getElementsByClassName('arr')) + if(div.getAttribute("name") == name) + if (div.lastElementChild.classList.contains('del-button')){ + div.parentNode.removeChild(div); + count--; + if((count - length)==0) + break; + } + } + } + +} diff --git a/sdv/pdf/site/style/array.css b/sdv/pdf/site/style/array.css new file mode 100644 index 0000000..45a53fc --- /dev/null +++ b/sdv/pdf/site/style/array.css @@ -0,0 +1,55 @@ + +@keyframes popup { + 0%{ + transform: scale(0.5); + } + 90%{ + transform: scale(1.1); + } + 100%{ + transform: scale(1.0); + } +} + +.arr{ + border-radius: 6px; + border-style: dashed; + border-color: #c9c9c9; + border-width: 2px; + display: inline-block; + padding-right: 3em; + margin-right: 15px; + margin-bottom: 5px; + position: relative; + animation: popup 0.2s ease; +} + + +.add-button{ + background-image: url("../assets/plus-circle-solid.svg"); + opacity: 0.7; + width: 2em; + height: 2em; + display: inline-block; + left: 0; +} +.add-button:hover{ + opacity: 1 +} + + + +.del-button{ + background-image: url("../assets/trash-alt-regular.svg"); + background-repeat: no-repeat; + opacity: 0.7; + width: 2em; + height: 2em; + position: absolute; + right: 0.5em; + bottom: 0.5em; +} +.del-button:hover{ + opacity: 1 +} + diff --git a/sdv/pdf/site/style/multitab.css b/sdv/pdf/site/style/multitab.css new file mode 100644 index 0000000..8460d8b --- /dev/null +++ b/sdv/pdf/site/style/multitab.css @@ -0,0 +1,109 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); +*{ box-sizing: border-box;} +button:active, button:focus{ outline: none; box-shadow: none;} +body{ background: #eeffad;; font-family: 'Roboto', sans-serif;} +.multitab-form-area { max-width: 750px; margin: 0 auto; background:#eee; padding: 20px} +.form-field input:focus, .form-field input:active, .form-field select:focus, .form-field select:active, .form-field textarea:active, .form-field textarea:focus {outline: 1px solid #8aa71c;} +.tab-links-area {width: 240px; display: inline-block; vertical-align: top; padding-right: 20px;} +.tab-form-area { width: calc(100% - 245px); display: inline-block; background: #fff; vertical-align: top; padding: 16px; border-radius: 5px;} +.tab-links-area p {margin: 0; font-size: 14px; color: #999;} +.tab-links-area h1 { margin: 0; font-size: 24px;} +.tab-part h4 {font-size: 24px;margin: 0;} +.multitab-form-area hr {border: 0; height: 1px; width: 100%; background: rgba(0,0,0,0.3);} +.tab-links-area ul li a {text-decoration: none;font-size: 14px;padding: 10px 15px;display: block;color: #333; position: relative;} +.tab-links-area ul li a:before {content: '';height: 0%;width: 3px;background: #8aa71c;position: absolute;left: -2px;top: 0;bottom: 0;margin: auto;transition: 0.3s ease;} +.tab-links-area ul li a.active:before{ height: 100%;} +.tab-links-area ul li {display: block; border-left: 1px solid #eee;} +.tab-links-area ul {list-style: none;padding: 0; margin: 20px 0 0;} +.form-field input, .form-field select {width: 100%; font-family: 'Roboto', sans-serif; height: 35px; padding-left: 10px; border: 1px solid #ccc;} +.form-field select {padding: 0 0 0 2px;} +.form-field label { font-size: 14px; display: block; padding:10px 0;} +.half-2 {width: 50%; padding: 0 10px; float: left;} +.devider-row:after {content: '';display: table;clear: both;} +.devider-row {margin: 0 -10px;clear: both;} +.half-3 {width: calc(100%/3); float: left; padding: 0 10px;} +.next-btn button, .next-btn a {background: #8aa71c;cursor: pointer;border: 1px solid #8aa71c;transition: 0.3s ease;color: #fff;height: 35px;width: 90px;border-radius: 100px;margin: 20px 0 10px auto;display: block;text-transform: uppercase;text-align: center;line-height: 35px;text-decoration: none;font-size: 14px;} +.next-btn button:hover, .next-btn a:hover {background: transparent; color: #8aa71c;} +.tabs-panels.active { display: block;} +.tabs-panels { display: none; animation: fadeIn 0.3s ease;} +.full {padding: 0 10px; width: 100%;} +.form-field textarea {width: 100%;height: 100px;padding: 10px;font-size: 14px;border: 1px solid #ccc;font-family: 'Roboto', sans-serif;} +.checkbox label:after {content: '';position: absolute;border-style: solid;border-color: #333;height: 8px;width: 5px;border-width: 0 3px 3px 0;left: 5px;z-index: 2;transform: rotate(35deg);top: 4px; display: none;} +.checkbox label:before {content: '';height: 20px;width: 21px;background: #fff;position: absolute;border: 1px solid #8aa71c;left: -2px;top: 0;border-radius: 3px;} +.checkbox {position: relative;margin: 10px 0;} +.checkbox label {display: inline-block;vertical-align: middle;padding: 0;} +.checkbox input[type="checkbox"] {width: 20px;height: 20px;display: inline-block;vertical-align: middle;margin: 0;position: relative;z-index: 3;opacity: 0;} +.radio label:after { content: ''; display: none; height: 15px; width: 15px; position: absolute; background: #8aa71c; border-radius: 100px; left: 2px; top: 2px; z-index: 1;} +.radio label:before {content: ''; height: 21px; width: 21px; background: #fff; border: 1px solid #8aa71c; position: absolute; left: -2px; top: -2px; border-radius: 100px;} +.radio input[type="radio"] { height: 20px; width: 20px; display: inline-block; margin: 0; position: relative; z-index: 3; opacity: 0; vertical-align: middle;} +.radio label {padding: 0; display: inline-block; margin: 0; vertical-align: middle;} +.radio { position: relative; margin: 10px 0;} +.radio input:checked + label:after, .checkbox input:checked + label:after{ display: block;} +.note p { margin: 0; font-size: 12px; color: #999;} +.form-area {max-width: 80%; margin: 0 auto; background: #eee; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.25)} +.form-footer p {margin: 0; font-size: 12px;} +.form-footer {padding: 20px; text-align: center; color: #676767;} +.form-header {background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,0.1); margin-bottom: 20px;} +.logo-area {padding: 0 10%;} +.logo-area h1 a {color: #000; text-decoration: none; outline: none;} +.logo-area h1 {margin: 0; font-size: 24px;} +.need-help a i {background: #333; color: #fff; font-style: normal; font-size: 10px; height: 13px; width: 13px; display: inline-block; text-align: center; border-radius: 100px;} +.need-help a {font-size: 12px; color: #333; text-decoration: none;} +.need-help {text-align: right; padding: 0 10%;} +.top-header {padding: 15px 0; border-bottom: 2px dashed #ccc;} +.status p {font-size: 12px; color: #676767} +.status h5, .status p { margin: 0;} +.bars label { text-align: center; display: block; font-size: 14px;} +.bars {position: relative;} +.blank-bar {width: 100%; background: #ccc; height: 3px; border-radius: 100px;} +.full-bar { width: 50%; background: #8aa71c; height: 3px; position: relative; bottom: -3px;} +.bars span { height: 8px; width: 8px; display: inline-block; position: absolute; background: #ccc; border-radius: 100px; z-index: 1;} +.bars span:nth-of-type(2) {left: 15%;} +.bars span:nth-of-type(3) {left: 50%;} +.bars span:nth-of-type(4) {left: 85%;} +.bars span:nth-of-type(5) {left: 100%;} +.bars span.active{background: #8aa71c;} +.bottom-header {padding: 15px 10%;} +.status {padding-left: 10%;} +/*keyframes*/ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; +} + +@media(max-width:750px){ + .half-2 {width: 100%;} + .top-header .half-2 {width: 50%;} + .logo-area {padding: 0 5%; text-align: left;} + .status { padding-top: 20px; padding-left: 0;} +} + +@media(max-width:570px){ + .tab-links-area {width: 100%;display: block; margin-bottom: 20px;} + .tab-form-area{ width: 100%;} + .bottom-header {padding: 15px 5%;} +} + +@media(max-width:420px){ + .form-area {max-width: 90%;} +} -- cgit 1.2.3-korg