first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,73 @@
|
||||
// Typography Variables
|
||||
// -------------------------------------------------
|
||||
|
||||
// Basic Typography
|
||||
$base-font-size: 14px;
|
||||
$base-line-height: 1.8;
|
||||
$font-size: $base-font-size !default;
|
||||
$browser-font-size: 16px !default;
|
||||
|
||||
// Body type
|
||||
$body-font-family: 'Open Sans', sans-serif !default;
|
||||
$body-font-weight: 400 !default;
|
||||
$body-font-style: normal !default;
|
||||
|
||||
// Heading type
|
||||
$heading-font-weight: 600 !default;
|
||||
$heading-font-style: normal !default;
|
||||
|
||||
// Color Variables
|
||||
// -------------------------------------------------
|
||||
|
||||
// Project base color
|
||||
// ==================================
|
||||
$color-1: #fff !default;
|
||||
$color-2: #333 !default;
|
||||
$color-3: #222 !default;
|
||||
$color-4: #929292 !default;
|
||||
$color-5: #13aff0 !default;
|
||||
$color-6: #0b7cac !default;
|
||||
$color-7: #e9e9e9 !default;
|
||||
$color-8: #f8f8f8 !default;
|
||||
$color-9: #f1f1f1 !default;
|
||||
$color-10: #ddd !default;
|
||||
$color-11: #555 !default;
|
||||
$color-12: #1B1B1B !default;
|
||||
$color-13: #bbb !default;
|
||||
$color-14: #444 !default;
|
||||
$color-15: #777 !default;
|
||||
$color-16: #f5f5f5 !default;
|
||||
$color-17: #666 !default;
|
||||
|
||||
// ===================================
|
||||
|
||||
// Base colors
|
||||
$body-bg-color: $color-1 !default;
|
||||
$border-color: $color-7 !default;
|
||||
$selection-bg-color: $color-2 !default;
|
||||
$selection-font-color: $color-1 !default;
|
||||
|
||||
// Typography colors
|
||||
$body-font-color: $color-4 !default;
|
||||
$heading-font-color: $color-2 !default;
|
||||
|
||||
// Link colors
|
||||
$link-color: $color-2 !default;
|
||||
$link-hover-color: $color-5 !default;
|
||||
|
||||
// Settings Hamburgers buttons
|
||||
// ==================================================
|
||||
$hamburger-layer-width : 20px !default;
|
||||
$hamburger-layer-height : 2px !default;
|
||||
$hamburger-layer-spacing : 5px !default;
|
||||
$hamburger-layer-color : #000 !default;
|
||||
$hamburger-layer-border-radius : 3px !default;
|
||||
$hamburger-hover-opacity : 0.7 !default;
|
||||
$hamburger-hover-transition-duration : 0.15s !default;
|
||||
$hamburger-hover-transition-timing-function: linear !default;
|
||||
|
||||
// To use CSS filters as the hover effect instead of opacity,
|
||||
// set $hamburger-hover-use-filter as true and
|
||||
// change the value of $hamburger-hover-filter accordingly.
|
||||
$hamburger-hover-use-filter: false !default;
|
||||
$hamburger-hover-filter : opacity(50%) !default;
|
||||
@@ -0,0 +1,618 @@
|
||||
.container {
|
||||
width: 1200px;
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
|
||||
#content-wrap {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.no-margins #main #content-wrap,
|
||||
.no-margins.separate-layout #main #content-wrap,
|
||||
.landing-page #main #content-wrap {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 72%;
|
||||
padding-right: 30px;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
width: 28%;
|
||||
|
||||
&.sidebar-primary {
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
&.sidebar-secondary {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.content-full-width .content-area,
|
||||
body.content-full-screen #content-wrap {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.content-full-screen .content-area {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.content-left-sidebar {
|
||||
.content-area {
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
padding-right: 0;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
float: left;
|
||||
padding-right: 30px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content-both-sidebars {
|
||||
.content-area {
|
||||
width: 44%;
|
||||
}
|
||||
|
||||
&.scs-style {
|
||||
.content-area {
|
||||
left: 28%;
|
||||
padding-left: 30px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.widget-area.sidebar-secondary {
|
||||
position: relative;
|
||||
left: -44%;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ssc-style {
|
||||
.content-area {
|
||||
left: 56%;
|
||||
padding-left: 30px;
|
||||
padding-right: 0;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
position: relative;
|
||||
left: -44%;
|
||||
padding-right: 30px;
|
||||
|
||||
&.sidebar-primary {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.css-style {
|
||||
.widget-area.sidebar-secondary {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Boxed Layout */
|
||||
.boxed-layout {
|
||||
background-color: $color-7;
|
||||
|
||||
#wrap {
|
||||
width: 1280px;
|
||||
max-width: 100% ;
|
||||
margin: 0 auto;
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
|
||||
&.wrap-boxshadow #wrap {
|
||||
@include box-shadow( 0 1px 4px rgba(0, 0, 0, .15) );
|
||||
}
|
||||
|
||||
#wrap .container {
|
||||
width: auto;
|
||||
max-width: none;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
&.content-full-screen #content-wrap {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
#footer-widgets {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Boxed Layout > Move absolute items */
|
||||
.boxed-layout .site-breadcrumbs {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
/* Separate Layout */
|
||||
.separate-layout {
|
||||
background-color: $color-9;
|
||||
|
||||
.content-area,
|
||||
.widget-area .sidebar-box {
|
||||
background-color: $color-1;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&.content-left-sidebar .content-area {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&.content-full-width .content-area {
|
||||
padding: 30px !important;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
&.content-left-sidebar .content-area {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.widget-area.sidebar-primary {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.widget-area.sidebar-secondary {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&.content-left-sidebar .widget-area {
|
||||
padding-right: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#main #content-wrap {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidebar-box:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.content-both-sidebars {
|
||||
&.scs-style {
|
||||
.content-area {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.widget-area.sidebar-secondary {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ssc-style {
|
||||
.content-area {
|
||||
padding-right: 30px;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.css-style {
|
||||
.widget-area.sidebar-secondary {
|
||||
padding-left: 20px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.separate-blog.separate-layout {
|
||||
.content-area {
|
||||
padding: 0 !important; /* using !important to override customizer setting */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#blog-entries > {
|
||||
* {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-pagination,
|
||||
.page-jump,
|
||||
.scroller-status {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
margin-top: 20px;
|
||||
|
||||
ul.page-numbers {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-row {
|
||||
margin: 0;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
#blog-entries.blog-grid > {
|
||||
* {
|
||||
background-color: transparent;
|
||||
padding: 0 20px 0 0;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-blog-grid .oceanwp-pagination {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.blog-entry.grid-entry {
|
||||
.blog-entry-inner {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 1280px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 1280px) {
|
||||
|
||||
/* Both sidebars layout */
|
||||
.content-both-sidebars {
|
||||
.content-area {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
left: auto !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.separate-layout) .content-area {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
float: left;
|
||||
width: 49% !important;
|
||||
left: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.sidebar-primary {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.separate-layout) .widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 48% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Separate layout */
|
||||
.separate-layout.content-both-sidebars {
|
||||
.content-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 49% !important;
|
||||
}
|
||||
|
||||
&.sidebar-secondary {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.sidebar-primary {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 1080px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 1080px) {
|
||||
|
||||
/* Both sidebars layout */
|
||||
.content-both-sidebars {
|
||||
.content-area {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
left: auto !important;
|
||||
border-width: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.separate-layout) .content-area {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
float: left;
|
||||
width: 49% !important;
|
||||
left: auto !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
&.sidebar-primary {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.separate-layout) .widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 48% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Separate layout */
|
||||
.separate-layout.content-both-sidebars {
|
||||
.content-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 49% !important;
|
||||
}
|
||||
|
||||
&.sidebar-secondary {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
&.sidebar-primary {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* boxed */
|
||||
.boxed-layout {
|
||||
#wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.site-breadcrumbs {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* container */
|
||||
.container,
|
||||
body.content-full-screen .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
/* full width content and sidebar */
|
||||
.content-area,
|
||||
.content-left-sidebar .content-area {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body.sidebar-content .content-area {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body:not(.separate-layout) .content-area,
|
||||
.content-left-sidebar:not(.separate-layout) .content-area {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.no-margins .content-area,
|
||||
.no-margins.content-left-sidebar .content-area {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.widget-area.sidebar-primary,
|
||||
.widget-area.sidebar-secondary,
|
||||
.content-left-sidebar .widget-area {
|
||||
float: none !important;
|
||||
width: 100%;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body.has-composer.has-sidebar #primary {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#main #content-wrap.container {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Both sidebars layout */
|
||||
.content-both-sidebars {
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.separate-layout) .widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separate-layout.content-both-sidebars {
|
||||
.widget-area {
|
||||
&.sidebar-primary,
|
||||
&.sidebar-secondary {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Separate layout */
|
||||
.separate-layout {
|
||||
.container,
|
||||
&.content-full-screen .elementor-section-wrap > .elementor-section.elementor-section-boxed > .elementor-container {
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.content-area,
|
||||
&.content-left-sidebar .content-area {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.widget-area {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
body.separate-blog.separate-layout {
|
||||
.oceanwp-row {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#blog-entries.blog-grid > * {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet Portrait
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
|
||||
/* main */
|
||||
body.boxed-layout #wrap,
|
||||
body.boxed-layout .parallax-footer {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/* grid & main */
|
||||
#wrap {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
body.boxed-layout #wrap {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.boxed-layout #top-bar-social {
|
||||
&.top-bar-right {
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.top-bar-left {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.col:not(.slick-slide), .blog-entry {
|
||||
width: 100% !important;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
/* boxed */
|
||||
.boxed-layout #wrap .container {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,141 @@
|
||||
// Font Size
|
||||
@mixin font-size($sizeValue: 1) {
|
||||
font-size: ($sizeValue * 16) * 1px;
|
||||
font-size: $sizeValue * 1rem;
|
||||
}
|
||||
|
||||
// Box Sizing
|
||||
@mixin box-sizing( $args ) {
|
||||
-webkit-box-sizing: $args;
|
||||
-moz-box-sizing: $args;
|
||||
box-sizing: $args;
|
||||
}
|
||||
|
||||
// Display Flex
|
||||
@mixin display() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flex Wrap
|
||||
@mixin flex-wrap( $args ) {
|
||||
-ms-flex-wrap: $args;
|
||||
-webkit-flex-wrap: $args;
|
||||
flex-wrap: $args;
|
||||
}
|
||||
|
||||
// Flex Direction
|
||||
@mixin flex-direction( $args ) {
|
||||
-webkit-flex-direction: $args;
|
||||
flex-direction: $args;
|
||||
}
|
||||
|
||||
// Align Items
|
||||
@mixin align-items( $args ) {
|
||||
-webkit-align-items: $args;
|
||||
align-items: $args;
|
||||
}
|
||||
|
||||
// Justify Content
|
||||
@mixin justify-content( $args ) {
|
||||
-webkit-justify-content: $args;
|
||||
justify-content: $args;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@mixin animation( $args ) {
|
||||
-ms-animation: $args;
|
||||
-webkit-animation: $args;
|
||||
-o-animation: $args;
|
||||
-moz-animation: $args;
|
||||
animation: $args;
|
||||
}
|
||||
|
||||
// Animation Delay
|
||||
@mixin animation-delay( $args ) {
|
||||
-ms-animation-delay: $args;
|
||||
-webkit-animation-delay: $args;
|
||||
-o-animation-delay: $args;
|
||||
-moz-animation-delay: $args;
|
||||
animation-delay: $args;
|
||||
}
|
||||
|
||||
// Transform
|
||||
@mixin transform( $args ) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
-o-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Transition Duration
|
||||
@mixin transition-duration( $args ) {
|
||||
-webkit-transition-duration: $args;
|
||||
-moz-transition-duration: $args;
|
||||
-ms-transition-duration: $args;
|
||||
-o-transition-duration: $args;
|
||||
transition-duration: $args;
|
||||
}
|
||||
|
||||
// Transition Delay
|
||||
@mixin transition-delay( $args ) {
|
||||
-webkit-transition-delay: $args;
|
||||
-moz-transition-delay: $args;
|
||||
-ms-transition-delay: $args;
|
||||
-o-transition-delay: $args;
|
||||
transition-delay: $args;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity( $args ) {
|
||||
-moz-opacity: $args;
|
||||
-webkit-opacity: $args;
|
||||
opacity: $args;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
@mixin border-radius( $args ) {
|
||||
-webkit-border-radius: $args;
|
||||
-moz-border-radius: $args;
|
||||
-ms-border-radius: $args;
|
||||
border-radius: $args;
|
||||
}
|
||||
|
||||
// Box Shadow
|
||||
@mixin box-shadow( $args ) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
}
|
||||
|
||||
// Font Awesome CSS
|
||||
@mixin font-awesome() {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Simple Line Icons CSS
|
||||
@mixin simple-line-icons() {
|
||||
font-family: 'simple-line-icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
letter-spacing: normal;
|
||||
text-rendering: auto;
|
||||
}
|
||||
@@ -0,0 +1,334 @@
|
||||
// Based of Pure forms style
|
||||
// https://github.com/yahoo/pure/blob/master/src/forms/css/forms.css
|
||||
|
||||
form input[type="text"],
|
||||
form input[type="password"],
|
||||
form input[type="email"],
|
||||
form input[type="url"],
|
||||
form input[type="date"],
|
||||
form input[type="month"],
|
||||
form input[type="time"],
|
||||
form input[type="datetime"],
|
||||
form input[type="datetime-local"],
|
||||
form input[type="week"],
|
||||
form input[type="number"],
|
||||
form input[type="search"],
|
||||
form input[type="tel"],
|
||||
form input[type="color"],
|
||||
form select,
|
||||
form textarea {
|
||||
display: inline-block;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
padding: 6px 12px;
|
||||
vertical-align: middle;
|
||||
background-color: transparent;
|
||||
color: $color-2;
|
||||
border: 1px solid $color-10;
|
||||
@include border-radius( 3px );
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
form select {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
form input[type="number"] {
|
||||
max-width: 50px;
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
textarea {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-results-button,
|
||||
input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form textarea {
|
||||
min-height: 150px;
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
border: 1px solid #bbb;
|
||||
line-height: 0;
|
||||
width: 16px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
margin: -3px 10px 0 0;
|
||||
outline: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
clear: none;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
@include box-shadow( inset 0 1px 2px rgba(0,0,0,.1) );
|
||||
@include transition( .05s border-color ease-in-out );
|
||||
}
|
||||
|
||||
input[type=radio]:checked:before,
|
||||
input[type=checkbox]:checked:before {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
line-height: 14px;
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked:before {
|
||||
content: '\f00c';
|
||||
margin-bottom: -1px;
|
||||
color: #13aff0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
form input:not([type]) {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #ccc;
|
||||
@include border-radius( 4px );
|
||||
@include box-shadow( inset 0 1px 3px #ddd );
|
||||
}
|
||||
|
||||
|
||||
/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */
|
||||
/* May be able to remove this tweak as color inputs become more standardized across browsers. */
|
||||
form input[type="color"] {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
|
||||
form input[type="text"]:focus,
|
||||
form input[type="password"]:focus,
|
||||
form input[type="email"]:focus,
|
||||
form input[type="url"]:focus,
|
||||
form input[type="date"]:focus,
|
||||
form input[type="month"]:focus,
|
||||
form input[type="time"]:focus,
|
||||
form input[type="datetime"]:focus,
|
||||
form input[type="datetime-local"]:focus,
|
||||
form input[type="week"]:focus,
|
||||
form input[type="number"]:focus,
|
||||
form input[type="search"]:focus,
|
||||
form input[type="tel"]:focus,
|
||||
form input[type="color"]:focus,
|
||||
form select:focus,
|
||||
form textarea:focus {
|
||||
border-color: $color-13;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
form input:not([type]):focus {
|
||||
border-color: $color-13;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
form input[type="file"]:focus,
|
||||
form input[type="radio"]:focus,
|
||||
form input[type="checkbox"]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
form input[type="checkbox"],
|
||||
form input[type="radio"] {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
form input[type="text"][disabled],
|
||||
form input[type="password"][disabled],
|
||||
form input[type="email"][disabled],
|
||||
form input[type="url"][disabled],
|
||||
form input[type="date"][disabled],
|
||||
form input[type="month"][disabled],
|
||||
form input[type="time"][disabled],
|
||||
form input[type="datetime"][disabled],
|
||||
form input[type="datetime-local"][disabled],
|
||||
form input[type="week"][disabled],
|
||||
form input[type="number"][disabled],
|
||||
form input[type="search"][disabled],
|
||||
form input[type="tel"][disabled],
|
||||
form input[type="color"][disabled],
|
||||
form select[disabled],
|
||||
form textarea[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: #cad2d3;
|
||||
background-color: #eaeded;
|
||||
}
|
||||
|
||||
/*
|
||||
Need to separate out the :not() selector from the rest of the CSS 2.1 selectors
|
||||
since IE8 won't execute CSS that contains a CSS3 selector.
|
||||
*/
|
||||
form input:not([type])[disabled] {
|
||||
cursor: not-allowed;
|
||||
color: #cad2d3;
|
||||
background-color: #eaeded;
|
||||
}
|
||||
form input[readonly],
|
||||
form select[readonly],
|
||||
form textarea[readonly] {
|
||||
color: #777; /* menu text color */
|
||||
border-color: #ccc;
|
||||
background-color: #eee; /* menu hover bg color */
|
||||
}
|
||||
|
||||
form input:focus:invalid,
|
||||
form textarea:focus:invalid,
|
||||
form select:focus:invalid {
|
||||
color: #b94a48;
|
||||
border-color: #e9322d;
|
||||
}
|
||||
form input[type="file"]:focus:invalid:focus,
|
||||
form input[type="radio"]:focus:invalid:focus,
|
||||
form input[type="checkbox"]:focus:invalid:focus {
|
||||
outline-color: #e9322d;
|
||||
}
|
||||
select {
|
||||
width: 100%;
|
||||
/* Normalizes the height; padding is not sufficient. */
|
||||
height: 2.25em;
|
||||
min-height: auto;
|
||||
border: 1px solid #ddd;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
}
|
||||
form select[multiple] {
|
||||
height: auto;
|
||||
}
|
||||
form label {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
form fieldset {
|
||||
margin: 0;
|
||||
padding: .35em 0 .75em;
|
||||
border: 0;
|
||||
}
|
||||
form legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: .3em;
|
||||
padding: .3em 0;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
/*csslint outline-none:false*/
|
||||
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
button[type="submit"],
|
||||
.button,
|
||||
body div.wpforms-container-full .wpforms-form input[type=submit],
|
||||
body div.wpforms-container-full .wpforms-form button[type=submit],
|
||||
body div.wpforms-container-full .wpforms-form .wpforms-page-button {
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 14px 20px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
input[type="button"]:hover,
|
||||
input[type="reset"]:hover,
|
||||
input[type="submit"]:hover,
|
||||
button[type="submit"]:hover,
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:focus,
|
||||
button[type="submit"]:focus,
|
||||
.button:hover,
|
||||
body div.wpforms-container-full .wpforms-form input[type=submit]:hover,
|
||||
body div.wpforms-container-full .wpforms-form button[type=submit]:hover,
|
||||
body div.wpforms-container-full .wpforms-form .wpforms-page-button:hover {
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
input[type="button"]:focus,
|
||||
input[type="reset"]:focus,
|
||||
input[type="submit"]:focus,
|
||||
button[type="submit"]:focus,
|
||||
button:focus,
|
||||
.button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.pure-button[disabled],
|
||||
.pure-button-disabled,
|
||||
.pure-button-disabled:hover,
|
||||
.pure-button-disabled:focus,
|
||||
.pure-button-disabled:active {
|
||||
cursor: not-allowed;
|
||||
@include opacity( .40 );
|
||||
border: none;
|
||||
background-image: none;
|
||||
@include box-shadow( none );
|
||||
}
|
||||
|
||||
/* Firefox: Get rid of the inner focus border */
|
||||
button::-moz-focus-inner,
|
||||
input[type="button"]::-moz-focus-inner,
|
||||
input[type="reset"]::-moz-focus-inner,
|
||||
input[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.pure-button-primary,
|
||||
.pure-button-selected,
|
||||
a.pure-button-primary,
|
||||
a.pure-button-selected {
|
||||
color: #fff;
|
||||
background-color: rgb(0, 120, 231);
|
||||
}
|
||||
|
||||
/* Comment checkbox */
|
||||
.comment-form-cookies-consent {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-size:62.5%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}*,*:before,*:after{@include box-sizing( border-box );}article,aside,details,figcaption,figure,footer,header,main,nav,section{display:block}table{border-collapse:collapse;border-spacing:0;}caption,th,td{font-weight:normal;text-align:left;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}blockquote,q{quotes:none}a:focus{outline: 1.5px solid #323232;}a:hover,a:active{outline:0}a img{border:0}img{max-width:100%;height:auto;}select{max-width:100%}em{font-style: italic;}
|
||||
|
||||
* html {
|
||||
font-size: 100% * ( $font-size / $browser-font-size );
|
||||
}
|
||||
|
||||
html {
|
||||
-ms-overflow-x: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: $font-size;
|
||||
line-height: $base-line-height;
|
||||
color: $body-font-color;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $body-bg-color;
|
||||
}
|
||||
|
||||
.mejs-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
dfn, cite, em, i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid > Main Classes.
|
||||
*/
|
||||
body .oceanwp-row {
|
||||
margin: 0 -10px;
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
margin: 0 0 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.span_1_of_1 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.span_1_of_2 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.span_1_of_3 {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.span_1_of_4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.span_1_of_5 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.span_1_of_6 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.span_1_of_7 {
|
||||
width: 14.28%;
|
||||
}
|
||||
|
||||
.span_1_of_8 {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
.span_1_of_9 {
|
||||
width: 11.11%;
|
||||
}
|
||||
|
||||
.span_1_of_10 {
|
||||
width: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Grid > Clear Floats.
|
||||
*/
|
||||
.count-1,
|
||||
.col-1,
|
||||
.col.first {
|
||||
clear: both;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.isotope-entry {
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* No margin or padding class.
|
||||
*/
|
||||
.no-margin {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Responsive Videos.
|
||||
*/
|
||||
.responsive-video-wrap,
|
||||
.responsive-audio-wrap {
|
||||
iframe, object, embed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-video-shortcode {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.responsive-video-wrap p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Search form shortcode
|
||||
*/
|
||||
form.oceanwp-searchform {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 35px;
|
||||
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 0 40px 0 15px;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
min-width: 40px;
|
||||
height: 60%;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background-color: transparent !important;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
@include transition( all .3s ease );
|
||||
@include transform( translateY(-50%) );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Language Switches.
|
||||
*/
|
||||
.polylang-switcher-shortcode {
|
||||
li {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.flags-and-names li {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text meant only for screen readers.
|
||||
*/
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
font-size: 14px !important;
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
|
||||
|
||||
&:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
@include font-size(0.875);
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
top: 5px;
|
||||
width: auto;
|
||||
z-index: 100000; /* Above WP toolbar. */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Selection Color.
|
||||
*/
|
||||
::selection {
|
||||
color: $selection-font-color;
|
||||
background: $selection-bg-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: $selection-font-color;
|
||||
background: $selection-bg-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet Portrait
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 768px) and (max-width: 959px) {
|
||||
|
||||
/* turn 4 column masonry grids into 2 columns */
|
||||
body .oceanwp-row {
|
||||
.span_1_of_4.col-3.col,
|
||||
.span_1_of_4.col.product:nth-child(2n+3) {
|
||||
margin-left: 0;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
body .oceanwp-row .span_1_of_4.col,
|
||||
body .oceanwp-isotope-grid .span_1_of_4.col {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.col {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,396 @@
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
* without disabling user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of focused elements when they are also in an
|
||||
* active/hover state.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
@include box-sizing( content-box );
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
@include box-sizing( border-box ); /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
figure > img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img[class*="align"],
|
||||
img[class*="attachment-"] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.wp-caption {
|
||||
max-width: 100%;
|
||||
margin-bottom: 24px;
|
||||
img[class*="wp-image-"] {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
font-size: 14px;
|
||||
font-style: italic;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.wp-smiley {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
embed,
|
||||
iframe,
|
||||
object {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.alignfull {
|
||||
margin: 32px 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.alignwide {
|
||||
margin: 32px auto;
|
||||
width: 90%;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
img.aligncenter,
|
||||
.wp-caption.aligncenter {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.alignnone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-bottom: 2.618em;
|
||||
}
|
||||
table th,
|
||||
table td {
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
table th {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
table tr th:first-child,
|
||||
table tr td:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
table tr th:last-child,
|
||||
table tr td:last-child {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.sticky,
|
||||
.bypostauthor {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.col:after, .clr:after, .group:after, dl:after,
|
||||
.left_float:after, .right_float:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.left_float {
|
||||
float: left;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.right_float {
|
||||
float: right;
|
||||
width: 48%;
|
||||
}
|
||||
|
||||
.no_float {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.left_float,
|
||||
.right_float,
|
||||
.no_float {
|
||||
label {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.full {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gallery
|
||||
* Taken from Twenty Seventeen theme.
|
||||
*/
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
margin: 0 0 1.5em;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-1 .gallery-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .gallery-item {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.gallery-item a,
|
||||
.gallery-item a:hover,
|
||||
.gallery-item a:focus {
|
||||
@include box-shadow( none );
|
||||
background: none;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.gallery-item a img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
background-color: $color-16;
|
||||
color: $color-2;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.gallery-columns-7 .gallery-caption,
|
||||
.gallery-columns-8 .gallery-caption,
|
||||
.gallery-columns-9 .gallery-caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
.gallery-item {
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.gallery-columns-1 .gallery-item {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.gallery-columns-2 .gallery-item {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.gallery-columns-3 .gallery-item {
|
||||
max-width: 33.33%;
|
||||
}
|
||||
|
||||
.gallery-columns-4 .gallery-item {
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 48em) {
|
||||
.gallery-columns-5 .gallery-item {
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
.gallery-columns-6 .gallery-item {
|
||||
max-width: 16.66%;
|
||||
}
|
||||
|
||||
.gallery-columns-7 .gallery-item {
|
||||
max-width: 14.28%;
|
||||
}
|
||||
|
||||
.gallery-columns-8 .gallery-item {
|
||||
max-width: 12.5%;
|
||||
}
|
||||
|
||||
.gallery-columns-9 .gallery-item {
|
||||
max-width: 11.11%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,286 @@
|
||||
/**
|
||||
* Set link colors.
|
||||
*/
|
||||
a {
|
||||
color: $link-color;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
a.light {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $link-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
text-decoration: none;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
/**
|
||||
* Headings.
|
||||
*/
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: $heading-font-weight;
|
||||
margin: 0 0 20px;
|
||||
color: $heading-font-color;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.theme-heading {
|
||||
font-size: 14px;
|
||||
letter-spacing: 1.3px;
|
||||
margin: 0 0 20px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.text::before {
|
||||
content: '\f105';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $color-5;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text elements.
|
||||
*/
|
||||
p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
dfn[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
del {
|
||||
vertical-align: baseline;
|
||||
text-decoration: line-through;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
color: #2080ad;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #2080ad;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 20px 40px;
|
||||
padding-left: 20px;
|
||||
border-left-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: $color-5;
|
||||
|
||||
cite {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 0 0 20px;
|
||||
color: #555;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "\2014";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
address {
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 15px 0 15px 20px;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ol {
|
||||
list-style: upper-alpha;
|
||||
}
|
||||
|
||||
ol ol ol {
|
||||
list-style: lower-roman;
|
||||
}
|
||||
|
||||
ol ol ol ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
margin: 0 0 0 25px;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
hr {
|
||||
clear: both;
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
margin: 20px 0;
|
||||
border-top: 1px solid $border-color;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
border-left: 0;
|
||||
|
||||
&.dotted {
|
||||
border-style: dotted;
|
||||
}
|
||||
&.dashed {
|
||||
border-style: dashed;
|
||||
}
|
||||
&.blackborder {
|
||||
border-color: #000;
|
||||
}
|
||||
&.whiteborder {
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Print styles.
|
||||
*/
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
@include box-shadow( none !important );
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a[href]:after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
abbr[title]:after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: .5cm;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
blockquote {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.error404-content {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.error-title {
|
||||
font-size: 46px;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.searchform {
|
||||
max-width: 390px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
font-size: 13px;
|
||||
padding: 14px 26px;
|
||||
margin-top: 60px;
|
||||
|
||||
&:hover {
|
||||
color: $color-1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.error404-content {
|
||||
.searchform {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
#respond {
|
||||
margin-bottom: 20px;
|
||||
|
||||
form {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comment-textarea,
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.comment-form-author {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.comment-form-email {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.comment-form-url {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-submit {
|
||||
float: right;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#comments {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
&.children {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&.empty-closed-comments {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
@include display();
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
|
||||
img.avatar {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-right: 30px;
|
||||
@include border-radius( 50% );
|
||||
}
|
||||
|
||||
.comment-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.comment-link, .comment-meta {
|
||||
font-weight: 600;
|
||||
margin: 5px 0 8px;
|
||||
}
|
||||
|
||||
.comment-link {
|
||||
float: left;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.comment-meta {
|
||||
float: right;
|
||||
text-align: right;
|
||||
font-size: 10px;
|
||||
line-height: 2.5;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
.comment-reply-link, .comment-edit-link {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.comment-author .comment-meta .comment-reply-link {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.comment-author .comment-meta .comment-reply-link:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
#respond #cancel-comment-reply-link {
|
||||
font-size: 10px;
|
||||
color: $color-4;
|
||||
float: right;
|
||||
border: 2px solid $color-9;
|
||||
padding: 3px 10px;
|
||||
@include border-radius( 3px );
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
span.required {
|
||||
position: relative;
|
||||
top: -4px;
|
||||
font-size: 10px;
|
||||
margin-left: 3px;
|
||||
color: #F00;
|
||||
}
|
||||
|
||||
.comment-body p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-comments {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment-navigation {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
.nav-links {
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
float: left;
|
||||
margin-right: 1.5em;
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
float: right;
|
||||
margin-left: 1.5em;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#comments ol.children {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#respond {
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.comment-body img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.comment-link,
|
||||
.comment-meta {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.hasCustomSelect {
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.theme-select {
|
||||
position: relative;
|
||||
border: 1px solid $color-10;
|
||||
color: $color-11;
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
padding: 0 45px 0 15px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&:after {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '\f107';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: block;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $color-4;
|
||||
border-left: 1px solid $color-10;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.post-pagination-wrap {
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50px;
|
||||
|
||||
.post-pagination {
|
||||
margin: 0;
|
||||
|
||||
li a {
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
line-height: 46px;
|
||||
font-size: 20px;
|
||||
color: $color-11;
|
||||
border: 2px solid $color-9;
|
||||
@include border-radius( 50% );
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
.page-header {
|
||||
position: relative;
|
||||
background-color: $color-16;
|
||||
padding: 34px 0;
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.has-transparent-header .page-header {
|
||||
padding: 120px 0 36px 0;
|
||||
}
|
||||
|
||||
body.home .page-header-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: 1.4em;
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
body.breadcrumbs-position-default .page-header-title {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
|
||||
p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.centered-page-header .page-header-title,
|
||||
.centered-minimal-page-header .page-header-title {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Centered
|
||||
*/
|
||||
.centered-page-header {
|
||||
text-align: center;
|
||||
|
||||
.page-header-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Minimal Centered
|
||||
*/
|
||||
.centered-minimal-page-header {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid $color-9;
|
||||
text-align: center;
|
||||
|
||||
.page-header-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Solid Color
|
||||
*/
|
||||
.solid-color-page-header .page-header-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.solid-color-page-header .site-breadcrumbs,
|
||||
.solid-color-page-header .site-breadcrumbs a {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.solid-color-page-header .page-subheading {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/**
|
||||
* Page Header Background Image
|
||||
*/
|
||||
.background-image-page-header {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
height: 400px;
|
||||
background-position: 50% 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.page-header-inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-subheading {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header.background-image-page-header .page-header-title {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-weight: 400;
|
||||
max-width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.background-image-page-header-overlay {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
z-index: 1;
|
||||
@include opacity( 0.5 );
|
||||
}
|
||||
|
||||
/**
|
||||
* Breadcrumbs
|
||||
*/
|
||||
.site-breadcrumbs {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
max-width: 50%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin-top: -16px;
|
||||
font-size: 13px;
|
||||
color: #c6c6c6;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.breadcrumb-sep {
|
||||
margin: 0 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-home.has-text,
|
||||
.breadcrumb-home.has-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.breadcrumb-title {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.site-breadcrumbs.position-under-title,
|
||||
.centered-page-header .site-breadcrumbs,
|
||||
.centered-minimal-page-header .site-breadcrumbs {
|
||||
position: inherit;
|
||||
top: auto;
|
||||
right: auto;
|
||||
margin-top: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.oceanwp-breadcrumb .site-breadcrumbs {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.background-image-page-header .site-breadcrumbs {
|
||||
display: block;
|
||||
position: inherit;
|
||||
max-width: 100%;
|
||||
margin-top: 20px;
|
||||
top: auto;
|
||||
right: auto;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* compatibility with SEOPress */
|
||||
.site-breadcrumbs nav,
|
||||
.site-breadcrumbs ol {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* page title */
|
||||
body.has-breadcrumbs .page-header-title {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Tablet Portrait
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* page header */
|
||||
.site-breadcrumbs {
|
||||
position: inherit;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
max-width: 100%;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
/* Remove fixed background to fix the IOS bug */
|
||||
.page-header {
|
||||
background-attachment: initial !important;
|
||||
}
|
||||
|
||||
/* page header */
|
||||
.page-header-with-background .page-header-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.centered-page-header .page-header-title,
|
||||
.centered-minimal-page-header .page-header-title,
|
||||
.page-header.background-image-page-header .page-header-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.centered-page-header .page-subheading,
|
||||
.centered-minimal-page-header .page-header-subheading,
|
||||
.page-header.background-image-page-header .page-subheading {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.background-image-page-header {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* breadcrumbs */
|
||||
body.has-breadcrumbs .page-header-title {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
ul.page-numbers {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px 0 0;
|
||||
list-style: none;
|
||||
text-align: right;
|
||||
clear: both;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-links {
|
||||
text-align: center;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.page-numbers a,
|
||||
.page-numbers span:not(.elementor-screen-only),
|
||||
.page-links span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 38px;
|
||||
min-width: 38px;
|
||||
line-height: 38px;
|
||||
margin: 0 8px 0 0;
|
||||
text-align: center;
|
||||
color: $color-11;
|
||||
border: 1px solid $border-color;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@include border-radius( 2px );
|
||||
@include transition( all .3s ease );
|
||||
@include box-sizing( content-box );
|
||||
}
|
||||
|
||||
.page-numbers a span:not(.elementor-screen-only) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-numbers a:hover,
|
||||
.page-links a:hover span,
|
||||
.page-numbers.current,
|
||||
.page-numbers.current:hover,
|
||||
.page-links > span {
|
||||
background-color: $color-8;
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
.elementor-pagination .page-numbers.current,
|
||||
.elementor-pagination .page-numbers.current:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.pagination-center {
|
||||
.oceanwp-pagination,
|
||||
.woocommerce-pagination {
|
||||
ul.page-numbers,
|
||||
.page-links {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-left {
|
||||
.oceanwp-pagination,
|
||||
.woocommerce-pagination {
|
||||
ul.page-numbers,
|
||||
.page-links {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* next/prev */
|
||||
.page-jump a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* infinite scroll */
|
||||
.scroller-status,
|
||||
.infinite-scroll-last,
|
||||
.infinite-scroll-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scroller-status {
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
clear: both;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.loader-ellips {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
width: 3.5em;
|
||||
height: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.loader-ellips__dot {
|
||||
display: block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 0.5em;
|
||||
background-color: #333;
|
||||
position: absolute;
|
||||
animation-duration: 0.5s;
|
||||
animation-timing-function: ease;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: 1.3em;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
left: 2.6em;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
animation-name: reveal;
|
||||
}
|
||||
|
||||
&:nth-child(2),
|
||||
&:nth-child(3) {
|
||||
animation-name: slide;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
animation-name: reveal;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes reveal {
|
||||
from { transform: scale(0.001); }
|
||||
to { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
to { transform: translateX(1.3em) }
|
||||
}
|
||||
|
||||
.infinite-scroll-nav {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,146 @@
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* default breakpoint */
|
||||
body.default-breakpoint {
|
||||
#site-logo.has-responsive-logo {
|
||||
.custom-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.responsive-logo-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.is-sticky #site-logo.has-responsive-logo .sticky-logo-link {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-sticky #site-logo.has-sticky-logo .responsive-logo-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#site-header.center-header #site-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#top-bar-nav,
|
||||
#site-navigation-wrap,
|
||||
.oceanwp-social-menu,
|
||||
.after-header-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.center-logo #site-logo {
|
||||
float: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
padding: 0;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#top-bar.has-no-content #top-bar-social {
|
||||
text-align: center;
|
||||
|
||||
&.top-bar-left,
|
||||
&.top-bar-right {
|
||||
position: inherit;
|
||||
left: auto;
|
||||
right: auto;
|
||||
float: none;
|
||||
height: auto;
|
||||
line-height: 1.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical-header-style #outer-wrap {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#site-header.vertical-header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
|
||||
.has-template > #site-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#site-header-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
padding: 0;
|
||||
max-width: 90%;
|
||||
|
||||
> *:not(.oceanwp-mobile-menu-icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> * {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#site-logo {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.oceanwp-mobile-menu-icon {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.vh-closed {
|
||||
.vertical-toggle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-cart-overlay { display: none !important; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
.hide-tablet-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
.hide-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Visibility
|
||||
*------------------------------------*/
|
||||
@media only screen and (min-width: 481px) and (max-width: 767px) {
|
||||
.hide-tablet { display: none !important; }
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.search-results article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.search-entry-inner {
|
||||
@include display();
|
||||
@include align-items( center );
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
min-width: 120px;
|
||||
margin-right: 20px;
|
||||
|
||||
img {
|
||||
@include border-radius( 5px );
|
||||
@include box-shadow( 0 0 5px rgba(0,0,0,0.3) );
|
||||
}
|
||||
}
|
||||
|
||||
.search-entry-title {
|
||||
font-size: 24px;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.search-entry-summary p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.search-entry-readmore a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.search-results article .thumbnail {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
#blog-entries {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.blog-entry.post {
|
||||
position: relative;
|
||||
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
@include opacity( 0 );
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
&:hover .overlay {
|
||||
@include opacity( 1 );
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.blog-entry-header {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.entry-title {
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
margin-bottom: 20px;
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
.thumbnail-caption {
|
||||
font-size: 13px;
|
||||
margin-top: 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
.has-blog-grid {
|
||||
.blog-grid {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
height: auto!important;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry.grid-entry {
|
||||
float: left;
|
||||
|
||||
.blog-entry-inner {
|
||||
padding: 0 20px 20px;
|
||||
border: 1px solid $color-7;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
margin: 0 -20px;
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.blog-entry-header {
|
||||
margin: 20px 0 12px;
|
||||
|
||||
.entry-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
line-height: 1.6;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.blog-entry-readmore {
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1.2;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid;
|
||||
text-transform: capitalize;
|
||||
|
||||
i {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.blog-entry.large-entry {
|
||||
border-bottom: 1px solid $color-9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.blog-entry-readmore {
|
||||
a {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
line-height: 1;
|
||||
border: 1px solid $color-10;
|
||||
padding: 10px 16px;
|
||||
@include border-radius( 2px );
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
ul.meta {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
color: $color-15;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
margin: 0 0 20px;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
line-height: 1.3;
|
||||
|
||||
&:after {
|
||||
content: '-';
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-15;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
color: $color-4;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
ul.meta {
|
||||
margin-bottom: 12px;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
.blog-entry.thumbnail-entry {
|
||||
border-bottom: 1px solid $color-9;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.blog-entry-inner {
|
||||
@include display();
|
||||
@include flex-direction( row );
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include display();
|
||||
@include flex-direction( column );
|
||||
}
|
||||
|
||||
.center {
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include justify-content( center );
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
@include justify-content( flex-end );
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 45%;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link-entry {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left-position .link-entry {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.right-position .link-entry {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.left-position .blog-entry-content {
|
||||
padding-left: 3em;
|
||||
}
|
||||
|
||||
.right-position .blog-entry-content {
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
.blog-entry-category {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1.2em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
color: $color-5;
|
||||
|
||||
&:hover {
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-summary {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.blog-entry-bottom {
|
||||
display: block;
|
||||
border-top: 1px solid $color-7;
|
||||
padding-top: 15px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
line-height: 1.2em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.blog-entry-comments,
|
||||
.blog-entry-comments a,
|
||||
.blog-entry-date {
|
||||
color: #ababab;
|
||||
}
|
||||
|
||||
.blog-entry-comments {
|
||||
float: left;
|
||||
|
||||
i {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-entry-date {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.no-featured-image {
|
||||
.blog-entry-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-position .blog-entry-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.right-position .blog-entry-content {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
.blog-entry.thumbnail-entry {
|
||||
.blog-entry-inner {
|
||||
@include flex-direction( column );
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.blog-entry-content {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.blog-entry-content {
|
||||
margin-top: 15px;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/**
|
||||
* Gallery Format
|
||||
*/
|
||||
.gallery-format {
|
||||
display: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
@include opacity( 0 );
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .slick-prev,
|
||||
&:hover .slick-next {
|
||||
@include opacity( 1 );
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/**
|
||||
* Link Format
|
||||
*/
|
||||
.link-entry {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
font-size: 22px;
|
||||
line-height: 60px;
|
||||
background-color: $color-2;
|
||||
color: $color-1;
|
||||
text-align: center;
|
||||
@include border-radius( 50% );
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail:hover i {
|
||||
background-color: $color-5;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Quote format
|
||||
*/
|
||||
.post-quote-content,
|
||||
.post-quote-author {
|
||||
position: relative;
|
||||
background-color: #13aff0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 20px 30px;
|
||||
line-height: 1.6;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.post-quote-icon {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
font-size: 48px;
|
||||
@include opacity( 0.2 );
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.post-quote-author {
|
||||
background-color: #0b7cac;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 10px 30px;
|
||||
margin-top: 1px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
.single-post .post-quote-wrap {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Single Post Author bio
|
||||
*/
|
||||
#author-bio {
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
|
||||
#author-bio-inner {
|
||||
@include display();
|
||||
}
|
||||
|
||||
.author-bio-avatar,
|
||||
.author-bio-avatar img {
|
||||
@include border-radius( 50% );
|
||||
}
|
||||
|
||||
.author-bio-avatar {
|
||||
min-width: 80px;
|
||||
margin-right: 30px;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 3px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.author-bio-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.author-bio-title {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
margin: 0 0 10px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.author-bio-description p:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.author #author-bio {
|
||||
margin: 0 0 30px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#author-bio .author-bio-avatar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* Single Post Content
|
||||
*/
|
||||
.single .entry-content {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.dropcap {
|
||||
float: left;
|
||||
color: $color-5;
|
||||
font-size: 120px;
|
||||
line-height: 80px;
|
||||
margin-top: 6px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.entry-footer {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* Single Post Next Prev
|
||||
*/
|
||||
.single nav.post-navigation {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
.title {
|
||||
display: block;
|
||||
color: $color-5;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: $color-9;
|
||||
padding-right: 20px;
|
||||
|
||||
i {
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
padding-left: 20px;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.single nav.post-navigation .nav-links {
|
||||
.nav-previous,
|
||||
.nav-next {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-previous {
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,207 @@
|
||||
/**
|
||||
* Single Post
|
||||
*/
|
||||
.single {
|
||||
.thumbnail {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 34px;
|
||||
padding: 0 0 20px;
|
||||
margin: 0 0 15px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
}
|
||||
|
||||
.single-post.content-max-width {
|
||||
#main #content-wrap {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.entry-header,
|
||||
ul.meta,
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4,
|
||||
.entry-content h5,
|
||||
.entry-content h6,
|
||||
.entry-content blockquote,
|
||||
.entry-content p,
|
||||
.post-tags,
|
||||
.entry-share,
|
||||
nav.post-navigation,
|
||||
#author-bio,
|
||||
#related-posts,
|
||||
.comments-area {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.entry-header,
|
||||
ul.meta,
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4,
|
||||
.entry-content h5,
|
||||
.entry-content h6,
|
||||
.entry-content blockquote,
|
||||
.entry-content p,
|
||||
.wp-block-image,
|
||||
.wp-block-gallery,
|
||||
.wp-block-video,
|
||||
.wp-block-quote,
|
||||
.wp-block-text-columns,
|
||||
.wp-block-code,
|
||||
.entry-content ul,
|
||||
.entry-content ol,
|
||||
.wp-block-cover-text,
|
||||
.post-tags,
|
||||
.comments-area {
|
||||
margin: 1.5em auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.entry-content ul,
|
||||
.entry-content ol {
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul.meta {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-quote p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.entry-content blockquote p {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.thumbnail,
|
||||
.wp-block-cover-text.alignwide,
|
||||
.wp-block-image.alignwide,
|
||||
.wp-block-gallery.alignwide,
|
||||
.wp-block-text-columns.alignwide,
|
||||
.entry-share,
|
||||
nav.post-navigation,
|
||||
#author-bio,
|
||||
#related-posts {
|
||||
margin: 1.5em auto;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
.wp-block-cover-text.alignfull,
|
||||
.wp-block-image.alignfull,
|
||||
.wp-block-gallery.alignfull,
|
||||
.wp-block-text-columns.alignfull {
|
||||
margin: 1.5em 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-image.alignfull img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block-image.alignleft,
|
||||
.wp-block-image.alignright {
|
||||
max-width: 350px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-block-image.alignleft {
|
||||
margin-left: calc( 50% - 350px);
|
||||
padding: 14px 36px 14px 0;
|
||||
}
|
||||
|
||||
.wp-block-image.alignright {
|
||||
margin-right: calc( 50% - 350px);
|
||||
padding: 14px 0 14px 36px;
|
||||
}
|
||||
|
||||
figure img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
ul.alignfull,
|
||||
ol.alignfull {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul.alignwide,
|
||||
ol.alignwide {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-cover-image,
|
||||
.wp-block-image {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.wp-block-button a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.wp-block-quote.blocks-quote-style-2 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
border-left-width: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-separator {
|
||||
margin: 30px auto;
|
||||
|
||||
&.is-style-wide {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
.single-post.media-above-content .thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.single-post .entry-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
/**
|
||||
* Single Post Related posts
|
||||
*/
|
||||
#related-posts {
|
||||
margin-top: 30px;
|
||||
padding-top: 30px;
|
||||
border-top: 1px solid $color-9;
|
||||
|
||||
.title-wrap {
|
||||
display: block;
|
||||
color: $color-2;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.6px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 100px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.span_1_of_3 {
|
||||
width: 33.3333333333%;
|
||||
}
|
||||
}
|
||||
|
||||
.related-thumb {
|
||||
display: block;
|
||||
background-color: $color-3;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@include transition( opacity .3s );
|
||||
|
||||
}
|
||||
|
||||
&:hover img {
|
||||
@include opacity( 0.7 );
|
||||
}
|
||||
}
|
||||
|
||||
.related-post-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 12px 12px 3px 12px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
time.published {
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#related-posts {
|
||||
.col {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.col:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Single Post Tags
|
||||
*/
|
||||
.single .post-tags {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin: 30px 0 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* Video/audio format
|
||||
*/
|
||||
.wp-video {
|
||||
width: 100% !important;
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* Footer bottom
|
||||
*/
|
||||
#footer-bottom {
|
||||
background-color: $color-12;
|
||||
padding: 15px 0;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
|
||||
#footer-bottom-menu, #copyright {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#footer-bottom-menu {
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding-left: 15px;
|
||||
|
||||
ul {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
&:after {
|
||||
content: '|';
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
content: '';
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-footer-nav #copyright {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* center footer bottom */
|
||||
#footer-bottom {
|
||||
#copyright,
|
||||
#footer-bottom-menu {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#footer-bottom-menu {
|
||||
margin-bottom: 15px;
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#footer-bottom #footer-bottom-menu li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,187 @@
|
||||
.site-footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footer widgets
|
||||
*/
|
||||
#footer-widgets {
|
||||
background-color: $color-3;
|
||||
padding: 30px 0;
|
||||
margin: 0;
|
||||
|
||||
.footer-box {
|
||||
padding: 0 15px;
|
||||
margin: 0;
|
||||
|
||||
.footer-widget {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-1;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wp-calendar caption,
|
||||
#wp-calendar th,
|
||||
#wp-calendar tbody,
|
||||
.contact-info-widget i,
|
||||
.mailchimp-widget input[type="email"],
|
||||
.posts-thumbnails-widget li,
|
||||
.social-widget li a {
|
||||
border-color: $color-11;
|
||||
}
|
||||
|
||||
.mailchimp-widget input[type="email"]:focus {
|
||||
border-color: $color-5;
|
||||
}
|
||||
|
||||
.tagcloud a {
|
||||
background-color: $color-3;
|
||||
border-color: $color-2;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-14;
|
||||
color: $color-1;
|
||||
border-color: $color-11;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parallax footer
|
||||
*/
|
||||
.parallax-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.has-parallax-footer #main {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.has-parallax-footer:not(.boxed-layout) #main {
|
||||
@include box-shadow( 0 0 40px 0 rgba(0,0,0,0.10) );
|
||||
}
|
||||
|
||||
.has-parallax-footer:not(.separate-layout) #main {
|
||||
background-color: $color-1;
|
||||
}
|
||||
|
||||
.has-parallax-footer.separate-layout #main {
|
||||
background-color: $color-9;
|
||||
}
|
||||
|
||||
.boxed-layout .parallax-footer {
|
||||
width: 1280px;
|
||||
left: auto;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
All Devices under 960px
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 959px) {
|
||||
|
||||
/* margin footer columns */
|
||||
#footer-widgets {
|
||||
.col {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Parallax footer */
|
||||
.has-parallax-footer #main {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.parallax-footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Responsive columns */
|
||||
@media only screen and (min-width: 481px) and (max-width: 768px) {
|
||||
#footer-widgets.tablet-1-col .footer-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-2-col .footer-box {
|
||||
width: 50% !important;
|
||||
|
||||
&:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-3-col .footer-box {
|
||||
width: 33.33% !important;
|
||||
clear: none;
|
||||
|
||||
&:nth-child(4n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.tablet-4-col .footer-box {
|
||||
width: 25% !important;
|
||||
|
||||
&:nth-child(5n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
#footer-widgets.mobile-1-col .footer-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-2-col .footer-box {
|
||||
width: 50% !important;
|
||||
|
||||
&:nth-child(3n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-3-col .footer-box {
|
||||
width: 33.33% !important;
|
||||
clear: none;
|
||||
|
||||
&:nth-child(4n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#footer-widgets.mobile-4-col .footer-box {
|
||||
width: 25% !important;
|
||||
|
||||
&:nth-child(5n) {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* Scroll top
|
||||
*/
|
||||
#scroll-top {
|
||||
display: none;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: $color-1;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
@include border-radius( 2px );
|
||||
text-align: center;
|
||||
z-index: 100;
|
||||
@include box-sizing( content-box );
|
||||
|
||||
> span {
|
||||
line-height: inherit;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
&.scroll-top-left {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 480px) {
|
||||
|
||||
#scroll-top {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
#mobile-dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
@include box-shadow( 0 2px 6px rgba(0,0,0,0.1) );
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba(0,0,0,0.035);
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 12px 40px;
|
||||
text-align: left;
|
||||
|
||||
i,
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
cursor: pointer;
|
||||
color: #555;
|
||||
padding-right: 40px;
|
||||
text-align: center;
|
||||
@include transition( all 0.3s ease );
|
||||
|
||||
&:before {
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
line-height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
border-top: 1px solid rgba(0,0,0,0.035);
|
||||
margin-left: 0;
|
||||
background-color: rgba(0,0,0,0.02);
|
||||
}
|
||||
}
|
||||
|
||||
li.woo-menu-icon,
|
||||
li.search-toggle-li,
|
||||
li.side-panel-li,
|
||||
li a .nav-arrow,
|
||||
.sidebar-box,
|
||||
.widget {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-social-menu {
|
||||
display: block !important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
right: auto !important;
|
||||
left: auto !important;
|
||||
padding: 0 40px !important;
|
||||
margin: 10px 0 !important;
|
||||
|
||||
.social-menu-inner {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
border: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-menu-search {
|
||||
display: block;
|
||||
padding: 20px 40px;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
padding: 6px 45px 6px 12px !important;
|
||||
margin-top: 0 !important;
|
||||
-webkit-box-sizing: inherit;
|
||||
-moz-box-sizing: inherit;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
background-color: transparent !important;
|
||||
color: #555;
|
||||
border: 0;
|
||||
@include transition( all 0.3s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-social #mobile-menu-search {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
#mobile-fullscreen {
|
||||
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: 100000;
|
||||
|
||||
#mobile-fullscreen-inner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
a.close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
|
||||
.close-icon-wrap {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@include transition( opacity .15s linear );
|
||||
|
||||
&:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon-inner,
|
||||
.close-icon-inner::after {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.close-icon-inner {
|
||||
@include transform( rotate(45deg) );
|
||||
}
|
||||
|
||||
.close-icon-inner::after {
|
||||
content: '';
|
||||
display: block;
|
||||
@include transform( rotate(-90deg) );
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding: 50px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
color: $color-1;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: $color-4;
|
||||
}
|
||||
|
||||
i,
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
padding-left: 5px;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-weight: 600;
|
||||
content: '+';
|
||||
}
|
||||
}
|
||||
|
||||
&.open-sub > a > .dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
ul.sub-menu {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li a {
|
||||
font-size: 13px;
|
||||
padding: 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
> li {
|
||||
display: block;
|
||||
|
||||
> a {
|
||||
font-size: 18px;
|
||||
line-height: 1.2;
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-menu-icon,
|
||||
.search-toggle-li,
|
||||
.side-panel-li,
|
||||
.sidebar-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-search {
|
||||
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 {
|
||||
color: $color-1;
|
||||
font-size: 24px;
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
background-color: transparent !important;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/* Fix for the tabs under the header in the edit mode */
|
||||
.fl-builder-edit #site-header,
|
||||
.fl-builder-edit.has-transparent-header #site-header,
|
||||
.elementor-editor-active #site-header { z-index: 1; }
|
||||
.fl-builder-edit #main,
|
||||
.elementor-editor-active #main { z-index: inherit !important; }
|
||||
|
||||
/* Fix the height automatically in the custom header style */
|
||||
#site-header .elementor-section-wrap {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
/* Fix image alignment with caption issue */
|
||||
.elementor-widget-image .elementor-image img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Fix carousel next/prev bug in Elementor */
|
||||
.elementor-slick-slider .slick-prev,
|
||||
.elementor-slick-slider .slick-next {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Fix background hover color on the photoswipe buttons */
|
||||
.pswp__button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* Fix bug with MotoPress */
|
||||
div.motopress-bootstrap-dropdown .dropdown-menu {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
}
|
||||
|
||||
/* Fix problem with Geolocation addon of Caldera form in the Ocean Modal Window */
|
||||
.pac-container {
|
||||
z-index: 100003;
|
||||
}
|
||||
|
||||
/* Remove the Elementor section min height if the no-height class is added */
|
||||
.no-height .elementor-column {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* WooCommerce issues with Elementor Pro */
|
||||
body .elementor-element.elementor-wc-products ul.products li.product .onsale {
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
body .elementor-element.elementor-wc-products ul.products li.product.circle-sale .onsale {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 959px) {
|
||||
.elementor-element.elementor-wc-products ul.products li.product {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix parallax footer issue in the Elementor editor */
|
||||
.elementor-editor-active .parallax-footer { z-index: -1; }
|
||||
|
||||
/* Fix checkbox issue in Elementor */
|
||||
.elementor-field-type-acceptance .elementor-field-subgroup .elementor-field-option input[type="checkbox"] {
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
.mfp-bg {
|
||||
z-index: 104200;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.mfp-wrap {
|
||||
z-index: 104300;
|
||||
}
|
||||
|
||||
/* Zoom effect */
|
||||
.mfp-with-zoom {
|
||||
.mfp-container,
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
@include transition( all .3s ease-out );
|
||||
}
|
||||
|
||||
&.mfp-ready {
|
||||
.mfp-container {
|
||||
opacity: 1;
|
||||
}
|
||||
&.mfp-bg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.mfp-removing {
|
||||
.mfp-container,
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mfp-zoom-out-cur {
|
||||
& {
|
||||
cursor: -moz-default;
|
||||
cursor: -webkit-default;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.mfp-image-holder .mfp-close {
|
||||
width: 20px;
|
||||
cursor: -moz-pointer;
|
||||
cursor: -webkit-pointer;
|
||||
cursor: pointer;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
}
|
||||
|
||||
/* Fade effect */
|
||||
.mfp-fade {
|
||||
&.mfp-bg {
|
||||
opacity: 0;
|
||||
@include transition( all .15s ease-out );
|
||||
|
||||
&.mfp-ready {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&.mfp-removing {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.mfp-wrap {
|
||||
.mfp-content {
|
||||
opacity: 0;
|
||||
@include transition( all .15s ease-out );
|
||||
}
|
||||
|
||||
&.mfp-ready .mfp-content {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.mfp-removing .mfp-content {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
#sidr-close,
|
||||
.sidebar-mobile #mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#sidr {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
z-index: 999999;
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
padding-bottom: 30px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
background-color: $color-1;
|
||||
color: $color-11;
|
||||
-webkit-touch-callout: none;
|
||||
user-select: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr.right {
|
||||
left: auto;
|
||||
right: -300px;
|
||||
}
|
||||
|
||||
.sidr.left {
|
||||
left: -300px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.sidr a {
|
||||
color: $color-11;
|
||||
}
|
||||
|
||||
.sidr a:hover,
|
||||
.sidr-class-dropdown-toggle:hover,
|
||||
.sidr-class-menu-item-has-children.active > a,
|
||||
.sidr-class-menu-item-has-children.active > a > .sidr-class-dropdown-toggle {
|
||||
color: $color-5;
|
||||
}
|
||||
|
||||
.sidr-class-clr:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
a.sidr-class-toggle-sidr-close {
|
||||
display: block;
|
||||
background-color: $color-8;
|
||||
color: $color-2;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
padding: 20px;
|
||||
letter-spacing: 0.6px;
|
||||
text-transform: uppercase;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
padding-right: 8px;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu,
|
||||
.sidr-class-fs-dropdown-menu {
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.035);
|
||||
margin-left: 0;
|
||||
background-color: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.035);
|
||||
}
|
||||
|
||||
&.sidr-class-left-menu li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
> li:first-child {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.035);
|
||||
}
|
||||
|
||||
li a {
|
||||
padding: 12px 20px;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li a.sidr-class-sf-with-ul {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
ul li:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-top-bar-menu > li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.sidr-class-menu-item-has-children {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu li.sidr-class-menu-item-has-children > a {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-toggle {
|
||||
font-size: 11px;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
color: $color-11;
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
text-align: center;
|
||||
@include transition( all .3s ease );
|
||||
|
||||
&:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '+';
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu {
|
||||
li.active > a > .sidr-class-dropdown-toggle:before {
|
||||
content: '-';
|
||||
}
|
||||
|
||||
ul a:before {
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
content: '\f105';
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
ul ul a:before {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
ul ul ul a:before {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidr-class-middle-site-logo,
|
||||
.sidr #searchform-header-replace-close,
|
||||
.sidr #sidr-id-searchform-overlay,
|
||||
.sidr .sidr-class-nav-arrow,
|
||||
.sidr-class-sidebar-box,
|
||||
.sidr-class-mega-cat .sidr-class-dropdown-toggle,
|
||||
.sidr-class-mega-cat .sidr-class-megamenu,
|
||||
.sidr-class-elementor {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.sidr-class-dropdown-menu li.sidr-class-menu-item-has-children.sidr-class-mega-cat > a {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.sidr-class-dropdown-menu a i {
|
||||
font-size: inherit !important;
|
||||
vertical-align: initial !important;
|
||||
margin-right: 10px;
|
||||
|
||||
&.after {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* WPML img */
|
||||
.sidr-class-wpml-ls-flag {
|
||||
margin-right: 10px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.oceanwp-sidr-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
#mobile-menu-search,
|
||||
.sidr-class-woo-cart-link,
|
||||
.sidr-class-search-toggle-li,
|
||||
#sidr-id-searchform-dropdown,
|
||||
#sidr-id-searchform-header-replace {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidr-class-mobile-searchform {
|
||||
position: relative;
|
||||
margin: 30px 20px 0;
|
||||
|
||||
input {
|
||||
padding: 6px 45px 6px 12px !important;
|
||||
margin-top: 0 !important;
|
||||
@include box-sizing( inherit );
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
background-color: transparent !important;
|
||||
color: $color-11;
|
||||
border: 0;
|
||||
@include transition( all .3s ease-in-out );
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Social */
|
||||
.sidr-class-social-menu-inner ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-bar {
|
||||
#sidr,
|
||||
.oceanwp-sidr-overlay
|
||||
{
|
||||
top: 32px;
|
||||
height: -webkit-calc(100% - 32px);
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.admin-bar {
|
||||
#sidr,
|
||||
.oceanwp-sidr-overlay
|
||||
{
|
||||
top: 46px;
|
||||
height: -webkit-calc(100% - 46px);
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
#wpadminbar {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
/* Arrows */
|
||||
.slick-prev,
|
||||
.slick-next {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
width: 30px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
font-size: 20px;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
-webkit-border-radius: 0;
|
||||
-moz-border-radius: 0;
|
||||
-ms-border-radius: 0;
|
||||
border-radius: 0;
|
||||
z-index: 10;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-ms-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.slick-prev:hover, .slick-prev:focus,
|
||||
.slick-next:hover,
|
||||
.slick-next:focus {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.slick-prev {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-prev {
|
||||
right: auto;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-prev span:before {
|
||||
content: '\f105';
|
||||
}
|
||||
|
||||
.slick-next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-next {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .slick-next span:before {
|
||||
content: '\f104';
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.slick-dotted.slick-slider {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.slick-dots {
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
list-style: none;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slick-dots li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-dots li button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
display: block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
outline: none;
|
||||
line-height: 0px;
|
||||
font-size: 0px;
|
||||
color: transparent;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slick-dots li button:hover, .slick-dots li button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
|
||||
-moz-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slick-dots li button:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: "•";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-family: "slick";
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
-moz-opacity: 0.25;
|
||||
-webkit-opacity: 0.25;
|
||||
opacity: 0.25;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.slick-dots li.slick-active button:before {
|
||||
color: black;
|
||||
-moz-opacity: 0.75;
|
||||
-webkit-opacity: 0.75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.widget-area {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
margin-bottom: 40px;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.widget-title {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
color: $color-2;
|
||||
border-width: 0 0 0 3px;
|
||||
border-style: solid;
|
||||
border-color: $color-5;
|
||||
letter-spacing: 1px;
|
||||
padding-left: 15px;
|
||||
margin: 0 0 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
/**
|
||||
* Widgets > Borders
|
||||
*/
|
||||
.oceanwp-widget-recent-posts-li,
|
||||
.widget_categories li,
|
||||
.widget_recent_entries li,
|
||||
.widget_archive li,
|
||||
.widget_recent_comments li,
|
||||
.widget-recent-posts-icons li,
|
||||
.site-footer .widget_nav_menu li {
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid $color-7;
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid $color-7;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#main .widget_nav_menu li a:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* Top Bar Content
|
||||
*/
|
||||
#top-bar-content {
|
||||
strong {
|
||||
color: $color-2;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: $color-11;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background-color: transparent;
|
||||
padding: 5px;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
border-color: rgba(0, 0, 0, 0.2);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
#lang_sel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 3px;
|
||||
margin-right: 10px;
|
||||
z-index: 99;
|
||||
}
|
||||
}
|
||||
|
||||
#topbar-template {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-wrap #lang_sel ul ul {
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.top-bar-right .polylang-switcher-shortcode {
|
||||
float: right;
|
||||
margin: 0;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.top-bar-left .polylang-switcher-shortcode {
|
||||
float: left;
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar-content, #top-bar-social-alt {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#top-bar #lang_sel {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
body.rtl #top-bar #lang_sel {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/**
|
||||
* Top Bar Menu
|
||||
*/
|
||||
.top-bar-left.has-content #top-bar-nav,
|
||||
.top-bar-right.has-content #top-bar-nav {
|
||||
margin: 0;
|
||||
margin-right: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#top-bar-nav,
|
||||
#top-bar-nav > li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-content.top-bar-centered #top-bar-nav,
|
||||
#top-bar-content.top-bar-centered #top-bar-nav > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
|
||||
#top-bar-nav > ul > li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
a .nav-arrow {
|
||||
margin-left: 4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar #top-bar-nav > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#top-bar-nav {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
/**
|
||||
* Top Bar Social
|
||||
*/
|
||||
#top-bar-social {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
color: $color-13;
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.top-bar-left li:first-child a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&.top-bar-right li:last-child a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
li a {
|
||||
&.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; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Right
|
||||
*/
|
||||
#top-bar-social.top-bar-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Left
|
||||
*/
|
||||
#top-bar-social.top-bar-left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Top Bar Social Centered
|
||||
*/
|
||||
#top-bar-social.top-bar-centered {
|
||||
padding-top: 15px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar-social {
|
||||
text-align: center;
|
||||
|
||||
&.top-bar-left,
|
||||
&.top-bar-right {
|
||||
position: inherit;
|
||||
left: auto;
|
||||
right: auto;
|
||||
float: none;
|
||||
height: auto;
|
||||
line-height: 1.5em;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
#top-bar-wrap {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid $color-9;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
#top-bar {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
#top-bar-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.top-bar-centered {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*------------------------------------*
|
||||
Phone Portrait and Landscape
|
||||
*------------------------------------*/
|
||||
@media only screen and (max-width: 767px) {
|
||||
|
||||
#top-bar {
|
||||
padding: 20px 0;
|
||||
|
||||
> div:nth-child(2) {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
float: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
#top-bar-wrap {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/*!
|
||||
* Project : OceanWP WordPress Theme
|
||||
* Purpose : EDD Tweaks
|
||||
* Author : Nick
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
@import "config";
|
||||
|
||||
// Mixins
|
||||
@import "mixins";
|
||||
|
||||
@import "edd/edd";
|
||||
@import "edd/edd-cart";
|
||||
@@ -0,0 +1,319 @@
|
||||
/*------------------------------------------------------------------
|
||||
Easy Digital Downloads Cart
|
||||
-------------------------------------------------------------------*/
|
||||
.current-shop-items-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: -20px;
|
||||
background-color: #fff;
|
||||
z-index: 10000;
|
||||
border-top: 3px solid transparent;
|
||||
text-align: left;
|
||||
@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
|
||||
width: 350px;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( all 0.25s ease-in-out );
|
||||
|
||||
.widgettitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.edd-cart-number-of-items{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.eddmenucart-toggle-drop_down:hover,
|
||||
.show-cart .eddmenucart-toggle-drop_down {
|
||||
.current-shop-items-dropdown {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
.owp-qv-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.boxed-layout .current-shop-items-dropdown {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.edd-cart-empty{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.current-shop-items-dropdown{
|
||||
|
||||
.widget_edd_cart_widget {
|
||||
|
||||
padding: 10px;
|
||||
|
||||
li {
|
||||
padding: 7px 10px;
|
||||
min-height: 100%;
|
||||
|
||||
&.edd_total {
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.edd-cart-item-title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.edd-cart-item-price {
|
||||
color: #b2b2b2;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.edd-cart-item-separator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.edd-remove-from-cart {
|
||||
line-height: 30px;
|
||||
color: #b3b3b3;
|
||||
float: right;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edd_total {
|
||||
background-color: #fafafa;
|
||||
border-top-width: 0;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #797979;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
.cart-total {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.edd_checkout{
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-family: inherit;
|
||||
background-color: #13aff0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 14px 20px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
-ms-transition: all 0.3s ease;
|
||||
-o-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* Cart spacious style */
|
||||
.eddmenucart-toggle-drop_down.spacious{
|
||||
.owp-mini-cart {
|
||||
padding: 20px;
|
||||
|
||||
.widget_edd_cart_widget ul li{
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.edd_total {
|
||||
padding:20px;
|
||||
}
|
||||
|
||||
.edd_checkout a{
|
||||
padding: 14px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.eddmenucart-details{
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/* Cart bag style */
|
||||
.bag-style {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.eddmenucart-total {
|
||||
margin-right: 7px;
|
||||
|
||||
span {
|
||||
color: $color-2;
|
||||
}
|
||||
}
|
||||
|
||||
.eddmenucart-cart-icon {
|
||||
display: inline-block;
|
||||
|
||||
.eddmenucart-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
line-height: 1.7em;
|
||||
font-weight: bold;
|
||||
border: 2px solid $color-2;
|
||||
color: $color-2;
|
||||
padding: 0 3px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@include transition( all .2s ease-in-out );
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid $color-2;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom: 0;
|
||||
@include transition( all .2s ease-in-out );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simple-style.eddmenucart{
|
||||
.edd-cart-quantity.count{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
font-weight: 600;
|
||||
padding: 3px 5px;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-ms-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
background-color: #13aff0;
|
||||
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -3px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 4px;
|
||||
border-style: solid solid solid none;
|
||||
border-width: 5px 5px 5px medium;
|
||||
border-top-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-color: #13aff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bag-style:hover .eddmenucart-cart-icon .eddmenucart-container,
|
||||
.show-cart .eddmenucart-cart-icon .eddmenucart-container {
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
border-color: $color-5;
|
||||
|
||||
&:after {
|
||||
border-color: $color-5;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
/** Mobile Fixes **/
|
||||
#mobile-fullscreen,
|
||||
#mobile-dropdown{
|
||||
.owp-mini-cart{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mobile-dropdown{
|
||||
.edd-menu-icon{
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#sidr{
|
||||
.sidr-class-edd-cart-number-of-items{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidr-class-eddmenucart-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
line-height: 1.7em;
|
||||
font-weight: bold;
|
||||
border: 2px solid $color-2;
|
||||
color: $color-2;
|
||||
padding: 0 3px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@include transition( all .2s ease-in-out );
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid $color-2;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom: 0;
|
||||
@include transition( all .2s ease-in-out );
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,203 @@
|
||||
.editor-post-title__block .editor-post-title__input {
|
||||
font-size: 30px;
|
||||
font-size: 2rem;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.editor-block-list__block {
|
||||
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
margin: 0 0 20px;
|
||||
color: #333;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 23px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.theme-heading {
|
||||
font-size: 14px;
|
||||
letter-spacing: 1.3px;
|
||||
margin: 0 0 20px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.text::before {
|
||||
content: '\f105';
|
||||
font-family: 'Font Awesome 5 Free';
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #13aff0;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
dfn[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
del {
|
||||
vertical-align: baseline;
|
||||
text-decoration: line-through;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
color: #2080ad;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
code {
|
||||
color: #2080ad;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin: 20px 40px;
|
||||
padding-left: 20px;
|
||||
border-left-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: #13aff0;
|
||||
|
||||
cite {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 0 0 20px;
|
||||
color: #555;
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: "\2014";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
q:before,
|
||||
q:after,
|
||||
blockquote:before,
|
||||
blockquote:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
address {
|
||||
display: block;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin: 15px 0 15px 0;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ol {
|
||||
list-style: upper-alpha;
|
||||
}
|
||||
|
||||
ol ol ol {
|
||||
list-style: lower-roman;
|
||||
}
|
||||
|
||||
ol ol ol ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
|
||||
li ul,
|
||||
li ol {
|
||||
margin: 0 0 0 25px;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.mce-content-body {
|
||||
a {
|
||||
color: #0550f7;
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
}
|
||||
}
|
||||
|
||||
a.light {
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
}
|
||||
}
|
||||
|
||||
a, a:hover, a:focus {
|
||||
text-decoration: none;
|
||||
-webkit-transition: all .3s ease;
|
||||
-moz-transition: all .3s ease;
|
||||
-ms-transition: all .3s ease;
|
||||
-o-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.editor-writing-flow {
|
||||
height: fit-content;
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Hover Style
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Display Flex
|
||||
@mixin display() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flex Wrap
|
||||
@mixin flex-wrap( $args ) {
|
||||
-ms-flex-wrap: $args;
|
||||
-webkit-flex-wrap: $args;
|
||||
flex-wrap: $args;
|
||||
}
|
||||
|
||||
// Align Items
|
||||
@mixin align-items( $args ) {
|
||||
-webkit-align-items: $args;
|
||||
align-items: $args;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@mixin animation( $args ) {
|
||||
-ms-animation: $args;
|
||||
-webkit-animation: $args;
|
||||
-o-animation: $args;
|
||||
-moz-animation: $args;
|
||||
animation: $args;
|
||||
}
|
||||
|
||||
// Transform
|
||||
@mixin transform( $args ) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
-o-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Transition Delay
|
||||
@mixin transition-delay( $args ) {
|
||||
-webkit-transition-delay: $args;
|
||||
-moz-transition-delay: $args;
|
||||
-ms-transition-delay: $args;
|
||||
-o-transition-delay: $args;
|
||||
transition-delay: $args;
|
||||
}
|
||||
|
||||
// Box Shadow
|
||||
@mixin box-shadow( $args ) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
}
|
||||
|
||||
.woocommerce ul.products {
|
||||
li.owp-content-left.product.has-rating .woo-entry-inner .star-rating {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
li.owp-content-right.product.has-rating .woo-entry-inner .star-rating {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
li.product:not(.product-category) {
|
||||
overflow: inherit;
|
||||
padding-bottom: 0;
|
||||
|
||||
.product-inner li.image-wrap {
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tinv-wraper.tinv-wishlist {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.image-wrap .tinv-wraper.tinv-wishlist {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.woo-entry-buttons {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
margin: 0;
|
||||
z-index: 99;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
opacity: 0;
|
||||
@include transform( translatex(25px) );
|
||||
@include transition( all .4s );
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.woo-wishlist-btn {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@include transition-delay( .15s );
|
||||
}
|
||||
|
||||
.tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart:before, .woocommerce ul.products li.product a.tinvwl-button.tinvwl_add_to_wishlist_button.tinvwl-icon-heart:before, .woocommerce-page ul.products li.product a.tinvwl-button.tinvwl-icon-heart.tinvwl_add_to_wishlist_button:before, a.sidr-class-wishlist_products_counter.sidr-class-top_wishlist-heart:before, a.wishlist_products_counter.top_wishlist-heart:before, span.wishlist_products_counter.top_wishlist-heart:before {
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
.tinvwl_add_to_wishlist-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tinv-wraper.tinv-wishlist {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
visibility: visible;
|
||||
-moz-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
color: #444;
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
@include transition( .3s all );
|
||||
@include box-shadow( 0 0 15px rgba(0,0,0,.1) );
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
}
|
||||
|
||||
&.owp-quick-view {
|
||||
position: relative;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
padding: 0;
|
||||
letter-spacing: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
|
||||
i {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
margin: 0;
|
||||
vertical-align: inherit;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
i,
|
||||
a:before {
|
||||
opacity: 1;
|
||||
@include transition( opacity .2s ease );
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 1px solid rgba(0, 0, 0, 0.4);
|
||||
border-left-color: #000000;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
margin-left: -9px;
|
||||
margin-top: -9px;
|
||||
@include transition( opacity .2s ease );
|
||||
}
|
||||
}
|
||||
|
||||
&.loading {
|
||||
i,
|
||||
a:before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
a:after {
|
||||
opacity: 1;
|
||||
@include animation( loader 450ms infinite linear );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-inner:hover .woo-entry-buttons li {
|
||||
opacity: 1;
|
||||
@include transform( translatex(0) );
|
||||
}
|
||||
|
||||
.image-wrap .button {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0;
|
||||
background-color: #13aff0;
|
||||
color: #ffffff;
|
||||
border: 0;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
z-index: 99;
|
||||
@include transform( translateY(40px) );
|
||||
@include transition( all .6s );
|
||||
|
||||
&:hover {
|
||||
background-color: #0b7cac;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.product-inner .added_to_cart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-inner:hover .button {
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
.product-inner {
|
||||
z-index: 1;
|
||||
@include transition( all .6s ease );
|
||||
|
||||
li {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 0;
|
||||
|
||||
&.title,
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li.woo-desc {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-entry-image a {
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
margin-left: -19px;
|
||||
margin-top: -19px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border: 1px solid rgba(0,0,0,0.4);
|
||||
border-left-color: #000000;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
@include transition( opacity .2s ease );
|
||||
}
|
||||
|
||||
&.loading:after {
|
||||
opacity: 1;
|
||||
@include animation( loader 450ms infinite linear );
|
||||
}
|
||||
}
|
||||
|
||||
.woo-product-info {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
padding: 20px 15px;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.woo-product-gallery {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 90px;
|
||||
background-color: #fff;
|
||||
padding: 12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
@include transition( all .6s ease );
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.active a,
|
||||
a:hover {
|
||||
border-color: #13aff0;
|
||||
}
|
||||
}
|
||||
|
||||
.product-inner {
|
||||
&:hover {
|
||||
.woo-product-gallery {
|
||||
left: -90px;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -90px;
|
||||
@include box-shadow( 0 0 15px rgba(0,0,0,.1) );
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@include transition( all .6s ease );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes loader {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loader {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* List view */
|
||||
.woocommerce ul.products.list li.product {
|
||||
padding-bottom: 20px;
|
||||
|
||||
.woo-entry-image,
|
||||
.product-entry-slider-wrap {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.woo-entry-inner {
|
||||
width: 100%;
|
||||
@include display();
|
||||
@include flex-wrap( wrap );
|
||||
@include align-items( center );
|
||||
|
||||
li.image-wrap {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 32%;
|
||||
margin: 0 3% 0 0;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.woo-product-info {
|
||||
position: relative;
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-rating .woo-entry-inner .woo-product-info .star-rating {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
body.rtl {
|
||||
&.woocommerce,
|
||||
.woocommerce {
|
||||
ul.products li.product:not(.product-category) {
|
||||
.product-inner:hover {
|
||||
z-index: 2;
|
||||
|
||||
.woo-entry-buttons li {
|
||||
@include transform( translatex(0) );
|
||||
}
|
||||
}
|
||||
|
||||
.woo-entry-buttons {
|
||||
left: 15px;
|
||||
right: auto;
|
||||
|
||||
li {
|
||||
@include transform( translatex(-25px) );
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrap .button {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.woo-product-gallery {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.product-inner:hover {
|
||||
.woo-product-gallery {
|
||||
right: -90px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: -90px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.products.list li.product .woo-entry-inner {
|
||||
li.image-wrap {
|
||||
margin: 0 0 0 3%;
|
||||
}
|
||||
|
||||
.woo-product-info {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.products .product .tinv-wraper.tinv-wishlist {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.woocommerce ul.products li.product:not(.product-category) .product-inner:hover {
|
||||
.woo-product-gallery {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*!
|
||||
* Project : OceanWP WordPress Theme
|
||||
* Purpose : LearnDash LMS Tweaks
|
||||
* Author : Nick
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
@import "config";
|
||||
|
||||
// Mixins
|
||||
@import "mixins";
|
||||
|
||||
@import "learndash/learndash";
|
||||
@@ -0,0 +1,272 @@
|
||||
/** Buttons **/
|
||||
.btn-join,
|
||||
#btn-join,
|
||||
.learndash_checkout_buttons input.btn-join[type="button"],
|
||||
a#quiz_continue_link{
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 14px 20px;
|
||||
border: 0;
|
||||
@include border-radius(3px);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
.btn-join:hover,
|
||||
.btn-join:focus,
|
||||
.btn-join:active,
|
||||
.btn-join:visited,
|
||||
.btn-join.active,
|
||||
#btn-join:hover,
|
||||
#btn-join:focus,
|
||||
a#quiz_continue_link:hover,
|
||||
.learndash_checkout_buttons input.btn-join[type="button"]:hover,
|
||||
a#quiz_continue_link:focus{
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
#learndash_lessons #lesson_heading,
|
||||
#learndash_profile .learndash_profile_heading,
|
||||
#learndash_quizzes #quiz_heading,
|
||||
#learndash_lesson_topics_list div > strong{
|
||||
background: #2295ff;
|
||||
color: #fff;
|
||||
padding: 10px;
|
||||
font-weight: $heading-font-weight;
|
||||
@include border-radius(0);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#learndash_lessons h4 > a:hover,
|
||||
#learndash_quizzes h4 > a:hover,
|
||||
#learndash_lesson_topics_list ul > li > span.topic_item:hover{
|
||||
background: none;
|
||||
}
|
||||
|
||||
.learndash,
|
||||
#learndash_profile {
|
||||
|
||||
.completed,
|
||||
.notcompleted{
|
||||
position: relative;
|
||||
background: 0 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.completed:before,
|
||||
.notcompleted:before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
display: inline-block;
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: 20px;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f058";
|
||||
text-indent: 0;
|
||||
color: #068806;
|
||||
}
|
||||
|
||||
.notcompleted:before{
|
||||
content: "\f111";
|
||||
color: $color-15;
|
||||
}
|
||||
}
|
||||
|
||||
.learndash_navigation_lesson_topics_list .topic-completed span,
|
||||
.learndash_navigation_lesson_topics_list .topic-notcompleted span,
|
||||
.learndash_navigation_lesson_topics_list ul .topic-completed span,
|
||||
.learndash_navigation_lesson_topics_list ul .topic-notcompleted span,
|
||||
.learndash_topic_dots .topic-completed span,
|
||||
.learndash_topic_dots .topic-notcompleted span,
|
||||
.learndash_topic_dots ul .topic-completed span,
|
||||
.learndash_topic_dots ul .topic-notcompleted span{
|
||||
background: 0 0;
|
||||
|
||||
&:before{
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: 20px;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f058";
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#learndash_course_content .learndash_topic_dots ul>li,
|
||||
#learndash_course_content .learndash_topic_dots ul>li.nth-of-type-odd,
|
||||
#learndash_course_content .learndash_topic_dots ul>li:hover{
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.learndash_topic_dots ul .topic-completed span,
|
||||
.learndash_topic_dots ul .topic-notcompleted span{
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#learndash_lessons a,
|
||||
#learndash_quizzes a,
|
||||
.expand_collapse a,
|
||||
.learndash_topic_dots a,
|
||||
.learndash_topic_dots a > span,
|
||||
#learndash_lesson_topics_list span a,
|
||||
#learndash_profile a,
|
||||
#learndash_profile .profile_edit_profile a,
|
||||
#learndash_profile a span,
|
||||
#learndash_profile div,
|
||||
#learndash_profile .expand_collapse a {
|
||||
font-family: inherit;
|
||||
font-weight: $body-font-weight;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
#lessons_list > div > div,
|
||||
#course_list > div > div,
|
||||
#quiz_list > div > div,
|
||||
.single-sfwd-lessons #learndash_lesson_topics_list ul > li > span.sn,
|
||||
.singular-sfwd-lessons #learndash_lesson_topics_list ul > li > span.sn{
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
#learndash_profile{
|
||||
.list_arrow.collapse,
|
||||
.list_arrow.expand{
|
||||
background: 0 0;
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
color: $color-15;
|
||||
|
||||
&:before{
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: 20px;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f152";
|
||||
}
|
||||
}
|
||||
|
||||
.list_arrow.expand{
|
||||
&:before{
|
||||
content: "\f150";
|
||||
}
|
||||
}
|
||||
|
||||
.learndash-course-link,
|
||||
.learndash-course-status,
|
||||
.learndash-course-certificate{
|
||||
a{
|
||||
line-height: inherit;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.course_progress{
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.flip{
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#lessons_list > div h4 > a,
|
||||
#course_list > div h4 > a,
|
||||
#quiz_list > div h4 > a {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.ld-course-list-content{
|
||||
.ld-entry-content img{
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Shortcodes **/
|
||||
body{
|
||||
.thumbnail.course .ld_course_grid_price.ribbon-enrolled{
|
||||
background-color: $color-5;
|
||||
}
|
||||
|
||||
dd.course_progress{
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
#ld_course_list .btn{
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 14px 20px;
|
||||
border: 0;
|
||||
@include border-radius(3px);
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
#ld_course_list .btn-primary:hover,
|
||||
#ld_course_list .btn-primary:focus,
|
||||
#ld_course_list .btn-primary:active,
|
||||
#ld_course_list .btn-primary.active,
|
||||
#ld_course_list .open .dropdown-toggle.btn-primary{
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL */
|
||||
body.rtl {
|
||||
.learndash,
|
||||
#learndash_profile {
|
||||
.completed:before,
|
||||
.notcompleted:before {
|
||||
left: 20px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.learndash_navigation_lesson_topics_list .topic-completed span,
|
||||
.learndash_navigation_lesson_topics_list .topic-notcompleted span,
|
||||
.learndash_navigation_lesson_topics_list ul .topic-completed span,
|
||||
.learndash_navigation_lesson_topics_list ul .topic-notcompleted span,
|
||||
.learndash_topic_dots .topic-completed span,
|
||||
.learndash_topic_dots .topic-notcompleted span,
|
||||
.learndash_topic_dots ul .topic-completed span,
|
||||
.learndash_topic_dots ul .topic-notcompleted span{
|
||||
&:before{
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Shortcodes **/
|
||||
body{
|
||||
dd.course_progress{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
/*!
|
||||
* Project : OceanWP WordPress Theme
|
||||
* Purpose : LifterLMS Tweaks
|
||||
* Author : Nick
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
@import "config";
|
||||
|
||||
// Mixins
|
||||
@import "mixins";
|
||||
|
||||
@import "llms/llms";
|
||||
@@ -0,0 +1,296 @@
|
||||
/** Buttons **/
|
||||
.llms-button-action,
|
||||
.llms-button-secondary,
|
||||
.llms-field-button,
|
||||
.llms-button-primary {
|
||||
display: inline-block;
|
||||
font-family: inherit;
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
padding: 14px 20px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 1;
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
.llms-button-action:hover,
|
||||
.llms-button-secondary:hover,
|
||||
.llms-field-button:hover,
|
||||
.llms-button-primary:hover {
|
||||
background-color: $color-6;
|
||||
color: $color-1;
|
||||
}
|
||||
|
||||
.llms-button-action:focus,
|
||||
.llms-button-secondary:focus,
|
||||
.llms-field-button:focus,
|
||||
.llms-button-primary:focus {
|
||||
background-color: $color-6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/** Tables **/
|
||||
.lifterlms {
|
||||
thead td,
|
||||
th {
|
||||
border: 1px solid #eee;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
}
|
||||
thead td{
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
/** Courses Page **/
|
||||
.llms-student-dashboard{
|
||||
|
||||
.llms-sd-nav{
|
||||
.llms-sep{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.llms-sd-item{
|
||||
padding: 0 15px 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** Course Page **/
|
||||
.llms-syllabus-wrapper{
|
||||
|
||||
margin: 15px 0;
|
||||
|
||||
.llms-section-title{
|
||||
background: #2295ff;
|
||||
color: #fff;
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.llms-lesson-preview{
|
||||
width: auto;
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
|
||||
.llms-lesson-counter,
|
||||
.llms-lesson-complete{
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.llms-lesson-complete{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.llms-meta-info{
|
||||
|
||||
.llms-meta p{
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.llms-meta {
|
||||
span, a{
|
||||
color: #929292;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-course .llms_review{
|
||||
|
||||
h5{
|
||||
color: #333 !important;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h6{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p{
|
||||
color: #303030 !important;
|
||||
}
|
||||
|
||||
p:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.single-course .review_box{
|
||||
input[type="text"],
|
||||
textarea{
|
||||
display: inline-block;
|
||||
min-height: 40px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
padding: 6px 12px;
|
||||
vertical-align: middle;
|
||||
background-color: transparent;
|
||||
color: $color-2;
|
||||
border: 1px solid $color-10;
|
||||
@include border-radius( 3px );
|
||||
@include transition( all .3s ease );
|
||||
}
|
||||
|
||||
textarea {
|
||||
line-height: 1.5;
|
||||
resize: vertical;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#thank_you_box h2{
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
/** Lesson **/
|
||||
.llms-course-navigation{
|
||||
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #f1f1f1;
|
||||
|
||||
.llms-pre-text{
|
||||
color: $color-5;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.llms-prev-lesson .llms-pre-text::before,
|
||||
.llms-next-lesson .llms-pre-text::after{
|
||||
display: inline-block;
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.llms-prev-lesson .llms-pre-text::before{
|
||||
content: "\f30a";
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.llms-next-lesson .llms-pre-text::after{
|
||||
content: "\f30b";
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.llms-lesson-button-wrapper{
|
||||
color: #191818;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#llms_mark_complete::before,
|
||||
.llms-lesson-button-wrapper::before{
|
||||
display: inline-block;
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: inherit;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#llms_mark_complete::before{
|
||||
content: "\f00c";
|
||||
margin-right: 10px;
|
||||
|
||||
}
|
||||
|
||||
/** Dashboard **/
|
||||
.llms-student-dashboard{
|
||||
&.edit-account{
|
||||
|
||||
.llms-form-field{
|
||||
padding: 0 20px 10px 0;
|
||||
|
||||
> label{
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** Checkout **/
|
||||
.llms-checkout-section{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.llms-notice{
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.llms-checkout-wrapper .llms-form-heading{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.llms-checkout-section-content .llms-label{
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.billing-information .llms-form-field label{
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.llms-distraction-free #site-logo {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/** Grid **/
|
||||
.llms-loop-list {
|
||||
@media all and (max-width: 768px) {
|
||||
$cols: 1;
|
||||
@while $cols <= 6 {
|
||||
&.tablet-#{$cols}-col .llms-loop-item {
|
||||
width: 100% / $cols;
|
||||
}
|
||||
$cols: $cols + 1;
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
$cols: 1;
|
||||
@while $cols <= 6 {
|
||||
&.mobile-#{$cols}-col .llms-loop-item {
|
||||
width: 100% / $cols;
|
||||
}
|
||||
$cols: $cols + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Pagination **/
|
||||
.llms-pagination{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pagination-center .llms-pagination{
|
||||
text-align: center;
|
||||
|
||||
ul li{
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination-left .llms-pagination{
|
||||
float: left;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
@charset "utf-8";
|
||||
/*!
|
||||
* Theme Name: OceanWP
|
||||
* Text Domain: oceanwp
|
||||
* Version: 1.9.0
|
||||
* Tested up to: 5.5
|
||||
* Requires at least: 5.3
|
||||
* Requires PHP: 7.2
|
||||
* Author: Nick
|
||||
* Author URI: https://oceanwp.org/about-me/
|
||||
* Theme URI: https://oceanwp.org/
|
||||
* Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
|
||||
* Tags: two-columns, right-sidebar, footer-widgets, blog, news, custom-background, custom-menu, post-formats, rtl-language-support, sticky-post, editor-style, threaded-comments, translation-ready, buddypress, custom-colors, featured-images, full-width-template, theme-options, e-commerce
|
||||
*
|
||||
* License: GNU General Public License v2.0 or later
|
||||
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
*
|
||||
* All files, unless otherwise stated, are released under the GNU General Public
|
||||
* License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)
|
||||
|
||||
* This theme, like WordPress, is licensed under the GPL.
|
||||
* Use it to make something cool, have fun, and share what you've learned
|
||||
* with others.
|
||||
*
|
||||
* DO NOT ADD YOUR CSS TO THIS FILE - IT WILL BE LOST
|
||||
* To add your own CSS, use a child theme: https://github.com/oceanwp/oceanwp-child-theme
|
||||
*
|
||||
* CSS file is in "assets/css"
|
||||
*/
|
||||
@@ -0,0 +1,216 @@
|
||||
@charset "utf-8";
|
||||
|
||||
// Configuration
|
||||
@import "config";
|
||||
|
||||
// Mixins
|
||||
@import "mixins";
|
||||
|
||||
/*------------------------------------*
|
||||
$CONTENTS
|
||||
*------------------------------------*/
|
||||
/**
|
||||
* BASE
|
||||
* - MAIN
|
||||
* - NORMALIZE
|
||||
* - LAYOUTS
|
||||
* - COMPONENTS
|
||||
* - TYPOGRAPHY
|
||||
* - FORMS
|
||||
*
|
||||
* COMPONENTS
|
||||
* - TOP BAR
|
||||
* - HEADER
|
||||
* - NAVIGATIONS
|
||||
* - LINKS EFFECT
|
||||
* - MEGA MENU
|
||||
* - SEARCH ICON
|
||||
* - DROP DOWN MOBILE
|
||||
* - FULL SCREEN MOBILE
|
||||
* - PAGE HEADER
|
||||
* - BLOG
|
||||
* - SIDEBAR
|
||||
* - CUSTOM SELECTS
|
||||
* - PAGINATION
|
||||
* - COMMENT
|
||||
* - SEARCH
|
||||
* - FOOTER
|
||||
* - 404 PAGE
|
||||
*
|
||||
* PLUGINS
|
||||
* - GENERAL
|
||||
* - MAGNIFIC POPUP
|
||||
* - SIDR
|
||||
* - SLICK
|
||||
*
|
||||
* RESPONSIVE
|
||||
*/
|
||||
|
||||
/*------------------------------------*
|
||||
$MAIN
|
||||
*------------------------------------*/
|
||||
@import "base/main";
|
||||
|
||||
/*------------------------------------*
|
||||
$NORMALIZE
|
||||
*------------------------------------*/
|
||||
@import "base/normalize";
|
||||
|
||||
/*------------------------------------*
|
||||
$LAYOUTS
|
||||
*------------------------------------*/
|
||||
@import "layout";
|
||||
|
||||
/*------------------------------------*
|
||||
$COMPONENTS
|
||||
*------------------------------------*/
|
||||
@import "base/shared";
|
||||
|
||||
/*------------------------------------*
|
||||
$TYPOGRAPHY
|
||||
*------------------------------------*/
|
||||
@import "base/typography";
|
||||
|
||||
/*------------------------------------*
|
||||
$FORMS
|
||||
*------------------------------------*/
|
||||
@import "base/form";
|
||||
|
||||
/*------------------------------------*
|
||||
$TOP BAR
|
||||
*------------------------------------*/
|
||||
@import "components/topbar/topbar";
|
||||
@import "components/topbar/topbar-content";
|
||||
@import "components/topbar/topbar-menu";
|
||||
@import "components/topbar/topbar-social";
|
||||
|
||||
/*------------------------------------*
|
||||
$HEADER
|
||||
*------------------------------------*/
|
||||
@import "components/header/header";
|
||||
@import "components/header/header-transparent";
|
||||
@import "components/header/header-top";
|
||||
@import "components/header/header-fullscreen";
|
||||
@import "components/header/header-center";
|
||||
@import "components/header/header-medium";
|
||||
@import "components/header/header-vertical";
|
||||
@import "components/header/header-custom";
|
||||
|
||||
/*------------------------------------*
|
||||
$NAVIGATIONS
|
||||
*------------------------------------*/
|
||||
@import "components/header/navigation";
|
||||
@import "components/header/socialmenu";
|
||||
|
||||
/*------------------------------------*
|
||||
$LINKS EFFECT
|
||||
*------------------------------------*/
|
||||
@import "components/header/links_effect";
|
||||
|
||||
/*------------------------------------*
|
||||
$MEGA MENU
|
||||
*------------------------------------*/
|
||||
@import "components/header/megamenu";
|
||||
|
||||
/*------------------------------------*
|
||||
$SEARCH ICON
|
||||
*------------------------------------*/
|
||||
@import "components/header/search-dropdown";
|
||||
@import "components/header/search-replace";
|
||||
@import "components/header/search-overlay";
|
||||
|
||||
/*------------------------------------*
|
||||
$DROP DOWN MOBILE
|
||||
*------------------------------------*/
|
||||
@import "components/mobile/dropdown-mobile";
|
||||
|
||||
/*------------------------------------*
|
||||
$FULL SCREEN MOBILE
|
||||
*------------------------------------*/
|
||||
@import "components/mobile/fullscreen-mobile";
|
||||
|
||||
/*------------------------------------*
|
||||
$PAGE HEADER
|
||||
*------------------------------------*/
|
||||
@import "components/page-header";
|
||||
|
||||
/*------------------------------------*
|
||||
$BLOG
|
||||
*------------------------------------*/
|
||||
@import "components/blog/blog-entries";
|
||||
@import "components/blog/blog-large";
|
||||
@import "components/blog/blog-grid";
|
||||
@import "components/blog/blog-thumbnail";
|
||||
@import "components/blog/blog-meta";
|
||||
@import "components/blog/gallery-format";
|
||||
@import "components/blog/video-audio-formats";
|
||||
@import "components/blog/link-format";
|
||||
@import "components/blog/quote-format";
|
||||
@import "components/blog/single-post";
|
||||
@import "components/blog/single-content";
|
||||
@import "components/blog/single-tags";
|
||||
@import "components/blog/single-next-prev";
|
||||
@import "components/blog/single-author-bio";
|
||||
@import "components/blog/single-related-posts";
|
||||
|
||||
/*------------------------------------*
|
||||
$SIDEBAR
|
||||
*------------------------------------*/
|
||||
@import "components/sidebar/sidebar";
|
||||
|
||||
/*------------------------------------*
|
||||
$CUSTOM SELECTS
|
||||
*------------------------------------*/
|
||||
@import "components/custom-selects";
|
||||
|
||||
/*------------------------------------*
|
||||
$PAGINATION
|
||||
*------------------------------------*/
|
||||
@import "components/pagination";
|
||||
|
||||
/*------------------------------------*
|
||||
$COMMENT
|
||||
*------------------------------------*/
|
||||
@import "components/comments";
|
||||
|
||||
/*------------------------------------*
|
||||
$SEARCH
|
||||
*------------------------------------*/
|
||||
@import "components/search";
|
||||
|
||||
/*------------------------------------*
|
||||
$FOOTER
|
||||
*------------------------------------*/
|
||||
@import "components/footer/footer-widgets";
|
||||
@import "components/footer/footer-bottom";
|
||||
@import "components/footer/scroll-top";
|
||||
|
||||
/*------------------------------------*
|
||||
$404 PAGE
|
||||
*------------------------------------*/
|
||||
@import "components/404";
|
||||
|
||||
/*------------------------------------*
|
||||
$GENERAL
|
||||
*------------------------------------*/
|
||||
@import "components/plugins/general";
|
||||
|
||||
/*------------------------------------*
|
||||
$MAGNIFIC POPUP
|
||||
*------------------------------------*/
|
||||
@import "components/plugins/magnific-popup";
|
||||
|
||||
/*------------------------------------*
|
||||
$SIDR
|
||||
*------------------------------------*/
|
||||
@import "components/plugins/sidr";
|
||||
|
||||
/*------------------------------------*
|
||||
$SLICK
|
||||
*------------------------------------*/
|
||||
@import "components/plugins/slick";
|
||||
|
||||
/*------------------------------------*
|
||||
$RESPONSIVE
|
||||
*------------------------------------*/
|
||||
@import "components/responsive";
|
||||
@@ -0,0 +1,66 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Wishlist
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Opacity
|
||||
@mixin opacity( $args ) {
|
||||
-moz-opacity: $args;
|
||||
-webkit-opacity: $args;
|
||||
opacity: $args;
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
.products .product {
|
||||
.tinv-wraper.tinv-wishlist {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( all 0.25s ease-in-out );
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:hover .tinv-wraper.tinv-wishlist {
|
||||
visibility: visible;
|
||||
-moz-opacity: 1;
|
||||
-webkit-opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce ul.products li.product .button.tinvwl_add_to_wishlist_button {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tinv-wishlist.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button.no-txt {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul.products li.product .tinvwl_add_to_wishlist_button {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.tinv-wishlist table input[type="checkbox"] {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
.tinv-wishlist .product-action .button {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
a.wishlist_products_counter {
|
||||
&.top_wishlist-heart-plus:before,
|
||||
&.top_wishlist-heart:before {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Floating Bar
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Opacity
|
||||
@mixin opacity( $args ) {
|
||||
-moz-opacity: $args;
|
||||
-webkit-opacity: $args;
|
||||
opacity: $args;
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Display Flex
|
||||
@mixin display() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flex Wrap
|
||||
@mixin flex-wrap( $args ) {
|
||||
-ms-flex-wrap: $args;
|
||||
-webkit-flex-wrap: $args;
|
||||
flex-wrap: $args;
|
||||
}
|
||||
|
||||
// Align Items
|
||||
@mixin align-items( $args ) {
|
||||
-webkit-align-items: $args;
|
||||
align-items: $args;
|
||||
}
|
||||
|
||||
.owp-floating-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
background-color: #2c2c2c;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
z-index: 15;
|
||||
@include opacity( 0 );
|
||||
visibility: hidden;
|
||||
@include transition( all .3s );
|
||||
|
||||
&.show {
|
||||
height: 66px;
|
||||
@include opacity( 1 );
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include display();
|
||||
@include flex-wrap( wrap );
|
||||
@include align-items( center );
|
||||
height: 66px;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
p.selected {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 12px;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2.entry-title {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.product_price {
|
||||
display: inline-block;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
|
||||
del {
|
||||
@include opacity( .7 );
|
||||
}
|
||||
|
||||
del .amount,
|
||||
.amount {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
form.cart {
|
||||
display: inline-block;
|
||||
|
||||
.quantity {
|
||||
margin: 5px 15px 0 0;
|
||||
|
||||
.minus,
|
||||
.plus {
|
||||
background-color: rgba(255,255,255,.1);
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
border: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: #fff;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.button {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-size: 14px;
|
||||
height: 46px;
|
||||
padding: 0 40px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
}
|
||||
|
||||
.added_to_cart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.out-of-stock {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-layout .owp-floating-bar {
|
||||
width: 1280px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 1024px) {
|
||||
body {
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.owp-floating-bar {
|
||||
top: auto !important;
|
||||
bottom: 0;
|
||||
|
||||
&.show,
|
||||
.container {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form.cart {
|
||||
vertical-align: bottom;
|
||||
|
||||
.quantity {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.button {
|
||||
height: 36px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#scroll-top {
|
||||
bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.owp-floating-bar .product_price {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.owp-floating-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Mini Cart
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Box Shadow
|
||||
@mixin box-shadow( $args ) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
}
|
||||
|
||||
// Opacity
|
||||
@mixin opacity( $args ) {
|
||||
-moz-opacity: $args;
|
||||
-webkit-opacity: $args;
|
||||
opacity: $args;
|
||||
}
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Display Flex
|
||||
@mixin display() {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
// Flex Wrap
|
||||
@mixin flex-wrap( $args ) {
|
||||
-ms-flex-wrap: $args;
|
||||
-webkit-flex-wrap: $args;
|
||||
flex-wrap: $args;
|
||||
}
|
||||
|
||||
// Flex Direction
|
||||
@mixin flex-direction( $args ) {
|
||||
-webkit-flex-direction: $args;
|
||||
flex-direction: $args;
|
||||
}
|
||||
|
||||
// Align Items
|
||||
@mixin align-items( $args ) {
|
||||
-webkit-align-items: $args;
|
||||
align-items: $args;
|
||||
}
|
||||
|
||||
.current-shop-items-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: -20px;
|
||||
background-color: #fff;
|
||||
z-index: 10000;
|
||||
border-top: 3px solid transparent;
|
||||
text-align: left;
|
||||
@include box-shadow( 0 2px 6px rgba(0, 0, 0, 0.1) );
|
||||
width: 350px;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( all 0.25s ease-in-out );
|
||||
|
||||
ul.woocommerce-mini-cart {
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.widgettitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
p.woocommerce-mini-cart__empty-message {
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wcmenucart-toggle-drop_down:hover,
|
||||
.show-cart .wcmenucart-toggle-drop_down {
|
||||
.current-shop-items-dropdown {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-layout .current-shop-items-dropdown {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.widget_shopping_cart {
|
||||
ul.cart_list li {
|
||||
padding: 0;
|
||||
border-bottom-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
min-height: 100%;
|
||||
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.owp-grid-wrap {
|
||||
@include display();
|
||||
@include flex-wrap( wrap );
|
||||
@include align-items( center );
|
||||
|
||||
.owp-grid {
|
||||
width: 100%;
|
||||
|
||||
&.thumbnail {
|
||||
width: 25%;
|
||||
margin: 0;
|
||||
border-right-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.content {
|
||||
position: relative;
|
||||
width: 75%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
> div {
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
color: #b2b2b2;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a.remove {
|
||||
right: 20px;
|
||||
margin-top: -17px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 30px;
|
||||
color: #b3b3b3;
|
||||
border: 1px solid #e6e6e6;
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
border-color: #13aff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
background-color: #fafafa;
|
||||
border-width: 1px 0;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
|
||||
strong {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
color: #797979;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.amount {
|
||||
float: right;
|
||||
font-size: 16px;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.widget_shopping_cart_content .buttons {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
|
||||
.button {
|
||||
float: left;
|
||||
width: 48%;
|
||||
padding: 14px 8px;
|
||||
text-align: center;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&:first-child {
|
||||
background-color: transparent;
|
||||
border: 1px solid #e6e6e6;
|
||||
color: #666;
|
||||
|
||||
&:hover {
|
||||
border-color: #13aff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkout {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cart spacious style */
|
||||
.spacious .owp-mini-cart {
|
||||
padding: 20px;
|
||||
|
||||
.widget_shopping_cart ul.cart_list li {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.owp-grid-wrap .owp-grid.thumbnail {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_shopping_cart .total {
|
||||
background-color: transparent;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
|
||||
.widget_shopping_cart_content .buttons {
|
||||
padding: 20px 0 0;
|
||||
}
|
||||
|
||||
p.woocommerce-mini-cart__empty-message {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cart bag style */
|
||||
.bag-style {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wcmenucart-total {
|
||||
margin-right: 7px;
|
||||
|
||||
span {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.wcmenucart-cart-icon {
|
||||
display: inline-block;
|
||||
|
||||
.wcmenucart-count {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 2em;
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
line-height: 1.7em;
|
||||
font-weight: bold;
|
||||
border: 2px solid #333;
|
||||
color: #333;
|
||||
padding: 0 3px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
@include transition( all .2s ease-in-out );
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
width: 14px;
|
||||
height: 8px;
|
||||
margin-left: -7px;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid #333;
|
||||
border-top-left-radius: 100px;
|
||||
border-top-right-radius: 100px;
|
||||
border-bottom: 0;
|
||||
@include transition( all .2s ease-in-out );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bag-style:hover .wcmenucart-cart-icon .wcmenucart-count,
|
||||
.show-cart .wcmenucart-cart-icon .wcmenucart-count {
|
||||
background-color: #13aff0;
|
||||
color: #fff;
|
||||
border-color: #13aff0;
|
||||
|
||||
&:after {
|
||||
border-color: #13aff0;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix for some conflict with default Woo css if custom features are disabled */
|
||||
.woocommerce .widget_shopping_cart .cart_list li, .woocommerce.widget_shopping_cart .cart_list li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.woocommerce .widget_shopping_cart .cart_list li a.remove, .woocommerce.widget_shopping_cart .cart_list li a.remove {
|
||||
top: 50%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.woocommerce .widget_shopping_cart .total, .woocommerce.widget_shopping_cart .total {
|
||||
padding: 20px;
|
||||
}
|
||||
@@ -0,0 +1,237 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Multi-Step Checkout
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Transition
|
||||
@mixin transition( $args ) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
// Border radius
|
||||
@mixin border-radius( $args ) {
|
||||
-webkit-border-radius: $args;
|
||||
-moz-border-radius: $args;
|
||||
-ms-border-radius: $args;
|
||||
border-radius: $args;
|
||||
}
|
||||
|
||||
#owp-checkout-timeline {
|
||||
margin-bottom: 40px;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
&.step-4 li {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.timeline-wrapper {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px;
|
||||
background-color: #eee;
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
line-height: 40px;
|
||||
@include transition( all .1s ease );
|
||||
}
|
||||
|
||||
.active .timeline-wrapper {
|
||||
background-color: #13aff0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.timeline-step {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 22px;
|
||||
margin-right: 8px;
|
||||
background-color: #fff;
|
||||
color: #ccc;
|
||||
border: 2px solid #ccc;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.timeline-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&.arrow {
|
||||
li {
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.timeline-wrapper {
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@include transition( all .1s ease );
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -20px;
|
||||
border-top: 30px solid #eee;
|
||||
border-bottom: 30px solid #eee;
|
||||
border-left: 20px solid transparent;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -20px;
|
||||
border-top: 30px solid transparent;
|
||||
border-bottom: 30px solid transparent;
|
||||
border-left: 20px solid #eee;
|
||||
border-right-color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.active .timeline-wrapper {
|
||||
&:before {
|
||||
border-top-color: #13aff0;
|
||||
border-bottom-color: #13aff0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-left-color: #13aff0;
|
||||
border-right-color: #13aff0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.square {
|
||||
li {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#checkout-wrapper {
|
||||
.woocommerce-billing-fields h3,
|
||||
#customer_shipping_details,
|
||||
#order_review,
|
||||
#customer_billing_details.show-login-reminder.not-logged-in,
|
||||
#checkout_coupon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#checkout_coupon,
|
||||
#checkout_login,
|
||||
form.checkout {
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#order_review {
|
||||
max-width: 650px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
form.checkout {
|
||||
display: block;
|
||||
|
||||
#billing_phone_field,
|
||||
#billing_email_field {
|
||||
width: 48%;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
#billing_phone_field {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#billing_email_field {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#order_review {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
form.login {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.woocommerce-billing-fields__field-wrapper,
|
||||
.woocommerce-shipping-fields__field-wrapper {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#form_actions {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 35px;
|
||||
|
||||
p.form-row.notes {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 2px solid;
|
||||
margin-top: 6px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
float: right;
|
||||
|
||||
input {
|
||||
@include border-radius( 30px );
|
||||
|
||||
&.prev {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.next {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media only screen and (max-width: 959px) {
|
||||
#owp-checkout-timeline {
|
||||
li {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
li,
|
||||
&.step-4 li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Quick View
|
||||
-------------------------------------------------------------------*/
|
||||
|
||||
// Border radius
|
||||
@mixin border-radius( $args ) {
|
||||
-webkit-border-radius: $args;
|
||||
-moz-border-radius: $args;
|
||||
-ms-border-radius: $args;
|
||||
border-radius: $args;
|
||||
}
|
||||
|
||||
// Animation
|
||||
@mixin animation( $args ) {
|
||||
-ms-animation: $args;
|
||||
-webkit-animation: $args;
|
||||
-o-animation: $args;
|
||||
-moz-animation: $args;
|
||||
animation: $args;
|
||||
}
|
||||
|
||||
// Transform
|
||||
@mixin transform( $args ) {
|
||||
-webkit-transform: $args;
|
||||
-moz-transform: $args;
|
||||
-ms-transform: $args;
|
||||
-o-transform: $args;
|
||||
transform: $args;
|
||||
}
|
||||
|
||||
// Box Shadow
|
||||
@mixin box-shadow( $args ) {
|
||||
-webkit-box-shadow: $args;
|
||||
-moz-box-shadow: $args;
|
||||
box-shadow: $args;
|
||||
}
|
||||
|
||||
.owp-quick-view {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 12;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-right: 6px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce .products .product-inner:hover .owp-quick-view {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.woo-entry-image.loading {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: .8;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
border-color: rgba(0,0,0,.1);
|
||||
border-left-color: #fff;
|
||||
z-index: 99;
|
||||
@include border-radius( 50% );
|
||||
@include animation( qv-spin .6s infinite linear );
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background-color: rgba(0,0,0,.15);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes qv-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes qv-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#owp-qv-wrap {
|
||||
display: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
&,
|
||||
.owp-qv-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.owp-qv-image,
|
||||
.summary {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.owp-qv-slides,
|
||||
.flex-control-nav,
|
||||
.flex-direction-nav {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.owp-qv-slides {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.summary {
|
||||
padding: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flex-viewport {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.flex-control-nav {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin: 0 5px;
|
||||
line-height: 1;
|
||||
z-index: 10;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 3px solid #111;
|
||||
opacity: 0.4;
|
||||
text-indent: -9999px;
|
||||
cursor: pointer;
|
||||
@include border-radius( 50% );
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.flex-active {
|
||||
background: rgba(0,0,0,.9);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-direction-nav {
|
||||
a {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
color: rgba(0,0,0,.8);
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
|
||||
&:before {
|
||||
display: inline-block;
|
||||
font: normal normal 900 30px/1 'Font Awesome 5 free';
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&.flex-prev {
|
||||
left: -50px;
|
||||
text-align: right;
|
||||
|
||||
&:before {
|
||||
content: '\f104';
|
||||
}
|
||||
}
|
||||
|
||||
&.flex-next {
|
||||
right: -50px;
|
||||
|
||||
&:before {
|
||||
content: '\f105';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owp-qv-image:hover .flex-direction-nav a.flex-prev {
|
||||
opacity: .8;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.owp-qv-image:hover .flex-direction-nav a.flex-next {
|
||||
opacity: .8;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-qv-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-qv-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.owp-qv-content-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
max-width: 100%;
|
||||
z-index: 1045;
|
||||
opacity: 0;
|
||||
@include transform( translateY(-30px) );
|
||||
-webkit-transition: transform .5s, opacity .3s;
|
||||
-moz-transition: transform .5s, opacity .3s;
|
||||
transition: transform .5s, opacity .3s;
|
||||
}
|
||||
|
||||
.is-visible .owp-qv-content-wrap {
|
||||
opacity: 1;
|
||||
@include transform( translateY(0) );
|
||||
}
|
||||
|
||||
.owp-qv-content-inner {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
max-width: 875px;
|
||||
margin: 0 auto;
|
||||
z-index: 1000;
|
||||
@include box-shadow( 3px 3px 20px 0 rgba(0,0,0,0.15) );
|
||||
|
||||
.owp-qv-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #333;
|
||||
opacity: .5;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
z-index: 1001;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.product {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-qv-overlay {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#owp-qv-content a.woocommerce-review-link {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 850px) {
|
||||
#owp-qv-wrap .owp-qv-image,
|
||||
#owp-qv-wrap .summary {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.owp-qv-container:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
.widget_product_categories,
|
||||
.widget_layered_nav {
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
padding-left: 22px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -7px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
|
||||
a:hover ~ .count {
|
||||
background-color: transparent;
|
||||
color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
background-color: rgba(84,84,84,0.05);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
min-width: 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
@include transition( all 0.3s ease-in-out );
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.woocommerce .widget_product_categories {
|
||||
li {
|
||||
a:before {
|
||||
@include border-radius( 50% );
|
||||
}
|
||||
|
||||
&.current-cat > {
|
||||
a {
|
||||
font-weight: bold;
|
||||
|
||||
&:bofore {
|
||||
background-color: $color-5;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
a ~ .count {
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
&.children {
|
||||
margin: 8px 0 0 30px;
|
||||
|
||||
li {
|
||||
font-size: 12px;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 5px;
|
||||
|
||||
a {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce .widget_layered_nav {
|
||||
li {
|
||||
a:before {
|
||||
@include border-radius( 2px );
|
||||
}
|
||||
|
||||
&.chosen {
|
||||
a {
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
background-color: $color-5;
|
||||
border-color: $color-5;
|
||||
text-align: center;
|
||||
content: '\f00c';
|
||||
color: #fff;
|
||||
font: normal normal 900 14px/1 'Font Awesome 5 free';
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
content: '\f00d';
|
||||
}
|
||||
}
|
||||
|
||||
a ~ .count {
|
||||
background-color: $color-5;
|
||||
color: $color-1;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropdown style */
|
||||
.woo-dropdown-cat .widget_product_categories {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
padding: 10px 22px 10px 0;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.open-this {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&.cat-parent .open-this {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
ul.children {
|
||||
display: none;
|
||||
margin: 0 0 0 16px;
|
||||
}
|
||||
|
||||
&.current-cat-parent > ul.children {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul a {
|
||||
font-weight: 400;
|
||||
text-transform: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 40px;
|
||||
border: 0;
|
||||
padding: 10px 0 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.count,
|
||||
li.current-cat > a ~ .count {
|
||||
background-color: transparent !important;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Mobile Mini Cart Sidebar
|
||||
-------------------------------------------------------------------*/
|
||||
#oceanwp-cart-sidebar-wrap {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( all 0.25s ease-in-out );
|
||||
|
||||
&,
|
||||
.oceanwp-cart-sidebar-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.oceanwp-cart-sidebar-overlay {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oceanwp-cart-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -100%;
|
||||
background-color: #fff;
|
||||
width: 325px;
|
||||
height: 100%;
|
||||
padding: 20px 0 0;
|
||||
overflow: auto;
|
||||
z-index: 10000;
|
||||
@include box-shadow( 0 0 12px 0 rgba(0,0,0,.4) );
|
||||
@include transition( all 0.3s ease-in-out );
|
||||
}
|
||||
|
||||
.owp-cart-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
line-height: 1.2;
|
||||
text-transform: uppercase;
|
||||
padding: 0 20px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
|
||||
.oceanwp-cart-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #333;
|
||||
opacity: .5;
|
||||
font-weight: 300;
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
z-index: 1001;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.widget_shopping_cart ul.cart_list li:first-child {
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.woocommerce-mini-cart__empty-message {
|
||||
padding: 0 20px 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.spacious .owp-mini-cart {
|
||||
padding-top: 0;
|
||||
|
||||
.widget_shopping_cart ul.cart_list li:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-bar #oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar {
|
||||
top: 32px;
|
||||
height: -webkit-calc(100% - 32px);
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.admin-bar #oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar {
|
||||
top: 46px;
|
||||
height: -webkit-calc(100% - 46px);
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.admin-bar #oceanwp-cart-sidebar-wrap .oceanwp-cart-sidebar {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.show-cart,
|
||||
.show-cart-sidebar {
|
||||
#oceanwp-cart-sidebar-wrap {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
|
||||
.oceanwp-cart-sidebar {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 959px) {
|
||||
#oceanwp-cart-sidebar-wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Product Navigation
|
||||
-------------------------------------------------------------------*/
|
||||
@media (min-width: 1080px) {
|
||||
.owp-product-nav-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-product-nav-wrap {
|
||||
text-align: right;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.owp-product-nav {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 3px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
a.owp-nav-link {
|
||||
display: inline-block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 24px;
|
||||
border: 2px solid $color-7;
|
||||
@include border-radius( 50% );
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-5;
|
||||
color: #fff;
|
||||
border-color: $color-5;
|
||||
}
|
||||
}
|
||||
|
||||
a.owp-nav-text {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
|
||||
&.next-text {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
&.prev-text {
|
||||
padding-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.owp-nav-thumb {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -99999px;
|
||||
display: inline-block;
|
||||
width: 90px;
|
||||
opacity: 0;
|
||||
@include transition( opacity 0.25s ease-in-out );
|
||||
@include box-shadow( 1px 1px 15px rgba(0,0,0,0.15) );
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:hover > .owp-nav-thumb {
|
||||
opacity: 1;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.owp-product-nav-wrap {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.owp-product-nav {
|
||||
display: block;
|
||||
|
||||
li.next-li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li.prev-li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
a.owp-nav-text {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Off Canvas Filter
|
||||
-------------------------------------------------------------------*/
|
||||
.woocommerce .oceanwp-off-canvas-filter {
|
||||
float: left;
|
||||
height: 34px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 34px;
|
||||
padding: 0 14px;
|
||||
color: #999;
|
||||
border: 1px solid #eaeaea;
|
||||
margin: 0 20px 0 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: #13aff0;
|
||||
border-color: #13aff0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
#oceanwp-off-canvas-sidebar-wrap {
|
||||
visibility: hidden;
|
||||
@include opacity( 0 );
|
||||
@include transition( all 0.25s ease-in-out );
|
||||
|
||||
&,
|
||||
.oceanwp-off-canvas-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.oceanwp-off-canvas-overlay {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.oceanwp-off-canvas-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
background-color: $color-1;
|
||||
width: 325px;
|
||||
height: 100%;
|
||||
padding: 35px;
|
||||
overflow: auto;
|
||||
z-index: 9999;
|
||||
@include box-shadow( 0 0 12px 0 rgba(0,0,0,.4) );
|
||||
@include transition( all 0.3s ease-in-out );
|
||||
}
|
||||
|
||||
.sidebar-box {
|
||||
border-bottom: 1px solid rgba(84,84,84,0.15);
|
||||
margin-bottom: 0;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-bar #oceanwp-off-canvas-sidebar-wrap .oceanwp-off-canvas-sidebar {
|
||||
top: 32px;
|
||||
height: -webkit-calc(100% - 32px);
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 782px) {
|
||||
.admin-bar #oceanwp-off-canvas-sidebar-wrap .oceanwp-off-canvas-sidebar {
|
||||
top: 46px;
|
||||
height: -webkit-calc(100% - 46px);
|
||||
height: calc(100% - 46px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.admin-bar #oceanwp-off-canvas-sidebar-wrap .oceanwp-off-canvas-sidebar {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.off-canvas-enabled #oceanwp-off-canvas-sidebar-wrap {
|
||||
visibility: visible;
|
||||
@include opacity( 1 );
|
||||
|
||||
.oceanwp-off-canvas-sidebar {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.oceanwp-off-canvas-close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
z-index: 1000;
|
||||
|
||||
svg {
|
||||
fill: #333;
|
||||
@include transition( all .3s ease-in-out );
|
||||
}
|
||||
|
||||
&:hover svg {
|
||||
fill: #777;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Quantity Buttons
|
||||
-------------------------------------------------------------------*/
|
||||
.quantity {
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
min-width: 110px;
|
||||
|
||||
.qty,
|
||||
.minus,
|
||||
.plus {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 36px;
|
||||
min-height: 36px;
|
||||
background-color: transparent;
|
||||
border: 1px solid #e4e4e4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
-moz-appearance: textfield; /* hack firefox */
|
||||
-webkit-appearance: none;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.minus,
|
||||
.plus {
|
||||
font-size: 13px;
|
||||
line-height: 34px;
|
||||
}
|
||||
|
||||
.minus {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.plus {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input::-webkit-inner-spin-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.woocommerce form input[type="number"] {
|
||||
max-width: 58px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.woocommerce form input.qty[type="number"]{
|
||||
-moz-appearance: textfield; /* hack firefox */
|
||||
}
|
||||
@@ -0,0 +1,359 @@
|
||||
/*------------------------------------------------------------------
|
||||
Woo Responsive
|
||||
-------------------------------------------------------------------*/
|
||||
.sidr-class-woo-menu-icon {
|
||||
display: none;
|
||||
}
|
||||
.sidr-class-woocommerce {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and(max-width: 1280px) {
|
||||
.woocommerce div.product .product-thumbnails {
|
||||
width: 275px;
|
||||
}
|
||||
}
|
||||
@media only screen and(max-width: 992px) {
|
||||
.woocommerce {
|
||||
#customer_login {
|
||||
.lost_password {
|
||||
float: none;
|
||||
margin-top: 10px !important;
|
||||
line-height: 1;
|
||||
}
|
||||
.form-row label[for="rememberme"] {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
}
|
||||
.oceanwp-loginform-wrap {
|
||||
.lost_password {
|
||||
float: none;
|
||||
margin-top: 10px !important;
|
||||
line-height: 1;
|
||||
}
|
||||
.form-row label[for="rememberme"] {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and(max-width: 959px) {
|
||||
body.account-side-style .woocommerce #customer_login {
|
||||
> div,
|
||||
.col-2 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.col-2 {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.woocommerce-checkout {
|
||||
#order_review {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
> .col2-set {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
h3#order_review_heading {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
form.checkout_coupon {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
.form-row-first,
|
||||
.form-row-last {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
.form-row-last {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
form.checkout {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and(max-width: 767px) {
|
||||
.woocommerce {
|
||||
ul {
|
||||
&.products.list li.product {
|
||||
.woo-entry-image,
|
||||
.product-entry-slider-wrap {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
.woo-entry-inner {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&.order_details li {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
}
|
||||
.form-row-first {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.form-row-last {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.cart-collaterals {
|
||||
.cross-sells {
|
||||
display: none;
|
||||
}
|
||||
.cart_totals {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
div.product {
|
||||
div {
|
||||
&.images {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
text-align: center;
|
||||
}
|
||||
&.summary {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.woocommerce-tabs ul.tabs li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.content-full-width div.product div {
|
||||
&.images {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
&.summary {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#customer_login .form-row label[for="rememberme"] {
|
||||
margin: 0 0 0 4px;
|
||||
}
|
||||
.order_details li:last-of-type {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.col2-set {
|
||||
.col-1 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.col-2 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
> div:first-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
.woocommerce-page {
|
||||
.cart-collaterals .cart_totals {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&.woocommerce-cart table.shop_table td.product-price {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
.woocommerce-cart {
|
||||
.cart-collaterals .cart_totals table td {
|
||||
text-align: right;
|
||||
}
|
||||
table.cart td.actions .coupon .input-text {
|
||||
max-width: 150px;
|
||||
}
|
||||
}
|
||||
.woocommerce-message:before {
|
||||
display: none;
|
||||
}
|
||||
.woocommerce-cart .woocommerce table.shop_table {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
th {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
td {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
clear: both;
|
||||
|
||||
&:before {
|
||||
content: attr(data-title) ': ';
|
||||
font-weight: 600;
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.product-remove:before,
|
||||
&.product-thumbnail:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.product-thumbnail {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.product-quantity .quantity {
|
||||
float: right;
|
||||
}
|
||||
|
||||
&.actions,
|
||||
&.download-actions {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.download-actions {
|
||||
.button {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.my_account_orders {
|
||||
.order-actions {
|
||||
text-align: right;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and(max-width: 580px) {
|
||||
.woocommerce-cart table.cart td.actions {
|
||||
.coupon {
|
||||
float: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid rgba(0,0,0,.05);
|
||||
|
||||
.input-text {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button[name='apply_coupon'] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
button[name='update_cart'] {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and(max-width: 480px) {
|
||||
.woocommerce {
|
||||
.result-count {
|
||||
display: none;
|
||||
}
|
||||
.oceanwp-toolbar {
|
||||
text-align: center;
|
||||
}
|
||||
.oceanwp-off-canvas-filter,
|
||||
.oceanwp-grid-list {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
}
|
||||
.oceanwp-grid-list {
|
||||
margin: 0;
|
||||
}
|
||||
.woocommerce-ordering {
|
||||
float: none;
|
||||
margin-top: 14px;
|
||||
text-align: left;
|
||||
|
||||
.orderby {
|
||||
width: 100% !important;
|
||||
span {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-checkout form.login .lost_password {
|
||||
float: none;
|
||||
line-height: 1;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
}
|
||||
@media only screen and(max-width: 320px) {
|
||||
.woocommerce {
|
||||
.woocommerce-ordering .orderby {
|
||||
width: 175px !important;
|
||||
span {
|
||||
width: 175px !important;
|
||||
}
|
||||
}
|
||||
div.product .product-thumbnails {
|
||||
width: 215px;
|
||||
}
|
||||
#reviews #comments ol.commentlist li {
|
||||
.comment_container {
|
||||
padding: 0;
|
||||
}
|
||||
img.avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.woocommerce-cart table.cart td.actions {
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
.coupon .input-text {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0 0 10px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,19 @@
|
||||
/*!
|
||||
* Project : OceanWP WordPress Theme
|
||||
* Purpose : WooCommerce Tweaks
|
||||
* Author : Nick
|
||||
*/
|
||||
|
||||
// Configuration
|
||||
@import "config";
|
||||
|
||||
// Mixins
|
||||
@import "mixins";
|
||||
|
||||
@import "woo/woocommerce";
|
||||
@import "woo/woo-cat-widget";
|
||||
@import "woo/woo-mobile-cart";
|
||||
@import "woo/woo-off-canvas";
|
||||
@import "woo/woo-quantity";
|
||||
@import "woo/woo-nav";
|
||||
@import "woo/woo-responsive";
|
||||
Reference in New Issue
Block a user