/** * prettyPhoto.scss * Styles for the prettyPhoto lightbox script. Includes a custom WooCommerce theme. * http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ */ /** * Imports */ @import 'mixins'; @import 'variables'; @import 'fonts'; /** * Mixins */ @mixin button() { border-radius: 100%; height: 1em; width: 1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); background-color: #444; color: #fff !important; font-size: 16px !important; line-height: 1em; @include transition(); &:hover { background-color: #000; } } /** * Custom WooCommerce prettyPhoto theme */ div.pp_woocommerce { .pp_content_container { background: #fff; border-radius: 3px; box-shadow: 0 1px 30px rgba(0, 0, 0, 0.25); padding: 20px 0; @include clearfix(); } .pp_loaderIcon { @include loader(); } div.ppt { color: black; } .pp_gallery { ul { li { a { border: 1px solid rgba(0, 0, 0, 0.5); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 2px; display: block; &:hover { border-color: #000; } } &.selected { a { border-color: #000; } } } } } .pp_previous, .pp_next { &::before { @include button(); font-family: 'WooCommerce'; content: '\e00b'; text-indent: 0; display: none; position: absolute; top: 50%; margin-top: -10px; text-align: center; } &:hover { &::before { display: block; } } } .pp_previous { &::before { left: 1em; } } .pp_next { &::before { right: 1em; font-family: 'WooCommerce'; content: '\e008'; } } .pp_details { margin: 0; padding-top: 1em; } .pp_nav, .pp_description { font-size: 14px; } .pp_nav, .pp_nav p, .pp_play, .pp_nav .pp_pause, .pp_arrow_previous, .pp_arrow_next { margin: 0; } .pp_nav { margin-right: 1em; position: relative; } .pp_close { @include button(); top: -0.5em; right: -0.5em; font-size: 1.618em !important; &::before { font-family: 'WooCommerce'; content: '\e013'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } .pp_arrow_previous, .pp_arrow_next { @include button(); position: relative; margin-top: -1px; &::before { font-family: 'WooCommerce'; content: '\e00b'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } .pp_arrow_previous { margin-right: 0.5em; } .pp_arrow_next { margin-left: 0.5em; &::before { content: '\e008'; } } a.pp_expand, a.pp_contract { @include button(); right: auto; left: -0.5em; top: -0.5em; font-size: 1.618em !important; &::before { font-family: 'WooCommerce'; content: '\e005'; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; text-indent: 0; } } a.pp_contract { &::before { content: '\e004'; } } #respond { margin: 0; width: 100%; background: none; border: none; padding: 0; .form-submit { margin-top: 0; float: none; } } .pp_inline { padding: 0!important; } } // RTL support .rtl { div.pp_woocommerce { .pp_content_container { text-align: right; } } } @media only screen and (max-width: 768px) { div.pp_woocommerce { left: 5% !important; right: 5% !important; box-sizing: border-box; width: 90% !important; .pp_gallery, .pp_previous, .pp_next, .pp_expand, .pp_contract { display: none !important; } .pp_arrow_previous, .pp_arrow_next, .pp_close { height: 44px; width: 44px; font-size: 44px; line-height: 44px; &::before { font-size: 44px; } } .pp_description { display: none !important; } .pp_details { width: 100% !important; } } .pp_content { width: 100% !important; #pp_full_res { & > img { width: 100% !important; height: auto !important; } } } .currentTextHolder { line-height: 3; } } /** * Default prettyPhoto css * Do not edit! */ div.pp_pic_holder a:focus { outline: none; } div.pp_overlay { background: #000; display: none; left: 0; position: absolute; top: 0; width: 100%; z-index: 9999; } div.pp_pic_holder { display: none; position: absolute; width: 100px; z-index: 10000; } .pp_top { height: 20px; position: relative; } * html .pp_top { padding: 0 20px; } .pp_top .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_top .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_top .pp_middle { left: 0; position: static; } .pp_top .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_content { height: 40px; min-width: 40px; } * html .pp_content { width: 40px; } .pp_fade { display: none; } .pp_content_container { position: relative; text-align: left; width: 100%; } .pp_content_container .pp_left { padding-left: 20px; } .pp_content_container .pp_right { padding-right: 20px; } .pp_content_container .pp_details { float: left; margin: 10px 0 2px; } .pp_description { display: none; margin: 0; } .pp_social { float: left; margin: 0; } .pp_social .facebook { float: left; margin-left: 5px; width: 55px; overflow: hidden; } .pp_social .twitter { float: left; } .pp_nav { clear: right; float: left; margin: 3px 10px 0 0; } .pp_nav p { float: left; margin: 2px 4px; white-space: nowrap; } .pp_nav .pp_play, .pp_nav .pp_pause { float: left; margin-right: 4px; text-indent: -10000px; } a.pp_arrow_previous, a.pp_arrow_next { display: block; float: left; height: 15px; margin-top: 3px; text-indent: -100000px; width: 14px; } .pp_hoverContainer { position: absolute; top: 0; width: 100%; z-index: 2000; } .pp_gallery { display: none; left: 50%; margin-top: -50px; position: absolute; z-index: 10000; } .pp_gallery div { float: left; overflow: hidden; position: relative; } .pp_gallery ul { float: left; height: 35px; margin: 0 0 0 5px; padding: 0; position: relative; white-space: nowrap; } .pp_gallery ul a { border: 1px #000 solid; border: 1px rgba(0, 0, 0, 0.5) solid; display: block; float: left; height: 33px; overflow: hidden; } .pp_gallery ul a:hover, .pp_gallery li.selected a { border-color: #fff; } .pp_gallery ul a img { border: 0; } .pp_gallery li { display: block; float: left; margin: 0 5px 0 0; padding: 0; } .pp_gallery li.default a { display: block; height: 33px; width: 50px; } .pp_gallery li.default a img { display: none; } .pp_gallery .pp_arrow_previous, .pp_gallery .pp_arrow_next { margin-top: 7px !important; } a.pp_next { display: block; float: right; height: 100%; text-indent: -10000px; width: 49%; } a.pp_previous { display: block; float: left; height: 100%; text-indent: -10000px; width: 49%; } a.pp_expand, a.pp_contract { cursor: pointer; display: none; height: 20px; position: absolute; right: 30px; text-indent: -10000px; top: 10px; width: 20px; z-index: 20000; } a.pp_close { position: absolute; right: 0; top: 0; display: block; text-indent: -10000px; } .pp_bottom { height: 20px; position: relative; } * html .pp_bottom { padding: 0 20px; } .pp_bottom .pp_left { height: 20px; left: 0; position: absolute; width: 20px; } .pp_bottom .pp_middle { height: 20px; left: 20px; position: absolute; right: 20px; } * html .pp_bottom .pp_middle { left: 0; position: static; } .pp_bottom .pp_right { height: 20px; left: auto; position: absolute; right: 0; top: 0; width: 20px; } .pp_loaderIcon { display: block; height: 24px; left: 50%; margin: -12px 0 0 -12px; position: absolute; top: 50%; width: 24px; } #pp_full_res .pp_inline { text-align: left; } div.ppt { color: #fff !important; font-weight: 700; display: none; font-size: 17px; margin: 0 0 5px 15px; z-index: 9999; } /** * Brands Helper Functions * * Important: For internal use only by the Automattic\WooCommerce\Internal\Brands package. * * @package WooCommerce * @version 9.4.0 */ declare( strict_types = 1); /** * Helper function :: wc_get_brand_thumbnail_url function. * * @param int $brand_id Brand ID. * @param string $size Thumbnail image size. * @return string */ function wc_get_brand_thumbnail_url( $brand_id, $size = 'full' ) { $thumbnail_id = get_term_meta( $brand_id, 'thumbnail_id', true ); if ( $thumbnail_id ) { $thumb_src = wp_get_attachment_image_src( $thumbnail_id, $size ); } return ! empty( $thumb_src ) ? current( $thumb_src ) : ''; } /** * Helper function :: wc_get_brand_thumbnail_image function. * * @since 9.4.0 * * @param object $brand Brand term. * @param string $size Thumbnail image size. * @return string */ function wc_get_brand_thumbnail_image( $brand, $size = '' ) { $thumbnail_id = get_term_meta( $brand->term_id, 'thumbnail_id', true ); if ( '' === $size || 'brand-thumb' === $size ) { /** * Filter the brand's thumbnail size. * * @since 9.4.0 * * @param string $size Brand's thumbnail size. */ $size = apply_filters( 'woocommerce_brand_thumbnail_size', 'shop_catalog' ); } if ( $thumbnail_id ) { $image_src = wp_get_attachment_image_src( $thumbnail_id, $size ); $image_src = $image_src[0]; $dimensions = wc_get_image_size( $size ); $image_srcset = function_exists( 'wp_get_attachment_image_srcset' ) ? wp_get_attachment_image_srcset( $thumbnail_id, $size ) : false; $image_sizes = function_exists( 'wp_get_attachment_image_sizes' ) ? wp_get_attachment_image_sizes( $thumbnail_id, $size ) : false; } else { $image_src = wc_placeholder_img_src(); $dimensions = wc_get_image_size( $size ); $image_srcset = false; $image_sizes = false; } // Add responsive image markup if available. if ( $image_srcset && $image_sizes ) { $image = '' . esc_attr( $brand->name ) . ''; } else { $image = '' . esc_attr( $brand->name ) . ''; } return $image; } /** * Retrieves product's brands. * * @param int $post_id Post ID (default: 0). * @param string $sep Seperator (default: '). * @param string $before Before item (default: ''). * @param string $after After item (default: ''). * @return array List of terms */ function wc_get_brands( $post_id = 0, $sep = ', ', $before = '', $after = '' ) { global $post; if ( ! $post_id ) { $post_id = $post->ID; } return get_the_term_list( $post_id, 'product_brand', $before, $sep, $after ); } /** * Polyfills for backwards compatibility with the WooCommerce Brands plugin. */ if ( ! function_exists( 'get_brand_thumbnail_url' ) ) { /** * Polyfill for get_brand_thumbnail_image. * * @param int $brand_id Brand ID. * @param string $size Thumbnail image size. * @return string */ function get_brand_thumbnail_url( $brand_id, $size = 'full' ) { return wc_get_brand_thumbnail_url( $brand_id, $size ); } } if ( ! function_exists( 'get_brand_thumbnail_image' ) ) { /** * Polyfill for get_brand_thumbnail_image. * * @param object $brand Brand term. * @param string $size Thumbnail image size. * @return string */ function get_brand_thumbnail_image( $brand, $size = '' ) { return wc_get_brand_thumbnail_image( $brand, $size ); } } if ( ! function_exists( 'get_brands' ) ) { /** * Polyfill for get_brands. * * @param int $post_id Post ID (default: 0). * @param string $sep Seperator (default: '). * @param string $before Before item (default: ''). * @param string $after After item (default: ''). * @return array List of terms */ function get_brands( $post_id = 0, $sep = ', ', $before = '', $after = '' ) { return wc_get_brands( $post_id, $sep, $before, $after ); } }