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

.no-shadow {
    box-shadow: none!important;
}
.no-shadow-text {
    text-shadow: none!important;
}

.simple-shadow {
    box-shadow: 0 0 10px 0 rgba(0,0,0,.4);
}

.drop-shadow {
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4);
}

.win-shadow {
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
}

.ribbon-shadow {
    box-shadow: 2px 2px 2px 0 rgba(red(@ribbonDropdownShadow), green(@ribbonDropdownShadow), blue(@ribbonDropdownShadow), .7);
}

.shadow-1 {.shadow(1);}
.shadow-2 {.shadow(2);}
.shadow-3 {.shadow(3);}
.shadow-4 {.shadow(4);}
.shadow-5 {.shadow(5);}

.shadowed {
    box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.4)!important;

    &:hover, &:focus {
        box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.8)!important;
    }

    &:active {
        box-shadow: none!important;
        transform: translate(1px, 1px);
    }
}