atahan/public/assets/scss/main/_mixins.scss

// Custom Overlay 
@mixin overlay-dark($opacity: .7){
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: $opacity;
}


//   @include shadow-up;
//   @include shadow-down;

// Up Shadow
@mixin shadow-up(){
    box-shadow: -4px -4px 10px 0px #fff9, 
    -4px -4px 5px 0px #fff9, 
    4px 4px 10px 0px rgba(0, 0, 0, 0.1), 
    4px 4px 5px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: -4px -4px 10px 0px #fff9, 
    -4px -4px 5px 0px #fff9, 
    4px 4px 10px 0px rgba(0, 0, 0, 0.1), 
    4px 4px 5px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -4px -4px 10px 0px #fff9, 
    -4px -4px 5px 0px #fff9, 
    4px 4px 10px 0px rgba(0, 0, 0, 0.1), 
    4px 4px 5px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: -4px -4px 10px 0px #fff9, 
    -4px -4px 5px 0px #fff9, 
    4px 4px 10px 0px rgba(0, 0, 0, 0.1), 
    4px 4px 5px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    -o-ms-shadow: -4px -4px 10px 0px #fff9, 
    -4px -4px 5px 0px #fff9, 
    4px 4px 10px 0px rgba(0, 0, 0, 0.1), 
    4px 4px 5px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1), 
    inset 0px 0px 0px 0px #fff9, 
    inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
    -webkit-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
    -moz-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
    -o-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
    -ms-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
}
// Down Shadow
@mixin shadow-down(){
    box-shadow: 0px 0px 0px 0px #fff9,
        0px 0px 0px 0px #fff9,
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        inset -4px -4px 10px 0px #fff9,
        inset -4px -4px 5px 0px #fff9,
        inset 4px 4px 10px 0px rgba(0, 0, 0, 0.1),
        inset 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 0px 0px #fff9,
        0px 0px 0px 0px #fff9,
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        inset -4px -4px 10px 0px #fff9,
        inset -4px -4px 5px 0px #fff9,
        inset 4px 4px 10px 0px rgba(0, 0, 0, 0.1),
        inset 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 0px 0px #fff9,
        0px 0px 0px 0px #fff9,
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        inset -4px -4px 10px 0px #fff9,
        inset -4px -4px 5px 0px #fff9,
        inset 4px 4px 10px 0px rgba(0, 0, 0, 0.1),
        inset 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 0px 0px #fff9,
        0px 0px 0px 0px #fff9,
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        inset -4px -4px 10px 0px #fff9,
        inset -4px -4px 5px 0px #fff9,
        inset 4px 4px 10px 0px rgba(0, 0, 0, 0.1),
        inset 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 0px 0px 0px #fff9,
        0px 0px 0px 0px #fff9,
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        0px 0px 0px 0px rgba(0, 0, 0, 0.1),
        inset -4px -4px 10px 0px #fff9,
        inset -4px -4px 5px 0px #fff9,
        inset 4px 4px 10px 0px rgba(0, 0, 0, 0.1),
        inset 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
        transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
        -webkit-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
        -moz-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
        -o-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
        -ms-transition:box-shadow 0.3s cubic-bezier(.79,.21,.06,.81);
}
// Gradint Color
@mixin gradint(){
    background: -moz-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -webkit-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -ms-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -o-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
}

// Gradint text
@mixin gradient-text(){
    background: -moz-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -webkit-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -ms-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: -o-linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    background: linear-gradient(50deg, #6e00ff 0, #bb00ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
// Input placeholder color Change
@mixin placeholder-color($color) {
    &::-webkit-input-placeholder {
        color: $color;
    }
    &:-moz-placeholder {
        color: $color;
    }
    &::-moz-placeholder {
        color: $color;
    }
    &:-ms-input-placeholder{ 
        color: $color;
    }
}

@mixin keyframes($animationName) {
    @-webkit-keyframes #{$animationName} {
        @content;
    }
    @-moz-keyframes #{$animationName} {
        @content;
    }
    @-o-keyframes #{$animationName} {
        @content;
    }
    @keyframes #{$animationName} {
        @content;
    }
}