metro4/less/colors-defs.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";

@ribbedSize: 20px;
@ribbedAlpha: .15;
@ribbedAngle: -45deg;

.op-default {
    background-color: rgba(red(@cyan), green(@cyan), blue(@cyan), .7) !important;
}

.bg-transparent {
    background-color: @transparent !important;
}

.bg-hover:hover {background-color: @hoverBackground !important;}
.bg-hover2:hover {background-color: @hoverBackground2 !important;}
.bg-hover-light:hover {background-color: @hoverBackgroundLight !important;}
.bg-hover-light1:hover {background-color: @hoverBackgroundLight1 !important;}
.bg-hover-light2:hover {background-color: @hoverBackgroundLight2 !important;}
.bg-hover-light3:hover {background-color: @hoverBackgroundLight3 !important;}

.bg-facebook {background-color: #4267b2;}
.bg-twitter {background-color: #1DA1F2 ;}
.bg-github {background-color: #24292e;}
.bg-bootstrap {background-color: #563d7c;}
.bg-gitlab {background-color: #e65328;}
.bg-amazon {background-color: #232f3e;}

.bd-default {
    border-color: @borderColor!important;
}
.bd-transparent {
    border-color: @transparent!important;
}

.generate-colors(@colorListLength);
.generate-colors(@name, @i: 1) when (@i =< @colorListLength) {
    @name: extract(@colorList, @i);

    .fg-@{name} {color: @@name !important;}
    .bg-@{name} {background-color: @@name !important;}
    .bd-@{name} {border-color: @@name !important;}
    .ol-@{name} {outline-color: @@name !important;}


    .fg-@{name}-active {&:active {color: @@name !important;}}
    .fg-@{name}-hover {&:hover {color: @@name !important;}}
    .fg-@{name}-focus {&:focus {color: @@name !important;}}

    .bg-@{name}-active {&:active {background-color: @@name !important;}}
    .bg-@{name}-hover {&:hover {background-color: @@name !important;}}
    .bg-@{name}-focus {&:focus {background-color: @@name !important;}}

    .bd-@{name}-active {&:active {border-color: @@name !important;}}
    .bd-@{name}-hover {&:hover {border-color: @@name !important;}}
    .bd-@{name}-focus {&:focus {border-color: @@name !important;}}

    .ol-@{name}-active {&:active {outline-color: @@name !important;}}
    .ol-@{name}-hover {&:hover {outline-color: @@name !important;}}
    .ol-@{name}-focus {&:focus {outline-color: @@name !important;}}

    .ribbed-@{name} {background: @@name linear-gradient(@ribbedAngle, rgba(255,255,255,@ribbedAlpha) 25%, transparent 25%, transparent 50%, rgba(255,255,255,@ribbedAlpha) 50%, rgba(255,255,255,@ribbedAlpha) 75%, transparent 75%, transparent) !important; background-size: @ribbedSize @ribbedSize !important;}

    .before-bg-@{name} {&::before {background: @@name !important;}}
    .before-fg-@{name} {&::before {color: @@name !important;}}
    .after-bg-@{name} {&::after {background: @@name !important;}}
    .after-fg-@{name} {&::after {color: @@name !important;}}

    .op-@{name} {background-color: rgba(red(@@name), green(@@name), blue(@@name), .7) !important;}

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

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