File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/_theme_mixin.scss
// px2percent function
@function px2percent($size:13px, $origin:13px) {
@return percentage($size/$origin);
}
//
@mixin animation-play-state($status){
animation-play-state: $status;
-moz-animation-play-state: $status;
-webkit-animation-play-state: $status;
-o-animation-play-state: $status;
-ms-animation-play-state: $status;
}
// transition-timing
@mixin transition-timing($timing) {
-webkit-transition-timing-function: $timing;
transition-timing-function: $timing;
}
// Font awesome
@mixin font-awesome($code, $size){
content: $code;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include square($size);
text-align: center;
line-height: $size;
}
@mixin font-awesome5($code, $size, $weight){
content: $code;
display: inline-block;
font-family: 'Font Awesome 5 Free';
font-weight: $weight;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include square($size);
text-align: center;
line-height: $size;
}
@mixin font-awesome5brand($code, $size){
content: $code;
display: inline-block;
font-family: 'Font Awesome 5 Brands';
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include square($size);
text-align: center;
line-height: $size;
}
// Font awesome
@mixin font-ionicons($code, $size){
content: $code;
display: inline-block;
font-family: Ionicons;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include square($size);
text-align: center;
line-height: $size;
}
@mixin ulclear() {
margin: 0;padding: 0;list-style: none;
}
@mixin effect-block-show() {
visibility: visible;
@include opacity(1);
@include transform(translate3d(0,0,0));
@include transition(visibility 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease);
}
@mixin effect-block-hide() {
visibility: hidden;
display: block;
@include opacity(0);
top: 100%;
@include transition(visibility 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.1s ease);
@include transform(translate3d(-30px,0,0));
}
@mixin effect-block-show-child(){
display: block;
opacity: 1;
filter: alpha(opacity=100);
@include transition(visibility 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease, left 0.25s ease, right 0.25s ease);
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
visibility: visible;
}
@mixin effect-block-hide-child(){
display: block;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
@include transition(visibility 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease, left 0.25s ease, right 0.25s ease);
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
}
@mixin mega-cols{
> li.menu-item{
float: left;
}
&.col-1{
> li.menu-item{
width: 100%;
}
}
&.col-2{
> li.menu-item{
width: 50%;
}
}
&.col-3{
> li.menu-item{
width: 33.33%;
}
}
&.col-4{
> li.menu-item{
width: 25%;
}
}
&.col-5{
> li.menu-item{
width: 20%;
}
}
&.col-6{
> li.menu-item{
width: 16.67%;
}
}
}
// Dots paging
@mixin owl-dots1(){
.owl-dots{ text-align: center; margin: 30px 0 0;
.owl-dot{ background: $button-bg-color; border: none; height: 5px; width: 25px; display: inline-block; margin: 0 5px; cursor: pointer;
@include transition(all 0.25s ease-out);
&:hover{
background: $color1;
}
&.active{
background: $color1;
}
}
}
}
@mixin owl-dots-white(){
.owl-dots{ text-align: center; margin: 40px 0 0;
.owl-dot{ height: 30px; width: 30px; display: inline-block; margin: 0 5px; position: relative;
cursor: pointer; border: 1px solid transparent; background:none; @include border-radius(100%); @include transition(all 0.25s ease-out);
&:before{
content: ""; height: 8px; width: 8px; @include border-radius(100%); background: rgba(#fff, 0.4);
position: absolute; left: calc(50% - 4px); top: calc(50% - 4px);
}
&:hover{ background: none;
&:before{ background: #fff;}
}
&.active{
border-color: rgba(255, 255, 255, 0.4); background: none;
&:before{ background: #fff;}
}
}
}
}
// Navslider
@mixin owl-nav1(){
.owl-nav{
.owl-prev,
.owl-next{
text-align: center; position: absolute; font-size: 0px; width: 32px; height: 32px; line-height: 32px;
top: calc(50% - 16px); cursor: pointer; @include transition(all 0.25s ease-out);
color: $button-bg-color;
@media(max-width: $screen-md-min){ display: none; }
&:before{ font-size: 32px; width: 32px !important; height: 32px !important; line-height: 32px !important; color: inherit; }
&:hover{
color: $color1;
}
&.disabled{ @include opacity(0.6); display: inline-block;
&:hover{cursor: not-allowed;}
}
}
.owl-prev{
left: -35px;
@media(max-width: 1280px){
left: -30px;
}
&:before{ @include font-ionicons('\f124', 32px); }
}
.owl-next{
right: -35px; left: auto;
@media(max-width: 1280px){
right: -30px;
}
&:before{ @include font-ionicons('\f125', 32px); }
}
}
}
@mixin owl-nav-singlep(){
.owl-nav{
.owl-prev,
.owl-next{
background: $line-border-color; text-align: center; font-size: 0px;
cursor: pointer; @include transition(all 0.25s ease-out); color: $color; width: 25px; height: 50px;
position: absolute; top: calc(50% - 25px);
&:before{
font-size: 20px; @include font-awesome5('\f104', 25px, 900);
}
&:hover{
color: #FFF; box-shadow: 0 0 0 25px inset $color1;
}
&.disabled{ @include opacity(0.6); display: inline-block;
&:hover{cursor: not-allowed;}
}
}
.owl-prev{
left: -30px;
&:before{ @include font-awesome5('\f104', 25px, 900); height: 48px; line-height: 48px; }
}
.owl-next{
right: -30px; left: auto;
&:before{ @include font-awesome5('\f105', 25px, 900); height: 48px; line-height: 48px; }
}
}
}
@mixin owl-nav2(){
.owl-nav{
position: absolute; height: 40px; width: 125px; right: 0px; top: 0px; background: #fff;
.owl-prev,
.owl-next{
text-align: center; font-size: 0px; width: 40px; height: 40px; line-height: 40px; position: absolute;
top: 0px; cursor: pointer; @include transition(all 0.25s ease-out);
background: $link-color; color: #FFF; @include border-radius(0px); box-shadow: none;
&:before{ font-size: 18px; color: inherit; }
&:hover{
color: #FFF; background: $color1;
}
&.disabled{ display: inline-block;
&:hover{cursor: not-allowed;}
}
}
.owl-prev{
left: 20px;
&:before{ @include font-ionicons('\f3cf', 40px); }
}
.owl-next{
right: 20px; left: auto;
&:before{ @include font-ionicons('\f3d1', 40px); }
}
}
}
@mixin nav_slick1(){
.slick-arrow{
height: 50px; width: 25px; text-align: center; font-size: 0px; border: none; @include border-radius(0);
background: $line-border-color; color: $color; position: absolute; top: calc(50% - 25px); z-index: 1; padding: 0; text-align: center;
&:before{ font-size: 24px;}
&:hover{
cursor: pointer; color: #fff; box-shadow: 0 0 0 50px $link-color inset;
}
&.disabled{ @include opacity(0.6);
&:hover{cursor: not-allowed;}
}
&.slick-prev{
left: 15px;
&:before{ @include font-awesome5('\f104', 50px, 900); width: 25px;}
}
&.slick-next{
right: 15px; left: auto;
&:before{ @include font-awesome5('\f105', 50px, 900); width: 25px; }
}
}
}
@mixin navslider2(){
.owl-nav{
.owl-prev,
.owl-next{
@include square(50px); text-align: center; position: absolute; top: calc(50% - 25px); font-size: 0px; background: rgba(0,0,0,0.2); color: #FFF; @include transition(all 0.25s ease-out);
&:before{ font-size: 24px; @include transition(all 0.25s ease-out); }
@media (max-width: $screen-xs-max) {
@include square(40px); top: calc(50% - 20px);
&:before{ font-size: 24px; }
}
&:hover{
cursor: pointer; background: #FFF;
&:before{ color: $color1; }
}
&.disabled{ @include opacity(0.6);
&:hover{cursor: not-allowed;}
}
}
.owl-prev{
left: 0px;
&:before{ @include font-awesome5('\f104', 50px, 900);
@media (max-width: $screen-xs-max) { @include square(40px); line-height: 40px; }
}
}
.owl-next{
right: 0px; left: auto;
&:before{ @include font-awesome5('\f105', 50px, 900);
@media (max-width: $screen-xs-max) { @include square(40px); line-height: 40px;}
}
}
}
}
@mixin effect-product-image-hide(){
.product-image{
position: relative;
z-index: 0;
display: block;
overflow: hidden;
text-align: center;
.img-main{
display: block;
@include translateY(0);
@include transition(all 0.4s ease-out);
}
.img-additional{
text-align: center;
left: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
max-width: 100%;
z-index: -1;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
@include translateY(-120%);
@include transition(all 0.4s ease-out);
}
}
}
@mixin effect-product-image-show(){
.product-image{
.img-main{
@include translateY(120%);
}
.img-additional{
@include translateY(0);
}
}
}
.container-image-and-badge{
.yith-wcbm-badge{
text-transform: uppercase; font-size: 12px;
}
}
// Product's badges
@mixin product-block-badges() {
// override yth bagde
.container-image-and-badge{
position: static;
.yith-wcbm-badge{
left: 10px; top: 10px; text-transform: uppercase; font-size: 11px; @include border-radius(100%);
}
}
.onsale{
position: absolute; top: 20px; left: 20px; z-index: 1; color: #fff; font-size: 12px; font-weight: bold; height: 22px; line-height: 22px; min-width: auto; min-height: auto;
padding: 0 6px; @include border-radius(3px); background: #f33131; box-shadow: 0 0 5px rgba(0,0,0,0.1); text-transform: uppercase; text-align: center;
& + .images .container-image-and-badge,
& + .container-image-and-badge{
.yith-wcbm-badge{
top: 42px;
}
}
}
}
// Product action buttons Grid
@mixin product-action-buttons(){
.inner{
}
.yith-wcwl-add-to-wishlist a, .added_to_cart, .compare , .button {
font-size: 0px; padding: 0; width: 50px; height: 50px; background-color: #FFF; @include border-radius(3px); border: none;
display: block; vertical-align: top; overflow: hidden; @include transition(all 0.25s ease-out); position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
&:before{
position: absolute; left: 0px; top: 0px; margin: 0px 0 0 0px; font-size: 22px; color: $link-color; background-color: transparent; @include transition(all 0.25s ease-out);
}
&:hover{ background: $color1; border-color: $color1;
&:before{
color: #FFF;
}
}
&.added_to_cart,
&.button.product_type_variable,
&.button.product_type_simple,
&.button.product_type_grouped,
&.button.product_type_external,
&.button.add_to_cart_button{
&:before{@include font-ionicons('\f110', 50px);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
&.loading{
&:before{
position: absolute; background: transparent; margin: 0px 0 0 0px;
@include font-ionicons('\f29c', 50px); font-size: 22px; z-index:1; color: $link-color; cursor: wait;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
&:hover{
background: $color1;
&:before{ color: #fff; }
}
}
&.button.product_type_variable,
&.button.button.product_type_grouped,
&.button.product_type_external{
&:before{@include font-ionicons('\f30f', 50px);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
}
&.added{
display: none;
}
}
&.added_to_cart{
i{
display: none;
}
&:hover{
&:before{
color:#FFF;
}
}
}
&.compare{
&:before{ @include font-ionicons('\f4a8', 50px);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
}
&.yith-wcqv-button{
&:before{ @include font-ionicons('\f346', 50px);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
}
.blockUI.blockOverlay{
position: absolute; top: 0px !important; left: 0px !important;
overflow: hidden; background: #fff !important; border-color: none; color: $link-color; opacity: 1 !important;
width: 50px !important; height: 50px !important; line-height: 50px !important; cursor: wait;
@media(max-width: 1400px){
width: 45px !important; height: 45px !important; line-height: 45px !important;
}
&:before{
font-size: 22px; cursor: wait; color: inherit; display: block !important;
}
}
&:hover{
.blockUI.blockOverlay{ background: $color1 !important; color: #fff; }
}
}
.show{display: block !important}
.clear{display: none !important}
.yith-wcwl-add-to-wishlist { position: relative;
margin: 0 0; @include border-radius(100%);
.feedback{display:none !important}
.ajax-loading{
position: absolute; margin: 0 0; width: 50px !important; height: 50px !important; @include border-radius(100%);
left: 0px !important; top: 0px !important; overflow: hidden; background: $color1; border-color: $color1; opacity: 1 !important; cursor: wait;
@media(max-width: 1400px){
width: 45px !important; height: 45px !important; line-height: 45px !important;
}
&:before{
position: absolute; left: 0px; top: 0px; font-size: 16px; margin: 0px 0 0 0px;
background: transparent;
@include font-ionicons('\f29c', 50px); z-index:1; color: #FFF;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
}
a{ opacity: 1 !important;
&:before{ @include font-ionicons('\f387', 50px);
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
}
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse{
a{
&:before{ @include font-ionicons('\f387', 50px); color: $color1;
@media(max-width: 1400px){
@include square(45px); line-height: 45px;
}
}
&:hover{ background: $color1; border-color: $color1;
&:before{ color: #FFF; }
}
}
}
}
}
// product list style
@mixin product-block-liststyle(){
@include clearfix(); width: 100%;
.item-img{ float: left; display: inline-block; margin: 0 20px 0 0; position: relative;
@media(max-width: $screen-md-max){ margin-right: 15px; }
.onsale{display: none;}
.product-image{
display: block; position: relative; overflow: hidden; position: relative; max-width: 80px;
&:before{ position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: rgba(#000, 0.1); @include opacity(0); visibility: hidden; }
}
.yith-wcqv-button{
font-size: 0px; padding: 0; width: 35px; height: 35px; @include border-radius(3px); display: block; vertical-align: top; border: none;
overflow: hidden; @include transition(all 0.25s ease-out); position: absolute; left: calc(50% - 17.5px); top: calc(50% - 17.5px); background: #FFF;
box-shadow: 0 0 5px rgba(0,0,0,0.1); @include opacity(0); @include transition(all 0.1s ease-out 0s);
&:before{
position: absolute; left: 0px; top: 0px; @include font-ionicons('\f346', 35px); font-size: 16px; color: $link-color; background-color: transparent;
@include transition(all 0.25s ease-out);
}
&:hover{ background: $color1;
&:before{
color: #FFF;
}
}
.blockUI.blockOverlay{
position: absolute; top: 0px !important; left: 0px !important;
overflow: hidden; background: #fff !important; color: $link-color; opacity: 1 !important;
width: 35px !important; height: 35px !important; line-height: 35px !important; cursor: wait;
&:before, &:after{
color: #FFF; font-size: 16px; cursor: wait;
}
&:before {
@include font-ionicons('\f29c', 35px); z-index:1; color: inherit;
-webkit-animation: spin 0.6s ease-in-out infinite;
-moz-animation: spin 0.6s ease-in-out infinite;
-o-animation: spin 0.6s ease-in-out infinite;
animation: spin 0.6s ease-in-out infinite;
}
}
&:hover{
.blockUI.blockOverlay{
background: $color1 !important; color: #fff;
}
}
}
}
.item-info{
.item-title{ font-weight: bold; margin: 5px 0 0; line-height: 1.42857;
@media(max-width: $screen-md-max){ margin: 0px 0 3px; }
}
.price{ margin: 5px 0 0; }
.star-rating{ float: none; display: block; margin: 8px 0 0;
}
}
&:hover{
.item-img{
.product-image{
&:before{ @include opacity(1); visibility: visible; }
}
.yith-wcqv-button{ @include opacity(1); }
}
}
}
// Product grid
@mixin product-block-grid(){
@include product-block-badges();
@include item-info-style1();
}
@mixin item-info-style1(){
position: relative; background: #FFF;
@include product-block-badges();
.item-img{
position: relative; background: #FFF; z-index: 2;
.item-img-info{ position: relative;
a.product-image{
display: block; position: relative; padding: 0 0; @include border-radius(0px); overflow: hidden;
&:before{ position: absolute; content: ""; height: 100%; width: 100%; left: 0; top: 0; background: rgba(#000, 0.1); @include opacity(0); visibility: hidden; }
img{ margin-left: auto; margin-right: auto; display: block; }
}
.buttons-action{
position: absolute; display: block; height: 50px; width: 100%;
text-align: center; @include transition(all 0.25s ease-out); visibility: hidden; bottom: 30px;
.inner{
display:inline-block;
> *:not(.clear){
margin: 0 2.5px; display: inline-block !important; float: left;
@include opacity(0); visibility:hidden; @include transition(all 0.25s ease-out 0s); @include translateY(25px);
}
}
@include product-action-buttons();
.added_to_cart,
.yith-wcwl-add-to-wishlist a, .compare , .button {
&:before{ color: $link-color; }
}
.added_to_cart{
&:before{ color: $color1; }
&:hover{
&:before{ color: #fff; }
}
}
.cart-wrap,
.yith-wcwl-add-to-wishlist,
.compare,
.yith-wcqv-button{
display: block; margin: 0 0 5px 0; float: left;
}
.yith-wcqv-button{
@media(max-width: 991px){
display: none;
}
}
.yith-wcwl-add-to-wishlist{
.yith-wcwl-add-button.show{
display: block !important;
}
}
}
}
}
.item-content{ padding: 14px 0 0; background: #FFF; position: relative; z-index: 2; @include clearfix(); text-align: center;
.item-title{ font-size: 1em; font-weight: bold; margin: 0 0; line-height: 1.42857;
}
.star-rating{ margin: 0 auto 0; display: block;
}
.price{
margin: 5px 0 0; display: block;
}
}
&:hover{
.item-img{
.item-img-info{
a.product-image{
&:before{ @include opacity(1); visibility: visible; }
}
.buttons-action{
visibility: visible; @include opacity(1);
.inner{
> *:not(.clear){
@include opacity(1); visibility:visible; @include scale(1); @include transition(all 0.15s ease-out 0s);
.added_to_cart,
.yith-wcwl-add-to-wishlist a, .compare , .button{
background: #fff;
&:hover{
background: $color1;
}
}
&:nth-child(2){
@include transition(all 0.25s ease-out 0s);
}
&:nth-child(3){
@include transition(all 0.25s ease-out 0.08s);
}
&:nth-child(4){
@include transition(all 0.25s ease-out 0.16s);
}
&:nth-child(5){
@include transition(all 0.25s ease-out 0.24s);
}
}
.yith-wcwl-add-to-wishlist {
.yith-wcwl-wishlistaddedbrowse,
.yith-wcwl-wishlistexistsbrowse{
a{
&:before{ color: $color1; }
&:hover{
&:before{ color: #FFF; }
}
}
}
}
}
}
}
}
}
}
// End product grid
// Quantity product add to cart
@mixin quantity(){
margin: 0 20px 0 0; width: 50px; border: 1px solid $input-border-color; float: left !important;height: 40px;position: relative;
&:after{
position: absolute;content: '';display: table;clear: both;
}
.qty{
float: left;padding: 0 5px; text-align: center; border: none !important;line-height: 38px; width: 100%; @include border-radius(0);
}
.qty-increase,.qty-decrease{
border: none; @include border-radius(0px); height: 6px; width: 8px; text-align: center; line-height: 6px; font-weight: bold;
float: left; padding: 0; position: absolute;right: 20px;
&:before{
content: '';width: 8px;height: 6px;overflow: hidden;position: absolute;top: 0px;left: 0px;
}
&:hover,&:focus{
background: none;
}
}
.qty-increase{
top: 14px;
}
.qty-decrease{
top: 23px;
}
}
@mixin accor-widget{
.accr_header {
display: inline;
.btn_accor {
position: absolute; top: 12px; right: 0px; cursor: pointer;text-align: center;
.ac-tongle {
color: $text-color; display: block; font-weight: normal;
&.close {
background: none; @include opacity(1); text-shadow: none;
}
}
}
a {
position: relative;
}
&.open {
.count{
color: $color1;
}
> a {
color: $color1;
}
}
}
li {
position: relative;
a {
position: relative; padding: 0 0 0 0px; color: inherit;
&:hover {
color: $color1;
}
}
ul {
margin: 0px; padding: 0 0;
}
}
}
@mixin brandlink{
img{ @include opacity(0.75); @include transition(all 0.25s ease-out); }
&:hover{
img{ @include opacity(1); @include animation(flipInY 500ms ease-out); }
}
}
@mixin banner1{
a{
display: block;position: relative; overflow:hidden;
&:before{
content: "";display: block;height: 100%;width: 100%;position: absolute; @include transition(all 0.25s ease-in 0s);background: rgba(0, 0, 0, 0.05);@include opacity(0);
}
&:hover{
&:before{
@include opacity(1);
}
}
}
}
@mixin banner-y{
a{
display: block;position: relative;overflow:hidden;
img{
@include transition(all 0.15s ease-in-out 0s);
}
&:hover{
img{
@include animation(bounce 400ms ease both);
}
}
}
}
@mixin banner2{
a{
display: block;position: relative;overflow:hidden;
img {
@include transition(all 0.5s ease-in-out 0s);
}
&:before {
bottom: 0;content: "";height: 0;left: 0; margin: auto; position: absolute;right: 0;top: 0;width: 0;z-index: 99;
background-color: rgba(255,255,255,0.3); @include transition(all 0.3s ease 0s);height: 100%;width: 100%; @include opacity(0);
}
&:hover{
&:before {
@include opacity(1);
}
}
}
}
@mixin banner3{
a{
display: block;position: relative;overflow:hidden;
img{
@include transition( all 0.25s ease 0s);
}
&:hover{
img{
@include animation(tada 800ms ease-out);
}
}
}
}
@mixin banner4{
a{
display: block;position: relative;overflow:hidden;
img{
@include transition(all 0.6s ease-in-out 0s);
}
&:before{
content: '';position: absolute;top: 0; bottom: 0;right: 0;left: 0;@include transition(all 0.6s ease-in-out);
}
&:after{
content: '';position: absolute;top: 0;bottom: 0;right: 0;left: 0;@include transition(all 0.6s ease-in-out);
}
&:hover{
&:before{right: 50%;left: 50%;background: rgba(255,255,255,0.4);}
&:after {top: 50%;bottom: 50%;background: rgba(255,255,255,0.4);}
}
}
}
@mixin banner4-1{
a{
display: block;position: relative;overflow:hidden;
img{
@include transition(all 0.6s ease-in-out 0s);
}
&:before{
content: '';position: absolute;top: 0; bottom: 0;right: 0;left: 0;@include transition(all 0.6s ease-in-out);
}
&:hover{
&:before{right: 50%;left: 50%;background: rgba(255,255,255,0.4);}
&:after {top: 50%;bottom: 50%;background: rgba(255,255,255,0.4);}
}
}
}
@mixin banner5{
a{
display: block;position: relative;overflow:hidden;
img {
@include transition(all 0.6s ease-in-out 0s);
}
&:before {
border-bottom: 1px solid rgba(255, 255, 255, 0.85); border-top: 1px solid rgba(255, 255, 255, 0.85); bottom: 15px; content: ""; left: 15px; position: absolute;
right: 15px;top: 15px;transform: scale(0, 1); @include transition(all 0.4s ease-in-out);
}
&:after {
border-left: 1px solid rgba(255, 255, 255, 0.85);border-right: 1px solid rgba(255, 255, 255, 0.85); bottom: 15px; content: "";left: 15px; position: absolute;
right: 15px;top: 15px;transform: scale(1, 0);@include transition(all 0.4s ease-in-out);
}
&:hover{
&:before, &:after {
transform: scale(1); @include transition(all 0.3s ease-in-out);
}
}
}
}
@mixin banner6{
a{
display: block;position: relative;overflow:hidden;
img {
@include transition(all 0.5s ease-in-out 0s);
}
&:before {
border: 0 solid rgba(255, 255, 255, 0);content: "";display: block;height: 100%;left: 0; position: absolute;top: 0; width: 100%;
transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-moz-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-webkit-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
-o-transition: all 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s;
}
&:hover{
&:before {
border: 10px solid rgba(0, 0, 0, 0.1);opacity: 1;
}
}
}
}
@mixin banner7{
a{
display: block;position: relative;overflow:hidden;
img {
@include transition(all 0.5s ease-in-out 0s);
}
&:before {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1); content: ""; height: 100%; left: 50%;@include opacity(0);position: absolute;top: 0;@include transition(all 0.25s ease-in-out 0s);width: 0;
}
&:hover{
&:before {
height: 100%;left: 0;@include opacity(1);top: 0;@include transition(all 0.25s ease-in-out 0s);width: 100%
}
}
}
}
@mixin banner8{
a{
display: block;position: relative;overflow:hidden;
img {
opacity: 0.95;
transform: scale3d(1.05, 1.05, 1);
transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
}
&:before {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);content: "";height: 100%;left: 0; position: absolute; top: 0;
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, -100%, 0px);transition: transform 0.6s ease 0s; width: 100%;
}
&:hover{
img {
opacity: 0.6;
transform: scale3d(1, 1, 1);
}
&:before {
transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0px, 100%, 0px);
}
}
}
}
@mixin banner9{
a{
display: block;position: relative;overflow:hidden;
img{
@include transform(scale(1));@include transition(all 0.25s ease-in-out);
}
&:before,&:after{
content: "";position: absolute;@include transition( all 0.25s ease-in-out 0s);
}
&:before {
background: rgba(0, 0, 0, 0.2);height: 100%;left: 0;opacity: 0;overflow: hidden;top: 0;width: 100%; z-index: 1;
}
&:after{
top: 10px;right: 10px;bottom: 10px;left: 10px;border: 1px solid rgba(255,255,255,0.8);@include opacity(0); z-index: 2;
}
&:hover{
&:before {
@include opacity(0.6);@include transform( scale(1));visibility: visible;
}
&:after{
opacity: 1;top: 15px;right: 15px;bottom: 15px;left: 15px;@include opacity(1);
}
img{
@include transform(scale(1));
}
}
}
}
@mixin banner10{
a{
display: block; position: relative; overflow:hidden;
&:before {
position: absolute;top: 50%;left: 50%;z-index: 2;display: block;content: '';width: 0;height: 0;background: rgba(255, 255, 255, 0.15); @include border-radius(100%); @include opacity(0);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&:hover{
&:before {
-webkit-animation: circle .75s;
-ms-animation: circle .75s;
-o-animation: circle .75s;
animation: circle .75s;
}
}
}
}
@-ms-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@-o-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@-webkit-keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@keyframes circle {
0% {
opacity: 1;
}
40% {
opacity: 1;
}
100% {
width: 200%;
height: 200%;
opacity: 0;
}
}
@mixin banner11{
a{
display: block;position: relative;overflow:hidden;
&:before {
position: absolute;top: 0;left: -75%;z-index: 2;display: block;content: '';width: 50%;height: 100%;
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
-ms-transform: skewX(-25deg);
-o-transform: skewX(-25deg);
-webkit-transform: skewX(-25deg);
transform: skewX(-25deg);
}
&:hover{
&:before {
-webkit-animation: shinex 1s;
-ms-animation: shinex 1s;
-o-animation: shinex 1s;
animation: shinex 1s;
}
}
}
}
@-ms-keyframes shinex {
100% {
left: 125%;
}
}
@-o-keyframes shinex {
100% {
left: 125%;
}
}
@-webkit-keyframes shinex {
100% {
left: 125%;
}
}
@keyframes shinex {
100% {
left: 125%;
}
}
@mixin banner12{
a{
&:hover img {
opacity: 1;
-ms-animation: flash 1.2s;
-o-animation: flash 1.2s;
-webkit-animation: flash 1.2s;
animation: flash 1.2s;
}
}
}
@-ms-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@-o-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@mixin banner13{
a{
display: block;position: relative;overflow:hidden;
img {
@include transition(all 0.5s ease-in-out 0s);
}
&:before {
background: url("../img/plus.png") no-repeat scroll center center / 60px 60px rgba(0, 0, 0, 0.1); content: "";height: 100%; left: 0;overflow: hidden; position: absolute;
top: 0; @include transform(scale(0.4) rotateY(180deg)); @include transition( all 0.4s ease 0s);width: 100%; z-index: 100; @include opacity(0);
}
&:hover{
&:before {
@include opacity(0.6);@include transform( scale(1) rotate(0deg) ); visibility: visible;
}
}
}
}
// Limit text length to n lines
@mixin max-lines($lines,$line_height){
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: $lines; /* number of lines to show */
line-height: $line_height; /* fallback */
$max_height : #{$line_height * $lines}em;
max-height: $max_height; /* fallback */
}
@-webkit-keyframes snsnavloadding{
0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@keyframes snsnavloadding{
0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}
}
@-webkit-keyframes snssheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
@keyframes snssheen {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}
// Mixin for generating new styles
@mixin alert-styles($color) {
@include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%));
border-color: darken($color, 15%);
}