Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/tools/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// UTILITIES
// ==============================================

//
//  Visible / Hidden class
//  _____________________________________________

$breakpoints: xs sm md lg xl;

// Visible only on mobile/tablet
@each $breakpoint in $breakpoints {
    .visible-#{$breakpoint} {
        @include breakpoint(#{$breakpoint}) {  display: none !important;  }
        @include breakpoint(only-#{$breakpoint}) {  display: block;  }
    }
}

// Visible only on desktop
@each $breakpoint in $breakpoints {
    .hidden-#{$breakpoint} {
        @include breakpoint(#{$breakpoint}) {  display: block;  }
        @include breakpoint(only-#{$breakpoint}) {  display: none !important;  }
    }
}

//
//  SEO friendly hidden
//  _____________________________________________

@mixin visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px; width: 1px;
    margin: -1px; padding: 0; border: 0;
}

@mixin reset-visually-hidden {
    position: static;
    overflow: auto;
    clip: auto;
    height: auto; width: auto;
    margin: 0; padding: 0;
}


._hidden,
.visually-hidden {
    @include visually-hidden;
}

.reset-visually-hidden {
    @include reset-visually-hidden;
}

//
//  Floats clearer
//  _____________________________________________

@mixin clearer {
    &::after {
        display: block;
        content: "";
        clear: both;
        font-size: 0;
        line-height: 0;
        height: 0;
        overflow: hidden;
    }
}

%clearer {
    @include clearer;
}

//
//  Icomoon placeholder
//  _____________________________________________

@mixin icon-icomoon {
    text-transform: none;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

%icon-icomoon {
    @include icon-icomoon;
}

//
//  Unselectable element
//  _____________________________________________

%unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

//
//  Responsive Grid Table :
//  Grid on desktop, blocks on mobile
//  _____________________________________________

%responsive-grid-table {
    & {
        display: table;
        width: 100%;
        table-layout: fixed;
        @include breakpoint(only-md) {
            display: block;
        }
    }

    & > * {
        display: table-cell;
        padding: 0 20px;
        text-align: center;
        vertical-align: top;
        @include breakpoint(only-md) {
            display: block;
            padding-top: 20px;
            padding-right: 0;
            padding-left: 0;
        }
    }

    & > *:last-child {
        padding-right: 0;
    }

    & > *:first-child {
        padding-left: 0;
        @include breakpoint(only-md) {
            padding-top: 0;
        }
    }
}

//
//  Responsive product table
//  _____________________________________________

%responsive-product-table {
    & {
        width: 100%;
    }

    td,
    th {
        vertical-align: bottom;
    }

    th {
        padding-right: 20px;
        padding-bottom: 17px;
        white-space: nowrap;
    }

    td[data-th]:before,
    th {
        text-align: left;
        color: #8290A4;
    }

    @include breakpoint(md) {
        td {
            padding-top: 25px;
            padding-bottom: 25px;
            text-align: right;
        }

        td + td {
            padding-left: 10px;
        }
    }

    @include breakpoint(only-md) {
        &,
        thead,
        tbody,
        tfoot,
        tr,
        td {
            display: block;
        }

        th {
            display: none;
        }

        tr {
            z-index: 1;
            position: relative;
            padding-right: 60px;
        }

        td {
            margin-bottom: 10px;
        }

        td[data-th].qty,
        td[data-th].price {
            z-index: 1;
            position: relative;
            padding-left: 85px;
        }

        td[data-th].qty:before,
        td[data-th].price:before {
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 0;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        td[data-th]:not(.item):before {
            content: attr(data-th);
            width: 75px;
        }

        td[data-th].subtotal:before {
            float: left;
            padding-right: 10px;
        }

        td[data-th].subtotal .actions-toolbar {
            z-index: 1;
            width: 50px;
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}


//
//  Iframe Video Responsive
//  _____________________________________________
.iframe-video-container {
    position: relative;
    padding-bottom: 49.5%;
    padding-top: 14.5%;
    height: 0;
    overflow: hidden;
    pointer-events: none;

    iframe,
    object,
    embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}



//
//  Background Gradient Color
//  _____________________________________________

// Default gradient color

.bg-gradient {
    background: $c-gradient-start;
    background: -moz-linear-gradient(left, $c-gradient-start 0%, $c-gradient-end 57%, $c-gradient-end 100%);
    background: -webkit-linear-gradient(left, $c-gradient-start 0%, $c-gradient-end 57%,$c-gradient-end 100%);
    background: linear-gradient(to right, $c-gradient-start 0%, $c-gradient-end 57%,$c-gradient-end 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start, endColorstr=$c-gradient-end,GradientType=1 );
}

.bg-gradient-top {
    background: $c-gradient-start;
    background: -moz-linear-gradient(bottom, $c-gradient-start 0%, $c-gradient-end 57%, $c-gradient-end 100%);
    background: -webkit-linear-gradient(bottom, $c-gradient-start 0%, $c-gradient-end 57%,$c-gradient-end 100%);
    background: linear-gradient(to bottom, $c-gradient-start 0%, $c-gradient-end 57%,$c-gradient-end 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start, endColorstr=$c-gradient-end,GradientType=1 );
}

.bg-gradient-diagonal {
    background: $c-gradient-start;
    background: -moz-linear-gradient(-45deg, $c-gradient-start 20%, $c-gradient-end 57%, $c-gradient-end 100%);
    background: -webkit-linear-gradient(-45deg, $c-gradient-start 20%, $c-gradient-end 57%,$c-gradient-end 100%);
    background: linear-gradient(160deg, $c-gradient-start 20%, $c-gradient-end 57%,$c-gradient-end 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start, endColorstr=$c-gradient-end,GradientType=1 );
}

// Blue gradient color

.bg-gradient-blue {
    background: $c-gradient-start-blue;
    background: -moz-linear-gradient(left, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%, $c-gradient-end-blue 100%);
    background: -webkit-linear-gradient(left, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    background: linear-gradient(to right, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-blue, endColorstr=$c-gradient-end-blue,GradientType=1 );
}

.bg-gradient-top-blue {
    background: $c-gradient-start-blue;
    background: -moz-linear-gradient(bottom, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%, $c-gradient-end-blue 100%);
    background: -webkit-linear-gradient(bottom, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    background: linear-gradient(to bottom, $c-gradient-start-blue 0%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-blue, endColorstr=$c-gradient-end-blue,GradientType=1 );
}

.bg-gradient-diagonal-blue {
    background: $c-gradient-start-blue;
    background: -moz-linear-gradient(-45deg, $c-gradient-start-blue 20%, $c-gradient-end-blue 57%, $c-gradient-end-blue 100%);
    background: -webkit-linear-gradient(-45deg, $c-gradient-start-blue 20%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    background: linear-gradient(160deg, $c-gradient-start-blue 20%, $c-gradient-end-blue 57%,$c-gradient-end-blue 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-blue, endColorstr=$c-gradient-end-blue,GradientType=1 );
}

// Pink gradient color

.bg-gradient-blue {
    background: $c-gradient-start-pink;
    background: -moz-linear-gradient(left, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%, $c-gradient-end-pink 100%);
    background: -webkit-linear-gradient(left, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    background: linear-gradient(to right, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-pink, endColorstr=$c-gradient-end-pink,GradientType=1 );
}

.bg-gradient-top-blue {
    background: $c-gradient-start-pink;
    background: -moz-linear-gradient(bottom, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%, $c-gradient-end-pink 100%);
    background: -webkit-linear-gradient(bottom, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    background: linear-gradient(to bottom, $c-gradient-start-pink 0%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-pink, endColorstr=$c-gradient-end-pink,GradientType=1 );
}

.bg-gradient-diagonal-blue {
    background: $c-gradient-start-pink;
    background: -moz-linear-gradient(-45deg, $c-gradient-start-pink 20%, $c-gradient-end-pink 57%, $c-gradient-end-pink 100%);
    background: -webkit-linear-gradient(-45deg, $c-gradient-start-pink 20%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    background: linear-gradient(160deg, $c-gradient-start-pink 20%, $c-gradient-end-pink 57%,$c-gradient-end-pink 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$c-gradient-start-pink, endColorstr=$c-gradient-end-pink,GradientType=1 );
}


//
//  Scroll Display Item
//  _____________________________________________
.displayed-on-scroll {
    opacity: 0;
    transition: opacity .3s linear;

    &.is-displaying {
        opacity: 1;

        &:nth-child(odd) > *,
        &:nth-child(even) > * {
            transform: translateX(0);
        }
    }

    &:nth-child(odd) > * {
        transform: translateX(-20px);
    }

    &:nth-child(even) > *{
        transform: translateX(20px);
    }

    & > * {
        transition: transform .3s linear;
    }

}


//
//  Hide and Display Animation
//  _____________________________________________
@keyframes hidetodisplay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



//
//  Text dropdown with cta click
//  _____________________________________________
.see-more-wrapper {
    line-height: 1.4;
    margin: 40px auto;
    max-width: 1040px;
    text-align: center;

    .see-more-wrapper__text {
        max-height: 145px;
        overflow: hidden;

        @include breakpoint(md) {
            max-height: 70px;
        }

        &.more {
            max-height: none;
            overflow: auto;
            animation-duration: 1s;
            animation-name: hidetodisplay;
        }
    }

    .see-more-cta {
        @extend .link-2;
        margin-top: 20px;

        &:hover {
            cursor: pointer;
        }
    }
}


//
//  Box shadow
//  _____________________________________________
@mixin box-shadow-bottom {
    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.11);
}

.box-shadow-bottom {
    @include box-shadow-bottom;
}






//
//  Flexbox wrapper
//  _____________________________________________

// Main wrapper
.flex-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: $inner-container-width;
    margin: 0 auto;
    padding: 60px $gutter/2;

    @include breakpoint(md) {
        flex-direction: row;
        padding: 60px $gutter;
    }

    // Blocks
    & > div {

        @include breakpoint(only-md) {
            & + div {
                margin-top: 20px;
            }
        }

        @include breakpoint(md) {
            flex: 1 1 0;
            padding-left: $gutter;
            padding-right: $gutter;

            &:first-of-type {
                border-right: 1px solid $c-grey;
            }

            // Right block alignment
            &:last-of-type > div {
                margin-left: auto;
            }
        }

        // Block content
        > div {
            display: flex;
            flex-direction: column;

            @include breakpoint(md) {
                max-width: 450px;
                height: 100%;
            }
        }
    }
}

//
// Cms Block
//

// Contact reinsurance banner
.reinsurance-contact {
    @extend .inner-container;
    margin-bottom: 40px;
    clear: both;
    margin-top: 20px;

    @include breakpoint(md) {
        margin-bottom: 70px;
    }
}

.reinsurance-contact--content {
    margin-top: 40px;
    margin-bottom: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: 1px solid $c-grey;
    border-bottom: 1px solid $c-grey;
    text-align: center;

    .catch-phrase {
        display: block;
        color: $c-blue;
        font-size: 1.6rem;
        margin-bottom: 15px;

        @include breakpoint(md) {
            display: inline-block;
            margin-right: 30px;
            margin-bottom: 0;
            font-size: 1.8rem;
        }
    }
}