metro4/less/elements-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
{
    .generate-accent-colors(@buttonPredefinedTypesLength);
    .generate-accent-colors(@name, @i: 1) when (@i =< @buttonPredefinedTypesLength) {
        @name: extract(@buttonPredefinedTypes, @i);
        @color: "@{name}Color";

        &.@{name} {
            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);
            }
        }

        .generate-accent-colors(@name, @i + 1);
    }

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


.action-button {
    .generate-accent-colors(@buttonPredefinedTypesLength);
    .generate-accent-colors(@name, @i: 1) when (@i =< @buttonPredefinedTypesLength) {
        @name: extract(@buttonPredefinedTypes, @i);
        @color: "@{name}Color";

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

        .generate-accent-colors(@name, @i + 1);
    }

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

.pagination {
    .generate-accent-colors(@buttonPredefinedTypesLength);
    .generate-accent-colors(@name, @i: 1) when (@i =< @buttonPredefinedTypesLength) {
        @name: extract(@buttonPredefinedTypes, @i);
        @color: "@{name}Color";

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

        .generate-accent-colors(@name, @i + 1);
    }

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

.remark {
    .generate-accent-colors(@buttonPredefinedTypesLength);
    .generate-accent-colors(@name, @i: 1) when (@i =< @buttonPredefinedTypesLength) {
        @name: extract(@buttonPredefinedTypes, @i);
        @color: "@{name}Color";

        &.@{name} {
            border-left: 4px solid @@color;
        }

        .generate-accent-colors(@name, @i + 1);
    }
}

input[type=text],
input[type=password],
input[type=tel],
input[type=datetime-local],
input[type=email],
input[type=file],
input[type=month],
input[type=number],
input[type=search],
input[type=time],
input[type=url],
input[type=week],
select,
textarea,
.file,
.input,
.select,
.textarea,
.keypad,
.tag-input,
.spinner
{
    .generate-accent-colors(@buttonPredefinedTypesLength);
    .generate-accent-colors(@name, @i: 1) when (@i =< @buttonPredefinedTypesLength) {
        @name: extract(@buttonPredefinedTypes, @i);
        @color: "@{name}Color";

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

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

        .generate-accent-colors(@name, @i + 1);
    }
}