breeze-client-labs/breeze.directives.css

Breeze Labs are extensions and utilities for Breeze.js client apps that are not part of core breeze.

/*
 * CSS to accompany the breeze.directives
 * such as breeze.directives.js
 *
 * v.1.3.10
 *
 * Copyright 2015 IdeaBlade, Inc.  All Rights Reserved.
 * Licensed under the MIT License
 * http://opensource.org/licenses/mit-license.php
 * Author: Ward Bell
 */

/*#region validation */
.icon-asterisk-invalid {
    color: red;
    margin: 0.2em;
    font-size: 2em;
    font-weight: bold;
}

.z-required {
    margin: 0.2em;
    position: relative;
}
input + .z-decorator > .z-required {
    top: 0.4em;
}

select + .z-decorator > .z-required {
    top: 0.2em;
}

.invalid {
    position: absolute;
    display: none;
    -moz-min-width: 200px;
    -ms-min-width: 200px;
    -o-min-width: 200px;
    -webkit-min-width: 200px;
    min-width: 200px;
    min-height: 20px;
    max-width: 450px;
    max-height: 40px;
}

input:invalid,
textarea:invalid,
select:invalid {
    border: red solid 1px !important;
    border-left: 5px solid red !important;
}
span.z-decorator span.invalid,
    input:invalid + .z-decorator > .invalid,
    textarea:invalid + .z-decorator > .invalid,
    select:invalid + .z-decorator > .invalid {
        visibility: visible;
        display: inline-block;
        background-color: rgb(189, 54, 47);
        margin: 0.3em 0 0 1em;
        padding: 4px 10px;
        -ms-border-radius: 3px 3px 3px 3px !important;
        border-radius: 3px 3px 3px 3px !important;
        background-position: 15px center;
        background-repeat: no-repeat;
        -webkit-box-shadow: 0 0 12px #999999;
        -ms-box-shadow: 0 0 12px #999999;
        box-shadow: 0 0 12px #999999;
        color: #ffffff;
        -ms-opacity: 0.8;
        opacity: 0.8;
        z-index: 20;
    }

    select:invalid + .z-decorator > .invalid {
        margin: 0.1em 0 0 1em;
    }
.invalid > i {
    margin-right: 8px;
}
/*#endregion */