­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ @charset "UTF-8"; $slick-font-family: "entypo"; $slick-prev-character: '\e87c'; // .icon-entypo-left-open-big $slick-next-character: '\e87d'; // .icon-entypo-right-open-big // Default Variables $slick-font-path: "./fonts/" !default; $slick-font-family: "slick" !default; $slick-loader-path: "./" !default; $slick-arrow-color: #222 !default; $slick-dot-color: black !default; $slick-dot-color-active: $slick-dot-color !default; $slick-prev-character: "←" !default; $slick-next-character: "→" !default; $slick-dot-character: "•" !default; $slick-dot-size: 6px !default; $slick-opacity-default: 0.75 !default; $slick-opacity-on-hover: 1 !default; $slick-opacity-not-active: 0.25 !default; @function slick-image-url($url) { @if function-exists(image-url) { @return image-url($url); } @else { @return url($slick-loader-path + $url); } } @function slick-font-url($url) { @if function-exists(font-url) { @return font-url($url); } @else { @return url($slick-font-path + $url); } } /* Slider */ .slick-list { .slick-loading & { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat; } } /* Icons */ /* @if $slick-font-family == "slick" { @font-face { font-family: "slick"; 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"); font-weight: normal; font-style: normal; } } */ /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; height: 44px; width: 33px; line-height: 0px; font-size: 0px; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -22px; padding: 0; border: none; outline: none; z-index: 1; display: inline-block; width: 60px; height: 60px; border-radius: 50%; text-align: center; background: rgba( #888, 0.2 ); color: #fff; &:hover { outline: none; background: #fff !important; color: #111 !important; // color: transparent; &:before { opacity: $slick-opacity-on-hover; } } &.slick-disabled:before { opacity: $slick-opacity-not-active; } } @media (max-width: 767px) { .slick-prev, .slick-next { display: none !important; } } .slick-prev:before, .slick-next:before { font-family: $slick-font-family; font-size: 18px; font-weight: bold; line-height: 1; // color: $slick-arrow-color; opacity: $slick-opacity-default; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: 30px; [dir="rtl"] & { left: auto; right: 0px; } &:before { // margin-right: -24px; content: $slick-prev-character; [dir="rtl"] & { content: $slick-next-character; } } } .slick-next { right: 30px; [dir="rtl"] & { left: 0px; right: auto; } &:before { // margin-left: -24px; content: $slick-next-character; [dir="rtl"] & { content: $slick-prev-character; } } } /* Dots */ .slick-slider { // margin-bottom: 30px; // overflow: hidden; } .slick-dots { position: absolute; bottom: -30px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; margin: 0; li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0px; font-size: 0px; color: transparent; padding: 5px; cursor: pointer; &:hover, &:focus { outline: none; background: transparent; &:before { opacity: $slick-opacity-on-hover; } } &:before { position: absolute; top: 0; left: 0; // content: $slick-dot-character; content: ''; display: inline-block; width: 20px; height: 20px; font-family: $slick-font-family; font-size: $slick-dot-size; line-height: 20px; text-align: center; color: $slick-dot-color; opacity: $slick-opacity-not-active; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-image: url( 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSIxMDI0IiB3aWR0aD0iNTExLjgyNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNLTAuMDg4IDUxMmMwLTE0MS41IDExNC41LTI1NiAyNTYtMjU2IDE0MS40MzggMCAyNTYgMTE0LjUgMjU2IDI1NnMtMTE0LjU2MiAyNTYtMjU2IDI1NkMxMTQuNDEzIDc2OC0wLjA4OCA2NTMuNS0wLjA4OCA1MTJ6Ii8+PC9zdmc+' ); background-repeat: no-repeat; background-position: center; background-size: 30%; } } &.slick-active button:before { color: $slick-dot-color-active; opacity: $slick-opacity-default; } } } /*////////////////////////////////////// // Custom //////////////////////////////////////*/ .slick-prev, .slick-next { border-radius: 0; top: initial; bottom: 15%; background-color: rgba( #000, 0.2 ); &:hover { background-color: rgba( #000, 0.5 ) !important; color: #fff !important; } } .slick-prev { left: 0px; } .slick-next { right: 0px; }