Current path: home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules/sidearea/
?? Go up: /home/webdevt/www/wdp/wp-content/themes/quadric/assets/css/scss/modules
/* ==========================================================================
# Side area style - start
========================================================================== */
/* Side area general style - start
========================================================================== */
.edgtf-light-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-side-menu-button-opener,
.edgtf-light-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-side-menu-button-opener,
.edgtf-light-header .edgtf-top-bar .edgtf-side-menu-button-opener {
border-color: $header-light-color !important; //Color can be set inline from widget opener;
}
.edgtf-dark-header .edgtf-page-header > div:not(.edgtf-sticky-header) .edgtf-side-menu-button-opener,
.edgtf-dark-header.edgtf-header-style-on-scroll .edgtf-page-header .edgtf-side-menu-button-opener,
.edgtf-dark-header .edgtf-top-bar .edgtf-side-menu-button-opener {
border-color: $header-dark-color !important; //Color can be set inline from widget opener
}
.edgtf-side-menu-button-opener {
.lines-holder {
position: relative;
display: table-cell;
vertical-align: middle;
}
.line {
border-bottom: 2px solid #fff;
content: '';
display: block;
height: 0;
margin: 2px auto;
width: 13px;
&.first{
top: 24px;
width: 13px;
-webkit-transition: -webkit-transform .2s ease-out;
transition: transform .2s ease-out;
outline: 1px solid transparent; //moz flicker fix
}
&.second {
transform-origin: 100% 50% ;
transition: transform .1s ease-out .15s;
}
&.third {
top: 32px;
width: 13px;
transition: transform .2s ease-out;
outline: 1px solid transparent; //moz flicker fix
}
}
body.edgtf-side-menu-open & .second,
&:hover .second {
@include edgtfTransform(scale(0,1));
-webkit-transition: -webkit-transform .1s ease-out;
transition: transform .1s ease-out;
}
body.edgtf-side-menu-open & .first,
&:hover .first {
@include edgtfTransform(rotate(45deg) scale(.7,1) translateX(2px));
-webkit-transition: -webkit-transform .2s ease-out .1s;
transition: transform .2s easet .1s;
}
body.edgtf-side-menu-open & .third,
&:hover .third {
@include edgtfTransform(rotate(-45deg) scale(.7,1) translateX(2px));
-webkit-transition: -webkit-transform .2s ease-out .1s;
transition: transform .2s ease .1s;
}
}
.edgtf-side-menu {
background-color: #393939;
height: 100%;
min-height: 100%;
overflow: hidden;
padding: 30px 50px;
position: fixed;
top: 0;
right: -270px;
width: 210px;
z-index: 9999;
-webkit-backface-visibility: hidden;
h4{
margin: 0 0 15px 0;
color: #fff;
}
h5,
h6 {
margin: 0 0 12px 0;
color: #fff;
}
.widget {
margin: 0 0 30px;
li {
position:relative;
list-style-type: none;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
padding: 9px 0;
a {
color: #fff;
}
&:hover a{
color: $first-main-color;
}
}
ul li.page_item_has_children,
ul li.menu-item-has-children{
padding-right: 0;
border-bottom:none;
}
ul ul {
padding: 6px 0 0 10px;
}
}
a,
span,
p,
.widget_rss li a.rsswidget {
color: #7f7f7f;
line-height: 31px;
@include edgtfTransition(color 0.15s ease-out);
}
.widget_calendar {
font-size: 14px;
a{
color:#fff;
}
caption,
th,
td {
color: #9d9d9d;
line-height: 31px;
@include edgtfTransition(color 0.15s ease-out);
}
thead tr,
tbody tr,
tbody td {
border-color: #9d9d9d;
}
}
.edgtf-side-menu-title {
display: block;
margin: 0 0 12px;
}
.widget_nav_menu {
li:last-child,
li a {
margin: 0;
}
}
.edgtf-close-side-menu-holder {
display: table;
height: 60px;
position: absolute;
top: 0px;
right: 20px;
z-index: 1000;
}
.edgtf-close-side-menu-holder-inner {
display: table-cell;
vertical-align: middle;
}
a.edgtf-close-side-menu {
display: inline-block;
height: 26px;
width: 26px;
padding: 0 2px 4px 0; /* in order to align icon in horizontal and vertical center */
z-index: 1000;
@include edgtfTransition(transform .5s ease);
span{
color: #ffffff;
display: inline-block;
font-size: 22px;
height: 26px;
line-height: 29px;
position: relative;
text-align: center;
width: 26px;
}
}
a.edgtf-close-side-menu:hover {
@include edgtfTransform(rotate(180deg));
}
}
.admin-bar .edgtf-side-menu .edgtf-close-side-menu-holder {
top: 32px;
}
/* Side area general style - end
========================================================================== */
/* Side area slides over content style - start
========================================================================== */
.edgtf-right-side-menu-opened {
.edgtf-wrapper,
footer.uncover,
.edgtf-fixed-wrapper.fixed,
.edgtf-sticky-header,
.mobile-header-appear .edgtf-mobile-header-inner {
left:-270px;
}
}
.edgtf-side-menu-slide-from-right {
.edgtf-wrapper {
background-color: #fff;
position: relative;
z-index: 1000;
@include edgtfTransition(left 0.2s cubic-bezier(.645,.045,.355,1.000));
.edgtf-cover {
z-index: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
background:#000;
-webkit-transition: opacity 0.2s ease-in-out,background 0.2s ease-in-out,z-index 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out,background 0.2s ease-in-out,z-index 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out,background 0.2s ease-in-out,z-index 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out,background 0.2s ease-in-out,z-index 0.2s ease-in-out;
}
}
.carousel-inner {
@include edgtfTransition(left 0.2s cubic-bezier(.645,.045,.355,1.000));
}
.edgtf-side-menu {
padding: 5% 30px 30px 30px;
top: 0;
right: -45%;
width: 45%;
z-index: 9999;
text-align: center;
visibility: hidden;
-webkit-box-sizing:border-box;
box-sizing: border-box;
@include edgtfTransition(0.2s ease-in-out);
}
// header.sticky,
// header.fixed_top_header .top_header
.edgtf-sticky-header,
.edgtf-fixed-wrapper.fixed {
-webkit-transition: left 0.2s cubic-bezier(.645,.045,.355,1.000), -webkit-transform 0.33s ease;
transition: left 0.2s cubic-bezier(.645,.045,.355,1.000), transform 0.33s ease;
}
footer.uncover {
@include edgtfTransition(left 0.2s cubic-bezier(.645,.045,.355,1.000));
}
}
.edgtf-side-menu-slide-from-right.edgtf-right-side-menu-opened {
.edgtf-cover {
cursor: url('img/close.png'), pointer;
z-index: 1002;
opacity: 0.6;
filter: alpha(opacity=60);
}
.edgtf-side-menu {
right: 0px;
visibility: visible;
}
}
/* Side area slides over content style - end
========================================================================== */
/* Side area slides with content style - start
========================================================================== */
.edgtf-side-menu-slide-with-content {
overflow-x: hidden;
position: relative;
left: 0;
-webkit-overflow-scrolling: auto !important;
-webkit-transition: left 0.2s ease, right 0.2s ease;
-moz-transition: left 0.2s ease, right 0.2s ease;
-o-transition: left 0.2s ease, right 0.2s ease;
transition: left 0.2s ease, right 0.2s ease;
.edgtf-side-menu {
position: fixed;
visibility: visible;
-webkit-box-sizing:border-box;
box-sizing: border-box;
width: 470px;
right: -470px;
height: 100%;
top: 0;
z-index: 9999;
-webkit-transition: left 0.2s ease, right 0.2s ease;
-moz-transition: left 0.2s ease, right 0.2s ease;
-o-transition: left 0.2s ease, right 0.2s ease;
transition: left 0.2s ease, right 0.2s ease;
}
footer.uncover,
.edgtf-wrapper{
-webkit-transition: left 0.2s ease, right 0.2s ease;
-moz-transition: left 0.2s ease, right 0.2s ease;
-o-transition: left 0.2s ease, right 0.2s ease;
transition: left 0.2s ease, right 0.2s ease;
}
.edgtf-sticky-header,
.edgtf-fixed-wrapper.fixed,
.edgtf-mobile-header-inner {
-webkit-transition: left 0.2s ease, right 0.2s ease, -webkit-transform 0.33s ease;
transition: left 0.2s ease, right 0.2s ease, transform 0.33s ease;
}
.carousel-inner {
left:0 !important;
@include edgtfTransition(left 0.2s ease);
}
}
.edgtf-side-menu-slide-with-content.edgtf-side-menu-open {
.edgtf-wrapper,
footer.uncover,
.edgtf-sticky-header,
.edgtf-fixed-wrapper,
.edgtf-mobile-header-inner {
left: -470px;
}
.edgtf-side-menu {
right: 0;
}
.carousel-inner:not(.relative_position){
left:-470px !important;
}
}
/* width 270px start */
.edgtf-side-menu-slide-with-content.edgtf-width-270.edgtf-side-menu-open {
.edgtf-wrapper,
footer.uncover,
.edgtf-sticky-header,
.edgtf-fixed-wrapper,
.edgtf-mobile-header-inner {
left: -270px;
}
.edgtf-side-menu {
right: 0;
}
.carousel-inner:not(.relative_position) {
left:-270px !important;
}
}
.edgtf-side-menu-slide-with-content.edgtf-width-270 {
.edgtf-side-menu {
width: 270px;
right: -270px;
}
}
/* width 270px end */
/* width 370px start */
.edgtf-side-menu-slide-with-content.edgtf-width-370.edgtf-side-menu-open {
.edgtf-wrapper,
footer.uncover,
.edgtf-sticky-header,
.edgtf-fixed-wrapper,
.edgtf-mobile-header-inner {
left: -370px;
}
.edgtf-side-menu {
right: 0;
}
.carousel-inner:not(.relative_position){
left:-370px !important;
}
}
.edgtf-side-menu-slide-with-content.edgtf-width-370 {
.edgtf-side-menu {
width: 370px;
right: -370px;
}
}
/* width 370px end */
/* Side area slides with content style - end
========================================================================== */
/* Side area uncovering - start
========================================================================== */
.edgtf-side-area-uncovered-from-content {
.edgtf-side-menu {
background-color: #1b1b1b;
height: 100%;
min-height: 100%;
overflow: hidden;
padding: 30px;
position: fixed;
top: 0;
right: 0;
width: 210px;
z-index: 90;
visibility: hidden;
}
.edgtf-sticky-header,
.edgtf-fixed-wrapper.fixed {
-webkit-transition: left 0.3s ease, right 0.2s ease;
-moz-transition: left 0.3s ease, right 0.2s ease;
-o-transition: left 0.3s ease, right 0.2s ease;
transition: left 0.3s ease, right 0.2s ease;
}
}
.edgtf-side-area-uncovered-from-content.edgtf-right-side-menu-opened {
.edgtf-sticky-header,
.edgtf-fixed-wrapper.fixed,
.edgtf-mobile-header-inner {
left: -270px;
}
}
/* Side area uncovering - end
========================================================================== */
/* ==========================================================================
# Side area style - end
========================================================================== */