first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,88 @@
|
||||
#site-header.center-header {
|
||||
#site-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
width: 100%;
|
||||
right: auto;
|
||||
|
||||
.navigation {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
}
|
||||
|
||||
.middle-site-logo {
|
||||
width: 24%;
|
||||
text-align: center;
|
||||
|
||||
a img {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-in-out );
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.6 );
|
||||
}
|
||||
}
|
||||
|
||||
.left-menu,
|
||||
.right-menu {
|
||||
position: relative;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.centered {
|
||||
.left-menu,
|
||||
.right-menu {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.wider .left-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.wider .right-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.closer .left-menu {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.closer .right-menu {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#searchform-header-replace.show {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
#site-navigation .middle-site-logo {
|
||||
@include transition( opacity .3s );
|
||||
}
|
||||
|
||||
#site-navigation.hide .middle-site-logo {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
#site-header.custom-header ul.oceanwp-custom-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-logo {
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-nav {
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto;
|
||||
|
||||
#site-navigation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
float: none !important;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,366 @@
|
||||
#site-header.full_screen-header {
|
||||
z-index: 9999;
|
||||
|
||||
#site-header-inner {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#site-logo.has-full-screen-logo {
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
|
||||
.full-screen-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened .custom-logo-link,
|
||||
&.opened .retina-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened .full-screen-logo-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bar-wrap {
|
||||
float: right;
|
||||
height: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
.menu-bar-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
min-width: 38px;
|
||||
height: 33px;
|
||||
text-align: center;
|
||||
z-index: 101;
|
||||
|
||||
.ham {
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
background-color: $color-2;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
@include transition( all ease .3s );
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 23px;
|
||||
height: 2px;
|
||||
left: 0;
|
||||
background-color: $color-2;
|
||||
outline: 1px solid transparent;
|
||||
@include transition( all ease .3s );
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&.exit .ham {
|
||||
background-color: transparent !important;
|
||||
|
||||
&:before, &:after {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform( translateY(8px) rotateZ(-45deg) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform( translateY(-8px) rotateZ(45deg) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-open {
|
||||
@include transform( none !important );
|
||||
}
|
||||
|
||||
#full-screen-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
overflow-y: scroll;
|
||||
z-index: 100;
|
||||
|
||||
#full-screen-menu-inner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
#site-navigation {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.fs-dropdown-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
color: $color-1;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
color: $color-4;
|
||||
}
|
||||
}
|
||||
|
||||
> a .nav-arrow {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
|
||||
&.open-sub > a .nav-arrow:before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li a {
|
||||
font-size: 16px;
|
||||
padding: 6px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
font-size: 24px;
|
||||
line-height: 1.2;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li.search-toggle-li {
|
||||
max-width: 220px;
|
||||
margin: 10px auto 0;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input, label {
|
||||
font-size: 20px;
|
||||
padding: 4px 0;
|
||||
color: $color-1;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $color-17;
|
||||
@include border-radius( 0 );
|
||||
z-index: 2;
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
background-color: $color-1;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin-left: 3px;
|
||||
@include animation( blink 1s linear infinite );
|
||||
}
|
||||
|
||||
i+i {
|
||||
@include animation-delay( .2s );
|
||||
}
|
||||
|
||||
i+i+i {
|
||||
@include animation-delay( .4s );
|
||||
}
|
||||
}
|
||||
|
||||
form.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: 30px;
|
||||
text-align: center;
|
||||
right: auto;
|
||||
|
||||
.social-menu-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
ul li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.simple-social ul li a {
|
||||
background-color: transparent !important;
|
||||
color: $color-1;
|
||||
font-size: 24px;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-4;
|
||||
}
|
||||
}
|
||||
|
||||
.colored ul li a,
|
||||
.minimal ul li a,
|
||||
.dark ul li a {
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.colored ul li a span,
|
||||
.minimal ul li a span,
|
||||
.dark ul li a span {
|
||||
font-size: 16px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
-webkit-opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-webkit-opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes blink {
|
||||
0% {
|
||||
-moz-opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-moz-opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes blink {
|
||||
0% {
|
||||
-o-opacity: 1;
|
||||
}
|
||||
50% {
|
||||
-o-opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-o-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* header > logo */
|
||||
#site-header.full_screen-header #site-logo.has-full-screen-logo.opened {
|
||||
.custom-logo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.full-screen-logo-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,301 @@
|
||||
#site-header.medium-header {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
.top-header-wrap {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 30px 0;
|
||||
@include transition( padding .4s ease-in-out );
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-header-inner {
|
||||
@include display();
|
||||
@include flex-direction( row );
|
||||
@include align-items( center );
|
||||
@include justify-content( center );
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-col {
|
||||
-webkit-flex: 1 0 0%;
|
||||
flex: 1 0 0%;
|
||||
|
||||
&.col-1 {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.col-2,
|
||||
&.logo-col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.col-3 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
#medium-searchform {
|
||||
form {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
background-color: transparent !important;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 6px 38px 6px 12px;
|
||||
max-width: 178px;
|
||||
z-index: 2;
|
||||
|
||||
&:focus {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
label, button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
left: 12px;
|
||||
color: $color-2;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 0;
|
||||
width: 38px;
|
||||
background-color: transparent;
|
||||
color: $color-11;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
z-index: 2;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $color-16;
|
||||
}
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: block;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
float: none;
|
||||
display: block;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
|
||||
.social-menu-inner {
|
||||
display: block;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
ul li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
position: relative;
|
||||
background-color: #f9f9f9;
|
||||
float: none;
|
||||
position: relative;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
@include transform( none );
|
||||
z-index: 9;
|
||||
|
||||
&.left-menu #site-navigation {
|
||||
float: left;
|
||||
left: -22px;
|
||||
}
|
||||
|
||||
&.center-menu #site-navigation {
|
||||
.dropdown-menu > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-menu #site-navigation {
|
||||
float: right;
|
||||
right: -22px;
|
||||
}
|
||||
|
||||
#site-navigation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
font-size: 12px;
|
||||
line-height: 60px;
|
||||
padding: 0 22px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden-menu {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 150px;
|
||||
@include transition( all .4s ease-in-out );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-header.medium-header {
|
||||
|
||||
.top-header-wrap {
|
||||
padding: 20px 0;
|
||||
|
||||
.oceanwp-social-menu .social-menu-inner {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.hidden-menu {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 0;
|
||||
@include opacity( 0 );
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#site-navigation-wrap,
|
||||
#site-navigation,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
max-height: 150px;
|
||||
@include opacity( 1 );
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.medium-header .oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
background-color: #f9f9f9;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
|
||||
a {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
padding: 0 22px;
|
||||
line-height: 60px;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.medium-header.is-transparent {
|
||||
.top-header-wrap,
|
||||
#site-navigation-wrap,
|
||||
.oceanwp-mobile-menu-icon {
|
||||
background-color: transparent;
|
||||
@include transition( all .3s );
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* Hide social and search form in sidr for the medium header style */
|
||||
.medium-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#site-header.medium-header {
|
||||
.top-header-inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-col:not(.logo-col) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top-col.logo-col {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Show social and search form in sidr for the medium header style */
|
||||
.medium-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* medium header style */
|
||||
#site-header.medium-header {
|
||||
.header-top-wrap {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon a {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
#site-header.top-header {
|
||||
border-bottom: 0 !important;
|
||||
|
||||
.header-top {
|
||||
position: relative;
|
||||
background-color: $color-1;
|
||||
@include box-shadow( 0 1px 5px 0 rgba(0,0,0,0.1) );
|
||||
z-index: 100;
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
|
||||
.inner {
|
||||
display: table;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
.left, .right {
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
|
||||
&.hide {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto !important;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
#site-navigation-wrap .dropdown-menu > li > a {
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu,
|
||||
#search-toggle {
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu .social-menu-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
right: 0;
|
||||
padding: 0 10px;
|
||||
|
||||
.colored ul li a,
|
||||
.minimal ul li a,
|
||||
.dark ul li a {
|
||||
padding: 0 3px;
|
||||
|
||||
span {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-toggle {
|
||||
border-right: 1px solid $color-9;
|
||||
border-left: 1px solid $color-9;
|
||||
padding: 0 6px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&.search-overlay #search-toggle .search-overlay-toggle {
|
||||
position: relative;
|
||||
z-index: 101;
|
||||
|
||||
&.exit > span:before {
|
||||
content: '✕';
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace input {
|
||||
color: $color-3;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#searchform-header-replace-close {
|
||||
font-size: 16px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.header-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
padding: 50px 0;
|
||||
|
||||
#site-logo-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#site-description {
|
||||
padding-top: 20px;
|
||||
|
||||
h2 {
|
||||
color: $color-4;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#site-header.top-header .oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
|
||||
a {
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.top-header.has-header-media {
|
||||
#site-header-sticky-wrapper,
|
||||
.header-top {
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* Hide social and search form in sidr for the top menu header style */
|
||||
.top-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* Hide social and search in menu and show them in sidr for the top menu header style */
|
||||
#site-header.top-header {
|
||||
.right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.header-replace {
|
||||
.left.hide,
|
||||
.right.hide {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
.header-top {
|
||||
.left,
|
||||
.right {
|
||||
float: none !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
float: none;
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
|
||||
a {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-top .right .inner {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.oceanwp-social-menu,
|
||||
#search-toggle {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header-style {
|
||||
.sidr-class-social-menu-inner,
|
||||
.sidr-class-mobile-searchform {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
#site-header.transparent-header {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
|
||||
#site-logo.has-transparent-logo {
|
||||
.custom-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.transparent-logo-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-header.transparent-header #site-logo.has-transparent-logo {
|
||||
.custom-logo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.transparent-logo-link {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,374 @@
|
||||
#site-header.vertical-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: none;
|
||||
z-index: 3000;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
&.has-scrolled {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
&.has-shadow {
|
||||
@include box-shadow( 0 0 20px 0 rgba(0,0,0,0.10) );
|
||||
}
|
||||
|
||||
.has-template > #site-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
max-width: 100%;
|
||||
padding: 30px 0;
|
||||
overflow: hidden;
|
||||
|
||||
> *:not(#site-navigation-wrap) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#sidr {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-left-logo #site-logo {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.vh-center-logo #site-logo {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.vh-right-logo #site-logo {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#site-logo,
|
||||
#site-logo #site-logo-inner {
|
||||
display: block;
|
||||
float: none;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
margin: 20px 0 45px;
|
||||
}
|
||||
|
||||
.has-social #site-navigation-wrap {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
float: none;
|
||||
right: auto;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
.dropdown-menu li {
|
||||
display: block;
|
||||
float: none;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
padding: 17px 30px;
|
||||
|
||||
.dropdown-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
line-height: 1;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu .sub-menu {
|
||||
display: none;
|
||||
position: relative;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border: none;
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
@include box-shadow( none );
|
||||
}
|
||||
|
||||
.nav-arrow,
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#vertical-searchform {
|
||||
margin-top: 40px;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
border-width: 0 0 2px;
|
||||
background-color: transparent !important;
|
||||
border-color: rgba(0, 0, 0, 0.04);
|
||||
padding: 10px 12px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
label, button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin: 0;
|
||||
@include transform( translateY(-50%) );
|
||||
}
|
||||
|
||||
label {
|
||||
left: 12px;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
color: #777;
|
||||
border: none;
|
||||
z-index: 2;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
float: none;
|
||||
display: block;
|
||||
margin-top: 40px;
|
||||
|
||||
&.simple-social {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.social-menu-inner {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-header-nav #site-navigation-wrap #site-navigation {
|
||||
display: block;
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 22px;
|
||||
line-height: 34px;
|
||||
padding: 0 !important;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.has-vh-transparent .is-sticky #site-header.vertical-header {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
body.vertical-header-style {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
|
||||
.vertical-toggle {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-left: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
|
||||
.vertical-toggle {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-right: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-vh-transparent {
|
||||
&.left-header #outer-wrap {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.right-header #outer-wrap {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-closed {
|
||||
&.left-header #site-header.vertical-header {
|
||||
left: -266px;
|
||||
}
|
||||
|
||||
&.left-header #outer-wrap {
|
||||
margin-left: 34px;
|
||||
}
|
||||
|
||||
&.right-header #site-header.vertical-header {
|
||||
right: -266px;
|
||||
}
|
||||
|
||||
&.right-header #outer-wrap {
|
||||
margin-right: 34px;
|
||||
}
|
||||
|
||||
&.vh-opened {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header #site-navigation-wrap {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header {
|
||||
.vertical-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
padding-right: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 1280px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 1280px) {
|
||||
|
||||
body.vertical-header-style.default-collapse {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: -266px;
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-left: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: -266px;
|
||||
}
|
||||
|
||||
#outer-wrap {
|
||||
margin-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-opened {
|
||||
&.left-header {
|
||||
#site-header.vertical-header {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-header {
|
||||
#site-header.vertical-header {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header.vertical-header #site-navigation-wrap {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.default-collapse #site-header.vertical-header {
|
||||
.vertical-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-navigation-wrap {
|
||||
padding-right: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
#site-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: $color-1;
|
||||
border-bottom: 1px solid $color-9;
|
||||
z-index: 100;
|
||||
|
||||
&.is-transparent {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
#transparent-header-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-transparent-header {
|
||||
.oceanwp-sticky-header-holder {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.is-sticky #site-header {
|
||||
background-color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
.no-header-border #site-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
float: left;
|
||||
height: 100%;
|
||||
display: table;
|
||||
}
|
||||
|
||||
#site-logo #site-logo-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 74px;
|
||||
|
||||
a {
|
||||
background-color: transparent !important;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-in-out );
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.6 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-logo a.site-logo-text {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Responsive logo */
|
||||
#site-logo.has-responsive-logo .responsive-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Header media
|
||||
*/
|
||||
#site-header.has-header-media {
|
||||
> *:not(.overlay-header-media) {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.overlay-header-media {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Video header
|
||||
*/
|
||||
#site-header .custom-header-media {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
|
||||
}
|
||||
|
||||
video, iframe {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
max-width: 1000%;
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
min-width: 100vw;
|
||||
width: auto;
|
||||
top: 50%;
|
||||
@include transform( translateX(-50%) translateY(-50%) );
|
||||
}
|
||||
|
||||
.wp-custom-header-video-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.has-header-video #site-header-inner {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
.has-left-menu #site-logo {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/* logo */
|
||||
#site-logo {
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,404 @@
|
||||
.effect-one #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
display: block;
|
||||
background-color: #13aff0;
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
visibility: hidden;
|
||||
-moz-transform: scaleX(0);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
transform-origin: bottom left;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
visibility: visible;
|
||||
-moz-transform: scaleX(1);
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
visibility: visible;
|
||||
-moz-transform: scaleX(1);
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-two #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-three #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -30%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
height: 2px;
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
height: 2px;
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-four #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: inline-block;
|
||||
color: #13aff0;
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin-right: 6px;
|
||||
content: '[';
|
||||
@include transform( translateX(20px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
margin-left: 6px;
|
||||
content: ']';
|
||||
@include transform( translateX(-20px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(0) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(0) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-five #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 130%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( scale(0.85) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
@include transform( scale(1) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
top: -30%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( scale(1) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
top: -30%;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-six #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid rgba(0,0,0,0.1);
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(0.2) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-width: 4px;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(0.8) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(1) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
@include transform( translateX(-50%) translateY(-50%) scale(1) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-seven #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
bottom: -80%;
|
||||
left: 50%;
|
||||
color: transparent;
|
||||
content: '•';
|
||||
text-shadow: 0 0 transparent;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateX(-50%) );
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
color: #13aff0;
|
||||
text-shadow: 10px 0 #13aff0, -10px 0 #13aff0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
color: #13aff0;
|
||||
text-shadow: 10px 0 #13aff0, -10px 0 #13aff0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-eight #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
padding: 0 8px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
margin-top: -1px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
content: '';
|
||||
z-index: -1;
|
||||
@include transition( all .25s ease-out );
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform( translateY(-13px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform( translateY(15px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:hover > span:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-nine #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #13aff0;
|
||||
content: '';
|
||||
opacity: 0;
|
||||
@include transition( all .25s ease-out );
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
@include transform( translateY(-10px) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
@include transform( translateY(10px) );
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > span:before,
|
||||
&:hover > span:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover > span:before {
|
||||
@include transform( translateY(-3px) );
|
||||
}
|
||||
|
||||
&:hover > span:after {
|
||||
@include transform( translateY(5px) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before,
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:before {
|
||||
@include transform( translateY(-3px) );
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span:after {
|
||||
@include transform( translateY(5px) );
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.effect-ten #site-navigation-wrap .dropdown-menu > li {
|
||||
> a.menu-link {
|
||||
> span {
|
||||
padding: 8px;
|
||||
@include transition( box-shadow .25s ease-out );
|
||||
}
|
||||
|
||||
&:hover > span {
|
||||
@include box-shadow( 0 0 10px 4px rgba(0,0,0,0.1) );
|
||||
}
|
||||
}
|
||||
|
||||
&.sfHover > a.menu-link > span {
|
||||
@include box-shadow( 0 0 10px 4px rgba(0,0,0,0.1) );
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
.navigation .megamenu {
|
||||
a .nav-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> li > a.menu-link {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li ul.sub-menu {
|
||||
border-top: 1px solid $color-9;
|
||||
}
|
||||
|
||||
li a.menu-link {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
padding: 20px;
|
||||
margin-bottom: 0;
|
||||
line-height: $base-line-height;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation > ul > li > ul.megamenu.sub-menu > li {
|
||||
float: left;
|
||||
border-bottom: 0;
|
||||
border-left-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation li.megamenu-li.hide-headings > .megamenu > li > a,
|
||||
.navigation li.megamenu-li > .megamenu > li.hide-heading > a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation .megamenu .sub-menu {
|
||||
display: block !important;
|
||||
@include opacity( 1 !important );
|
||||
min-width: 100%;
|
||||
position: static;
|
||||
background: transparent;
|
||||
@include box-shadow( none );
|
||||
}
|
||||
|
||||
/**
|
||||
* Megamenu columns
|
||||
*/
|
||||
.navigation li.megamenu-li .megamenu {
|
||||
&.col-1 > li { width: 100%; }
|
||||
&.col-2 > li { width: 50%; }
|
||||
&.col-3 > li { width: 33.33333333%; }
|
||||
&.col-4 > li { width: 25%; }
|
||||
&.col-5 > li { width: 20%; }
|
||||
&.col-6 > li { width: 16.66666667%; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Megamenu auto width
|
||||
*/
|
||||
@media only screen and (min-width: 959px) {
|
||||
.navigation li.megamenu-li.auto-mega .megamenu {
|
||||
&.col-1 { width: 320px; }
|
||||
&.col-2 { width: 440px; }
|
||||
&.col-3 { width: 660px; }
|
||||
&.col-4 { width: 780px; }
|
||||
&.col-5 { width: 980px; }
|
||||
&.col-6 { width: 1080px; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Elementor Template
|
||||
*/
|
||||
.navigation > ul > li > ul.megamenu.sub-menu > li .elementor {
|
||||
white-space: normal;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
/**
|
||||
* Latest Posts Categories
|
||||
*/
|
||||
.navigation li.mega-cat {
|
||||
.megamenu {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
|
||||
.mega-cat-title {
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
font-weight: 400;
|
||||
background-color: #f8f8f8;
|
||||
color: $color-3;
|
||||
letter-spacing: 2px;
|
||||
margin: 0 -20px 30px;
|
||||
padding: 15px 35px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> ul > li {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul li a.mega-post-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: #000;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@include border-radius( 3px );
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
@include opacity( 0 );
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
ul li .mega-post-title {
|
||||
display: block;
|
||||
margin: 15px 0 8px;
|
||||
white-space: initial;
|
||||
|
||||
a {
|
||||
color: $color-11;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: none;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li .mega-post-date {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
color: $color-13;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
font-size: 9px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation > ul > li.mega-cat > ul.megamenu.sub-menu > li.first {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet & Small Desktop Widths
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 768px) and (max-width: 1280px) {
|
||||
|
||||
/* megamenu */
|
||||
.navigation li.megamenu.auto-width.col-6 > .sub-menu {
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,394 @@
|
||||
#site-navigation-wrap {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: -15px;
|
||||
|
||||
.dropdown-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 74px;
|
||||
color: $color-11;
|
||||
padding: 0 15px;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
&.site-search-toggle {
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
padding-left: 6px;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn > a {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&.btn > a > span {
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
padding: 12px 22px;
|
||||
font-weight: 600;
|
||||
@include border-radius( 4px );
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
@include transition( background-color .3s ease );
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn > a:hover > span {
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
&.btn.rounded > a > span {
|
||||
@include border-radius( 25px );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If social
|
||||
.has-social #site-navigation-wrap {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// If left menu
|
||||
.minimal-header.left-menu #site-navigation-wrap,
|
||||
.transparent-header.left-menu #site-navigation-wrap {
|
||||
float: left;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.minimal-header.left-menu #site-logo,
|
||||
.transparent-header.left-menu #site-logo {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
// If center menu
|
||||
.center-menu #site-navigation-wrap {
|
||||
position: absolute;
|
||||
float: none;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
@include transform( translateX(-50%) );
|
||||
}
|
||||
|
||||
/**
|
||||
* SuperFish
|
||||
*/
|
||||
.sf-menu,
|
||||
.sf-menu * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.sf-menu {
|
||||
li.menu-item {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
li:hover,
|
||||
li.sfHover {
|
||||
@include transition( none );
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
> li {
|
||||
float: left
|
||||
|
||||
}
|
||||
|
||||
li:hover > ul,
|
||||
li.sfHover > ul {
|
||||
display: block
|
||||
}
|
||||
|
||||
a.menu-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
zoom: 1
|
||||
}
|
||||
|
||||
ul.sub-menu ul {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown
|
||||
*/
|
||||
.dropdown-menu,
|
||||
.dropdown-menu * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.sub-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
background-color: $color-1;
|
||||
border-top: 3px solid $color-5;
|
||||
min-width: 180px;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
z-index: 999;
|
||||
@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
|
||||
}
|
||||
|
||||
li .sub-menu li.menu-item {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
ul .sub-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-top-border .sub-menu {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
ul li.menu-item {
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-9;
|
||||
}
|
||||
|
||||
ul li.menu-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
ul li a.menu-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: none;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2em;
|
||||
letter-spacing: 0.6px;
|
||||
padding: 12px 15px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-8;
|
||||
color: $color-11;
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 15px;
|
||||
margin-top: -6.5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Icons
|
||||
*/
|
||||
.dropdown-menu li a.menu-link i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Item description
|
||||
*/
|
||||
.nav-content {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
line-height: $base-line-height;
|
||||
padding: 5px 0;
|
||||
white-space: normal;
|
||||
@include opacity( 0.7 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Menu Icons
|
||||
*/
|
||||
.navigation li a {
|
||||
i.icon, span.icon-wrap, img.icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
&.icon {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.2em;
|
||||
line-height: 1;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.before,
|
||||
&.after {
|
||||
margin-top: -.265em;
|
||||
}
|
||||
|
||||
&.before {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.after {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
&.elusive {
|
||||
margin-top: -.3em;
|
||||
}
|
||||
}
|
||||
|
||||
span.icon-wrap {
|
||||
text-align: center;
|
||||
|
||||
i.below, img {
|
||||
display: block;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0 auto 8px auto;
|
||||
}
|
||||
|
||||
span.menu-text {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
&.before {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&.after {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.svg {
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* After header content
|
||||
*/
|
||||
.after-header-content {
|
||||
float: right;
|
||||
height: 100%;
|
||||
display: table;
|
||||
|
||||
.after-header-content-inner {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
height: 74px;
|
||||
|
||||
> a,
|
||||
> div > a {
|
||||
display: inline-block;
|
||||
line-height: 74px;
|
||||
}
|
||||
}
|
||||
|
||||
.elementor {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Mobile Menu
|
||||
*------------------------------------*/
|
||||
.oceanwp-mobile-menu-icon {
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
&.mobile-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.mobile-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
line-height: 74px;
|
||||
color: #555;
|
||||
padding-left: 15px;
|
||||
letter-spacing: 0.6px;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
}
|
||||
|
||||
&.mobile-menu {
|
||||
.oceanwp-text,
|
||||
.oceanwp-close-text {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.oceanwp-close-text,
|
||||
&.opened .oceanwp-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.opened .oceanwp-close-text {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
#searchform-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: $color-1;
|
||||
border-top: 3px solid $color-5;
|
||||
top: 100%;
|
||||
padding: 15px;
|
||||
width: 260px;
|
||||
@include box-shadow( 0 2px 7px rgba(0,0,0,0.1) );
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
transition: all 0.25s ease-in-out;
|
||||
z-index: 10000;
|
||||
|
||||
input {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
@include border-radius( 0 );
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.no-top-border #searchform-dropdown {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* display search on click */
|
||||
#searchform-dropdown.show {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
@@ -0,0 +1,144 @@
|
||||
#searchform-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
z-index: 9999;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
max-width: 550px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a.search-overlay-close {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
text-align: center;
|
||||
@include border-radius( 2px );
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin-top: 6px;
|
||||
background-color: $color-1;
|
||||
@include border-radius( 5px );
|
||||
}
|
||||
|
||||
&:before {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include transform( rotate(-45deg) );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -33px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
input, label {
|
||||
font-size: 22px;
|
||||
line-height: 1.3;
|
||||
padding: 18px 0;
|
||||
margin: 0;
|
||||
min-height: 50px;
|
||||
color: $color-1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
position: relative;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid $color-14;
|
||||
z-index: 2;
|
||||
@include transition( border-color .3s ease );
|
||||
|
||||
&:hover {
|
||||
border-color: $color-15;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
cursor: text;
|
||||
@include opacity( .5 );
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
background-color: $color-1;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin-left: 3px;
|
||||
@include animation( blink 1s linear infinite );
|
||||
}
|
||||
|
||||
i+i {
|
||||
@include animation-delay( .2s );
|
||||
}
|
||||
|
||||
i+i+i {
|
||||
@include animation-delay( .4s );
|
||||
}
|
||||
}
|
||||
|
||||
&.search-filled label {
|
||||
@include opacity( 0 );
|
||||
@include transition-duration( 150ms );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* header > search overlay */
|
||||
#searchform-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
#site-header.header-replace {
|
||||
#site-navigation {
|
||||
.dropdown-menu {
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
}
|
||||
|
||||
&.hide .dropdown-menu {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
|
||||
form {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 100%;
|
||||
width: 94%;
|
||||
font-size: 22px;
|
||||
background-color: transparent;
|
||||
color: $color-13;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
@include border-radius( 0 );
|
||||
}
|
||||
}
|
||||
|
||||
#searchform-header-replace-close {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
margin-top: -20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 26px;
|
||||
color: $color-13;
|
||||
cursor: pointer;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
}
|
||||
}
|
||||
|
||||
/* display search on click */
|
||||
#searchform-header-replace.show {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
.oceanwp-social-menu {
|
||||
float: right;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
&.simple-social {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
&.social-with-style {
|
||||
right: -2px;
|
||||
}
|
||||
|
||||
.social-menu-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
height: 74px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
color: $color-4;
|
||||
padding: 0 8px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
letter-spacing: 0;
|
||||
|
||||
span {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child a {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b; }
|
||||
&.oceanwp-googleplus a:hover { color: #de5a49; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762; }
|
||||
&.oceanwp-github a:hover { color: #60b044; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f; }
|
||||
&.oceanwp-xing a:hover { color: #006464; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900; }
|
||||
&.oceanwp-email a:hover { color: #13aff0; }
|
||||
}
|
||||
}
|
||||
|
||||
.colored ul li {
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $color-1;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a { background-color: #46d4fe; }
|
||||
&.oceanwp-twitter a:hover { background-color: #39b4d8; }
|
||||
&.oceanwp-facebook a{ background-color: #37589b; }
|
||||
&.oceanwp-facebook a:hover{ background-color: #2d477c; }
|
||||
&.oceanwp-googleplus a{ background-color: #de5a49; }
|
||||
&.oceanwp-googleplus a:hover { background-color: #bb4c3e; }
|
||||
&.oceanwp-pinterest a { background-color: #cb2027; }
|
||||
&.oceanwp-pinterest a:hover { background-color: #a91d23; }
|
||||
&.oceanwp-dribbble a { background-color: #ea4c89; }
|
||||
&.oceanwp-dribbble a:hover { background-color: #c64174; }
|
||||
&.oceanwp-vk a { background-color: #597BA5; }
|
||||
&.oceanwp-vk a:hover { background-color: #486384; }
|
||||
&.oceanwp-instagram a { background-color: #3F729B; }
|
||||
&.oceanwp-instagram a:hover { background-color: #315a7c; }
|
||||
&.oceanwp-linkedin a{ background-color: #3399CC; }
|
||||
&.oceanwp-linkedin a:hover { background-color: #2678a1; }
|
||||
&.oceanwp-tumblr a { background-color: #2C4762; }
|
||||
&.oceanwp-tumblr a:hover { background-color: #1d3042; }
|
||||
&.oceanwp-github a { background-color: #60b044; }
|
||||
&.oceanwp-github a:hover { background-color: #4f9237; }
|
||||
&.oceanwp-flickr a { background-color: #fa4086; }
|
||||
&.oceanwp-flickr a:hover { background-color: #c63169; }
|
||||
&.oceanwp-skype a { background-color: #00AFF0; }
|
||||
&.oceanwp-skype a:hover { background-color: #0291c6; }
|
||||
&.oceanwp-youtube a { background-color: #C4302B; }
|
||||
&.oceanwp-youtube a:hover { background-color: #982420; }
|
||||
&.oceanwp-vimeo a { background-color: #1ab7ea; }
|
||||
&.oceanwp-vimeo a:hover { background-color: #1494bd; }
|
||||
&.oceanwp-vine a { background-color: #00bf8f; }
|
||||
&.oceanwp-vine a:hover { background-color: #01906c; }
|
||||
&.oceanwp-xing a { background-color: #006464; }
|
||||
&.oceanwp-xing a:hover { background-color: #014646; }
|
||||
&.oceanwp-yelp a { background-color: #C41200; }
|
||||
&.oceanwp-yelp a:hover { background-color: #940f01; }
|
||||
&.oceanwp-tripadvisor a { background-color: #589442; }
|
||||
&.oceanwp-tripadvisor a:hover { background-color: #426f32; }
|
||||
&.oceanwp-rss a { background-color: #ff7900; }
|
||||
&.oceanwp-rss a:hover { background-color: #d46603; }
|
||||
&.oceanwp-email a { background-color: #13aff0; }
|
||||
&.oceanwp-email a:hover { background-color: #0f8dc2; }
|
||||
}
|
||||
|
||||
.minimal ul li {
|
||||
a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
background-color: transparent;
|
||||
color: #bbb;
|
||||
border: 1px solid #ccc;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.oceanwp-twitter a:hover { color: #46d4fe; border-color: #46d4fe; }
|
||||
&.oceanwp-facebook a:hover { color: #37589b; border-color: #37589b; }
|
||||
&.oceanwp-googleplus a:hover { color: #de5a49; border-color: #de5a49; }
|
||||
&.oceanwp-pinterest a:hover { color: #cb2027; border-color: #cb2027; }
|
||||
&.oceanwp-dribbble a:hover { color: #ea4c89; border-color: #ea4c89; }
|
||||
&.oceanwp-vk a:hover { color: #597BA5; border-color: #597BA5; }
|
||||
&.oceanwp-instagram a:hover { color: #3F729B; border-color: #3F729B; }
|
||||
&.oceanwp-linkedin a:hover { color: #3399CC; border-color: #3399CC; }
|
||||
&.oceanwp-tumblr a:hover { color: #2C4762; border-color: #2C4762; }
|
||||
&.oceanwp-github a:hover { color: #60b044; border-color: #60b044; }
|
||||
&.oceanwp-flickr a:hover { color: #fa4086; border-color: #fa4086; }
|
||||
&.oceanwp-skype a:hover { color: #00AFF0; border-color: #00AFF0; }
|
||||
&.oceanwp-youtube a:hover { color: #C4302B; border-color: #C4302B; }
|
||||
&.oceanwp-vimeo a:hover { color: #1ab7ea; border-color: #1ab7ea; }
|
||||
&.oceanwp-vine a:hover { color: #00bf8f; border-color: #00bf8f; }
|
||||
&.oceanwp-xing a:hover { color: #006464; border-color: #006464; }
|
||||
&.oceanwp-yelp a:hover { color: #C41200; border-color: #C41200; }
|
||||
&.oceanwp-tripadvisor a:hover { color: #589442; border-color: #589442; }
|
||||
&.oceanwp-rss a:hover { color: #ff7900; border-color: #ff7900; }
|
||||
&.oceanwp-email a:hover { color: #13aff0; border-color: #13aff0; }
|
||||
}
|
||||
|
||||
.dark ul li a {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
background-color: $color-2;
|
||||
color: $color-1;
|
||||
line-height: 1;
|
||||
padding: 1em;
|
||||
@include border-radius( 50% );
|
||||
vertical-align: middle;
|
||||
@include transition( all .3s ease-out );
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user