metro4/source/components/info-button/info-button.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.info-button {
    border: 1px solid @borderColor;
    background-color: darken(@light, 5%);
    overflow: hidden;
    position: relative;
    align-items: center;
    display: inline-block;
    width: auto;
    height: 36px;
    line-height: 1;
    .clear();

    .button {
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: 0 .75rem;
        font-size: .875rem;
        line-height: 34px;
        height: 36px;
        transition: @transition-short;
        background-color: darken(@light, 5%);
        color: @dark;
        cursor: pointer;
        outline: none;
        position: relative;
    }

    .button, .info {
        display: block;
        float: left;
        border-right: none;
        height: 100%;
        line-height: 32px;
        position: relative;

        &:active, &:focus {
            box-shadow: none!important;
        }
    }

    .button {
        background-color: inherit;
        color: inherit;
        &:hover {
            background-color: @hoverBackground;
        }
    }
    .info {
        font-size: 12px;
        background-color: #FEFEFE;
        color: @dark;
        padding: 0 .625rem;
        text-decoration: none;
        font-weight: 600;
        line-height: 34px;

        &:hover {
            color: @linkColorHover;
        }
    }

    a.info:hover {
        color: @dark;
    }

    .button .icon {
        margin-right: 4px;
    }
}

a.info-button {
    text-decoration: none;
}