bat-ria/src/css/ui.less

RIA extension for Brand Ads Team

/* 处理同一行中的ESUI控件的对齐、间距 */
.ui-row {
    padding: 8px 10px;
    .clearfix();

    &,
    .ui-group,
    .form-value {
        & > [data-ctrl-id] {
            float: left;
            margin-left: 10px;

            &:first-child {
                margin-left: 0;
            }
        }
    }

    & > .ui-group {
        float: right;
    }
}

/* 禁用时鼠标指针增强 */
.state-disabled,
.state-disabled:hover {
    cursor: not-allowed;
}

/* 给一些ESUI控件的样式打patch */

.ui-table-subrow {

    .ui-table-row-last + & {
        border-top-width: 1px;
    }

    padding: 4px;

    table {
        width: 80%;
        border: none;
    }

    th {
        font-weight: 700;
    }

    th,
    td {
        padding: 4px;
        text-align: center;
    }
}

// esui/Pager
.ui-pager-main li {
    font-family: inherit;
}

// esui/Table
.ui-table-cell-editable {
    .ellipsis();
}

.ui-table-row-hover .ui-table-cell-editable {
    padding: 1px 24px 1px 9px;
}

.ui-table-cell-editentry {
    top: 7px;
    right: 5px;
}

.ui-table-subentry {
    margin: 0 auto;
}

// esui/Dialog
.ui-dialog-title {
    font-size: 12px;
}

.ui-dialog-body {
    padding: 10px 14px 20px;
}

.ui-dialog-foot {
    float: left;

    .ui-button {
        width: auto;
    }
}

.ui-dialog-foot-panel {
    padding: 10px 0 10px 6px
}

// esui/Button
.skin-spring-button {
    height: 26px;
    line-height: 26px;
}

.skin-link-button {
    .bat-linkify();
}

button.skin-link-button {
    outline: none;
}

button.skin-link-button:active,
button.skin-link-button:hover {
    height: 26px;
}

.skin-spring-button-disabled {
    &,
    &:hover,
    &:active {
        .linear-gradient-background(top, #a9d796, #a9d796);
        border-color: #8ac971;
    }
}

.skin-spring-add-disabled {
    &,
    &:hover,
    &:active {
        .linear-gradient-background-with-image (
            top, #a9d796, #a9d796, "../img/esui-button-plus.gif", 9px, center, #a9d796);
        border-color: #8ac971;
    }
}

.skin-download-button {
    .linear-gradient-background-with-image (
        top, #FFF, #f6f6f6, "../img/esui-btn-download.png", 9px, center, #ffffff);
    padding-right: 13px;
    padding-left: 27px;
}
.skin-download-button:active {
    .linear-gradient-background-with-image (
        top, #f6f6f6, #FFF, "../img/esui-btn-download.png", 9px, center, #f6f6f6);
}

// esui/RangeCalendar
.ui-rangecalendar {
    .linear-gradient-background (top, #ffffff, #f6f6f6, #ffffff);
}

// esui/BoxGroup
.ui-checkbox,
.ui-radio,
.ui-boxgroup-checkbox,
.ui-boxgroup-radio {
    input {
        margin-bottom: 0.15em;
    }
}

// esui/Textbox
.ui-textbox {
    &,
    & input,
    & textarea {
        .placeholder(@bat-aux-color);
    }
}

// esui/Tab
.ui-tab-horizontal {
    .ui-tab-navigator {
        .clearfix();
        overflow: visible;
        border-bottom: none;
    }

    .ui-tab-item {
        position: relative;
        top: 1px;
        margin-right: 5px;
        border: 1px solid #447ED0;
        padding: 6px 12px 5px;
        background-color: #447ED0;
        color: #FBFFF5;
    }

    .ui-tab-item-active {
        padding-bottom: 6px;
        border-color: @bat-border-blue;
        border-bottom-color: @bat-bg-light-blue;
        background-color: @bat-bg-light-blue;
        color: #313131;
    }
}

// esui/Toast
.ui-toast-content {
    padding: 0 10px;
    font-size: 12px;
    color: #555;

    .ui-toast-normal & {
        background-color: #FFF4DA;
        box-shadow: 0px 2px 10px 0px #9B9B9B;
        border-color: #D9CBAA;
    }

    .ui-toast-success & {
        background-color: #90EE90;
        box-shadow: 0px 2px 10px 0px #9B9B9B;
        border-color: #57C24E;
    }

    .ui-toast-error & {
        background-color: #C00;
        box-shadow: 0px 2px 10px 0px #9B9B9B;
        border-color: #900;
        color: #FFF;
    }
}

// esui/Select
.ui-select-validity-label-invalid {
    display: inline-block;
    margin: 0;
    border: none;
    padding-left: 10px;
    background: none;
    color: #C00;
}

// esui/Wizard
.skin-default-wizard {
    .ui-wizard-node {
        padding-right: 8px;

        &:first-child span:before {
            display: none;
        }

        span {
            background-color: @bat-bg-blue;
            font-size: 12px;
            font-weight: 400;
            color: #999;
            &:before {
                left: -6px;
                border-left-width: 6px;
                border-top-color: @bat-bg-blue;
                border-bottom-color: @bat-bg-blue;
            }

            &:after {
                right: -6px;
                border-left-width: 6px;
                border-left-color: @bat-bg-blue;
            }
        }
    }

    .ui-wizard-node-active span {
        background-color: @bat-bg-dark-blue;
        color: #333;

        &:before {
            border-top-color: @bat-bg-dark-blue;
            border-bottom-color: @bat-bg-dark-blue;
        }
        &:after {
            border-left-color: @bat-bg-dark-blue;
        }
    }

    .ui-wizard-node-done span {
        background-color: @bat-bg-blue;
    }
}

// esui/Crumb
.ui-crumb-node-last {
    font-weight: 700;
}


// bat-ria/Uploader
.ui-uploader {
    display: inline-block;
    *width: 150px;
    white-space: normal;
}

.ui-uploader-input-container {
    *float: left;
}