AllieRuth Order From Alpha

by lukerichison

HTML

<script src="http://lcdsantos.github.io/jQuery-Selectric/js/jquery.selectric.js"></script>
<article about="/content/build-your-custom-invitation-suite" typeof="sioc:Item foaf:Document" role="article" class="node node--webform node--full node--webform--full">
  
      <footer class="node__submitted">
            <p class="submitted"><span property="dc:date dc:created" content="2014-10-21T12:30:17-05:00" datatype="xsd:dateTime" rel="sioc:has_creator">Submitted by <a href="/user/1" title="View user profile." class="username" xml:lang="" about="/user/1" typeof="sioc:UserAccount" property="foaf:name" datatype="">superadmin</a> on Tue, 2014-10-21 12:30</span></p>
    </footer>
  
  <div class="node__content">
    <form class="webform-client-form webform-client-form-85" enctype="multipart/form-data" action="/content/build-your-custom-invitation-suite" method="post" id="webform-client-form-85" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-order-name">
  <label for="edit-submitted-order-name">Order Name </label>
 <input type="text" id="edit-submitted-order-name" name="submitted[order_name]" value="" size="60" maxlength="128" class="form-text">
</div>
<div class="form-item webform-component webform-component-number" id="webform-component-suite-total">
  <label for="edit-submitted-suite-total">Suite Total </label>
 <span class="field-prefix">$</span> <input type="number" id="edit-submitted-suite-total" name="submitted[suite_total]" step="any" class="form-text form-number">
</div>
<div class="form-item webform-component webform-component-textfield" id="webform-component-delivery-date">
  <label for="edit-submitted-delivery-date">Delivery Date </label>
 <input type="text" id="edit-submitted-delivery-date" name="submitted[delivery_date]" value="" size="60" maxlength="128" class="form-text">
</div>
<div class="form-item webform-component webform-component-textfield"...

CSS

#order-form {
    border-top:  1px solid #E2C9A2;
    width: 650px;
}
#order-form + .pink-button {
    cursor: pointer;
}
#price-suite {
    float: right;
}
#order-form h3, #order-form p.note {
    margin: 0;
    border-left:  1px solid #E2C9A2;
    border-right:  1px solid #E2C9A2;
}
#order-form h3 {
    padding: 12px 4px 12px;
    font-family: "Sweet Sans";
    text-transform: uppercase;
    font-weight: normal;
}
#order-form h3 span {
    font-family: "Didot", serif;
    font-style: italic;
    color: #A47936;
    text-transform: none;
    font-size: 16px;
}
#order-form p.note {
    font-family: "Didot", serif;
    font-style: italic;
    font-size: 12px;
    color: #626362;
    padding: 6px 4px 54px;
}
#order-form table {
    border-collapse: collapse;
    width: 100%;
}
#order-form table, #order-form td, #order-form th {
    padding: 0;
}
#order-form table.options table td {
    border: 1px solid #E2C9A2;
}
#order-form table.options tr + tr table td {
    border-top: 0;
}

#order-form .selectric .label,
#order-form td label,
#order-form td select,
#order-form td input.custom {
    padding: 4px;
}
#order-form td label{
    position: absolute;
    font-family: 'Didot',serif;
    font-style: italic;
    font-size: 12px;
    line-height: 12px;
    color: #A47936;
    pointer-events: none;
    z-index: 99;
}
#order-form td input + label {
    position: relative;
}

#order-form td select,
#order-form .selectric .label,
#order-form td input.custom {
    font-family: "Sweet Sans";
    text-transform: uppercase;
    font-size: 14px;
    
    display: block;
    width: 100%;
    height: 42px;
    padding-top: 22px;
    
    margin: 0;
    outline: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius:...

JavaScript

/* ============================================================ *
 *                                                              *
 * ============================================================ */
$("#back").find("optgroup option").unwrap();
$(".back").find("optgroup option").unwrap();
$("#order-form").find(".icon").selectric({
    optionsItemBuilder: function(itemData, element, index){
        return element.val().length ? '<span class="ico ico-' + element.text() +  '">&emsp;&emsp;</span>' + itemData.text : itemData.text;
    }
});




/* ============================================================ *
 * Color Limiters                                               *
 * ============================================================ */
var CL  = ["Mist", "Daffy", "Tiffany", "Figi", "Emerald", "Verde", "Sapphire", "Rosa", "Pink", "Lavanda", "Ginger", "Coral", "Pomegranate", "Firecracker", "Sugared", "Serengheti", "Celadon", "Mystique", "Olive", "Pewter", "Stone", "Desert", "Natural", "White"],
    ec1 = ["Pomegranate", "Figi", "Natural", "White", "Olive", "Desert"],
    ec2 = ["Mystique", "Natural", "White", "Pink", "Pewter"],
    ec3 = ["Desert", "Sapphire", "Serengheti", "Daffy", "Pewter", "Natural", "White", "Stone", "Celadon"],
    ec4 = ["Olive", "Pink", "Rosa", "White", "Natural", "Pomegranate"],
    ec5 = ["Desert", "Natural", "White", "Daffy", "Lavanda", "Emerald", "Tiffany"],
    ec6 = ["Pewter", "Celadon", "Natural", "Desert", "White", "Pink", "Rosa", "Pomegranate", "Sugared"],
    ec7 = ["Natural", "White", "Emerald", "Pomegranate", "Rosa", "Pink"],
    ec8 = ["Rosa", "Pink", "Natural", "White", "Emerald", "Pomegranate"],
    ec9 = ["Mystique", "Daffy", "Figi", "Tiffany", "White", "Natural", "Desert", "Olive", "Rosa", "Pewter"],
    ec10= ["Tiffany", "Daffy", "Desert", "Natural", "White", "Pink Feather", "Stone"],
    ecA = [CL,ec1,ec2,ec3,ec4,ec5,ec6,ec7,ec8,ec9,ec10],
    cc1 = ["Pomegranate", "Figi", "Olive"],
    cc2 = ["Mystique", "Pink"],
    cc3 =...