initial
This commit is contained in:
+467
@@ -0,0 +1,467 @@
|
||||
/**
|
||||
* 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');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user