Ariska
467 lines
11 KiB
SCSS
Executable File
467 lines
11 KiB
SCSS
Executable File
/**
|
|
* PWS Tabs jQuery Plugin
|
|
* Author: Alex Chizhov
|
|
* Author Website: http://alexchizhov.com/pwstabs
|
|
* GitHub: https://github.com/alexchizhovcom/pwstabs
|
|
* Version: 1.4.0
|
|
* Version from: 06.03.2016
|
|
* Licensed under the MIT license
|
|
*/
|
|
|
|
|
|
@import 'crosass/crosass_init';
|
|
|
|
|
|
$pws_tabs_bgcolor_default : #9bd7d5;
|
|
$pws_tabs_bgcolor_hover : #70c5c2;
|
|
$pws_tabs_bgcolor_active : #fff;
|
|
|
|
.pws_tabs_container,
|
|
.pws_tabs_controll a{
|
|
font-size:16px;
|
|
}
|
|
|
|
@media only screen and (max-width: 60em){ // 960px
|
|
|
|
.pws_tabs_container.pws_tabs_responsive{
|
|
width: 100% !important;
|
|
ul.pws_tabs_controll{
|
|
width: 100%;
|
|
li{
|
|
vertical-align: top;
|
|
text-align: center;
|
|
a{
|
|
margin: 0;
|
|
font-size: 1em;
|
|
line-height: 1.125em;
|
|
overflow: hidden;
|
|
i{
|
|
display: block;
|
|
margin: 0 0 5px 0;
|
|
}
|
|
}
|
|
}
|
|
} // EOF : pws_tabs_controll
|
|
|
|
|
|
// ######################################################
|
|
// Vertical Position
|
|
// ######################################################
|
|
&.pws_tabs_vertical{
|
|
display: block;
|
|
position: relative;
|
|
&:after{
|
|
@include clear;
|
|
}
|
|
|
|
ul.pws_tabs_controll{
|
|
width: 100%;
|
|
position: relative;
|
|
float: none;
|
|
li{
|
|
display: inline-block;
|
|
a {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pws_tabs_list{
|
|
position: relative;
|
|
float: none;
|
|
}
|
|
|
|
} // EOF: pws_tabs_vertical
|
|
|
|
|
|
} // EOF: pws_tabs_responsive
|
|
|
|
} // 960px
|
|
|
|
@media only screen and (max-width: 37.5em){ // 600px
|
|
|
|
.pws_tabs_container.pws_tabs_responsive{
|
|
width: 100% !important;
|
|
position: relative;
|
|
.pws_responsive_small_menu{
|
|
width: 100%;
|
|
height: 40px;
|
|
background-color: #{$pws_tabs_bgcolor_default};
|
|
display: block;
|
|
a{
|
|
width: 40px;
|
|
height: 40px;
|
|
display: block;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-size: 32px;
|
|
font-size: 2em;
|
|
text-align: center;
|
|
padding: 3px 0 0 0;
|
|
cursor:pointer;
|
|
@include boxsizing('border-box');
|
|
&:hover{
|
|
background-color: #{$pws_tabs_bgcolor_hover};
|
|
}
|
|
}
|
|
} // EOF : pws_responsive_small_menu
|
|
|
|
ul.pws_tabs_controll.pws_tabs_menu_popup{
|
|
display: block;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
top: 40px;
|
|
left: 0;
|
|
z-index: 99;
|
|
margin: 0;
|
|
padding: 0;
|
|
@include boxsizing('border-box');
|
|
li{
|
|
display: block;
|
|
float: none;
|
|
a i{
|
|
display: inline-block;
|
|
margin: 0 3px 0 0;
|
|
margin: 0 0.1875em 0 0;
|
|
}
|
|
}
|
|
} // EOF : pws_tabs_menu_popup
|
|
|
|
|
|
|
|
&.pws_tabs_rtl ul.pws_tabs_controll.pws_tabs_menu_popup li a i{
|
|
display: inline-block;
|
|
margin: 0 0 0 3px;
|
|
margin: 0 0 0 0.1875em;
|
|
}
|
|
|
|
} // EOF: pws_tabs_responsive
|
|
|
|
} // 600px
|
|
|
|
|
|
.pws_tabs_container{
|
|
width: 100%;
|
|
box-sizing:border-box;
|
|
|
|
ul.pws_tabs_controll{
|
|
list-style: none;
|
|
margin: 0;
|
|
padding:0;
|
|
li{
|
|
display: inline-block;
|
|
a{
|
|
display: block;
|
|
background-color: #{$pws_tabs_bgcolor_default}; // 1.2.1
|
|
padding: 15px 20px;
|
|
padding: 0.9375em 1.25em; // @1.2.0
|
|
text-decoration: none;
|
|
color: #fff;
|
|
margin-right: 3px;
|
|
cursor:pointer;
|
|
&:hover{
|
|
background-color: #{$pws_tabs_bgcolor_hover};
|
|
}
|
|
i{
|
|
margin-right: 8px;
|
|
}
|
|
&.pws_tab_noname i{
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
&.pws_tab_active{
|
|
background-color: #{$pws_tabs_bgcolor_active};
|
|
color: #505050;
|
|
}
|
|
}
|
|
}
|
|
} // EOF : pws_tabs_controll
|
|
|
|
} // EOF : pws_tabs_container
|
|
|
|
|
|
.pws_tabs_list{
|
|
display: block;
|
|
background-color: #fff;
|
|
height: auto;
|
|
padding: 20px;
|
|
padding: 1.25em; // @1.2.0
|
|
@include boxsizing('border-box');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.pws_tab_single{
|
|
/*position: absolute;*/
|
|
/*top: 20px;*/
|
|
/*padding-right: 20px;*/
|
|
/*padding-right: 1.25em; // @1.2.0*/
|
|
|
|
display:block;
|
|
|
|
@include transition('all','.3s','ease-in-out','.0');
|
|
}
|
|
|
|
|
|
/**
|
|
* ######################################################
|
|
* Right To Left Styles
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_tabs_rtl{
|
|
text-align: right;
|
|
direction: rtl;
|
|
ul.pws_tabs_controll li a{
|
|
margin-right: 0;
|
|
margin-left: 3px;
|
|
i{ // @1.2.0
|
|
margin-left: 8px;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.pws_tab_single{
|
|
/*padding-right: 0;*/
|
|
/*padding-left: 20px;*/
|
|
/*padding-left: 1.25em; // @1.2.0*/
|
|
}
|
|
} // EOF : pws_tabs_rtl
|
|
|
|
|
|
/**
|
|
* ######################################################
|
|
* Vertical Position
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_tabs_vertical{
|
|
display: block;
|
|
position: relative;
|
|
|
|
&:after{
|
|
@include clear;
|
|
}
|
|
|
|
& > ul.pws_tabs_controll{
|
|
width: auto;
|
|
position: relative;
|
|
float: left;
|
|
li{
|
|
display: block;
|
|
a{
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > .pws_tabs_list{
|
|
position: relative;
|
|
float: left;
|
|
}
|
|
|
|
} // EOF : pws_tabs_vertical
|
|
|
|
|
|
/**
|
|
* ######################################################
|
|
* Colors - Themes @1.2.0
|
|
* ######################################################
|
|
*/
|
|
|
|
// PWS Tabs Flat Theme Colors
|
|
@mixin theme_flat($name,$defaultColor,$hoverColor, $activeColor){
|
|
/**
|
|
* ###########################
|
|
* #{$name}
|
|
* ###########################
|
|
*/
|
|
.pws_tabs_container.pws_tabs_responsive.pws_theme_#{$name} .pws_responsive_small_menu{
|
|
background-color: #{$defaultColor};
|
|
a:hover{
|
|
background-color: #{$hoverColor};
|
|
}
|
|
}
|
|
.pws_tabs_container.pws_theme_#{$name} ul.pws_tabs_controll li a{
|
|
background-color: #{$defaultColor};
|
|
&:hover{
|
|
background-color: #{$hoverColor};
|
|
}
|
|
&.pws_tab_active{
|
|
background-color: #{$activeColor};
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@include theme_flat('violet', '#c72c66','#a6164c','#fff');
|
|
@include theme_flat('green', '#86c447','#539312','#fff');
|
|
@include theme_flat('yellow', '#fdb813','#ffa500','#fff');
|
|
@include theme_flat('gold', '#f89827','#fa7b00','#fff');
|
|
@include theme_flat('orange', '#f15b42','#fd2e0b','#fff');
|
|
@include theme_flat('red', '#e41937','#d70726','#fff');
|
|
@include theme_flat('purple', '#672e8d','#470871','#fff');
|
|
@include theme_flat('grey', '#4d4d4f','#000000','#fff');
|
|
|
|
|
|
|
|
|
|
// PWS Themes Flat Dark
|
|
@mixin theme_flat_dark($name,$defaultColor,$hoverColor, $activeColor){
|
|
/**
|
|
* ###########################
|
|
* #{$name}
|
|
* ###########################
|
|
*/
|
|
.pws_tabs_container.pws_tabs_responsive.pws_theme_dark_#{$name} .pws_responsive_small_menu{
|
|
background-color: #{$defaultColor};
|
|
a:hover{
|
|
background-color: #{$hoverColor};
|
|
}
|
|
}
|
|
.pws_tabs_container.pws_theme_dark_#{$name}{
|
|
.pws_tabs_list{
|
|
background-color: #{$activeColor}
|
|
}
|
|
ul.pws_tabs_controll li a{
|
|
background-color: #{$defaultColor};
|
|
&:hover{
|
|
background-color: #{$hoverColor};
|
|
}
|
|
&.pws_tab_active{
|
|
background-color: #{$activeColor};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include theme_flat_dark('violet', '#c72c66','#a6164c','#fafafa');
|
|
@include theme_flat_dark('green', '#86c447','#539312','#fafafa');
|
|
@include theme_flat_dark('yellow', '#fdb813','#ffa500','#fafafa');
|
|
@include theme_flat_dark('gold', '#f89827','#fa7b00','#fafafa');
|
|
@include theme_flat_dark('orange', '#f15b42','#fd2e0b','#fafafa');
|
|
@include theme_flat_dark('red', '#e41937','#d70726','#fafafa');
|
|
@include theme_flat_dark('purple', '#672e8d','#470871','#fafafa');
|
|
@include theme_flat_dark('grey', '#4d4d4f','#000000','#fafafa');
|
|
@include theme_flat_dark('cyan', '#9bd7d5','#70c5c2','#fafafa');
|
|
|
|
|
|
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: none
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_noeffect{
|
|
.pws_tabs_list{
|
|
@include transition('all','.1s','ease-in-out','0');
|
|
}
|
|
.pws_tab_single{
|
|
@include transition_none;
|
|
}
|
|
}
|
|
|
|
.pws_tabs_container.pws_none{
|
|
.pws_hide{
|
|
display: none;
|
|
}
|
|
.pws_show{
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: scale
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_scale{
|
|
.pws_hide{
|
|
@include opacity(0);
|
|
@include transform('scale(0.9)');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
.pws_show{
|
|
z-index: 1;
|
|
@include opacity(100);
|
|
@include transform('scale(1)');
|
|
@include transition_delay('.3s');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: slideleft
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_slideleft{
|
|
.pws_hide{
|
|
@include transform('translateX(-100%)');
|
|
@include opacity(0);
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
.pws_show{
|
|
@include transform('translateX(0px)');
|
|
@include opacity(100);
|
|
@include transition_delay('.3s');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: slideright
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_slideright{
|
|
.pws_hide{
|
|
@include transform('translateX(200%)');
|
|
@include opacity(0);
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
.pws_show{
|
|
@include transform('translateX(0px)');
|
|
@include opacity(100);
|
|
@include transition_delay('.3s');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: slidetop
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_slidetop{
|
|
.pws_hide{
|
|
@include transform('translateY(-100%)');
|
|
@include opacity(0);
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
.pws_show{
|
|
@include transform('translateY(0px)');
|
|
@include opacity(100);
|
|
@include transition_delay('.3s');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
}
|
|
|
|
/**
|
|
* ######################################################
|
|
* Effect: slidedown
|
|
* ######################################################
|
|
*/
|
|
.pws_tabs_container.pws_slidedown{
|
|
.pws_hide{
|
|
@include transform('translateY(200%)');
|
|
@include opacity(0);
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
.pws_show{
|
|
@include transform('translateY(0px)');
|
|
@include opacity(100);
|
|
@include transition_delay('.3s');
|
|
@include transition('all','.3s','ease-in-out','.3s');
|
|
}
|
|
} |