metro4/source/common/less/accent-colors.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";

.button,
.command-button,
.image-button,
.shortcut,
.tool-button,
.split-button .split,
tbody tr, tbody td,
.tally, code,
.notify,
.info-button,
.input .button,
.select .button,
.tag-input .button,
.spinner .button,
.toast
{
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            outline-color: lighten(@@color, 30%);
            background-color: @@color;
            color: @white;

            &.outline {
                color: @@color;
                border-color: @@color;

                &.dropdown-toggle::before {
                    border-color: @@color;
                }

                &:hover {
                    color: @white;
                }
            }

            &.dropdown-toggle::before {
                border-color: @white;
            }

            &:hover {
                color: @white;
                background-color: darken(@@color, 10%);
                border-color: darken(@@color, 20%);

                &.dropdown-toggle::before {
                    border-color: @white;
                }
            }

            &.same-color {
                &:hover {
                    background-color: @@color;
                    border-color: @@color;
                }
            }
            &:active, &.focus, &:focus {
                .focus-show(@@color);
            }
        }
    })

    &.yellow, &.light {
        color: @dark;
        &:hover, &.outline:hover {
            color: @dark;
        }
    }
}


.action-button {
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            outline-color: lighten(@@color, 30%);
            background-color: @@color;
            color: @white;
        }
    })

    &.yellow, &.light {
        color: @dark;
        &:hover, &.outline:hover {
            color: @dark;
        }
    }
}

.pagination {
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            .page-item {
                &.active, &.service, &:hover {
                    background-color: @@color;
                    border-color: @@color;
                    color: @white;
                    &:hover {
                        background-color: darken(@@color, 10%);
                    }
                }
            }
        }
    })

    &.light, &.yellow {
        .page-item {
            &.active, &.service, &:hover {
                color: @dark;
            }
        }
    }
}

.remark {
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            @c: lighten(@@color, 30%);
            background: @c;
            border: 1px solid @c;

            &::before {
                position: absolute;
                top: 0;
                left: -4px;
                width: 4px;
                height: 100%;
                content: " ";
                background-color: @@color;
            }
        }

        &.@{value} when(@color = 'primaryColor' ) {
            @c: lighten(@@color, 50%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'secondaryColor' ) {
            @c: lighten(@@color, 50%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'successColor' ) {
            @c: lighten(@@color, 55%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'alertColor' ) {
            @c: lighten(@@color, 45%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'warningColor' ) {
            @c: lighten(@@color, 30%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'infoColor' ) {
            @c: lighten(@@color, 30%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'yellowColor' ) {
            @c: lighten(@@color, 17%);
            background: @c;
            border: 1px solid @c;
        }
        &.@{value} when(@color = 'darkColor' ) {
            @c: lighten(@@color, 60%);
            background: @c;
            border: 1px solid @c;
        }
    })
}

.metro-input,
.file,
.input,
.select,
.textarea,
.keypad,
.tag-input,
.spinner
{
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            border-color: @@color;

            &:focus, &.focused {
                .focus-show(@@color);
            }
        }
    })
}

.accent-block {
    each(@accentColors, {
        @color: "@{value}Color";

        &.@{value} {
            background-color: @@color;
            color: @white;
        }
    })

    &.light, &.yellow {
        color: @dark;
    }
}