5
@import "compass/css3";
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
padding: 10px;
font-family: 'Arial';
font-size: 12px;
}
div.inputs {
width: 30%;
float: left;
> div {
margin-top: 40px;
position: relative;
span.display {
display: inline-block;
position: absolute;
height: 20px;
width: 20px;
background: #9FBFDF;
margin-left: 10px;
border: 1px solid darken(#9FBFDF, 10%);
font-family: 'Arial';
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 0 rgba(240, 240, 250, .6);
}
}
}
div.riskMatrix {
width: 70%;
float: left;
table {
height: 100%;
width: 100%;
tr {
&:last-of-type {
td {
text-align: center;
padding-top: 10px;
font-size: 1.2em;
font-family: 'Consolas';
font-weight: bold;
}
}
td {
height: 40px;
width: 40px;
border: 1px solid rgba(0,0,0, .2);
&:first-of-type {
width: 30px;
height: 30px;
margin-top: 10px;
font-size: 1.2em;
font-family: 'Consolas';
font-weight: bold;
text-align: right;
padding-right: 20px;
}
&.green {
background-color: #44C14A;
}
&.yellow {
background-color: #C2C653;
}
&.red {
background-color: #BB413E;
}
}
}
}
}
$("input[type='range']").on('change', function(evt) {
var $this = $(this),
$display = $this.next('.display'),
$initLikelyhood = $('.initialRiskScore > .likelyhoodHolder'),
$initConseq = $('.initialRiskScore > .consequencesHolder'),
$finalLikelyhood = $('.finalRiskScore > .likelyhoodHolder'),
initTemplate = "
Initial
", finalTemplate = "Final
", initLikelyhoodVal = $initLikelyhood.find('input').val(), initConseqVal = $initConseq.find('input').val(), finalLikelyhoodVal = $finalLikelyhood.find('input').val() initialSlug = "[data-coords= '" + initLikelyhoodVal + "_" + initConseqVal + "']", finalSlug = "[data-coords= '" + finalLikelyhoodVal + "_" + initConseqVal + "']";; // Update this number $display.find('span').html($this.val()); // Clear all previous results $('.initialValue, .finalValue').remove(); // Place initial $('td' + initialSlug).html(initTemplate); // Place Final $('td' + finalSlug).html(finalTemplate); });Initial
Likelyhood
1
Consequences
1
Final
Likelyhood
1
| 5 | |||||
| 4 | |||||
| 3 | |||||
| 2 | |||||
| 1 | |||||
| 1 | 2 | 3 | 4 | 5 |
Comments
Post a Comment