Preware sample

by Art Dahm

HTML

<script>
    new enyo.sample.FittableAppLayout1().renderInto(document.body);
</script>

CSS

.preware-banner-icon {
    position:absolute;
    left:0;
    top:0;
    width:80px;
    height: 80px;
}

.preware-banner-line {
    margin-left:90px;
    display:block;
}

/* ================================= */

.fittable-sample-box {
    border: 2px solid lightblue;
    padding: 4px;
}
.fittable-sample-b {
    background-color: #F1FFF1;
}
.fittable-sample-mtb {
    margin-top: 3px;
    margin-bottom: 3px;
}
.fittable-sample-mlr {
    margin-left: 6px;
    margin-right: 6px;
}
.fittable-sample-o {
    border-color: orange;
}
.fittable-sample-height {
    height: 140px;
}

.fittable-sample-fitting-color {
    background: #B7BFC4;
}

.fittable-sample-shadow {
    box-shadow: -6px 0px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: -6px 0px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: -6px 0px 6px rgba(0,0,0,0.3);
}

.fittable-sample-shadow2 {
    box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 6px 6px 6px rgba(0,0,0,0.3);
}

.fittable-sample-shadow3 {
    box-shadow: 0 -6px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 -6px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 -6px 6px rgba(0,0,0,0.3);
}

.fittable-sample-shadow4 {
    box-shadow: 6px 0px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 6px 0px 6px rgba(0,0,0,0.3);
    -webkit-box-shadow: 6px 0px 6px rgba(0,0,0,0.3);
}

.fittable-sample-boxable {
    margin: 0.5em;
    padding: 1em;
    border: 0.2em solid beige;
}

.fittable-sample-boxable > * {
    border: 0.1em dotted orange;
    padding: 0.5em;
}

.fittable-sample-test {
    border-width: 0.2em;
    border-color: red;
}

.fittable-sample-small-test {
    border-width: 0.2em;
    border-color: red;
    height: 150px;
}

.fittable-sample-section {
    padding: 30px 10px 10px;
    font-weight: bold;
}

JavaScript

enyo.kind({
    name: "enyo.sample.FittableAppLayout1",
    kind: "FittableRows", 
    classes: "enyo-fit", 
    components: [
        {kind: "onyx.Toolbar", style: "height:90px", components: [
            {kind: "enyo.Image", classes: "preware-banner-icon", src: "http://dragongears.com/gears_anim_80_faster.gif"},
            {classes: "preware-banner-line", style: "background-color:blue;", components: [
                {tag: "span", allowHtml: true, content: "Preware&nbsp;"},
                {tag: "span", style: "font-size: 12px;", content: "v.1.0"}
            ]},
            {classes: "preware-banner-line", style: "background-color:red;font-size:12px;", content: "Sample Text"}
        ]},
        {kind: "FittableColumns", fit: true, components: [
            {style: "width: 75px;", content: "Left content"},
            {kind: "FittableRows", fit: true, classes: "fittable-sample-shadow", components: [
                {style: "position: relative; z-index: 1;", content: "Right content"}
            ]}
        ]}
    ]
});