_ven.slick-theme.sass

// Default Variables

// Slick icon entity codes outputs the following
// "\2190" outputs ascii character "←"
// "\2192" outputs ascii character "→"
// "\2022" outputs ascii character "•"

$slickFontPath: "../_fonts/" !default
$slickLoaderPath: "../_img/" !default
$slickFontFamily: "slick" !default
$slickArrowColor: #000 !default
$slickArrowSize: 33px !default
$slickDotColor: #000 !default
$slickDotColorActive: $slickDotColor !default
$slickPrevCharacter: "←" !default
$slickNextCharacter: "→" !default
$slickDotCharacter: "•" !default
$slickDotSize: 6px !default
$slickOpacityDefault: 0.75 !default
$slickOpacityOnHover: 1 !default
$slickOpacityNotActive: 0.25 !default

@function slick-image-url($url)
    @if function-exists(image-url)
        @return image-url($url)
    @else
        // sass-lint:disable indentation
        @return url($slickLoaderPath + $url)
        // sass-lint:enable indentation

@function slick-font-url($url)
    @if function-exists(font-url)
        @return font-url($url)
    @else
        // sass-lint:disable indentation
        @return url($slickFontPath + $url)
        // sass-lint:enable indentation

/* Slider */

.slick-list
    .slick-loading &
        background: $white slick-image-url("ajax-loader.gif") center center no-repeat

/* Icons */
@if $slickFontFamily == "slick"
    @font-face
        font-family: "slick"
        font-style: normal
        font-weight: normal
        // sass-lint:disable no-duplicate-properties
        src: slick-font-url("slick.eot")
        src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg")
        // sass-lint:enabled no-duplicate-properties

/* Arrows */

.slick-prev,
.slick-next
    +translate(0, -50%)
    position: absolute
    top: 50%
    display: block
    width: $slickArrowSize
    height: $slickArrowSize
    background: transparent
    border: none
    padding: 0px
    color: transparent
    font-size: 0px
    line-height: 0px
    cursor: pointer
    outline: none
    z-index: 1000
    &:hover,
    &:focus
        background: transparent
        color: transparent
        outline: none
        &:before
            opacity: $slickOpacityOnHover
    &.slick-disabled:before
        opacity: $slickOpacityNotActive
    &:before
        color: $slickArrowColor
        font-family: $slickFontFamily
        font-size: $slickArrowSize
        line-height: 1
        opacity: $slickOpacityDefault
        -webkit-font-smoothing: antialiased
        -moz-osx-font-smoothing: grayscale

.slick-prev
    left: 0px
    [dir="rtl"] &
        right: 0px
        left: auto
    &:before
        content: $slickPrevCharacter
        [dir="rtl"] &
            content: $slickNextCharacter

.slick-next
    right: 0px
    [dir="rtl"] &
        right: auto
        left: 0px
    &:before
        content: $slickNextCharacter
        [dir="rtl"] &
            content: $slickPrevCharacter

/* Dots */

.slick-dotted.slick-slider
    margin-bottom: 0px

.slick-dots
    position: relative
    bottom: 75px
    display: block
    width: 90%
    height: 0px
    margin: 0px auto
    padding: 0px
    list-style: none
    text-align: center
    li
        position: relative
        display: inline-block
        width: 20px
        height: 20px
        margin: 0px 5px
        padding: 0px
        cursor: pointer
        button
            display: block
            width: 20px
            height: 20px
            background: transparent
            border: 0px
            padding: 5px
            color: transparent
            font-size: 0px
            line-height: 0px
            cursor: pointer
            outline: none
            &:hover,
            &:focus
                outline: none
                &:before
                    opacity: $slickOpacityOnHover
            &:before
                content: $slickDotCharacter
                position: absolute
                top: 0px
                left: 0px
                width: 20px
                height: 20px
                color: $slickDotColor
                font-family: $slickFontFamily
                font-size: $slickDotSize
                line-height: 20px
                text-align: center
                text-shadow: 0px 0px 0px $white, 0px 0px 0px $white
                opacity: $slickOpacityNotActive
                -webkit-font-smoothing: antialiased
                -moz-osx-font-smoothing: grayscale
        &.slick-active button:before
            color: $slickDotColorActive
            opacity: $slickOpacityDefault

.slick
    background: $white
    div
        outline: none
    img
        max-height: 600px
        margin: 0px auto
    p
        padding-bottom: 20px
        font-size: 14px

.slick-slide
    opacity: 0.75
    transition: 1s ease all
    &.slick-current
        opacity: 1.0