?? GreyFile — Mystic File Browser

Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/shortcodes/


?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules

?? Viewing: _icon.scss

.edgtf-icon-shortcode {
    $transition-duration: 0.15s;

    display: inline-block;

    &.circle,
    &.square {
        background-color: $first-main-color;
        width: 2em;
        height: 2em;
        line-height: 2em;
        text-align: center;

        @include edgtfTransition(
                background-color $transition-duration ease-in-out,
                border-color $transition-duration ease-in-out
        );

        a {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .edgtf-icon-element {
            color: #fff;
            line-height: inherit;
        }
    }

    &.circle {
        @include edgtfBorderRadius(50%);
    }

    .edgtf-icon-element {
        @include edgtfTransition(color $transition-duration ease-in-out);
    }
}

.edgtf-icon-animation-holder {
    @include edgtfTransform(scale(0));
    @include edgtfTransition(transform 0.15s ease-in-out);
    display: inline-block;

    &.edgtf-icon-animation-show {
        @include edgtfTransform(scale(1));
    }

    .edgtf-animation-overlay{
        top: -8px;
        left: -8px;
        padding: 8px;
        box-shadow: 0 0 0 2px $first-main-color;
        @include edgtfTransform(scale(0.8));
        -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease;
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: content-box;
        z-index:-1;
    }

    &.circle{
       .edgtf-animation-overlay{
            border-radius: 50%;
       } 
    }    
}
.edgtf-icon-shortcode:hover{
    .edgtf-animation-overlay{
        -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.1, 2.2), opacity 0.3s cubic-bezier(0, 0, 0.1, 2.2);
        transition: transform 0.3s cubic-bezier(0, 0, 0.1, 2.2), opacity 0.3s cubic-bezier(0, 0, 0.1, 2.2);
        @include edgtfTransform(scale(1));
        opacity: 1;
    }
}

.edgtf-icon-tiny {
    font-size: 1.5em;
    line-height: .75em;
    vertical-align: -15%;
}

.edgtf-icon-small {
    font-size: 2em;
}

.edgtf-icon-medium {
    font-size: 3em;
}

.edgtf-icon-large {
    font-size: 4em;;
}

.edgtf-icon-huge {
    font-size: 5em;
}

??

??