helpcenter/Web/css/buttons.less

/*
    Copyright (c) Ascensio System SIA 2019. All rights reserved.
    https://www.onlyoffice.com
*/
@import "base.less";

.baseBtn() {
    border: 0 none;
    color: @buttonTextColor;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    vertical-align: middle;
    padding: 17px 22px;
    text-align: center;
    text-decoration: none !important;
    .borderRadius(3px);
    text-transform: uppercase;
    font-weight: 600;


    &::-moz-focus-inner {
        outline: none;
        -moz-outline: none;
        border: 0 none;
    }
    &:focus {
        outline: none;
        -moz-outline: none;
        border: 0 none;
    }
}

.InnerPage a.button,
.InnerPage a.button:hover,
.InnerPage a.button:active,
.InnerPage a.button:visited,
a.button,
a.button:hover,
a.button:active,
a.button:visited
{
   .baseBtn();
}

.comingsoon-button {
    display: inline-block;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 400;
    color: #333 !important;
    text-decoration: none;
    cursor: default;
    border: 1px solid #afafaf;
    .borderRadius(20px);
}


.button {
    .baseBtn();
    .customApearance(none);
    .transition3(background, .3s, color, .3s, border, .3s);

    &:hover, &:active, &:visited {
        .baseBtn();
    }

    &.blue {
        background: #3e4b6c;
        .bg-vertical-gradient(#7688B6, #3e4b6c);

        &:hover {
            background: #4c5b80;
            .bg-vertical-gradient(#7f91be, #4c5b80);
        }

        &::-moz-focus-inner {
            background: #4c5b80;
            .bg-vertical-gradient(#7f91be, #4c5b80);
        }

        &:focus {
            background: #4c5b80;
            .bg-vertical-gradient(#7f91be, #4c5b80);
        }

        &.disabled, &.disabled:hover {
            background: #d2d9ec;
            .bg-vertical-gradient(#d2d2ec, #949fba);
            cursor: default;

            &::-moz-focus-inner {
                background: #d2d9ec;
                .bg-vertical-gradient(#d2d2ec, #949fba);
            }

            &:focus {
                background: #d2d9ec;
                .bg-vertical-gradient(#d2d2ec, #949fba);
            }
        }
    }

    &.orange {
        background: #E59241;
        .bg-vertical-gradient(#FFC05D, #E59241);

        &:hover {
            background: #eea14a;
            .bg-vertical-gradient(#ffc76f, #eea14a);
        }

        &::-moz-focus-inner {
            background: #eea14a;
            .bg-vertical-gradient(#ffc76f, #eea14a);
        }

        &:focus {
            background: #eea14a;
            .bg-vertical-gradient(#ffc76f, #eea14a);
        }
    }

    &.green {
        background: #598001;
        .bg-vertical-gradient(#98c040, #598001);

        &:hover {
            background: #6c901b;
            .bg-vertical-gradient(#a4cc4d, #6c901b);
        }

        &::-moz-focus-inner {
            background: #6c901b;
            .bg-vertical-gradient(#a4cc4d, #6c901b);
        }

        &:focus {
            background: #6c901b;
            .bg-vertical-gradient(#a4cc4d, #6c901b);
        }

        &.disabled, &.disabled:hover {
            background: #98b950;
            .bg-vertical-gradient(#d1eb97, #98b950);
            cursor: default;

            &::-moz-focus-inner {
                background: #98b950;
                .bg-vertical-gradient(#d1eb97, #98b950);
            }

            &:focus {
                background: #98b950;
                .bg-vertical-gradient(#d1eb97, #98b950);
            }
        }
    }

    &.green_nograd {
        background: #95bd3d;

        &:hover {
            background: #a4cc4d;
        }

        &::-moz-focus-inner {
            background: #87ae30;
        }

        &:focus {
            background: #87ae30;
        }

        &.disabled, &.disabled:hover {
            background: #98b950;
            cursor: default;

            &::-moz-focus-inner {
                background: #98b950;
            }

            &:focus {
                background: #98b950;
            }
        }
    }

    &.red {
        background: @redColor;

        &:hover {
            background: @redHoverColor;
        }

        &::-moz-focus-inner {
            background: #fa5c24;
        }

        &:focus {
            background: #fa5c24;
        }

        &.disabled, &.disabled:hover {
            background: @redDisabledColor;
            cursor: default;
            /*&::-moz-focus-inner {
                background: @redHoverColor;
            }

            &:focus {
                background: @redHoverColor;
            }*/
        }

        &.sbmtTxtHide {
            background: @redColor;
            color: transparent;
        }
    }

    &.white {
        background: #fff;
        border: 1px solid #B2B2B2 !important;
        color: #666 !important;

        &:hover {
            background: #fff;
        }

        &::-moz-focus-inner {
            background: #fff;
        }

        &:focus {
            background: #fff;
        }
    }

    &.transparent, &.transparent:visited {
        background: transparent;
        border: 1px solid #B2B2B2 !important;
        color: #666 !important;

        &:hover {
            background: transparent;
            border-color: @redHoverColor !important;
            color: @redHoverColor !important;
        }

        &::-moz-focus-inner {
            background: transparent;
        }

        &:focus {
            background: transparent;
        }
    }

    &.transparent_white {
        background: transparent;
        border: 1px solid #D8D8D8 !important;
        color: #fff !important;

        &:hover {
            background: transparent;
        }

        &::-moz-focus-inner {
            background: transparent;
        }

        &:focus {
            background: transparent;
        }
    }

    &.litestgray_new {
        background-color: @baseBackgroundColor;
        border: 1px solid #CBCBCB !important;
        color: #666 !important;
        -webkit-transition: box-shadow .3s, background-color .3s, border-color .3s;
        transition: box-shadow .3s, background-color .3s, border-color .3s;

        &:hover, &:focus {
            border-color: #fff !important;
            background-color: #fff !important;
            .shadowFullCustomizable(0, 7px, 25px, rgba(85,85,85,.15)) !important;
        }

        &::-moz-focus-inner {
            border-color: #fff !important;
            background-color: #fff !important;
            .shadowFullCustomizable(0, 7px, 25px, rgba(85,85,85,.15)) !important;
        }
    }

    &.round {
        background: transparent;
        border: 1px solid #B2B2B2 !important;
        color: #666 !important;
        .borderRadius(40px) !important;

        &:hover {
            background: transparent;
            color: #666 !important;
            border-color: @redColor !important;
        }

        &.currently_selected {
            background: transparent;
            color: @redColor !important;
            border-color: @redColor !important;
        }

        &::-moz-focus-inner {
            background: transparent;
        }

        &:focus {
            background: transparent;
        }
    }


    &.middle, &.middle:visited, &.middle:hover, &.middle:active {
        font-size: 12px;
        line-height: 14px;
        padding: 4px 24px;
    }

    &.gray {
        background: #444;

        &:hover {
            background: #565656;
        }

        &::-moz-focus-inner {
            background: #4e4e4e;
        }

        &:focus {
            background: #4e4e4e;
        }

        &.disabled, &.disabled:hover {
            background: #666;
            cursor: default;

            &::-moz-focus-inner {
                background: #666;
            }

            &:focus {
                background: #666;
            }
        }
    }

    &.gray_flat {
        border: 0;
        color: #fff;
        background: #4c4c4c;
        padding: 17px 20px;
        .borderRadius(3px);
        font-weight: 700;

        &:hover {
            background: #575757;
            padding: 17px 20px;
            font-weight: 700;
        }

        &:active {
            background: #444;
            padding: 17px 20px;
        }

        &.disabled, &.disabled:hover {
            color: #999;
            cursor: default;
            padding: 17px 20px;
        }
    }

    &.green_flat {
        border: 0;
        color: #fff;
        background: #66bb6a;
        padding: 17px 20px;
        .borderRadius(3px);
        font-weight: 700;

        &:hover {
            background: #78c27c;
            padding: 17px 20px;
        }

        &::-moz-focus-inner {
            background: #78c27c;
        }

        &:focus {
            background: #78c27c;
        }

        &:active {
            background: #5baf5f;
            padding: 17px 20px;
        }

        &.disabled, &.disabled:hover {
            color: #b5dbb7;
            cursor: default;
            padding: 17px 20px;
        }
    }

    &.white_flat {
        background: #fff;
        color: @redColor !important;

        &:hover {
            color: @redHoverColor !important;
        }

        &::-moz-focus-inner {
            background: #fff;
        }

        &:focus {
            background: #fff;
        }
    }
}