📁 PHP Dosya Yöneticisi
/
/
home
/
demodesigncom
/
matba.demodesign.com.tr
/
public
/
assets
/
slippry
📝
slippry.scss
← Geri Dön
/** * * slippry v1.4.0 - Responsive content slider for jQuery * http://slippry.com * * Authors: Lukas Jakob Hafner - @saftsaak * Thomas Hurd - @SeenNotHurd * * Copyright 2016, booncon oy - http://booncon.com * * * Released under the MIT license - http://opensource.org/licenses/MIT */ $color_high: #e24b70 !default; // highlight colour $color_gray: #ccc !default; // neutral colour $controls_size: 2.8em !default; // size of the next/ prev buttons $pager_size: 1.2em !default; // size of the pager bubbles $trans_ease: ease !default; // easing for the transitions $mobile_break: 600px !default; // breakpoint to use some special mobile styling $spinner_url: '/images/sy-loader.gif' !default; $arrows_url: '/images/arrows.svg' !default; @mixin animation ($animation) { animation-name: $animation; animation-fill-mode: forwards; } /* kenBurns animations, very basic */ @keyframes left-right { 0% { transform: translateY(-20%) translateX(-10%); } 100% { transform: translateY(0%) translateX(10%); } } @keyframes right-left { 0% { transform: translateY(0%) translateX(10%); } 100% { transform: translateY(-20%) translateX(-10%); } } /* added to the original element calling slippry */ .sy-box { &.sy-loading { .sy-slides-wrap, .sy-pager { visibility: hidden; } background: url($spinner_url) 50% 50% no-repeat; background-size: 32px; min-height: 40px; } } /* element that wraps the slides */ .sy-slides-wrap { position: relative; height: 100%; width: 100%; &:hover { .sy-controls { display: block; } } } /* element that crops the visible area to the slides */ .sy-slides-crop { height: 100%; width: 100%; position: absolute; overflow: hidden; } /* list containing the slides */ .sy-list { &.horizontal { transition: left $trans_ease; } &.vertical { transition: top $trans_ease; } width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; position: absolute; } /* single slide */ .sy-slide { position: absolute; width: 100%; z-index: 2; &.kenburns { width: 140%; left: -20%; &.useCSS { &.sy-ken { &:nth-child(1n) { @include animation(left-right); } &:nth-child(2n) { @include animation(right-left); } } transition-property: opacity; } } &.sy-active { z-index: 3; } > img { // with one image as content -> full size margin: 0; padding: 0; display: block; width: 100%; border: 0; } > a { // styling for link on whole slide margin: 0; padding: 0; display: block; width: 100%; > img { // with one image as content -> full size margin: 0; padding: 0; display: block; width: 100%; border: 0; } } } /* next/ prev buttons, with arrows and clickable area a lot larger than the visible buttons */ .sy-controls { display: none; list-style: none; height: 100%; width: 100%; position: absolute; padding: 0; margin: 0; li { position: absolute; width: 10%; min-width: $controls_size * 1.5; height: 100%; z-index: 33; &.sy-prev { left: 0; top: 0; a { &:after { background-position: -5% 0; } } } &.sy-next { right: 0; top: 0; a { &:after { background-position: 105% 0; } } } a { position: relative; width: 100%; height: 100%; display: block; text-indent: -9999px; &:link, &:visited { opacity: 0.4; } &:hover, &:focus { opacity: 0.8; outline: none; } &:after { content: ""; background-image: url($arrows_url); background-repeat: no-repeat; background-size: cover; text-align: center; text-indent: 0; line-height: $controls_size; color: #111; font-weight: 800; position: absolute; background-color: #fff; width: $controls_size; height: $controls_size; left: 50%; top: 50%; margin-top: -$controls_size / 2; margin-left: -$controls_size / 2; border-radius: 50%; } } } @media only screen and (max-device-width : $mobile_break) { display: block; $controls_size: $controls_size / 2; li { min-width: $controls_size * 1.5; a { &:after { width: $controls_size; height: $controls_size; margin-top: -$controls_size / 2; margin-left: -$controls_size / 2; } } } } } /* captions, styled fo the overlay variant */ .sy-caption-wrap { position: absolute; bottom: 2em; z-index: 12; left: 50%; .sy-caption { position: relative; left: -50%; background-color: rgba(0,0,0,0.54); color: #fff; padding: 0.4em 1em; border-radius: 1.2em; a { &:link, &:visited { color: $color_high; font-weight: 600; text-decoration: none; } &:hover, &:focus { text-decoration: underline; } } } @media only screen and (max-device-width : $mobile_break), screen and (max-width : $mobile_break) { left: 0; bottom: 0.4em; .sy-caption { left: 0; padding: 0.2em 0.4em; font-size: 0.92em; border-radius: 0; } } } /* pager bubbles */ .sy-pager { clear: both; display: block; width: 100%; margin: 1em 0 0; padding: 0; list-style: none; text-align: center; li { display: inline-block; width: $pager_size; height: $pager_size; margin: 0 1em 0 0; border-radius: 50%; &.sy-active { a { background-color: $color_high; } } a { width: 100%; height: 100%; display: block; background-color: $color_gray; text-indent: -9999px; &:link, &:visited { opacity: 1.0; } &:hover, &:focus { opacity: 0.6; } background-size: 2em; border-radius: 50%; } } } /* element to "keep/ fill" the space of the content, gets intrinsic height via js */ .sy-filler { width: 100%; &.ready { transition: padding 600ms ease; } }
💾 Kaydet
İptal
📝 Yeniden Adlandır
İptal
Kaydet
🔐 Dosya İzinleri (chmod)
İzin Değeri:
Hızlı Seçim:
777
755
644
600
777
= Herkes okur/yazar/çalıştırır
755
= Sahip tam, diğerleri okur/çalıştırır
644
= Sahip okur/yazar, diğerleri okur
600
= Sadece sahip okur/yazar
İptal
Uygula