722 lines
19 KiB
SCSS
722 lines
19 KiB
SCSS
|
/*******************************************************************
|
||
|
|
****** SO Framework: Sass System ******
|
||
|
|
********************************************************************/
|
||
|
|
|
||
|
|
/* 1.BACK TOP TOP DEMO OPENCART
|
||
|
|
----------------------------------------------------- */
|
||
|
|
|
||
|
|
.back-to-top {
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: #777;color: #fff;
|
||
|
|
width: 45px;bottom: 50px;#{$right}:50px;padding: 5px 0;
|
||
|
|
overflow: hidden; z-index: 40;position: fixed;display: inline;text-align: center;border-radius:3px;opacity:1;
|
||
|
|
|
||
|
|
@include transition(all 0.5s ease-in-out 0s);
|
||
|
|
@include transform(scale(1) );
|
||
|
|
|
||
|
|
&.hidden-top {bottom: -100px;opacity:0; @include transform(scale(0) );}
|
||
|
|
&:hover{background-color:$background1;}
|
||
|
|
i{font-size: 32px;display: block; line-height: 18px;}
|
||
|
|
span{display: block; line-height: 18px;}
|
||
|
|
|
||
|
|
@media (max-width: 991px){
|
||
|
|
right: 10px;
|
||
|
|
bottom: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 2.SOCIAL ACCOUNTS (RIGHT FIXED PANEL)
|
||
|
|
----------------------------------------------------- */
|
||
|
|
.social-widgets {
|
||
|
|
position:fixed;
|
||
|
|
z-index:560;
|
||
|
|
top:50%;
|
||
|
|
height:0;
|
||
|
|
width:0;
|
||
|
|
#{$right} :0
|
||
|
|
}
|
||
|
|
.social-widgets .item, .social-widgets .items {
|
||
|
|
margin:0;
|
||
|
|
padding:0;
|
||
|
|
list-style-type:none
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-widgets .items {
|
||
|
|
top:-100px;
|
||
|
|
position:relative
|
||
|
|
}
|
||
|
|
.social-widgets .item {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
#{$left} : 120px
|
||
|
|
}
|
||
|
|
.social-widgets .active {
|
||
|
|
z-index:100;
|
||
|
|
#{$left} :-310px
|
||
|
|
}
|
||
|
|
.social-widgets .item-01, .social-widgets .item-02, .social-widgets .item-03, .social-widgets .item-04, .social-widgets .item-05, .social-widgets .item-06, .social-widgets .item-07, .social-widgets .item-08, .social-widgets .item-09 {
|
||
|
|
#{$left} :0;
|
||
|
|
}
|
||
|
|
.social-widgets .item-01 {
|
||
|
|
top:0;
|
||
|
|
z-index:99
|
||
|
|
}
|
||
|
|
.social-widgets .item-02 {
|
||
|
|
top:45px;
|
||
|
|
z-index:98
|
||
|
|
}
|
||
|
|
.social-widgets .item-03 {
|
||
|
|
top:90px;
|
||
|
|
z-index:97
|
||
|
|
}
|
||
|
|
.social-widgets .item-04 {
|
||
|
|
top:150px;
|
||
|
|
z-index:96
|
||
|
|
}
|
||
|
|
.social-widgets .item-05 {
|
||
|
|
top:200px;
|
||
|
|
z-index:95
|
||
|
|
}
|
||
|
|
|
||
|
|
.social-widgets .tab-icon .fa{font-size:18px;}
|
||
|
|
.social-widgets .tab-icon {
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
#{$left} :-45px;
|
||
|
|
display:block;
|
||
|
|
width:45px;
|
||
|
|
height:45px;
|
||
|
|
background:#fff;
|
||
|
|
text-align:center;
|
||
|
|
font-size:1.54em;
|
||
|
|
line-height:45px;
|
||
|
|
}
|
||
|
|
.social-widgets .tab-icon:hover {
|
||
|
|
text-decoration:none
|
||
|
|
}
|
||
|
|
.social-widgets .active .tab-icon {
|
||
|
|
border-color:#E9E9E9;
|
||
|
|
background:#fff
|
||
|
|
}
|
||
|
|
.social-widgets .facebook .tab-icon{
|
||
|
|
background: #3b5998;
|
||
|
|
background-clip: content-box;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.social-widgets .twitter .tab-icon{
|
||
|
|
background: #07779a;
|
||
|
|
background-clip: content-box;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.social-widgets .youtube .tab-icon{
|
||
|
|
background: #DA2723;
|
||
|
|
background-clip: content-box;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.social-widgets .tab-content {
|
||
|
|
background:#fff;
|
||
|
|
width:310px;
|
||
|
|
padding:10px ;
|
||
|
|
}
|
||
|
|
.social-widgets .active .tab-content {
|
||
|
|
box-shadow:0 0 4px rgba(0, 0, 0, .15)
|
||
|
|
}
|
||
|
|
.social-widgets .title {
|
||
|
|
margin: side-values(-10px -10px 10px);
|
||
|
|
padding: 0px 10px;
|
||
|
|
background-color: #ccc;
|
||
|
|
text-transform: uppercase;
|
||
|
|
line-height: 45px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: bold;
|
||
|
|
h5{
|
||
|
|
line-height: 45px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.social-widgets .facebook.active {
|
||
|
|
#{$left} :-260px
|
||
|
|
}
|
||
|
|
.social-widgets .facebook .tab-content {
|
||
|
|
width:260px
|
||
|
|
}
|
||
|
|
.social-widgets .twitter.active {
|
||
|
|
#{$left} :-300px
|
||
|
|
}
|
||
|
|
.social-widgets .twitter .tab-content {
|
||
|
|
width:300px
|
||
|
|
}
|
||
|
|
.social-widgets .twitter-widget {
|
||
|
|
padding-top:10px
|
||
|
|
}
|
||
|
|
.social-widgets .youtube.active {
|
||
|
|
#{$left} :-450px
|
||
|
|
}
|
||
|
|
.social-widgets .youtube .tab-content {
|
||
|
|
width:450px;
|
||
|
|
}
|
||
|
|
.social-widgets .loading {
|
||
|
|
min-height:200px;
|
||
|
|
position:relative;
|
||
|
|
z-index: 1000;
|
||
|
|
}
|
||
|
|
.social-widgets .loading img.ajaxloader {
|
||
|
|
position:absolute;
|
||
|
|
top:45%;
|
||
|
|
#{$left} :45%;
|
||
|
|
width:32px;
|
||
|
|
height:32px
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 3.TOP PANEL (RIGHT FIXED PANEL)
|
||
|
|
----------------------------------------------------- */
|
||
|
|
// @include breakpoint(lg){
|
||
|
|
// .navbar-compact { position: fixed;width:100%; background: #fff; z-index:900;box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
|
||
|
|
// @include transition(all 0.5s ease-in-out);
|
||
|
|
// &.hidden-menu{@include transform(translate(0,-100%));}
|
||
|
|
// }
|
||
|
|
// .navbar-compact .compact-hidden{display: none !important;}
|
||
|
|
// .navbar-compact .header-center{padding: 20px 0; transition: 0.3s all ease 0s;}
|
||
|
|
// .navbar-compact .header-bottom{margin:0 !important;}
|
||
|
|
// .navbar-switcher {
|
||
|
|
// text-align: center;
|
||
|
|
// float: $right;
|
||
|
|
// display: none;
|
||
|
|
// width: 45px;
|
||
|
|
// height: 45px;
|
||
|
|
// margin-bottom: -47px;
|
||
|
|
// background: $background1!important;
|
||
|
|
// padding: 6px 7px;
|
||
|
|
// border-radius: 0 0 3px 3px;
|
||
|
|
// cursor: pointer;
|
||
|
|
// color: #fff;
|
||
|
|
// }
|
||
|
|
// .navbar-switcher .i-active, .navbar-switcher.active .i-inactive {display:none}
|
||
|
|
// .navbar-switcher.active .i-active ,
|
||
|
|
// .navbar-switcher .fa-caret-down{display:inline;font-size:1.8em;line-height:1.5em}
|
||
|
|
// .navbar-compact {
|
||
|
|
// &.type_1 ,&.type_2{
|
||
|
|
// .sidebar-menu {display: none;}
|
||
|
|
// .header-bottom-right{margin: 0;padding: 0 15px;width:100%;}
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// header .navbar-switcher{display: block;}
|
||
|
|
// }
|
||
|
|
/* 4.LARY LOADER
|
||
|
|
--------------------------------------- */
|
||
|
|
.mfp-iframe-scaler iframe{background: white url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;}
|
||
|
|
.lazy {display: block;position: relative; overflow: hidden; background: transparent url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;}
|
||
|
|
.loadeding{background: white url(#{$base-url-theme}lazy-loader.gif) no-repeat center center;;height: 100%; position: absolute;z-index: 2;top: 0;left: 0;right: 0;opacity: 1;}
|
||
|
|
.loaded .loadeding{background: none;height:auto;opacity: 0;display: none;}
|
||
|
|
@media (min-width: 1200px) {
|
||
|
|
.lazy.lazy-loaded {background: none;height:auto;}
|
||
|
|
.lazy img {transition: 1s all ease;opacity: 0;-webkit-backface-visibility: hidden;}
|
||
|
|
.lazy.lazy-loaded img { opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Overlay pattern
|
||
|
|
--------------------------------------- */
|
||
|
|
body.no-bgbody{background-image:none;}
|
||
|
|
|
||
|
|
$columns: 45;
|
||
|
|
@for $i from 1 through $columns {
|
||
|
|
.pattern-#{$i} {
|
||
|
|
background-image: url('#{$base-url-theme}patterns/#{$i}.png');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Preloading Screen
|
||
|
|
--------------------------------------- */
|
||
|
|
|
||
|
|
// #loader-wrapper {
|
||
|
|
// position: fixed;
|
||
|
|
// top: 0;
|
||
|
|
// left: 0;
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// z-index: 1000;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// #loader {
|
||
|
|
// display: block;
|
||
|
|
// position: relative;
|
||
|
|
// left: 50%;
|
||
|
|
// top: 50%;
|
||
|
|
// width: 150px;
|
||
|
|
// height: 150px;
|
||
|
|
// margin: -75px 0 0 -75px;
|
||
|
|
// border-radius: 50%;
|
||
|
|
// border: 3px solid transparent;
|
||
|
|
// border-top-color: #3498db;
|
||
|
|
// z-index: 1001;
|
||
|
|
// animation: spin 2s linear infinite;
|
||
|
|
|
||
|
|
// &:before {
|
||
|
|
// content: "";
|
||
|
|
// position: absolute;
|
||
|
|
// top: 5px;
|
||
|
|
// left: 5px;
|
||
|
|
// right: 5px;
|
||
|
|
// bottom: 5px;
|
||
|
|
// border-radius: 50%;
|
||
|
|
// border: 3px solid transparent;
|
||
|
|
// border-top-color: #e74c3c;
|
||
|
|
// animation: spin 3s linear infinite;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// &:after {
|
||
|
|
// content: "";
|
||
|
|
// position: absolute;
|
||
|
|
// top: 15px;
|
||
|
|
// right: 15px;
|
||
|
|
// left: 15px;
|
||
|
|
// bottom: 15px;
|
||
|
|
// border-radius: 50%;
|
||
|
|
// border: 3px solid transparent;
|
||
|
|
// border-top-color: #f9c922;
|
||
|
|
// animation: spin 1.5s linear infinite;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// #loader-wrapper .loader-section {
|
||
|
|
// position: fixed;
|
||
|
|
// top: 0;
|
||
|
|
// width: 50%;
|
||
|
|
// height: 100%;
|
||
|
|
// background: rgba(255,255,255,0.6);
|
||
|
|
// z-index: 1000;
|
||
|
|
// transform: translateX(0);
|
||
|
|
// }
|
||
|
|
|
||
|
|
// #loader-wrapper .loader-section.section-left {
|
||
|
|
// left: 0;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// #loader-wrapper .loader-section.section-right {
|
||
|
|
// right: 0;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// //Loading Logo
|
||
|
|
// .ip-header {
|
||
|
|
// position: fixed;
|
||
|
|
// top: 0;
|
||
|
|
// z-index: 99999;
|
||
|
|
// min-height: 480px;
|
||
|
|
// width: 100%;
|
||
|
|
// height: 100%;
|
||
|
|
// background: #ffffff;
|
||
|
|
// h1 { margin: 0;}
|
||
|
|
// .ip-inner {display: block;margin: 0 auto;}
|
||
|
|
// .ip-logo {position: absolute;top: 40%;text-align: center;
|
||
|
|
// a {display: inline-block;}
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .ip-loader svg path {fill: none;stroke-width: 6;}
|
||
|
|
// .ip-loader svg path.ip-loader-circlebg {stroke: #ddd;}
|
||
|
|
// .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s;transition: stroke-dashoffset 0.2s;stroke: #df1f26;}
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
// .ip-logo,
|
||
|
|
// .ip-loader {position: absolute;left: 0;width: 100%;opacity: 0;cursor: default;pointer-events: none;}
|
||
|
|
// .ip-loader {top: 46%;}
|
||
|
|
|
||
|
|
|
||
|
|
// .loading .ip-logo,
|
||
|
|
// .loading .ip-loader {
|
||
|
|
// opacity: 1;
|
||
|
|
// -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
|
||
|
|
// animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .loading .ip-loader {
|
||
|
|
// -webkit-animation-delay: 0.2s;
|
||
|
|
// animation-delay: 0.2s;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// .loaded .ip-loader {
|
||
|
|
// -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||
|
|
// animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||
|
|
// }
|
||
|
|
// .loaded .ip-header {
|
||
|
|
// -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
|
||
|
|
// animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
|
||
|
|
// }
|
||
|
|
// .loaded .ip-logo,
|
||
|
|
// .loaded .ip-loader {
|
||
|
|
// opacity: 1;
|
||
|
|
// }
|
||
|
|
// .loaded .ip-logo {
|
||
|
|
// display: none;
|
||
|
|
// }
|
||
|
|
|
||
|
|
// Animations
|
||
|
|
@keyframes spin {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Loaded
|
||
|
|
.loaded #loader-wrapper .loader-section.section-left {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loaded #loader-wrapper .loader-section.section-right {
|
||
|
|
transform: translateX(100%);
|
||
|
|
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loaded #loader {
|
||
|
|
opacity: 0;
|
||
|
|
transition: all 0.3s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loaded #loader-wrapper {
|
||
|
|
visibility: hidden;
|
||
|
|
transform: translateY(-100%);
|
||
|
|
transition: all 0.3s 1s ease-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* @group Banners hover effect */
|
||
|
|
.banners-effect-1 .banners > div {
|
||
|
|
img { @include transition(all 0.2s ease-in);
|
||
|
|
&:hover{opacity: 0.8;}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-2 .banners > div a{display: block;position: relative;overflow: hidden;
|
||
|
|
&:hover{
|
||
|
|
&:before,&:after{left: 0;opacity: 1;}
|
||
|
|
}
|
||
|
|
&:before,&:after{
|
||
|
|
background-color: rgba(255, 255, 255, 0.4);
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: -100%;
|
||
|
|
opacity: 0;
|
||
|
|
filter: alpha(opacity=0);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
@include transition(all 0.3s ease-in);
|
||
|
|
content: "";
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-3 .banners > div a {display: block;position: relative;overflow: hidden;
|
||
|
|
&:hover{
|
||
|
|
&:before,&:after{border: 0 solid rgba(0, 0, 0, 0.7);opacity: 0;filter: alpha(opacity=0);}
|
||
|
|
}
|
||
|
|
&:before,&:after{
|
||
|
|
border: 50px solid transparent;
|
||
|
|
border-top-right-radius: 50px;
|
||
|
|
border-top-left-radius: 50px;
|
||
|
|
border-bottom-right-radius: 50px;
|
||
|
|
border-bottom-left-radius: 50px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
cursor: pointer;
|
||
|
|
display: inline-block;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: auto;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
content: "";
|
||
|
|
opacity: 1;
|
||
|
|
filter: alpha(opacity=100);
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
@include transform(scale(7));
|
||
|
|
@include transition(all 0.4s ease-in-out);
|
||
|
|
|
||
|
|
visibility: visible;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-4 .banners > div a {display: block;position: relative;overflow: hidden;
|
||
|
|
&:hover{
|
||
|
|
&:before,&:after{
|
||
|
|
opacity: 1;
|
||
|
|
|
||
|
|
@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 4, 1));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:before,&:after{
|
||
|
|
border-bottom: 50px solid rgba(0, 0, 0, 0.2);
|
||
|
|
border-top: 50px solid rgba(0, 0, 0, 0.2);
|
||
|
|
content: "";
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
opacity: 0;
|
||
|
|
filter: alpha(opacity=0);
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
transform-origin: 50% 50% 0;
|
||
|
|
width: 100%;
|
||
|
|
@include transform(rotate3d(0, 0, 1, 45deg) scale3d(1, 0, 1));
|
||
|
|
@include transition(opacity 0.4s ease 0s, transform 0.35s ease 0s);
|
||
|
|
|
||
|
|
visibility: visible;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-5 .banners > div a {display: block;position: relative;overflow: hidden;
|
||
|
|
&:hover{
|
||
|
|
&:before,&:after{
|
||
|
|
opacity: 0;
|
||
|
|
filter: alpha(opacity=0);
|
||
|
|
border: 0 double rgba(255, 255, 255, 0.7);
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:before,&:after{
|
||
|
|
bottom: 0;
|
||
|
|
content: "";
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 0;
|
||
|
|
|
||
|
|
z-index: 1;
|
||
|
|
border: 200px double transparent;
|
||
|
|
opacity: 1;
|
||
|
|
filter: alpha(opacity=100);
|
||
|
|
visibility: visible;
|
||
|
|
|
||
|
|
@include transition(all 0.4s cubic-bezier(0.94, 0.85, 0.1, 0.62) 0s);
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-6 .banners > div a {
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: top;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-6 .banners > div a img {
|
||
|
|
backface-visibility: hidden;
|
||
|
|
opacity: 1;
|
||
|
|
filter: alpha(opacity=100);
|
||
|
|
-webkit-transition: opacity 1s ease 0s, transform 1s ease 0s;
|
||
|
|
-o-transition: opacity 1s ease 0s, transform 1s ease 0s;
|
||
|
|
transition: opacity 1s ease 0s, transform 1s ease 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-6 .banners > div a:hover img {
|
||
|
|
opacity: 0.8;
|
||
|
|
filter: alpha(opacity=80);
|
||
|
|
transform: scale3d(1.1, 1.1, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-7 .banners > div a {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-7 .banners > div a:before {
|
||
|
|
position: absolute;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
width: 0;
|
||
|
|
top: 0;
|
||
|
|
left: 50%;
|
||
|
|
content: "";
|
||
|
|
transition: all 0.3s ease-in-out 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-7 .banners > div a:hover:before {
|
||
|
|
width: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a {
|
||
|
|
display: inline-block;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
background: #000;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a:before,
|
||
|
|
.banners-effect-8 .banners > div a:after {
|
||
|
|
bottom: 20px;
|
||
|
|
content: "";
|
||
|
|
left: 20px;
|
||
|
|
opacity: 0;
|
||
|
|
position: absolute;
|
||
|
|
right: 20px;
|
||
|
|
top: 20px;
|
||
|
|
-webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
|
||
|
|
-o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
|
||
|
|
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a:before {
|
||
|
|
border-bottom: 1px solid #ffffff;
|
||
|
|
border-top: 1px solid #ffffff;
|
||
|
|
-webkit-transform: scale(0, 1);
|
||
|
|
-ms-transform: scale(0, 1);
|
||
|
|
-o-transform: scale(0, 1);
|
||
|
|
transform: scale(0, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a:after {
|
||
|
|
border-left: 1px solid #ffffff;
|
||
|
|
border-right: 1px solid #ffffff;
|
||
|
|
-webkit-transform: scale(1, 0);
|
||
|
|
-ms-transform: scale(1, 0);
|
||
|
|
-o-transform: scale(1, 0);
|
||
|
|
transform: scale(1, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div img {
|
||
|
|
opacity: 1;
|
||
|
|
width:100%;
|
||
|
|
filter: alpha(opacity=100);
|
||
|
|
-webkit-transition: opacity 0.35s ease 0s;
|
||
|
|
-o-transition: opacity 0.35s ease 0s;
|
||
|
|
transition: opacity 0.35s ease 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a:hover:before,
|
||
|
|
.banners-effect-8 .banners > div a:hover:after {
|
||
|
|
opacity: 1;
|
||
|
|
filter: alpha(opacity=100);
|
||
|
|
-webkit-transform: scale(1);
|
||
|
|
-ms-transform: scale(1);
|
||
|
|
-o-transform: scale(1);
|
||
|
|
transform: scale(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-8 .banners > div a:hover img {
|
||
|
|
opacity: 0.5;
|
||
|
|
filter: alpha(opacity=50);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-9 .banners > div a {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
z-index: 10;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-9 .banners > div a:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: #000;
|
||
|
|
content: '';
|
||
|
|
-webkit-transition: opacity 0.35s;
|
||
|
|
transition: opacity 0.35s;
|
||
|
|
box-shadow: 0 3px 30px rgba(0,0,0,0.2);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-9 .banners > div a:hover:before {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-9 .banners > div a img {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transition: -webkit-transform 0.35s;
|
||
|
|
transition: transform 0.35s;
|
||
|
|
-webkit-transform: perspective(1000px) translate3d(0,0,0);
|
||
|
|
transform: perspective(1000px) translate3d(0,0,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-9 .banners > div a:hover img {
|
||
|
|
-webkit-transform: perspective(1000px) translate3d(0,0,21px);
|
||
|
|
transform: perspective(1000px) translate3d(0,0,21px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-10 .banners > div a {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-10 .banners > div a:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
|
||
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 75%);
|
||
|
|
content: '';
|
||
|
|
opacity: 0;
|
||
|
|
-webkit-transform: translate3d(0,50%,0);
|
||
|
|
transform: translate3d(0,50%,0);
|
||
|
|
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||
|
|
transition: opacity 0.35s, transform 0.35s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-10 .banners > div a:hover:before {
|
||
|
|
opacity: 1;
|
||
|
|
-webkit-transform: translate3d(0,0,0);
|
||
|
|
transform: translate3d(0,0,0);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.banners-effect-11 .banners > div a {display: block;position: relative;overflow: hidden;
|
||
|
|
&:hover{
|
||
|
|
&:before,&:after{
|
||
|
|
width:100%;height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
&:before,&:after{
|
||
|
|
background-color: rgba(0, 0, 0, 0.15);
|
||
|
|
content: "";
|
||
|
|
height: 0;
|
||
|
|
left: 0;
|
||
|
|
margin: auto;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
width: 0;
|
||
|
|
@include transition(all 0.3s ease-out 0s);
|
||
|
|
}
|
||
|
|
&:after{left: auto;right: 0; bottom: 0;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.banners-effect-12 .banners > div {
|
||
|
|
img { @include transition(all 0.3s ease-in);
|
||
|
|
&:hover{@include filter(grayscale(100%));}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
/* @end */
|