diff --git a/header.php b/header.php index 42bf1af..8fedda7 100644 --- a/header.php +++ b/header.php @@ -13,10 +13,10 @@ ?> > - - + + - + > diff --git a/inc/template-tags.php b/inc/template-tags.php index 97c8455..589aad3 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -26,7 +26,7 @@ function polestar_author_box() { ?> - +
@@ -81,7 +81,7 @@ function polestar_mini_cart() { * The callback function for wp_list_comments in comments.php. * * @link https://codex.wordpress.org/Function_Reference/wp_list_comments. - */ + */ function polestar_comment( $comment, $args, $depth ) { ?>
  • id="comment-"> @@ -125,7 +125,7 @@ function polestar_entry_footer() { if ( is_single() && has_tag() && get_theme_mod( 'post_tags', true ) ) { echo ''; - } + } } endif; @@ -189,7 +189,7 @@ function polestar_display_featured_posts() { * Display theme icons. */ function polestar_display_icon( $type ) { - switch( $type ) { + switch ( $type ) { case 'add': ?> @@ -368,7 +368,7 @@ function polestar_display_logo() { $logo = get_theme_mod( 'logo' ); if ( $logo ) { - $attrs = apply_filters( 'polestar_logo_attributes', array() ); + $attrs = apply_filters( 'polestar_logo_attributes', array( 'class' => 'custom-logo' ) ); ?>

    - +

    - + '; } - + if ( comments_open() && get_theme_mod( 'post_comment_count', true ) ) { echo ''; comments_popup_link( esc_html__( 'Leave a comment', 'polestar' ), esc_html__( 'One Comment', 'polestar' ), esc_html__( '% Comments', 'polestar' ) ); diff --git a/js/jquery.theme.js b/js/jquery.theme.js index 68760e5..5141b1d 100644 --- a/js/jquery.theme.js +++ b/js/jquery.theme.js @@ -108,6 +108,7 @@ jQuery( function( $ ) { } }; + smSetup(); $( window ).resize( smSetup ).scroll( smSetup ); @@ -122,65 +123,8 @@ jQuery( function( $ ) { smShadow(); $( window ).scroll( smShadow ); - // Header padding to be used if logo scaling is enabled. - var mhPadding = { - top: parseInt( $mh.css( 'padding-top' ) ), - bottom: parseInt( $mh.css( 'padding-bottom' ) ) - }; - - // Sticky header logo scaling. - if ( $mh.data( 'scale-logo' ) ) { - var $img = $mh.find( '.site-branding img' ), - imgWidth = $img.width(), - imgHeight = $img.height(); - scaledWidth = imgWidth * polestar.logoScale; - scaledHeight = imgHeight * polestar.logoScale; - - var smResizeLogo = function() { - var $branding = $mh.find( '.site-branding > *' ), - top = window.pageYOffset || document.documentElement.scrollTop; - - // Check if the menu is meant to be sticky or not, and if it is apply padding/class. - if ( top > 0 ) { - $mh.css( { - 'padding-top': mhPadding.top * polestar.logoScale, - 'padding-bottom': mhPadding.bottom * polestar.logoScale - } ).addClass( 'stuck' ); - - } else { - $mh.css( { - 'padding-top': mhPadding.top, - 'padding-bottom': mhPadding.bottom - } ).removeClass( 'stuck' ); - } - - if ( $img.length ) { - // If Scale == polestar.logoScale, logo is completely scaled. - if ( $img.height() != scaledHeight || $img.width() != scaledWidth ) { - var scale = polestar.logoScale + ( Math.max( 0, 48 - top ) / 48 * ( 1 - polestar.logoScale ) ); - $('.site-branding img').css( { - width: imgWidth * scale, - height: imgHeight * scale, - 'max-width' : 'none' - } ); - } - } else { - if ( top > 0 ) { - $branding.css( 'transform', 'scale(' + polestar.logoScale + ')' ); - } else { - $branding.css( 'transform', 'scale(1)' ); - } - } - }; - smResizeLogo(); - $( window ).scroll( smResizeLogo ).resize( smResizeLogo ); - } } - jQuery( window ).load( function() { - polestar.logoScale = parseFloat( polestar.logoScale ); - } ); - // Header search. var $hs = $( '#header-search' ); $( '#masthead .search-icon' ).click( function() { @@ -212,36 +156,37 @@ jQuery( function( $ ) { } ); // Main menu. - // Remove the no-js body class. - $( 'body.no-js' ).removeClass( 'no-js' ); - if ( $( 'body' ).hasClass( 'css3-animations' ) ) { - - var polestarResetMenu = function() { - $( '.main-navigation ul ul' ).each( function() { - var $$ = $( this ); - var width = Math.max.apply( Math, $$.find( '> li:not(.mini_cart_item) > a' ).map( function() { - return $( this ).width(); - } ).get() ); - $$.find( '> li > a' ).width( width ); - } ); - }; - polestarResetMenu(); - $( window ).resize( polestarResetMenu ); + $( window ).load( function() { + $( 'body.no-js' ).removeClass( 'no-js' ); + if ( $( 'body' ).hasClass( 'css3-animations' ) ) { + + var polestarResetMenu = function() { + $( '.main-navigation ul ul' ).each( function() { + var $$ = $( this ); + var width = Math.max.apply( Math, $$.find( '> li:not(.mini_cart_item) > a' ).map( function() { + return $( this ).width(); + } ).get() ); + $$.find( '> li > a' ).width( width ); + } ); + }; + polestarResetMenu(); + $( window ).resize( polestarResetMenu ); - // Add keyboard access to the menu. - $( '.menu-item' ).children( 'a' ).focus( function() { - $( this ).parents( 'ul, li' ).addClass( 'focus' ); - } ); + // Add keyboard access to the menu. + $( '.menu-item' ).children( 'a' ).focus( function() { + $( this ).parents( 'ul, li' ).addClass( 'focus' ); + } ); - // Click event fires after focus event. - $( '.menu-item' ).children( 'a' ).click( function() { - $( this ).parents( 'ul, li' ).removeClass( 'focus' ); - } ); - - $( '.menu-item' ).children( 'a' ).focusout( function() { - $( this ).parents( 'ul, li' ).removeClass( 'focus' ); - } ); - } + // Click event fires after focus event. + $( '.menu-item' ).children( 'a' ).click( function() { + $( this ).parents( 'ul, li' ).removeClass( 'focus' ); + } ); + + $( '.menu-item' ).children( 'a' ).focusout( function() { + $( this ).parents( 'ul, li' ).removeClass( 'focus' ); + } ); + } + } ); // Main menu current menu item indication. jQuery( document ).ready( function( $ ) { @@ -277,7 +222,7 @@ jQuery( function( $ ) { if ( $( 'body' ).hasClass( 'disable-smooth-scroll' ) ) { return; } - + $( this ).click( function( e ) { var hash = this.hash; @@ -376,7 +321,7 @@ jQuery( function( $ ) { $mobileMenu = $( '
    ' ) .append( $( '.main-navigation ul' ).first().clone() ) .attr( 'id', 'mobile-navigation' ) - .appendTo( '#masthead' ).hide(); + .appendTo( '#masthead' ).hide(); if ( $( '#header-search form' ).length ) { $mobileMenu.append( $( '#header-search form' ).clone() ); @@ -432,3 +377,66 @@ jQuery( function( $ ) { } ); } ); + +( function( $ ) { + $( window ).load( function() { + + polestar.logoScale = parseFloat( polestar.logoScale ); + + // Header padding to be used if logo scaling is enabled. + var $mh = $( '#masthead' ), + mhPadding = { + top: parseInt( $mh.css( 'padding-top' ) ), + bottom: parseInt( $mh.css( 'padding-bottom' ) ) + }; + + // Sticky header logo scaling. + if ( $mh.data( 'scale-logo' ) ) { + var $img = $mh.find( '.site-branding img' ), + imgWidth = $img.attr( 'width' ), + imgHeight = $img.attr( 'height' ), + scaledWidth = imgWidth * polestar.logoScale; + scaledHeight = imgHeight * polestar.logoScale; + + var smResizeLogo = function() { + var $branding = $mh.find( '.site-branding > *' ), + top = window.pageYOffset || document.documentElement.scrollTop; + + // Check if the menu is meant to be sticky or not, and if it is apply padding/class. + if ( top > 0 ) { + $mh.css( { + 'padding-top': mhPadding.top * polestar.logoScale, + 'padding-bottom': mhPadding.bottom * polestar.logoScale + } ).addClass( 'stuck' ); + + } else { + $mh.css( { + 'padding-top': mhPadding.top, + 'padding-bottom': mhPadding.bottom + } ).removeClass( 'stuck' ); + } + + if ( $img.length ) { + // If Scale == polestar.logoScale, logo is completely scaled. + if ( $img.height() != scaledHeight || $img.width() != scaledWidth ) { + var scale = polestar.logoScale + ( Math.max( 0, 48 - top ) / 48 * ( 1 - polestar.logoScale ) ); + $('.site-branding img').css( { + width: imgWidth * scale, + height: imgHeight * scale, + 'max-width' : 'none' + } ); + } + } else { + if ( top > 0 ) { + $branding.css( 'transform', 'scale(' + polestar.logoScale + ')' ); + } else { + $branding.css( 'transform', 'scale(1)' ); + } + } + }; + smResizeLogo(); + $( window ).scroll( smResizeLogo ).resize( smResizeLogo ); + } + + } ); +} )( jQuery ); diff --git a/readme.txt b/readme.txt index 9ef3dc6..6725f62 100644 --- a/readme.txt +++ b/readme.txt @@ -5,7 +5,7 @@ Contributors: Puro Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce Requires at least: 4.7+ -Tested up to: 4.9.9 +Tested up to: 5.0.2 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -151,6 +151,14 @@ Released under [GPL version 2](https://www.gnu.org/licenses/old-licenses/gpl-2.0 == Changelog == += 1.3.2 - 06 January 2019 = +* Fixed missing WooCommerce cart cross-sells. +* Minor WooCommerce cart styling improvements. +* Minor WooCommerce checkout styling improvements. +* Improved logo scaling function. +* Slightly darkened default background and border colors for improved usability. +* Changed the page order of the title and featured images to match posts. + = 1.3.1 - 05 November 2018 = * Prevented Jetpack Lazy Images from loading the logo image. * Improved sticky header logo scaling. diff --git a/sass/elements/_elements.scss b/sass/elements/_elements.scss index b42583d..264caf8 100644 --- a/sass/elements/_elements.scss +++ b/sass/elements/_elements.scss @@ -21,7 +21,7 @@ hr { @import "lists"; -img { +img:not(.custom-logo) { height: auto; // Make sure images are scaled correctly. max-width: 100%; // Adhere to container width. } diff --git a/sass/elements/_lists.scss b/sass/elements/_lists.scss index f5efa10..5ae7436 100644 --- a/sass/elements/_lists.scss +++ b/sass/elements/_lists.scss @@ -1,4 +1,4 @@ -ul, +ul, ol { margin: 0 0 26px 25px; padding: 0; @@ -15,18 +15,18 @@ ol { li > ul, li > ol { margin-top: 0; - margin-bottom: 0; + margin-bottom: 0; } dl { margin: 0 0 26px; - + dt { - font-weight: bold; + font-weight: bold; font-weight: 600; } dd { margin: 0 0 0 25px; - } + } } diff --git a/sass/elements/_tables.scss b/sass/elements/_tables.scss index 3aec67e..c0704ec 100644 --- a/sass/elements/_tables.scss +++ b/sass/elements/_tables.scss @@ -1,38 +1,34 @@ table { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; margin: 0 0 26px; text-align: left; width: 100%; - + a { text-decoration: none; } thead th { padding: 16px; - - @media (max-width: 768px) { - padding: 2%; - } - } - th { - border: 1px solid $color__background-hr-dark; - color: $color__text-dark; - font-weight: 600; - padding: 8px 16px; - text-transform: uppercase; - @media (max-width: 768px) { padding: 2%; - } + } } + th, td { + border: 1px solid $color__background-hr; padding: 8px 16px; @media (max-width: 768px) { padding: 2%; - } + } + } + + th { + color: $color__text-dark; + font-weight: 600; + text-transform: uppercase; } } diff --git a/sass/forms/_buttons.scss b/sass/forms/_buttons.scss index e62bf02..d3e55e0 100644 --- a/sass/forms/_buttons.scss +++ b/sass/forms/_buttons.scss @@ -10,8 +10,8 @@ input[type="submit"] { color: #fff; display: inline-block; font-size: 14px; - letter-spacing: .5px; - line-height: normal; + letter-spacing: .5px; + line-height: normal; padding: 11px 25px; text-transform: uppercase; transition: .3s; diff --git a/sass/forms/_fields.scss b/sass/forms/_fields.scss index 6afff20..a2efe54 100644 --- a/sass/forms/_fields.scss +++ b/sass/forms/_fields.scss @@ -14,28 +14,28 @@ input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { - border: 1px solid $color__background-hr-dark; + border: 1px solid darken($color__background-hr, 5%); border-radius: 2px; box-sizing: border-box; - font-weight: normal; + font-weight: normal; line-height: normal; outline: none; padding: 9px 13px 10px; transition: .3s; max-width: 100%; -webkit-appearance: none; - + &:focus { - border-color: darken($color__background-hr-dark, 7%); + border-color: darken($color__background-hr, 10%); } } input[type="checkbox"] { - margin-right: 5px; + margin-right: 5px; } select { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; max-width: 100%; } @@ -45,8 +45,8 @@ textarea { label { color: $color__text-dark; - font-size: .9em; - font-weight: 600; + font-size: .9rem; + font-weight: 600; } fieldset legend { diff --git a/sass/media/_captions.scss b/sass/media/_captions.scss index f8166ec..0abc2bb 100644 --- a/sass/media/_captions.scss +++ b/sass/media/_captions.scss @@ -7,7 +7,7 @@ } .wp-caption-text { - line-height: 3; + line-height: 3; } } diff --git a/sass/media/_flexslider.scss b/sass/media/_flexslider.scss index d9870f7..d9765f4 100644 --- a/sass/media/_flexslider.scss +++ b/sass/media/_flexslider.scss @@ -4,62 +4,62 @@ .slides, .flex-direction-nav { list-style: none; - margin: 0; + margin: 0; } .slides img { display: none; - width: 100%; + width: 100%; } .slide { background-repeat: no-repeat; display: none; overflow: hidden; - position: relative; + position: relative; } - + .flex-direction-nav a { cursor: pointer; display: block; - margin-top: -12.5px; + margin-top: -12.5px; opacity: 0; position: absolute; text-align: center; top: 50%; transition: all .3s ease-in-out; z-index: 10; - + &:hover { - + svg path { fill: rgba(255, 255, 255, .9); } } - + @at-root .flexslider:hover .flex-direction-nav a { opacity: 1; } &.flex-prev { - left: 20px; - } - + left: 20px; + } + &.flex-next { right: 20px; } &:focus { - outline: 0; + outline: 0; } svg { height: 27px; width: auto; - + path { fill: rgba(255, 255, 255, .6); - transition: .3s; + transition: .3s; } } } diff --git a/sass/media/_galleries.scss b/sass/media/_galleries.scss index fb4f682..f15feeb 100644 --- a/sass/media/_galleries.scss +++ b/sass/media/_galleries.scss @@ -20,11 +20,11 @@ .gallery-icon a { display: block; line-height: 0; - margin-bottom: 8px; + margin-bottom: 8px; } } .gallery-caption { display: block; - font-size: 13px; + font-size: 13px; } diff --git a/sass/media/_media.scss b/sass/media/_media.scss index 87eab22..ca98fd4 100644 --- a/sass/media/_media.scss +++ b/sass/media/_media.scss @@ -23,12 +23,12 @@ object { ## - Galleries --------------------------------------------------------------*/ @import "galleries"; - + /*-------------------------------------------------------------- ## - FlexSlider --------------------------------------------------------------*/ @import "flexslider"; - + /*-------------------------------------------------------------- ## - Posts Slider --------------------------------------------------------------*/ diff --git a/sass/media/_posts-slider.scss b/sass/media/_posts-slider.scss index fb779c6..5e2b867 100644 --- a/sass/media/_posts-slider.scss +++ b/sass/media/_posts-slider.scss @@ -1,24 +1,24 @@ .featured-posts-slider { margin-bottom: 60px; - + .widget_siteorigin-panels-postloop & { margin-bottom: 0; } - + .slides .slide { background-color: $color__text-medium; background-position: center; background-size: cover; height: 520px; - + @media (max-width: 768px) { - height: 380px; + height: 380px; } @media (max-width: 480px) { - height: 155px; - } - + height: 155px; + } + .overlay a { background: rgba(0, 0, 0, .5); display: block; @@ -48,24 +48,24 @@ .entry-title { font-size: 46px; - margin-bottom: 0; + margin-bottom: 0; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 3; - + @media (max-width: 768px) { font-size: 41px; line-height: 1.1; - margin-bottom: 10px; + margin-bottom: 10px; } @media (max-width: 480px) { font-size: 26px; - } + } a { color: #fff; - + &:hover { color: rgba(255, 255, 255, .8); } @@ -74,12 +74,12 @@ .entry-excerpt { color: rgba(255, 255, 255, .9); - font-size: 18px; + font-size: 18px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); @media (max-width: 768px) { - font-size: 16px; - } + font-size: 16px; + } @media (max-width: 480px) { display: none; @@ -87,8 +87,8 @@ .more-wrapper { display: none; - } - } + } + } } } } diff --git a/sass/modules/_animations.scss b/sass/modules/_animations.scss index 920f9cb..32c4376 100644 --- a/sass/modules/_animations.scss +++ b/sass/modules/_animations.scss @@ -4,10 +4,10 @@ pointer-events: none; position: absolute; right: 0; - top: 0; + top: 0; overflow: hidden; z-index: 2; - + .burst-circle { background: #000; border-radius: 10px; @@ -20,30 +20,30 @@ .#{fa}-spin { -webkit-animation: fa-spin 2s infinite linear; - animation: fa-spin 2s infinite linear; + animation: fa-spin 2s infinite linear; } @-webkit-keyframes fa-spin { 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } @keyframes fa-spin { 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - } - - 100% { - -webkit-transform: rotate(359deg); - transform: rotate(359deg); - } + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } } diff --git a/sass/modules/_contact-form-7.scss b/sass/modules/_contact-form-7.scss index e16a1db..7949771 100644 --- a/sass/modules/_contact-form-7.scss +++ b/sass/modules/_contact-form-7.scss @@ -1,5 +1,5 @@ .wpcf7 { - + div.wpcf7-response-output { margin: 0; padding: 10px 15px; diff --git a/sass/modules/_jetpack.scss b/sass/modules/_jetpack.scss index 0bbc41a..85181eb 100644 --- a/sass/modules/_jetpack.scss +++ b/sass/modules/_jetpack.scss @@ -18,12 +18,12 @@ clear: both; text-align: center; width: 100%; - + span { background: none; display: block; padding: 0; - + button { @extend .button; font-size: 1em; @@ -40,7 +40,7 @@ display: block; clear: both; width: 100%; - + .spinner { margin: 0 auto; } @@ -50,43 +50,43 @@ ## - Related Posts --------------------------------------------------------------*/ #main #jp-relatedposts { - margin-top: 0; - padding-top: 0; + margin-top: 0; + padding-top: 0; .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img { - margin-bottom: 10px; - } + margin-bottom: 10px; + } h4.jp-relatedposts-post-title { font-size: 16px; - + a { color: #2d2d2d; font-family: Montserrat,sans-serif; - font-weight: 400; - line-height: normal; - margin: 0 0 3px; - - &:hover { - text-decoration: none; - } - } - } + font-weight: 400; + line-height: normal; + margin: 0 0 3px; + + &:hover { + text-decoration: none; + } + } + } } /*-------------------------------------------------------------- ## - Sharing --------------------------------------------------------------*/ .site-content #primary .sharedaddy { - margin-bottom: 50px; + margin-bottom: 50px; h3 { @extend .underline; font-size: 16px; font-weight: 600; - line-height: $font__line-height-body; + line-height: $font__line-height-body; margin-bottom: 15px; - + &:before { content: none; } diff --git a/sass/navigation/_links.scss b/sass/navigation/_links.scss index a5435bd..2682abb 100644 --- a/sass/navigation/_links.scss +++ b/sass/navigation/_links.scss @@ -6,13 +6,13 @@ a { &:visited { color: $color__accent; } - + &:hover, &:focus, &:active { color: $color__text-medium } - + &:focus { outline: thin dotted; } diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss index 6a2d086..f6e1880 100644 --- a/sass/navigation/_menus.scss +++ b/sass/navigation/_menus.scss @@ -1,10 +1,10 @@ .main-navigation { text-align: right; - + &.widget_nav_menu { - text-align: initial; + text-align: initial; } - + > div { display: inline-block; } @@ -16,12 +16,12 @@ .sub-menu, .children { - background: #fff; - border: 1px solid $color__background-hr-dark; + background: #fff; + border: 1px solid $color__background-hr; box-shadow: 0 1px 1px rgba(0, 0, 0, .075); - opacity: 0; + opacity: 0; position: absolute; - text-align: left; + text-align: left; top: 100%; transform: scale(0.95); transition: all 0.15s ease-in; @@ -43,34 +43,34 @@ &:hover > ul, &.focus > ul { left: 100%; - } + } a { - border-bottom: 1px solid $color__background-hr; - font-size: 13px; - outline: none; - margin: 0 25px; - max-width: 100%; - padding: 10px 0; - white-space: nowrap; - + border-bottom: 1px solid $color__background-hr; + font-size: 13px; + outline: none; + margin: 0 25px; + max-width: 100%; + padding: 10px 0; + white-space: nowrap; + &:not([href]) { cursor: pointer; - } + } } &:first-of-type > a { - padding-top: 15px; + padding-top: 15px; } &:last-of-type > a { - border-bottom: none; + border-bottom: none; padding-bottom: 15px; - } + } &:only-of-type > a { padding: 15px 0; - } + } } } @@ -79,12 +79,12 @@ .sub-menu, .children { - right: 0; - + right: 0; + ul { left: initial; left: auto; - right: 100%; + right: 100%; } li { @@ -93,29 +93,29 @@ &.focus > ul { left: initial; left: auto; - right: 100%; - } + right: 100%; + } } .menu-item-has-children, .page_item_has_children { - + > a:before { content: "\f053"; - font-size: 9px; + font-size: 9px; font-family: $font__icon; line-height: normal; padding-right: 12px; position: relative; - transform: rotate(45deg); + transform: rotate(45deg); top: 0; - } + } > a:after { - content: none; + content: none; } - } - } + } + } } // If a class of 'left' is added to a sub-menu item, break drop down menu items to the left. @@ -123,20 +123,20 @@ &.menu-item-has-children, &.page_item_has_children { - + > a:before { content: "\f053"; - font-size: 9px; + font-size: 9px; font-family: $font__icon; line-height: normal; padding-right: 12px; position: relative; - transform: rotate(45deg); + transform: rotate(45deg); top: 0; - } + } > a:after { - content: none; + content: none; } } @@ -144,7 +144,7 @@ .children { left: initial; left: auto; - right: 100%; + right: 100%; li { @@ -152,11 +152,11 @@ &.focus > ul { left: initial; left: auto; - right: 100%; - } + right: 100%; + } } - } - } + } + } // If a class of .menu-button is added to a menu item, style it as a button. .menu-button { @@ -166,19 +166,19 @@ a { background: $color__accent; border-radius: 2px; - color: #fff; + color: #fff; display: inline-block; font-size: .95em; - letter-spacing: .5px; + letter-spacing: .5px; line-height: normal; padding: 6.5px 13px 5.5px; - + &:hover { background-color: rgba(77, 143, 251, .8); color: #fff; - } - } - } + } + } + } @at-root body.no-touch & { @@ -208,72 +208,72 @@ &:after { content: ''; } - } + } li:hover > ul, li.focus > ul { opacity: 1; transform: scale(1); - visibility: visible; + visibility: visible; } .menu-item-has-children, .page_item_has_children { - + > a:after { content: "\f078"; - font-size: 10px; + font-size: 10px; font-family: $font__icon; line-height: normal; - padding-left: 8px; - position: relative; - top: 2px; + padding-left: 8px; + position: relative; + top: 2px; } } .sub-menu, .children { - + .menu-item-has-children, .page_item_has_children { - + > a:after { content: "\f054"; - font-size: 9px; + font-size: 9px; font-family: $font__icon; line-height: normal; - padding-left: 12px; + padding-left: 12px; position: relative; top: 0; - } + } } - } + } } li { display: inline-block; - font-family: $font__headings; + font-family: $font__headings; font-size: 14px; line-height: normal; margin: 0 30px -10px 0; // Total right margin is 35px. 5px additional space per item due to inline-block. - padding: 0 0 10px; + padding: 0 0 10px; position: relative; text-align: left; - + &:last-of-type { margin-right: 0; } a { - color: $color__text-dark; + color: $color__text-dark; display: block; - font-weight: 600; - } + font-weight: 600; + } &:hover > a, &.focus > a { - color: $color__text-medium; - } + color: $color__text-medium; + } } .current a, @@ -288,44 +288,44 @@ background: none; border-radius: 0; cursor: pointer; - margin-left: 27px; + margin-left: 27px; padding: 0; position: relative; top: 3px; - + svg { height: 16px; overflow: visible; width: 16px; - + path { fill: $color__text-dark; transition: .3s; - + .overlap-light .site-header:not(.stuck) & { - fill: #fff; + fill: #fff; } .overlap-dark .site-header:not(.stuck) & { fill: #2d2d2d; - } + } } &:hover { path { fill: $color__text-medium; - + .overlap-light & { - fill: rgba(255, 255, 255, .8); + fill: rgba(255, 255, 255, .8); } .overlap-dark & { - fill: rgba(45, 45, 45, .8); - } + fill: rgba(45, 45, 45, .8); + } } - } - } + } + } } // First level items. @@ -333,32 +333,32 @@ // Overlap. .overlap-light .site-header:not(.stuck) & > a { - color: #fff; + color: #fff; } .overlap-dark .site-header:not(.stuck) & > a { - color: #2d2d2d; - } + color: #2d2d2d; + } &:hover > a, &.focus > a { - + .overlap-light .site-header:not(.stuck) & { - color: rgba(255, 255, 255, .8); + color: rgba(255, 255, 255, .8); } .overlap-dark .site-header:not(.stuck) & { - color: rgba(45, 45, 45, .8); - } - } - } + color: rgba(45, 45, 45, .8); + } + } + } // Max Mega menu #mega-menu-wrap-primary { display: inline-block; .mega-sub-menu { - + li { min-width: auto; } @@ -368,7 +368,7 @@ white-space: normal; width: auto !important; } - } + } } /*-------------------------------------------------------------- @@ -391,24 +391,24 @@ background: $color__text-dark; height: 2px; left: 8px; - max-width: 20px; + max-width: 20px; opacity: 1; position: absolute; transform: rotate(0deg); - transition: .25s ease-in-out; + transition: .25s ease-in-out; width: 100%; - + .overlap-light .site-header:not(.stuck) & { background: #fff; } .overlap-dark .site-header:not(.stuck) & { background: #2d2d2d; - } + } &:nth-child(1) { - top: 8px; - } + top: 8px; + } &:nth-child(2), &:nth-child(3) { @@ -421,11 +421,11 @@ } &.to-close span { - + &:nth-child(1) { left: 50%; - top: 14px; - width: 0; + top: 14px; + width: 0; } &:nth-child(2) { @@ -440,7 +440,7 @@ left: 50%; top: 14px; width: 0; - } + } } } @@ -456,10 +456,10 @@ -webkit-overflow-scrolling: touch; width: 100%; z-index: 10; - + &::-webkit-scrollbar { display: none; - } + } ul { list-style: none; @@ -469,7 +469,7 @@ li { font-family: $font__headings; font-size: 14px; - line-height: 3; + line-height: 3; position: relative; width: 100%; @@ -480,7 +480,7 @@ font-weight: 600; text-decoration: none; width: 100% !important; - + &:hover { color: $color__text-medium; } @@ -488,22 +488,22 @@ &.menu-item-has-children > a { padding-right: 40px; - } + } .dropdown-toggle { background: transparent; color: $color__text-dark; - font-size: 12px; + font-size: 12px; padding: 14px; position: absolute; right: 0; top: 0; transition: none; - + &:hover { color: $color__text-medium; box-shadow: none; - } + } &.toggle-open { transform: rotate(-180deg); @@ -523,31 +523,31 @@ } > ul { - margin-bottom: 15px; + margin-bottom: 15px; } .search-form { margin-bottom: 15px; width: 100%; - + &[style] { margin-top: 0 !important; } - + input[type="search"] { - width: 100%; + width: 100%; } - } + } } $sel: ''; @for $i from 1 through 5 { $sel: if($i == 1, "#mobile-navigation", selector-nest($sel, "ul")) !global; - + #{$sel} { - ul ul li a { - padding-left: 25px * $i; - } + ul ul li a { + padding-left: 25px * $i; + } } } @@ -559,50 +559,50 @@ $sel: ''; .post-navigation { @include clearfix; margin: 0 0 50px; - width: 100%; + width: 100%; .nav-previous { float: left; text-align: left; width: 50%; - + @media (max-width: 768px) { float: none; margin-bottom: 25px; - } + } } .nav-next { float: right; text-align: right; width: 50%; - + @media (max-width: 768px) { float: none; text-align: left; - } + } } } -.pagination { +.pagination { text-align: center; .page-numbers { @extend .button; - background: $color__background-hr-dark; + background: $color__background-hr; color: $color__text-medium; display: inline-block; margin-right: 3px; padding-right: 16px; - padding-left: 16px; - + padding-left: 16px; + &:visited { color: $color__text-medium; - } + } &:hover { background: $color__accent; - color: #fff; + color: #fff; } &.next, @@ -610,7 +610,7 @@ $sel: ''; font-size: 14px; line-height: 1.3; padding: 11px 13px; - + span:before { position: relative; top: 1px; @@ -620,16 +620,16 @@ $sel: ''; &.dots { background: none; font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif; - font-size: 13px; + font-size: 13px; padding-right: 0; - padding-left: 0; - + padding-left: 0; + &:hover { background: none; box-shadow: none; color: $color__text-medium; } - } + } } .current { @@ -639,27 +639,27 @@ $sel: ''; } .site-content .post-navigation { - font-size: 16px; + font-size: 16px; a { color: $color__text-medium; - font-weight: bold; - font-weight: 600; + font-weight: bold; + font-weight: 600; &:hover { color: $color__accent; } .sub-title { - border-bottom: 2px solid $color__background-hr-dark; + border-bottom: 2px solid $color__background-hr; color: $color__text-light; display: inline-block; - font-size: 14px; + font-size: 14px; font-weight: normal; text-transform: uppercase; line-height: normal; margin-bottom: 10px; - padding-bottom: 3px; + padding-bottom: 3px; } div { @@ -671,31 +671,31 @@ $sel: ''; .comment-navigation { text-transform: capitalize; margin: 25px 0; - + span { font-size: 13px; position: relative; right: 0; top: 0; - + &.icon-long-arrow-left { - padding-right: 3px; + padding-right: 3px; } &.icon-long-arrow-right { - padding-left: 3px; - } - } - + padding-left: 3px; + } + } + a { color: $color__text-dark; - font-weight: bold; - font-weight: 600; - + font-weight: bold; + font-weight: 600; + &:hover { color: $color__accent; } - } + } } /*-------------------------------------------------------------- @@ -703,16 +703,16 @@ $sel: ''; --------------------------------------------------------------*/ .footer-menu { float: right; - font-size: 13px; - text-align: right; - width: 70%; - + font-size: 13px; + text-align: right; + width: 70%; + @media (max-width: 768px) { float: none; padding-top: 15px; text-align: center; width: 100%; - } + } .menu { list-style: none; @@ -720,9 +720,9 @@ $sel: ''; li { display: inline-block; - font-size: 13px; - margin-right: 30px; - vertical-align: middle; + font-size: 13px; + margin-right: 30px; + vertical-align: middle; &:last-of-type { margin-right: 0; @@ -731,7 +731,7 @@ $sel: ''; margin-right: 0; } } - } + } } } @@ -742,15 +742,15 @@ $sel: ''; a[href*="behance.net"], a[href*="codepen.io"], a[href*="delicious.com"], a[href*="deviantart.com"], a[href*="digg.com"], a[href*="dribbble.com"], a[href*="facebook.com"], a[href*="flickr.com"], a[href*="foursquare.com"], a[href*="github.com"], a[href*="plus.google.com"], a[href*="instagram.com"], a[href*="linkedin.com"], a[href*="pinterest.com"], a[href*="reddit.com"], a[href*="soundcloud.com"], a[href*="stackexchange.com"], a[href*="stackoverflow.com"], a[href*="tumblr.com"], a[href*="twitter.com"], a[href*="vimeo.com"], a[href*="vine.co"], a[href*="vk.com"], a[href*="weibo.com"], a[href*="wordpress.com"], a[href*="xing"], a[href*="yelp"], a[href*="youtube.com"] { font-size: 0; - margin-right: -16px; + margin-right: -16px; text-align: center; - + &:before { font-family: $font__icon; font-size: 18px; transition: .2s; } - } + } a[href*="behance.net"]:before { content: "\f1b4"; @@ -760,29 +760,29 @@ $sel: ''; content: "\f1cb"; } - a[href*="delicious.com"]:before { + a[href*="delicious.com"]:before { content: "\f1a5"; - } + } a[href*="deviantart.com"]:before { content: "\f1bd"; - } + } a[href*="digg.com"]:before { content: "\f1a6"; - } + } a[href*="dribbble.com"]:before { content: "\f17d"; - } + } a[href*="facebook.com"]:before { content: "\f09a"; - } + } a[href*="flickr.com"]:before { content: "\f16e"; - } + } a[href*="foursquare.com"]:before { content: "\f180"; @@ -790,55 +790,55 @@ $sel: ''; a[href*="github.com"]:before { content: "\f09b"; - } + } a[href*="plus.google.com"]:before { content: "\f0d5"; - } + } a[href*="instagram.com"]:before { content: "\f16d"; - } + } a[href*="linkedin.com"]:before { content: "\f0e1"; - } + } a[href*="pinterest.com"]:before { content: "\f0d2"; - } + } a[href*="reddit.com"]:before { content: "\f1a1"; - } + } a[href*="soundcloud.com"]:before { content: "\f1be"; - } + } a[href*="stackexchange.com"]:before { content: "\f18d"; - } + } a[href*="stackoverflow.com"]:before { content: "\f16c"; - } + } a[href*="tumblr.com"]:before { content: "\f173"; - } + } a[href*="twitter.com"]:before { content: "\f099"; - } + } a[href*="vimeo.com"]:before { content: "\f194"; - } + } a[href*="vine.co"]:before { content: "\f1ca"; - } + } a[href*="vk.com"]:before { content: "\f189"; @@ -846,7 +846,7 @@ $sel: ''; a[href*="weibo.com"]:before { content: "\f18a"; - } + } a[href*="wordpress.com"]:before { content: "\f19a"; @@ -858,9 +858,9 @@ $sel: ''; a[href*="yelp.com"]:before { content: "\f1e9"; - } + } a[href*="youtube.com"]:before { content: "\f16a"; - } + } } diff --git a/sass/navigation/_scroll-to-top.scss b/sass/navigation/_scroll-to-top.scss index 183e424..59f7d3a 100644 --- a/sass/navigation/_scroll-to-top.scss +++ b/sass/navigation/_scroll-to-top.scss @@ -9,12 +9,12 @@ padding-top: 15px; position: fixed; right: 20px; - transform: scale(0); - transition: .2s; + transform: scale(0); + transition: .2s; text-align: center; - width: 45px; + width: 45px; z-index: 101; - + svg path { fill: #fff; } @@ -25,11 +25,11 @@ height: 15px; opacity: .6; transition: .3s; - width: 15px; + width: 15px; } &:hover { - + svg { opacity: .9; } @@ -37,6 +37,6 @@ &.show { opacity: 1; - transform: scale(1); + transform: scale(1); } } diff --git a/sass/site/_footer.scss b/sass/site/_footer.scss index 6851e76..3b1a6f3 100644 --- a/sass/site/_footer.scss +++ b/sass/site/_footer.scss @@ -1,19 +1,19 @@ .site-footer { background: #fff; margin-top: 75px; - + &.footer-active-sidebar { - border-top: 1px solid $color__background-hr-dark; + border-top: 1px solid $color__background-hr; } .no-footer-margin & { margin-top: 0; - } - + } + .widgets { @include clearfix; padding: 50px 0; - width: 100%; + width: 100%; @for $i from 1 through 10 { $margin: ($i - 1) * 2.75; @@ -33,9 +33,9 @@ @media (max-width: 768px) { float: none; - margin-bottom: 25px; + margin-bottom: 25px; width: 100% !important; - + &:last-of-type { margin-bottom: 0; } @@ -45,19 +45,19 @@ .site-info { float: left; - font-size: 13px; + font-size: 13px; text-align: left; width: 30%; - + @media (max-width: 768px) { float: none; text-align: center; width: 100%; - } + } } .bottom-bar { - border-top: 1px solid $color__background-hr-dark; + border-top: 1px solid $color__background-hr; overflow: auto; padding: 25px 0; @@ -69,7 +69,7 @@ a { color: inherit; - + &:hover { color: $color__accent; } diff --git a/sass/site/_header.scss b/sass/site/_header.scss index faa5959..9d37496 100644 --- a/sass/site/_header.scss +++ b/sass/site/_header.scss @@ -1,6 +1,6 @@ .site-header { background: #fff; - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; margin-bottom: 60px; padding: 25px 0; position: relative; @@ -12,7 +12,7 @@ border: none; position: absolute; } - + .no-header-margin & { margin-bottom: 0; } @@ -32,38 +32,38 @@ @media (max-width: 782px) { top: 46px; } - } + } } - + @media (max-width: 600px) { @at-root .admin-bar .site-header.sticky.stuck { top: 0; - } - } + } + } // A class added after scroll. &.stuck { - box-shadow: 0 1px 1px rgba(0, 0, 0, .075); - } + box-shadow: 0 1px 1px rgba(0, 0, 0, .075); + } .site-header-inner { -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; - align-items: center; + align-items: center; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; - + @at-root .centered#{&} { flex-direction: column; } } - + .site-branding { padding-right: 20px; @@ -73,34 +73,33 @@ font-size: 29px; line-height: normal; margin: 0; - + a { - color: $color__text-dark; - } + color: $color__text-dark; + } } .custom-logo-link { display: block; - line-height: 0; } img { display: inline-block; vertical-align: middle; - + @at-root .tagline#{&} { padding-bottom: 5px; - } + } } .site-description { - color: $color__text-medium; + color: $color__text-medium; font-family: $font__headings; - font-weight: normal; - font-size: 13px; + font-weight: normal; + font-size: 13px; line-height: normal; - margin: 0; - } + margin: 0; + } > * { transform-origin: left center; @@ -108,7 +107,7 @@ @at-root .centered#{&} { transform-origin: center center; } - } + } } #header-search { @@ -120,14 +119,14 @@ top: 0; width: 100%; z-index: 99999; - + body[class*="overlap-"] & { background: transparent; - } - + } + .polestar-container { height: 100%; - } + } form { background: #fff; @@ -139,17 +138,17 @@ } input[type="search"] { - background: rgba(0, 0, 0, .035); + background: rgba(0, 0, 0, .055); border: 0; box-sizing: border-box; - height: 48px; + height: 48px; padding: 0 15px; right: 15px; width: 100%; - + &:-webkit-autofill { - -webkit-box-shadow: 0 0 0 50px #f6f6f6 inset !important; - } + -webkit-box-shadow: 0 0 0 50px $color__background-hr inset !important; + } } button[type="submit"] { @@ -162,8 +161,8 @@ position: absolute; right: 20px; top: 50%; - transform: scale(0, 0); - transition: .35s; + transform: scale(0, 0); + transition: .35s; svg { height: 24px; @@ -171,25 +170,25 @@ body[class*="overlap-"] & { background: #fff; - border-radius: 50%; - } + border-radius: 50%; + } path { transition: .3s; - fill: $color__text-dark; + fill: $color__text-dark; } &:hover { path { - fill: $color__text-medium; + fill: $color__text-medium; } - } + } } &.animate-in { transform: scale(1, 1); - } + } } } @@ -223,7 +222,7 @@ .main-navigation { text-align: center; } - } + } } .widgets { @@ -237,10 +236,10 @@ -webkit-justify-content: space-between; justify-content: space-between; width: 100%; - + @media (max-width: 768px) { flex-direction: column; - } + } @for $i from 1 through 10 { $margin: ($i - 1) * 2.75; @@ -261,7 +260,7 @@ margin-bottom: 5%; text-align: center; width: 100% !important; - + &:last-of-type { margin-bottom: 0; } @@ -270,15 +269,15 @@ .widget-title { font-size: 16px; margin: 0 0 5px; - + // Set the font size of elements below the widget title to 14px. ~ * { font-size: 14px; - } + } } .textwidget { - font-size: 14px; + font-size: 14px; } p:only-of-type, @@ -291,10 +290,10 @@ } input[type="search"] { - font-size: 14px; + font-size: 14px; } } - } + } } // Overlap. @@ -317,11 +316,11 @@ // Sticky header sentinel. .masthead-sentinel { margin-bottom: 60px; - + body[class*="overlap-"] & { display: none; } - + .no-header-margin & { margin-bottom: 0; } diff --git a/sass/site/_layout.scss b/sass/site/_layout.scss index 1e33785..ec0079e 100644 --- a/sass/site/_layout.scss +++ b/sass/site/_layout.scss @@ -3,8 +3,8 @@ max-width: 1190px; // 1140px container. padding: 0 25px; position: relative; - width: 100%; - + width: 100%; + .full-width & { max-width: none; } @@ -16,20 +16,20 @@ // Content area without sidebar. .content-area { - width: 100%; + width: 100%; } // Content area with sidebar. .sidebar .content-area { float: left; - width: 70%; - + width: 70%; + @at-root .sidebar-left#{&} { float: right; - } - + } + @media (max-width: 768px) { - width: 100%; + width: 100%; } } @@ -37,7 +37,7 @@ .page-layout-no-sidebar .site-content .content-area, .page-layout-stripped .site-content .content-area { float: none; - width: 100%; + width: 100%; } // Full Width page layout setting. @@ -45,12 +45,12 @@ .site-content .content-area { float: none; - width: 100%; + width: 100%; } .site-content .polestar-container { max-width: none; - padding: 0; + padding: 0; } } @@ -59,7 +59,7 @@ float: none; margin: 0 auto; max-width: 870px; - width: 100%; + width: 100%; } // Sidebar. @@ -67,17 +67,17 @@ float: right; padding-left: 4%; width: 30%; - + .sidebar-left & { float: left; - padding-right: 4%; - padding-left: 0; - } - + padding-right: 4%; + padding-left: 0; + } + @media (max-width: 768px) { - border-top: 1px solid $color__background-hr-dark; - margin-top: 50px; - padding: 50px 0 0; + border-top: 1px solid $color__background-hr; + margin-top: 50px; + padding: 50px 0 0; width: 100%; } } diff --git a/sass/site/primary/_comments.scss b/sass/site/primary/_comments.scss index a7ce738..1e3f2b1 100644 --- a/sass/site/primary/_comments.scss +++ b/sass/site/primary/_comments.scss @@ -2,28 +2,46 @@ margin: 0 0 30px; padding: 0; + ol.children { + margin: 0; + } + + @media (min-width: 1025px) { + + li .comment { + margin-left: 80px; + } + } + .comment, .pingback { color: $color__text-medium; display: block; - + .comment-box { border-bottom: 1px solid $color__background-hr; padding: 25px 0; } - .comment-container { - margin-left: 80px; + @media (min-width: 481px) { + + .comment-container { + margin-left: 80px; + } } .avatar-container { float: left; + + @media (max-width: 480px) { + display: none; + } img { display: block; border-radius: 50%; } - } + } .info { line-height: normal; @@ -32,13 +50,13 @@ .author { color: $color__text-dark; - font-size: 14px; + font-size: 14px; font-weight: 600; a { color: $color__text-dark; text-decoration: none; - + &:hover { color: $color__text-medium; } @@ -48,21 +66,21 @@ content: "\f040"; font-family: $font__icon; font-size: 14px; - margin-right: 5px; - } - } + margin-right: 5px; + } + } .date { color: $color__text-light; - font-size: 13px; + font-size: 13px; } .comment-content { font-size: 14px; - + p { - margin-bottom: 15px; - } + margin-bottom: 15px; + } a { word-wrap: break-word; @@ -70,36 +88,30 @@ .comment-awaiting-moderation { font-weight: bold; - font-weight: 600; + font-weight: 600; } - } + } .comment-reply-link { color: $color__text-dark; font-size: 12px; - font-weight: bold; - font-weight: 600; + font-weight: bold; + font-weight: 600; line-height: normal; text-transform: uppercase; &:hover { color: $color__accent; } - } - - @media (min-width: 481px) { - .children { - margin-left: 5px; - } } } .pingback { list-style: none; - + .comment-container { list-style: none; - margin-left: 0; + margin-left: 0; } } } @@ -117,25 +129,25 @@ .comment-reply-title { margin-bottom: 15px; - + #cancel-comment-reply-link { color: $color__text-light; - font-family: $font__main; - font-size: 13px; + font-family: $font__main; + font-size: 13px; margin-left: .5em; - text-transform: none; - + text-transform: none; + &:hover { color: $color__accent; } - } + } } #commentform { p { line-height: normal; - margin-bottom: 25px; + margin-bottom: 25px; } label { @@ -147,10 +159,10 @@ textarea { width: 100%; - } + } - .comment-form-author, - .comment-form-email, + .comment-form-author, + .comment-form-email, .comment-form-url { box-sizing: border-box; float: left; @@ -167,21 +179,21 @@ .comment-form-email { margin: 0 3.5% 25px; - + @media (max-width: 768px) { margin: 0 0 25px; - } + } } - .comment-notes, + .comment-notes, .logged-in-as { font-size: 13px; line-height: 1.6875; - + a { color: $color__text-medium; text-decoration: none; - + &:hover { color: $color__accent; } @@ -192,48 +204,50 @@ align-items: center; clear: both; display: flex; - + margin: 0 0 8px; + input { line-height: 1; margin-right: 5px; } - + label { display: inline-block; font-weight: normal; margin-bottom: 0; } - } + } .form-submit { - margin: 0; + margin: 25px 0 0; clear: both; } // Jetpack Subscriptions. .comment-subscription-form { - margin: 15px 0 8px; - - ~ p { - margin-top: 0; + display: block; + clear: both; + margin: 0 0 8px; + overflow: auto; + + input { + margin-right: 0; } - + label { - color: $color__text-medium; - font-size: 13px; font-weight: normal; - } - } + } + } } .no-comments { - font-size: 14px; - font-weight: bold; + font-size: 14px; + font-weight: bold; font-weight: 600; - margin: 0; + margin: 0; } .commentform-error { font-size: 14px; - margin: 0 0 25px; + margin: 0 0 25px; } diff --git a/sass/site/primary/_posts-and-pages.scss b/sass/site/primary/_posts-and-pages.scss index 9f66391..a369de3 100644 --- a/sass/site/primary/_posts-and-pages.scss +++ b/sass/site/primary/_posts-and-pages.scss @@ -1,8 +1,8 @@ .hentry { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; margin: 0 0 50px; padding: 0 0 25px; - + &:last-of-type { border: 0; padding: 0; @@ -10,7 +10,7 @@ &:only-of-type { border: 0; - margin: 0; + margin: 0; padding: 0; margin: 0; } @@ -46,7 +46,7 @@ color: $color__text-light; font-size: 13px; position: relative; - + a { color: inherit; text-decoration: none; @@ -62,19 +62,19 @@ display: inline-block; font-family: $font__icon; font-size: 4px; - height: 5px; + height: 5px; line-height: normal; - margin: 0; - text-align: center; - vertical-align: middle; - width: 20px; - } + margin: 0; + text-align: center; + vertical-align: middle; + width: 20px; + } &:only-of-type:after, &:last-of-type:after { - content: none; + content: none; } - } + } .updated:not(.published) { display: none; @@ -89,7 +89,7 @@ .entry-thumbnail, .entry-video, .gallery-format-slider { - margin-bottom: 25px; + margin-bottom: 25px; } .entry-thumbnail { @@ -98,20 +98,20 @@ margin-left: auto; position: relative; text-align: center; - width: 100%; - + width: 100%; + .thumbnail-meta { display: block; - left: 10px; + left: 10px; position: absolute; top: 10px; - z-index: 1; + z-index: 1; ul { display: inline-block; list-style: none; margin: 0 5px 0 0; - + li { background: rgba(0, 0, 0, .8); color: #fff; @@ -122,21 +122,21 @@ a { color: #fff; - line-height: normal; + line-height: normal; } } } - } - + } + .overlay { height: 100%; - left: 0; - position: absolute; - top: 0; - transition: .3s; - width: 100%; - z-index: 0; - + left: 0; + position: absolute; + top: 0; + transition: .3s; + width: 100%; + z-index: 0; + @at-root .entry-thumbnail:hover .overlay { background: rgba(0, 0, 0, .2); } @@ -149,71 +149,71 @@ height: 60px; left: 50%; margin: -30px 0 0 -30px; - padding: 16px 0 0 0; + padding: 16px 0 0 0; position: absolute; top: 50%; transition: all .15s; transform: scale(0, 0); width: 60px; z-index: 5; - + @media (max-width: 480px) { height: 52px; margin: -26px 0 0 -26px; padding: 13.5px 0 0 0; - width: 52px; + width: 52px; } - + @at-root .entry-thumbnail:hover .icon-add { transform: scale(1, 1) } - + svg { height: 30px; - margin-right: -15.6px; + margin-right: -15.6px; position: absolute; right: 50%; width: 30px; - + @media (max-width: 480px) { height: 26px; - margin-right: -13.5px; - width: 26px; - } + margin-right: -13.5px; + width: 26px; + } path { fill: #fff; opacity: .7; - } + } } } - + a { display: block; - line-height: 0; + line-height: 0; } } .site-content .more-wrapper { display: block; font-size: 14px; - + span { font-size: 13px; position: relative; - right: -4px; - top: 1.5px; - } - + right: -4px; + top: 1.5px; + } + a { color: $color__text-dark; font-weight: 600; - + &:hover { color: $color__accent; } } -} +} .page-links { text-align: left; @@ -222,10 +222,10 @@ background: none; color: $color__text-dark; font-size: 14px; - font-weight: 600; + font-weight: 600; padding: 0; text-transform: none; - + &:hover { background: none; color: $color__text-medium; @@ -236,19 +236,19 @@ @extend .button; margin-right: 3px; padding-right: 17px; - padding-left: 17px; + padding-left: 17px; } a span { - background: $color__background-hr-dark; + background: $color__background-hr; display: inline-block; color: $color__text-medium; - + &:hover { background: $color__accent; color: #fff; } - } + } } .single .entry-footer { @@ -256,11 +256,11 @@ } .tags-links a { - background: $color__background-hr-dark; + background: $color__background-hr; border-radius: 2px; color: $color__text-medium; display: inline-block; - font-size: 13px; + font-size: 13px; line-height: normal; margin: 0 6px 8px 0; padding: 6px 10px; @@ -277,15 +277,15 @@ --------------------------------------------------------------*/ .page-header { margin-bottom: 25px; - + .page-title { - margin-top: 0; + margin-top: 0; } } .archive:not(.woocommerce) .page-title { @extend .underline; - font-size: 18px; + font-size: 18px; margin: 0; } @@ -293,7 +293,7 @@ .search-results { .page-header { - margin-bottom: 35px; + margin-bottom: 35px; } .page-title { @@ -301,8 +301,8 @@ } .taxonomy-description { - font-size: 13px; - margin-top: 15px; + font-size: 13px; + margin-top: 15px; } } @@ -313,23 +313,22 @@ } article { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; margin: 0 0 50px; padding: 0 0 30px; - + &:last-of-type { border: 0; } &:only-of-type { border: 0; - margin: 0; + margin: 0; } } } - -.search-results { +.search-results { .hentry { overflow: auto; @@ -343,7 +342,7 @@ float: left; margin: 0 4% 0 0; width: 40%; - + @media (max-width: 1024px) { float: none; margin-bottom: 25px; @@ -370,14 +369,14 @@ box-sizing: border-box; float: right; width: 56%; - + @media (max-width: 1024px) { float: none; width: 100%; - } + } } - } - } + } + } } /*-------------------------------------------------------------- @@ -385,7 +384,7 @@ --------------------------------------------------------------*/ .search-form { display: inline-block; - position: relative; + position: relative; input[type="search"] { min-width: 300px; @@ -403,7 +402,7 @@ svg { height: 16px; width: 16px; - + path { fill: $color__text-light; } @@ -417,68 +416,68 @@ .author-box { display: table; border: 2px solid $color__background-hr; - border-right: 0; + border-right: 0; border-left: 0; margin: 0; padding: 30px 0; - margin-bottom: 50px; + margin-bottom: 50px; width: 100%; .author-avatar { display: table-cell; vertical-align: top; width: 105px; - + @media (max-width: 480px) { display: block; - width: 100%; + width: 100%; } img { border-radius: 40px; - display: block; + display: block; height: 80px; width: 80px; - + @media (max-width: 480px) { margin: 0 0 15px; - } + } } } .author-description { display: table-cell; vertical-align: top; - + @media (max-width: 480px) { display: block; - width: 100%; - } - + width: 100%; + } + h3 { font-size: 18px; line-height: normal; - margin: 0; + margin: 0; } span { display: block; - font-size: 13px; - margin-bottom: 10px; - + font-size: 13px; + margin-bottom: 10px; + a { - color: $color__text-medium; - + color: $color__text-medium; + &:hover { color: $color__accent; - } + } } } div { - font-size: 14px; - } + font-size: 14px; + } } } @@ -499,13 +498,13 @@ list-style: none; margin: 0; padding: 0; - width: 100%; + width: 100%; li { display: block; float: left; margin: 0 0 25px 0; - width: 31%; + width: 31%; @media (max-width: 480px) { width: 100%; @@ -513,7 +512,7 @@ &:nth-child(3n+1) { margin-right: 3.5%; - + @media (max-width: 480px) { margin-right: 0; } @@ -521,28 +520,28 @@ &:nth-child(3n+3) { margin-left: 3.5%; - + @media (max-width: 480px) { - margin-left: 0; - } + margin-left: 0; + } } &:only-child { margin: 0; - } + } a { display: block; - line-height: 0; + line-height: 0; text-decoration: none; } img { - margin-bottom: 10px; + margin-bottom: 10px; } .related-post-title { - font-size: 16px; + font-size: 16px; line-height: normal; margin: 0 0 3px; @@ -555,9 +554,9 @@ color: $color__text-light; font-size: 13px; font-weight: normal; - line-height: normal; + line-height: normal; margin: 0; - + &:hover { color: $color__accent; } diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss index acf7735..6cf80bc 100644 --- a/sass/site/secondary/_widgets.scss +++ b/sass/site/secondary/_widgets.scss @@ -1,4 +1,4 @@ -.widget-area .widget, +.widget-area .widget, .site-footer .widget { margin: 0 0 45px; @@ -7,11 +7,11 @@ font-size: 16px; margin: 0 0 20px; text-transform: uppercase; - + // Set the font size of elements below the widget title to 14px. ~ * { font-size: 14px; - } + } } a { @@ -27,21 +27,21 @@ &:hover { color: #fff; - } + } } ul { list-style: none; margin: 0; - + li { line-height: 2; - } - } + } + } input { font-size: 14px; - } + } } /*-------------------------------------------------------------- @@ -50,11 +50,11 @@ .widget #wp-calendar { border: 0; margin: 0; - + caption { color: $color__text-dark; - font-size: 14px; - font-weight: bold; + font-size: 14px; + font-weight: bold; font-weight: 600; text-align: left; } @@ -63,7 +63,7 @@ background: none; } - th, + th, td { border: 0; padding: 0; @@ -83,7 +83,7 @@ } tbody { - font-size: 13px; + font-size: 13px; .pad { background: none; @@ -93,30 +93,30 @@ padding-top: 8px; } - td { + td { padding-bottom: 8px; text-align: center; - } + } } - + tfoot { - font-size: 13px; + font-size: 13px; - #prev, + #prev, #next { - padding-top: 4px; - + padding-top: 4px; + a { color: $color__text-dark; &:hover { color: $color__accent; - } + } } } #next { - text-align: right; + text-align: right; } } } @@ -129,7 +129,7 @@ li { color: $color__text-light; - + a { color: $color__text-dark; display: inline-block; @@ -138,12 +138,11 @@ span { color: $color__text-light; - } + } .children { margin-left: 12px; } - } } @@ -158,7 +157,7 @@ @at-root #secondary & { min-width: 0; - } + } } } diff --git a/sass/typography/_copy.scss b/sass/typography/_copy.scss index 34c2c37..e925fea 100644 --- a/sass/typography/_copy.scss +++ b/sass/typography/_copy.scss @@ -2,9 +2,9 @@ p { margin: 0 0 26px; } -dfn, -cite, -em, +dfn, +cite, +em, i { font-style: italic; } @@ -12,10 +12,10 @@ i { blockquote { border-left: 3px solid $color__accent; font-style: italic; - font-size: 16px; - margin: 0 0 26px; + font-size: 16px; + margin: 0 0 26px; padding: 15px 0 15px 25px; - + p { margin-bottom: 0; } @@ -24,9 +24,9 @@ blockquote { color: $color__text-medium; display: block; font-weight: bold; - font-weight: 600; - font-size: 16px; - margin-top: 15px; + font-weight: 600; + font-size: 16px; + margin-top: 15px; } } @@ -36,22 +36,22 @@ address { pre { background: $color__background-pre; - font: 14px $font__pre; - line-height: $font__line-height-pre; + font: 14px $font__pre; + line-height: $font__line-height-pre; margin-bottom: 26px; max-width: 100%; overflow: auto; padding: 25px; } -code, -kbd, -tt, +code, +kbd, +tt, var { font: 14px $font__code; } -abbr, +abbr, acronym { border-bottom: 1px dotted $color__text-medium; cursor: help; @@ -61,7 +61,7 @@ abbr[title] { border-bottom: none; } -mark, +mark, ins { background: $color__background-ins; text-decoration: none; diff --git a/sass/typography/_headings.scss b/sass/typography/_headings.scss index 6dd5b50..198b4d9 100644 --- a/sass/typography/_headings.scss +++ b/sass/typography/_headings.scss @@ -41,7 +41,7 @@ h6 { } .underline { - border-bottom: 2px solid $color__background-hr-dark; + border-bottom: 2px solid $color__background-hr; display: inline-block; margin: 0 0 20px; padding-bottom: 3px; diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss index ca48092..3617343 100644 --- a/sass/typography/_typography.scss +++ b/sass/typography/_typography.scss @@ -1,5 +1,5 @@ html { - font-size: 93.8%; + font-size: 93.8%; } body, @@ -12,7 +12,7 @@ textarea { font-size: 15px; font-family: $font__main; @include font-smoothing(subpixel-antialiased); - line-height: $font__line-height-body; + line-height: $font__line-height-body; } @import "headings"; diff --git a/sass/variables-site/_colors.scss b/sass/variables-site/_colors.scss index 7e60e4d..8cbe27d 100644 --- a/sass/variables-site/_colors.scss +++ b/sass/variables-site/_colors.scss @@ -4,8 +4,7 @@ $color__background-pre: #eee; $color__background-ins: #fff9c0; // Border colors. -$color__background-hr: #f6f6f6; -$color__background-hr-dark: #ebebeb; +$color__background-hr: #e6e6e6; // Accent color. $color__accent: #4d8ffb; diff --git a/sass/woocommerce/_archive.scss b/sass/woocommerce/_archive.scss index c8b00ec..8a9ef2f 100644 --- a/sass/woocommerce/_archive.scss +++ b/sass/woocommerce/_archive.scss @@ -13,16 +13,16 @@ @media (max-width: 768px) { @at-root .woocommerce.archive .page-title { - font-size: 26px; + font-size: 26px; } - } + } @media (max-width: 480px) { @at-root .woocommerce.archive .page-title { - font-size: 23px; + font-size: 23px; } - } + } } // Result count. @@ -32,13 +32,13 @@ display: flex; float: left; font-size: 13px; - height: 37px; + height: 37px; justify-content: left; text-align: left; @media (max-width: 768px) { float: none; - margin-bottom: 15px; + margin-bottom: 15px; } } @@ -48,7 +48,7 @@ float: right; select { - font-size: 13px; + font-size: 13px; } @media (max-width: 768px) { @@ -56,7 +56,7 @@ } .ordering-selector-wrapper { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; border-radius: 2px; cursor: pointer; font-size: 13px; @@ -97,7 +97,7 @@ .ordering-dropdown { background: #fff; - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; box-shadow: 0 1px 1px rgba(0, 0, 0, .07); display: block; list-style: none; @@ -108,7 +108,7 @@ top: 0; transition: all 0.15s ease-in; transform-origin: center top; - transform: scale(0.95); + transform: scale(0.95); visibility: hidden; width: 100%; @@ -130,7 +130,7 @@ .ordering-dropdown { opacity: 1; transform: scale(1); - visibility: visible; + visibility: visible; } svg { @@ -139,7 +139,7 @@ path { fill: $color__text-dark; } - } + } } } } @@ -149,18 +149,18 @@ background: $color__accent; color: #fff; font-size: 12px; - left: 10px; - line-height: normal; + left: 10px; + line-height: normal; padding: 6px 12px 5px; position: absolute; text-transform: uppercase; - top: 10px; - z-index: 1; + top: 10px; + z-index: 1; } // Star Rating. .star-rating { - color: $color__accent; + color: $color__accent; font-family: 'star'; font-size: 1em; height: 1em; @@ -213,7 +213,7 @@ // Remove the products list top padding within the Infinite Wrap container if we're using Jetpack Infinite Scroll. @at-root .post-type-archive-product .infinite-wrap .products { padding-top: 0; - } + } @at-root .tax-product_cat#{&} { padding-top: 30px; @@ -228,68 +228,68 @@ @at-root .columns-1#{&} { float: none; - margin-right: 0; - } + margin-right: 0; + } @at-root .columns-2#{&} { width: 48.25%; - @media (min-width: 769px) { + @media (min-width: 769px) { &:nth-of-type(2n+2) { - margin-right: 0; + margin-right: 0; } &:nth-child(2n+3) { clear: left; - } - } + } + } } @at-root .columns-3#{&} { - width: 31%; + width: 31%; - @media (min-width: 769px) { + @media (min-width: 769px) { &:nth-of-type(3n+3) { - margin-right: 0; - } + margin-right: 0; + } &:nth-child(3n+4) { clear: left; - } - } - } + } + } + } @at-root .columns-4#{&} { width: 22.375%; - @media (min-width: 769px) { + @media (min-width: 769px) { &:nth-of-type(4n+4) { - margin-right: 0; + margin-right: 0; } &:nth-child(4n+5) { clear: left; - } - } - } + } + } + } @at-root .columns-5#{&} { width: 17.2%; - @media (min-width: 769px) { + @media (min-width: 769px) { &:nth-of-type(5n+5) { - margin-right: 0; - } + margin-right: 0; + } &:nth-child(5n+6) { clear: left; - } - } - } + } + } + } @media (max-width: 768px) { @@ -300,13 +300,12 @@ .columns-5#{&} { width: 48.25%; } - } + } &:nth-of-type(2n+2) { margin-right: 0; - } - - } + } + } @media (max-width: 480px) { @@ -317,7 +316,7 @@ .columns-5#{&} { width: 100%; } - } + } } // Product thumbnail container. @@ -349,10 +348,9 @@ opacity: 1; visibility: visible; } - } } - } + } // Product image. img { @@ -364,17 +362,17 @@ // Product or category title. .woocommerce-loop-product__title, .woocommerce-loop-category__title { - font-size: 1.0666em; + font-size: 1.0666em; margin: 15px 0 5px; @at-root { .wc-columns-2#{&} { - font-size: 1.2em; + font-size: 1.2em; } .wc-columns-5#{&} { - font-size: 1em; + font-size: 1em; } } @@ -404,42 +402,41 @@ @at-root { .wc-columns-2#{&} { - font-size: 1.0666em; + font-size: 1.0666em; } - .wc-columns-5#{&} { - font-size: 0.8666em; - } - } + font-size: 0.8666em; + } + } } // Add to Cart and Quick View buttons. .button, .added_to_cart { font-size: .9333em; - left: 50%; + left: 50%; opacity: 0; position: absolute; transform: translateX(-50%); visibility: hidden; white-space: nowrap; - z-index: 2; + z-index: 2; @media (min-width: 768px) and (max-width: 1024px) { - @at-root { + @at-root { .wc-columns-3#{&} { font-size: .8666em; } - } - } + } + } } // Added to Cart button. .added_to_cart { - font-size: 0.8em; + font-size: 0.8em; } // Quick View button. @@ -448,18 +445,18 @@ @media (min-width: 768px) and (max-width: 1024px) { - @at-root { + @at-root { .wc-columns-3#{&} { top: 15%; - } + } .wc-columns-4#{&}, .wc-columns-5#{&} { display: none; } - } - } + } + } } // Add to Cart button and grouped products View Products button. @@ -476,8 +473,8 @@ .wc-columns-5#{&} { display: none; } - } - } + } + } } // Select Options button. @@ -490,7 +487,7 @@ .added_to_cart { bottom: 1%; opacity: 1; - visibility: visible; + visibility: visible; } } } @@ -500,7 +497,7 @@ ins { background: none; - color: $color__accent; + color: $color__accent; } } } diff --git a/sass/woocommerce/_cart.scss b/sass/woocommerce/_cart.scss index 3cc7809..e072b98 100644 --- a/sass/woocommerce/_cart.scss +++ b/sass/woocommerce/_cart.scss @@ -12,20 +12,20 @@ border: none; margin: 0; text-align: left; - + thead { background: $color__background-hr; - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; @media (max-width: 768px) { display: none; } - + th { font-size: 14px; } } - + th, td { border: none; @@ -34,19 +34,19 @@ @media (max-width: 768px) { display: block; text-align: right; - } + } } .cart_item { - border: 1px solid $color__background-hr-dark; - + border: 1px solid $color__background-hr; + @media (max-width: 768px) { td:before { content: attr(data-title) ": "; font-weight: 700; float: left; - } + } td:first-of-type { padding-top: 30px; @@ -56,13 +56,13 @@ padding-bottom: 30px; } } - + a { color: $color__text-medium; display: block; font-weight: 600; line-height: 1; - + &:hover { color: $color__text-light; } @@ -71,7 +71,7 @@ .product-remove { font-size: 20px; text-align: center; - + &:before { content: none; } @@ -82,12 +82,11 @@ } .product-thumbnail { - + img { - height: auto; width: 80px; } - + &:before { content: none; } @@ -109,25 +108,25 @@ td.actions { padding: 30px 0 0; text-align: right; - + @media (max-width: 768px) { display: block; - + * { width: 100%; } } - + .coupon { float: left; - + @media (max-width: 768px) { float: none; margin-bottom: 5px; } label { - + @media (max-width: 768px) { display: none; } @@ -135,7 +134,7 @@ input { margin-right: 5px; - + @media (max-width: 768px) { margin-bottom: 10px; } @@ -148,45 +147,115 @@ width: 100%; } + .cross-sells { + float: left; + margin: 60px 0 -50px; + padding-right: 5%; + width: 50%; + + @media (max-width: 768px) { + padding-right: 0; + width: 100%; + } + + h2 { + font-size: 23px; + margin-top: 0; + } + + .product { + margin-bottom: 25px; + width: 48.25%; + + @media (min-width: 769px) { + + &:nth-of-type(2n+2) { + margin-right: 0; + } + + &:nth-child(2n+3) { + clear: left; + } + } + + @media (max-width: 768px) { + width: 48.25%; + + &:nth-of-type(2n+2) { + margin-right: 0; + } + } + + @media (max-width: 480px) { + width: 100%; + } + } + } + .cart_totals { float: right; - margin-top: 60px; + margin-top: 60px; text-align: left; - width: 40%; + width: 50%; @media (max-width: 768px) { - width: 100%; + width: 100%; } h2 { + font-size: 23px; margin-top: 0; @media (max-width: 768px) { - font-size: 23px; - } - + font-size: 23px; + } + @media (max-width: 480px) { - font-size: 20px; + font-size: 20px; } - } - + table { border: none; margin-bottom: 30px; - + tr { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; } - + th, td { border: none; padding: 8px 0; } - + td { text-align: right; + + ul { + list-style: none; + margin: 0 0 8px; + + li { + margin-bottom: 4px; + + &:last-of-type { + margin-bottom: 0; + } + } + + input { + margin-right: 6px; + } + } + + .woocommerce-shipping-destination { + margin-bottom: 8px + } + + form .selection { + text-align: left; + } } } @@ -197,12 +266,12 @@ .checkout-button { float: right; font-size: 16px; - + @media (max-width: 768px) { display: block; float: none; text-align: center; - width: 100%; + width: 100%; } } } @@ -214,7 +283,7 @@ .shopping-cart { display: inline-block; margin: 0 20px -10px 30px; - padding: 0 0 10px; + padding: 0 0 10px; } .shopping-cart-text { @@ -223,7 +292,7 @@ .shopping-cart-link { display: inline-block; - font-family: $font__headings; + font-family: $font__headings; position: relative; svg { @@ -232,7 +301,7 @@ height: 18.75px; vertical-align: text-bottom; width: 20px; - + @at-root .overlap-light .site-header:not(.stuck) .shopping-cart-link svg { fill: #fff; } @@ -261,7 +330,7 @@ svg { fill: $color__text-medium; - + .overlap-light .site-header:not(.stuck) & { fill: rgba(255, 255, 255, .8); } @@ -270,7 +339,7 @@ fill: rgba(45, 45, 45, .8); } } - + .shopping-cart-count { background: rgba(77, 143, 251, .8); } @@ -283,12 +352,12 @@ .shopping-cart-dropdown { background: #fff; - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; box-shadow: 0 1px 1px rgba(0, 0, 0, .075); - opacity: 0; + opacity: 0; position: absolute; right: 0; - text-align: left; + text-align: left; top: 100%; transform: scale(0.95); transition: all 0.15s ease-in; @@ -296,23 +365,23 @@ visibility: hidden; width: 303px; z-index: 99999; - + * { font-family: $font__main; } - + .widget { margin: 25px; max-height: 70vh; overflow-y: auto; - + li { overflow: initial; } .woocommerce-mini-cart__empty-message { display: block; - font-size: .95em; + font-size: .95em; font-weight: 600; padding-bottom: 0; } @@ -329,24 +398,24 @@ font-size: 14px; font-weight: 600; margin-left: 5px; - } + } .shopping-cart-link { margin-bottom: 15px; - + svg { margin: -3px 0 0; padding: 0; vertical-align: middle; } - + .shopping-cart-count { top: 2px; right: -25px; } &:hover { - + .shopping-cart-text { color: $color__text-medium; } diff --git a/sass/woocommerce/_checkout.scss b/sass/woocommerce/_checkout.scss index 64ed269..2e9eae0 100644 --- a/sass/woocommerce/_checkout.scss +++ b/sass/woocommerce/_checkout.scss @@ -44,7 +44,7 @@ table.woocommerce-checkout-review-order-table { thead { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; th { background: $color__background-hr; @@ -58,10 +58,16 @@ border: none; padding: 20px; text-align: left; + + ul { + font-size: 1rem; + list-style: none; + margin: 0; + } } .cart_item { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; font-size: 14px; @media (max-width: 768px) { @@ -79,7 +85,7 @@ tfoot { tr { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; } th, @@ -100,7 +106,7 @@ margin: 0; li { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; padding: 20px; position: relative; text-align: left; @@ -121,7 +127,7 @@ img:only-of-type { max-height: 50px; position: absolute; - right: 0; + right: 20px; top: 8px; } @@ -134,29 +140,29 @@ } p { - margin-bottom: 0;; + margin-bottom: 0; } } &.payment_method_stripe { - - img { - margin-top: -10px; - position: absolute; - top: 50%; - - &:nth-of-type(3) { - right: 0; - } - - &:nth-of-type(2) { - right: 37px; - } - - &:nth-of-type(1) { - right: 74px; - } - } + + .form-row-first, + .form-row-last { + margin-bottom: 0; + } + + .stripe-icon { + float: right; + margin-left: 5px; + } + + #wc-stripe-cc-form { + margin-top: 13px; + } + + .clear { + display: none; + } } } } @@ -169,7 +175,7 @@ } .woocommerce-terms-and-conditions-wrapper { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; padding: 20px; p { diff --git a/sass/woocommerce/_dashboard.scss b/sass/woocommerce/_dashboard.scss index 6eebda6..8ac37e5 100644 --- a/sass/woocommerce/_dashboard.scss +++ b/sass/woocommerce/_dashboard.scss @@ -32,7 +32,7 @@ } .woocommerce-MyAccount-navigation { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; float: left; margin-right: 4%; width: 26%; @@ -88,7 +88,7 @@ // Tables .woocommerce-MyAccount-orders, .woocommerce-table--order-downloads { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; font-size: 14px; thead { diff --git a/sass/woocommerce/_general.scss b/sass/woocommerce/_general.scss index a4ae5ca..d5c127c 100644 --- a/sass/woocommerce/_general.scss +++ b/sass/woocommerce/_general.scss @@ -1,6 +1,6 @@ // Repeated styles we need for @extend. .underline { - border-bottom: 2px solid $color__background-hr-dark; + border-bottom: 2px solid $color__background-hr; display: inline-block; margin: 0 0 20px; padding-bottom: 3px; diff --git a/sass/woocommerce/_menus.scss b/sass/woocommerce/_menus.scss index 16ace1c..10b7e6f 100644 --- a/sass/woocommerce/_menus.scss +++ b/sass/woocommerce/_menus.scss @@ -29,7 +29,7 @@ a, > span { - background: $color__background-hr-dark; + background: $color__background-hr; border-radius: 2px; color: $color__text-medium; display: inline-block; diff --git a/sass/woocommerce/_order-received.scss b/sass/woocommerce/_order-received.scss index 2a9d323..6952b74 100644 --- a/sass/woocommerce/_order-received.scss +++ b/sass/woocommerce/_order-received.scss @@ -10,7 +10,7 @@ } table { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; margin: 0; text-align: left; @@ -19,7 +19,7 @@ } tr { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; } th, @@ -47,7 +47,7 @@ padding: 13px 26px; li { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; font-size: 12px; padding: 13px 0; text-transform: uppercase; diff --git a/sass/woocommerce/_quick-view.scss b/sass/woocommerce/_quick-view.scss index c581107..6c27f49 100644 --- a/sass/woocommerce/_quick-view.scss +++ b/sass/woocommerce/_quick-view.scss @@ -54,8 +54,10 @@ float: left; padding: 20px 15px 20px 20px; width: 50%; - + img { + height: auto; + max-width: 100%; vertical-align: middle; } diff --git a/sass/woocommerce/_single.scss b/sass/woocommerce/_single.scss index 243bc57..3ad2903 100644 --- a/sass/woocommerce/_single.scss +++ b/sass/woocommerce/_single.scss @@ -262,7 +262,7 @@ } .product_meta { - border-top: 1px solid $color__background-hr-dark; + border-top: 1px solid $color__background-hr; color: $color__text-dark; font-size: 13px; padding-top: 25px; @@ -302,7 +302,7 @@ } .wc-tabs { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; list-style: none; margin: 0; overflow: hidden; diff --git a/sass/woocommerce/_tables.scss b/sass/woocommerce/_tables.scss index bd6aea5..540b376 100644 --- a/sass/woocommerce/_tables.scss +++ b/sass/woocommerce/_tables.scss @@ -9,7 +9,7 @@ } tr { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; } th, diff --git a/sass/woocommerce/_widgets.scss b/sass/woocommerce/_widgets.scss index e47eca4..37c7038 100644 --- a/sass/woocommerce/_widgets.scss +++ b/sass/woocommerce/_widgets.scss @@ -2,7 +2,7 @@ ## Active Product Filters Widget --------------------------------------------------------------*/ .widget.widget_layered_nav_filters { - + .chosen a { padding-left: 20px; position: relative; @@ -35,7 +35,7 @@ padding: 0; li { - border-bottom: 1px solid $color__background-hr-dark; + border-bottom: 1px solid $color__background-hr; line-height: 2; list-style: none; margin: 0; @@ -101,7 +101,7 @@ } .total { - border: 1px solid $color__background-hr-dark; + border: 1px solid $color__background-hr; border-right: 0; border-left: 0; margin-bottom: 20px; @@ -126,7 +126,7 @@ } &:first-of-type { - background: $color__background-hr-dark; + background: $color__background-hr; color: $color__text-medium; &:hover { @@ -174,7 +174,7 @@ .widget_price_filter { .ui-slider { - background: $color__background-hr-dark; + background: $color__background-hr; height: 3px; margin: 21px 3.5px 26px; position: relative; @@ -213,7 +213,7 @@ } .button { - background: $color__background-hr-dark; + background: $color__background-hr; color: $color__text-medium; float: right; @@ -245,7 +245,7 @@ margin-right: -6px; .tagcloud a { - background: $color__background-hr-dark; + background: $color__background-hr; border-radius: 2px; color: $color__text-medium; display: inline-block; diff --git a/style.css b/style.css index d237c48..54d936f 100644 --- a/style.css +++ b/style.css @@ -302,7 +302,7 @@ h6 { .site-footer .widget .widget-title, .archive:not(.woocommerce) .page-title, .yarpp-related .related-posts, .related-posts-section .related-posts, .comments-title, .comment-reply-title { - border-bottom: 2px solid #ebebeb; + border-bottom: 2px solid #e6e6e6; display: inline-block; margin: 0 0 20px; padding-bottom: 3px; @@ -382,7 +382,7 @@ body { background: #fff; } hr { - background-color: #f6f6f6; + background-color: #e6e6e6; border: 0; height: 1px; margin-bottom: 26px; } @@ -411,7 +411,7 @@ dl { dl dd { margin: 0 0 0 25px; } -img { +img:not(.custom-logo) { height: auto; max-width: 100%; } @@ -419,7 +419,7 @@ figure { margin: 15px 0; } table { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; margin: 0 0 26px; text-align: left; width: 100%; } @@ -430,20 +430,18 @@ table { @media (max-width: 768px) { table thead th { padding: 2%; } } - table th { - border: 1px solid #ebebeb; - color: #2d2d2d; - font-weight: 600; - padding: 8px 16px; - text-transform: uppercase; } - @media (max-width: 768px) { - table th { - padding: 2%; } } + table th, table td { + border: 1px solid #e6e6e6; padding: 8px 16px; } @media (max-width: 768px) { + table th, table td { padding: 2%; } } + table th { + color: #2d2d2d; + font-weight: 600; + text-transform: uppercase; } /*-------------------------------------------------------------- # - Forms @@ -524,7 +522,7 @@ input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { - border: 1px solid #ebebeb; + border: 1px solid #d9d9d9; border-radius: 2px; box-sizing: border-box; font-weight: normal; @@ -550,13 +548,13 @@ textarea { input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { - border-color: #d9d9d9; } + border-color: #cdcdcd; } input[type="checkbox"] { margin-right: 5px; } select { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; max-width: 100%; } textarea { @@ -564,7 +562,7 @@ textarea { label { color: #2d2d2d; - font-size: .9em; + font-size: .9rem; font-weight: 600; } fieldset legend { @@ -608,7 +606,7 @@ a { .main-navigation ul .sub-menu, .main-navigation ul .children { background: #fff; - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); opacity: 0; position: absolute; @@ -636,7 +634,7 @@ a { left: 100%; } .main-navigation ul .sub-menu li a, .main-navigation ul .children li a { - border-bottom: 1px solid #f6f6f6; + border-bottom: 1px solid #e6e6e6; font-size: 13px; outline: none; margin: 0 25px; @@ -882,7 +880,7 @@ a { #mobile-navigation { background: #fff; - border-bottom: 1px solid #f6f6f6; + border-bottom: 1px solid #e6e6e6; left: 0; overflow-x: hidden; overflow-y: scroll; @@ -905,7 +903,7 @@ a { position: relative; width: 100%; } #mobile-navigation ul li a { - border-bottom: 1px solid #f6f6f6; + border-bottom: 1px solid #e6e6e6; color: #2d2d2d; display: block; font-weight: 600; @@ -1002,7 +1000,7 @@ a { .pagination { text-align: center; } .pagination .page-numbers { - background: #ebebeb; + background: #e6e6e6; color: #626262; display: inline-block; margin-right: 3px; @@ -1043,7 +1041,7 @@ a { .site-content .post-navigation a:hover { color: #4d8ffb; } .site-content .post-navigation a .sub-title { - border-bottom: 2px solid #ebebeb; + border-bottom: 2px solid #e6e6e6; color: #828282; display: inline-block; font-size: 14px; @@ -1518,7 +1516,7 @@ a { border: 0; padding: 0; } .widget #wp-calendar thead { - border-bottom: 2px solid #f6f6f6; } + border-bottom: 2px solid #e6e6e6; } .widget #wp-calendar thead tr { background: none; } .widget #wp-calendar thead th { @@ -1639,7 +1637,7 @@ a { padding-left: 0; } @media (max-width: 768px) { .widget-area { - border-top: 1px solid #ebebeb; + border-top: 1px solid #e6e6e6; margin-top: 50px; padding: 50px 0 0; width: 100%; } } @@ -1649,7 +1647,7 @@ a { --------------------------------------------------------------*/ .site-header { background: #fff; - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; margin-bottom: 60px; padding: 25px 0; position: relative; @@ -1703,8 +1701,7 @@ a { .site-header .site-branding .site-title a { color: #2d2d2d; } .site-header .site-branding .custom-logo-link { - display: block; - line-height: 0; } + display: block; } .site-header .site-branding img { display: inline-block; vertical-align: middle; } @@ -1742,7 +1739,7 @@ a { right: 59px; top: 50%; } .site-header #header-search input[type="search"] { - background: rgba(0, 0, 0, 0.035); + background: rgba(0, 0, 0, 0.055); border: 0; box-sizing: border-box; height: 48px; @@ -1750,7 +1747,7 @@ a { right: 15px; width: 100%; } .site-header #header-search input[type="search"]:-webkit-autofill { - -webkit-box-shadow: 0 0 0 50px #f6f6f6 inset !important; } + -webkit-box-shadow: 0 0 0 50px #e6e6e6 inset !important; } .site-header #header-search button[type="submit"] { display: none; } .site-header #header-search #close-search { @@ -1874,7 +1871,7 @@ a { ## - Posts and pages --------------------------------------------------------------*/ .hentry { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; margin: 0 0 50px; padding: 0 0 25px; } .hentry:last-of-type { @@ -2048,7 +2045,7 @@ a { padding-right: 17px; padding-left: 17px; } .page-links a span { - background: #ebebeb; + background: #e6e6e6; display: inline-block; color: #626262; } .page-links a span:hover { @@ -2059,7 +2056,7 @@ a { margin: 0 0 50px; } .tags-links a, #page .widget_tag_cloud a { - background: #ebebeb; + background: #e6e6e6; border-radius: 2px; color: #626262; display: inline-block; @@ -2101,7 +2098,7 @@ a { font-size: 26px; } .search-results article { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; margin: 0 0 50px; padding: 0 0 30px; } .search-results article:last-of-type { @@ -2167,7 +2164,7 @@ a { --------------------------------------------------------------*/ .author-box { display: table; - border: 2px solid #f6f6f6; + border: 2px solid #e6e6e6; border-right: 0; border-left: 0; margin: 0; @@ -2292,20 +2289,30 @@ a { .comment-list { margin: 0 0 30px; padding: 0; } + .comment-list ol.children { + margin: 0; } + @media (min-width: 1025px) { + .comment-list li .comment { + margin-left: 80px; } } .comment-list .comment, .comment-list .pingback { color: #626262; display: block; } .comment-list .comment .comment-box, .comment-list .pingback .comment-box { - border-bottom: 1px solid #f6f6f6; + border-bottom: 1px solid #e6e6e6; padding: 25px 0; } - .comment-list .comment .comment-container, - .comment-list .pingback .comment-container { - margin-left: 80px; } + @media (min-width: 481px) { + .comment-list .comment .comment-container, + .comment-list .pingback .comment-container { + margin-left: 80px; } } .comment-list .comment .avatar-container, .comment-list .pingback .avatar-container { float: left; } + @media (max-width: 480px) { + .comment-list .comment .avatar-container, + .comment-list .pingback .avatar-container { + display: none; } } .comment-list .comment .avatar-container img, .comment-list .pingback .avatar-container img { display: block; @@ -2359,10 +2366,6 @@ a { .comment-list .comment .comment-reply-link:hover, .comment-list .pingback .comment-reply-link:hover { color: #4d8ffb; } - @media (min-width: 481px) { - .comment-list .comment .children, - .comment-list .pingback .children { - margin-left: 5px; } } .comment-list .pingback { list-style: none; } .comment-list .pingback .comment-container { @@ -2438,7 +2441,8 @@ a { #commentform .comment-form-cookies-consent { align-items: center; clear: both; - display: flex; } + display: flex; + margin: 0 0 8px; } #commentform .comment-form-cookies-consent input { line-height: 1; margin-right: 5px; } @@ -2448,16 +2452,17 @@ a { margin-bottom: 0; } #commentform .form-submit { - margin: 0; + margin: 25px 0 0; clear: both; } #commentform .comment-subscription-form { - margin: 15px 0 8px; } - #commentform .comment-subscription-form ~ p { - margin-top: 0; } + display: block; + clear: both; + margin: 0 0 8px; + overflow: auto; } + #commentform .comment-subscription-form input { + margin-right: 0; } #commentform .comment-subscription-form label { - color: #626262; - font-size: 13px; font-weight: normal; } .no-comments { @@ -2477,7 +2482,7 @@ a { background: #fff; margin-top: 75px; } .site-footer.footer-active-sidebar { - border-top: 1px solid #ebebeb; } + border-top: 1px solid #e6e6e6; } .no-footer-margin .site-footer { margin-top: 0; } .site-footer .widgets { @@ -2531,7 +2536,7 @@ a { text-align: center; width: 100%; } } .site-footer .bottom-bar { - border-top: 1px solid #ebebeb; + border-top: 1px solid #e6e6e6; overflow: auto; padding: 25px 0; } .site-footer .bottom-bar div:only-of-type { diff --git a/template-parts/content-page.php b/template-parts/content-page.php index 052304d..1d8dda3 100644 --- a/template-parts/content-page.php +++ b/template-parts/content-page.php @@ -12,16 +12,16 @@
    > - -
    - ', '' ); ?> -
    - -
    + + + +
    + ', '' ); ?> +
    diff --git a/woocommerce.css b/woocommerce.css index 8671a19..ac5c696 100644 --- a/woocommerce.css +++ b/woocommerce.css @@ -99,9 +99,9 @@ input.button.added:after, font-size: 14px; margin-bottom: 0; } .woocommerce table thead th { - background: #f6f6f6; } + background: #e6e6e6; } .woocommerce table tr { - border-bottom: 1px solid #ebebeb; } + border-bottom: 1px solid #e6e6e6; } .woocommerce table th, .woocommerce table td { border: none; @@ -135,7 +135,7 @@ input.button.added:after, border: none !important; } .woocommerce .woocommerce-pagination ul li a, .woocommerce .woocommerce-pagination ul li > span { - background: #ebebeb; + background: #e6e6e6; border-radius: 2px; color: #626262; display: inline-block; @@ -231,7 +231,7 @@ input.button.added:after, # Main --------------------------------------------------------------*/ .underline, .woocommerce .product .woocommerce-tabs h2, .woocommerce .product .upsells > h2, .woocommerce .product .related > h2 { - border-bottom: 2px solid #ebebeb; + border-bottom: 2px solid #e6e6e6; display: inline-block; margin: 0 0 20px; padding-bottom: 3px; @@ -306,7 +306,7 @@ input.button.added:after, .woocommerce .woocommerce-ordering { float: none; } } .woocommerce .woocommerce-ordering .ordering-selector-wrapper { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; border-radius: 2px; cursor: pointer; font-size: 13px; @@ -334,7 +334,7 @@ input.button.added:after, z-index: 999; } .woocommerce .woocommerce-ordering .ordering-selector-wrapper .ordering-dropdown { background: #fff; - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07); display: block; list-style: none; @@ -772,7 +772,7 @@ input.button.added:after, display: inline-block; } .woocommerce .product .summary .product_meta, .woocommerce .product .product-info-wrapper .product_meta { - border-top: 1px solid #ebebeb; + border-top: 1px solid #e6e6e6; color: #2d2d2d; font-size: 13px; padding-top: 25px; } @@ -801,7 +801,7 @@ input.button.added:after, .woocommerce .product .woocommerce-tabs h2 { font-size: 14px; } .woocommerce .product .woocommerce-tabs .wc-tabs { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; list-style: none; margin: 0; overflow: hidden; @@ -846,7 +846,7 @@ input.button.added:after, list-style: none; margin: 0; } .woocommerce .product .woocommerce-Reviews .comment_container { - border-bottom: 1px solid #f6f6f6; + border-bottom: 1px solid #e6e6e6; padding: 25px 0; } .woocommerce .product .woocommerce-Reviews .comment_container img { border-radius: 50%; @@ -993,6 +993,8 @@ input.button.added:after, padding: 20px 15px 20px 20px; width: 50%; } #quick-view-container .product-content-wrapper .product-image-wrapper img { + height: auto; + max-width: 100%; vertical-align: middle; } @media (max-width: 768px) { #quick-view-container .product-content-wrapper .product-image-wrapper { @@ -1048,7 +1050,7 @@ input.button.added:after, padding: 0; } .cart_list li, .product_list_widget li { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; line-height: 2; list-style: none; margin: 0; @@ -1096,7 +1098,7 @@ input.button.added:after, top: 22px; } .widget_shopping_cart .total { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; border-right: 0; border-left: 0; margin-bottom: 20px; @@ -1114,7 +1116,7 @@ input.button.added:after, font-size: 13px; padding: 10px 19px; } .widget_shopping_cart .buttons a:first-of-type { - background: #ebebeb; + background: #e6e6e6; color: #626262; } .widget_shopping_cart .buttons a:first-of-type:hover { background: #4d8ffb; @@ -1144,7 +1146,7 @@ input.button.added:after, ## - Price Filter Widget --------------------------------------------------------------*/ .widget_price_filter .ui-slider { - background: #ebebeb; + background: #e6e6e6; height: 3px; margin: 21px 3.5px 26px; position: relative; } @@ -1173,7 +1175,7 @@ input.button.added:after, .widget_price_filter .price_slider_amount .price_label span { font-weight: bold; } .widget_price_filter .price_slider_amount .button { - background: #ebebeb; + background: #e6e6e6; color: #626262; float: right; } .widget_price_filter .price_slider_amount .button:hover { @@ -1196,7 +1198,7 @@ input.button.added:after, .widget.widget_product_tag_cloud { margin-right: -6px; } .widget.widget_product_tag_cloud .tagcloud a { - background: #ebebeb; + background: #e6e6e6; border-radius: 2px; color: #626262; display: inline-block; @@ -1217,7 +1219,7 @@ input.button.added:after, .woocommerce-info, .woocommerce-store-notice { align-items: center; - background: #f6f6f6; + background: #e6e6e6; color: #2d2d2d; display: flex; font-size: 14px; @@ -1294,8 +1296,8 @@ input.button.added:after, margin: 0; text-align: left; } .woocommerce-cart table.cart thead { - background: #f6f6f6; - border: 1px solid #ebebeb; } + background: #e6e6e6; + border: 1px solid #e6e6e6; } @media (max-width: 768px) { .woocommerce-cart table.cart thead { display: none; } } @@ -1311,7 +1313,7 @@ input.button.added:after, display: block; text-align: right; } } .woocommerce-cart table.cart .cart_item { - border: 1px solid #ebebeb; } + border: 1px solid #e6e6e6; } @media (max-width: 768px) { .woocommerce-cart table.cart .cart_item td:before { content: attr(data-title) ": "; @@ -1337,7 +1339,6 @@ input.button.added:after, .woocommerce-cart table.cart .cart_item .product-remove { text-align: left; } } .woocommerce-cart table.cart .cart_item .product-thumbnail img { - height: auto; width: 80px; } .woocommerce-cart table.cart .cart_item .product-thumbnail:before { content: none; } @@ -1372,15 +1373,45 @@ input.button.added:after, .woocommerce-cart .cart-collaterals { width: 100%; } +.woocommerce-cart .cross-sells { + float: left; + margin: 60px 0 -50px; + padding-right: 5%; + width: 50%; } + @media (max-width: 768px) { + .woocommerce-cart .cross-sells { + padding-right: 0; + width: 100%; } } + .woocommerce-cart .cross-sells h2 { + font-size: 23px; + margin-top: 0; } + .woocommerce-cart .cross-sells .product { + margin-bottom: 25px; + width: 48.25%; } + @media (min-width: 769px) { + .woocommerce-cart .cross-sells .product:nth-of-type(2n+2) { + margin-right: 0; } + .woocommerce-cart .cross-sells .product:nth-child(2n+3) { + clear: left; } } + @media (max-width: 768px) { + .woocommerce-cart .cross-sells .product { + width: 48.25%; } + .woocommerce-cart .cross-sells .product:nth-of-type(2n+2) { + margin-right: 0; } } + @media (max-width: 480px) { + .woocommerce-cart .cross-sells .product { + width: 100%; } } + .woocommerce-cart .cart_totals { float: right; margin-top: 60px; text-align: left; - width: 40%; } + width: 50%; } @media (max-width: 768px) { .woocommerce-cart .cart_totals { width: 100%; } } .woocommerce-cart .cart_totals h2 { + font-size: 23px; margin-top: 0; } @media (max-width: 768px) { .woocommerce-cart .cart_totals h2 { @@ -1392,13 +1423,26 @@ input.button.added:after, border: none; margin-bottom: 30px; } .woocommerce-cart .cart_totals table tr { - border-bottom: 1px solid #ebebeb; } + border-bottom: 1px solid #e6e6e6; } .woocommerce-cart .cart_totals table th, .woocommerce-cart .cart_totals table td { border: none; padding: 8px 0; } .woocommerce-cart .cart_totals table td { text-align: right; } + .woocommerce-cart .cart_totals table td ul { + list-style: none; + margin: 0 0 8px; } + .woocommerce-cart .cart_totals table td ul li { + margin-bottom: 4px; } + .woocommerce-cart .cart_totals table td ul li:last-of-type { + margin-bottom: 0; } + .woocommerce-cart .cart_totals table td ul input { + margin-right: 6px; } + .woocommerce-cart .cart_totals table td .woocommerce-shipping-destination { + margin-bottom: 8px; } + .woocommerce-cart .cart_totals table td form .selection { + text-align: left; } .woocommerce-cart .cart_totals .shipping-calculator-form { margin: 6px 0; } .woocommerce-cart .cart_totals .checkout-button { @@ -1459,7 +1503,7 @@ input.button.added:after, .site-header .shopping-cart-dropdown { background: #fff; - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); opacity: 0; position: absolute; @@ -1540,9 +1584,9 @@ input.button.added:after, width: 100%; } } .woocommerce table.woocommerce-checkout-review-order-table thead { - border: 1px solid #ebebeb; } + border: 1px solid #e6e6e6; } .woocommerce table.woocommerce-checkout-review-order-table thead th { - background: #f6f6f6; + background: #e6e6e6; font-size: 14px; } .woocommerce table.woocommerce-checkout-review-order-table th, @@ -1550,9 +1594,14 @@ input.button.added:after, border: none; padding: 20px; text-align: left; } + .woocommerce table.woocommerce-checkout-review-order-table th ul, + .woocommerce table.woocommerce-checkout-review-order-table td ul { + font-size: 1rem; + list-style: none; + margin: 0; } .woocommerce table.woocommerce-checkout-review-order-table .cart_item { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; font-size: 14px; } @media (max-width: 768px) { .woocommerce table.woocommerce-checkout-review-order-table .cart_item td:first-of-type { @@ -1561,7 +1610,7 @@ input.button.added:after, padding-bottom: 30px; } } .woocommerce table.woocommerce-checkout-review-order-table tfoot tr { - border-bottom: 1px solid #ebebeb; } + border-bottom: 1px solid #e6e6e6; } .woocommerce table.woocommerce-checkout-review-order-table tfoot th, .woocommerce table.woocommerce-checkout-review-order-table tfoot td { @@ -1574,7 +1623,7 @@ input.button.added:after, list-style: none; margin: 0; } .woocommerce #payment .payment_methods li { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; padding: 20px; position: relative; text-align: left; } @@ -1587,7 +1636,7 @@ input.button.added:after, .woocommerce #payment .payment_methods li img:only-of-type { max-height: 50px; position: absolute; - right: 0; + right: 20px; top: 8px; } .woocommerce #payment .payment_methods li .payment_box { font-size: 14px; @@ -1596,22 +1645,22 @@ input.button.added:after, padding-top: 20px; } .woocommerce #payment .payment_methods li .payment_box p { margin-bottom: 0; } - .woocommerce #payment .payment_methods li.payment_method_stripe img { - margin-top: -10px; - position: absolute; - top: 50%; } - .woocommerce #payment .payment_methods li.payment_method_stripe img:nth-of-type(3) { - right: 0; } - .woocommerce #payment .payment_methods li.payment_method_stripe img:nth-of-type(2) { - right: 37px; } - .woocommerce #payment .payment_methods li.payment_method_stripe img:nth-of-type(1) { - right: 74px; } + .woocommerce #payment .payment_methods li.payment_method_stripe .form-row-first, + .woocommerce #payment .payment_methods li.payment_method_stripe .form-row-last { + margin-bottom: 0; } + .woocommerce #payment .payment_methods li.payment_method_stripe .stripe-icon { + float: right; + margin-left: 5px; } + .woocommerce #payment .payment_methods li.payment_method_stripe #wc-stripe-cc-form { + margin-top: 13px; } + .woocommerce #payment .payment_methods li.payment_method_stripe .clear { + display: none; } .woocommerce #payment .form-row select { width: auto; } .woocommerce #payment .woocommerce-terms-and-conditions-wrapper { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; padding: 20px; } .woocommerce #payment .woocommerce-terms-and-conditions-wrapper p { margin-bottom: 14px; } @@ -1634,13 +1683,13 @@ input.button.added:after, margin: 0 0 25px; } .woocommerce-order-received table { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; margin: 0; text-align: left; } .woocommerce-order-received table thead th { - background: #f6f6f6; } + background: #e6e6e6; } .woocommerce-order-received table tr { - border-bottom: 1px solid #ebebeb; } + border-bottom: 1px solid #e6e6e6; } .woocommerce-order-received table th, .woocommerce-order-received table td { border: none; } @@ -1655,12 +1704,12 @@ input.button.added:after, margin-bottom: 50px; } .woocommerce-order-received .woocommerce-thankyou-order-details { - background: #f6f6f6; + background: #e6e6e6; list-style: none; margin: 0 0 25px; padding: 13px 26px; } .woocommerce-order-received .woocommerce-thankyou-order-details li { - border-bottom: 1px solid #ebebeb; + border-bottom: 1px solid #e6e6e6; font-size: 12px; padding: 13px 0; text-transform: uppercase; } @@ -1698,7 +1747,7 @@ input.button.added:after, max-width: 75%; } } .woocommerce-account .woocommerce-MyAccount-navigation { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; float: left; margin-right: 4%; width: 26%; } @@ -1735,7 +1784,7 @@ input.button.added:after, font-size: 13px; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-table--order-downloads { - border: 1px solid #ebebeb; + border: 1px solid #e6e6e6; font-size: 14px; } @media (max-width: 768px) { .woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-orders thead, diff --git a/woocommerce/functions.php b/woocommerce/functions.php index 55fe5ae..8966ff0 100644 --- a/woocommerce/functions.php +++ b/woocommerce/functions.php @@ -22,11 +22,9 @@ function polestar_woocommerce_setup() { if ( get_theme_mod( 'product_gallery' ) == 'slider_lightbox' ) { add_theme_support( 'wc-product-gallery-lightbox' ); - } - elseif ( get_theme_mod( 'product_gallery' ) == 'slider_zoom' ) { + } elseif ( get_theme_mod( 'product_gallery' ) == 'slider_zoom' ) { add_theme_support( 'wc-product-gallery-zoom' ); - } - elseif ( get_theme_mod( 'product_gallery' ) == 'slider_lightbox_zoom' ) { + } elseif ( get_theme_mod( 'product_gallery' ) == 'slider_lightbox_zoom' ) { add_theme_support( 'wc-product-gallery-lightbox' ); add_theme_support( 'wc-product-gallery-zoom' ); } diff --git a/woocommerce/template-tags.php b/woocommerce/template-tags.php index 7d5d297..79ff5b1 100644 --- a/woocommerce/template-tags.php +++ b/woocommerce/template-tags.php @@ -26,9 +26,6 @@ function polestar_woocommerce_change_hooks() { remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 ); add_action( 'woocommerce_after_single_product_summary', 'polestar_woocommerce_output_upsells', 15 ); - // Remove the cross-sell display. - remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display' ); - // Add Quick View hooks. add_action( 'polestar_woocommerce_quick_view_images', 'polestar_woocommerce_quick_view_image', 5 ); add_action( 'polestar_woocommerce_quick_view_title', 'woocommerce_template_single_title', 5 );