Skip to content

Instantly share code, notes, and snippets.

@esjay

esjay/index.haml

Created December 17, 2012 22:03
Show Gist options
  • Save esjay/4322734 to your computer and use it in GitHub Desktop.
Save esjay/4322734 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by esjay.
Raw
index.haml
- @performance_doc ||= "#performance"
- @reinforcement_doc ||= "#reinforcment"
- @feedback_doc ||= "#feedback"
- @measurement_doc ||= "#measurement"
%body
#slider
.content.scroll
.intro.explanation
%h2 Introduction
%p
If you’ve read
%a{href: @performance_doc} The Basics of Performance
you know that there are a many reasons why individuals or groups aren’t doing what you would expect them to do. It goes way beyond “skill versus will” and gets in to other significant reasons gaps exist between what’s expected and is really happening.
%p
This interactive tool is designed to:
%ul
%li
Identify the performance gap between current and desired state or more simply to define a problem or opportunity brought to you by a business partner or one you’ve discovered on your own in observable and measurable terms.
%li
Determine what is causing this difference between where an individual or group is and where they need to be to drive the business.
%li
Record relevant data before and after you’ve introduced a solution to see if it made a difference.
%li
Point out solutions that can reduce the performance gap you’ve identified.
%p
This tool has a second benefit. It provides us with a repository to record the projects that have been implemented. Having this information archived makes it easy for us to show others how the work we do impacts our organization’s strategic initiatives and impacts the bottom line.
%p
You may be wondering just when to use this tool. Here are some examples:
%ul
%li
You are meeting with a business partner to explore an opportunity that one of both of you has discovered.
%li
You have been given a project by a manager, business partner or peer that requires some investigation before deciding what you need to do.
%li
A business report that you review regularly suggests that something needs to change.
%li
Someone tells you they need training developed and delivered.
%li
A business partner tells you that an individual, work team or business group has a problem meeting their expectations.
%li
You have been asked to observe how someone works and determine what training they need to obtain better results.
%li
You see an opportunity for an individual, work team or business group to do something better, quicker or using fewer resources.
%li
A business process seems to be full of disconnects, handoffs and redundant steps that could be streamlined.
%p
The bottom line is that this tool should be used any time you uncover an opportunity close a gap at the individual, work team or business group level between what’s happening today and what’s expected. This will be our “one stop” resource for capturing the solutions we’ve implemented and their impact on the organization.
%h2 Get on the scale
%p
Believe it or not, there are more ways to measure success for a particular solution than you will ever use. Finding the right metrics to tell the story of the impact your solution has had must begin before you ever implement it. The trick is to select those 2 or 3 that best document impact.
%p
Once you’ve determined the right metrics, you have to measure before you implement a solution. Think of it this way, you wouldn’t start a diet without weighing yourself first. The same principle fits for any performance gap you are trying to close.
%div.metrics.priorities.group
%p
Take a look at the options below and drag the 2 or 3 that best show the impact your solution has on our business into the List on the left. Then, sort them into the appropriate order of their estimated priority.
%div#relevant
%h3 Relevant Metrics for this Solution
%h4 Drag metrics relevant for this solution from the Available Metrics list to here.
%ol#relev_metrics.draggable.metric.connected.group
%div#available
%h3 Available Metrics
%ol#avail_metrics.draggable.connected.metric.group
%li.quantity
Recording “how many” tasks, outputs, or tangible products are produced or delivered is important to documenting the impact of this solution.
%li.quantity
Recording “how long” it takes to complete an assignment, task or activity is important to documenting the impact of this solution.
%li.quantity
Recording both “how many” tasks, outputs or tangible products are produced or delivered and “how long” it takes are important to documenting the impact of this solution.
%li.quality
Capturing how accurately the task, output, assignment or activity matches what was supposed to occur is important to documenting the impact of this solution.
%li.quality
Capturing how unique, novel or innovative the solution implemented is important.
%li.quality
Recording if our solution did what it was supposed to do is important to documenting its impact.
%li.quality
Knowing how pleased our business partner was with how effectively our solution addressed their business need is something we want to capture.
%li.quality
Is the value of our post implementation interactions with our business partners something that would document the impact of this solution.
%li.cost
Capturing the dollar impact on the business is an important way to document the impact of this solution. If so, what dollars do we want to track.
.solutions
.expectations
%h2 Clear Directions and Expectations:
%p.explanation
People doing work need to know what you want and expect them to do. Ask the following questions to determine if a potential solution to close a performance gap exists here.
%ol.questions
%li
%p.question-text Is there anyone in the business group or work team that is currently able to do what’s expected?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "expect01", :id => "expect01-yes", :value => "yes"}
%label{:for => "expect01-yes"} Yes
%div.response-yes.question-response
%p
A yes answer here suggests that individuals know what’s expected of them.
%li.choice-no
%input{:type => "radio", :name => "expect01", :id => "expect01-no", :value => "no"}
%label{:for => "expect01-no"} No
%div.response-no.question-response
%p
A no answer indicates that this is an issue that needs to be addressed at the business group or work team level. If no one can do what’s expected it could very well be that the expectations, goals or objectives need to be reworked or recommunicated.
%p
Work with your business partner to confirm the expectations, goals and objectives are appropriate and build a plan to communicate them to everyone on the team.
%li
%p.question-text Can team members clearly state what’s expected of them and does their interpretation of the expectations, goals or objectives match the business leader’s?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "expect02", :id => "expect02-yes", :value => "yes"}
%label{:for => "expect02-yes"} Yes
%div.response-yes
%p
A yes answer suggests that individuals know what’s expected and their interpretation of the expectations, goals or objectives align with the business leader.
%li.choice-no
%input{:type => "radio", :name => "expect02", :id => "expect02-no", :value => "no"}
%label{:for => "expect02-no"} No
%div.response-no
%p
A no answer suggests that something about the expectations, goals or objectives have been misinterpreted.
%p
Determine first if this misinterpretation exists across the business group or with certain individuals.Work with your business partner to build and deliver a plan to communicate the expectations, goals or objectives at the appropriate level.
%li
%p.question-text Are individual and team goals clear, measurable and obtainable and within the control of each team member?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "expect03", :id => "expect03-yes", :value => "yes"}
%label{:for => "expect03-yes"} Yes
%div.response-yes
%p
A yes answer suggests that the existing expectations, goals and objectives are relevant and obtainable.
%li.choice-no
%input{:type => "radio", :name => "expect03", :id => "expect03-no", :value => "no"}
%label{:for => "expect03-no"} No
%div.response-no
%p
A no answer will require you to work with you business partner to review the existing expectations, goals and objectives to assure they direct people to do the things you want to see. Also be prepared to confirm that they are truly in the control of the group you expect to perform them. If not, revise and communicate them to the team members.
.resources
%h2 Resources and Processes:
%p
People will perform effectively if we lay out processes that contain the right steps that are assigned to the right business groups. A clear step-by step process that shows who does what, when and where is more likely to generate work done right the first time. Also, providing the right tools and resources when they are needed will assure people perform effectively. Ask the following questions to determine if a potential solution to close a performance gap exists here.
%ol.questions
%li.question-text
%p Are people allowed enough time to do everything that’s expected of them for this particular assignment or task?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "resource01", :id => "resource01-yes", :value => "yes"}
%label{:for => "resource01-yes"} Yes
%div.response-yes
%p
A yes answer suggests that the process in place has included all the steps that really need to be accomplished.
%li.choice-no
%input{:type => "radio", :name => "resource01", :id => "resource01-no", :value => "no"}
%label{:for => "resource01-no"} No
%div.response-no
%p
A no answer suggests that either the process is missing some key steps or the overall timeline for completing the process is unreasonable. Create an IS map to record all of the steps, handoffs and outcomes of the current process. Next, determine the time it takes to complete every step of the process today. Now generate a SHOULD map that eliminates steps that aren’t relevant or occur multiple times or in multiple places, and handoffs that aren’t required. This streamlined process should be more efficient and reduce the time it takes to complete the updated process.
%li
%p.question-text Can the existing business processes be completed successfully without relying on work-arounds or extra effort on the part of people completing the process?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "resource02", :id => "resource02-yes", :value => "yes"}
%label{:for => "resource02-yes"} Yes
%div.response-yes
%p
A yes answer suggests that the process in place has included all the steps that really need to be accomplished.
%li.choice-no
%input{:type => "radio", :name => "resource02", :id => "resource02-no", :value => "no"}
%label{:for => "resource02-no"} No
%div.response-no
%p
A no answer suggests that either the process is missing some key steps or the overall timeline for completing the process is unreasonable. Create an IS map to record all of the steps, handoffs and outcomes of the current process. Next, determine the time it takes to complete every step of the process today. Now generate a SHOULD map that eliminates steps that aren’t relevant or occur multiple times or in multiple places, and handoffs that aren’t required. This streamlined process should be more efficient and reduce the time it takes to complete the updated process.
%li
%p.question-text Do people have the right tools (software applications, hardware, job aids, templates,etc) to do what’s expected?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "resource02", :id => "resource02-yes", :value => "yes"}
%label{:for => "resource02-yes"} Yes
%div.response-yes
%p
A yes answer suggests that people are equipped to be successful.
%li.choice-no
%input{:type => "radio", :name => "resource02", :id => "resource02-no", :value => "no"}
%label{:for => "resource02-no"} No
%div.response-no
%p
A no answer should trigger a brainstorming session with a sample of people performing the role to determine what they need. Generate a list of suggestions and prioritize them using a Pareto Analysis by the impact they will have as well as the costs associated with procuring or building them. Share this list with your business partner and determine which ones can be implemented.
.skill
%h2 Skill Deficits:
%p.explanation
People may not be able to do what you expect because they don’t know how. Ask the following question to determine if training is an appropriate solution.
%ol.questions
%li
%p.question-text Could this individual or business group do what’s expected of them if their livelihood or the livelihood of others depended on it?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "skill01", :id => "skill01-yes", :value => "yes"}
%label{:for => "skill01-yes"} Yes
%div.response-yes
%p
A yes answer suggests that training will not reduce the current performance gap.
%li.choice-no
%input{:type => "radio", :name => "skill01", :id => "skill01-no", :value => "no"}
%label{:for => "skill01-no"} No
%div.response-no
%p
A no answer indicates that a thorough needs analysis will have to be conducted to determine the skill deficits, terminal objective, learning objectives, the appropriate content, practice, feedback and reflection required to skill up a group or an individual. Build out a story board and instructional plan and share it, along with the timeline for implementation, delivery method, costs for development/delivery of the instructional material and Level 1-4 metrics to your business partner for approval.
.motivation
%h2 Motivation:
%p.explanation
People who have everything they need to perform and have shown the ability to do what is expected in the past may not be meeting expectations today. This indicates some conscious decision to perform at levels lower than normal.
Ask the following question to determine if addressing internal motivation is an appropriate solution.
%ol.questions
%li
%p.question-text Are there individuals or groups who know what’s expected and have shown the ability to perform but aren’t doing it now?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "motivation01", :id => "motivation01-yes", :value => "yes"}
%label{:for => "motivation01-yes"} Yes
%li.choice-no
%input{:type => "radio", :name => "motivation01", :id => "motivation01-no", :value => "no"}
%label{:for => "motivation01-no"} No
%div.response-no
%p
A no answer suggests that there is no need to explore ways to impact internal motivation.
%div.response-yes
%p
A yes answer suggests that something has changed within the business group or with an individual that has resulted in a decrease in performance. These situations require an intervention that has to be conducted by the work team’s or individual’s immediate supervisor. We can assist by providing past performance data, acting as a sounding board for our business partner or by observing behavior as an objective third party. Ultimately a solution has to be generated and implemented by a member of the management team.
.feedback
%h2 Feedback on Performance:
%p.explanation
Feedback is defined as “information on performance”. People need to know how well they are doing in reference to the expectations set for them. Ask the following questions to determine if providing feedback to a group or an individual is an appropriate solution.
%ol.questions
%li
%p.question-text Do work teams and individuals receive specific feedback on how they are performing against expectations in a timely fashion?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "feedback01", :id => "feedback01-yes", :value => "yes"}
%label{:for => "feedback01-yes"} Yes
%li.choice-no
%input{:type => "radio", :name => "feedback01", :id => "feedback01-no", :value => "no"}
%label{:for => "feedback01-no"} No
%div.response-yes
%p
A yes answer indicates that the work team or individual is receiving information on their performance.
%div.response-no
%p
A no answer suggests that you and your business partner should create a feedback system that meets the SIPS criteria (sincere, immediate, personal and specific). Create a plan to share information on performance with the work team or individual that needs it. The plan should include what information is most relevant to share and will truly impact how people perform, how to share the information (post it publically, say it , write it down and share it) while protecting individual results from others and how often to share it. When dealing with individuals it is always best to build a plan with them using their preferences as a guide. The same process can be used when building a feedback system for team results. If you have additional questions about feedback, read The Basics of Feedback.
%li
%p.question-text Do work teams and individuals have access to feedback from customers regarding their ability to meet expectations?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "feedback02", :id => "feedback02-yes", :value => "yes"}
%label{:for => "feedback02-yes"} Yes
%li.choice-no
%input{:type => "radio", :name => "feedback02", :id => "feedback02-no", :value => "no"}
%label{:for => "feedback02-no"} No
%div.response-yes
%p
A yes answer indicates that the work team or individual is receiving information on their performance.
%div.response-no
%p
A no answer suggests that you and your business partner should create a feedback system that meets the SIPS criteria (sincere, immediate, personal and specific). Create a plan to share information on performance with the work team or individual that needs it. The plan should include what information is most relevant to share and will truly impact how people perform, how to share the information (post it publically, say it , write it down and share it) while protecting individual results from others and how often to share it. When dealing with individuals it is always best to build a plan with them using their preferences as a guide. The same process can be used when building a feedback system for team results. If you have additional questions about feedback, read The Basics of Feedback.
.recognition
%h2 Recognizing Good Performance:
%p.explanation
Behaviors and accomplishments that are recognized and reinforced get repeated. Sounds simple but understand that this means desirable behaviors and accomplishments that occur routinely are being rewarded. Also, undesirable behaviors and accomplishments that occur routinely are also being rewarded in some way, shape or form. Ask these questions to see if building a system to reinforce desired behaviors and accomplishments is a solution.
%ol.questions
%li
%p.question-text Are there instances where undesirable behaviors and accomplishments are occurring on a regular basis?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "recognition01", :id => "recognition01-yes", :value => "yes"}
%label{:for => "recognition01-yes"} Yes
%li.choice-no
%input{:type => "radio", :name => "recognition01", :id => "recognition01-no", :value => "no"}
%label{:for => "recognition01-no"} No
%div.response-yes
%p
A yes suggests that the wrong behaviors and accomplishments are being rewarded in some way. Work with your business partner to identify behaviors that are mutually exclusive (sitting and standing are mutually exclusive…you can’t do one if you are doing the other) and Pinpoint alternatives. Create a system that recognizes desirable behaviors and accomplishments and the frequency you will use to deliver rewards. If you have additional questions about reinforcement, read The Basics of Reinforcement.
%div.response-no
%p
A no answer suggests that rewards are being appropriately applied to instances of desired behaviors and accomplishments.
%li
%p.question-text Are individual or work teams being rewarded through a variety of techniques like private or public praise, tangible and intangible rewards delivered after desired behaviors or accomplishments are exhibited?
%ol.answers.group
%li.choice-yes
%input{:type => "radio", :name => "recognition02", :id => "recognition02-yes", :value => "yes"}
%label{:for => "recognition02-yes"} Yes
%li.choice-no
%input{:type => "radio", :name => "recognition02", :id => "recognition02-no", :value => "no"}
%label{:for => "recognition02-no"} No
%div.response-yes
%p
A yes answer suggests that rewards are being appropriately applied to instanced of desired behaviors and accomplishments.
%div.response-no
%p
A no answer suggests that that desired behaviors and accomplishments are not being recognized and celebrated.Work with your business partner to identify key behaviors and accomplishments you want repeated and significant enough to be recognized. Determine what levels of recognition is appropriate for each and build a plan to deliver rewards when desirable behaviors and accomplishments occur. Consider the types of recognition and timing of each category in your overall plan. If you have additional questions about reinforcement, read The Basics of Reinforcement.
Raw
script.js
/*
* HTML5 Sortable jQuery Plugin
* http://farhadi.ir/projects/html5sortable
*
* Copyright 2012, Ali Farhadi
* Released under the MIT license.
*/
(function($) {
var dragging, placeholders = $();
$.fn.sortable = function(options) {
var method = String(options);
options = $.extend({
connectWith: false
}, options);
return this.each(function() {
if (/^enable|disable|destroy$/.test(method)) {
var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
if (method == 'destroy') {
items.add(this).removeData('connectWith items')
.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
}
return;
}
var isHandle, index, items = $(this).children(options.items);
var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
items.find(options.handle).mousedown(function() {
isHandle = true;
}).mouseup(function() {
isHandle = false;
});
$(this).data('items', options.items)
placeholders = placeholders.add(placeholder);
if (options.connectWith) {
$(options.connectWith).add(this).data('connectWith', options.connectWith);
}
items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
if (options.handle && !isHandle) {
return false;
}
isHandle = false;
var dt = e.originalEvent.dataTransfer;
dt.effectAllowed = 'move';
dt.setData('Text', 'dummy');
index = (dragging = $(this)).addClass('sortable-dragging').index();
}).on('dragend.h5s', function() {
if (!dragging) {
return;
}
dragging.removeClass('sortable-dragging').show();
placeholders.detach();
if (index != dragging.index()) {
dragging.parent().trigger('sortupdate', {item: dragging});
}
dragging = null;
}).not('a[href], img').on('selectstart.h5s', function() {
this.dragDrop && this.dragDrop();
return false;
}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
return true;
}
if (e.type == 'drop') {
e.stopPropagation();
placeholders.filter(':visible').after(dragging);
dragging.trigger('dragend.h5s');
return false;
}
e.preventDefault();
e.originalEvent.dataTransfer.dropEffect = 'move';
if (items.is(this)) {
if (options.forcePlaceholderSize) {
placeholder.height(dragging.outerHeight());
}
dragging.hide();
$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
placeholders.not(placeholder).detach();
} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
placeholders.detach();
$(this).append(placeholder);
}
return false;
});
});
};
})(jQuery);
$('#relev_metrics, #avail_metrics').sortable({
connectWith: '.connected'
});
$('#relev_metrics, #avail_metrics').sortable().bind('sortupdate', function() {
//Triggered when the user stopped sorting and the DOM position has changed.
// Store the db ids of the metrics in both lists for this project
});
Raw
style.css
* { box-sizing: border-box; }
#available, #relevant {
width: 45%;
float: left;
margin-left: 1%;
position: relative;
height: 100%;
}
ol.metric {
list-style-type: none;
padding-left: 0;
min-height; 30em;
border: 3px solid lightgrey dashed;
display: block;
background: #474747;
height: 60em;
}
.metric li {
border: 0 solid #999;
min-height: 3.3em;
margin: .3em auto;
box-align: vertical-center;
padding: .3em;
background: #eee;
box-shadow: 0 1px 3px #000;
cursor: move;
position: relative;
clear: both;
}
#relevant ol.metric {
counter-reset:li;
position: relative;
}
#relevant h4 {
// left: 0;
position: absolute;
clear: none;
color: #000;
text-shadow: 0px 1px 1px #666;
display: box;
background: transparent;
box-align: center;
margin: 2em;
text-transform: uppercase;
font-size: 20pt;
cursor: default;
z-index: 8;
}
#relevant h4::selection {
background: transparent;
}
.metric li {
padding: 1.2em .1em .2em 3em;
z-index: 9;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.metric li:after {
//transform: rotate(90deg);
position: absolute;
display: box;
width: 100%;
// height: 100%;
font-size: 10pt;
margin-top: 0;
top: 0;
left: 0;
float: left;
box-align: top;
padding: 0 0 0 1em;
color: #666;
//font-weight: bolder;
}
li.quantity:after {
background: #ff8833;
background: -moz-linear-gradient(left, rgba(255,136,51,1) 0%, rgba(255,182,133,0) 70%, rgba(255,201,168,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,136,51,1)), color-stop(70%,rgba(255,182,133,0)), color-stop(100%,rgba(255,201,168,0)));
background: -webkit-linear-gradient(left, rgba(255,136,51,1) 0%,rgba(255,182,133,0) 70%,rgba(255,201,168,0) 100%);
background: -o-linear-gradient(left, rgba(255,136,51,1) 0%,rgba(255,182,133,0) 70%,rgba(255,201,168,0) 100%);
background: -ms-linear-gradient(left, rgba(255,136,51,1) 0%,rgba(255,182,133,0) 70%,rgba(255,201,168,0) 100%);
background: linear-gradient(to right, rgba(255,136,51,1) 0%,rgba(255,182,133,0) 70%,rgba(255,201,168,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8833', endColorstr='#00ffc9a8',GradientType=1 );
content: 'Quantity';
}
li.quality:after {
background: #75d5e6;
background: -moz-linear-gradient(left, rgba(117,213,230,1) 0%, rgba(174,221,229,0) 70%, rgba(199,225,229,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(117,213,230,1)), color-stop(70%,rgba(174,221,229,0)), color-stop(100%,rgba(199,225,229,0)));
background: -webkit-linear-gradient(left, rgba(117,213,230,1) 0%,rgba(174,221,229,0) 70%,rgba(199,225,229,0) 100%);
background: -o-linear-gradient(left, rgba(117,213,230,1) 0%,rgba(174,221,229,0) 70%,rgba(199,225,229,0) 100%);
background: -ms-linear-gradient(left, rgba(117,213,230,1) 0%,rgba(174,221,229,0) 70%,rgba(199,225,229,0) 100%);
background: linear-gradient(to right, rgba(117,213,230,1) 0%,rgba(174,221,229,0) 70%,rgba(199,225,229,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#75d5e6', endColorstr='#00c7e1e5',GradientType=1 );
content: 'Quality';
}
li.cost:after {
background: #8fd68b;
background: -moz-linear-gradient(left, rgba(143,214,139,1) 0%, rgba(193,234,194,0) 70%, rgba(215,242,218,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(143,214,139,1)), color-stop(70%,rgba(193,234,194,0)), color-stop(100%,rgba(215,242,218,0)));
background: -webkit-linear-gradient(left, rgba(143,214,139,1) 0%,rgba(193,234,194,0) 70%,rgba(215,242,218,0) 100%);
background: -o-linear-gradient(left, rgba(143,214,139,1) 0%,rgba(193,234,194,0) 70%,rgba(215,242,218,0) 100%);
background: -ms-linear-gradient(left, rgba(143,214,139,1) 0%,rgba(193,234,194,0) 70%,rgba(215,242,218,0) 100%);
background: linear-gradient(to right, rgba(143,214,139,1) 0%,rgba(193,234,194,0) 70%,rgba(215,242,218,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fd68b', endColorstr='#00d7f2da',GradientType=1 );
content: 'Cost';
}
.metric li:before {
margin: -.2em auto auto -1em;
position: absolute;
font-size: 2.5em;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 700;
text-fill-color: #fff;
text-shadow: black 0 0 4px;
// text-stroke: 2px #444;
background: #777;
padding: 0 0 0 .15em;
display: box;
box-sizing: border-box;
height: 100%;
top: 0.2em;
left: 1em;
position: absolute;
width: .8em;
text-align: left;
}
#relevant .metric li:before {
content: counter(li);
content: 10;
counter-increment: li;
padding: .25em 0 0 .15em;
}
#available .metric li:before {
//text-fill-color: #000;
content: '«';
// transform: scale(1, 1.0);
// margin: -.4em -0.75em;
font-size: 350%;
background: #777;
padding: 0 0 0 .15em;
display: box;
box-sizing: border-box;
height: 100%;
top: 0.2em;
left: 1em;
position: absolute;
width: .8em;
text-align: left;
}
.metric li:hover {
box-shadow: 0 0 4px darkblue;
background: #fff;
}
.metric li.sortable-placeholder {
border: 2px solid lightgrey dashed !important;
background: #fff;
}
.sortable-dragging {
box-shadow: 2px 3px 6px #000 !important;
//transform: rotate(3deg);
z-index: 150;
overflow: visible;
}
/* Question and Answer Response Section */
.questions>li {
border: 2px solid #aaa;
padding: 1.5em;
// min-height: 25em;
}
.answers {
// width: 40%;
// background: black;
padding: 0;
margin: auto;
// clear: both;
// min-height: 20em;
position: relative;
}
.answers>li {
list-style-type: none;
display: block;
width: 30%;
float: left;
margin: .05em;
// padding: 0 auto;
// background: #fff;
position: static;
}
.answers>li input {
float: left;
display: block;
overflow: hidden;
opacity: 0;
height: 0;
position: static;
}
.answers>li input:checked {
height: 16em;
min-height: 15em;
transition: all linear 300ms;
}
.answers>li input:checked~label {
background: lightgreen;
z-index: 2;
position: relative;
}
.answers>li input:checked~label:before {
content: 'X ';
font-size: 2em;
font-weight: bolder;
position: absolute;
left: .5em;
top: 0;
}
.question-response {
position: absolute;
top: 2.4em;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 0 1.5em;
border: 1px solid #ccc;
opacity: 0;
z-index: 0;
overflow: hidden;
display: block;
transition: all linear 300ms;
height: 0;
width: 30em;
}
.answers>li input:checked ~ label ~ .question-response {
z-index: 1;
// display: block;
transition: all linear 300ms;
min-height: 15em;
padding: 1.5em;
opacity: 1;
height: 15em;
}
.answers label {
width: 100%;
height: 50%;
background: lightgrey;
display: block;
text-align: center;
padding: .5em;
border: .15em solid transparent;
transition: all 100ms;
}
.answers label:hover {
background: #d3ebd5;
border-color: #52fa6c;
}
.choice-no .response-no {
// left: -100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment