web-apps/apps/spreadsheeteditor/main/resources/less/toolbar.less

.toolbar {
    padding: 10px 0;
    background-color: @gray-light;
    .box-inner-shadow(0 -1px 0 @gray-dark);

    .toolbar-group {
        display: table-cell;
        vertical-align: top;
        white-space: nowrap;
        padding-left: 12px;

        &:last-child {
            padding-right: 12px;
        }
    }

    .toolbar-row {
        height: 20px;
        font-size: 0;

        &:not(:first-child) {
            margin-top: 6px;
        }
    }

    .separator {
        margin-left: 12px;

        &.long {
            height: 46px;
        }

        &.short {
            height: 20px;
        }
    }

    .btn-placeholder {
//        background-color: red;
        display: inline-block;
        width: 20px;
        height: 20px;

        &:not(:first-child) {
            margin-left: 1px;
        }

        &.split {
            width: 28px;
        }

        &.border {
            border: 1px solid @gray;
            .border-radius(1px);
            width: 22px;
            height: 22px;
        }
    }

    &.masked {
        button.disabled .btn-icon:not(.btn-print):not(.btn-save):not(.btn-save-coauth):not(.btn-settings):not(.btn-showmode) {
            background-position-x: 0px !important;
        }
        .toolbar-group:not(.no-mask) {
            opacity: 0.4;
        }
    }
}

.toolbar-mask {
    position: absolute;
    top: 0;
    left: 48px;
    right: 45px;
    height: 100%;
    opacity: 0;
    background-color: @gray-light;
    z-index: @zindex-tooltip + 1;
}

.color-schemas-menu {
    span {
        &.colors {
            display: inline-block;
            margin-right: 15px;
        }

        &.color {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right: 2px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            vertical-align: middle;
        }

        &.text {
            vertical-align: middle;
        }
    }
}

// menu zoom
.menu-zoom {
    .title {
        padding: 5px 0 5px 20px;
        float: left;
        max-width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .zoom {
        padding: 5px 3px;
        float: right;
    }
}


@toolbar-icon-size: 20px;
.toolbar-btn-icon(btn-fontcolor,         0, @toolbar-icon-size);
.toolbar-btn-icon(btn-valign-top,        1, @toolbar-icon-size);
//
.toolbar-btn-icon(btn-bold,              3, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-all,        4, @toolbar-icon-size);
.toolbar-btn-icon(btn-clearstyle,        5, @toolbar-icon-size);
.toolbar-btn-icon(btn-incdecimal,        6, @toolbar-icon-size);
.toolbar-btn-icon(btn-decdecimal,        7, @toolbar-icon-size);
.toolbar-btn-icon(btn-italic,            8, @toolbar-icon-size);
.toolbar-btn-icon(btn-fillparag,         9, @toolbar-icon-size);
.toolbar-btn-icon(btn-merge,            10, @toolbar-icon-size);
.toolbar-btn-icon(btn-print,            11, @toolbar-icon-size);
.toolbar-btn-icon(btn-redo,             12, @toolbar-icon-size);
.toolbar-btn-icon(btn-save,             13, @toolbar-icon-size);
.toolbar-btn-icon(btn-sort-down,        14, @toolbar-icon-size);
.toolbar-btn-icon(btn-formula,          15, @toolbar-icon-size);
.toolbar-btn-icon(btn-undo,             16, @toolbar-icon-size);
.toolbar-btn-icon(btn-wrap,             17, @toolbar-icon-size);
.toolbar-btn-icon(btn-underline,        18, @toolbar-icon-size);
.toolbar-btn-icon(btn-align-left,       21, @toolbar-icon-size);
.toolbar-btn-icon(btn-align-center,     19, @toolbar-icon-size);
.toolbar-btn-icon(btn-align-right,      22, @toolbar-icon-size);
.toolbar-btn-icon(btn-align-just,       20, @toolbar-icon-size);
.toolbar-btn-icon(btn-valign-middle,    23, @toolbar-icon-size);
.toolbar-btn-icon(btn-valign-bottom,    24, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-out,       25, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-top,       26, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-bottom,    27, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-left,      28, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-right,     29, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-no,        30, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-center,    31, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-hmiddle,   32, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-vmiddle,   33, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertimage,      34, @toolbar-icon-size);
.toolbar-btn-icon(btn-inserthyperlink,  35, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertchart,      36, @toolbar-icon-size);
.toolbar-btn-icon(btn-copy,             37, @toolbar-icon-size);
.toolbar-btn-icon(btn-paste,            38, @toolbar-icon-size);
.toolbar-btn-icon(btn-synch,            39, @toolbar-icon-size);
.toolbar-btn-icon(btn-autofilter,       40, @toolbar-icon-size);
.toolbar-btn-icon(btn-colorschemas,     41, @toolbar-icon-size);
.toolbar-btn-icon(btn-newdocument,      42, @toolbar-icon-size);
.toolbar-btn-icon(btn-opendocument,     43, @toolbar-icon-size);
.toolbar-btn-icon(btn-incfont,          44, @toolbar-icon-size);
.toolbar-btn-icon(btn-decfont,          45, @toolbar-icon-size);
.toolbar-btn-icon(btn-text-orient,      46, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertshape,      47, @toolbar-icon-size);
.toolbar-btn-icon(btn-text,             48, @toolbar-icon-size);
.toolbar-btn-icon(btn-sort-up,          49, @toolbar-icon-size);
.toolbar-btn-icon(btn-clear-filter,     50, @toolbar-icon-size);
.toolbar-btn-icon(btn-percent-style,    51, @toolbar-icon-size);
.toolbar-btn-icon(btn-currency-style,   52, @toolbar-icon-size);
.toolbar-btn-icon(btn-addcell,          53, @toolbar-icon-size);
.toolbar-btn-icon(btn-delcell,          54, @toolbar-icon-size);
.toolbar-btn-icon(btn-ttempl,           55, @toolbar-icon-size);
//
.toolbar-btn-icon(btn-showmode,         56, @toolbar-icon-size);
.toolbar-btn-icon(btn-settings,         57, @toolbar-icon-size);
//
.toolbar-btn-icon(btn-search,           62, @toolbar-icon-size);
.toolbar-btn-icon(btn-zoomin,           67, @toolbar-icon-size);
.toolbar-btn-icon(btn-zoomout,          68, @toolbar-icon-size);
.toolbar-btn-icon(btn-copystyle,        73, @toolbar-icon-size);
.toolbar-btn-icon(btn-save-coauth,      76, @toolbar-icon-size);

.toolbar-btn-icon(btn-border-diagup,    42, @toolbar-icon-size);
.toolbar-btn-icon(btn-border-diagdown,  43, @toolbar-icon-size);

.toolbar-btn-icon(btn-named-range,      77, @toolbar-icon-size);
.toolbar-btn-icon(btn-insertequation,   82, @toolbar-icon-size);

@menu-icon-size: 22px;
.menu-btn-icon(mnu-align-center,         0, @menu-icon-size);
.menu-btn-icon(mnu-align-just,           1, @menu-icon-size);
.menu-btn-icon(mnu-align-left,           2, @menu-icon-size);
.menu-btn-icon(mnu-align-right,          3, @menu-icon-size);
.menu-btn-icon(mnu-valign-bottom,        4, @menu-icon-size);
.menu-btn-icon(mnu-valign-middle,        5, @menu-icon-size);
.menu-btn-icon(mnu-valign-top,           6, @menu-icon-size);
.menu-btn-icon(mnu-border-all,           7, @menu-icon-size);
.menu-btn-icon(mnu-border-center,        8, @menu-icon-size);
.menu-btn-icon(mnu-border-bottom,        9, @menu-icon-size);
.menu-btn-icon(mnu-border-hmiddle,      10, @menu-icon-size);
.menu-btn-icon(mnu-border-top,          11, @menu-icon-size);
.menu-btn-icon(mnu-border-no,           12, @menu-icon-size);
.menu-btn-icon(mnu-border-out,          13, @menu-icon-size);
.menu-btn-icon(mnu-border-left,         14, @menu-icon-size);
.menu-btn-icon(mnu-border-vmiddle,      15, @menu-icon-size);
.menu-btn-icon(mnu-border-right,        16, @menu-icon-size);
//
.menu-btn-icon(mnu-arrange-front,       19, @menu-icon-size);
.menu-btn-icon(mnu-arrange-back,        20, @menu-icon-size);
.menu-btn-icon(mnu-arrange-forward,     21, @menu-icon-size);
.menu-btn-icon(mnu-arrange-backward,    22, @menu-icon-size);
.menu-btn-icon(mnu-sort-asc,            23, @menu-icon-size);
.menu-btn-icon(mnu-sort-desc,           24, @menu-icon-size);
.menu-btn-icon(mnu-filter-add,          25, @menu-icon-size);
.menu-btn-icon(mnu-filter-clear,        26, @menu-icon-size);
.menu-btn-icon(mnu-direct-horiz,        27, @menu-icon-size);
.menu-btn-icon(mnu-direct-ccw,          28, @menu-icon-size);
.menu-btn-icon(mnu-direct-cw,           29, @menu-icon-size);
//
.menu-btn-icon(mnu-direct-rup,          31, @menu-icon-size);
.menu-btn-icon(mnu-direct-rdown,        32, @menu-icon-size);
.menu-btn-icon(mnu-group,               33, @menu-icon-size);
.menu-btn-icon(mnu-ungroup,             34, @menu-icon-size);
//
.menu-btn-icon(mnu-border-diagup,       36, @menu-icon-size);
.menu-btn-icon(mnu-border-diagdown,     37, @menu-icon-size);

.username-tip {
    background-color: #ee3525;
    border: none;
    border-radius: 0;
    padding: 3px 10px;
    color: #ffffff;
    font: 11px arial;
    pointer-events: none;
    white-space: nowrap;
    letter-spacing: 1px;
}

#id-toolbar-btn-num-format button .caption {
    display: inline-block;
}

#id-toolbar-mnu-item-border-width {
    .border-size-item {
        background: ~"url(@{app-image-const-path}/toolbar/BorderSize.png) no-repeat scroll 0 0";
        width: 80px;
        height: 20px;
        margin-top: -3px;
        margin-bottom: -2px;
    }
}

.item-equation {
    border: 1px solid @gray;
    .background-ximage('@{app-image-path}/toolbar/math.png', '@{app-image-path}/toolbar/math@2x.png', 1500px);
}

#special-paste-container {
    position: absolute;
    z-index: @zindex-dropdown - 20;
    background-color: @gray-light;
    border: 1px solid @gray;
}