DSF Landing

by Shawn Wood

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/calendar/assets/calendar.css" />
<link rel="stylesheet" type="text/css" href="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/container/assets/container.css" />

<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/dom/dom-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/event/event-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/connection/connection-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/animation/animation-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/element/element-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/get/get-min.js"></script>

<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/container/container-min.js"></script>
<script type="text/javascript" src="https://dssa-kdre.disastorefront.com/kinetic/themes/ddsf/common/resources/yui/build/button/button-min.js"></script>
<script type="text/javascript"...

CSS

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.row>[class^=col-] {
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

@media (min-width: 576px)
.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
/*
 * These style properties are applied to the ordering pages
 * to get some CSS Sacfolding into the pages to remove table
 * formatting used in forms. Eventually to be replaced with Bootstrap.
 * TODO: Replace this with Bootstrap 4.X when YUI is removed
 */
element.style {
    position: relative;
    min-height: 100%;
    top: 0px;
}         
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
    box-sizing: inherit;
    }
    label[for]{
    font-weight: bold;
    }
    .label-right {
    text-align: right;
    }
    div.required label:first-child:not(.radio,.checkbox) {
    font-weight: bold;
    }

    div.required label:first-child span:after {
    color: red !important;
    content: "*";
    }

    div.required > div .failed-validation {
    border:                2px dotted red;
    background-color:    #FFCECE !important;
    }
    div.required.updated{
    font-weight: normal;
    }

    div.required.updated:after{
    color: transparent !important;
    content: "";
    }
    /* Temporary Responsive Scaffolding TODO: Replace with Bootstrap when refactor can be done */
    .dsf-row:after, .dsf-row:before, .dsf-container:after, .dsf-container:before {
    content: "";
    display: table;
    clear: both;
    }
    .dsf-col,
    .dsf-half,
    .dsf-third,
    .dsf-twothird,
    .dsf-threequarter,
    .dsf-quarter {
    float: left;
    width: 100%
    }
    .dsf-col.s1 {
        width: 8.33333%
    }
...