1061 lines
18 KiB
SCSS
1061 lines
18 KiB
SCSS
/*===============================================
|
|
[SASS DIRECTORY ]
|
|
|
|
[1] Minxin Link
|
|
[2] Minxin Buton
|
|
[3] Minxin Triangle
|
|
|
|
==============================================*/
|
|
|
|
@import 'bourbon/bourbon';
|
|
|
|
//===== Minxin Link =======
|
|
|
|
.no-margin{margin: 0 !important;}
|
|
@mixin link(){
|
|
color: $linkColor;text-decoration: none;
|
|
&:hover{color: lighten($linkColor, 10%);}
|
|
}
|
|
@mixin linkGrayDark(){
|
|
color: $gray-dark;
|
|
&:hover{color: $linkColor;}
|
|
}
|
|
|
|
@mixin linkGray(){
|
|
color: #444 ;
|
|
&:hover{color: $linkColor;}
|
|
}
|
|
@mixin linkGraylighter(){
|
|
color: #999 ;
|
|
&:hover{color: $linkColor;}
|
|
}
|
|
|
|
@mixin linkColor($color1,$color2){
|
|
color: $color1;text-decoration: none;
|
|
&:hover{color: $color2;}
|
|
}
|
|
|
|
//====== Minxin Buton =======
|
|
@mixin buttonGray(){
|
|
padding: 7px 12px; background: $gray;color: #fff; border-radius: 0; border-color: $gray;
|
|
&:hover{background: $background1; border-color: $linkColor;color: #fff; }
|
|
}
|
|
|
|
@mixin buttonColor(){
|
|
@include buttonGray();
|
|
background: $background; border-color: $background;
|
|
&:hover{background: $gray;border-color: $gray;}
|
|
}
|
|
|
|
|
|
@mixin clearfix() {
|
|
&:before,
|
|
&:after {
|
|
content: " "; // 1
|
|
display: table; // 2
|
|
}
|
|
&:after {
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
|
|
//====== Minxin Triangle =======
|
|
// Size helper mixin
|
|
// ---
|
|
// @param [number] $width: width
|
|
// @param [number] $height ($width): height
|
|
// ---
|
|
|
|
@mixin size($width, $height: $width) {
|
|
width: $width;
|
|
height: $height;
|
|
}
|
|
|
|
// [Private]
|
|
// Position helper mixin
|
|
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
|
|
// ---
|
|
// @param [string] $position: position type
|
|
// @param [list] $args: list of offsets and values
|
|
// ---
|
|
@mixin _position($position, $args) {
|
|
@each $o in top right bottom left {
|
|
$i: index($args, $o);
|
|
@if $i{
|
|
@if $i + 1 <= length($args){
|
|
@if type-of( nth($args, $i + 1) )== number {
|
|
#{$o}: nth($args, $i + 1);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
position: $position;
|
|
}
|
|
|
|
// Absolute positioning helper mixin
|
|
// Article about it: http://hugogiraudel.com/2013/08/05/offsets-sass-mixin/
|
|
// ---
|
|
// @param [list] $args: list of offsets and values
|
|
// ---
|
|
@mixin absolute($args) {
|
|
@include _position(absolute, $args);
|
|
}
|
|
|
|
@mixin triangle($direction, $position, $color: currentColor, $size: 1em) {
|
|
// Make sure the direction is valid
|
|
@if not index(top right bottom left, $direction) {
|
|
@warn "Direction must be one of top, right, bottom or left.";
|
|
}
|
|
|
|
@else {
|
|
@include absolute($position); // Position
|
|
@include size(0); // Size
|
|
content: '';
|
|
z-index: 2;
|
|
|
|
border-#{$direction}: $size * 1 solid $color;
|
|
$perpendicular-borders: $size solid transparent;
|
|
|
|
@if $direction == top or $direction == bottom {
|
|
border-left: $perpendicular-borders;
|
|
border-right: $perpendicular-borders;
|
|
}
|
|
|
|
@else if $direction == right or $direction == left {
|
|
border-bottom: $perpendicular-borders;
|
|
border-top: $perpendicular-borders;
|
|
}
|
|
}
|
|
}
|
|
|
|
//====== Minxin Buton Social =======
|
|
@mixin icons-social($name,$color,$textColor,$type){
|
|
|
|
@if($type != circled ){
|
|
&.fa-#{$name}{color:$color}
|
|
}@else{
|
|
.icon-circled {
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
line-height: 40px;
|
|
border: 1px solid $background;
|
|
color:$background;
|
|
vertical-align: top;
|
|
text-align: center;
|
|
}
|
|
.icon-color.fa-#{$name}{
|
|
background:$color;border-color: $color; color: $textColor;
|
|
}
|
|
}
|
|
|
|
a:hover{
|
|
|
|
@if($type != circled ){
|
|
&.fa-#{$name}{color:$color}
|
|
}@else{
|
|
.icon-circled{background:$background;color:$textColor;}
|
|
.icon-color.fa-#{$name}{
|
|
background:lighten($color,10%);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//====== Minxin Buton Social =======
|
|
.marginbottom__3x{margin-bottom: 30px;}
|
|
|
|
//====== Minxin owl controls =======
|
|
@mixin owl-controls($background,$type){
|
|
.owl2-nav .owl2-prev,
|
|
.owl2-nav .owl2-next{
|
|
width: 20px;height: 27px; border: 1px solid #ddd;background-image: url('#{$base-url-theme}icons/ico-slider.png'); background-repeat: no-repeat;
|
|
background-color: #fff; display: inline-block; text-indent: -999em; position: absolute; transition: all 0.2s ease-in-out 0s; top:calc(50% - 13px);
|
|
&:hover{background-color: $background; background-position: 0px 0; border-color: $linkColor;}
|
|
}
|
|
.owl2-nav .owl2-prev{
|
|
background-position: -31px 0;
|
|
&:hover{background-position: 0px 0;}
|
|
}
|
|
.owl2-nav .owl2-next{
|
|
background-position: -60px 0;
|
|
&:hover{ background-position: -90px 0;}
|
|
}
|
|
|
|
@if($type == default ){
|
|
.owl2-nav .owl2-prev{
|
|
@include if-ltr {#{left}: 0px;}
|
|
@include if-rtl { #{left}: 0px;}
|
|
}
|
|
.owl2-nav .owl2-next{
|
|
@include if-ltr {#{right}: 0px;}
|
|
@include if-rtl { #{right}: 0px;}
|
|
}
|
|
|
|
}@else if($type == listing_tabs ){
|
|
.owl2-nav .owl2-prev{
|
|
@include if-ltr {#{$right}: 25px; #{$left}: auto;}
|
|
@include if-rtl { #{$right}: 0px;#{$left}: auto;}
|
|
}
|
|
.owl2-nav .owl2-next{
|
|
@include if-ltr {#{$right}: 0px;}
|
|
@include if-rtl { #{$right}: 25px;}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
//============== border header top======
|
|
@mixin border-top {
|
|
position: relative;
|
|
&:after{
|
|
content: "";
|
|
height: 13px;
|
|
width: 1px;
|
|
background: #cccccc;
|
|
position: absolute;
|
|
#{$right}: 0;
|
|
top: 50%;
|
|
margin-top: -6px;
|
|
}
|
|
}
|
|
|
|
|
|
//====== Minxin header-main =======
|
|
@mixin header-main {
|
|
padding: 0;
|
|
.home{
|
|
i{
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
li{
|
|
display: inline-block;
|
|
list-style: none;
|
|
font-size: 14px;
|
|
a{
|
|
color: $color-button;
|
|
&:hover{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
//DAY IMAGE BLOG
|
|
@mixin day ($pxtop, $pxleft){
|
|
position: absolute;
|
|
background: #fff;
|
|
top: $pxtop;
|
|
#{$left}: $pxleft;
|
|
display: block;
|
|
z-index: 999;
|
|
width: 50px;
|
|
height: 65px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
p{
|
|
color: $linkColor;
|
|
&:first-child{
|
|
font-weight: 700;
|
|
font-size: 2em;
|
|
margin-top: 15px;
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
@mixin article_image {
|
|
padding: 8px;
|
|
border: 1px solid #e5e5e5;
|
|
position: relative;
|
|
}
|
|
|
|
//ICON SHARE
|
|
@mixin share-icon-li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
background: #1d9ffa;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
margin-#{$left}: 5px;
|
|
a{
|
|
display: block;
|
|
height: 27px;
|
|
width: 27px;
|
|
line-height: 27px;
|
|
i{
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
}
|
|
@mixin share-icon-facebook{
|
|
background: #1d9ffa;
|
|
&:hover{
|
|
background: #b9def9;
|
|
}
|
|
}
|
|
@mixin share-icon-twitter {
|
|
background: #456bbe;
|
|
&:hover{
|
|
background: #8e9dbd;
|
|
}
|
|
}
|
|
@mixin share-icon-google {
|
|
background: #e04d3f;
|
|
&:hover{
|
|
background: #e2aba6;
|
|
}
|
|
}
|
|
@mixin share-icon-skype {
|
|
background: #4899d2;
|
|
&:hover{
|
|
background: #abc4d6;
|
|
}
|
|
}
|
|
@mixin share-icon {
|
|
ul{
|
|
li{
|
|
@include share-icon-li;
|
|
}
|
|
.twitter{
|
|
@include share-icon-twitter;
|
|
}
|
|
.facebook{
|
|
@include share-icon-facebook;
|
|
}
|
|
.google{
|
|
@include share-icon-google;
|
|
}
|
|
.skype{
|
|
@include share-icon-skype;
|
|
}
|
|
}
|
|
}
|
|
|
|
//PRODUCT LAYOUT - GRIL
|
|
@mixin span-new {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 45px;
|
|
border-radius: 100px;
|
|
color: #fff;
|
|
line-height: 45px;
|
|
text-align: center;
|
|
}
|
|
@mixin classhover {
|
|
position: absolute;
|
|
bottom: 0;
|
|
#{$right}: 5px;
|
|
ul {
|
|
padding: 0;
|
|
li{
|
|
list-style: none;
|
|
display: block;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
margin: 5px;
|
|
transition-timing-function: ease;
|
|
opacity: 0;
|
|
a{
|
|
font-size: 1.5em;
|
|
transition: none;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: block;
|
|
}
|
|
&:hover{
|
|
background: $linkColor;
|
|
a{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.icon-heart{
|
|
transition: opacity 2s;
|
|
}
|
|
.icon-exchange{
|
|
transition: opacity 1s;
|
|
}
|
|
.icon-search{
|
|
transition: opacity 0s;
|
|
}
|
|
}
|
|
@mixin classhover-home-4 {
|
|
position: absolute;
|
|
bottom: 0;
|
|
#{$right}: 0;
|
|
width: 100%;
|
|
ul {
|
|
padding: 0;
|
|
li{
|
|
list-style: none;
|
|
display: inline-block;
|
|
width: 25%;
|
|
float: left;
|
|
height: 0;
|
|
transition: all .5s;
|
|
background: rgba(0 , 0, 0, .3);
|
|
line-height: 40px;
|
|
text-align: center;
|
|
transition-timing-function: ease;
|
|
opacity: 0;
|
|
a{
|
|
font-size: 1.5em;
|
|
transition: none;
|
|
height: 40px;
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
color: #fff;
|
|
}
|
|
&:hover{
|
|
a{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@mixin classhover-home-6 {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
#{$right}: 0;
|
|
ul {
|
|
padding: 0;
|
|
text-align: center;
|
|
display: block;
|
|
overflow: hidden;
|
|
li{
|
|
list-style: none;
|
|
display: inline-block;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #fff;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
transition-timing-function: ease;
|
|
opacity: 0;
|
|
border-radius: 50%;
|
|
float: none;
|
|
margin: 5px;
|
|
a{
|
|
font-size: 1.5em;
|
|
transition: none;
|
|
height: 40px;
|
|
display: block;
|
|
text-align: center;
|
|
width: 100%;
|
|
color: #222222;
|
|
border-radius: 50%;
|
|
}
|
|
&:hover{
|
|
a{
|
|
background: $linkColor;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.icon-cart{
|
|
transition: opacity 0;
|
|
}
|
|
.icon-heart{
|
|
transition: opacity 0.5s;
|
|
}
|
|
.icon-exchange{
|
|
transition: opacity 1s;
|
|
}
|
|
.icon-search{
|
|
transition: opacity 1.5s;
|
|
}
|
|
}
|
|
}
|
|
@mixin product-layout($linkColor:$linkColor, $border-radius: 5px) {
|
|
padding-bottom: 1px;
|
|
&:hover{
|
|
.product-img{
|
|
background: rgba(0,0,0,.3);
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
.hover{
|
|
ul li{
|
|
opacity: 1!important;
|
|
}
|
|
}
|
|
.hover-1{
|
|
ul li{
|
|
opacity: 1!important;
|
|
height: 40px!important;
|
|
}
|
|
}
|
|
.right-block{
|
|
button{
|
|
background: $linkColor;
|
|
border-color: $linkColor;
|
|
span{
|
|
color: #fff!important;
|
|
}
|
|
}
|
|
.caption{
|
|
h4 a{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.product-item-container{
|
|
border: none;
|
|
.left-block{
|
|
position: relative;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: $border-radius;
|
|
padding: 5px;
|
|
.product-image-container .product-img{
|
|
display: block;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
&:before{
|
|
background-color: inherit;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
#{$left}: 0;
|
|
#{$right}: 0;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.5s;
|
|
}
|
|
}
|
|
|
|
.new{
|
|
@include span-new;
|
|
top: 10px;
|
|
#{$left}: 10px;
|
|
background: #0083c1;
|
|
text-transform: uppercase;
|
|
}
|
|
.sale{
|
|
@include span-new;
|
|
background: #ff5555;
|
|
top: 10px;
|
|
#{$right}: 10px;
|
|
}
|
|
.hover{
|
|
@include classhover;
|
|
}
|
|
.hover-1{
|
|
@include classhover-home-4;
|
|
}
|
|
}
|
|
|
|
.right-block{
|
|
padding-top: 5px;
|
|
h4{
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
a{
|
|
font-size: 14px;
|
|
color: #444444;
|
|
&:hover{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ratings{
|
|
line-height: 30px;
|
|
span i{
|
|
color: #222222;
|
|
}
|
|
.gray i{
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
.price{
|
|
margin: 10px 0 15px;
|
|
span{
|
|
font-size: 18px;
|
|
color: #ff5555;
|
|
font-weight: 500;
|
|
}
|
|
.price-old{
|
|
font-size: 14px;
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
}
|
|
}
|
|
.button-group{
|
|
button{
|
|
border-radius: $border-radius;
|
|
text-transform: uppercase;
|
|
width: 120px;
|
|
height: 40px;
|
|
&:hover span{
|
|
color: #fff;
|
|
}
|
|
span{
|
|
color: #777777;
|
|
font-size: 12px;
|
|
|
|
}
|
|
&:active:focus, &:active, &:focus{
|
|
background: $linkColor;
|
|
outline: none;
|
|
span{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin product-layout-home-4($linkColor:$linkColor, $border-radius: 5px) {
|
|
padding-top: 20px;
|
|
padding-bottom: 1px;
|
|
&:hover{
|
|
.product-img{
|
|
background: rgba(0,0,0,.3);
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
.hover{
|
|
ul li{
|
|
opacity: 1!important;
|
|
}
|
|
}
|
|
.hover-1{
|
|
ul li{
|
|
opacity: 1!important;
|
|
height: 40px!important;
|
|
}
|
|
}
|
|
.right-block{
|
|
button{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
span{
|
|
color: #fff!important;
|
|
}
|
|
}
|
|
.caption{
|
|
h4 a{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.product-item-container{
|
|
border: none;
|
|
.left-block{
|
|
position: relative;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: $border-radius;
|
|
padding: 0;
|
|
.product-image-container .product-img{
|
|
display: block;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
&:before{
|
|
background-color: inherit;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
#{$left}: 0;
|
|
#{$right}: 0;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.5s;
|
|
}
|
|
}
|
|
|
|
.new{
|
|
@include span-new;
|
|
top: 10px;
|
|
#{$left}: 10px;
|
|
background: #333333;
|
|
text-transform: uppercase;
|
|
}
|
|
.sale{
|
|
@include span-new;
|
|
background: #ff5555;
|
|
top: 10px;
|
|
#{$right}: 10px;
|
|
}
|
|
.hover{
|
|
@include classhover;
|
|
}
|
|
.hover-1{
|
|
@include classhover-home-4;
|
|
}
|
|
}
|
|
|
|
.right-block{
|
|
padding-top: 5px;
|
|
h4{
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
a{
|
|
font-size: 14px;
|
|
color: #444444;
|
|
&:hover{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ratings{
|
|
line-height: 30px;
|
|
span i{
|
|
color: #222222;
|
|
}
|
|
.gray i{
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
.price{
|
|
margin: 10px 0 15px;
|
|
span{
|
|
font-size: 18px;
|
|
color: #ff5555;
|
|
font-weight: 500;
|
|
}
|
|
.price-old{
|
|
font-size: 14px;
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
}
|
|
}
|
|
.button-group{
|
|
button{
|
|
border-radius: 0;
|
|
&:hover{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:active:focus{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:active{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:focus{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@mixin product-layout-home-6($linkColor:$linkColor, $border-radius: 5px) {
|
|
padding-top: 20px;
|
|
padding-bottom: 1px;
|
|
&:hover{
|
|
.product-img{
|
|
background: rgba(0,0,0,.3);
|
|
display: block;
|
|
overflow: hidden;
|
|
}
|
|
.product-item-container .left-block .hover-1 ul li{
|
|
bottom: 0;
|
|
}
|
|
.right-block{
|
|
button{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
span{
|
|
color: #fff!important;
|
|
}
|
|
}
|
|
.caption{
|
|
h4 a{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.product-item-container{
|
|
border: none;
|
|
.left-block{
|
|
position: relative;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: $border-radius;
|
|
padding: 0;
|
|
.product-image-container .product-img{
|
|
display: block;
|
|
overflow: hidden;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
&:before{
|
|
background-color: inherit;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
#{$left}: 0;
|
|
#{$right}: 0;
|
|
content: "";
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.5s;
|
|
}
|
|
}
|
|
|
|
.new{
|
|
@include span-new;
|
|
top: 10px;
|
|
#{$left}: 10px;
|
|
background: #333333;
|
|
text-transform: uppercase;
|
|
}
|
|
.sale{
|
|
@include span-new;
|
|
background: #ff5555;
|
|
top: 10px;
|
|
#{$right}: 10px;
|
|
}
|
|
.hover-1{
|
|
@include classhover-home-6;
|
|
}
|
|
}
|
|
|
|
.right-block{
|
|
padding-top: 5px;
|
|
h4{
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
a{
|
|
font-size: 14px;
|
|
color: #444444;
|
|
&:hover{
|
|
color: $linkColor;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ratings{
|
|
line-height: 30px;
|
|
span i{
|
|
color: #222222;
|
|
}
|
|
.gray i{
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
.price{
|
|
margin: 10px 0 15px;
|
|
span{
|
|
font-size: 18px;
|
|
color: #ff5555;
|
|
font-weight: 500;
|
|
}
|
|
.price-old{
|
|
font-size: 14px;
|
|
text-decoration: line-through;
|
|
color: #777777;
|
|
}
|
|
}
|
|
.button-group{
|
|
button{
|
|
border-radius: 0;
|
|
&:hover{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:active:focus{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:active{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
&:focus{
|
|
background: #333333;
|
|
border-color: #333333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin hr-3 {
|
|
border-top: 1px dashed #dddddd;
|
|
margin: 1px 0;
|
|
}
|
|
|
|
@mixin owl-nav($height, $border-radius) {
|
|
div{
|
|
width: $height;
|
|
height: $height;
|
|
line-height: $height;
|
|
display: block;
|
|
background: #f2f2f2;
|
|
position: absolute;
|
|
text-align: center;
|
|
border-radius: $border-radius;
|
|
&:after{
|
|
font-size: 1.5em;
|
|
}
|
|
&:hover{
|
|
background: $linkColor;
|
|
&:after{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.owl-prev{
|
|
&:after{
|
|
content: "\f104";
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
.owl-next{
|
|
&:after{
|
|
content: "\f105";
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
}
|
|
@mixin owl-nav2($height, $border-radius) {
|
|
position: absolute;
|
|
div{
|
|
width: $height;
|
|
height: $height;
|
|
line-height: $height;
|
|
display: inline-block;
|
|
background: #f2f2f2;
|
|
text-align: center;
|
|
border-radius: $border-radius;
|
|
&:after{
|
|
font-size: 1.5em;
|
|
}
|
|
&:hover{
|
|
background: $linkColor;
|
|
&:after{
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.owl-prev{
|
|
|
|
&:after{
|
|
content: "\f104";
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
.owl-next{
|
|
margin-#{$left}: 5px;
|
|
&:after{
|
|
content: "\f105";
|
|
font-family: FontAwesome;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//----------- HOME 3 -----------------
|
|
|
|
@mixin hr-home-3 {
|
|
border-top: 1px solid $linkColor;
|
|
width: 120px;
|
|
position: relative;
|
|
&:after{
|
|
content: "+";
|
|
font-family: FontAwesome;
|
|
color: $linkColor;
|
|
font-weight: 700;
|
|
background: #fff;
|
|
position: absolute;
|
|
top: -13px;
|
|
right: 50px;
|
|
width: 23px;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
font-size: 30px;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//====== Minxin Loader Logo =======
|
|
|
|
@-webkit-keyframes animLoadedLogo {
|
|
to {
|
|
-webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
|
|
}
|
|
}
|
|
@keyframes animLoadedLogo {
|
|
to {
|
|
-webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
|
|
transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes animLoadedLoader {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
|
|
}
|
|
}
|
|
@keyframes animLoadedLoader {
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
|
|
transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes animLoadedHeader {
|
|
to {
|
|
-webkit-transform: translate3d(0,-100%,0);
|
|
}
|
|
}
|
|
@keyframes animLoadedHeader {
|
|
to {
|
|
-webkit-transform: translate3d(0,-100%,0);
|
|
transform: translate3d(0,-100%,0);
|
|
}
|
|
}
|
|
@-webkit-keyframes animInitialHeader {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,800px,0);
|
|
}
|
|
}
|
|
@keyframes animInitialHeader {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0,800px,0);
|
|
transform: translate3d(0,800px,0);
|
|
}
|
|
} |